Bug 1593514 - Create a shared searchDialog.css and fix theming of the search dialog. r=aleca a=jorgk
authorRichard Marti <richard.marti>
Tue, 05 Nov 2019 08:33:47 +0100
changeset 36385 adbe76f02e458c50cfe55270017dbaf8f09fd4ed
parent 36384 7f1d0247bd5b2355133aa8d9b18bdb539873e39a
child 36386 308f336efa3e4a31950e84ced994917e1fb02146
push id2521
push usermozilla@jorgk.com
push dateWed, 06 Nov 2019 09:31:04 +0000
treeherdercomm-beta@308f336efa3e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersaleca, jorgk
bugs1593514
Bug 1593514 - Create a shared searchDialog.css and fix theming of the search dialog. r=aleca a=jorgk
mail/base/content/ABSearchDialog.xul
mail/themes/linux/mail/messenger.css
mail/themes/linux/mail/searchDialog.css
mail/themes/osx/mail/searchDialog.css
mail/themes/shared/jar.inc.mn
mail/themes/shared/mail/searchDialog.css
mail/themes/windows/mail/messenger.css
mail/themes/windows/mail/searchDialog.css
mailnews/base/search/content/searchTerm.inc.xul
--- a/mail/base/content/ABSearchDialog.xul
+++ b/mail/base/content/ABSearchDialog.xul
@@ -20,16 +20,17 @@
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml"
         onload="searchOnLoad();"
         onunload="searchOnUnload();"
         onclose="onSearchStop();"
         windowtype="mailnews:absearch"
         title="&abSearchDialogTitle.label;"
         style="width: 52em; height: 34em;"
+        lightweightthemes="true"
         persist="screenX screenY width height sizemode">
 
   <stringbundleset id="stringbundleset">
     <stringbundle id="bundle_addressBook" src="chrome://messenger/locale/addressbook/addressBook.properties"/>
     <stringbundle id="bundle_search" src="chrome://messenger/locale/search.properties"/>
     <stringbundle id="bundle_messenger" src="chrome://messenger/locale/messenger.properties"/>
     <stringbundle id="bundle_brand" src="chrome://branding/locale/brand.properties"/>
   </stringbundleset>
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -95,17 +95,18 @@ toolbar[brighttext] {
 .toolbar[brighttext],
 .contentTabToolbox[brighttext],
 #header-view-toolbar[brighttext],
 #ab-toolbox > toolbar[brighttext],
 .mail-toolbox > toolbar[brighttext],
 #event-toolbox > toolbar[brighttext],
 #compose-toolbox > toolbar[brighttext],
 #headers-box > toolbar[brighttext],
-#FormatToolbox > toolbar[brighttext] {
+#FormatToolbox > toolbar[brighttext],
+:root[lwt-tree-brighttext] #searchTerms {
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
   --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
   --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
 
   --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4));
   --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .7));
   --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) inset;
 
--- a/mail/themes/linux/mail/searchDialog.css
+++ b/mail/themes/linux/mail/searchDialog.css
@@ -1,53 +1,19 @@
 /* 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/. */
 
 /* ===== searchDialog.css ===============================================
   == Styles for the Mail Search dialog.
   ======================================================================= */
 
-@import url("chrome://messenger/skin/");
-@import url("chrome://messenger/skin/messageIcons.css");
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-@namespace html url("http://www.w3.org/1999/xhtml");
-
-#searchTerms {
-  margin: 8px 6px 0;
-}
-
-#searchResults {
-  margin: 0 6px 6px;
-}
-
-/* ::::: box sizes ::::: */
+@import url("chrome://messenger/skin/shared/searchDialog.css");
 
