Bug 1503476 - Port bug 1455924 and bug 1503301 to TB: Clean up Dark/Light theme CSS. r+a=jorgk
authorRichard Marti <richard.marti@gmail.com>
Wed, 31 Oct 2018 07:54:58 +0100
changeset 33501 3a4f876f12af08e5670df715359ab1dd3ff49da9
parent 33500 0232450e2c9b7be855adf04bf31d2ffc2babc8cf
child 33502 f621deadf93b3a10edf84520d6c4b2a429ca1c5e
push id387
push userclokep@gmail.com
push dateMon, 10 Dec 2018 21:30:47 +0000
bugs1503476, 1455924, 1503301
Bug 1503476 - Port bug 1455924 and bug 1503301 to TB: Clean up Dark/Light theme CSS. r+a=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;