Bug 1571634 - Some tweaks for dark and default themes (incl. fix for chat splitter). r=aleca a=jorgk
authorRichard Marti <richard.marti@gmail.com>
Mon, 12 Aug 2019 16:19:18 +0200
changeset 35293 6e72d79d8bcc64e9db8a6e97286370c0b6614d81
parent 35292 c850972a72351538ece8d91ed11c2f810769df3f
child 35294 436d8b620b6a649522a44293bd1023fd20014508
push id2477
push usermozilla@jorgk.com
push dateTue, 13 Aug 2019 21:14:23 +0000
treeherdercomm-beta@436d8b620b6a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersaleca, jorgk
bugs1571634
Bug 1571634 - Some tweaks for dark and default themes (incl. fix for chat splitter). r=aleca a=jorgk
mail/components/im/themes/chat.css
mail/themes/linux/mail/compose/messengercompose.css
mail/themes/linux/mail/quickFilterBar.css
mail/themes/osx/mail/compose/messengercompose.css
mail/themes/osx/mail/quickFilterBar.css
mail/themes/shared/mail/messageHeader.css
mail/themes/shared/mail/messenger.css
mail/themes/shared/mail/messengercompose.css
mail/themes/windows/mail/quickFilterBar.css
--- a/mail/components/im/themes/chat.css
+++ b/mail/components/im/themes/chat.css
@@ -476,17 +476,16 @@ richlistitem[state="disconnected"] .acco
 
 .status-overlay-icon[status="unknown"] {
   list-style-image: url('chrome://chat/skin/unknown.png');
 }
 
 /* corresponds to im/themes/conversation.css @media all and (min-height: 251px) */
 .displayUserAccount {
   padding: 4px;
-  background-color: -moz-OddTreeRow;
 }
 
 .statusImageStack,
 .displayNameAndstatusMessageStack {
   margin: 2px 2px;
 }
 
 .displayName {
--- a/mail/themes/linux/mail/compose/messengercompose.css
+++ b/mail/themes/linux/mail/compose/messengercompose.css
@@ -676,8 +676,23 @@ toolbarbutton.formatting-button[disabled
 }
 
 menu[command="cmd_attachCloud"] .menu-iconic-left,
 menu[command="cmd_convertCloud"] .menu-iconic-left {
   /* Ensure that the provider icons are visible even if the Gnome theme says
      menus shouldn't have icons. */
   visibility: visible;
 }
+
+/* Styles for the default system dark theme */
+
+:root[lwt-default-theme-in-dark-mode] #MsgHeadersToolbar {
+  background-image: none;
+}
+
+:root[lwt-default-theme-in-dark-mode] #headers-box {
+  -moz-appearance: none;
+}
+
+:root[lwt-default-theme-in-dark-mode] #FormatToolbar {
+  color: inherit;
+  background-image: none;
+}
--- a/mail/themes/linux/mail/quickFilterBar.css
+++ b/mail/themes/linux/mail/quickFilterBar.css
@@ -23,16 +23,22 @@
   margin-top: -1px;
   padding-bottom: 2px;
 }
 
 #quick-filter-bar-filter-text-bar {
   padding-inline-end: 4px;
 }
 
+/* Style for the default system dark theme */
+
+:root[lwt-default-theme-in-dark-mode] #quick-filter-bar-expando {
+  border-bottom-color: var(--chrome-content-separator-color);
+}
+
 /* :::: Filter Buttons :::: */
 
 #quick-filter-bar toolbarbutton {
   margin-right: 1px;
   margin-left: 1px;
 }
 
 #quick-filter-bar-tab-bar > .qfb-tag-button {
--- a/mail/themes/osx/mail/compose/messengercompose.css
+++ b/mail/themes/osx/mail/compose/messengercompose.css
@@ -1044,8 +1044,51 @@ toolbarbutton.toolbarbutton-1 > .toolbar
 #titlebar {
   display: none;
 }
 
 #titlebar-buttonbox-container {
   margin-top: 3px;
   margin-inline-start: 7px;
 }