-#searchTermTree {
-  min-height: 50px;
-}
-
-#searchTermListBox {
-  height: 100px;
-}
-
-#searchResultListBox {
-  margin: 5px;
-  height: 100px;
-}
-
-#searchTermList > richlistitem {
-  padding-top: 1px;
-  padding-bottom: 1px;
-}
-
-.search-menulist[unavailable="true"] {
-  color: GrayText;
-}
+@namespace html url("http://www.w3.org/1999/xhtml");
 
 html|input.search-value-textbox {
   padding-top: 0;
   padding-bottom: 0;
 }
 
 menulist {
   width: 12em;
@@ -62,28 +28,36 @@ menulist > menupopup > menuitem {
   margin: 2px;
 }
 
 .small-button + .small-button {
   margin-inline-start: 0;
   margin-inline-end: 4px;
 }
 
-/* ::::: thread decoration ::::: */
-
-treechildren::-moz-tree-cell-text(read) {
-  font-weight: normal;
-}
-
-treechildren::-moz-tree-cell-text(unread) {
-  font-weight: bold;
-}
-
-/* on a collapsed thread, if the top level message is read, but the thread has
- * unread children, underline the text.  4.x mac did this, very slick
- */
-treechildren::-moz-tree-cell-text(container, closed, hasUnread, read) {
-  text-decoration: underline;
-}
-
 treechildren::-moz-tree-cell-text(subjectCol) {
   padding-inline-start: 0;
 }
+
+#gray_horizontal_splitter {
+  -moz-appearance: none;
+}
+
+:root[lwt-tree] #searchTermList button,
+:root[lwt-tree] #searchTermList menulist {
+  padding: 3px 0;
+}
+
+:root[lwt-tree] #searchTermList menulist > .menulist-label-box {
+  -moz-appearance: none;
+  padding-inline-end: 12px;
+  background-repeat: no-repeat;
+  background-position: right;
+  background-size: 9px 7px;
+  background-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+:root[lwt-tree] #searchTermList menulist:-moz-locale-dir(rtl) >
+  .menulist-label-box {
+  background-position: left;
+}
--- a/mail/themes/osx/mail/searchDialog.css
+++ b/mail/themes/osx/mail/searchDialog.css
@@ -1,105 +1,71 @@
 /* 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/. */
 
 /* ===== searchDialog.css ===============================================
   == Styles for the Mail Search dialog.
   ======================================================================= */
 
-@import url("chrome://messenger/skin/");
-@import url("chrome://messenger/skin/messageIcons.css");
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-#searchTerms  {
-  margin: 8px 8px 0;
-}
-
-#searchResults {
-  margin: 0 8px 8px;
-}
+@import url("chrome://messenger/skin/shared/searchDialog.css");
 
 #searchTerms > vbox {
   font: menu;
 }
 
-/* ::::: box sizes ::::: */
-
-#searchTermTree {
-  min-height: 50px;
-}
-
-#searchTermListBox {
-  height: 100px;
-}
-
-#searchTermList > richlistitem {
-  padding-top: 1px;
-  padding-bottom: 1px;
-}
-
-#searchTermList > listitem[selected="true"] {
-  background-color: inherit;
-}
-
-listcell > hbox {
-  -moz-box-pack: end;
-}
-
-#searchResultListBox {
+:root:not([lwt-tree]) #searchResultListBox {
   -moz-appearance: listbox;
-  margin-inline-start: 4px;
-  margin-inline-end: 4px;
-  height: 100px;
 }
 
 menulist {
   width: 18em;
 }
 
 .search-menulist {
   width: 12em;
 }
 
-.search-menulist[unavailable="true"] {
-  color: GrayText;
-}
-
 .small-button {
   min-width: 22px;
   height: 20px;
-  padding: 0 1px 1px 0;
+  padding: 0;
+  padding-inline-end: 1px;
+  padding-bottom: 1px;
   margin: 4px 0;
 }
 
 .small-button:first-child {
   margin-inline-start: 2px;
 }
 
