Backing out the fix for 353757 since it didn't help Ts. a=mconnor.

toolkit/themes/winstripe/global/browser.css

@@ -52,14 +52,14 @@
 .tabbrowser-tab > .tab-image-left {
   width: 8px;
   height: 24px;
-  list-style-image: url("chrome://global/skin/icons/tabs.png");
-  -moz-image-region: rect(75px,8px,99px,0);
+  background: url("chrome://global/skin/icons/tab-left.png") no-repeat;
   background-color: -moz-dialog;
   -moz-border-radius-topleft: 3px;
 }
 
 .tabbrowser-tab[chromedir="rtl"] > .tab-image-left {
-  -moz-image-region: rect(75px,16px,99px,8px);
+  background: url("chrome://global/skin/icons/tab-right.png") no-repeat;
+  background-color: -moz-dialog;
   -moz-border-radius-topleft: 0px;
   -moz-border-radius-topright: 3px;
 }
@@ -67,19 +67,23 @@
 .tabbrowser-tab:not([selected="true"]) > .tab-image-left {
   height: 23px;
   margin-bottom: 1px;
-  -moz-image-region: rect(0,8px,23px,0);
+  background: url("chrome://global/skin/icons/tab-left-bkgnd.png") no-repeat;
+  background-color: -moz-dialog;
 }
 
 .tabbrowser-tab[chromedir="rtl"]:not([selected="true"]) > .tab-image-left {
-  -moz-image-region: rect(0,16px,23px,8px);
+  background: url("chrome://global/skin/icons/tab-right-bkgnd.png") no-repeat;
+  background-color: -moz-dialog;
 }
 
