Bug 1585311 - Update FxR Desktop 2D UI r=Gijs
authorthomasmo <thomasmo@mozilla.com>
Thu, 03 Oct 2019 22:22:24 +0000
changeset 496258 9ba22ed9e1faf20d7c6e08cd5aaf895377f300da
parent 496257 176b3b3a6fab041cc82264e96f1b97dfd3d0a0b5
child 496259 cffcebd1e74b797881524755c0e3eb2aee81db26
push id36647
push usernerli@mozilla.com
push dateFri, 04 Oct 2019 04:09:18 +0000
treeherdermozilla-central@678d4d2c3c4d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1585311
milestone71.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1585311 - Update FxR Desktop 2D UI r=Gijs This change makes several changes to the 2D UI, including - moving the nav bar to the botom of the screen - removing the FxR logo from the nav bar - updating colors to new pallette - refactoring CSS to separate color rules into a separate file Differential Revision: https://phabricator.services.mozilla.com/D47769
browser/fxr/content/fxrui.css
browser/fxr/content/fxrui.html
browser/fxr/content/fxrui.js
browser/fxr/content/fxrui_blue.css
browser/fxr/jar.mn
--- a/browser/fxr/content/fxrui.css
+++ b/browser/fxr/content/fxrui.css
@@ -1,93 +1,56 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-:root {
-  --void: #232426;
-  --asphalt: #3d3d3d;
-  --iron: #5d5d5d;
-  --fog: #e2e6eb;
-  --azure: #518fe1;
-  --secure: #f7ce4d;
-}
-
 * {
   margin: 0;
   padding: 0;
 }
 
 body {
-  background-color: var(--asphalt);
-
   max-width: 1600px;
   min-width: 1600px;
   max-height: 800px;
   min-height: 800px;
 
   display: flex;
   flex-direction: column;
 }
 
 .navbar_container {
   width: 100%;
+
+  margin-top: 20px;
   
   display: flex;
   flex-direction: row;
 }
 
