Bug 1505318 - Port bug 1503022 to TB: Refactor window and toolbar color handling and make the Dark and Light themes honor the Windows 10 accent color setting. r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Mon, 05 Nov 2018 17:34:17 +0100
changeset 33671 1259dd18be66a01b87ee902548e64e3a7ae562b6
parent 33670 337f52b538f8a9f0a4302e1c74e0c139287c72f2
child 33672 cb276ab0c381726c93f38fb969849076c25aeaa4
push id388
push userclokep@gmail.com
push dateMon, 28 Jan 2019 20:54:56 +0000
reviewersjorgk
bugs1505318, 1503022, 1503304
Bug 1505318 - Port bug 1503022 to TB: Refactor window and toolbar color handling and make the Dark and Light themes honor the Windows 10 accent color setting. r=jorgk Implemented also bug 1503304: toolbar_text doesn't always fall back to textcolor
mail/base/content/messenger.css
mail/themes/linux/mail/messenger.css
mail/themes/osx/mail/messenger.css
mail/themes/shared/mail/addressbook.css
mail/themes/shared/mail/compacttheme.css
mail/themes/shared/mail/messengercompose.css
mail/themes/windows/mail/compacttheme.css
mail/themes/windows/mail/messenger.css
--- a/mail/base/content/messenger.css
+++ b/mail/base/content/messenger.css
@@ -7,16 +7,20 @@
   ======================================================================= */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 :root {
   --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);
 }
 
 /* message header widgets */
 
 mail-messageids-headerfield {
   -moz-binding: url("chrome://messenger/content/mailWidgets.xml#mail-messageids-headerfield");
 }
 
@@ -131,28 +135,30 @@ menupopup[type="folder"] {
 
 .chromeclass-toolbar {
   overflow-x: hidden;
 }
 
 /* Lightweight themes support */
 
 :root:-moz-lwtheme {
-  color: var(--lwt-text-color) !important;
-  background-color: var(--lwt-accent-color) !important;
+  --toolbar-color: var(--lwt-text-color, inherit);
+
+  background-color: var(--lwt-accent-color);
+  color: var(--lwt-text-color);
 }
 
 :root:-moz-lwtheme[lwtheme-image] {
   background-image: var(--lwt-header-image) !important;
   background-repeat: no-repeat;
   background-position: right top !important;
 }
 
 :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));
 }
 
 /* Add a box to draw additional background images. */
 #LW-background-box {
   display: none;
 }
 
 #LW-background-box:-moz-lwtheme {
@@ -178,16 +184,17 @@ menupopup[type="folder"] {
   background-repeat: var(--lwt-background-tiling);
 }
 
 #status-bar:-moz-lwtheme {
   background-repeat: no-repeat, var(--lwt-background-tiling);
   background-position: bottom right, var(--lwt-background-alignment);
   background-color: var(--lwt-accent-color);
   background-image: var(--lwt-header-image), var(--lwt-additional-images);
+  color: var(--lwt-text-color);
 }
 
 /* AppButton support */
 
 splitmenu {
   -moz-binding: url("chrome://messenger/content/mailWidgets.xml#splitmenu");
 }
 
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -817,27 +817,22 @@ button[type="menu-button"] {
   background-color: -moz-dialog;
 }
 
 .contentTabInstance:-moz-lwtheme {
   background-color: transparent;
   background-image: linear-gradient(transparent 40px, -moz-dialog 40px);
 }
 
-.contentTabInstance > findbar {
-  background-color: -moz-dialog;
-  color: -moz-DialogText;
+findbar {
+  background-color: var(--toolbar-bgcolor);
+  color: var(--toolbar-color);
   text-shadow: none;
 }
 
-.contentTabInstance > findbar:-moz-lwtheme {
-  background-color: var(--toolbar-bgcolor);
-  color: var(--toolbar-color, -moz-DialogText);
-}
-
 /* ::::: groupbox ::::: */
 
 groupbox {
   -moz-appearance: groupbox;
   margin: 5px;
   padding: 5px;
 }
 
--- a/mail/themes/osx/mail/messenger.css
+++ b/mail/themes/osx/mail/messenger.css
@@ -753,27 +753,27 @@ statusbarpanel,
   background-color: -moz-dialog;
 }
 
 .contentTabInstance:-moz-lwtheme {
   background-color: transparent;
   background-image: linear-gradient(transparent 40px, -moz-dialog 40px);
 }
 