-/* ::::: thread decoration ::::: */
-
-treechildren::-moz-tree-cell-text(read) {
-  font-weight: normal;
-}
-
-treechildren::-moz-tree-cell-text(unread) {
-  font-weight: bold;
-}
-
-/* on a collapsed thread, if the top level message is read, but the thread has
- * unread children, underline the text.  4.x mac did this, very slick
- */
-treechildren::-moz-tree-cell-text(container, closed, hasUnread, read) {
-  text-decoration: underline;
-}
-
 #sizeCol,
 #unreadCol,
 #totalCol {
   text-align: right;
 }
 
 #status-bar {
   font: message-box;
   margin-top: 8px;
 }
+
+:root[lwt-tree] #searchTermList button:hover,
+:root[lwt-tree] #searchTermList menulist:hover,
+:root[lwt-tree] #searchTermList menulist[open="true"] {
+  background-color: rgba(230, 230, 230, .7) !important;
+}
+
+:root[lwt-tree] #searchTermList menulist > .menulist-label-box {
+  -moz-appearance: none;
+  padding-inline-end: 12px;
+  background-repeat: no-repeat;
+  background-position: right;
+  background-size: 9px 7px;
+  background-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+:root[lwt-tree] #searchTermList menulist:-moz-locale-dir(rtl) >
+  .menulist-label-box {
+  background-position: left;
+}
--- a/mail/themes/shared/jar.inc.mn
+++ b/mail/themes/shared/jar.inc.mn
@@ -124,16 +124,17 @@
   skin/classic/messenger/shared/in-content/chat.svg           (../shared/mail/incontentprefs/chat.svg)
   skin/classic/messenger/shared/in-content/general.svg        (../shared/mail/incontentprefs/general.svg)
   skin/classic/messenger/shared/in-content/security.svg       (../shared/mail/incontentprefs/security.svg)
   skin/classic/messenger/shared/mailWindow1.css               (../shared/mail/mailWindow1.css)
   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/searchBox.css                 (../shared/mail/searchBox.css)
