Bug 1503306 - Properly set accentcolor and textcolor properties for Light and Dark themes. r=ntim a=jcristau
authorDão Gottwald <dao@mozilla.com>
Thu, 01 Nov 2018 12:40:20 +0000
changeset 501082 17c2c58a532880c11105c6f75df5c07eafe5c589
parent 501081 663b37581fef75a2e7f0ee66218062c45ebf5944
child 501083 2b9ec060ca1aac2f6992607b2b4f4df683802faf
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim, jcristau
bugs1503306
milestone64.0
Bug 1503306 - Properly set accentcolor and textcolor properties for Light and Dark themes. r=ntim a=jcristau Differential Revision: https://phabricator.services.mozilla.com/D10542
browser/components/nsBrowserGlue.js
browser/themes/linux/compacttheme.css
browser/themes/osx/compacttheme.css
browser/themes/shared/compacttheme.inc.css
browser/themes/windows/compacttheme.css
--- a/browser/components/nsBrowserGlue.js
+++ b/browser/components/nsBrowserGlue.js
@@ -1022,35 +1022,35 @@ BrowserGlue.prototype = {
 
     let vendorShortName = gBrandBundle.GetStringFromName("vendorShortName");
 
     LightweightThemeManager.addBuiltInTheme({
       id: "firefox-compact-light@mozilla.org",
       name: gBrowserBundle.GetStringFromName("lightTheme.name"),
       description: gBrowserBundle.GetStringFromName("lightTheme.description"),
       iconURL: "resource:///chrome/browser/content/browser/defaultthemes/light.icon.svg",
-      textcolor: "black",
-      accentcolor: "white",
+      textcolor: "#18191a",
+      accentcolor: "#E3E4E6",
       popup: "#fff",
       popup_text: "#0c0c0d",
       popup_border: "#ccc",
       tab_line: "#0a84ff",
       toolbarColor: "#f5f6f7",
       toolbar_bottom_separator: "#ccc",
       toolbar_field: "#fff",
       toolbar_field_border: "#ccc",
       author: vendorShortName,
     });
     LightweightThemeManager.addBuiltInTheme({
       id: "firefox-compact-dark@mozilla.org",
       name: gBrowserBundle.GetStringFromName("darkTheme.name"),
       description: gBrowserBundle.GetStringFromName("darkTheme.description"),
       iconURL: "resource:///chrome/browser/content/browser/defaultthemes/dark.icon.svg",
-      textcolor: "white",
-      accentcolor: "black",
+      textcolor: "rgb(249, 249, 250)",
+      accentcolor: "hsl(240, 5%, 5%)",
       popup: "#4a4a4f",
       popup_text: "rgb(249, 249, 250)",
       popup_border: "#27272b",
       tab_line: "#0a84ff",
       toolbarColor: "hsl(240, 1%, 20%)",
       toolbar_bottom_separator: "hsl(240, 5%, 5%)",
       toolbar_field: "rgb(71, 71, 73)",
       toolbar_field_border: "rgba(249, 249, 250, 0.2)",
--- a/browser/themes/linux/compacttheme.css
+++ b/browser/themes/linux/compacttheme.css
@@ -4,16 +4,14 @@
 
 %include ../shared/compacttheme.inc.css
 
 /* The menubar and tabs toolbar should match the devedition theme */
 #TabsToolbar,
 #toolbar-menubar {
   -moz-appearance: none !important;
 }
-#main-menubar {
-  color: var(--chrome-color);
-}
+
 #main-menubar > menu:not([open]) {
   color: inherit;
 }
 
 
--- a/browser/themes/osx/compacttheme.css
+++ b/browser/themes/osx/compacttheme.css
@@ -1,17 +1,17 @@
 % 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/.
 
 %include ../shared/compacttheme.inc.css
 
 /* Get rid of 1px bright strip at the top of window */
 #main-window[tabsintitlebar] #titlebar-content {
-  background: var(--chrome-background-color);
+  background: var(--lwt-accent-color);
 }
 
 #TabsToolbar:-moz-lwtheme-darktext {
   -moz-appearance: -moz-mac-vibrant-titlebar-light;
   -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-light;
 }
 
 .tabbrowser-tab[visuallyselected=true] {
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -2,40 +2,23 @@
 % 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/.
 
 /* compacttheme.css is loaded in browser.xul after browser.css when it is
    preffed on.  The bulk of the styling is here in the shared file, but
    there are overrides for each platform in their compacttheme.css files. */
 
 :root:-moz-lwtheme {
-  --toolbar-color: var(--chrome-color);
+  --toolbar-color: var(--lwt-text-color);
   --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor);
-  --toolbar-non-lwt-textcolor: var(--chrome-color);
+  --toolbar-non-lwt-textcolor: var(--lwt-text-color);
   --toolbar-non-lwt-bgimage: none;
 
   --toolbarbutton-icon-fill-opacity: .7;
 }
 
 :root:-moz-lwtheme-brighttext {
-  /* Chrome */
-  --chrome-background-color: hsl(240, 5%, 5%);
-  --chrome-color: rgb(249, 249, 250);
-
   /* !important to override LightweightThemeManager.addBuiltInTheme in
      nsBrowserGlue.js */
   --autocomplete-popup-background: #2A2A2E !important;
   --autocomplete-popup-highlight-background: #0060DF;
 }
 
-:root:-moz-lwtheme-darktext {
-  --chrome-background-color: #E3E4E6;
-  --chrome-color: #18191a;
-}
-
-/* Change the base colors for the browser chrome */
-
-#TabsToolbar,
-#navigator-toolbox {
-  background-color: var(--chrome-background-color);
-  color: var(--chrome-color);
-}
-
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -30,17 +30,17 @@
   @media (-moz-windows-default-theme) {
     /* Always show light toolbar elements on aero surface. */
     #TabsToolbar {
       color: hsl(240,9%,98%);
     }
 
     /* Keep showing the correct color inside the tabs. */
     .tabbrowser-tab {
-      color: var(--chrome-color) !important;
+      color: var(--lwt-text-color) !important;
     }
 
     /* Because we're forcing the tabs toolbar to be [brighttext] to
      * get white toolbar button icons, we need to manually set the
      * correct color for the tab hover and multiselect state for the light theme. */
     .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme-darktext,
     .tabbrowser-tab[multiselected] > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme-darktext {
       background-color: rgba(0,0,0,.1) !important;
@@ -88,17 +88,17 @@
   .tabbrowser-tab::before,
   .tabbrowser-tab::after {
     border-image: none !important;
   }
 
   /* Show border on tabs with background colors and
    * show the tabs toolbar background color inside tabs. */
   .tabbrowser-tab {
-    background-color: var(--chrome-background-color) !important;
+    background-color: var(--lwt-accent-color) !important;
     border-top: 1px solid var(--tabs-border-color);
     background-clip: padding-box;
   }
 
   /* The top border on top of the tab background is replaced
    * by the slightly transparent outside tabs-border-color. */
   .tab-background {
     border-top-style: none !important;