Bug 1491214 - Allow theming trees (Port of bug 1418602, bug 1488000 and bug 1385518). r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Thu, 06 Sep 2018 06:49:23 +0200
changeset 33154 7fed66ae20ae6fbad019248d8c7908aef7c23834
parent 33153 b5438a85767acdfa26aaa60f532d3f8e4bee979b
child 33155 09e76a937c343d2762a740fc5ba6a0529fabb008
push id387
push userclokep@gmail.com
push dateMon, 10 Dec 2018 21:30:47 +0000
reviewersjorgk
bugs1491214, 1418602, 1488000, 1385518
Bug 1491214 - Allow theming trees (Port of bug 1418602, bug 1488000 and bug 1385518). r=jorgk Bug 1418602: Allow theming sidebars Bug 1488000: Allow theming sidebar border color Bug 1385518: [Photon] Update sidebar styling for dark theme
mail/base/modules/ThemeVariableMap.jsm
mail/components/im/themes/chat.css
mail/components/mailGlue.js
mail/themes/linux/mail/addrbook/addressbook.css
mail/themes/linux/mail/chat.css
mail/themes/linux/mail/mailWindow1.css
mail/themes/linux/mail/messenger.css
mail/themes/osx/mail/addrbook/addressbook.css
mail/themes/osx/mail/chat.css
mail/themes/osx/mail/mailWindow1.css
mail/themes/osx/mail/messenger.css
mail/themes/windows/mail/addrbook/addressbook.css
mail/themes/windows/mail/chat.css
mail/themes/windows/mail/icons/folder.png
mail/themes/windows/mail/mailWindow1.css
mail/themes/windows/mail/messenger.css
--- a/mail/base/modules/ThemeVariableMap.jsm
+++ b/mail/base/modules/ThemeVariableMap.jsm
@@ -1,14 +1,18 @@
 /* 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/. */
 
 var EXPORTED_SYMBOLS = ["ThemeVariableMap", "ThemeContentPropertyList"];
 
+function _isTextColorDark(r, g, b) {
+  return (0.2125 * r + 0.7154 * g + 0.0721 * b) <= 110;
+}
+
 const ThemeVariableMap = [
   ["--lwt-accent-color-inactive", {
     lwtProperty: "accentcolorInactive"
   }],
   ["--lwt-background-alignment", {
     isColor: false,
     lwtProperty: "backgroundsAlignment"
   }],
@@ -71,12 +75,42 @@ const ThemeVariableMap = [
     lwtProperty: "popup_border"
   }],
   ["--autocomplete-popup-highlight-background", {
     lwtProperty: "popup_highlight"
   }],
   ["--autocomplete-popup-highlight-color", {
     lwtProperty: "popup_highlight_text"
   }],
+  ["--sidebar-background-color", {
+    lwtProperty: "sidebar",
+  }],
+  ["--sidebar-text-color", {
+    lwtProperty: "sidebar_text",
+    processColor(rgbaChannels, element) {
+      if (!rgbaChannels) {
+        element.removeAttribute("lwt-tree");
+        element.removeAttribute("lwt-tree-brighttext");
+        return null;
+      }
+
+      element.setAttribute("lwt-tree", "true");
+      const {r, g, b, a} = rgbaChannels;
+      if (!_isTextColorDark(r, g, b)) {
+        element.setAttribute("lwt-tree-brighttext", "true");
+      }
+
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    },
+  }],
+  ["--sidebar-highlight-background-color", {
+    lwtProperty: "sidebar_highlight",
+  }],
+  ["--sidebar-highlight-text-color", {
+    lwtProperty: "sidebar_highlight_text",
+  }],
+  ["--sidebar-border-color", {
+    lwtProperty: "sidebar_border",
+  }],
 ];
 
 const ThemeContentPropertyList = [
 ];
--- a/mail/components/im/themes/chat.css
+++ b/mail/components/im/themes/chat.css
@@ -67,17 +67,29 @@
   padding-right: 10px !important;
   padding-left: 10px !important;
 }
 
 #listPaneBox {
   border-inline-end: 1px solid var(--imbox-selected-border-color);
 }
 
+:root[lwt-tree] #listPaneBox {
+  -moz-appearance:  none;
+  background-color: var(--sidebar-background-color);
+  border-inline-end-color: var(--sidebar-border-color, hsla(0,0%,60%,.4));
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree-brighttext] #listPaneBox {
+  border-inline-end-color: var(--sidebar-border-color, rgba(249,249,250,.2));
+}
+
 #contactlistbox {
+  color: inherit;
   margin: 0;
   /* make it possible to let the children overwrite the end border.
      margin-inline-start because of the inverted direction */
   margin-inline-start: -1px;
 }
 
 /* move the scrollbar to the left */
 #contactlistbox:-moz-locale-dir(ltr),
