Bug 1640874 - Make the imAccounts dialog themeable. r=aleca
authorRichard Marti <richard.marti@gmail.com>
Tue, 26 May 2020 20:34:25 +0200
changeset 39251 dba64c20e3a8b91ef4750893e6b3f694fbefefc2
parent 39250 7fc15b13b7eef6b459ead9200ec8c228fe4f4925
child 39252 3d86054fed856829c92a02ee3fe09157b503ab1a
push id402
push userclokep@gmail.com
push dateMon, 29 Jun 2020 20:48:04 +0000
reviewersaleca
bugs1640874
Bug 1640874 - Make the imAccounts dialog themeable. r=aleca
mail/components/im/content/imAccounts.xhtml
mail/components/im/themes/imAccounts.css
mail/components/im/themes/imRichlistbox.css
mail/themes/linux/jar.mn
mail/themes/osx/jar.mn
mail/themes/windows/jar.mn
--- a/mail/components/im/content/imAccounts.xhtml
+++ b/mail/components/im/content/imAccounts.xhtml
@@ -1,35 +1,37 @@
 <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
 <!-- 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/messenger.css" type="text/css"?>
 <?xml-stylesheet href="chrome://chat/content/accounts.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/content/chat/imAccounts.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/imRichlistbox.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/imAccounts.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/chat.css" type="text/css"?>
-<?xml-stylesheet href="chrome://messenger/skin/input-fields.css" type="text/css"?>
+<?xml-stylesheet href="chrome://messenger/skin/themeableDialog.css" type="text/css"?>
 
 <!DOCTYPE window [
  <!ENTITY % accountsDTD SYSTEM "chrome://chat/locale/accounts.dtd">
  <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
  <!ENTITY % chatDTD SYSTEM "chrome://messenger/locale/chat.dtd">
  %accountsDTD;
  %brandDTD;
  %chatDTD;
 ]>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml"
         id="accountManager"
         windowtype="Messenger:Accounts"
         title="&accountsWindow.title;"
         style="&accountsWindow2.style;"
+        lightweightthemes="true"
         persist="width height screenX screenY">
 
   <script src="chrome://global/content/globalOverlay.js"/>
   <script src="chrome://global/content/editMenuOverlay.js"/>
   <script src="chrome://messenger/content/chat/imAccounts.js"/>
   <script src="chrome://messenger/content/accountUtils.js"/>
   <script src="chrome://messenger/content/chat/imStatusSelector.js"/>
   <script src="chrome://global/content/nsTransferable.js" />
--- a/mail/components/im/themes/imAccounts.css
+++ b/mail/components/im/themes/imAccounts.css
@@ -1,138 +1,134 @@
 /* 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/. */
 
 /* large parts copied from the addon manager */
 
 #accountManager {
-  background-color: ThreeDFace;
-  padding: 0 0;
-  margin: 0 0;
+  padding: 0;
+  margin: 0;
 }
 
-%ifndef XP_MACOSX
-xbl-notification > hbox {
-  border: none !important;
-  border-bottom: 1px solid ThreeDShadow !important;
-}
-%endif
-
 #accountsNotificationBox {
-  margin: 0 0;
+  margin: 0;
   -moz-appearance: none;
 }
 
 #noAccountScreen {
   color: -moz-FieldText;
   background-color: -moz-Field;
   overflow: auto;
+  border-block: 1px solid var(--splitter-color);
+}
+
+:root[lwt-tree] #noAccountScreen {
+  color: var(--sidebar-text-color);
+  background-color: var(--sidebar-background-color);
 }
 
 #noAccountBox {
   max-width: 30em;
   background: url("chrome://global/skin/icons/info.svg") left 5px no-repeat;
   background-size: 2.5em;
-  padding-right: 3.5em;
-  padding-left: 3.5em;
-  margin-left: 1.5em;
-  margin-right: 1.5em;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin-inline: 1.5em;
+  padding-inline: 3.5em;
 }
 
 #noAccountInnerBox {
