Bug 1457712 - Apply the Dark/Light themes to the composer header too. r=jorgk a=jorgk
authorRichard Marti <richard.marti@gmail.com>
Fri, 27 Apr 2018 16:14:31 +0200
changeset 31438 6608de4c84bea0a698a408cd1f98ecdb4166b46c
parent 31437 ccf242f1eb9a7f2886001a662d939a25aac1e39c
child 31439 aa4d68e63413f951bd0b3f70752edee2c3aed612
push id383
push userclokep@gmail.com
push dateMon, 07 May 2018 21:52:48 +0000
reviewersjorgk, jorgk
bugs1457712
Bug 1457712 - Apply the Dark/Light themes to the composer header too. r=jorgk a=jorgk
mail/themes/linux/mail/compacttheme.css
mail/themes/linux/mail/compose/messengercompose.css
mail/themes/osx/mail/compacttheme.css
mail/themes/shared/jar.inc.mn
mail/themes/shared/mail/compacttheme.css
mail/themes/shared/mail/icons/format-dropmarker.svg
mail/themes/windows/mail/compose/messengercompose.css
--- a/mail/themes/linux/mail/compacttheme.css
+++ b/mail/themes/linux/mail/compacttheme.css
@@ -12,9 +12,21 @@
 #mail-menubar {
   color: var(--chrome-color);
 }
 
 #mail-menubar > menu:not([open]) {
   color: inherit;
 }
 
+#MsgHeadersToolbar {
+  background-image: none;
+}
 
+#headers-box {
+  -moz-appearance: none;
+}
+
+#FormatToolbar {
+  color: inherit;
+  background-image: none;
+}
+
--- a/mail/themes/linux/mail/compose/messengercompose.css
+++ b/mail/themes/linux/mail/compose/messengercompose.css
@@ -401,17 +401,26 @@ toolbarbutton.formatting-button:not([dis
 }
 
 toolbarbutton.formatting-button:not([disabled="true"]):-moz-any([open="true"],[checked="true"],:hover:active) {
   background: var(--toolbarbutton-active-background);
   border-color: var(--toolbarbutton-active-bordercolor);
   box-shadow: var(--toolbarbutton-active-boxshadow);
 }
 
-toolbarbutton.formatting-button[disabled="true"] > .toolbarbutton-icon {
+.formatting-button > .toolbarbutton-menu-dropmarker {
+  -moz-appearance: none !important;
+  list-style-image: url("chrome://messenger/skin/messengercompose/format-dropmarker.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin-inline-start: 3px;
+}
+
+toolbarbutton.formatting-button[disabled="true"] > .toolbarbutton-icon,
+.formatting-button[disabled="true"] > .toolbarbutton-menu-dropmarker {
   opacity: 0.4;
 }
 
 #AbsoluteFontSizeButton {
   list-style-image: url("chrome://messenger/skin/icons/size.svg");
 }
 
 #DecreaseFontSizeButton {
--- a/mail/themes/osx/mail/compacttheme.css
+++ b/mail/themes/osx/mail/compacttheme.css
@@ -16,8 +16,22 @@
   color: hsl(240, 9%, 98%);
   text-shadow: none;
 }
 
 #tabs-toolbar:-moz-lwtheme-darktext {
   -moz-appearance: -moz-mac-vibrant-titlebar-light;
   -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-light;
 }
+
+#headers-box {
+  -moz-appearance: none;
+}
+
+#FormatToolbar {
+  background-image: none;
+  background-color: transparent !important;
+}
+
+#compose-toolbar-sizer {
+  background-image: none;
+  background-color: var(--chrome-background-color);
+}
--- a/mail/themes/shared/jar.inc.mn
+++ b/mail/themes/shared/jar.inc.mn
@@ -93,16 +93,17 @@
   skin/classic/messenger/shared/messageHeader.css             (../shared/mail/messageHeader.css)
   skin/classic/messenger/shared/messenger.css                 (../shared/mail/messenger.css)
   skin/classic/messenger/shared/messengercompose.css          (../shared/mail/messengercompose.css)
   skin/classic/messenger/shared/tabmail.css                   (../shared/mail/tabmail.css)
 #ifndef XP_MACOSX
   skin/classic/messenger/icons/anchor.svg                     (../shared/mail/icons/anchor.svg)
   skin/classic/messenger/icons/bold.svg                       (../shared/mail/icons/bold.svg)
   skin/classic/messenger/icons/bullet-list.svg                (../shared/mail/icons/bullet-list.svg)
+  skin/classic/messenger/messengercompose/format-dropmarker.svg (../shared/mail/icons/format-dropmarker.svg)
   skin/classic/messenger/icons/center-align.svg               (../shared/mail/icons/center-align.svg)
   skin/classic/messenger/icons/decrease.svg                   (../shared/mail/icons/decrease.svg)
   skin/classic/messenger/icons/hline.svg                      (../shared/mail/icons/hline.svg)
   skin/classic/messenger/icons/image.svg                      (../shared/mail/icons/image.svg)
   skin/classic/messenger/icons/increase.svg                   (../shared/mail/icons/increase.svg)
   skin/classic/messenger/icons/indent.svg                     (../shared/mail/icons/indent.svg)
   skin/classic/messenger/icons/italics.svg                    (../shared/mail/icons/italics.svg)
   skin/classic/messenger/icons/justify.svg                    (../shared/mail/icons/justify.svg)
