Permalink
Browse files

Update <browser> sample with new events and methods.

http://crrev.com/161734 exposed additional browser plugin methods and events to
the <browser> shim. This uses them to make the sample into a more realistic
browser:
- Add back/forward buttons
- Update the URL bar when navigating
- Handle crashes (complete with sad tab-like page)
  • Loading branch information...
1 parent 06bdeae commit f818cff2d102a483ebb14dc8925086134d83c6ca @mihaip mihaip committed Oct 16, 2012
Showing with 135 additions and 15 deletions.
  1. +52 −2 browser-tag/browser.css
  2. +13 −2 browser-tag/browser.html
  3. +70 −11 browser-tag/browser.js
View
@@ -1,7 +1,7 @@
body {
margin: 0;
padding: 0;
- overflow: hidden;
+ font-family: Lucida Grande, Arial, sans-serif;
}
#controls {
@@ -19,10 +19,27 @@ body {
button,
input[type="submit"] {
- border: solid 1px #ccc;
+ border: solid 1px transparent;
+ background: transparent;
+}
+
+button:hover,
+input[type="submit"]:hover {
+ border-color: #ccc;
background: -webkit-linear-gradient(top, #f2f2f2 0%, #cccccc 99%);
}
+/* These glyphs are on the small side, make them look more natural when
+compared to the back/forward buttons */
+#controls #home,
+#controls #terminate {
+ font-size: 24px;
+}
+
+#controls #reload {
+ font-size: 20px;
+}
+
#location {
border: solid 1px #ccc;
padding: 2px;
@@ -45,3 +62,36 @@ input[type="submit"] {
-webkit-flex: 1;
}
+#sad-browser,
+browser {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+}
+
+/* Due to http://crbug.com/156219 we can't use display: none */
+#sad-browser,
+.crashed browser {
+ visibility: hidden;
+ visibility: hidden;
+}
+
+.crashed #sad-browser {
+ visibility: visible;
+ background: #343f51;
+ text-align: center;
+ color: #fff;
+}
+
+#sad-browser h2 {
+ font-size: 14px;
+}
+
+#sad-browser p {
+ font-size: 11px;
+}
+
+#sad-browser-icon {
+ font-size: 96px;
+ margin-bottom: 10px;
+}
View
@@ -6,8 +6,11 @@
<body>
<div id="controls">
- <button id="new-browser">New Window</button>
- <button id="home">Home</button>
+ <button id="back" title="Go Back">&#9664;</button>
+ <button id="forward" title="Go Forward">&#9654;</button>
+ <button id="home" title="Go Home">&#8962;</button>
+ <button id="reload" title="Reload">&#10227;</button>
+ <button id="terminate" title="Simulate Crash">&#9760;</button>
<form id="location-form">
<div id="center-column">
@@ -18,5 +21,13 @@
</div>
<browser src="http://www.google.com/" width="640" height="480"></browser>
+
+ <div id="sad-browser">
+ <div id="sad-browser-icon">&#9762;</div>
+ <h2>Aw, Snap!</h2>
+
+ <p>Something went wrong while displaying this webpage.
+ To continue, reload or go to another page.</p>
+ </div>
</body>
</html>
View
@@ -1,28 +1,46 @@
window.onresize = doLayout;
onload = function() {
+ var browser = document.querySelector('browser');
doLayout();
- document.querySelector('#new-browser').onclick = function() {
- chrome.app.window.create('browser.html', {
- 'width': 1024,
- 'height': 768
- });
+ document.querySelector('#back').onclick = function() {
+ browser.back();
+ };
+
+ document.querySelector('#forward').onclick = function() {
+ browser.forward();
};
document.querySelector('#home').onclick = function() {
- document.querySelector('browser').src =
- document.querySelector('#location').value = 'http://www.google.com/';
+ navigateTo('http://www.google.com/');
+ };
+
+ document.querySelector('#reload').onclick = function() {
+ browser.reload();
+ };
+
+ document.querySelector('#terminate').onclick = function() {
+ browser.terminate();
};
document.querySelector('#location-form').onsubmit = function(e) {
e.preventDefault();
-
- document.querySelector('browser').src =
- document.querySelector('#location').value;
+ navigateTo(document.querySelector('#location').value);
};
+
+ browser.addEventListener('crash', handleCrash);
+ browser.addEventListener('navigation', handleNavigation);
+ browser.addEventListener('loadStart', handleLoadStart);
+ browser.addEventListener('loadAbort', handleLoadAbort);
+ browser.addEventListener('loadRedirect', handleLoadRedirect);
};
+function navigateTo(url) {
+ document.body.classList.remove('crashed');
+ document.querySelector('browser').src = url;
+}
+
function doLayout() {
var browser = document.querySelector('browser');
var controls = document.querySelector('#controls');
@@ -32,5 +50,46 @@ function doLayout() {
browser.width = windowWidth;
browser.height = windowHeight - controlsHeight;
- console.log(windowWidth, windowHeight);
+ var sadBrowser = document.querySelector('#sad-browser');
+ sadBrowser.style.width = browser.width + 'px';
+ sadBrowser.style.height = browser.height * 2/3 + 'px';
+ sadBrowser.style.paddingTop = browser.height/3 + 'px';
+}
+
+function handleCrash(event) {
+ document.body.classList.add('crashed');
+}
+
+function handleNavigation(event) {
+ document.body.classList.remove('crashed');
+ if (!event.isTopLevel) {
+ return;
+ }
+
+ document.querySelector('#location').value = event.url;
+}
+
+function handleLoadStart(event) {
+ document.body.classList.remove('crashed');
+ if (!event.isTopLevel) {
+ return;
+ }
+
+ document.querySelector('#location').value = event.url;
+}
+
+function handleLoadAbort(event) {
+ console.log('oadAbort');
+ console.log(' url: ' + event.url);
+ console.log(' isTopLevel: ' + event.isTopLevel);
+ console.log(' type: ' + event.type);
+}
+
+function handleLoadRedirect(event) {
+ document.body.classList.remove('crashed');
+ if (!event.isTopLevel) {
+ return;
+ }
+
+ document.querySelector('#location').value = event.newUrl;
}

0 comments on commit f818cff

Please sign in to comment.