+  skin/classic/messenger/shared/searchDialog.css              (../shared/mail/searchDialog.css)
   skin/classic/messenger/shared/tabmail.css                   (../shared/mail/tabmail.css)
   skin/classic/messenger/tagColors.css                        (../shared/mail/tagColors.css)
   skin/classic/messenger/shared/smime/smime-compose.css       (../shared/mail/smime/smime-compose.css)
   skin/classic/messenger/shared/customizableui/panelUI.css    (../shared/customizableui/panelUI.css)
   skin/classic/messenger/shared/grid-layout.css               (../shared/mail/grid-layout.css)
   skin/classic/messenger/shared/input-fields.css              (../shared/mail/input-fields.css)
 #ifndef XP_MACOSX
   skin/classic/messenger/shared/newmailalert.css              (../shared/mail/newmailalert.css)
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/searchDialog.css
@@ -0,0 +1,165 @@
+/* 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/. */
+
+@import url("chrome://messenger/skin/");
+@import url("chrome://messenger/skin/messageIcons.css");
+
+#searchTerms {
+  margin-top: 8px;
+}
+
+#booleanAndGroup,
+#searchTermBox,
+#searchTerms > vbox > hbox {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+#searchTermBox {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+#searchResults {
+  padding: 0 6px 6px;
+  text-shadow: none;
+}
+
+#searchResultListBox {
+  margin: 4px;
+  height: 100px;
+}
+
+.search-menulist[unavailable="true"] {
+  color: GrayText;
+}
+
+/* ::::: box sizes ::::: */
+
+#searchTermTree {
+  min-height: 50px;
+}
+
+#searchTermListBox {
+  height: 100px;
+}
+
+#searchTermList > richlistitem {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+/* ::::: thread decoration ::::: */
+
+treechildren::-moz-tree-cell-text(read) {
+  font-weight: normal;
+}
+
+treechildren::-moz-tree-cell-text(unread) {
+  font-weight: bold;
+}
+
+/* on a collapsed thread, if the top level message is read, but the thread has
+ * unread children, underline the text.  4.x mac did this, very slick
+ */
+treechildren::-moz-tree-cell-text(container, closed, hasUnread, read) {
+  text-decoration: underline;
+}
+
+#gray_horizontal_splitter {
+  min-height: 4px;
+  background-color: -moz-Dialog;
+  border-top: 1px solid ThreeDHighlight;
+  border-bottom: 1px solid ThreeDShadow;
+}
+
+/* ::::: theme support ::::: */
+
+#searchTermBox:-moz-lwtheme,
+#searchResults:-moz-lwtheme {
+  background-color: -moz-Dialog;
+}
+
+:root[lwt-tree] #searchTermBox,
+:root[lwt-tree] #searchResults {
+  background-color: var(--lwt-accent-color);
+}
+
+:root[lwt-tree] #gray_horizontal_splitter {
+  background-color: var(--toolbar-bgcolor);
+  border-color: var(--sidebar-border-color);
+}
+
+:root[lwt-tree] #searchTermList {
+  -moz-appearance: none;
+  background-color: var(--sidebar-background-color);
+  color: var(--sidebar-text-color);
+  border: 1px solid var(--sidebar-border-color);
+  scrollbar-color: rgba(204,204,204,.5) rgba(230,230,235,.5);
+}
+
+:root[lwt-tree-brighttext] #searchTermList {
+  scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
+}
+
+:root[lwt-tree] #threadTree,
+:root[lwt-tree] #abResultsTree {
+  border: 1px solid var(--sidebar-border-color);
+}
+
+:root[lwt-tree] #searchTermList > richlistitem[selected="true"] {
+  background-color: hsla(0,0%,50%,.25);
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] #searchTermList:focus > richlistitem[selected="true"] {
+  background-color: var(--sidebar-highlight-background-color, hsla(0,0%,50%,.35));
+}
+
+:root[lwt-tree] #searchTermList button,
+:root[lwt-tree] #searchTermList menulist {
+  -moz-appearance: none;
+  background: var(--toolbarbutton-hover-background);
+  border: 1px solid var(--toolbarbutton-hover-bordercolor);
+  color: inherit;
+}
+
+:root[lwt-tree] #searchTermList button:hover,
+:root[lwt-tree] #searchTermList menulist:hover,
+:root[lwt-tree] #searchTermList menulist[open="true"] {
+  background: var(--toolbarbutton-active-background);
+  border: 1px solid var(--toolbarbutton-active-bordercolor);
+  color: inherit;
+}
+
+:root[lwt-tree] #searchTermList button:hover:active,
+:root[lwt-tree] #searchTermList menulist[open="true"] {
+  box-shadow: --toolbarbutton-active-boxshadow;
+}
+
+:root[lwt-tree] #searchTermList menulist > .menulist-label-box {
+  margin-right: 6px;
+  margin-left: 6px;
+}
+
+:root[lwt-tree] #searchTermList .search-value-textbox:-moz-lwtheme {
+  background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8));
+  color: var(--lwt-toolbar-field-color, black);
+  border-style: solid;
+}
+
+:root[lwt-tree] #searchTermList .search-value-textbox:not(:focus):-moz-lwtheme {
+  border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25));
+}
+
+:root[lwt-tree] #searchTermList .search-value-textbox:-moz-lwtheme:hover {
+  background-color: var(--lwt-toolbar-field-background-color, white);
+  box-shadow: 0 1px 3px rgba(255,255,255,.15);
+}
+
+:root[lwt-tree] #searchTermList .search-value-textbox:-moz-lwtheme:focus {
+  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: Highlight;
+}
--- a/mail/themes/windows/mail/messenger.css
+++ b/mail/themes/windows/mail/messenger.css
@@ -119,17 +119,18 @@ toolbar[brighttext] {
 
 .toolbar[brighttext],
 .contentTabToolbox[brighttext],
 #header-view-toolbar[brighttext],
 #ab-toolbox > toolbar[brighttext],
 .mail-toolbox > toolbar[brighttext],
 #event-toolbox > toolbar[brighttext],
 #compose-toolbox > toolbar[brighttext],
-#navigation-toolbox > toolbar[brighttext] {
+#navigation-toolbox > toolbar[brighttext],
+:root[lwt-tree-brighttext] #searchTerms {
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
   --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
   --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
 
   --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4));
   --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .7));
   --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) inset;
 
