Bug 633679 - Quick filter button / menuitem shouldn't be invisible when disabled. r=mconley, ui-r=mconley.

mail/base/content/quickFilterBar.js

@@ -90,7 +90,7 @@ let QuickFilterBarMuxer = {
                         !aFolderDisplay.displayedFolder.isServer;
     let qfbButton = document.getElementById("qfb-show-filter-bar");
     if (qfbButton)
-      qfbButton.style.visibility = (appropriate ? "visible" : "hidden");
+      qfbButton.disabled = !appropriate;
 
     // The case in that previous aFolderDisplay is showing a normal folder is
     //  handled by onLoadingFolder. Here we handle the case where previous
@@ -476,7 +476,7 @@ let QuickFilterBarMuxer = {
     else { // this only happens for tabs we are not legal on
       let qfbButton = document.getElementById("qfb-show-filter-bar");
       if (qfbButton)
-        qfbButton.style.visibility = "hidden";
+        qfbButton.disabled = true;
     }
   },
 

mail/base/content/quickFilterBar.xul

@@ -64,17 +64,20 @@
   <menupopup id="view_toolbars_popup">
     <!-- gets disabled but stays visible when not legal -->
     <menuitem id="view_toolbars_popup_quickFilterBar"
+              type="checkbox"
               insertbefore="viewMenuBeforeCustomizeMailToolbarsSeparator"
               label="&quickFilterBar.toggleBarVisibility.menu.label;"
               accesskey="&quickFilterBar.toggleBarVisibility.menu.accesskey;"
-              command="cmd_toggleQuickFilterBar"
-              observes="qfb-show-filter-bar"
-              />
+              command="cmd_toggleQuickFilterBar">
+      <observes element="qfb-show-filter-bar" attribute="checked"/>
+    </menuitem>
   </menupopup>
 
   <toolbarpalette id="MailToolbarPalette">
     <!-- gets hidden but keeps space allocation when not legal-->
-    <toolbarbutton id="qfb-show-filter-bar" type="checkbox"
+    <toolbarbutton id="qfb-show-filter-bar"
+                   class="toolbarbutton-1"
+                   type="checkbox"
                    label="&quickFilterBar.qfbShowFilterBar.label;"
                    command="cmd_toggleQuickFilterBar"
                    tooltiptext="&quickFilterBar.toggleBarVisibility.button.tooltip;"

mail/themes/gnomestripe/mail/primaryToolbar.css

@@ -461,7 +461,6 @@ toolbar[iconsize="small"] #button-archive[disabled] {
 /* ::::: end small primary toolbar buttons ::::: */
 
 #palette-box #qfb-show-filter-bar {
-  visibility: visible !important;
   list-style-image: url("moz-icon://stock/gtk-find?size=toolbar") !important;
 }
 

mail/themes/gnomestripe/mail/quickFilterBar.css

@@ -3,48 +3,21 @@
 /* :::: Filter Tab Bar Button :::: */
 
 #qfb-show-filter-bar {
-  -moz-box-orient: vertical;
-  visibility: visible !important;
   list-style-image: url("moz-icon://stock/gtk-find?size=menu");
-  margin: 0 0 1px;
-  padding: 0 4px;
 }
 
 toolbar[iconsize="large"] #qfb-show-filter-bar {
   list-style-image: url("moz-icon://stock/gtk-find?size=toolbar");
 }
 
-#qfb-show-filter-bar[style="visibility: hidden;"] {
-  -moz-appearance: none;
-  -moz-user-input: none;
-  padding: 5px !important;
-  border-color: transparent !important;
-  background: none !important;
+#qfb-show-filter-bar[disabled="true"] {
   list-style-image: url("moz-icon://stock/gtk-find?size=menu&state=disabled");
 }
 
-toolbar[iconsize="large"] #qfb-show-filter-bar[style="visibility: hidden;"] {
+toolbar[iconsize="large"] #qfb-show-filter-bar[disabled="true"] {
   list-style-image: url("moz-icon://stock/gtk-find?size=toolbar&state=disabled");
 }
 
