Bug 1636773 - Make the Contacts sidebar themeable. r=aleca
authorRichard Marti <richard.marti@gmail.com>
Wed, 13 May 2020 12:46:06 +0200
changeset 39138 695fd95c327221a496cd3076a3ab43415263cada
parent 39137 4ab33a9f130373346df6bfbfc7984a29dad2e46d
child 39139 2bd6adda19764077cad6db53586f51916aa2dd56
push id402
push userclokep@gmail.com
push dateMon, 29 Jun 2020 20:48:04 +0000
reviewersaleca
bugs1636773
Bug 1636773 - Make the Contacts sidebar themeable. r=aleca
mail/components/addrbook/content/abContactsPanel.xhtml
mail/themes/linux/mail/addrbook/abContactsPanel.css
mail/themes/linux/mail/compose/messengercompose.css
mail/themes/osx/mail/addrbook/abContactsPanel.css
mail/themes/osx/mail/compose/messengercompose.css
mail/themes/shared/jar.inc.mn
mail/themes/shared/mail/abContactsPanel.css
mail/themes/shared/mail/icons/menu.svg
mail/themes/shared/mail/messengercompose.css
mail/themes/shared/mail/themeableDialog.css
mail/themes/windows/mail/addrbook/abContactsPanel.css
mail/themes/windows/mail/compose/messengercompose.css
--- a/mail/components/addrbook/content/abContactsPanel.xhtml
+++ b/mail/components/addrbook/content/abContactsPanel.xhtml
@@ -1,26 +1,28 @@
 <?xml version="1.0"?>
 
 <!-- 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/. -->
 
 <?xml-stylesheet href="chrome://messenger/skin/searchBox.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/addressbook/abContactsPanel.css" type="text/css"?>
+<?xml-stylesheet href="chrome://messenger/skin/themeableDialog.css" type="text/css"?>
 
 <!DOCTYPE window [
 <!ENTITY % abResultsPaneDTD SYSTEM "chrome://messenger/locale/addressbook/abResultsPane.dtd" >
 %abResultsPaneDTD;
 <!ENTITY % abContactsPanelDTD SYSTEM "chrome://messenger/locale/addressbook/abContactsPanel.dtd" >
 %abContactsPanelDTD;
 ]>
 
 <window id="abContactsPanel"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"
+        lightweightthemes="true"
         onload="AbPanelLoad();"
         onunload="AbPanelUnload();">
 
   <stringbundle id="bundle_addressBook" src="chrome://messenger/locale/addressbook/addressBook.properties"/>
 
   <script src="chrome://global/content/globalOverlay.js"/>
   <script src="chrome://global/content/editMenuOverlay.js"/>
   <script src="chrome://communicator/content/utilityOverlay.js"/>
@@ -97,19 +99,19 @@
               command="cmd_newlist"/>
   </menupopup>
 
   <vbox id="results_box" flex="1">
     <separator class="thin"/>
     <hbox id="AbPickerHeader" class="toolbar">
       <label value="&addressbookPicker.label;" accesskey="&addressbookPicker.accesskey;" control="addressbookList"/>
       <spacer flex="1"/>
-      <toolbarbutton id="abContextMenuButton"
-                     tooltiptext="&abContextMenuButton.tooltip;"
-                     onclick="showContextMenu('sidebarAbContextMenu', event, [this, 'after_end', 0, 0, true]);"/>
+      <button id="abContextMenuButton"
+              tooltiptext="&abContextMenuButton.tooltip;"
+              onclick="showContextMenu('sidebarAbContextMenu', event, [this, 'after_end', 0, 0, true]);"/>
     </hbox>
     <hbox id="panel-bar" class="toolbar" align="center">
       <menulist is="menulist-addrbooks" id="addressbookList"
                 alladdressbooks="true"
                 oncommand="AddressBookMenuListChange(this.value);"
                 flex="1"
                 persist="value"/>
     </hbox>
--- a/mail/themes/linux/mail/addrbook/abContactsPanel.css
+++ b/mail/themes/linux/mail/addrbook/abContactsPanel.css
@@ -1,42 +1,25 @@
 /* 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/. */
 
 /* ===== sidebarPanel.css ===============================================
   == Styles for the Address Book sidebar panel.
   ======================================================================= */
 