@@ -105,16 +117,17 @@ imconv[unread] {
 }
 
 imconv[attention] {
   color: blue;
 }
 
 imgroup[selected] {
   background-color: var(--imgroup-selected-background-color);
+  color: var(--imbox-selected-text-color);
 }
 
 imconv,
 imcontact {
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
   -moz-box-align: stretch;
 }
@@ -131,20 +144,48 @@ imcontact > .box-line {
 .box-line[selected=true] {
   background-color: var(--tabline-color);
 }
 
 :-moz-any(imconv, imcontact, imgroup):not([selected=true]):hover {
   background-color: rgba(0,0,0,.1);
 }
 
+:root[lwt-tree] imgroup,
+:root[lwt-tree] imconv:not([selected]),
+:root[lwt-tree] imcontact:not([selected]) {
+  color: var(--sidebar-text-color);
+}
+
 imconv[selected=true],
 imcontact[selected=true] {
   background-color: var(--imbox-selected-background-color);
   border-color: var(--imbox-selected-border-color);
+  color: var(--imbox-selected-text-color);
+}
+
+:root[lwt-tree] imgroup[selected],
+:root[lwt-tree] :-moz-any(imconv, imcontact, imgroup):not([selected=true]):hover {
+  background-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
+  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
+}
+
+:root[lwt-tree-brighttext] imgroup[selected],
+:root[lwt-tree-brighttext] :-moz-any(imconv, imcontact, imgroup):not([selected=true]):hover {
+  background-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+}
+
+:root[lwt-tree] imconv[selected=true],
+:root[lwt-tree] imcontact[selected=true] {
+  border-color: var(--sidebar-border-color, hsla(0,0%,60%,.4))
+}
+
+:root[lwt-tree-brighttext] imconv[selected=true],
+:root[lwt-tree-brighttext] imcontact[selected=true] {
+  border-color: var(--sidebar-border-color, rgba(249,249,250,.2))
 }
 
 imconv:not(:hover) > .closeConversationButton {
   visibility: hidden;
 }
 
 /* From instantbird/themes/blist.css */
 .contactStatusText,
--- a/mail/components/mailGlue.js
+++ b/mail/components/mailGlue.js
@@ -187,16 +187,18 @@ MailGlue.prototype = {
       iconURL: "resource:///chrome/messenger/content/messenger/dark.icon.svg",
       textcolor: "white",
       accentcolor: "black",
       popup: "#4a4a4f",
       popup_text: "rgb(249, 249, 250)",
       popup_border: "#27272b",
       toolbar_field_text: "rgb(249, 249, 250)",
       toolbar_field_border: "rgba(249, 249, 250, 0.2)",
+      sidebar: "#19191a",
+      sidebar_text: "rgb(249, 249, 250)",
       author: vendorShortName,
     }, {
       useInDarkMode: true
     });
   },
 
  _offertToEnableAddons(aAddons) {
     let win = Services.wm.getMostRecentWindow("mail:3pane");
--- a/mail/themes/linux/mail/addrbook/addressbook.css
+++ b/mail/themes/linux/mail/addrbook/addressbook.css
@@ -25,20 +25,47 @@
 #abDirTreeHeader {
   border-bottom: 1px solid ThreeDShadow;
 }
 
 #abDirTreeHeader-title {
   padding-inline-start: 4px;
 }
 
-#dirTree {
+#dirTree:not(:-moz-lwtheme) {
   border-bottom: 1px solid ThreeDShadow;
 }
 
+:root[lwt-tree] #dirTree {
+  background-color: var(--sidebar-background-color);
+}
+
+:root[lwt-tree] #dirTree treechildren::-moz-tree-image,
+:root[lwt-tree] #dirTree treechildren::-moz-tree-twisty,
+:root[lwt-tree] #dirTree treechildren::-moz-tree-cell-text {
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] #dirTree treechildren::-moz-tree-row(selected) {
+  border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
+  background: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
+}
+
+:root[lwt-tree-brighttext] #dirTree treechildren::-moz-tree-row(selected) {
+  border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+  background: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+}
+
+:root[lwt-tree] #dirTree treechildren::-moz-tree-image(selected),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-twisty(selected),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-cell-text(selected) {
+
+  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
+}
+
 /* ::::: splitters ::::: */
 
 #dirTree-splitter {
   -moz-appearance: none;
   border-inline-end: 1px solid ThreeDShadow;
   /* splitter grip area */
   width: 4px;
   /* make only the splitter border visible */
--- a/mail/themes/linux/mail/chat.css
+++ b/mail/themes/linux/mail/chat.css
@@ -49,28 +49,28 @@
   margin-inline-start: -5px;
 }
 
 #contextSplitter[state="collapsed"]:hover {
   border-inline-end: 4px solid highlight;
 }
 
 /* Adaptation from #folderTree */
-#listPaneBox {
+:root:not([lwt-tree]) #listPaneBox {
   background-color: -moz-OddTreeRow;
 }
 
 #listPaneBox > * {
   background: transparent !important;
   -moz-appearance: none !important;
   border: none;
 }
 
 .conv-textbox {
-  margin-inline-start: 1px;
+  margin: 0;
   -moz-appearance: none;
 }
 
 #conv-top-info {
   -moz-appearance: none;
   color: -moz-DialogText;
 }
 