-#qfb-show-filter-bar[style="visibility: hidden;"] > .toolbarbutton-text {
-  color: #000 !important;
-}
-
-#qfb-show-filter-bar > .toolbarbutton-icon {
-  -moz-margin-end: 0;
-}
-
-/* ::::: QFB button on main toolbar ::::: */
-
-#mail-toolbox #qfb-show-filter-bar {
-  margin: 0;
-}
-
-toolbox[labelalign="end"] #qfb-show-filter-bar {
-  -moz-box-orient: horizontal;
-}
-
 /* :::: Filter Bar :::: */
 
 #threadTree[filterActive="matches"] {

mail/themes/pinstripe/mail/primaryToolbar.css

@@ -692,7 +692,6 @@ toolbar[iconsize="small"] #button-archive[disabled] {
 /* ::::: end small primary toolbar buttons ::::: */
 
 #palette-box #qfb-show-filter-bar {
-  visibility: visible !important;
   list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
   -moz-image-region: rect(0px 672px 32px 640px);
 }

mail/themes/pinstripe/mail/quickFilterBar.css

@@ -3,21 +3,18 @@
 /* :::: Filter Tab Bar Button :::: */
 
 #qfb-show-filter-bar {
-  -moz-box-orient: vertical;
-  visibility: visible !important;
   list-style-image: url("chrome://messenger/skin/icons/mail-toolbar-small.png");
   -moz-image-region: rect(0px 504px 24px 480px);
-  border: none;
-  border-right: 1px solid transparent;
-  border-left: 1px solid transparent;
-  margin: 0 0 1px;
-  padding: 0 4px;
 }
 
 #qfb-show-filter-bar:hover:active {
   -moz-image-region: rect(24px 504px 48px 480px);
 }
 
+#qfb-show-filter-bar[disabled="true"] {
+  -moz-image-region: rect(48px 504px 72px 480px) !important;
+}
+
 toolbar[iconsize="large"] #qfb-show-filter-bar {
   list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
   -moz-image-region: rect(0px 672px 32px 640px);
@@ -27,44 +24,14 @@ toolbar[iconsize="large"] #qfb-show-filter-bar:hover:active {
   -moz-image-region: rect(32px 672px 64px 640px);
 }
 
-#qfb-show-filter-bar:not([style="visibility: hidden;"])[checked] {
-  background-color: #dddddd;
-  background-image: none;
-  border-right: 1px solid #b9b9b9;
-  border-left: 1px solid #b9b9b9;
-  color: ButtonText !important;
-}
-
-#qfb-show-filter-bar[style="visibility: hidden;"] {
-  -moz-user-input: none;
-  background-color: transparent;
-  -moz-image-region: rect(48px 504px 72px 480px);
-}
-
-toolbar[iconsize="large"] #qfb-show-filter-bar[style="visibility: hidden;"] {
-  -moz-image-region: rect(64px 672px 96px 640px);
+toolbar[iconsize="large"] #qfb-show-filter-bar[disabled="true"] {
+  -moz-image-region: rect(64px 672px 96px 640px) !important;
 }
 
 #qfb-show-filter-bar > .toolbarbutton-icon {
-  -moz-margin-end: 0;
   padding: 0 3px;
 }
 
-#qfb-show-filter-bar[style="visibility: hidden;"] > .toolbarbutton-text {
-  color: -moz-mac-disabledtoolbartext
-}
-
-/* ::::: QFB button on main toolbar ::::: */
-
-#mail-toolbox #qfb-show-filter-bar {
-  margin: 0 2px;
-  padding: 3px 1px;
-}
-
-toolbox[labelalign="end"] #qfb-show-filter-bar {
-  -moz-box-orient: horizontal;
-}
-
 /* :::: Filter Bar :::: */
 
 #quick-filter-bar {