-@import url("chrome://messenger/skin/messenger.css");
-@import url("chrome://messenger/skin/addressbook/addressbook.css");
+@import url("chrome://messenger/skin/shared/abContactsPanel.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-#abContactsPanel {
-  -moz-appearance: toolbox;
-  background-color: -moz-Dialog;
-}
-
-#results_box {
-  background-color: transparent;
-}
-
 #abContextMenuButton {
   margin: -4px 4px 0;
-  list-style-image: url("chrome://messenger/skin/addressbook/icons/menu.svg");
+  padding-inline: 4px 2px;
 }
 
 #abContextMenuButton > .toolbarbutton-icon {
   margin-inline-end: 0;
-  width: 11px;
-  height: 11px;
 }
 
-#abContextMenuButton > .toolbarbutton-text {
-  display: none;
-}
-
-#abResultsTree {
-  border-inline-end: none;
+:root:not([lwt-tree]) #abResultsTree {
   border-inline-start: 1px solid ThreeDShadow;
   border-bottom: 1px solid ThreeDShadow;
 }
--- a/mail/themes/linux/mail/compose/messengercompose.css
+++ b/mail/themes/linux/mail/compose/messengercompose.css
@@ -311,22 +311,16 @@ toolbarbutton.formatting-button[disabled
 .ab-closebutton > .toolbarbutton-icon {
   margin-inline-end: 0; /* override toolkit's default value */
 }
 
 #sidebar {
   background-color: Window;
 }
 
-#sidebar-box .sidebar-header {
-  color: -moz-DialogText;
-  text-shadow: none;
-  background-color: -moz-Dialog;
-}
-
 #sidebar-splitter {
   -moz-appearance: none;
   border-inline-start: 1px solid ThreeDShadow;
   /* splitter grip area */
   width: 5px;
   /* make only the splitter border visible */
   margin-inline-end: -5px;
   /* because of the negative margin needed to make the splitter visible */
--- a/mail/themes/osx/mail/addrbook/abContactsPanel.css
+++ b/mail/themes/osx/mail/addrbook/abContactsPanel.css
@@ -1,37 +1,16 @@
 /* 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/. */
 
 /* ===== sidebarPanel.css ===============================================
   == Styles for the Address Book sidebar panel.
   ======================================================================= */
 
-@import url("chrome://messenger/skin/messenger.css");
-@import url("chrome://messenger/skin/addressbook/addressbook.css");
+@import url("chrome://messenger/skin/shared/abContactsPanel.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-#abContactsPanel {
-  -moz-appearance: none !important;
-  background-color: transparent;
-}
-
 #abContextMenuButton {
-  -moz-appearance: button;
   margin-top: -4px;
-  margin-inline-end: 1px;
-  list-style-image: url("chrome://messenger/skin/addressbook/icons/menu.svg");
+  padding-inline: 4px 0;
 }
-
-#abContextMenuButton > .toolbarbutton-icon {
-  width: 11px;
-  height: 11px;
-}
-
-#abContextMenuButton > .toolbarbutton-text {
-  display: none;
-}
-
-#results_box {
-  background-color: transparent;
-}
--- a/mail/themes/osx/mail/compose/messengercompose.css
+++ b/mail/themes/osx/mail/compose/messengercompose.css
@@ -465,17 +465,16 @@ toolbarbutton.formatting-button[disabled
   background-color: transparent;
   margin-inline-end: -5px;
   position: relative;
   z-index: 10;
 }
 
 #sidebar-title {
   font: icon;
-  color: #000;
 }
 
 #titlebar {
   height: 22px;
 }
 
 #titlebar-buttonbox-container {
   margin-top: 3px;