+
+/* Styles for the default system dark theme */
+
+:root[lwt-default-theme-in-dark-mode] #headers-box {
+  -moz-appearance: none;
+}
+
+:root[lwt-default-theme-in-dark-mode] #FormatToolbar {
+  background-image: none;
+  background-color: transparent !important;
+}
+
+:root[lwt-default-theme-in-dark-mode] #compose-toolbar-sizer {
+  background-image: none;
+  background-color: var(--lwt-accent-color);
+}
+
+:root[lwt-default-theme-in-dark-mode]
+  #FormatToolbar:not(:-moz-window-inactive):-moz-lwtheme-brighttext >
+  toolbarbutton.formatting-button[checked="true"]:after {
+  content: "";
+  display: -moz-box;
+  width: 29px;
+  height: 20px;
+  margin-top: -1px;
+  margin-inline-start: -24px;
+  margin-inline-end: -5px;
+  background-color: #888;
+}
+
+:root[lwt-default-theme-in-dark-mode] #underlineButton:-moz-locale-dir(rtl):after,
+:root[lwt-default-theme-in-dark-mode] #boldButton:-moz-locale-dir(ltr):after,
+:root[lwt-default-theme-in-dark-mode] #ulButton:-moz-locale-dir(ltr):after {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+:root[lwt-default-theme-in-dark-mode] #underlineButton:-moz-locale-dir(ltr):after,
+:root[lwt-default-theme-in-dark-mode] #boldButton:-moz-locale-dir(rtl):after,
+:root[lwt-default-theme-in-dark-mode] #ulButton:-moz-locale-dir(rtl):after {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
--- a/mail/themes/osx/mail/quickFilterBar.css
+++ b/mail/themes/osx/mail/quickFilterBar.css
@@ -35,16 +35,27 @@
   }
 }
 
 #qfb-filter-label {
   color: #888;
   font-weight: bold;
 }
 
+/* Styles for the default system dark theme */
+
+:root[lwt-default-theme-in-dark-mode] #quick-filter-bar-main-bar:-moz-lwtheme {
+  background: transparent;
+}
+
+:root[lwt-default-theme-in-dark-mode] #quick-filter-bar-expando:-moz-lwtheme {
+  border-bottom-color: var(--chrome-content-separator-color);
+  background: transparent;
+}
+
 /* :::: Filter Buttons :::: */
 
 #quick-filter-bar toolbarbutton {
   height: 16px;
   padding: 0 4px;
   margin: 0 3px;
 }
 
--- a/mail/themes/shared/mail/messageHeader.css
+++ b/mail/themes/shared/mail/messageHeader.css
@@ -1,14 +1,34 @@
 /* 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");
 
+: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] .editContactTextbox {
+  background-color: var(--lwt-toolbar-field-background-color);
+  color: var(--lwt-toolbar-field-color);
+}
+:root[lwt-default-theme-in-dark-mode]
+  .editContactTextbox:not([readonly="true"]):not([focused="true"]) {
+  border-color: var(--panel-separator-color);
+}
+
 /* ::::: msg header buttons ::::: */
 
 .headerContainer {
   min-width: 1px;
 }
 
 #otherActionsButton > .toolbarbutton-icon {
   display: none;
--- a/mail/themes/shared/mail/messenger.css
+++ b/mail/themes/shared/mail/messenger.css
@@ -24,16 +24,82 @@
   --urlbar-popup-url-color: #0a84ff;
   --urlbar-popup-action-color: #30e60b;
 }
 
 :root[extradragspace][tabsintitlebar]:not([inFullscreen]) {
   --space-above-tabbar: 8px;
 }
 
+/* Styles for the default system dark theme */
+:root[lwt-default-theme-in-dark-mode] {
+  --sidebar-border-color: #606064 !important;
+  /* Toolbar buttons */
+  --lwt-toolbarbutton-hover-background: rgba(179, 179, 179, 0.4);
+  --lwt-toolbarbutton-active-background: rgba(179, 179, 179, 0.6);
+
+  /* !important to override LightweightThemeManager.addBuiltInTheme in
+     mailGlue.js */
+  --autocomplete-popup-background: #2a2a2e !important;
+  --autocomplete-popup-highlight-background: #0060df;
+
+  /* composer header fields bottom border */
+  --composer-header-border-color: rgb(127, 127, 128);
+}
+
+/* Make the new mail indicator better visible on dark theme */
+:root[lwt-default-theme-in-dark-mode] #folderTree:-moz-lwtheme-brighttext
+  treechildren::-moz-tree-cell-text(folderNameCol, isServer-true, biffState-NewMail),
+:root[lwt-default-theme-in-dark-mode] #folderTree:-moz-lwtheme-brighttext
+  treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true),
+:root[lwt-default-theme-in-dark-mode] #folderTree:-moz-lwtheme-brighttext
+  treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Inbox, newMessages-true) {
+  color: #0aa5ff !important;
+}
+
+/* Quick-Filter-Bar */
+:root[lwt-default-theme-in-dark-mode] #quick-filter-bar:-moz-lwtheme {
+  background-color: var(--lwt-accent-color);
+  color: var(--lwt-text-color);
+}
+
+:root[lwt-default-theme-in-dark-mode] #quick-filter-bar:-moz-lwtheme-brighttext {
+  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background);
+  --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background);
+
+  --toolbarbutton-checkedhover-backgroundcolor: 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;
+}
+
+:root[lwt-default-theme-in-dark-mode] #qfb-qs-textbox:-moz-lwtheme {
+  background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8));
+  color: var(--lwt-toolbar-field-color, black);
+}
+
+:root[lwt-default-theme-in-dark-mode] #qfb-qs-textbox:not([focused="true"]):-moz-lwtheme {
+  border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25));
+}
+
+:root[lwt-default-theme-in-dark-mode] #qfb-qs-textbox:-moz-lwtheme:hover {
+  background-color: var(--lwt-toolbar-field-background-color, white);
+}
+
+:root[lwt-default-theme-in-dark-mode] #qfb-qs-textbox:-moz-lwtheme-brighttext:hover {
+  box-shadow: 0 1px 3px rgba(255,255,255,.15);
+}
+
+:root[lwt-default-theme-in-dark-mode] #qfb-qs-textbox:-moz-lwtheme[focused="true"] {
+  background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, white));
+  color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, black));
+  border-color: var(--toolbar-field-focus-border-color);
+}
+
 toolbox[labelalign="end"] > toolbar[mode="full"] .toolbarbutton-1 .toolbarbutton-text {
   padding-inline-start: 2px;
 }
 
 toolbox[labelalign="end"] > toolbar[mode="full"] deck .toolbarbutton-text {
   text-align: start;
 }
 
