first commit

README.md

@@ -0,0 +1,25 @@
+## The App
+
+Firefox.html is a reimplementation of Firefox Desktop UI in HTML.
+The goal is to close the gap between B2G and Firefox Desktop. Maybe
+one day it will be possible to render it with Servo (as it doesn't
+require XUL).
+
+Firefox.html is a HTML app (like any B2G app). It uses the Browser API
+(https://developer.mozilla.org/en-US/docs/DOM/Using_the_Browser_API).
+No XUL is used at all.
+
+Current work aims to re-implement as many features of Firefox Desktop
+as possible.
+
+## The Runtime
+
+Firefox.html requires a runtime: a special build of Gecko I call "htmlrunner".
+See: https://github.com/paulrouget/gecko-dev/tree/htmlrunner
+
+It uses a `xul:window` that loads the Firefox.html app into an iframe. The
+`xul:window` is still required to build a native window (draw in title bar,
+support opening animations, native colors, ...). Eventually, I want to kill
+this window and bring these native features to HTML. This window is nothing
+but a window with window controls (close,minimize,maximize) and a background
+with the right color.

css/layout.css

@@ -0,0 +1,93 @@
+/* Sensible defaults */
+
+* {
+  -moz-appearance: none;
+  background-color: transparent;
+  -x-box-sizing: border-box;
+  box-sizing: content-box;
+  margin: 0;
+  padding: 0;
+  border-width: 0;
+  font-family: sans-serif;
+  font-size: 12px;
+  image-rendering: -moz-crisp-edges;
+}
+
+*::-moz-focus-inner {
+  border: 0;
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+box, hbox, vbox, spacer {
+  display: flex;
+  flex-basis: 0;
+  white-space: pre;
+}
+
+hbox {
+  flex-flow: row;
+}
+
+vbox {
+  flex-flow: column;
+}
+
+[hidden="true"] {
+  display: none;
+}
+
+[flex="1"] {         flex-grow: 1 }
+[flex="2"] {         flex-grow: 2 }
+[flex="3"] {         flex-grow: 3 }
+[flex="4"] {         flex-grow: 4 }
+[flex="5"] {         flex-grow: 5 }
+[flex="6"] {         flex-grow: 6 }
+[flex="7"] {         flex-grow: 7 }
+[flex="8"] {         flex-grow: 8 }
+[flex="9"] {         flex-grow: 9 }
+
+[align="start"] {    align-items: flex-start }
+[align="center"] {   align-items: center }
+[align="end"] {      align-items: flex-end }
+[align="baseline"] { align-items: baseline }
+[align="stretch"] {  align-items: stretch }
+
+[pack="start"] {     justify-content: flex-start }
+[pack="center"] {    justify-content: center }
+[pack="end"] {       justify-content: flex-end }
+
+/* DEBUG */
+.debug * {
+  margin: 2px;
+  padding: 2px;
+  outline: 1px dashed black;
+  position: relative;
+}
+.debug hbox {
+  background: red;
+}
+.debug vbox {
+  background: blue;
+}
+.debug spacer,
+.debug box{
+  background: yellow;
+}
+.debug hbox:before,
+.debug vbox:before,
+.debug box:before {
+  position: absolute;
+  font-size: 10px;
+  top: 0; left: 0;
+  display: block;
+  content: attr(class);
+}

css/theme.css

@@ -0,0 +1,220 @@
+:root {
+  --toolbarbutton-hover-background-image: linear-gradient(hsla(0,0%,100%,.7), hsla(0,0%,100%,.2)),
+                                          linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,.3));
+  --toolbarbutton-hover-boxshadow: 0 1px 0 hsla(0,0%,100%,.3) inset, 0 0 0 1px hsla(0,0%,100%,.2) inset, 0 1px 0 hsla(0,0%,0%,.03);
+  --toolbarbutton-hover-bordercolor: rgb(154,154,154);
+
+  --toolbarbutton-active-boxshadow: 0 1px 1px hsla(0,0%,0%,.1) inset, 0 0 1px hsla(0,0%,0%,.3) inset;
+  --toolbarbutton-active-bordercolor: rgb(154,154,154);
+  --toolbarbutton-active-background-image: linear-gradient(hsla(0,0%,100%,.7), hsla(0,0%,100%,.4)),
+                                           linear-gradient(rgba(154,154,154,.5),rgba(154,154,154,.5));
+  --hwd-pixel: 1px;
+  --radius: 3px;
+}
+
+@media (min-resolution: 2dppx) {
+  :root {
+    --hwd-pixel: 0.5px;
+  }
+}
+
+/* tabs */
+
+.tabstrip {
+  padding: 0 28px 0 10px;
+  margin-bottom: calc(-1 * var(--hwd-pixel));
+  z-index: 999;
+}
+
+[os="osx"] .tabstrip {
+  padding-left: 70px;
+}
+
+.tab {
+  -moz-user-select: none;
+  cursor: default;
+  color: #444;
+  height: 28px;
+  border-style: solid;
+  border-width: 0 28px;
+  border-image-slice: 0 28 0 28 fill;
+  border-color: transparent;
+  margin-right: -25px;
+  padding-top: 1px;
+  flex-basis: 120px;
+  background-clip: border-box;
+}
+
+@media (min-resolution: 2dppx) {
+  .tab {
+    border-image-slice: 0 56 0 56 fill;
+  }
+}
+
+
+.tab.selected {
+  z-index: 1001;
+  border-image-source: -moz-element(#canvas-tab-selected);
+}
+
+.tab:not(.selected):not(:hover) + .tab:not(.selected):not(:hover):not(:first-of-type) {
+  background-image: linear-gradient(to top, #AAA, transparent 80%);
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
+  background-position: -14px 0;
+}
+
+.tab:not(.selected):hover {
+  border-image-source: -moz-element(#canvas-tab-hover);
+}
+
+.favicon, .throbber {
+  width: 16px;
+  height: 16px;
+  margin: 0 3px 0 -6px;
+}
+
+.favicon:not([src]) {
+  display: none;
+}
+
+.throbber {
+  background-image: url(../images/shared/loading.png);
+  background-size: 16px 16px;
+}
+
+@media (min-resolution: 2dppx) {
+  .throbber {
+    background-image: url(../images/shared/[email protected]);
+  }
+}
+
+
+.tab[data-loading="true"] > .favicon,
+.tab:not([data-loading="true"]) > .throbber {
+  display: none;
+}
+
+.tab > .title {
+  flex-grow: 1;
+  width: 0;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  z-index: 1000;
+}
+
+.tab > .close-button {
+  width: 16px;
+  height: 16px;
+  background-color: transparent;
+  background-image: url(../images/shared/close.png);
+  background-size: 64px 16px;;
+  background-position: 0 0;
+  margin: 0 -6px 0 3px;
+}
+
+@media (min-resolution: 2dppx) {
+  .tab > .close-button {
+    background-image: url(../images/shared/[email protected]);
+  }
+}
+
+.tab > .close-button:hover {
+  background-position: -16px 0;
+}
+
+.tab > .close-button:hover:active {
+  background-position: -32px 0;
+}
+
+/* navbar */
+
+.navbar {
+  padding: 4px 6px;
+  background-image: linear-gradient(#EDEDED, #D3D3D3);
+  border-style: solid;
+  border-width: var(--hwd-pixel) 0;
+  border-color: #AAA;
+}
+
+.navbar > button {
+  width: 18px;
+  min-width: 18px;
+  height: 18px;
+  padding: 2px 4px;
+  border: var(--hwd-pixel) solid transparent;
+  background-origin: content-box, border-box, border-box;
+  background-clip: content-box, border-box, border-box;
+  background-image: url(../images/shared/Toolbar.png);
+  background-size: 756px 72px;
+  border-radius: var(--radius);
+}
+
+.navbar > button[disabled] {
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+.navbar > button:hover {
+  background-image: url(../images/shared/Toolbar.png), var(--toolbarbutton-hover-background-image);
+  border-color: var(--toolbarbutton-hover-bordercolor);
+  box-shadow: var(--toolbarbutton-hover-boxshadow);
+}
+
+.navbar > button:hover:active {
+  background-image: url(../images/shared/Toolbar.png), var(--toolbarbutton-active-background-image);
+  border-color: var(--toolbarbutton-active-bordercolor);
+  box-shadow: var(--toolbarbutton-active-boxshadow);
+}
+
+@media (min-resolution: 2dppx) {
+  .navbar > button {
+    background-image: url(../images/shared/[email protected]);
+  }
+  .navbar > button:hover {
+    background-image: url(../images/shared/[email protected]), var(--toolbarbutton-hover-background-image);
+  }
+  .navbar > button:hover:active {
+    background-image: url(../images/shared/[email protected]), var(--toolbarbutton-active-background-image);
+  }
+}
+
+
+body[data-loading="true"] .reload-button,
+body:not([data-loading="true"]) .stop-button {
+  display: none;
+}
+
+.back-button {    background-position: -36px   0px; }
+.forward-button { background-position: -54px   0px; }
+.reload-button {  background-position: -73px   0px; }
+.stop-button {    background-position: -90px   0px; }
+.menu-button {    background-position: -468px  0px; }
+
+.urlbar, .searchbar {
+  background-color: white;
+  border-radius: var(--radius);
+  margin: 4px 6px 3px;
+  padding: 0 6px 0 24px;
+  border-style: solid;
+  border-color: #B0AEB0;
+  border-bottom-width: 1px;
+}
+
+.urlbar.focus, .searchbar.focus {
+  border-color: white;
+  box-shadow: 0 0 0 3px #91B8E3;
+}
+
+.urlinput, .searchinput {
+  font: -moz-field;
+  font-size: 12px;
+  line-height: 22px;
+  vertical-align: bottom;
+}
+
+/* iframes */
+
+body:not([os="osx"]) .iframes {
+  background-color: white;
+}

index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta charset="utf-8">
+    <title>tabs</title>
+    <link rel="stylesheet" href="css/layout.css">
+    <link rel="stylesheet" href="css/theme.css">
+    <script defer type="application/javascript;version=1.8" src="js/gBrowser.js"></script>
+    <script defer type="application/javascript;version=1.8" src="js/curvedTabs.js"></script>
+  </head>
+
+  <body>
+
+    <vbox flex="1">
+
+      <hbox class="tabstrip"></hbox>
+
+      <hbox class="navbar" align="center">
+        <button class="back-button"></button>
+        <button class="forward-button"></button>
+        <button class="reload-button"></button>
+        <button class="stop-button"></button>
+        <hbox class="urlbar" flex="1" align="center">
+          <input placeholder="Search or enter address" class="urlinput" flex="1">
+        </hbox>
+        <hbox class="searchbar" align="center">
+          <input placeholder="Yahoo" class="searchinput">
+        </hbox>
+        <button class="menu-button"></button>
+      </hbox>
+
+      <box class="iframes" flex="1" align="stretch"></box>
+
+    </vbox>
+  </body>
+</html>