--- a/mail/themes/windows/mail/searchDialog.css
+++ b/mail/themes/windows/mail/searchDialog.css
@@ -1,51 +1,26 @@
 /* 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/. */
 
 /* ===== searchDialog.css ===============================================
   == Styles for the Mail Search dialog.
   ======================================================================= */
 
-@import url("chrome://messenger/skin/");
-@import url("chrome://messenger/skin/messageIcons.css");
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@import url("chrome://messenger/skin/shared/searchDialog.css");
 
-#searchTerms  {
-  margin: 8px 6px 0;
-}
-
-#searchResults {
-  margin: 0 6px 6px;
+:root[lwt-tree]:not([lwt-tree-brighttext]) {
+  --toolbarbutton-hover-background: #bbb;
+  --toolbarbutton-active-background: #aaa;
 }
 
-/* ::::: box sizes ::::: */
-
-#searchTermTree {
-  min-height: 50px;
-}
-
-#searchTermListBox {
-  height: 100px;
-}
-
-#searchResultListBox {
-  margin: 4px;
-  height: 100px;
-}
-
-#searchTermList > richlistitem {
-  padding-top: 1px;
-  padding-bottom: 1px;
-}
-
-.search-menulist[unavailable="true"] {
-  color: GrayText;
+:root:not([lwt-tree]) #threadTree,
+:root:not([lwt-tree]) #abResultsTree {
+  -moz-appearance: listbox;
 }
 
 menulist {
   width: 12em;
 }
 
 menulist > menupopup > menuitem {
   padding-inline-end: 2px;
@@ -56,28 +31,14 @@ menulist > menupopup > menuitem {
   margin: 1px 2px;
 }
 
 .small-button + .small-button {
   margin-inline-start: 0;
   margin-inline-end: 4px;
 }
 
-/* ::::: thread decoration ::::: */
-
-#threadTree {
-  -moz-appearance: listbox;
-}
-
-treechildren::-moz-tree-cell-text(read) {
-  font-weight: normal;
+:root[lwt-tree] #searchTermList menulist > .menulist-dropmarker {
+  -moz-appearance: none;
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
-
-treechildren::-moz-tree-cell-text(unread) {
-  font-weight: bold;
-}
-
-/* on a collapsed thread, if the top level message is read, but the thread has
- * unread children, underline the text.  4.x mac did this, very slick
- */
-treechildren::-moz-tree-cell-text(container, closed, hasUnread, read) {
-  text-decoration: underline;
-}
--- a/mailnews/base/search/content/searchTerm.inc.xul
+++ b/mailnews/base/search/content/searchTerm.inc.xul
@@ -7,17 +7,17 @@
             <radio value="and" label="&matchAll.label;"
                    accesskey="&matchAll.accesskey;"/>
             <radio value="or" label="&matchAny.label;"
                    accesskey="&matchAny.accesskey;"/>
             <radio value="matchAll" id="matchAllItem" label="&matchAllMsgs.label;"
                    accesskey="&matchAllMsgs.accesskey;"/>
           </radiogroup>
 
-          <hbox flex="1" minheight="100">
+          <hbox id="searchTermBox" flex="1" minheight="100">
             <hbox id="searchterms"/>
             <richlistbox flex="1" id="searchTermList">
               <treecols hidden="true">
                 <treecol flex="&searchTermListAttributesFlexValue;"/>
                 <treecol flex="&searchTermListOperatorsFlexValue;"/>
                 <treecol flex="&searchTermListValueFlexValue;"/>
                 <treecol class="filler"/>
               </treecols>