--- a/mail/themes/linux/mail/mailWindow1.css
+++ b/mail/themes/linux/mail/mailWindow1.css
@@ -16,17 +16,17 @@
 @import url("chrome://messenger/skin/messageIcons.css");
 @import url("chrome://messenger/skin/shared/mailWindow1.css");
 
 menu > #folderLocationPopup > menu > .menu-iconic-left,
 menu > #folderLocationPopup > menuitem > .menu-iconic-left {
   padding-inline-start: 2px;
 }
 
-#folderTree {
+:root:not([lwt-tree]) #folderTree {
   background-color: -moz-OddTreeRow;
 }
 
 #folderTree:not(:-moz-lwtheme) {
   border-bottom: 1px solid ThreeDShadow;
 }
 
 #threadTree {
@@ -61,16 +61,74 @@ treechildren::-moz-tree-cell-text(dummy)
 treechildren::-moz-tree-cell-text(imapdeleted) {
   text-decoration: line-through;
 }
 
 #correspondentCol {
   padding-inline-start: 17px;
 }
 
+:root[lwt-tree] #folderTree,
+:root[lwt-tree] #folderPane-toolbar {
+  background-color: var(--sidebar-background-color);
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] #folderPane-toolbar {
+  border-bottom-color: var(--sidebar-border-color, hsla(0,0%,60%,.4));
+}
+
+:root[lwt-tree-brighttext] #folderPane-toolbar {
+  border-bottom-color: var(--sidebar-border-color, rgba(249,249,250,.2));
+}
+
+:root[lwt-tree] #folderTree treechildren::-moz-tree-row(odd) {
+  background-color: transparent;
+}
+
+:root[lwt-tree] #folderTree treechildren::-moz-tree-image,
+:root[lwt-tree] #folderTree treechildren::-moz-tree-twisty,
+:root[lwt-tree] #folderTree treechildren::-moz-tree-cell-text {
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] #folderTree treechildren::-moz-tree-row(selected) {
+  border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
+  background: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
+}
+
+:root[lwt-tree-brighttext] #folderTree treechildren::-moz-tree-row(selected) {
+  border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+  background: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+}
+
+:root[lwt-tree] #folderTree treechildren::-moz-tree-image(selected),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-twisty(selected),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-cell-text(selected) {
+  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
+}
+
+:root[lwt-tree] #folderTree treecol,
+:root[lwt-tree] #folderTree treecolpicker {
+  -moz-appearance: none;
+  color: inherit;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  border-bottom: 1px solid var(--sidebar-border-color, hsla(0,0%,60%,.4));
+}
+
+:root[lwt-tree] #folderTree treecol {
+  border-inline-end: 1px solid var(--sidebar-border-color, hsla(0,0%,60%,.4));
+}
+
+:root[lwt-tree-brighttext] #folderTree treecol,
+:root[lwt-tree-brighttext] #folderTree treecolpicker {
+  border-color: var(--sidebar-border-color, rgba(249,249,250,.2));
+}
+
 /* ..... folder pane adjustments ..... */
 
 #folderPane-toolbar {
   min-height: 24px;
   border-bottom: 1px solid ThreeDShadow;
 }
 
 /* ..... splitter adjustments ..... */
@@ -197,17 +255,17 @@ treechildren::-moz-tree-cell-text(imapde
   -moz-appearance: none;
 }
 
 /* ..... menulists on main toolbar ..... */
 
 menulist {
   -moz-appearance: none;
   min-height: 24px;
-  color: inherit;
+  color: inherit !important;
   margin: 1px 4px;
   padding: 1px 6px;
   border: 1px solid;
   background: var(--toolbarbutton-hover-background);
   border-color: var(--toolbarbutton-hover-bordercolor);
   box-shadow: var(--toolbarbutton-hover-boxshadow);
   transition: background-color 150ms;
 }
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -63,17 +63,18 @@ toolbar[brighttext] {
 }
 
 #header-view-toolbar[brighttext],
 #ab-toolbox > toolbar[brighttext],
 .mail-toolbox > toolbar[brighttext],
 #event-toolbox > toolbar[brighttext],
 #compose-toolbox > toolbar[brighttext],
 #headers-box > toolbar[brighttext],
-#FormatToolbox > toolbar[brighttext]  {
+#FormatToolbox > toolbar[brighttext],
+:root[lwt-tree-brighttext] #folderPane-toolbar {
   --toolbarbutton-text-color: #fff;
   --toolbarbutton-hover-background: rgba(255, 255, 255, .25);
   --toolbarbutton-hover-bordercolor: rgba(255, 255, 255, .5);
   --toolbarbutton-header-bordercolor: rgba(255, 255, 255, .25);
 
   --toolbarbutton-active-background: rgba(255, 255, 255, .4);
   --toolbarbutton-active-bordercolor: rgba(255, 255, 255, .7);
   --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(255, 255, 255, .4) inset;