-.fxr_logo_container {
-  width: 140px;
-  height: 100px;
-
-  vertical-align: top;
-  display: inline-block;
-}
-.fxr_logo {
-  height: 48px;
-
-  margin: 26px;
-  margin-inline-start: 38px;  
-  padding-inline-end: 32px;
-  border-inline-end: 2px solid var(--iron);
-}
-
 /* Sizing and positioning properties for all icons
    Color is determined by enabled/disabled classes below
  */
 .icon_container {
-  width: 70px;
-  height: 70px;
-  margin: 15px 10px;
+  width: 44px;
+  height: 44px;
+  margin-inline-end: 10px;
 
-  border-radius: 10px;
-  border: none;
+  border-radius: 22px;
+  border-width: 2px;
+  border-style: solid;  
 
-  background-size: 48px;
+  background-size: 22px;
   background-repeat: no-repeat;
   background-position: center;  
   background-color: inherit;
 
   -moz-context-properties: fill;
-  fill: var(--fog);
-}
-.icon_container:hover {
-  background-color: var(--fog);  
-  fill: var(--asphalt);  
-}
-.icon_container:active {
-  background-color: var(--void);
-  fill: var(--fog);    
-}
-.icon_container:disabled {
-  background-color: var(--asphalt);
-  fill: var(--void);
 }
 
 .icon_disabled_hide:disabled {
   display:none;
 }
 
 .icon_backward {
   background-image: url("assets/icon-backward.svg");
@@ -101,72 +64,54 @@ body {
 .icon_stop {
   background-image: url("assets/icon-stop-reload.svg");
 }
 .icon_home {
   background-image: url("assets/icon-home.svg");
 }
 
 .urlbar_container {
-  height: 62px;
+  height: 40px;
   flex-grow: 1;
 
-  margin: 15px 10px;
   padding: 0;
 
-  border-radius: 10px;
-  border: 4px solid transparent;
-
-  background-color: var(--iron);
+  border-radius: 22px;
+  border: 2px solid transparent;
 
   vertical-align: top;
 
   display: flex;
   flex-direction: row;
 }
-.urlbar_container:hover,
-.urlbar_container:focus-within {
-  border-color:var(--azure);
-}
-.urlbar_container:focus-within {
-  background-color: var(--void);
-}
 
 .urlbar_secure_icon {
   -moz-context-properties: fill;
-  fill: var(--secure);
   
-  height: 48px;
-  padding: 6px;
+  height: 32px;
+  padding: 2px;
   
   visibility: hidden;
 
   display: inline-block;
 }
 
 .urlbar_input {
   background-color: transparent;  
 
-  vertical-align: top;
-  height: 44px;
   flex-grow: 1;
 
-  padding: 11px 0;
   border: none;
   
-  font-size: 36px;
-  color: var(--fog);
+  font-size: 18px;
+  font-family: 'Open Sans', sans-serif;
 
-  mask-image: linear-gradient(to left, transparent, black 5ch);
-}
-.urlbar_input::selection {
-  background-color: var(--azure);
+  mask-image: linear-gradient(to left, transparent, black 8ch);
 }
 
-xul|browser {
+.browser_container {
   width: 100%;
   flex-grow: 1;
-
-  margin: 0;
-  padding: 0;
-
-  background-color: var(--asphalt);
 }
+xul|browser {
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
--- a/browser/fxr/content/fxrui.html
+++ b/browser/fxr/content/fxrui.html
@@ -1,35 +1,34 @@
-<!DOCTYPE html>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-
-<!--
-  This file contains the HTML UI for the 2D window of Firefox Reality on Desktop
--->
-
-<html width="1600" height="800">
-<head>
-  <title>Firefox Reality</title>
-  <link rel="stylesheet" href="fxrui.css" />
-  <script src="fxrui.js"></script>
-</head>
-
-<body>
-  <div class="navbar_container">
-    <div class="fxr_logo_container">
-      <img class="fxr_logo" src="assets/Logo-256px.png" role="presentation" />
-    </div>
-
-    <button id="eBack"    class="icon_container icon_backward"></button>
-    <button id="eForward" class="icon_container icon_forward"></button>
-    <button id="eRefresh" class="icon_container icon_refresh icon_disabled_hide"></button>
-    <button id="eStop"    class="icon_container icon_stop icon_disabled_hide" disabled></button>
-    <button id="eHome"    class="icon_container icon_home" ></button>
-    
-    <div class="urlbar_container urlbar_container_normal" id="eUrlBarContainer">
-      <img class="urlbar_secure_icon" id="eUrlSecure" src="assets/icon-secure.svg" alt="Secure"/>
-      <input class="urlbar_input" id="eUrlInput" type="text" value="" />
-    </div>
-  </div>
-</body>
-</html>
+<!DOCTYPE html>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<!--
+  This file contains the HTML UI for the 2D window of Firefox Reality on Desktop
+-->
+
+<html width="1600" height="800">
+<head>
+  <title>Firefox Reality</title>
+  <link rel="stylesheet" href="fxrui.css" />
+  <link rel="stylesheet" href="fxrui_blue.css" />
+  <script src="fxrui.js"></script>
+</head>
+
+<body>
+  <div id="eBrowserContainer" class="browser_container"></div>
+
+  <div class="navbar_container">
+    <button id="eBack"    class="icon_container icon_backward"></button>
+    <button id="eForward" class="icon_container icon_forward"></button>
+    <button id="eRefresh" class="icon_container icon_refresh icon_disabled_hide"></button>
+    <button id="eStop"    class="icon_container icon_stop icon_disabled_hide" disabled></button>
+    <button id="eHome"    class="icon_container icon_home" ></button>
+    
+    <div class="urlbar_container urlbar_container_normal" id="eUrlBarContainer">
+      <img class="urlbar_secure_icon" id="eUrlSecure" src="assets/icon-secure.svg" alt="Secure"/>
+      <input class="urlbar_input" id="eUrlInput" type="text" value="" />
+    </div>
+  </div>
+</body>
+</html>
--- a/browser/fxr/content/fxrui.js
+++ b/browser/fxr/content/fxrui.js
@@ -39,17 +39,17 @@ window.addEventListener(
 // Create XUL browser object
 function setupBrowser() {
   // Note: createXULElement is undefined when this page is not loaded
   // via chrome protocol
   if (document.createXULElement) {
     browser = document.createXULElement("browser");
     browser.setAttribute("type", "content");
     browser.setAttribute("remote", "true");
-    document.body.append(browser);
+    document.getElementById("eBrowserContainer").appendChild(browser);
 
     urlInput.value = homeURL;
     browser.loadURI(homeURL);
 
     browser.addProgressListener(
       {
         QueryInterface: ChromeUtils.generateQI([
           Ci.nsIWebProgressListener,
new file mode 100644
--- /dev/null
+++ b/browser/fxr/content/fxrui_blue.css
@@ -0,0 +1,66 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+ /* These not-very-descriptive variable names for colors come
+  * from the design documents and are maintained to make it
+  * easier to map between the stylesheet and the design doc.
+  */
+ :root {
+    --num06: #FFFFFF;
+    --num07: #00B3E3;
+    --num08: #56D9F6;
+    --num09: #0968B6;
+    --num13: #2C3A50;
+    --num14: #596677;
+    --num16: #E7EAF0;
+    
+    --secure: #f7ce4d;
+  }
+  
+  body {
+    background-color: var(--num06);
+  }
+  
+  .icon_container {
+    border-color: var(--num08);
+    background-color: var(--num06);
+    fill: var(--num08);
+  }
+  .icon_container:hover {
+    background-color: var(--num07);  
+    border-color: var(--num07);
+    fill: var(--num06);
+  }
+  .icon_container:active {
+    background-color: var(--num09);  
+    border-color: var(--num09);
+    fill: var(--num06);
+  }
+  .icon_container:disabled {
+    background-color: var(--num16);  
+    border-color: var(--num16);
+    fill: var(--num14);
+  }
+  
+  .urlbar_container {  
+    border-color:var(--num08);
+    background-color: var(--num06);
+  }
+  .urlbar_container:hover {
+    border-color:var(--num07);
+  }
+  .urlbar_container:focus-within {
+    border-color:var(--num08);
+  }
+  
+  .urlbar_secure_icon {
+    fill: var(--secure);
+  }
+  
+  .urlbar_input {  
+    color: var(--num13);
+  }
+  .urlbar_input::selection {
+    background-color: var(--num08);
+  }
--- a/browser/fxr/jar.mn
+++ b/browser/fxr/jar.mn
@@ -1,19 +1,19 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 #if defined(NIGHTLY_BUILD) && defined(XP_WIN) 
 browser.jar:
 %  content fxr %content/browser/fxr/
-   content/browser/fxr/fxrui.html   (content/fxrui.html)
-   content/browser/fxr/fxrui.css    (content/fxrui.css)
-   content/browser/fxr/fxrui.js     (content/fxrui.js)
+   content/browser/fxr/fxrui.html       (content/fxrui.html)
+   content/browser/fxr/fxrui.css        (content/fxrui.css)
+   content/browser/fxr/fxrui_blue.css   (content/fxrui_blue.css)
+   content/browser/fxr/fxrui.js         (content/fxrui.js)
    
    content/browser/fxr/assets/icon-backward.svg         (content/assets/icon-backward.svg)
    content/browser/fxr/assets/icon-forward.svg          (content/assets/icon-forward.svg)
    content/browser/fxr/assets/icon-home.svg             (content/assets/icon-home.svg)
    content/browser/fxr/assets/icon-refresh.svg          (content/assets/icon-refresh.svg)
    content/browser/fxr/assets/icon-secure.svg           (content/assets/icon-secure.svg)
    content/browser/fxr/assets/icon-stop-reload.svg      (content/assets/icon-stop-reload.svg)
-   content/browser/fxr/assets/Logo-256px.png            (content/assets/Logo-256px.png)
 #endif