Start on a very basic browser app

mozilla-b2g · Nov 1, 2011 · fb65228 · fb65228
1 parent f98aeb7
commit fb65228
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 1 deletion.
diff --git a/browser/browser.css b/browser/browser.css
@@ -0,0 +1,60 @@
+#browser-html, #browser-body {
+	height: 100%;
+	padding: 0;
+	margin: 0;
+}
+
+#browser-body {
+  margin: 0;
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+}
+
+#browser-tab {
+  -moz-box-flex: 1;
+  display: -moz-box;
+  -moz-box-orient: vertical;
+}
+
+#browser-toolbar {
+  background-color: #666;
+  display: -moz-box;
+  -moz-box-orient: horizontal;
+  width: 100%;
+  height: 30px;
+  margin: 0;
+}
+
+#browser-address {
+  background-color: #333;
+  border-radius: 5px;
+  -moz-box-flex: 1;
+  display: -moz-box;
+  -moz-box-orient: horizontal;
+  height: 20px;
+  margin: 5px;
+  padding: 0;
+}
+
+#browser-url {
+  -moz-box-flex: 1;
+  border: none;
+  border-radius: 5px;
+  height: 16px;
+  padding: 2px 5px;
+}
+
+.browser-button {
+  display: block;
+  padding: 0 4px;
+}
+
+#browser-iframe {
+  -moz-box-flex: 1;
+  width: 100%;
+  border: none;
+  background-color: white;
+}
diff --git a/browser/browser.html b/browser/browser.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html id="browser-html">
+
+  <head>
+    <meta charset="utf-8">
+    <title>Browser</title>
+    <link rel="stylesheet" href="browser.css" type="text/css" />
+    <script type="text/javascript" src="../apps.js"></script>
+    <script type="text/javascript" src="browser.js"></script>
+  </head>
+
+  <body id="browser-body">
+    <div id="browser-tab">
+      <div id="browser-toolbar">
+        <form id="browser-address">
+          <input type="text" id="browser-url" value="https://wiki.mozilla.org/B2G">
+          <input type="image" src="images/go.png" id="browser-go-button" class="browser-button" alt="Go">
+        </form>
+      </div>
+      <iframe id="browser-iframe" src="https://wiki.mozilla.org/B2G">
+      </iframe>
+    </div>
+  </body>
+
+</html>
diff --git a/browser/browser.js b/browser/browser.js
@@ -0,0 +1,14 @@
+window.onload = function() {
+  var go = document.getElementById("browser-go-button");
+  go.addEventListener("click", Browser.navigate, false);
+
+}
+
+var Browser = {
+  navigate: function(event) {
+    var url = document.getElementById("browser-url").value;
+    var iframe = document.getElementById("browser-iframe");
+    iframe.setAttribute("src", url);
+    event.preventDefault();
+  }
+}
diff --git a/browser/images/go.png b/browser/images/go.png
diff --git a/homescreen.js b/homescreen.js
@@ -391,7 +391,7 @@ function OnLoad() {
     { label: 'Books', src: 'images/Books.png',
       url: 'data:text/html,<font color="blue">Hello' },
     { label: 'Browser', src: 'images/Browser.png',
-      url: 'data:text/html,<font color="blue">Hello' },
+      url: 'browser/browser.html' },
     { label: 'Music', src: 'images/Music.png',
       url: 'data:text/html,<font color="blue">Hello' }
   ];