From 81170853ec01588876dce4692fec173628514ef3 Mon Sep 17 00:00:00 2001 From: Mihai Parparita Date: Tue, 3 Jul 2012 12:38:28 -0700 Subject: [PATCH] Update the browser tag sample to turn it into a mini browser. --- browser-tag/README.md | 3 +++ browser-tag/background.js | 6 ----- browser-tag/browser.css | 46 +++++++++++++++++++++++++++++++++++++++ browser-tag/browser.html | 18 +++++++++++++++ browser-tag/browser.js | 34 +++++++++++++++++++++++++++++ browser-tag/main.html | 6 ----- browser-tag/main.js | 6 +++++ browser-tag/manifest.json | 6 ++--- 8 files changed, 110 insertions(+), 15 deletions(-) create mode 100644 browser-tag/README.md delete mode 100644 browser-tag/background.js create mode 100644 browser-tag/browser.css create mode 100644 browser-tag/browser.html create mode 100644 browser-tag/browser.js delete mode 100644 browser-tag/main.html create mode 100644 browser-tag/main.js diff --git a/browser-tag/README.md b/browser-tag/README.md new file mode 100644 index 00000000..a0abac34 --- /dev/null +++ b/browser-tag/README.md @@ -0,0 +1,3 @@ +Sample that shows how to use the [browser tag](http://developer.chrome.com/trunk/apps/app_external.html#browsertag) in an app to create a mini browser. + +The app's main window contains a `` that is sized to fit most of it (via the `width` and `height` attributes). The location bar is used to update its `src` attribute. diff --git a/browser-tag/background.js b/browser-tag/background.js deleted file mode 100644 index 4b665864..00000000 --- a/browser-tag/background.js +++ /dev/null @@ -1,6 +0,0 @@ -chrome.experimental.app.onLaunched.addListener(function() { - chrome.appWindow.create('main.html', { - 'width': 400, - 'height': 500 - }); -}); diff --git a/browser-tag/browser.css b/browser-tag/browser.css new file mode 100644 index 00000000..56427b11 --- /dev/null +++ b/browser-tag/browser.css @@ -0,0 +1,46 @@ +body { + margin: 0; + padding: 0; + overflow: hidden; +} + +#controls { + padding: 3px; + border-bottom: solid 1px #ccc; +} + +#controls button, +#controls input { + font-size: 14px; +} + +button, +input[type="submit"] { + border: solid 1px #ccc; + background: #eee; + border-radius: 2px; +} + +#location { + border: solid 1px #ccc; + padding: 2px; + width: 100%; + -webkit-box-sizing: border-box; +} + +#controls { + display: -webkit-flex; + -webit-flex-direction: column; +} + +#controls #location-form { + -webkit-flex: 1; + display: -webkit-flex; + -webit-flex-direction: column; +} + +#controls #center-column { + -webkit-flex: 1; + margin: 0 2px; +} + diff --git a/browser-tag/browser.html b/browser-tag/browser.html new file mode 100644 index 00000000..e25a71e7 --- /dev/null +++ b/browser-tag/browser.html @@ -0,0 +1,18 @@ + + + + + + +
+ +
+
+ +
+ +
+
+ + + diff --git a/browser-tag/browser.js b/browser-tag/browser.js new file mode 100644 index 00000000..ae837e32 --- /dev/null +++ b/browser-tag/browser.js @@ -0,0 +1,34 @@ +onresize = doLayout; + +onload = function() { + doLayout(); + + document.querySelector('#new-browser').onclick = function() { + chrome.appWindow.create('browser.html', { + 'width': 1024, + 'height': 768 + }); + }; + + document.querySelector('#home').onclick = function() { + document.querySelector('browser').src = + document.querySelector('#location').value = 'http://www.google.com/'; + }; + + document.querySelector('#location-form').onsubmit = function(e) { + e.preventDefault(); + + document.querySelector('browser').src = + document.querySelector('#location').value; + } +} + +function doLayout() { + var browser = document.querySelector('browser'); + var controls = document.querySelector('#controls'); + var controlsHeight = controls.offsetHeight; + var windowWidth = document.documentElement.clientWidth; + var windowHeight = document.documentElement.clientHeight; + browser.width = windowWidth; + browser.height = windowHeight - controlsHeight; +} diff --git a/browser-tag/main.html b/browser-tag/main.html deleted file mode 100644 index d847adec..00000000 --- a/browser-tag/main.html +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/browser-tag/main.js b/browser-tag/main.js new file mode 100644 index 00000000..6c7edb39 --- /dev/null +++ b/browser-tag/main.js @@ -0,0 +1,6 @@ +chrome.experimental.app.onLaunched.addListener(function() { + chrome.appWindow.create('browser.html', { + 'width': 1024, + 'height': 768 + }); +}); diff --git a/browser-tag/manifest.json b/browser-tag/manifest.json index 48be2d31..32bfa3f0 100644 --- a/browser-tag/manifest.json +++ b/browser-tag/manifest.json @@ -1,10 +1,10 @@ { - "name": "Browser Plugin", - "version": "1.0", "manifest_version": 2, + "name": "Browser Tag", + "version": "1.0", "app": { "background": { - "scripts": ["background.js"] + "scripts": ["main.js"] } }, "permissions": [