Bug 1503022 - Refactor window and toolbar color handling and make the Dark and Light themes honor the Windows 10 accent color setting. r=ntim

Differential Revision: https://phabricator.services.mozilla.com/D10736

--HG--
extra : moz-landing-system : lando

browser/base/content/browser.css

@@ -10,11 +10,19 @@
   --lwt-additional-images: none;
   --lwt-background-alignment: right top;
   --lwt-background-tiling: no-repeat;
+
+  --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
+  --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
+  --toolbar-color: var(--toolbar-non-lwt-textcolor);
 }
 
 :root:-moz-lwtheme {
-  background-color: var(--lwt-accent-color) !important;
-  color: var(--lwt-text-color) !important;
+  --toolbar-bgcolor: rgba(255,255,255,.4);
+  --toolbar-bgimage: none;
+  --toolbar-color: inherit;
+
+  background-color: var(--lwt-accent-color);
+  color: var(--lwt-text-color);
 }
 
 :root:-moz-lwtheme[lwtheme-image] {
@@ -24,7 +32,7 @@
 }
 
 :root:-moz-lwtheme:-moz-window-inactive {
-  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
+  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
 }
 
 /* Set additional backgrounds alignment relative to toolbox */

browser/themes/linux/browser.css

@@ -12,8 +12,6 @@
   --toolbar-non-lwt-bgcolor: -moz-dialog;
   --toolbar-non-lwt-textcolor: -moz-dialogtext;
   --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
-  --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
-  --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
 
   --toolbarbutton-border-radius: 4px;
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
@@ -38,9 +36,6 @@
 }
 
 :root:-moz-lwtheme {
-  --toolbar-bgcolor: rgba(255,255,255,.4);
-  --toolbar-bgimage: none;
-
   --toolbox-border-bottom-color: rgba(0,0,0,.3);
 
   --panel-separator-color: hsla(210,4%,10%,.14);
@@ -75,7 +70,7 @@
 .browser-toolbar:not(.titlebar-color) {
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
-  color: var(--toolbar-color, inherit);
+  color: var(--toolbar-color);
   -moz-appearance: none;
   border-style: none;
 }
@@ -458,14 +453,9 @@ notification[value="translation"] menulist > .menulist-dropmarker {
 }
 
 .browserContainer > findbar {
-  background-color: -moz-dialog;
-  color: -moz-DialogText;
-  text-shadow: none;
-}
-
-.browserContainer > findbar:-moz-lwtheme {
   background-color: var(--toolbar-bgcolor);
-  color: var(--toolbar-color, -moz-DialogText);
+  color: var(--toolbar-color);
+  text-shadow: none;
 }
 
 /* Tabstrip */

browser/themes/osx/browser.css

@@ -13,8 +13,6 @@
   --toolbar-non-lwt-bgcolor: #f9f9fa;
   --toolbar-non-lwt-textcolor: #0c0c0d;
   --toolbar-non-lwt-bgimage: none;
-  --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
-  --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
 
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) + 1px);
   --toolbarbutton-border-radius: 4px;
@@ -33,9 +31,6 @@
 }
 
 :root:-moz-lwtheme {
-  --toolbar-bgcolor: rgba(255,255,255,.4);
-  --toolbar-bgimage: none;
-
   --toolbox-border-bottom-color: rgba(0,0,0,.3);
 }
 
@@ -78,7 +73,7 @@
   text-shadow: inherit;
 }
 
-#main-window {
+:root {
   -moz-appearance: none;
   background-color: #eeeeee;
 }
@@ -145,10 +140,10 @@
   border-top: 1px solid rgba(0,0,0,0.65);
 }
 
