Bug 534166 - Disabled arrow buttons in menus should be hidden. r=dao

--HG--
extra : rebase_source : 4db953550010a7033874ade0193fb03b9cb05c35

toolkit/themes/pinstripe/global/global.css

@@ -345,3 +345,32 @@ notification > button > .button-box > .button-text {
 .autoscroller[scrolldir="EW"] {
   background-position: right bottom;
 }
+
+/* autorepeatbuttons in menus */
+
+.popup-internal-box > autorepeatbutton {
+  height: 15px;
+  position: relative;
+  /* Here we're using a little magic.
+   * The arrow button is supposed to overlay the scrollbox, blocking
+   * everything under it from reaching the screen. However, the menu background
+   * is slightly transparent, so how can we block something completely without
+   * messing up the transparency? It's easy: The native theming of the
+   * "menuitem" appearance uses CGContextClearRect before drawing, which
+   * clears everything under it.
+   * Without help from native theming this effect wouldn't be achievable.
+   */
+  -moz-appearance: menuitem;
+}
+
+.popup-internal-box > .autorepeatbutton-up {
+  margin-bottom: -15px;
+}
+
+.popup-internal-box > .autorepeatbutton-down {
+  margin-top: -15px;
+}
+
+.popup-internal-box > autorepeatbutton[disabled="true"] {
+  visibility: collapse;
+}

toolkit/themes/pinstripe/global/scrollbox.css

@@ -31,13 +31,13 @@
 }
 
 /* Vertical enabled */
-.autorepeatbutton-up {
+.autorepeatbutton-up:not([orient="horizontal"]) {
   list-style-image: url("chrome://global/skin/scrollbox/autorepeat-arrow-up.gif");
   -moz-image-region: auto; /* cut off inheritance */
   padding-bottom: 5px;
 }
 
-.autorepeatbutton-down {
+.autorepeatbutton-down:not([orient="horizontal"]) {
   list-style-image: url("chrome://global/skin/scrollbox/autorepeat-arrow-dn.gif");
   -moz-image-region: auto; /* cut off inheritance */
   padding-top: 5px;
@@ -83,5 +83,4 @@ autorepeatbutton {
   -moz-box-align: center;
   -moz-box-pack: center;
   padding: 1px;
-  margin: 1px 2px;
 }