--- a/mail/themes/shared/mail/compacttheme.css
+++ b/mail/themes/shared/mail/compacttheme.css
@@ -32,28 +32,34 @@
   /* Toolbar buttons */
   --lwt-toolbarbutton-hover-background: rgba(179, 179, 179, 0.4);
   --lwt-toolbarbutton-active-background: rgba(179, 179, 179, 0.6);
 
   /* Search bars */
   --url-and-searchbar-background-color: rgb(71, 71, 73);
   --url-and-searchbar-color: var(--chrome-color);
   --urlbar-separator-color: #5F6670;
+
+  /* composer header fields bottom border */
+  --composer-header-border-color: rgb(127, 127, 128);
 }
 
 :root:-moz-lwtheme-darktext {
   --url-and-searchbar-background-color: #fff;
 
   --chrome-background-color: #e3e4e6;
   --chrome-color: #18191a;
   --chrome-secondary-background-color: #f5f6f7;
-  --toolbox-border-bottom-color: #cccccc;
+  --toolbox-border-bottom-color: #ccc;
   --chrome-nav-bar-controls-border-color: #ccc;
   --chrome-selection-color: #f5f7fa;
   --chrome-selection-background-color: #4c9ed9;
+
+  /* composer header fields bottom border */
+  --composer-header-border-color: #aaa;
 }
 
 toolbar[brighttext] .toolbarbutton-1 {
   fill: rgb(249, 249, 250);
 }
 
 #searchInput ::-moz-selection,
 #IMSearchInput ::-moz-selection,
@@ -61,28 +67,26 @@ toolbar[brighttext] .toolbarbutton-1 {
 .remote-gloda-search ::-moz-selection,
 findbar ::-moz-selection {
   background-color: var(--chrome-selection-background-color);
   color: var(--chrome-selection-color);
 }
 
 /* Change the base colors for the mail chrome */
 
-#navigation-toolbox,
-.mail-toolbox,
-.contentTabToolbox {
+#headers-box,
+#navigation-toolbox {
   background-color: var(--chrome-background-color);
   color: var(--chrome-color);
 }
 
+findbar,
 .mail-toolbox,
 .contentTabToolbox,
-findbar,
-#msgHeaderView,
-#browser-bottombox {
+#msgHeaderView {
   background-color: var(--chrome-secondary-background-color) !important;
   background-image: none !important;
   color: var(--chrome-color);
 }
 
 /* Let the message headers use the theme colors */
 .headerValue {
   color: inherit !important;
@@ -104,8 +108,74 @@ textbox.editContactTextbox {
 
 /* 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;
+}
+
+#MsgHeadersToolbar,
+#addressingWidget,
+.aw-menulist {
+  color: inherit;
+}
+
+#msgIdentity,
+#msgSubject,
+.textbox-addressingWidget,
+.dummy-row-cell:not(:first-child) {
+  border-bottom-color: var(--composer-header-border-color) !important;
+  color: var(--chrome-color);
+}
+
+#msgIdentity:hover,
+#msgIdentity:focus,
+#msgSubject:hover,
+#msgSubject[focused="true"],
+.textbox-addressingWidget:hover,
+.textbox-addressingWidget[focused="true"] {
+  background-color: var(--lwt-toolbar-field-background-color);
+  color: var(--lwt-toolbar-field-color);
+  border-color: var(--lwt-toolbar-field-border-color) !important;
+}
+
+#msgIdentity ::-moz-selection,
+#msgSubject ::-moz-selection,
+.textbox-addressingWidget ::-moz-selection {
+  background-color: var(--chrome-selection-background-color);
+  color: var(--chrome-selection-color);
+}
+
+.textbox-addressingWidget > .autocomplete-result-popupset {
+  -moz-appearance: none;
+  margin-top: -1px;
+  background: var(--autocomplete-popup-background);
+  color: var(--autocomplete-popup-color);
+}
+
+.textbox-addressingWidget panel[type="autocomplete-richlistbox"] {
+  padding: 2px 0;
+  color: inherit;
+  background-color: inherit;
+  border-color: var(--autocomplete-popup-border-color);
+}
+
+.textbox-addressingWidget .autocomplete-richlistbox {
+  color: inherit;
+  background-color: inherit;
+}
+
+.textbox-addressingWidget .autocomplete-richlistitem[selected] {
+  background: #0a84ff;
+  color: #fff;
+}
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/format-dropmarker.svg
@@ -0,0 +1,6 @@
+<!-- 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="8" height="6" viewBox="0 0 8 6">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M4 5.8c-.26 0-.5-.12-.7-.3l-3-3C-.38 1.6.8.12 1.7.72L4 3 6.3.72c.9-.68 2.1.88 1.4 1.78l-3 3a1 1 0 0 1-.7.3z"/>
+</svg>
--- a/mail/themes/windows/mail/compose/messengercompose.css
+++ b/mail/themes/windows/mail/compose/messengercompose.css
@@ -274,17 +274,24 @@ toolbarbutton.formatting-button:not([dis
 }
 
 toolbarbutton.formatting-button:not([disabled="true"]):-moz-any([open="true"],[checked="true"],:hover:active) {
   background: var(--toolbarbutton-active-background);
   border-color: var(--toolbarbutton-active-bordercolor);
   box-shadow: var(--toolbarbutton-active-boxshadow);
 }
 
-toolbarbutton.formatting-button[disabled="true"] > .toolbarbutton-icon {
+.formatting-button > .toolbarbutton-menu-dropmarker {
+  list-style-image: url("chrome://messenger/skin/messengercompose/format-dropmarker.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+toolbarbutton.formatting-button[disabled="true"] > .toolbarbutton-icon,
+.formatting-button[disabled="true"] > .toolbarbutton-menu-dropmarker {
   opacity: 0.4;
 }
 
 #AbsoluteFontSizeButton {
   list-style-image: url("chrome://messenger/skin/icons/size.svg");
 }
 
 #DecreaseFontSizeButton {