-.tabbrowser-tab:not([selected="true"]):hover > .tab-image-left {
-  -moz-image-region: rect(75px,8px,98px,0);
+.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-left {
+  background: url("chrome://global/skin/icons/tab-left-hover.png") no-repeat;
+  background-color: -moz-dialog;
 }
 
-.tabbrowser-tab[chromedir="rtl"]:not([selected="true"]):hover > .tab-image-left {
-  -moz-image-region: rect(75px,16px,98px,8px);
+.tabbrowser-tab[chromedir="rtl"]:hover:not([selected="true"]) > .tab-image-left {
+  background: url("chrome://global/skin/icons/tab-right-hover.png") no-repeat;
+  background-color: -moz-dialog;
 }
 
 .tabbrowser-tab > .tab-image-middle {
@@ -91,24 +95,26 @@
 .tabbrowser-tab:not([selected="true"]) > .tab-image-middle {
   height: 23px;
   margin-bottom: 1px;
+  background: url("chrome://global/skin/icons/tab-middle-bkgnd.png") repeat-x;
+  background-color: -moz-dialog;
 }
 
-.tabbrowser-tab:not([selected="true"]):not(:hover) > .tab-image-middle {
-  background: url("chrome://global/skin/icons/tab-middle-bkgnd.png") repeat-x;
+.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-middle {
+  background: url("chrome://global/skin/icons/tab-middle-hover.png") repeat-x;
   background-color: -moz-dialog;
 }
 
 .tabbrowser-tab > .tab-image-right {
   width: 8px;
   height: 24px;
-  list-style-image: url("chrome://global/skin/icons/tabs.png");
-  -moz-image-region: rect(75px,16px,99px,8px);
+  background: url("chrome://global/skin/icons/tab-right.png") no-repeat;
   background-color: -moz-dialog;
   -moz-border-radius-topright: 3px;
 }
 
 .tabbrowser-tab[chromedir="rtl"] > .tab-image-right {
-  -moz-image-region: rect(75px,8px,99px,0);
+  background: url("chrome://global/skin/icons/tab-left.png") no-repeat;
+  background-color: -moz-dialog;
   -moz-border-radius-topleft: 3px;
   -moz-border-radius-topright: 0px;
 }
@@ -116,19 +122,23 @@
 .tabbrowser-tab:not([selected="true"]) > .tab-image-right {
   height: 23px;
   margin-bottom: 1px;
-  -moz-image-region: rect(0,16px,23px,8px);
+  background: url("chrome://global/skin/icons/tab-right-bkgnd.png") no-repeat;
+  background-color: -moz-dialog;
 }
 
 .tabbrowser-tab[chromedir="rtl"]:not([selected="true"]) > .tab-image-right {
-  -moz-image-region: rect(0,8px,23px,0);
+  background: url("chrome://global/skin/icons/tab-left-bkgnd.png") no-repeat;
+  background-color: -moz-dialog;
 }
 
-.tabbrowser-tab:not([selected="true"]):hover > .tab-image-right {
-  -moz-image-region: rect(75px,16px,98px,8px);
+.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-right {
+  background: url("chrome://global/skin/icons/tab-right-hover.png") no-repeat;
+  background-color: -moz-dialog;
 }
 
-.tabbrowser-tab[chromedir="rtl"]:not([selected="true"]):hover > .tab-image-right {
-  -moz-image-region: rect(75px,8px,98px,0);
+.tabbrowser-tab[chromedir="rtl"]:hover:not([selected="true"]) > .tab-image-right {
+  background: url("chrome://global/skin/icons/tab-left-hover.png") no-repeat;
+  background-color: -moz-dialog;
 }
 
 .tab-icon-image {
@@ -268,8 +278,8 @@ tabpanels {
   height: 23px;
   -moz-margin-start: 0px;
   -moz-margin-end: 0px;
-  list-style-image: url("chrome://global/skin/icons/tabs.png");
-  -moz-image-region: rect(0,27px,11px,16px);
+  list-style-image: url("chrome://global/skin/icons/tab-arrow-start.png");
+  -moz-image-region: rect(0, 11px, 14px, 0);
   background-repeat: no-repeat;
   background-image: url("chrome://global/skin/icons/tab-arrow-start-bkgnd-enabled.png");
   background-color: -moz-dialog;
@@ -277,42 +287,36 @@ tabpanels {
 }
 
 .tabbrowser-arrowscrollbox[chromedir="rtl"] > .scrollbutton-up {
-  -moz-image-region: rect(11px,27px,22px,16px);
+  list-style-image: url("chrome://global/skin/icons/tab-arrow-end.png");
   background-image: url("chrome://global/skin/icons/tab-arrow-end-bkgnd-enabled.png");
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-topright: 0px;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled="true"] {
-  -moz-image-region: rect(0,49px,11px,38px);
+  -moz-image-region: rect(0, 33px, 14px, 22px);
   background-image: url("chrome://global/skin/icons/tab-arrow-start-bkgnd-disabled.png");
 }
 
 .tabbrowser-arrowscrollbox[chromedir="rtl"] > .scrollbutton-up[disabled="true"] {
-  -moz-image-region: rect(11px,49px,22px,38px);
   background-image: url("chrome://global/skin/icons/tab-arrow-end-bkgnd-disabled.png");
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled="true"]):hover {
-  -moz-image-region: rect(0,38px,11px,27px);
   background-image: url("chrome://global/skin/icons/tab-arrow-start-bkgnd-hover.png");
+  -moz-image-region: rect(0, 22px, 14px, 11px);
 }
 
 .tabbrowser-arrowscrollbox[chromedir="rtl"] > .scrollbutton-up:not([disabled="true"]):hover {
-  -moz-image-region: rect(11px,38px,22px,27px);
   background-image: url("chrome://global/skin/icons/tab-arrow-end-bkgnd-hover.png");
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled="true"]):hover:active {
-  -moz-image-region: rect(0,60px,11px,49px);
-}
-
-.tabbrowser-arrowscrollbox[chromedir="rtl"] > .scrollbutton-up:not([disabled="true"]):hover:active {
-  -moz-image-region: rect(11px,60px,22px,49px);
+  -moz-image-region: rect(0, 44px, 14px, 33px);
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up > .toolbarbutton-icon {    
-  margin: 2px 0px 0px 0px;
+  margin: 6px 0px 0px 0px;
 }                                                                            
 
 .tabbrowser-arrowscrollbox > .scrollbutton-down-stack {
@@ -359,46 +363,37 @@ tabpanels {
   -moz-appearance: none !important;
   border: none !important;
   width: 18px;
-  list-style-image: url("chrome://global/skin/icons/tabs.png");
-  -moz-image-region: rect(11px,27px,22px,16px);
+  list-style-image: url("chrome://global/skin/icons/tab-arrow-end.png");
+  -moz-image-region: rect(0, 11px, 14px, 0);
   margin: 0px;
   padding: 0px;
 }
 
 .tabbrowser-arrowscrollbox[chromedir="rtl"] > stack > .scrollbutton-rel-box > .scrollbutton-down {
-  -moz-image-region: rect(0,27px,11px,16px);
+  list-style-image: url("chrome://global/skin/icons/tab-arrow-start.png");
 }
 
 .scrollbutton-rel-box > .scrollbutton-down[disabled="true"] {
-  -moz-image-region: rect(11px,49px,22px,38px);
-}
-
-.tabbrowser-arrowscrollbox[chromedir="rtl"] > stack > .scrollbutton-rel-box > .scrollbutton-down[disabled="true"] {
-  -moz-image-region: rect(0,49px,11px,38px);
+  -moz-image-region: rect(0, 33px, 14px, 22px);
 }
 
 .scrollbutton-rel-box > .scrollbutton-down:not([disabled="true"]):hover {
-  -moz-image-region: rect(11px,38px,22px,27px);
+  -moz-image-region: rect(0, 22px, 14px, 11px);
   background-image: url("chrome://global/skin/icons/tab-arrow-end-bkgnd-hover.png");
   background-repeat: no-repeat;
   background-position: top left;
 }
 
 .tabbrowser-arrowscrollbox[chromedir="rtl"] > stack > .scrollbutton-rel-box > .scrollbutton-down:not([disabled="true"]):hover {
-  -moz-image-region: rect(0,38px,11px,27px);
   background-image: url("chrome://global/skin/icons/tab-arrow-start-bkgnd-hover.png");
 }
 
 .scrollbutton-rel-box > .scrollbutton-down:not([disabled="true"]):hover:active {
-  -moz-image-region: rect(11px,60px,22px,49px);
-}
-
-.scrollbutton-rel-box[chromedir="rtl"] > .scrollbutton-down:not([disabled="true"]):hover:active {
-  -moz-image-region: rect(0,60px,11px,49px);
+  -moz-image-region: rect(0, 44px, 14px, 33px);
 }
 
 .scrollbutton-rel-box > .scrollbutton-down > .toolbarbutton-icon {
-  margin: 2px 0px 0px 1px;
+  margin: 6px 0px 0px 1px;
 }
 
 /**

toolkit/themes/winstripe/global/globalBindings.xml

@@ -58,9 +58,7 @@
   <binding id="tabbrowser-tab" extends="chrome://global/content/bindings/tabbrowser.xml#tabbrowser-tab">
     <content chromedir="&locale.dir;"
              closetabtext="&closeTab.label;">
-      <xul:vbox class="tab-image-left" align="top" xbl:inherits="selected">
-        <xul:image xbl:inherits="selected"/>
-      </xul:vbox>
+      <xul:hbox class="tab-image-left" xbl:inherits="selected"/>
       <xul:hbox flex="1" class="tab-image-middle" align="center" xbl:inherits="selected">
         <xul:stack class="tab-icon">
           <xul:image xbl:inherits="validate,src=image" class="tab-icon-image"/>
@@ -69,9 +67,7 @@
         <xul:label flex="1" xbl:inherits="value=label,crop,accesskey" crop="right" class="tab-text"/>
       </xul:hbox>
       <xul:toolbarbutton anonid="close-button" class="tab-close-button" tabindex="-1"/>
-      <xul:vbox align="top" class="tab-image-right" xbl:inherits="selected">
-        <xul:image xbl:inherits="selected"/>
-      </xul:vbox>
+        <xul:hbox class="tab-image-right" xbl:inherits="selected"/>
     </content>
   </binding>
   

toolkit/themes/winstripe/global/jar.mn

@@ -90,7 +90,8 @@ classic.jar:
         skin/classic/global/icons/Landscape.png                     (icons/Landscape.png)
         skin/classic/global/icons/Question.png                      (icons/Question.png)        
         skin/classic/global/icons/Restore.gif                       (icons/Restore.gif)
-	skin/classic/global/icons/tabs.png                              (icons/tabs.png)
+	skin/classic/global/icons/tab-arrow-end.png                 (icons/tab-arrow-end.png)
+	skin/classic/global/icons/tab-arrow-start.png               (icons/tab-arrow-start.png)
 	skin/classic/global/icons/tab-arrow-end-bkgnd-hover.png     (icons/tab-arrow-end-bkgnd-hover.png)
 	skin/classic/global/icons/tab-arrow-end-bkgnd-disabled.png  (icons/tab-arrow-end-bkgnd-disabled.png)
 	skin/classic/global/icons/tab-arrow-end-bkgnd-enabled.png   (icons/tab-arrow-end-bkgnd-enabled.png)
@@ -99,8 +100,15 @@ classic.jar:
 	skin/classic/global/icons/tab-arrow-start-bkgnd-disabled.png (icons/tab-arrow-start-bkgnd-disabled.png)
 	skin/classic/global/icons/tab-arrow-start-bkgnd-enabled.png (icons/tab-arrow-start-bkgnd-enabled.png)
 	skin/classic/global/icons/tab-arrow-start-bkgnd-animate.png (icons/tab-arrow-start-bkgnd-animate.png)
+	skin/classic/global/icons/tab-left.png                      (icons/tab-left.png)
 	skin/classic/global/icons/tab-middle.png                    (icons/tab-middle.png)
+	skin/classic/global/icons/tab-right.png                     (icons/tab-right.png)
+	skin/classic/global/icons/tab-left-hover.png                (icons/tab-left-hover.png)
+	skin/classic/global/icons/tab-middle-hover.png              (icons/tab-middle-hover.png)
+	skin/classic/global/icons/tab-right-hover.png               (icons/tab-right-hover.png)
+	skin/classic/global/icons/tab-left-bkgnd.png                (icons/tab-left-bkgnd.png)
 	skin/classic/global/icons/tab-middle-bkgnd.png              (icons/tab-middle-bkgnd.png)
+	skin/classic/global/icons/tab-right-bkgnd.png               (icons/tab-right-bkgnd.png)
         skin/classic/global/icons/tabstrip-bottom.png               (icons/tabstrip-bottom.png)
 	skin/classic/global/icons/tabbrowser-tabs-bkgnd.png         (icons/tabbrowser-tabs-bkgnd.png)
         skin/classic/global/icons/Warning.png                       (icons/Warning.png)