Bug 1508159 - Unify some quickfilterbar rules and fix the qfb-tag-button colors. r=mkmelin
authorRichard Marti <richard.marti@gmail.com>
Sun, 18 Nov 2018 22:50:55 +0100
changeset 33758 997a4690702341b8abdf046eb56f2ee03ade135d
parent 33757 95cd4e14ec48ff68aca70ab67ef2e74b0a124b44
child 33759 cd6d89475b76f61404553532c8e8ca87d0307b5c
push id388
push userclokep@gmail.com
push dateMon, 28 Jan 2019 20:54:56 +0000
reviewersmkmelin
bugs1508159
Bug 1508159 - Unify some quickfilterbar rules and fix the qfb-tag-button colors. r=mkmelin
mail/base/content/quickFilterBar.css
mail/themes/linux/mail/messenger.css
mail/themes/linux/mail/quickFilterBar.css
mail/themes/osx/mail/messenger.css
mail/themes/osx/mail/quickFilterBar.css
mail/themes/shared/jar.inc.mn
mail/themes/shared/mail/icons/search-not-found.svg
mail/themes/shared/mail/messenger.css
mail/themes/windows/mail/messenger.css
mail/themes/windows/mail/quickFilterBar.css
--- a/mail/base/content/quickFilterBar.css
+++ b/mail/base/content/quickFilterBar.css
@@ -1,28 +1,76 @@
 /* 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/. */
 
+/* :::: Filter Buttons :::: */
+
+#quick-filter-bar-main-bar toolbarbutton {
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+#qfb-sticky {
+  list-style-image: url("chrome://messenger/skin/icons/sticky.svg");
+}
+
+#qfb-unread {
+  list-style-image: url("chrome://messenger/skin/icons/mark.svg");
+}
+
+#qfb-starred {
+  list-style-image: url("chrome://messenger/skin/icons/star.svg");
+}
+
+#qfb-inaddrbook {
+  list-style-image: url("chrome://messenger/skin/icons/address.svg")
+}
+
+#qfb-tags {
+  list-style-image: url("chrome://messenger/skin/icons/tag.svg");
+}
+
+#qfb-attachment {
+  list-style-image: url("chrome://messenger/skin/icons/attach.svg");
+}
+
 #quick-filter-bar[disabled="true"] {
   visibility: collapse;
 }
 
 #qfb-results-label {
+  color: GrayText;
   text-align: end;
   visibility: hidden;
 }
 
+#quick-filter-bar[filterActive="matches"] #qfb-results-label {
+  color: #4e9a06;
+}
+
+#quick-filter-bar[filterActive="nomatches"] #qfb-results-label {
+  color: #f66;
+}
+
 #qfb-filter-bar-spacer {
   min-width: 4px !important;
 }
 
 .qfb-tag-button[inverted] {
   text-decoration: line-through;
 }
 
 #quick-filter-bar-main-bar {
   overflow: hidden;
 }
 
 #quick-filter-bar-collapsible-buttons[shrink="true"] toolbarbutton label.toolbarbutton-text {
   display: none;
 }
+
+#threadTree[filterActive="nomatches"] > .tree-stack {
+  background: url("chrome://messenger/skin/icons/search-not-found.svg") no-repeat center;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: .3;
+}
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -330,21 +330,16 @@ toolbox[labelalign="end"] .toolbarbutton
 .toolbarbutton-menubutton-button {
   -moz-appearance: none;
   min-height: 24px;
   min-width: 32px;
   margin: 4px 1px;
   padding: 1px 6px !important;
 }
 
-.toolbarbutton-1:not(.qfb-tag-button),
-.toolbarbutton-menubutton-button {
-  color: inherit !important;
-}
-
 .toolbarbutton-1[type="menu-button"] {
   -moz-appearance: none;
 }
 
 .findbar-button {
   -moz-appearance: none;
   color: inherit;
   padding: 5px;
--- a/mail/themes/linux/mail/quickFilterBar.css
+++ b/mail/themes/linux/mail/quickFilterBar.css
@@ -23,74 +23,29 @@
   margin-top: -1px;
   padding-bottom: 2px;
 }
 
 #quick-filter-bar-filter-text-bar {
   padding-inline-end: 4px;
 }
 