mail/themes/qute/mail/primaryToolbar-aero.css

@@ -224,7 +224,7 @@ toolbarbutton[type="menu-button"][open="true"] >
   text-shadow: none;
 }
 
-.toolbarbutton-1[checked="true"]:not(:active):hover {
+.toolbarbutton-1:not([disabled="true"])[checked="true"]:not(:active):hover {
   background-color: rgba(90%, 90%, 90%, .4);
   -moz-transition: background-color .4s;
 }
@@ -255,7 +255,7 @@ toolbar[iconsize="small"] .toolbarbutton-1 > .toolbarbutton-icon {
     #button-goforward, #button-compact, #button-archive, #hdrArchiveButton,
     #hdrReplyButton, #hdrReplyToSenderButton, #hdrReplyAllButton,
     #hdrReplyOnlyButton, #hdrReplyListButton, #hdrForwardButton,
-    #hdrTrashButton, #hdrJunkButton
+    #hdrTrashButton, #hdrJunkButton, #qfb-show-filter-bar
     ) .toolbarbutton-icon {
   margin: 0 !important;
   width: auto !important;
@@ -463,7 +463,6 @@ toolbox[labelalign="end"] > toolbar[mode="full"] .toolbarbutton-1[type="menu"] {
 }
 
 #palette-box #qfb-show-filter-bar {
-  visibility: visible !important;
   list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
   -moz-image-region: rect(0px, 378px, 18px, 360px);
 }

mail/themes/qute/mail/primaryToolbar.css

@@ -670,15 +670,16 @@ toolbar[iconsize="small"] #button-archive[disabled] {
 #tabbar-toolbar .toolbarbutton-1[open="true"],
 #tabbar-toolbar .toolbarbutton-menubutton-button:hover:active:not([disabled]),
 #tabbar-toolbar .toolbarbutton-menubutton-button[open="true"] {
+  padding-top: 4px;
   padding-bottom: 2px;
 }
 
 #tabbar-toolbar .toolbarbutton-1[checked="true"] {
+  padding-top: 4px !important;
   padding-bottom: 2px !important;
 }
 
 #palette-box #qfb-show-filter-bar {
-  visibility: visible !important;
   list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
   -moz-image-region: rect(0px 504px 24px 480px);
 }

mail/themes/qute/mail/quickFilterBar-aero.css

@@ -41,90 +41,13 @@
 
 #qfb-show-filter-bar {
   -moz-appearance: none;
-  -moz-box-orient: vertical;
-  visibility: visible !important;
   list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.png");
   -moz-image-region: rect(0px, 378px, 18px, 360px);
-  border: 0;
-  margin: 3px 0 1px;
-  -moz-margin-end: 1px;
-  padding: 0 4px;
-  background: rgba(151, 152, 153, .05)
-              -moz-linear-gradient(rgba(251, 252, 253, .95),
-              rgba(246, 247, 248, .47) 49%, rgba(231, 232, 233, .45) 51%,
-              rgba(225, 226, 229, .3));
-  border-radius: 3.5px;
-  border: 1px solid;
-  border-color: rgba(0, 0, 0, .12) rgba(0, 0, 0, .19) rgba(0, 0, 0, .38);
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3) inset,
-              0 0 0 2px rgba(255, 255, 255, .1) inset;
 }
 
