Bug 1629156 - Make the attachmentView in the message pane themeable. r=aleca DONTBUILD
authorRichard Marti <richard.marti@gmail.com>
Sat, 11 Apr 2020 13:57:58 +0300
changeset 38781 26b9bb2ef88318aa6c73bf40b9c54de2bca4882e
parent 38780 1d0a8664ac220e5a477f28a4932928669aebced0
child 38782 237406c100036fb40bc4d136739ef7c49ac93d24
push id401
push userclokep@gmail.com
push dateMon, 01 Jun 2020 20:41:59 +0000
reviewersaleca
bugs1629156
Bug 1629156 - Make the attachmentView in the message pane themeable. r=aleca DONTBUILD
mail/base/content/attachmentList.css
mail/themes/linux/mail/messageHeader.css
mail/themes/osx/mail/messageHeader.css
mail/themes/shared/mail/compacttheme.css
mail/themes/shared/mail/messageHeader.css
mail/themes/windows/mail/messageHeader.css
--- a/mail/base/content/attachmentList.css
+++ b/mail/base/content/attachmentList.css
@@ -2,17 +2,17 @@
  * 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/. */
 
 .attachments-container {
   display: block;
 }
 
 .attachmentList {
-  -moz-appearance: listbox;
+  -moz-appearance: none;
   -moz-user-focus: normal;
   margin: 0;
   padding: 3px;
 }
 
 .attachmentList[orient="horizontal"] {
   display: block;
   overflow-x: hidden;
--- a/mail/themes/linux/mail/messageHeader.css
+++ b/mail/themes/linux/mail/messageHeader.css
@@ -41,35 +41,20 @@
 .inline-toolbox {
   -moz-appearance: none;
   padding-inline-end: 2px;
 }
 
 /* ::::: attachment view ::::: */
 
 #attachmentList {
-  -moz-appearance: none;
-  border-top: 1px solid ThreeDShadow;
   background-color: -moz-Field;
   color: -moz-FieldText;
 }
 
-#attachmentToggle {
-  -moz-appearance: treetwisty;
-  -moz-user-focus: normal;
-}
-
-#attachmentToggle[checked="true"] {
-  -moz-appearance: treetwistyopen;
-}
-
-#attachmentToggle:focus {
-  outline: 1px dotted Highlight;
-}
-
 #attachmentIcon {
   list-style-image: url("chrome://messenger/skin/icons/attach.svg");
   margin-inline-start: 5px;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
@@ -81,20 +66,16 @@
 }
 
 #attachmentSize {
   margin: 0;
   margin-inline-start: 8px;
   color: #888a85; /* the same color as .headerName */
 }
 
-#attachmentView {
-  border-top: 1px solid ThreeDShadow;
-}
-
 #attachmentBar {
   background-color: -moz-dialog;
   color: -moz-dialogtext;
   padding: 3px 0;
 }
 
 /* ::::: msg header captions ::::: */
 
--- a/mail/themes/osx/mail/messageHeader.css
+++ b/mail/themes/osx/mail/messageHeader.css
@@ -38,29 +38,16 @@
 /* ::::: attachment view ::::: */
 
 #attachmentList {
   margin: 0;
   background-color: -moz-Field;
   color: -moz-FieldText;
 }
 
-#attachmentToggle {
-  -moz-appearance: treetwisty;
-  -moz-user-focus: normal;
-}
-
-#attachmentToggle[checked="true"] {
-  -moz-appearance: treetwistyopen;
-}
-
-#attachmentToggle:focus {
-  outline: 1px dotted Highlight;
-}
-
 #attachmentIcon {
   list-style-image: url("chrome://messenger/skin/icons/attach.svg");
   margin-inline-start: 5px;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
@@ -77,20 +64,16 @@
 }
 
 #attachmentSaveAllSingle > .toolbarbutton-menubutton-button,
 #attachmentSaveAllMultiple > .toolbarbutton-menubutton-button {
   /* Make sure that the icon is vertically centered */
   padding-bottom: 0px !important;
 }
 
-#attachmentView {
-  border-top: 1px solid ThreeDShadow;
-}
-
 #attachmentBar {
   background-color: #fff;
   color: -moz-dialogtext;
   padding: 3px 0;
 }
 
 /* ::::: attachment list ::::: */
 