-  opacity: .9;
+  opacity: 0.9;
 }
 
 #noAccountTitle {
   font-size: 2em;
   font-weight: lighter;
   line-height: 1.2;
   margin: 0;
   margin-bottom: .3em;
   padding-bottom: .2em;
-  border-bottom: 1px solid -moz-FieldText;
+  border-bottom: 1px solid var(--splitter-color);
 }
 
 #noAccountDesc {
   font-size: 110%;
   margin-right: 0;
   margin-left: 0;
 }
 
 #accountlist {
   margin: 0;
   -moz-appearance: none;
-%ifndef XP_MACOSX
-  border-bottom: 1px solid ThreeDLightShadow;
-%endif
+  border-block: 1px solid var(--splitter-color);
+  border-inline-style: none;
+  text-shadow: none;
 }
 
 #bottombuttons {
-%ifdef XP_MACOSX
-  -moz-box-pack: end;
-  padding-inline-start: 2px;
-  padding-inline-end: 11px;
-  -moz-appearance: statusbar;
-  min-height: 28px;
-%else
-  margin: 0;
-%endif
+  padding: 4px;
 }
 
-%ifndef XP_WIN
-%ifndef XP_MACOSX
-#newaccount,
-#close {
-  margin-top: 3px;
-}
-%endif
-%endif
-
 /* List Items */
 richlistitem[state="disconnected"] .accountIcon {
   opacity: 0.3;
 }
 richlistitem[state="connecting"] .accountIcon,
 richlistitem[state="disconnected"][selected="true"] .accountIcon {
   opacity: 0.7;
 }
 richlistitem[state="disconnected"]:not([selected="true"]) {
-  color: GrayText;
+  color: #999;
 }
 
 richlistitem[error="true"] .accountName {
   color: rgb(150, 0, 0);
 }
 
-%ifndef XP_MACOSX
 /* When the error message was too long, the buttons were too small */
 richlistitem .account-buttons button {
-  min-height: 2em;
+  min-height: 1.8em;
+  color: var(--lwt-text-color) !important;
 }
-%endif
 
 richlistitem .account-buttons {
   margin-top: 2px;
 %ifdef XP_MACOSX
   margin-left: 35px;
 %else
   margin-left: 32px;
 %endif
 }
 
 richlistitem[dragover="down"] {
   border-bottom: 3px solid HighLight;
 }
+
 richlistitem[dragover="up"] {
   border-top: 3px solid HighLight;
 }
 
+:root:not([lwt-tree]) #bottombuttons button,
+:root:not([lwt-tree]) richlistbox > richlistitem button {
+  border: 1px solid var(--toolbarbutton-hover-bordercolor);
+}
+
+:root:not([lwt-tree]) #bottombuttons button:hover,
+:root:not([lwt-tree]) richlistbox > richlistitem button:hover {
+  border: 1px solid var(--toolbarbutton-active-bordercolor);
+}
+
+:root:not([lwt-tree]) #bottombuttons button:hover:active,
+:root:not([lwt-tree]) richlistbox > richlistitem button:hover:active {
+  box-shadow: var(--toolbarbutton-active-boxshadow);
+}
+
 .error {
-  color: rgb(200, 0, 0);
+  color: #c80000;
   margin-left: 6px;
 }
 .accountName {
   font-weight: bold;
 }
 
 .accountIcon {
   width: 32px;
@@ -155,65 +151,72 @@ richlistitem[error="true"] .accountState
   list-style-image: url("chrome://global/skin/icons/warning.svg");
 }
 
 #statusArea {
   margin: 0 0;
   padding: 0 0;
 }
 
-#displayName, #displayNameInput {
+#displayName,
+#displayNameInput {
   font-size: 16px;
-  border-bottom: 1px solid rgba(0,0,0,0.25);
+  border-bottom: 1px solid hsla(0, 0%, 50%, 0.5);
   margin: 0 0 16px;
 }
 
 #displayName[usingDefault]:not([editing]) {
-  color: GrayText;
+  color: #999;
 }
 
 #userIcon {