--- a/mail/themes/shared/jar.inc.mn
+++ b/mail/themes/shared/jar.inc.mn
@@ -176,16 +176,17 @@
   skin/classic/messenger/icons/timeline.svg                   (../shared/mail/icons/timeline.svg)
   skin/classic/messenger/icons/toolbarbutton-arrow.svg        (../shared/mail/icons/toolbarbutton-arrow.svg)
   skin/classic/messenger/icons/underline.svg                  (../shared/mail/icons/underline.svg)
   skin/classic/messenger/icons/userIcon.svg                   (../shared/mail/icons/userIcon.svg)
   skin/classic/messenger/icons/visible.svg                    (../shared/mail/icons/visible.svg)
   skin/classic/messenger/icons/waiting.svg                    (../shared/mail/icons/waiting.svg)
   skin/classic/messenger/icons/zoomout.svg                    (../shared/mail/icons/zoomout.svg)
   skin/classic/messenger/shared/aboutDownloads.css            (../shared/mail/aboutDownloads.css)
+  skin/classic/messenger/shared/abContactsPanel.css           (../shared/mail/abContactsPanel.css)
   skin/classic/messenger/shared/accountCentral.css            (../shared/mail/accountCentral.css)
   skin/classic/messenger/shared/accountCreation.css           (../shared/mail/accountCreation.css)
   skin/classic/messenger/shared/newInstallPage.css            (../shared/mail/newInstallPage.css)
   skin/classic/messenger/shared/accountManage.css             (../shared/mail/accountManage.css)
   skin/classic/messenger/shared/accountProvisioner.css        (../shared/mail/accountProvisioner.css)
   skin/classic/messenger/shared/addressbook.css               (../shared/mail/addressbook.css)
   skin/classic/messenger/shared/compacttheme.css              (../shared/mail/compacttheme.css)
   skin/classic/messenger/shared/creationDialog.css            (../shared/mail/creationDialog.css)
copy from mail/themes/linux/mail/addrbook/abContactsPanel.css
copy to mail/themes/shared/mail/abContactsPanel.css
--- a/mail/themes/linux/mail/addrbook/abContactsPanel.css
+++ b/mail/themes/shared/mail/abContactsPanel.css
@@ -6,37 +6,66 @@
   == Styles for the Address Book sidebar panel.
   ======================================================================= */
 
 @import url("chrome://messenger/skin/messenger.css");
 @import url("chrome://messenger/skin/addressbook/addressbook.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-#abContactsPanel {
-  -moz-appearance: toolbox;
-  background-color: -moz-Dialog;
+#abContactsPanel:not([lwt-tree]) {
+  --button-background: rgba(128, 128, 128, .15);
+  --button-background-hover: rgba(128, 128, 128, .25);
+  --button-background-active: rgba(128, 128, 128, .35);
+  --box-text-color: MenuText;
+  --box-background-color: Menu;
+  --box-border-color: ThreeDShadow;
+  --field-border-color: rgba(128, 128, 128, .6);
+  --popup-item-hover: rgba(128, 128, 128, .2);
+  --popup-item-hover-text: MenuText;
+  --popup-item-selected: Highlight;
+  --popup-selected-text: HighlightText;
 }
 
-#results_box {
-  background-color: transparent;
+#abContactsPanel {
+  -moz-appearance: none;
+  background-color: -moz-Dialog;
+  background-image: none !important;
+  color: -moz-dialogText;
+  text-shadow: none;
+}
+
+#abContactsPanel[lwt-tree] {
+  background-color: var(--toolbar-bgcolor);
+  color: var(--lwt-text-color);
 }
 
 #abContextMenuButton {
-  margin: -4px 4px 0;
+  min-width: 11px;
   list-style-image: url("chrome://messenger/skin/addressbook/icons/menu.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#abContextMenuButton:not(:hover) {
+  background: transparent;
 }
 
 #abContextMenuButton > .toolbarbutton-icon {
-  margin-inline-end: 0;
   width: 11px;
   height: 11px;
 }
 
 #abContextMenuButton > .toolbarbutton-text {
   display: none;
 }
 
+#addressbookList {
+  border: 1px solid var(--field-border-color);
+}
+
+#addressbookList:not(:hover):not([open="true"]) {
+  background: transparent;
+}
+
 #abResultsTree {
