Bug 1504405 - Port bug 1503306 to TB: Properly set accentcolor and textcolor properties for Light and Dark themes. r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Fri, 02 Nov 2018 07:31:29 +0100
changeset 32799 5036ddd23dc36c9d642e771f5d4ee010060b84e2
parent 32798 e55a387029ad1b912ca02255f7a981043eb517fb
child 32800 e2d7001a1a8720b15e5f4f3e28143d38ea7fda7e
push id2343
push userclokep@gmail.com
push dateMon, 10 Dec 2018 21:37:21 +0000
treeherdercomm-beta@a0750c375f71 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjorgk
bugs1504405, 1503306
Bug 1504405 - Port bug 1503306 to TB: Properly set accentcolor and textcolor properties for Light and Dark themes. r=jorgk
mail/components/mailGlue.js
mail/themes/linux/mail/compacttheme.css
mail/themes/osx/mail/compacttheme.css
mail/themes/shared/mail/compacttheme.css
mail/themes/windows/mail/compacttheme.css
--- a/mail/components/mailGlue.js
+++ b/mail/components/mailGlue.js
@@ -165,35 +165,35 @@ MailGlue.prototype = {
 
     let vendorShortName = gBrandBundle.GetStringFromName("vendorShortName");
 
     LightweightThemeManager.addBuiltInTheme({
       id: "thunderbird-compact-light@mozilla.org",
       name: gMailBundle.GetStringFromName("lightTheme.name"),
       description: gMailBundle.GetStringFromName("lightTheme.description"),
       iconURL: "resource:///chrome/messenger/content/messenger/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: "thunderbird-compact-dark@mozilla.org",
       name: gMailBundle.GetStringFromName("darkTheme.name"),
       description: gMailBundle.GetStringFromName("darkTheme.description"),
       iconURL: "resource:///chrome/messenger/content/messenger/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: "hsla(240, 5%, 5%, .2",
       toolbar_field: "rgb(71, 71, 73)",
       toolbar_field_border: "rgba(249, 249, 250, 0.2)",
--- a/mail/themes/linux/mail/compacttheme.css
+++ b/mail/themes/linux/mail/compacttheme.css
@@ -4,20 +4,16 @@
 
 @import url("chrome://messenger/skin/shared/compacttheme.css");
 
 #tabs-toolbar,
 #mail-toolbar-menubar2 {
   -moz-appearance: none !important;
 }
 
-#mail-menubar {
-  color: var(--chrome-color);
-}
-
 #mail-menubar > menu:not([open]) {
   color: inherit;
 }
 
 /* Quick-Filter-Bar */
 #quick-filter-bar {
   border-bottom-color: var(--toolbox-border-bottom-color);
 }
--- a/mail/themes/osx/mail/compacttheme.css
+++ b/mail/themes/osx/mail/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/. */
 
 @import url("chrome://messenger/skin/shared/compacttheme.css");
 
 /* Get rid of 1px bright strip at the top of window */
 #messengerWindow[tabsintitlebar] #titlebar-content {
-  background: var(--chrome-background-color);
+  background: var(--lwt-accent-color);
 }
 
 #tabs-toolbar:-moz-lwtheme-brighttext {
   -moz-appearance: -moz-mac-vibrant-titlebar-dark;
   -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-dark;
   background-color: #232323;
   color: hsl(240, 9%, 98%);
   text-shadow: none;
@@ -38,17 +38,17 @@
 
 #FormatToolbar {
   background-image: none;
   background-color: transparent !important;
 }
 
 #compose-toolbar-sizer {
   background-image: none;