@@ -672,20 +673,16 @@ menuitem:not([type]) {
 #aboutName {
   list-style-image: url("moz-icon://stock/gtk-about?size=menu");
 }
 
 #addressBook {
   list-style-image: url("chrome://messenger/skin/addressbook/icons/addrbook.png");
 }
 
-statusbarpanel {
-  -moz-appearance: none !important;
-}
-
 treechildren::-moz-tree-row {
   min-height: 18px;
 }
 
 treechildren::-moz-tree-cell-text {
   padding-inline-start: 5px;
 }
 
@@ -700,34 +697,34 @@ statusbar {
   -moz-appearance: statusbar;
   min-height: 22px;
 }
 
 statusbar:-moz-lwtheme {
   -moz-appearance: none;
 }
 
+statusbar:-moz-lwtheme-brighttext {
+  --tabs-border-color: hsla(0,0%,60%,.4);
+}
+
 statusbarpanel {
-  -moz-appearance: statusbarpanel;
+  -moz-appearance: none;
   -moz-box-align: center;
   -moz-box-pack: center;
   padding: 0 4px;
 }
 
 .statusbar-resizerpanel {
   -moz-box-align: end;
   -moz-box-pack: end;
   -moz-appearance: resizerpanel;
   padding: 0;
 }
 
-statusbarpanel:-moz-lwtheme {
-  -moz-appearance: none;
-}
-
 /* Status panel */
 
 .statusbarpanel-iconic {
   padding: 0 1px;
 }
 
 .statuspanel-label {
   margin: 0;
--- a/mail/themes/osx/mail/addrbook/addressbook.css
+++ b/mail/themes/osx/mail/addrbook/addressbook.css
@@ -34,50 +34,50 @@
 
 /* ::::: directory pane icons ::::: */
 
 #abDirTreeHeader {
   -moz-appearance: treeheadercell;
   height: 16px;
 }
 
-#dirTree {
+:root:not([lwt-tree]) #dirTree {
   -moz-appearance: -moz-mac-source-list;
   -moz-font-smoothing-background-color: -moz-mac-source-list;
   border-inline-end: 1px solid #bdbdbd;
 }
 
 #dirTree treechildren::-moz-tree-row {
   padding-bottom: 1px;
   background-color: transparent;
 }
 
-#dirTree treechildren::-moz-tree-row(selected) {
+:root:not([lwt-tree]) #dirTree treechildren::-moz-tree-row(selected) {
   -moz-appearance: -moz-mac-source-list-selection;
   -moz-font-smoothing-background-color: -moz-mac-source-list-selection;
 }
 
 @media not all and (-moz-mac-yosemite-theme) {
-  #dirTree treechildren::-moz-tree-row(selected, focus) {
+  :root:not([lwt-tree]) #dirTree treechildren::-moz-tree-row(selected, focus) {
     -moz-appearance: -moz-mac-active-source-list-selection;
     -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection;
   }
 
   #dirTree treechildren::-moz-tree-cell-text(selected) {
     color: white;
   }
 }
 
 @media (-moz-mac-yosemite-theme) {
   #dirTree treechildren::-moz-tree-cell-text {
     font-family: 'Helvetica Neue';
     font-size: 9.5pt;
     font-weight: 300;
   }
-  
+
   #dirTree treechildren::-moz-tree-cell-text(selected, focus) {
     color: #282828;
   }
 }
 
 @media (min-resolution: 2dppx) {
   treechildren::-moz-tree-image(DirCol) {
     width: 16px;
@@ -97,35 +97,57 @@
   }
 
   treechildren::-moz-tree-image(DirCol, IsRemote-true, IsSecure-true) {
     list-style-image: url("chrome://messenger/skin/addressbook/icons/addressbook@2x.png");
     -moz-image-region: rect(0px 128px 32px 96px);
   }
 }
 
+:root[lwt-tree] #dirTree {
+  background-color: var(--sidebar-background-color);
+}
+
+:root[lwt-tree] #dirTree treechildren::-moz-tree-image,
+:root[lwt-tree] #dirTree treechildren::-moz-tree-twisty,
+:root[lwt-tree] #dirTree treechildren::-moz-tree-cell-text {
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] #dirTree treechildren::-moz-tree-row(selected) {
+  border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
+  background: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
+}
+
+:root[lwt-tree-brighttext] #dirTree treechildren::-moz-tree-row(selected) {
+  border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+  background: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+}
+
+:root[lwt-tree] #dirTree treechildren::-moz-tree-image(selected),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-twisty(selected),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-cell-text(selected) {
+  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
+}
+
 /* ::::: splitters ::::: */
 
 splitter {
   background-color: transparent;
   width: 7px;
   min-width: 7px;
   min-height: 7px;
 }
 
 #dirTree-splitter,
 #results-splitter {
   height: 7px !important;
   min-height: 7px;
 }
 