-  border-inline-end: none;
-  border-inline-start: 1px solid ThreeDShadow;
-  border-bottom: 1px solid ThreeDShadow;
+  border-inline-end: none !important;
 }
--- a/mail/themes/shared/mail/icons/menu.svg
+++ b/mail/themes/shared/mail/icons/menu.svg
@@ -1,3 +1,6 @@
-<svg id="Icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11">
-<path stroke="-moz-dialogtext" d="M 2 2.5 L 9 2.5 L 2 2.5 z M 2 5.5 L 9 5.5 L 2 5.5 z M 2 8.5 L 9 8.5 L 2 8.5 z "/>
-</svg>
\ No newline at end of file
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
+  <path stroke="context-fill" d="M2 2.5h7-7zm0 3h7-7zm0 3h7-7z"/>
+</svg>
--- a/mail/themes/shared/mail/messengercompose.css
+++ b/mail/themes/shared/mail/messengercompose.css
@@ -9,16 +9,36 @@
   --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);
 }
 
+#sidebar-box .sidebar-header {
+  -moz-appearance: none;
+  height: 30px;
+  text-shadow: none;
+  background-color: -moz-Dialog;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
+  color: -moz-dialogText;
+  border-bottom: 1px solid var(--tabs-border-color);
+}
+
+:root[lwt-tree] #sidebar-box .sidebar-header {
+  background-color: var(--toolbar-bgcolor);
+  color: var(--lwt-text-color);
+  border-bottom: 1px solid var(--tabs-border-color);
+}
+
+:root[lwt-tree-brighttext] #sidebar-box .sidebar-header {
+  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
+}
+
 /* Styles for the default system dark theme */
 
 :root[lwt-tree] #headers-box {
   background-color: var(--toolbar-bgcolor) !important;
   background-image: none !important;
   color: var(--lwt-text-color);
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background);
   --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background);
--- a/mail/themes/shared/mail/themeableDialog.css
+++ b/mail/themes/shared/mail/themeableDialog.css
@@ -1,18 +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/. */
 
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 :root {
-  --button-background: rgba(128, 128, 128, .2);
-  --button-background-hover: rgba(128, 128, 128, .35);
-  --button-background-active: rgba(128, 128, 128, .5);
+  --button-background: rgba(128, 128, 128, .15);
+  --button-background-hover: rgba(128, 128, 128, .25);
+  --button-background-active: rgba(128, 128, 128, .35);
   --box-text-color: MenuText;
   --box-background-color: Menu;
   --box-border-color: ThreeDShadow;
   --field-text-color: -moz-FieldText;
   --field-background-color: -moz-Field;
   --field-border-color: rgba(128, 128, 128, .6);
   --field-border-hover-color: rgba(128, 128, 128, .8);
   --highlight-color: Highlight;
@@ -212,16 +212,21 @@ button menupopup > menuitem[disabled="tr
 menulist menupopup > menu[disabled="true"],
 menulist menupopup > menuitem[disabled="true"] {
   color: #999;
   /* override the [_moz-menuactive="true"] background color from
      global/menu.css */
   background-color: transparent;
 }
 
+.menu-iconic-left {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
 .menu-right {
   -moz-appearance: none;
   -moz-context-properties: fill;
   list-style-image: url("chrome://messenger/skin/icons/back-12.svg");
   fill: currentColor;
 }
 
 button menupopup menuseparator,
--- a/mail/themes/windows/mail/addrbook/abContactsPanel.css
+++ b/mail/themes/windows/mail/addrbook/abContactsPanel.css
@@ -1,99 +1,29 @@
 /* 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/. */
 
 /* ===== sidebarPanel.css ===============================================
   == Styles for the Address Book sidebar panel.
   ======================================================================= */
 
-@import url("chrome://messenger/skin/messenger.css");
-@import url("chrome://messenger/skin/addressbook/addressbook.css");
+@import url("chrome://messenger/skin/shared/abContactsPanel.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-#abContactsPanel {
-  -moz-appearance: toolbox;
-  background-color: -moz-Dialog;
-}
-
 #peopleSearchInput {
   min-height: 24px;
 }
 
-#results_box {
-  background-color: transparent;
-}
-
 #abContextMenuButton {
-  margin-top: -4px !important;
-  list-style-image: url("chrome://messenger/skin/addressbook/icons/menu.svg");
+  margin-top: 0;
+  padding-inline: 0;
 }
 
 #abContextMenuButton > .toolbarbutton-icon {
   margin-inline-end: 0;