-#threadTree[filterActive="matches"] {
-  outline: 1px solid #4e9a06;
-}
-
-#threadTree[filterActive="nomatches"] {
-  outline: 1px solid #cc0000;
-}
-
 /* :::: Filter Buttons :::: */
 
 #quick-filter-bar toolbarbutton {
   margin-right: 1px;
   margin-left: 1px;
 }
 
-#quick-filter-bar-main-bar toolbarbutton {
-  -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
-  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
-}
-
 #quick-filter-bar-tab-bar > .qfb-tag-button {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-#qfb-sticky {
-  list-style-image: url("chrome://messenger/skin/icons/sticky.svg");
-}
-
-#qfb-unread {
-  list-style-image: url("chrome://messenger/skin/icons/mark.svg");
-}
-
-#qfb-starred {
-  list-style-image: url("chrome://messenger/skin/icons/star.svg");
-}
-
-#qfb-inaddrbook {
-  list-style-image: url("chrome://messenger/skin/icons/address.svg")
-}
-
-#qfb-tags {
-  list-style-image: url("chrome://messenger/skin/icons/tag.svg");
-}
-
-#qfb-attachment {
-  list-style-image: url("chrome://messenger/skin/icons/attach.svg");
-}
-
-#qfb-results-label {
-  color: GrayText;
-}
-
-#quick-filter-bar[filterActive="matches"] #qfb-results-label {
-  color: #4e9a06;
-}
-
-#quick-filter-bar[filterActive="nomatches"] #qfb-results-label {
-  color: #cc0000;
+#quick-filter-bar-filter-text-bar > toolbarbutton {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 #qfb-boolean-mode {
   margin-top: 0;
   margin-bottom: 0;
 }
--- a/mail/themes/osx/mail/messenger.css
+++ b/mail/themes/osx/mail/messenger.css
@@ -324,21 +324,16 @@ toolbox[labelalign="end"] toolbarpalette
 
 .toolbarbutton-1 {
   margin: 5px 2px;
   -moz-context-properties: fill, fill-opacity;
   fill: var(--lwt-toolbarbutton-icon-fill, currentColor);
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
-.toolbarbutton-1,
-.toolbarbutton-menubutton-button {
-  color: inherit !important;
-}
-
 .toolbarbutton-1:-moz-lwtheme {
   text-shadow: inherit;
 }
 
 .toolbarbutton-1[open],
 .toolbarbutton-1[open] > .toolbarbutton-menubutton-button {
   text-shadow: none;
 }
--- a/mail/themes/osx/mail/quickFilterBar.css
+++ b/mail/themes/osx/mail/quickFilterBar.css
@@ -30,42 +30,31 @@
     border-bottom-color: hsl(0, 0%, 68%);
   }
 
   #quick-filter-bar-expando:-moz-window-inactive {
     border-bottom-color: hsl(0, 0%, 85%);
   }
 }
 
-#threadTree[filterActive="matches"] {
-  background: repeating-linear-gradient(to bottom, #ecf3fe 0, #ecf3fe 18px, white 18px, white 36px);
-}
-
-#threadTree[filterActive="nomatches"] {
-  background: repeating-linear-gradient(to bottom, #fff0f4, #fff0f4 18px, white 18px, white 36px);
-}
-
 #qfb-filter-label {
   color: #888;
   font-weight: bold;
 }
 
 /* :::: Filter Buttons :::: */
 
 #quick-filter-bar toolbarbutton {
   height: 16px;
   padding: 0 4px;
   margin: 0 3px;
 }
 
 #quick-filter-bar-main-bar toolbarbutton {
   height: 18px;
-  -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
-  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 #quick-filter-bar-main-bar toolbarbutton:not(#qfb-sticky) > .toolbarbutton-icon {
   margin-inline-end: 2px;
 }
 
 #quick-filter-bar toolbarbutton > .toolbarbutton-text {
   padding: 0;
@@ -74,61 +63,32 @@
 
 #quick-filter-bar-expando toolbarbutton {
   margin-bottom: 3px;
 }
 
 #qfb-sticky {
   width: 18px;
   margin-inline-start: 6px !important;
-  list-style-image: url("chrome://messenger/skin/icons/sticky.svg");
 }
 
 /* we use both IDs so we are more precise than the other # toolbarbutton rules */
 #quick-filter-bar #qfb-sticky > .toolbarbutton-text {
   margin: 0;
 }
 