--- a/mail/themes/shared/mail/messengercompose.css
+++ b/mail/themes/shared/mail/messengercompose.css
@@ -9,16 +9,90 @@
   --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);
 }
 
+/* Styles for the default system dark theme */
+
+: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] #headers-box {
+  --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;
+
+  scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
+}
+
+:root[lwt-default-theme-in-dark-mode] #MsgHeadersToolbar,
+:root[lwt-default-theme-in-dark-mode] #addressingWidget,
+:root[lwt-default-theme-in-dark-mode] .aw-menulist {
+  color: inherit;
+}
+
+:root[lwt-default-theme-in-dark-mode] #msgIdentity,
+:root[lwt-default-theme-in-dark-mode] #msgSubject,
+:root[lwt-default-theme-in-dark-mode] textbox.textbox-addressingWidget,
+:root[lwt-default-theme-in-dark-mode] .dummy-row-cell:last-child {
+  border-bottom-color: var(--composer-header-border-color) !important;
+  color: var(--lwt-text-color);
+}
+
+:root[lwt-default-theme-in-dark-mode] #msgIdentity:hover,
+:root[lwt-default-theme-in-dark-mode] #msgIdentity:focus,
+:root[lwt-default-theme-in-dark-mode] #msgIdentity:focus-within,
+:root[lwt-default-theme-in-dark-mode] #msgSubject:hover,
+:root[lwt-default-theme-in-dark-mode] #msgSubject[focused="true"],
+:root[lwt-default-theme-in-dark-mode] textbox.textbox-addressingWidget:hover,
+:root[lwt-default-theme-in-dark-mode] textbox.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;
+}
+
+:root[lwt-default-theme-in-dark-mode] .textbox-addressingWidget >
+  .autocomplete-result-popupset {
+  -moz-appearance: none;
+  margin-top: -1px;
+  background: var(--autocomplete-popup-background);
+  color: var(--autocomplete-popup-color);
+}
+
+:root[lwt-default-theme-in-dark-mode] .textbox-addressingWidget
+  panel[type="autocomplete-richlistbox"] {
+  padding: 2px 0;
+  color: inherit;
+  background-color: inherit;
+  border-color: var(--autocomplete-popup-border-color);
+}
+
+:root[lwt-default-theme-in-dark-mode] .textbox-addressingWidget
+  .autocomplete-richlistbox {
+  color: inherit;
+  background-color: inherit;
+}
+
+:root[lwt-default-theme-in-dark-mode] .textbox-addressingWidget
+  .autocomplete-richlistitem[selected] {
+  background: #0a84ff;
+  color: #fff;
+}
+
 /* Rules to help integrate WebExtension buttons */
 
 .webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon {
   height: 16px;
   width: 16px;
 }
 
 @media not all and (min-resolution: 1.1dppx) {
--- a/mail/themes/windows/mail/quickFilterBar.css
+++ b/mail/themes/windows/mail/quickFilterBar.css
@@ -48,16 +48,22 @@
 
 @media (-moz-windows-default-theme: 0) {
   #quick-filter-bar-filter-text-bar {
     padding-top: 3px;
     padding-bottom: 3px;
   }
 }
 
+/* Style for the default system dark theme */
+
+:root[lwt-default-theme-in-dark-mode] #quick-filter-bar-expando {
+  border-bottom-color: var(--chrome-content-separator-color);
+}
+
 /* :::: Filter Buttons :::: */
 
 #quick-filter-bar toolbarbutton {
   min-height: 19px;
   border: 1px solid transparent;
   padding: 2px 3px;
   margin-inline-start: 1px;
   margin-inline-end: 1px;