-  width: 11px;
-  height: 11px;
 }
 
-#abContextMenuButton > .toolbarbutton-text {
-  display: none;
-}
-
-#abResultsTree {
+:root:not([lwt-tree]) #abResultsTree {
   border-top: 1px solid #a9b1b8;
   border-bottom: 1px solid #a9b1b8;
 }
-
-@media (-moz-windows-default-theme) {
-  button,
-  #abContextMenuButton,
-  #addressbookList {
-    -moz-appearance: none;
-    margin: 1px 4px;
-    padding: 1px 5px !important;
-    border: 1px solid transparent;
-  }
-
-  button,
-  #addressbookList {
-    background: var(--toolbarbutton-hover-background);
-    border-color: var(--toolbarbutton-hover-bordercolor);
-    box-shadow: var(--toolbarbutton-hover-boxshadow);
-    transition-property: background-color, border-color, box-shadow;
-    transition-duration: 150ms;
-  }
-
-  button:hover,
-  #abContextMenuButton:hover,
-  #addressbookList:not([open="true"]):hover {
-    background: var(--toolbarbutton-active-background);
-    border-color: var(--toolbarbutton-active-bordercolor);
-  }
-
-  button:hover:active,
-  #abContextMenuButton:hover:active,
-  #addressbookList[open="true"] {
-    background: var(--toolbarbutton-active-background);
-    border-color: var(--toolbarbutton-active-bordercolor);
-    box-shadow: var(--toolbarbutton-active-boxshadow);
-    transition: none;
-  }
-}
-
-@media (-moz-windows-compositor) {
-  #abContactsPanel {
-    background-image: linear-gradient(rgba(255, 255, 255, 0.5) 10px,
-                      rgba(255, 255, 255, 0));
-  }
-}
-
-@media (-moz-os-version: windows-win7) and (-moz-windows-default-theme) {
-  #abContactsPanel {
-    -moz-appearance: none;
-  }
-
-  button,
-  #addressbookList {
-    border-radius: 2px;
-  }
-}
--- a/mail/themes/windows/mail/compose/messengercompose.css
+++ b/mail/themes/windows/mail/compose/messengercompose.css
@@ -253,23 +253,16 @@ toolbarbutton.formatting-button[disabled
 .color-button[disabled="true"],
 .color-button[disabled="true"]:hover {
   border: 1px inset ThreeDFace;
   opacity: 0.5;
 }
 
 /* ::::: address book sidebar ::::: */
 
-#sidebar-box .sidebar-header {
-  -moz-appearance: toolbox;
-  color: -moz-DialogText;
-  text-shadow: none;
-  background-color: -moz-Dialog;
-}
-
 .ab-closebutton > .toolbarbutton-icon {
   margin-inline-end: 0; /* override toolkit's default value */
 }
 
 #findbar-replaceButton > .toolbarbutton-icon {
   display: none;
 }
 
@@ -390,30 +383,16 @@ menulist::part(dropmarker) {
 
 menulist::part(dropmarker-icon) {
   width: 9px;
   height: 7px;
 }
 
 /* ::::: address book sidebar ::::: */
 
-#sidebar-box .sidebar-header {
-  border-bottom: 1px solid ThreeDShadow;
-  border-top: 1px solid ThreeDHighlight;
-}
-
-@media (-moz-windows-default-theme) {
-  #sidebar-box .sidebar-header {
-    -moz-appearance: none;
-    background-color: #f8f8f8;
-    border-top: 0;
-    border-bottom: 1px solid #a9b1b8;
-  }
-}
-
 #sidebar {
   background-color: -moz-Dialog;
 }
 
 #sidebar-splitter {
   border-inline-end-width: 0;
   border-inline-start: 1px solid var(--splitter-color);
   min-width: 0;