-  background-color: var(--chrome-background-color);
+  background-color: var(--lwt-accent-color);
 }
 
 .tabmail-tab[selected="true"] {
   -moz-font-smoothing-background-color: var(--toolbar-bgcolor);
 }
 
 #FormatToolbar:not(:-moz-window-inactive):-moz-lwtheme-brighttext >
 toolbarbutton.formatting-button[checked="true"]:after {
--- a/mail/themes/shared/mail/compacttheme.css
+++ b/mail/themes/shared/mail/compacttheme.css
@@ -2,63 +2,49 @@
  * 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(--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;
   --lwt-toolbar-field-border-color: hsla(240,5%,5%,.25);
 
   --toolbarbutton-icon-fill-opacity: .7;
 }
 
 :root:-moz-lwtheme-brighttext {
-  /* Chrome */
-  --chrome-background-color: hsl(240, 5%, 5%);
-  --chrome-color: rgb(249, 249, 250);
-
   /* Toolbar buttons */
   --lwt-toolbarbutton-hover-background: rgba(179, 179, 179, 0.4);
   --lwt-toolbarbutton-active-background: rgba(179, 179, 179, 0.6);
 
   /* !important to override LightweightThemeManager.addBuiltInTheme in
      mailGlue.js */
   --autocomplete-popup-background: #2A2A2E !important;
   --autocomplete-popup-highlight-background: #0060DF;
 
   /* composer header fields bottom border */
   --composer-header-border-color: rgb(127, 127, 128);
 }
 
 :root:-moz-lwtheme-darktext {
-  --chrome-background-color: #e3e4e6;
-  --chrome-color: #18191a;
-
   /* composer header fields bottom border */
   --composer-header-border-color: #aaa;
 }
 
-/* Change the base colors for the mail chrome */
-
 #headers-box,
-#navigation-toolbox {
-  background-color: var(--chrome-background-color);
-  color: var(--chrome-color);
-}
-
 #msgHeaderView {
   background-color: var(--toolbar-bgcolor) !important;
   background-image: none !important;
-  color: var(--chrome-color);
+  color: var(--lwt-text-color);
 }
 
 /* Let the message headers use the theme colors */
 .headerValue {
   color: inherit;
 }
 
 /* Style the editContactPanel textfields */
@@ -67,18 +53,18 @@
   color: var(--lwt-toolbar-field-color);
 }
 .editContactTextbox:not([readonly="true"]):not([focused="true"]) {
   border-color: var(--lwt-toolbar-field-border-color);
 }
 
 /* Quick-Filter-Bar */
 #quick-filter-bar:-moz-lwtheme {
-  background-color: var(--chrome-background-color);
-  color: var(--chrome-color);
+  background-color: var(--lwt-accent-color);
+  color: var(--lwt-text-color);
 }
 #quick-filter-bar:-moz-lwtheme-brighttext {
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background);
   --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background);
 
   --toolbarbutton-checkedhover-backgroundcolor: var(--lwt-toolbarbutton-hover-background);
 
   --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background);
@@ -121,17 +107,17 @@
   color: inherit;
 }
 
 #msgIdentity,
 #msgSubject,
 textbox.textbox-addressingWidget,
 .dummy-row-cell:not(:first-child) {
   border-bottom-color: var(--composer-header-border-color) !important;
-  color: var(--chrome-color);
+  color: var(--lwt-text-color);
 }
 
 #msgIdentity:hover,
 #msgIdentity:focus,
 #msgSubject:hover,
 #msgSubject[focused="true"],
 textbox.textbox-addressingWidget:hover,
 textbox.textbox-addressingWidget[focused="true"] {
--- a/mail/themes/windows/mail/compacttheme.css
+++ b/mail/themes/windows/mail/compacttheme.css
@@ -30,17 +30,17 @@
   @media (-moz-windows-default-theme) {
     /* Always show light toolbar elements on aero surface. */
     #tabs-toolbar {
       color: hsl(240,9%,98%);
     }
 
     /* Keep showing the correct color inside the tabs. */
     .tabmail-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 state for the light theme. */
     .tabmail-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme-darktext {
       background-color: rgba(0,0,0,.1) !important;
     }
@@ -77,17 +77,17 @@
   .tabmail-tab::before,
   .tabmail-tab::after {
     border-image: none !important;
   }
 
   /* Show border on tabs with background colors and
    * show the tabs toolbar background color inside tabs. */
   .tabmail-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;