-#status-bar {
-  border-top: none !important;
-}
-
 /* ::::: results pane ::::: */
 
 #abResultsTree {
   -moz-appearance: -moz-mac-source-list;
   -moz-font-smoothing-background-color: -moz-mac-source-list;
 }
 
 #abResultsTree treechildren::-moz-tree-row {
--- a/mail/themes/osx/mail/chat.css
+++ b/mail/themes/osx/mail/chat.css
@@ -8,30 +8,30 @@
 
 #chatTabPanel {
   --imbox-selected-text-color: -moz-FieldText;
   --imbox-selected-background-color: -moz-Field;
   --imbox-selected-border-color: #bdbdbd;
   --imgroup-selected-background-color: ThreeDLightShadow;
 }
 
-imgroup[selected] {
+:root:not([lwt-tree]) imgroup[selected] {
   -moz-appearance: -moz-mac-source-list-selection;
   -moz-font-smoothing-background-color: -moz-mac-source-list-selection;
 }
 
 .convUnreadCount,
 .contactDisplayName,
 .convDisplayName,
 .contactStatusText,
 .convStatusText {
   margin-top: 3px;
 }
 
-#contactlistbox {
+:root:not([lwt-tree]) #contactlistbox {
   /* border-inline-start because of the inverted direction */
   border-inline-start: 1px solid var(--imbox-selected-border-color);
 }
 
 #contactlistbox > scrollbox {
   margin-inline-start: -1px;
 }
 
@@ -117,29 +117,29 @@ imgroup[selected] {
 }
 
 .startChatBubble > .button-box > .button-icon,
 .closeConversationButton > .button-box > .button-icon {
   margin-inline-start: 0;
 }
 
 /* Adaptation of #folderPaneBox/#folderPaneTree from osx/mail/mailWindow1.css */
-#listPaneBox {
+:root:not([lwt-tree]) #listPaneBox {
   -moz-appearance: -moz-mac-source-list;
   -moz-font-smoothing-background-color: -moz-mac-source-list;
 }
 
 #listPaneBox > * {
   background: transparent !important;
   -moz-appearance: none !important;
 }
 
 /* Set a background color to avoid lightweight theme backgrounds */
 #contextPane {
-  background-color: #FFFFFF;
+  background-color: #fff;
 }
 
 #statusTypeIcon[status="available"],
 #statusTypeAvailable,
 .statusTypeIcon[status="available"],
 #imStatusAvailable,
 #appmenu_imStatusAvailable,
 richlistitem[state="connected"] .accountStateIcon {
--- a/mail/themes/osx/mail/mailWindow1.css
+++ b/mail/themes/osx/mail/mailWindow1.css
@@ -29,17 +29,17 @@
   border-bottom: 1px solid #bebebe;
 }
 
 #folderPane-toolbar:-moz-window-inactive {
   background-color: -moz-mac-chrome-inactive;
   background-image: none;
 }
 
-#folderTree {
+:root:not([lwt-tree]) #folderTree {
   -moz-appearance: -moz-mac-source-list;
   -moz-font-smoothing-background-color: -moz-mac-source-list;
 }
 
 .focusring > .tree-stack > .tree-rows > .tree-bodybox {
   border: 0;
 }
 
@@ -48,23 +48,23 @@
 }
 
 #folderTree treechildren::-moz-tree-row {
   padding-inline-start: 2px !important;
   padding-bottom: 2px;
   background: transparent;
 }
 
-#folderTree treechildren::-moz-tree-row(selected) {
+:root:not([lwt-tree]) #folderTree treechildren::-moz-tree-row(selected) {
   -moz-appearance: -moz-mac-source-list-selection;
   -moz-font-smoothing-background-color: -moz-mac-source-list-selection;
 }
 
 @media (-moz-mac-yosemite-theme: 0) {
-  #folderTree treechildren::-moz-tree-row(selected, focus) {
+  :root:not([lwt-tree]) #folderTree treechildren::-moz-tree-row(selected, focus) {
     -moz-appearance: -moz-mac-active-source-list-selection;
     -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection;
   }
 
   #folderTree treechildren::-moz-tree-twisty(selected),
   #folderTree treechildren::-moz-tree-cell-text(selected) {
     color: white;
   }
@@ -82,16 +82,70 @@
     color: #282828;
   }
 }
 
 treechildren::-moz-tree-cell-text(imapdeleted) {
   text-decoration: line-through;
 }
 