-#qfb-unread {
-  list-style-image: url("chrome://messenger/skin/icons/mark.svg");
-}
-
-#qfb-starred {
-  list-style-image: url("chrome://messenger/skin/icons/star.svg");
-}
-
-#qfb-inaddrbook {
-  list-style-image: url("chrome://messenger/skin/icons/address.svg")
-}
-
-#qfb-tags {
-  list-style-image: url("chrome://messenger/skin/icons/tag.svg");
-}
-
-#qfb-attachment {
-  list-style-image: url("chrome://messenger/skin/icons/attach.svg");
-}
-
-#quick-filter-bar[filterActive="matches"] #qfb-results-label {
-  color: green;
-}
-
-#quick-filter-bar[filterActive="nomatches"] #qfb-results-label {
-  color: #f66;
-}
-
 @media (-moz-mac-yosemite-theme) {
   #qfb-qs-textbox {
     margin-top: 3px;
     margin-bottom: 2px;
   }
 }
 
 #qfb-qs-label {
-  margin-top: 0px;
+  margin-top: 0;
   margin-bottom: 3px;
   color: #6b6b6b;
 }
 
 #qfb-boolean-mode {
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-top: 0;
+  margin-bottom: 0;
 }
--- a/mail/themes/shared/jar.inc.mn
+++ b/mail/themes/shared/jar.inc.mn
@@ -64,16 +64,17 @@
   skin/classic/messenger/icons/quote.svg                      (../shared/mail/icons/quote.svg)
   skin/classic/messenger/icons/readcol.svg                    (../shared/mail/icons/readcol.svg)
   skin/classic/messenger/icons/remote-blocked.svg             (../shared/mail/icons/remote-blocked.svg)
   skin/classic/messenger/icons/reply.svg                      (../shared/mail/icons/reply.svg)
   skin/classic/messenger/icons/replyall.svg                   (../shared/mail/icons/replyall.svg)
   skin/classic/messenger/icons/replylist.svg                  (../shared/mail/icons/replylist.svg)
   skin/classic/messenger/icons/search-glass.svg               (../shared/mail/icons/search-glass.svg)
   skin/classic/messenger/icons/save.svg                       (../shared/mail/icons/save.svg)
+  skin/classic/messenger/icons/search-not-found.svg           (../shared/mail/icons/search-not-found.svg)
   skin/classic/messenger/icons/security.svg                   (../shared/mail/icons/security.svg)
   skin/classic/messenger/icons/send.svg                       (../shared/mail/icons/send.svg)
   skin/classic/messenger/icons/sort.svg                       (../shared/mail/icons/sort.svg)
   skin/classic/messenger/icons/spelling.svg                   (../shared/mail/icons/spelling.svg)
   skin/classic/messenger/icons/star.svg                       (../shared/mail/icons/star.svg)
   skin/classic/messenger/icons/starred.svg                    (../shared/mail/icons/starred.svg)
   skin/classic/messenger/icons/sticky.svg                     (../shared/mail/icons/sticky.svg)
   skin/classic/messenger/icons/stop.svg                       (../shared/mail/icons/stop.svg)
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/search-not-found.svg
@@ -0,0 +1,11 @@
+<!-- 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/. -->
+<!DOCTYPE svg [
+  <!ENTITY % quickFilterBarDTD SYSTEM "chrome://messenger/locale/quickFilterBar.dtd">
+  %quickFilterBarDTD;
+]>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 28" width="400px" height="112px">
+  <text x="50" y="28" text-anchor="middle" style="font: 4px sans-serif;" fill="GrayText">&quickFilterBar.resultsLabel.none;</text>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M48.18.86c-3-.1-5.85 1.33-7.58 3.79-1 1.5-1.6 3.4-1.6 5.3 0 5 4.1 9 9 9 1.8 0 3.6-.6 5.2-1.6l6.2 6.2c.6.6 1.5.6 2.1 0 .6-.6.6-1.5 0-2.1l-6.2-6.3a9 9 0 0 0-2.1-12.6 9.16 9.16 0 0 0-5.02-1.7zM48 3.95c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6zm-2.81 4.12L47.12 10l-1.93 1.92c-.6.6.3 1.5.9.9L48 10.89l1.83 1.92c.6.59 1.49-.31.89-.9L48.9 9.99l1.92-1.92c.5-.59-.3-1.39-.89-.89L48.01 9.1l-1.92-1.92c-.74-.47-1.25.27-.9.89z"/>
+</svg>
--- a/mail/themes/shared/mail/messenger.css
+++ b/mail/themes/shared/mail/messenger.css
@@ -155,16 +155,21 @@ toolbar[printpreview="true"] {
   background-color: hsla(0,0%,60%,.4);
 }
 
 :root[lwt-tree-brighttext] treecol:hover,
 :root[lwt-tree-brighttext] treecolpicker:hover {
   background-color: rgba(249,249,250,.2);
 }
 
