mozilla-central: changeset 496258:9ba22ed9e1faf20d7c6e08cd5aaf895377f300da

--- 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

author	thomasmo <thomasmo@mozilla.com>
	Thu, 03 Oct 2019 22:22:24 +0000
changeset 496258	9ba22ed9e1faf20d7c6e08cd5aaf895377f300da
parent 496257	176b3b3a6fab041cc82264e96f1b97dfd3d0a0b5
child 496259	cffcebd1e74b797881524755c0e3eb2aee81db26
push id	36647
push user	nerli@mozilla.com
push date	Fri, 04 Oct 2019 04:09:18 +0000
treeherder	mozilla-central@678d4d2c3c4d [default view] [failures only]
perfherder	[talos] [build metrics] [platform microbench] (compared to previous push)
reviewers	Gijs
bugs	1585311
milestone	71.0a1
first release with	nightly linux32 81ebffadd73a / 71.0a1 / 20191004094656 / files nightly linux64 81ebffadd73a / 71.0a1 / 20191004094656 / files nightly mac 81ebffadd73a / 71.0a1 / 20191004094656 / files nightly win32 81ebffadd73a / 71.0a1 / 20191004094656 / files nightly win64 81ebffadd73a / 71.0a1 / 20191004094656 / files
last release without	nightly linux32 c9c63f844702 / 71.0a1 / 20191002214349 / files nightly linux64 c9c63f844702 / 71.0a1 / 20191002214349 / files nightly mac c9c63f844702 / 71.0a1 / 20191002214349 / files nightly win32 c9c63f844702 / 71.0a1 / 20191002214349 / files nightly win64 c9c63f844702 / 71.0a1 / 20191002214349 / files

browser/fxr/content/fxrui.css		file \| annotate \| diff \| comparison \| revisions
browser/fxr/content/fxrui.html		file \| annotate \| diff \| comparison \| revisions
browser/fxr/content/fxrui.js		file \| annotate \| diff \| comparison \| revisions
browser/fxr/content/fxrui_blue.css		file \| annotate \| diff \| comparison \| revisions
browser/fxr/jar.mn		file \| annotate \| diff \| comparison \| revisions