--- a/mail/themes/shared/mail/compacttheme.css
+++ b/mail/themes/shared/mail/compacttheme.css
@@ -29,18 +29,17 @@
   --composer-header-border-color: rgb(127, 127, 128);
 }
 
 :root:-moz-lwtheme-darktext {
   /* composer header fields bottom border */
   --composer-header-border-color: #aaa;
 }
 
-#headers-box,
-#msgHeaderView {
+#headers-box {
   background-color: var(--toolbar-bgcolor) !important;
   background-image: none !important;
   color: var(--lwt-text-color);
 }
 
 /* Let the message headers use the theme colors */
 .headerValue {
   color: inherit;
--- a/mail/themes/shared/mail/messageHeader.css
+++ b/mail/themes/shared/mail/messageHeader.css
@@ -1,35 +1,15 @@
 /* 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 url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
-:root[lwt-default-theme-in-dark-mode] #headers-box,
-:root[lwt-default-theme-in-dark-mode] #msgHeaderView {
-  background-color: var(--toolbar-bgcolor) !important;
-  background-image: none !important;
-  color: var(--lwt-text-color);
-}
-
-:root[lwt-default-theme-in-dark-mode] .headerValue {
-  color: inherit;
-}
-
-:root[lwt-default-theme-in-dark-mode] html|input.editContactTextbox {
-  background-color: var(--lwt-toolbar-field-background-color);
-  color: var(--lwt-toolbar-field-color);
-}
-:root[lwt-default-theme-in-dark-mode]
-  html|input.editContactTextbox:not([readonly]):not(:focus) {
-  border-color: var(--panel-separator-color);
-}
-
 /* ::::: msg header buttons ::::: */
 
 .headerContainer {
   min-width: 1px;
 }
 
 #otherActionsButton > .toolbarbutton-icon {
   display: none;
@@ -60,16 +40,44 @@
 /* ::::: expanded header pane ::::: */
 
 #expandedsubjectBox {
   font-weight: bold;
 }
 
 /* ::::: attachment view ::::: */
 
+#attachmentToggle {
+  /* Override button appearance */
+  -moz-appearance: none;
+  min-width: 20px;
+  margin-block: 0;
+  margin-inline: 1px 0;
+  border: 0;
+  background-color: transparent;
+  color: inherit;
+  -moz-user-focus: normal;
+  list-style-image: url("chrome://global/skin/icons/twisty-collapsed.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+#attachmentToggle[checked="true"] {
+  list-style-image: url("chrome://global/skin/icons/twisty-expanded.svg");
+}
+
+#attachmentToggle:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://global/skin/icons/twisty-collapsed-rtl.svg");
+}
+
+#attachmentToggle:focus {
+  outline: 1px dotted Highlight;
+}
+
 #attachmentCount {
   margin: 0;
   padding: 2px 0;
   margin-inline-start: 2px;
   margin-inline-end: 1px;
 }
 
 #attachmentName {
@@ -334,8 +342,71 @@ mail-headerfield {
   -moz-user-select: text;
   word-wrap: break-word;
 }
 
 mail-headerfield:focus {
   outline: 1px dotted;
   outline-offset: -1px;
 }