-  border: 2px solid rgba(0,0,0,0.15);
+  border: 2px solid hsla(0, 0%, 50%, 0.3);
   border-radius: 5px;
   max-width: 48px;
   max-height: 48px;
   width: 48px;
   height: 48px;
 }
 
 #userIcon[src=""] {
   background-image: url("chrome://messenger/skin/icons/userIcon.svg");
   background-size: contain;
   background-repeat: no-repeat;
   -moz-context-properties: fill, fill-opacity;
-  fill: #000;
+  fill: currentColor;
   fill-opacity: 0.25;
 }
 
 #userIcon:hover {
-  border-color: rgba(0,0,0,0.35);
-  background-color: rgba(0,0,0,0.35);
+  border-color: hsla(0, 0%, 50%, 0.5);
+  background-color: hsla(0, 0%, 50%, 0.3);
   opacity: .4;
 }
 
-#statusImageStack #statusTypeIcon {
-  margin: 32px 0 0 32px;
+#statusImageStack > #statusTypeIcon {
+  margin-block: 32px 0;
+  margin-inline: 32px 0;
+  padding-inline: 0;
   width: 16px;
   height: 16px;
   min-height: 16px;
   min-width: 16px;
   -moz-appearance: none;
   background: transparent;
   box-shadow: none;
   border: none;
 }
 
+#statusImageStack > #statusTypeIcon > .button-box {
+  padding-block: 0;
+}
+
 #statusImageStack,
 #displayNameAndstatusMessageStack {
-  margin: 3px 2px;
+  margin: 6px;
 }
 
 #statusTypeIcon dropmarker {
   display: none;
 }
 
 %ifdef XP_WIN
 #statusTypeIcon .button-box {
--- a/mail/components/im/themes/imRichlistbox.css
+++ b/mail/components/im/themes/imRichlistbox.css
@@ -6,29 +6,10 @@
 
 /* List Items */
 richlistitem {
   padding-top: 6px;
   padding-bottom: 6px;
   padding-inline-start: 4px;
   padding-inline-end: 4px;
   min-height: 25px;
-%ifndef XP_MACOSX
-%ifdef XP_WIN
-  border-bottom: 1px solid ThreeDLightShadow;
-%else
-  border-bottom: 1px dotted #C0C0C0;
-%endif
-%endif
+  border-bottom: 1px solid var(--splitter-color);
 }
-
-%ifdef XP_UNIX
-%ifdef XP_MACOSX
-richlistitem:not([selected="true"]):nth-child(odd) {
-  background-color: -moz-oddtreerow;
-}
-%else
-richlistitem[selected="true"]:-moz-window-inactive {
-  background-color: -moz-Dialog;
-  color: -moz-DialogText;
-}
-%endif
-%endif
--- a/mail/themes/linux/jar.mn
+++ b/mail/themes/linux/jar.mn
@@ -10,17 +10,17 @@ classic.jar:
   skin/classic/messenger/accountCreation.css                  (mail/accountCreation.css)
   skin/classic/messenger/accountManage.css                    (mail/accountManage.css)
   skin/classic/messenger/accountWizard.css                    (mail/accountWizard.css)
   skin/classic/messenger/creationDialog.css                   (mail/creationDialog.css)
 * skin/classic/messenger/chat.css                             (mail/chat.css)
 * skin/classic/messenger/imAccounts.css                       (../../components/im/themes/imAccounts.css)
 * skin/classic/messenger/imAccountWizard.css                  (../../components/im/themes/imAccountWizard.css)
   skin/classic/messenger/imMenulist.css                       (../../components/im/themes/imMenulist.css)