+:root[lwt-tree] #folderTree,
+:root[lwt-tree] #folderPane-toolbar {
+  background: var(--sidebar-background-color);
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] #folderPane-toolbar {
+  border-bottom-color: var(--sidebar-border-color, hsla(0,0%,60%,.4));
+}
+
+:root[lwt-tree-brighttext] #folderPane-toolbar {
+  border-bottom-color: var(--sidebar-border-color, rgba(249,249,250,.2));
+}
+
+:root[lwt-tree] #folderTree treechildren::-moz-tree-image,
+:root[lwt-tree] #folderTree treechildren::-moz-tree-twisty,
+:root[lwt-tree] #folderTree treechildren::-moz-tree-cell-text {
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] #folderTree treechildren::-moz-tree-row(selected) {
+  border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
+  background: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
+}
+
+:root[lwt-tree-brighttext] #folderTree treechildren::-moz-tree-row(selected) {
+  border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+  background: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+}
+
+:root[lwt-tree] #folderTree treechildren::-moz-tree-image(selected),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-twisty(selected),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-cell-text(selected) {
+  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
+}
+
+:root[lwt-tree] #folderTree treecol,
+:root[lwt-tree] #folderTree treecolpicker {
+  -moz-appearance: none;
+  color: inherit;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  border-bottom: 1px solid var(--sidebar-border-color, hsla(0,0%,60%,.4));
+}
+
+:root[lwt-tree] #folderTree treecol {
+  border-inline-end: 1px solid var(--sidebar-border-color, hsla(0,0%,60%,.4));
+}
+
+:root[lwt-tree-brighttext] #folderTree treecol,
+:root[lwt-tree-brighttext] #folderTree treecolpicker {
+  border-color: var(--sidebar-border-color, rgba(249,249,250,.2));
+}
+
 /* ::::: group rows ::::: */
 
 treechildren::-moz-tree-row(dummy)  {
   background-image: url("chrome://messenger/skin/icons/group-background.gif");
   background-repeat: repeat-x;
   background-color: rgb(246, 246, 246);
   border: 1px solid rgb(197, 199, 202);
   margin: 0 1px;
--- a/mail/themes/osx/mail/messenger.css
+++ b/mail/themes/osx/mail/messenger.css
@@ -70,17 +70,18 @@
 toolbar[brighttext] {
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #45a1ff);
 }
 
 #FindToolbar:-moz-lwtheme,
 #ab-toolbox > toolbar:-moz-lwtheme,
 .mail-toolbox > toolbar:-moz-lwtheme,
 #compose-toolbox > toolbar:-moz-lwtheme,
-#navigation-toolbox > toolbar:-moz-lwtheme {
+#navigation-toolbox > toolbar:-moz-lwtheme,
+:root[lwt-tree-brighttext] #folderPane-toolbar {
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0, 0%, 100%, .1));
   --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, hsla(0, 0%, 0%, .2));
 
   --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0, 0%, 0%, .02));
   --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, hsla(0, 0%, 0%, .3));
   --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, hsla(0, 0%, 0%, .2)) inset;
 
   --toolbarbutton-checkedhover-backgroundcolor: var(--lwt-toolbarbutton-hover-background, hsla(0, 0%, 0%, .09));
@@ -669,16 +670,20 @@ statusbarpanel {
 
 statusbar:-moz-lwtheme {
   -moz-appearance: none;
   background: none;
   border-style: none;
   text-shadow: inherit;
 }
 
+statusbar:-moz-lwtheme-brighttext {
+  --tabs-border-color: hsla(0,0%,60%,.4);
+}
+
 /* Status panel */
 
 .statusbarpanel-iconic {
   padding: 0;
 }
 
 .statuspanel-label {
   margin: 0;
--- a/mail/themes/windows/mail/addrbook/addressbook.css
+++ b/mail/themes/windows/mail/addrbook/addressbook.css
@@ -97,28 +97,80 @@ toolbox > toolbar:last-of-type {
   padding-top: 3px;
   padding-bottom: 3px;
   padding-inline-start: 5px;
 }
 
 /* ::::: directory pane adjustments ::::: */
 
 @media (-moz-windows-default-theme) {
-  #dirTree {
+  :root:not([lwt-tree]) #dirTree {
     background-color: #fafafa;
   }
 
   sidebarheader {
     -moz-appearance: none;
     background-color: #f8f8f8;
     border-top: 0;
     border-bottom: 1px solid #a9b1b8;
   }
 }
 
+:root[lwt-tree] #dirTree {
+  background-color: var(--sidebar-background-color);
+}
+
+:root[lwt-tree] #dirTree treechildren::-moz-tree-image,
+:root[lwt-tree] #dirTree treechildren::-moz-tree-twisty,
+:root[lwt-tree] #dirTree treechildren::-moz-tree-cell-text {
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] #folderTree treechildren::-moz-tree-row(current, focus) {
+  border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.6));
+  outline: none;
+}
+
+:root[lwt-tree-brighttext] #folderTree treechildren::-moz-tree-row(current, focus) {
+  border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.3));
+}
+
+:root[lwt-tree] #dirTree treechildren::-moz-tree-row(hover),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-row(hover, current),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-row(hover, selected),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-row(selected),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-row(selected, focus),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-row(selected, current, focus) {
+  border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
+  background: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
+  outline: none;
+}
+
+:root[lwt-tree-brighttext] #dirTree treechildren::-moz-tree-row(hover),
+:root[lwt-tree-brighttext] #dirTree treechildren::-moz-tree-row(hover, current),
+:root[lwt-tree-brighttext] #dirTree treechildren::-moz-tree-row(hover, selected),
+:root[lwt-tree-brighttext] #dirTree treechildren::-moz-tree-row(selected),
+:root[lwt-tree-brighttext] #dirTree treechildren::-moz-tree-row(selected, focus),
+:root[lwt-tree-brighttext] #dirTree treechildren::-moz-tree-row(selected, current, focus) {
+  border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+  background: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+}
+
+:root[lwt-tree] #dirTree treechildren::-moz-tree-image(hover),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-image(selected),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-image(selected, focus),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-twisty(hover),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-twisty(selected),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-twisty(selected, focus),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-cell-text(hover),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-cell-text(selected),
+:root[lwt-tree] #dirTree treechildren::-moz-tree-cell-text(selected, focus) {
+  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
+}
+
 /* Don't use the listbox appearance as that gives us a blue-grey top border
    that collides with the primary toolbar border */
 #dirTree {
   border-inline-end: 1px solid transparent;
 }
 
 /* ::::: splitters ::::: */
 