+
+#attachmentView,
+#attachmentList {
+  border-top: 1px solid var(--splitter-color); /* The same color as the splitters */
+}
+
+:root[lwt-tree] #msgHeaderView,
+:root[lwt-tree] #attachmentView,
+:root[lwt-tree] #attachmentList {
+  background-color: var(--toolbar-bgcolor) !important;
+  background-image: none !important;
+  color: var(--lwt-text-color);
+}
+
+:root[lwt-tree] .headerValue {
+  color: inherit;
+}
+
+:root[lwt-tree] #attachmentBar {
+  background-color: hsla(0, 0%, 50%, .15);
+  color: inherit;
+}
+
+:root[lwt-tree] html|input.editContactTextbox {
+  background-color: var(--lwt-toolbar-field-background-color);
+  color: var(--lwt-toolbar-field-color);
+}
+:root[lwt-tree] html|input.editContactTextbox:not([readonly]):not(:focus) {
+  border-color: var(--panel-separator-color);
+}
+
+:root[lwt-tree] #attachmentList {
+  background-color: var(--sidebar-background-color);
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] #attachmentList {
+  scrollbar-color: rgba(204, 204, 204, .5) rgba(230, 230, 235, .5);
+}
+
+:root[lwt-tree-brighttext] #attachmentList {
+  scrollbar-color: rgba(249, 249, 250, .4) rgba(20, 20, 25, .3);
+}
+
+:root[lwt-tree] #attachmentList .attachmentItem {
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] #attachmentList .attachmentItem[selected="true"] {
+  background: var(--sidebar-highlight-background-color, hsla(0, 0%, 80%, .6));
+  border-color: var(--sidebar-highlight-background-color, hsla(0, 0%, 80%, .6));
+  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
+}
+
+:root[lwt-tree-brighttext] #attachmentList .attachmentItem[selected="true"] {
+  background: var(--sidebar-highlight-background-color, rgba(249, 249, 250, .1));
+  border-color: var(--sidebar-highlight-background-color, rgba(249, 249, 250, .1));
+}
+
+:root[lwt-tree] #attachmentList[seltype="multiple"] .attachmentItem[current="true"] {
+  border-color: transparent;
+  outline: 1px solid var(--sidebar-highlight-background-color, hsla(0, 0%, 50%, .6));
+}
--- a/mail/themes/windows/mail/messageHeader.css
+++ b/mail/themes/windows/mail/messageHeader.css
@@ -26,47 +26,20 @@
 
 #expandedBoxSpacer {
   display: block;
 }
 
 /* ::::: attachment view ::::: */
 
 #attachmentList {
-  -moz-appearance: none;
   background-color: -moz-Field;
   color: -moz-FieldText;
 }
 
-#attachmentToggle {
-  /* Override button appearance */
-  -moz-appearance: none;
-  min-width: 0;
-  margin: 0;
-  border: 0;
-  background-color: transparent;
-  -moz-user-focus: normal;
-  list-style-image: url("chrome://global/skin/icons/twisty-collapsed.svg");
-  -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
-  fill-opacity: 1;
-}
-
-#attachmentToggle[checked="true"] {
-  list-style-image: url("chrome://global/skin/icons/twisty-expanded.svg");
-}
-
-#attachmentToggle:hover {
-  fill: #4ed0f9;
-}
-
-#attachmentToggle:-moz-locale-dir(rtl) {
-  list-style-image: url("chrome://global/skin/icons/twisty-collapsed-rtl.svg");
-}
-
 #attachmentName:hover,
 #attachmentName[selected="true"] {
   cursor: pointer;
   color: HighlightText;
   background-color: Highlight;
 }
 
 #attachmentSize {
@@ -192,21 +165,16 @@ mail-headerfield.headerValue:focus {
 
 .emailPopup {
   font-size: inherit;
   max-height: 7px; /* the height of the image */
   margin: 0.2em 2px 0; /* 0.2em just to move it off the top of the text */
   list-style-image: url("chrome://messenger/skin/icons/arrow-dn-grey.png");
 }
 
-#attachmentView,
-#attachmentList {
-  border-top: 1px solid #a9b7c9; /* The same color as the splitters */
-}
-
 @media (-moz-windows-default-theme: 0) {
   #displayDeck[collapsed="true"] + splitter + #messagepaneboxwrapper
   .main-header-area {
     background-image: linear-gradient(rgba(255, 255, 255, .5),
                                       rgba(255, 255, 255, .5) 100%);
   }
 }
 
@@ -395,8 +363,14 @@ mail-headerfield.headerValue:focus {
                 0 0 2px hsla(210, 54%, 20%, .1);
   }
 
   .msgHeaderView-button:not([type="menu-button"]):not([disabled="true"]):not([checked="true"]):not([open="true"]):not(:active):hover {
     box-shadow: 0 0 1px hsla(210, 54%, 20%, .1),
                 0 0 2px hsla(210, 54%, 20%, .1);
   }
 }
+
+:root[lwt-tree] #attachmentList .attachmentItem:hover {
+  background-color: hsla(0, 0%, 50%, .15);
+  border-color: hsla(0, 0%, 50%, .15);
+  color: inherit;
+}