-* skin/classic/messenger/imRichlistbox.css                    (../../components/im/themes/imRichlistbox.css)
+  skin/classic/messenger/imRichlistbox.css                    (../../components/im/themes/imRichlistbox.css)
   skin/classic/messenger/founder.png                          (../../components/im/themes/founder.png)
   skin/classic/messenger/operator.png                         (../../components/im/themes/operator.png)
   skin/classic/messenger/half-operator.png                    (../../components/im/themes/half-operator.png)
   skin/classic/messenger/voice.png                            (../../components/im/themes/voice.png)
   skin/classic/messenger/browserRequest.css                   (mail/browserRequest.css)
   skin/classic/messenger/compacttheme.css                     (mail/compacttheme.css)
   skin/classic/messenger/customizeToolbar.css                 (mail/customizeToolbar.css)
   skin/classic/messenger/section_collapsed.png                (mail/section_collapsed.png)
--- a/mail/themes/osx/jar.mn
+++ b/mail/themes/osx/jar.mn
@@ -14,17 +14,17 @@ classic.jar:
   skin/classic/messenger/accountCreation.css                     (mail/accountCreation.css)
   skin/classic/messenger/accountManage.css                       (mail/accountManage.css)
   skin/classic/messenger/accountWizard.css                       (mail/accountWizard.css)
   skin/classic/messenger/creationDialog.css                      (mail/creationDialog.css)
 * skin/classic/messenger/chat.css                                (mail/chat.css)
 * skin/classic/messenger/imAccounts.css                          (../../components/im/themes/imAccounts.css)
 * skin/classic/messenger/imAccountWizard.css                     (../../components/im/themes/imAccountWizard.css)
   skin/classic/messenger/imMenulist.css                          (../../components/im/themes/imMenulist.css)
-* skin/classic/messenger/imRichlistbox.css                       (../../components/im/themes/imRichlistbox.css)
+  skin/classic/messenger/imRichlistbox.css                       (../../components/im/themes/imRichlistbox.css)
   skin/classic/messenger/founder.png                             (../../components/im/themes/founder.png)
   skin/classic/messenger/operator.png                            (../../components/im/themes/operator.png)
   skin/classic/messenger/half-operator.png                       (../../components/im/themes/half-operator.png)
   skin/classic/messenger/voice.png                               (../../components/im/themes/voice.png)
   skin/classic/messenger/browserRequest.css                      (mail/browserRequest.css)
   skin/classic/messenger/compacttheme.css                        (mail/compacttheme.css)
   skin/classic/messenger/customizeToolbar.css                    (mail/customizeToolbar.css)
   skin/classic/messenger/section_collapsed.png                   (mail/section_collapsed.png)
--- a/mail/themes/windows/jar.mn
+++ b/mail/themes/windows/jar.mn
@@ -10,17 +10,17 @@ classic.jar:
   skin/classic/messenger/accountCreation.css                  (mail/accountCreation.css)
   skin/classic/messenger/accountManage.css                    (mail/accountManage.css)
   skin/classic/messenger/accountWizard.css                    (mail/accountWizard.css)
   skin/classic/messenger/creationDialog.css                   (mail/creationDialog.css)
 * skin/classic/messenger/chat.css                             (mail/chat.css)
 * skin/classic/messenger/imAccounts.css                       (../../components/im/themes/imAccounts.css)
 * skin/classic/messenger/imAccountWizard.css                  (../../components/im/themes/imAccountWizard.css)
   skin/classic/messenger/imMenulist.css                       (../../components/im/themes/imMenulist.css)
-* skin/classic/messenger/imRichlistbox.css                    (../../components/im/themes/imRichlistbox.css)
+  skin/classic/messenger/imRichlistbox.css                    (../../components/im/themes/imRichlistbox.css)
   skin/classic/messenger/founder.png                          (../../components/im/themes/founder.png)
   skin/classic/messenger/operator.png                         (../../components/im/themes/operator.png)
   skin/classic/messenger/half-operator.png                    (../../components/im/themes/half-operator.png)
   skin/classic/messenger/voice.png                            (../../components/im/themes/voice.png)
   skin/classic/messenger/browserRequest.css                   (mail/browserRequest.css)
   skin/classic/messenger/compacttheme.css                     (mail/compacttheme.css)
   skin/classic/messenger/customizeToolbar.css                 (mail/customizeToolbar.css)
   skin/classic/messenger/section_collapsed.png                (mail/section_collapsed.png)