--- a/mail/themes/windows/mail/chat.css
+++ b/mail/themes/windows/mail/chat.css
@@ -9,17 +9,17 @@
 #chatTabPanel {
   --imbox-selected-text-color: -moz-FieldText;
   --imbox-selected-background-color: -moz-Field;
   --imbox-selected-border-color: #a9b7c9;
   --imgroup-selected-background-color: ThreeDLightShadow;
 }
 
 /* Adaptation from #folderTree */
-#listPaneBox {
+:root:not([lwt-tree]) #listPaneBox {
   -moz-appearance:  none;
   background-color: -moz-Field;
   color: -moz-FieldText;
 }
 
 #listPaneBox > * {
   background: transparent !important;
   -moz-appearance: none !important;
@@ -218,38 +218,38 @@ richlistitem[state="disconnected"] .acco
 .statusTypeIcon[status="away"],
 #imStatusUnavailable,
 #appmenu_imStatusUnavailable {
   list-style-image: url("chrome://messenger/skin/icons/status.png");
   -moz-image-region: rect(0 64px 16px 48px);
 }
 
 @media (-moz-os-version: windows-win7) and (-moz-windows-default-theme) {
-  #listPaneBox {
+  :root:not([lwt-tree]) #listPaneBox {
     background-color: rgb(238, 243, 250);
   }
 
   #conversationsDeck {
     background-color: rgb(233, 239, 245);
   }
 
   .conv-nicklist-header,
   .conv-logs-header-label {
     background-color: rgb(233, 239, 245);
   }
 }
 
 @media (-moz-os-version: windows-win8) and (-moz-windows-default-theme) {
-  #listPaneBox {
+  :root:not([lwt-tree]) #listPaneBox {
     background-color: -moz-Dialog;
   }
 }
 
 @media (-moz-os-version: windows-win10) and (-moz-windows-default-theme) {
-  #listPaneBox {
+  :root:not([lwt-tree]) #listPaneBox {
     background-color: #fafafa;
   }
 }
 
 @media (-moz-os-version: windows-win8) and (-moz-windows-default-theme),
        (-moz-os-version: windows-win10) and (-moz-windows-default-theme) {
   .statusMessageToolbarItem {
     border-radius: 0;
index 5b7b03a8511b8c4d343da988957d8ffa48517f93..5b11c1d59ac02aa2a8360004c29f4eac25371a64
GIT binary patch
literal 5654
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
--- a/mail/themes/windows/mail/mailWindow1.css
+++ b/mail/themes/windows/mail/mailWindow1.css
@@ -548,17 +548,17 @@ treechildren::-moz-tree-cell-text(imapde
 
   #folderPaneHeader {
     -moz-appearance: none;
     background-color: #f8f8f8;
     border-top: 0px;
     border-bottom: 1px solid #a9b1b8;
   }
 
-  #folderTree {
+  :root:not([lwt-tree]) #folderTree {
     background-color: #fafafa;
   }
 
   #folderTree treechildren::-moz-tree-cell(dropOn) {
     background-image: linear-gradient(rgba(255, 255, 255, .7),
                                       rgba(255, 255, 255, .45));
     background-color: Highlight;
     border-radius: 3px;
@@ -575,16 +575,103 @@ treechildren::-moz-tree-cell-text(imapde
 
   #viewPicker > .menulist-label-box > .menulist-label,
   #locationFolders > .menulist-label-box > .menulist-label {
     margin-top: 0 !important;
     margin-bottom: 0 !important;
   }
 }
 
