Bug 1503476 - Port bug 1455924 and bug 1503301 to TB: Clean up Dark/Light theme CSS. r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Wed, 31 Oct 2018 07:54:58 +0100
changeset 33647 5929093fee143b935be3b26333e6ab541c4f271f
parent 33646 8b5b4aa261935a671fcec24cb9f6249f72555fad
child 33648 cffa7cb63305e24e8a6c72717e457d6fdcb9298d
push id388
push userclokep@gmail.com
push dateMon, 28 Jan 2019 20:54:56 +0000
reviewersjorgk
bugs1503476, 1455924, 1503301
Bug 1503476 - Port bug 1455924 and bug 1503301 to TB: Clean up Dark/Light theme CSS. r=jorgk
mail/components/mailGlue.js
mail/themes/shared/mail/compacttheme.css
--- a/mail/components/mailGlue.js
+++ b/mail/components/mailGlue.js
@@ -170,30 +170,40 @@ MailGlue.prototype = {
       name: gMailBundle.GetStringFromName("lightTheme.name"),
       description: gMailBundle.GetStringFromName("lightTheme.description"),
       iconURL: "resource:///chrome/messenger/content/messenger/light.icon.svg",
       textcolor: "black",
       accentcolor: "white",
       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",
       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)",
+      toolbar_field_separator: "#5F6670",
       toolbar_field_text: "rgb(249, 249, 250)",
-      toolbar_field_border: "rgba(249, 249, 250, 0.2)",
       sidebar: "#38383D",
       sidebar_text: "rgb(249, 249, 250)",
       sidebar_border: "rgba(255, 255, 255, 0.2)",
       author: vendorShortName,
     }, {
       useInDarkMode: true,
     });
   },
--- a/mail/themes/shared/mail/compacttheme.css
+++ b/mail/themes/shared/mail/compacttheme.css
@@ -3,83 +3,60 @@
  * 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-bgcolor: var(--chrome-secondary-background-color);
   --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor);
   --toolbar-non-lwt-textcolor: var(--chrome-color);
   --toolbar-non-lwt-bgimage: none;
   --lwt-toolbar-field-border-color: hsla(240,5%,5%,.25);
 
   --toolbarbutton-icon-fill-opacity: .7;
-
-  --tab-line-color: #0a84ff;
 }
 
 :root:-moz-lwtheme-brighttext {
   /* Chrome */
   --chrome-background-color: hsl(240, 5%, 5%);
   --chrome-color: rgb(249, 249, 250);
-  --chrome-secondary-background-color: hsl(240, 1%, 20%);
-  --toolbox-border-bottom-color: hsla(240, 5%, 5%, .1);
-  --chrome-nav-bar-controls-border-color: hsla(240, 5%, 5%, .3);
 
   /* Toolbar buttons */
   --lwt-toolbarbutton-hover-background: rgba(179, 179, 179, 0.4);
   --lwt-toolbarbutton-active-background: rgba(179, 179, 179, 0.6);
 
-  /* Search bars */
-  --lwt-toolbar-field-background-color: rgb(71, 71, 73);
-  --lwt-toolbar-field-color: var(--chrome-color);
-  --urlbar-separator-color: #5F6670;
-
   /* !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 {
-  --lwt-toolbar-field-background-color: #fff;
-
   --chrome-background-color: #e3e4e6;
   --chrome-color: #18191a;
-  --chrome-secondary-background-color: #f5f6f7;
-  --toolbox-border-bottom-color: #ccc;
-  --chrome-nav-bar-controls-border-color: #ccc;
 
   /* composer header fields bottom border */
   --composer-header-border-color: #aaa;
 }
 
-toolbar[brighttext] .toolbarbutton-1 {
-  fill: rgb(249, 249, 250);
-}
-
 /* Change the base colors for the mail chrome */
 
 #headers-box,
 #navigation-toolbox {
   background-color: var(--chrome-background-color);
   color: var(--chrome-color);
 }
 
-findbar,
-.mail-toolbox,
-.contentTabToolbox,
 #msgHeaderView {
-  background-color: var(--chrome-secondary-background-color) !important;
+  background-color: var(--toolbar-bgcolor) !important;
   background-image: none !important;
   color: var(--chrome-color);
 }
 
 /* Let the message headers use the theme colors */
 .headerValue {
   color: inherit;
 }
@@ -123,24 +100,16 @@ findbar,
 }
 
 #qfb-qs-textbox:-moz-lwtheme[focused="true"] {
   background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, white));
   color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, black));
   border-color: var(--toolbar-field-focus-border-color);
 }
 
-/* Search bar*/
-#searchInput:not([focused="true"]),
-#IMSearchInput:not([focused="true"]),
-#peopleSearchInput:not([focused="true"]),
-.remote-gloda-search:not([focused="true"]) {
-  border-color: var(--chrome-nav-bar-controls-border-color);
-}
-
 /* Composer header box styling */
 #headers-box:-moz-lwtheme-brighttext {
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background);
   --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background);
 
   --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background);
   --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background);
   --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background) inset;