-.contentTabInstance > findbar {
+findbar {
   background: linear-gradient(#e8e8e8, #d0d0d0) repeat-x;
   border-top: 1px solid #888;
   color: -moz-DialogText;
   text-shadow: none;
 }
 
-.contentTabInstance > findbar:-moz-lwtheme {
+findbar:-moz-lwtheme {
   background-color: var(--toolbar-bgcolor);
   background-image: none;
-  color: var(--toolbar-color, -moz-DialogText);
+  color: var(--toolbar-color);
 }
 
 .contentTabAddress * {
   text-shadow: none;
 }
 
 /* ::::: groupbox ::::: */
 
--- a/mail/themes/shared/mail/addressbook.css
+++ b/mail/themes/shared/mail/addressbook.css
@@ -4,16 +4,20 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 :root {
   --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);
 }
 
 #ab-toolbox:-moz-lwtheme {
   position: relative;
   color: var(--toolbar-color, inherit);
 }
 
 #ab-toolbox:-moz-lwtheme::after {
--- a/mail/themes/shared/mail/compacttheme.css
+++ b/mail/themes/shared/mail/compacttheme.css
@@ -2,17 +2,16 @@
  * 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 messenger.xul after messenger.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(--lwt-text-color);
   --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor);
   --toolbar-non-lwt-textcolor: var(--lwt-text-color);
   --toolbar-non-lwt-bgimage: none;
   --lwt-toolbar-field-border-color: hsla(240,5%,5%,.25);
 
   --toolbarbutton-icon-fill-opacity: .7;
 }
 
--- a/mail/themes/shared/mail/messengercompose.css
+++ b/mail/themes/shared/mail/messengercompose.css
@@ -3,16 +3,20 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 :root {
   --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);
 }
 
 /* Rules to help integrate WebExtension buttons */
 
 .webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon {
   height: 16px;
   width: 16px;
 }
--- a/mail/themes/windows/mail/compacttheme.css
+++ b/mail/themes/windows/mail/compacttheme.css
@@ -1,14 +1,21 @@
 /* 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/. */
 
 @import url("chrome://messenger/skin/shared/compacttheme.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
    broken. So instead just show the normal titlebar in that case, and override
    the window color as transparent when the compositor is available. */
 @media (-moz-windows-compositor: 0) {
   #messengerWindow[tabsintitlebar] #titlebar:-moz-lwtheme {
     visibility: visible;
@@ -106,22 +113,16 @@
     border-inline-end: 1px solid var(--tabs-border-color);
   }
 
   .tabmail-tab:first-child::before,
   .tabmail-tab:last-child::after {
     display: none !important;
   }
 
-  /* Use default window colors */
-  #tabs-toolbar,
-  #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]) #mail-menubar {
       color: CaptionText;
     }
 
     :root[tabsintitlebar]:not([inFullscreen]) #mail-menubar:-moz-window-inactive {
--- a/mail/themes/windows/mail/messenger.css
+++ b/mail/themes/windows/mail/messenger.css
@@ -875,27 +875,22 @@ statusbarpanel:-moz-lwtheme,
   background-color: -moz-dialog;
 }
 
 .contentTabInstance:-moz-lwtheme {
   background-color: transparent;
   background-image: linear-gradient(transparent 40px, -moz-dialog 40px);
 }
 
-.contentTabInstance > findbar {
-  background-color: -moz-dialog;
-  color: -moz-DialogText;
+findbar {
+  background-color: var(--toolbar-bgcolor);
+  color: var(--toolbar-color);
   text-shadow: none;
 }
 
-.contentTabInstance > findbar:-moz-lwtheme {
-  background-color: var(--toolbar-bgcolor);
-  color: var(--toolbar-color, -moz-DialogText);
-}
-
 /* ::::: groupbox ::::: */
 
 groupbox {
   -moz-appearance: groupbox;
   border: 2px groove ThreeDFace;
   border-radius: 3px;
   margin: 3px;
   padding: 3px 3px 6px;