-#qfb-show-filter-bar:not([style="visibility: hidden;"]):not(:active):hover {
-  background-color: hsla(190, 60%, 70%, .5);
-  border-color: hsla(190, 50%, 65%, .8) hsla(190, 50%, 50%, .8)
-                hsla(190, 50%, 40%, .8);
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3) inset,
-              0 0 0 2px rgba(255, 255, 255, .1) inset,
-              0 0 5px hsl(190, 90%, 80%);
-  -moz-transition: background-color .4s ease-in,
-                   border-color .3s ease-in,
-                   box-shadow .3s ease-in;
-}
-
-#qfb-show-filter-bar:not([style="visibility: hidden;"]):hover:active,
-#qfb-show-filter-bar:not([style="visibility: hidden;"])[checked="true"] {
-  background-color: transparent;
-  border-color: rgba(0, 0, 0, .65) rgba(0, 0, 0, .55) rgba(0, 0, 0, .5);
-  box-shadow: 0 0 9px rgba(0, 0, 0, .4) inset,
-              0 0 3px rgba(0, 0, 0, .4) inset,
-              0 1px 0 rgba(255, 255, 255, .4);
-  text-shadow: none;
-}
-
-#tabbar-toolbar > #qfb-show-filter-bar[style="visibility: hidden;"] {
-  -moz-user-input: none;
-  opacity: .4;
-}
-
-/* ::::: QFB button on main toolbar ::::: */
-
-#mail-toolbox #qfb-show-filter-bar {
-  margin: 1px 3px;
-  padding: 1px 5px;
-  color: ButtonText;
-  text-shadow: 0 0 3px white;
-}
-
-#mail-toolbox #qfb-show-filter-bar[style="visibility: hidden;"] {
-  -moz-user-input: none;
-  color: GrayText;
-  text-shadow: none;
-  opacity: .8;
-}
-
-toolbox[labelalign="end"] #qfb-show-filter-bar {
-  -moz-box-orient: horizontal;
-}
-
-#mail-toolbox #qfb-show-filter-bar > .toolbarbutton-icon {
-  padding: 0;
-}
-
-/* lesser transparency on Glass background */
-
-@media all and (-moz-windows-compositor) {
-  #qfb-show-filter-bar:not(:-moz-lwtheme) {
-    background-color: rgba(227, 237, 246, .7);
-  }
-
-  #qfb-show-filter-bar:not(:-moz-lwtheme):not([style="visibility: hidden;"]):not([checked="true"]):not(:active):hover {
-    background-color: rgba(136, 197, 213, .85);
-  }
-}
-
-#qfb-show-filter-bar > .toolbarbutton-icon {
-  padding: 0 3px;
+#tabbar-toolbar #qfb-show-filter-bar {
+  padding-left: 4px !important;
+  padding-right: 4px !important;
 }
 
 /* :::: Filter Bar :::: */

mail/themes/qute/mail/quickFilterBar.css

@@ -3,13 +3,8 @@
 /* :::: Filter Tab Bar Button :::: */
 
 #qfb-show-filter-bar {
-  -moz-box-orient: vertical;
-  visibility: visible !important;
-  min-width: 34px;
   list-style-image: url("chrome://messenger/skin/icons/mail-toolbar-small.png");
   -moz-image-region: rect(0px 336px 16px 320px);
-  margin: 1px 2px;
-  padding: 3px 4px;
 }
 
 toolbar[iconsize="large"] #qfb-show-filter-bar {
@@ -17,23 +12,18 @@ toolbar[iconsize="large"] #qfb-show-filter-bar {
   -moz-image-region: rect(0px 504px 24px 480px);
 }
 
-#qfb-show-filter-bar > .toolbarbutton-icon {
-  -moz-margin-end: 0;
-  padding: 0 3px;
-}
-
-#qfb-show-filter-bar[style="visibility: hidden;"] {
-  -moz-appearance: none;
-  -moz-user-input: none;
+#qfb-show-filter-bar[disabled="true"] {
   -moz-image-region: rect(32px 336px 48px 320px);
-  border-width: 0;
-  background: none;
 }
 
-toolbar[iconsize="large"] #qfb-show-filter-bar[style="visibility: hidden;"] {
+toolbar[iconsize="large"] #qfb-show-filter-bar[disabled="true"] {
   -moz-image-region: rect(48px 504px 72px 480px);
 }
 
+#qfb-show-filter-bar > .toolbarbutton-icon {
+  padding: 0 3px;
+}
+
 /* ::::: QFB button on main toolbar ::::: */
 
 #mail-toolbox #qfb-show-filter-bar {