+:root[lwt-tree] #folderTree,
+:root[lwt-tree] #folderPane-toolbar {
+  background-color: var(--sidebar-background-color);
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] #folderPane-toolbar {
+  border-bottom-color: var(--sidebar-border-color, hsla(0,0%,60%,.4));
+}
+
+:root[lwt-tree-brighttext] #folderPane-toolbar {
+  border-bottom-color: var(--sidebar-border-color, rgba(249,249,250,.2));
+  --toolbarbutton-hover-background: rgba(255, 255, 255, .25);
+  --toolbarbutton-hover-bordercolor: rgba(255, 255, 255, .5);
+  --toolbarbutton-header-bordercolor: rgba(255, 255, 255, .25);
+  --toolbarbutton-active-background: rgba(255, 255, 255, .4);
+  --toolbarbutton-active-bordercolor: rgba(255, 255, 255, .7);
+  --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(255, 255, 255, .4) inset;
+  --toolbarbutton-checkedhover-backgroundcolor: rgba(255, 255, 255, .5);
+}
+
+:root[lwt-tree] #folderTree treechildren::-moz-tree-image,
+:root[lwt-tree] #folderTree treechildren::-moz-tree-twisty,
+:root[lwt-tree] #folderTree treechildren::-moz-tree-cell-text {
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] #folderTree treechildren::-moz-tree-row(current, focus) {
+  border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.6));
+  outline: none;
+}
+
+:root[lwt-tree-brighttext] #folderTree treechildren::-moz-tree-row(current, focus) {
+  border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.3));
+}
+
+:root[lwt-tree] #folderTree treechildren::-moz-tree-row(hover),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-row(hover, current),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-row(hover, selected),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-row(selected),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-row(selected, focus),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-row(selected, current, focus) {
+  border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
+  background: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
+  outline: none;
+}
+
+:root[lwt-tree-brighttext] #folderTree treechildren::-moz-tree-row(hover),
+:root[lwt-tree-brighttext] #folderTree treechildren::-moz-tree-row(hover, current),
+:root[lwt-tree-brighttext] #folderTree treechildren::-moz-tree-row(hover, selected),
+:root[lwt-tree-brighttext] #folderTree treechildren::-moz-tree-row(selected),
+:root[lwt-tree-brighttext] #folderTree treechildren::-moz-tree-row(selected, focus),
+:root[lwt-tree-brighttext] #folderTree treechildren::-moz-tree-row(selected, current, focus) {
+  border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+  background: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+}
+
+:root[lwt-tree] #folderTree treechildren::-moz-tree-image(hover),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-image(selected),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-image(selected, focus),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-twisty(hover),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-twisty(selected),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-twisty(selected, focus),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-cell-text(hover),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-cell-text(selected),
+:root[lwt-tree] #folderTree treechildren::-moz-tree-cell-text(selected, focus) {
+  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
+}
+
+:root[lwt-tree] #folderTree treecol,
+:root[lwt-tree] #folderTree treecolpicker {
+  -moz-appearance: none;
+  color: inherit;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  border-bottom: 1px solid var(--sidebar-border-color, hsla(0,0%,60%,.4));
+}
+
+:root[lwt-tree] #folderTree treecol {
+  border-inline-end: 1px solid var(--sidebar-border-color, hsla(0,0%,60%,.4));
+}
+
+:root[lwt-tree-brighttext] #folderTree treecol,
+:root[lwt-tree-brighttext] #folderTree treecolpicker {
+  border-color: var(--sidebar-border-color, rgba(249,249,250,.2));
+}
+
 #viewPicker > .menulist-label-box > .menulist-icon,
 #locationFolders > .menulist-label-box > .menulist-icon {
   min-height: 16px;
 }
 
 @media (-moz-os-version: windows-win7) and (-moz-windows-default-theme) {
   @media (-moz-windows-glass: 0) {
     #messengerWindow:not([tabsintitlebar]) > #navigation-toolbox:not(:-moz-lwtheme) {
--- a/mail/themes/windows/mail/messenger.css
+++ b/mail/themes/windows/mail/messenger.css
@@ -81,17 +81,18 @@ toolbar[brighttext] {
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #45a1ff);
 }
 
 #header-view-toolbar[brighttext],
 #ab-toolbox > toolbar[brighttext],
 .mail-toolbox > toolbar[brighttext],
 #event-toolbox > toolbar[brighttext],
 #compose-toolbox > toolbar[brighttext],
-#navigation-toolbox > toolbar[brighttext] {
+#navigation-toolbox > toolbar[brighttext],
+:root[lwt-tree-brighttext] #folderPane-toolbar {
   --toolbarbutton-hover-background: rgba(255, 255, 255, .25);
   --toolbarbutton-hover-bordercolor: rgba(255, 255, 255, .5);
   --toolbarbutton-header-bordercolor: rgba(255, 255, 255, .25);
 
   --toolbarbutton-active-background: rgba(255, 255, 255, .4);
   --toolbarbutton-active-bordercolor: rgba(255, 255, 255, .7);
   --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(255, 255, 255, .4) inset;