+.toolbarbutton-1:not(.qfb-tag-button),
+.toolbarbutton-menubutton-button {
+  color: inherit !important;
+}
+
 /* ..... column picker ..... */
 
 .tree-columnpicker-icon  {
   list-style-image: url(chrome://messenger/skin/icons/columnpicker.svg);
 }
 
 /* :::::: throbber :::::::::: */
 
--- a/mail/themes/windows/mail/messenger.css
+++ b/mail/themes/windows/mail/messenger.css
@@ -203,17 +203,16 @@ toolbarpaletteitem[place="toolbar"] > to
 toolbox[labelalign="end"] .toolbarbutton-1,
 toolbox[labelalign="end"] .toolbarbutton-1[type="menu-button"]
   > .toolbarbutton-menubutton-button {
   -moz-box-orient: horizontal;
 }
 
 .toolbarbutton-1,
 .toolbarbutton-menubutton-button {
-  color: inherit !important;
   padding-top: 5px;
   padding-bottom: 6px;
   padding-inline-start: 4px;
   padding-inline-end: 5px;
 }
 
 .toolbarbutton-1:hover:active:not([disabled]),
 .toolbarbutton-1[open="true"],
--- a/mail/themes/windows/mail/quickFilterBar.css
+++ b/mail/themes/windows/mail/quickFilterBar.css
@@ -62,90 +62,45 @@
   margin-inline-start: 1px;
   margin-inline-end: 1px;
 }
 
 #quick-filter-bar-main-bar toolbarbutton {
   min-width: 22px;
   margin-inline-start: 1px;
   margin-inline-end: 1px;
-  -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
-  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 /* keep that hideous outline focus ring from showing on the checked buttons */
 #quick-filter-bar-main-bar toolbarbutton:focus {
   outline: none;
 }
 
+#quick-filter-bar-filter-text-bar > toolbarbutton {
+  margin-top: 1px;
+  margin-bottom: 0;
+}
+
 #qfb-boolean-mode {
   margin: 0 1px;
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 }
 
 #quick-filter-bar-tab-bar > .qfb-tag-button {
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 }
 
-#qfb-sticky {
-  list-style-image: url("chrome://messenger/skin/icons/sticky.svg");
-}
-
-#qfb-unread {
-  list-style-image: url("chrome://messenger/skin/icons/mark.svg");
-}
-
-#qfb-starred {
-  list-style-image: url("chrome://messenger/skin/icons/star.svg");
-}
-
-#qfb-inaddrbook {
-  list-style-image: url("chrome://messenger/skin/icons/address.svg")
-}
-
-#qfb-tags {
-  list-style-image: url("chrome://messenger/skin/icons/tag.svg");
-}
-
-#qfb-attachment {
-  list-style-image: url("chrome://messenger/skin/icons/attach.svg");
-}
-
-#quick-filter-bar[filterActive="matches"] #qfb-results-label {
-  color: green;
-}
-
-#quick-filter-bar[filterActive="nomatches"] #qfb-results-label {
-  color: #f66;
-}
-
 #quick-filter-bar-collapsible-buttons toolbarbutton .toolbarbutton-text {
   margin-inline-start: 3px !important;
 }
 
-@media (-moz-windows-default-theme) {
-  #threadTree[filterActive="searching"] {
-    background-color: #ffffcc;
-  }
-
-  #threadTree[filterActive="matches"] {
-    background-color: #f2f9fc;
-  }
-
-  #threadTree[filterActive="nomatches"] {
-    background: repeating-linear-gradient(-45deg, #fff0f4,
-                #fff0f4 5px, white 5px, white 10px);
-  }
-}
-
 @media (-moz-os-version: windows-win7) {
   #quick-filter-bar toolbarbutton {
     -moz-appearance: none;
     border-radius: 2px;
   }
 
   #quick-filter-bar toolbarbutton:not([checked="true"]):hover {
     border-top-color: ButtonHighlight;