-.browser-toolbar:not(#TabsToolbar) {
+.browser-toolbar:not(.titlebar-color) {
   -moz-appearance: none;
   background: var(--toolbar-bgcolor);
-  color: var(--toolbar-color, inherit);
+  color: var(--toolbar-color);
 }
 
 /* Draw the bottom border of the tabs toolbar when it's not using
@@ -590,7 +585,7 @@ html|input.urlbar-input {
 .browserContainer > findbar:-moz-lwtheme {
   background-color: var(--toolbar-bgcolor);
   background-image: none;
-  color: var(--toolbar-color, -moz-DialogText);
+  color: var(--toolbar-color);
 }
 
 .openintabs-menuitem {

browser/themes/shared/tabs.inc.css

@@ -489,7 +489,7 @@
 }
 
 .tabbrowser-tab[visuallyselected=true]:-moz-lwtheme {
-  color: var(--lwt-tab-text, var(--toolbar-color, inherit));
+  color: var(--lwt-tab-text, var(--toolbar-color));
 }
 
 .tab-line {

browser/themes/windows/browser-aero.css

@@ -38,8 +38,6 @@
           }
           :root[tabsintitlebar]:not(:-moz-lwtheme) {
             background-color: hsl(235,33%,19%);
-          }
-          :root[tabsintitlebar] .titlebar-color:not(:-moz-lwtheme) {
             color: hsl(240,9%,98%);
           }
         }
@@ -50,8 +48,6 @@
           }
           :root[tabsintitlebar]:not(:-moz-window-inactive):not(:-moz-lwtheme) {
             background-color: -moz-win-accentcolor;
-          }
-          :root[tabsintitlebar] .titlebar-color:not(:-moz-window-inactive):not(:-moz-lwtheme) {
             color: -moz-win-accentcolortext;
           }
         }
@@ -272,7 +268,7 @@
     }
   }
 
-  :root[darkwindowframe="true"] .titlebar-color:not(:-moz-window-inactive):not(:-moz-lwtheme) {
+  :root[darkwindowframe="true"]:not(:-moz-window-inactive):not(:-moz-lwtheme) {
     color: white;
   }
 
@@ -344,10 +340,10 @@
 /* Aero Basic */
 @media (-moz-windows-compositor: 0) {
   @media (-moz-windows-default-theme) {
-    #main-window {
+    :root {
       background-color: rgb(185,209,234);
     }
-    #main-window:-moz-window-inactive {
+    :root:-moz-window-inactive {
       background-color: rgb(215,228,242);
     }
 

browser/themes/windows/browser.css

@@ -12,8 +12,6 @@
   --toolbar-non-lwt-bgcolor: -moz-dialog;
   --toolbar-non-lwt-textcolor: -moz-dialogtext;
   --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
-  --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
-  --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
 
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
   --toolbarbutton-border-radius: 2px;
@@ -60,9 +58,6 @@
 }
 
 :root:-moz-lwtheme {
-  --toolbar-bgcolor: rgba(255,255,255,.4);
-  --toolbar-bgimage: none;
-
   --toolbox-border-bottom-color: rgba(0,0,0,.3);
 
   --panel-separator-color: hsla(210,4%,10%,.14);
@@ -138,7 +133,7 @@
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
   background-clip: padding-box;
-  color: var(--toolbar-color, inherit);
+  color: var(--toolbar-color);
 }
 
 /*
@@ -192,11 +187,11 @@
   /* Please keep the menu text colors in this media block in sync with
    * compacttheme.css, minus the :not(:-moz-lwtheme) condition - see Bug 1165718.
    */
-  :root[tabsintitlebar]:not([inFullscreen]) .titlebar-color:not(:-moz-lwtheme) {
+  :root[tabsintitlebar]:not([inFullscreen]):not(:-moz-lwtheme) {
     color: CaptionText;
   }
 
-  :root[tabsintitlebar]:not([inFullscreen]) .titlebar-color:not(:-moz-lwtheme):-moz-window-inactive {
+  :root[tabsintitlebar]:not([inFullscreen]):not(:-moz-lwtheme):-moz-window-inactive {
     color: InactiveCaptionText;
   }
 }
@@ -666,14 +661,9 @@ html|*.urlbar-input:-moz-lwtheme::placeholder,
 }
 
 .browserContainer > findbar {
-  background-color: -moz-dialog;
-  color: -moz-DialogText;
-  text-shadow: none;
-}
-
-.browserContainer > findbar:-moz-lwtheme {
   background-color: var(--toolbar-bgcolor);
-  color: var(--toolbar-color, -moz-DialogText);
+  color: var(--toolbar-color);
+  text-shadow: none;
 }
 
 /* Tabstrip */

browser/themes/windows/compacttheme.css

@@ -4,6 +4,13 @@
 
 %include ../shared/compacttheme.inc.css
 
+@media (-moz-windows-accent-color-in-titlebar) {
+  :root[tabsintitlebar]:not(:-moz-window-inactive) {
+    background-color: -moz-win-accentcolor;
+    color: -moz-win-accentcolortext;
+  }
+}
+
 /* The window background is white due to no accentcolor in the lightweight
    theme. It can't be changed to transparent when there is no compositor
    (Win 7 in classic / basic theme), or else dragging and focus become
@@ -114,20 +121,14 @@
     display: none !important;
   }
 
-  /* Use default window colors */
-  #TabsToolbar,
-  #navigator-toolbox {
-    background-color: transparent;
-  }
-
   /* Use proper menu text styling in Win7 classic mode (copied from browser.css) */
   @media (-moz-windows-compositor: 0),
          (-moz-windows-default-theme: 0) {
-    :root[tabsintitlebar]:not([inFullscreen]) .titlebar-color {
+    :root[tabsintitlebar]:not([inFullscreen]) {
       color: CaptionText;
     }
 
-    :root[tabsintitlebar]:not([inFullscreen]) .titlebar-color:-moz-window-inactive {
+    :root[tabsintitlebar]:not([inFullscreen]):-moz-window-inactive {
       color: InactiveCaptionText;
     }
 

toolkit/themes/shared/findBar.inc.css

@@ -12,12 +12,6 @@ findbar {
   transition-timing-function: ease-in-out, ease-in-out, linear;
 }
 
-findbar:-moz-lwtheme {
-  background-color: var(--toolbar-bgcolor);
-  background-image: none;
-  color: var(--toolbar-color, -moz-DialogText);
-}
-
 findbar[hidden] {
   /* Override display:none to make the transition work. */
   display: -moz-box;