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
nightly linux64
nightly mac
nightly win32
nightly win64
|
last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
--- 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