Bug 346931 - code cleanup: remove <xul:hbox style="position: relative;">. Patch by Dão Gottwald <dao@design-noir.de>. r=mano.

toolkit/content/widgets/tabbrowser.xml

@@ -2520,38 +2520,17 @@
         <children/>
       </xul:scrollbox>
       <xul:stack align="center" pack="end" class="scrollbutton-down-stack">
-        <!-- XXXsspitzer hack
-             this extra hbox with position: relative
-             is needed to work around two bugs.
-             see bugs #346307 and #346035 
-        -->
-        <xul:hbox style="position: relative;" class="scrollbutton-rel-box">
-          <xul:hbox flex="1" class="scrollbutton-down-box" 
-                             collapsed="true" anonid="down-box"/>
-        </xul:hbox>
-        <!-- XXXsspitzer hack
-             this extra hbox with position: relative
-             is needed to work around two bugs.
-             see bugs #346307 and #346035 
-        -->
-        <xul:hbox style="position: relative;" class="scrollbutton-rel-box">
-          <xul:hbox flex="1" class="scrollbutton-down-box-animate" 
-                             collapsed="true" anonid="down-box-animate"/>
-        </xul:hbox>
-        <!-- XXXsspitzer hack
-             this extra hbox with position: relative
-             is needed to work around two bugs.
-             see bugs #346307 and #346035 
-        -->
-        <xul:hbox style="position: relative;" class="scrollbutton-rel-box">
-          <xul:toolbarbutton class="scrollbutton-down" collapsed="true"
-                             xbl:inherits="orient"
-                             anonid="scrollbutton-down"
-                             onmousedown="_startScroll(1);"
-                             onmouseup="_stopScroll();"
-                             onmouseout="_stopScroll();"
-                             chromedir="&locale.dir;"/>
-        </xul:hbox>
+        <xul:hbox flex="1" class="scrollbutton-down-box" 
+                           collapsed="true" anonid="down-box"/>
+        <xul:hbox flex="1" class="scrollbutton-down-box-animate" 
+                           collapsed="true" anonid="down-box-animate"/>
+        <xul:toolbarbutton class="scrollbutton-down" collapsed="true"
+                           xbl:inherits="orient"
+                           anonid="scrollbutton-down"
+                           onmousedown="_startScroll(1);"
+                           onmouseup="_stopScroll();"
+                           onmouseout="_stopScroll();"
+                           chromedir="&locale.dir;"/>
       </xul:stack>
     </content>
     <implementation>
@@ -2618,37 +2597,16 @@
         <children includes="tab"/>
       </xul:arrowscrollbox>
       <xul:stack align="center" pack="end" class="tabs-alltabs-stack">
-        <!-- XXXsspitzer hack
-             this extra hbox with position: relative
-             is needed to work around two bugs.
-             see bugs #346307 and #346035 
-        -->
-        <xul:hbox style="position: relative;">
-          <xul:hbox flex="1" class="tabs-alltabs-box" anonid="alltabs-box"/>
-        </xul:hbox>
-        <!-- XXXsspitzer hack
-             this extra hbox with position: relative
-             is needed to work around two bugs.
-             see bugs #346307 and #346035 
-        -->
-        <xul:hbox style="position: relative;">
-          <xul:hbox flex="1" class="tabs-alltabs-box-animate" 
-                    anonid="alltabs-box-animate"/>
-        </xul:hbox>
-        <!-- XXXsspitzer hack
-             this extra hbox with position: relative
-             is needed to work around two bugs.
-             see bugs #346307 and #346035 
-        -->
-        <xul:hbox style="position: relative;">
-          <xul:toolbarbutton class="tabs-alltabs-button" type="menu"
-                             anonid="alltabs-button"
-                             tooltipstring="&listAllTabs.label;">
-            <xul:menupopup class="tabs-alltabs-popup"
-                           anonid="alltabs-popup" 
-                           position="after_end"/>
+        <xul:hbox flex="1" class="tabs-alltabs-box" anonid="alltabs-box"/>
+        <xul:hbox flex="1" class="tabs-alltabs-box-animate" 
+                  anonid="alltabs-box-animate"/>
+        <xul:toolbarbutton class="tabs-alltabs-button" type="menu"
+                           anonid="alltabs-button"
+                           tooltipstring="&listAllTabs.label;">
+          <xul:menupopup class="tabs-alltabs-popup"
+                         anonid="alltabs-popup" 
+                         position="after_end"/>
         </xul:toolbarbutton>
-        </xul:hbox>
       </xul:stack>
       <xul:hbox class="tabs-closebutton-box" align="center" pack="end" anonid="tabstrip-closebutton">
         <xul:toolbarbutton class="close-button tabs-closebutton"/>

toolkit/themes/pinstripe/global/browser.css

@@ -272,7 +272,7 @@ tabbrowser > tabbox > tabpanels {
   margin-top: 4px;
 }
 
-.scrollbutton-rel-box > .scrollbutton-down-box {
+.tabbrowser-arrowscrollbox > stack > .scrollbutton-down-box {
   margin: 2px 0px 3px 0px;
   width: 18px;
   height: 18px;
@@ -281,7 +281,7 @@ tabbrowser > tabbox > tabpanels {
   opacity: 0.65;
 }
 
-.scrollbutton-rel-box > .scrollbutton-down-box-animate {
+.tabbrowser-arrowscrollbox > stack > .scrollbutton-down-box-animate {
   margin: 2px 0px 3px 0px;
   width: 18px;
   height: 18px;
@@ -290,7 +290,7 @@ tabbrowser > tabbox > tabpanels {
   opacity: 0.0;
 }
 
-.scrollbutton-rel-box > .scrollbutton-down {
+.tabbrowser-arrowscrollbox > stack > .scrollbutton-down {
   margin: 2px 0px 3px 0px;
   width: 18px;
   height: 18px;
@@ -301,21 +301,21 @@ tabbrowser > tabbox > tabpanels {
   -moz-image-region: rect(0, 11px, 14px, 0);
 }
 
-.scrollbutton-rel-box > .scrollbutton-down[disabled="true"] {
+.tabbrowser-arrowscrollbox > stack > .scrollbutton-down[disabled="true"] {
   -moz-image-region: rect(0, 33px, 14px, 22px);
 }
 
-.scrollbutton-rel-box > .scrollbutton-down:not([disabled="true"]):hover {
+.tabbrowser-arrowscrollbox > stack > .scrollbutton-down:not([disabled="true"]):hover {
   background-image: url("chrome://global/skin/tab-arrow-end-bkgnd.png") !important;
   background-repeat: no-repeat;
   -moz-image-region: rect(0, 22px, 14px, 11px);
 }
 
-.scrollbutton-rel-box > .scrollbutton-down:not([disabled="true"]):hover:active {
+.tabbrowser-arrowscrollbox > stack > .scrollbutton-down:not([disabled="true"]):hover:active {
   -moz-image-region: rect(0, 44px, 14px, 33px);
 }
 
-.scrollbutton-rel-box > .scrollbutton-down > .toolbarbutton-icon {
+.tabbrowser-arrowscrollbox > stack > .scrollbutton-down > .toolbarbutton-icon {
   margin-top: 4px;
   -moz-margin-start: 1px;
 }

toolkit/themes/pinstripe/global/globalBindings.xml

@@ -45,38 +45,17 @@
               <children/>
             </xul:arrowscrollbox>
             <xul:stack align="center" pack="end">
-              <!-- XXXsspitzer hack
-                   this extra hbox with position: relative
-                   is needed to work around two bugs.
-                   see bugs #346307 and #346035 
-              -->
-              <xul:hbox style="position: relative;">
-                <xul:hbox flex="1" class="tabs-alltabs-box" 
-                          anonid="alltabs-box"/>
-              </xul:hbox>
-              <!-- XXXsspitzer hack
-                   this extra hbox with position: relative
-                   is needed to work around two bugs.
-                   see bugs #346307 and #346035 
-              -->
-              <xul:hbox style="position: relative;">
-                <xul:hbox flex="1" class="tabs-alltabs-box-animate" 
-                          anonid="alltabs-box-animate"/>
-              </xul:hbox>
-              <!-- XXXsspitzer hack
-                   this extra hbox with position: relative
-                   is needed to work around two bugs.
-                   see bugs #346307 and #346035 
-              -->
-              <xul:hbox style="position: relative;">
-                <xul:toolbarbutton class="tabs-alltabs-button"
-                                   type="menu"
-                                   anonid="alltabs-button"
-                                   tooltipstring="&listAllTabs.label;">
-                  <xul:menupopup class="tabs-alltabs-popup"
-                                 anonid="alltabs-popup" position="after_end"/>
-                </xul:toolbarbutton>
-              </xul:hbox>
+              <xul:hbox flex="1" class="tabs-alltabs-box" 
+                        anonid="alltabs-box"/>
+              <xul:hbox flex="1" class="tabs-alltabs-box-animate" 
+                        anonid="alltabs-box-animate"/>
+              <xul:toolbarbutton class="tabs-alltabs-button"
+                                 type="menu"
+                                 anonid="alltabs-button"
+                                 tooltipstring="&listAllTabs.label;">
+                <xul:menupopup class="tabs-alltabs-popup"
+                               anonid="alltabs-popup" position="after_end"/>
+              </xul:toolbarbutton>
             </xul:stack>
             <xul:hbox class="tabs-closebutton-box" align="center" pack="end" anonid="tabstrip-closebutton">
               <xul:toolbarbutton class="close-button tabs-closebutton"/>

toolkit/themes/winstripe/global/browser.css

@@ -301,7 +301,7 @@ tabpanels {
   height: 23px;
 }
 
-.scrollbutton-rel-box > .scrollbutton-down-box {
+.tabbrowser-arrowscrollbox > stack > .scrollbutton-down-box {
   -moz-appearance: none !important;
   border: none !important;
   width: 18px;
@@ -311,31 +311,31 @@ tabpanels {
   -moz-border-radius-topleft: 4px;
 }
 
-.tabbrowser-arrowscrollbox[chromedir="rtl"] > stack > .scrollbutton-rel-box > .scrollbutton-down-box {
+.tabbrowser-arrowscrollbox[chromedir="rtl"] > stack > .scrollbutton-down-box {
   background-image: url("chrome://global/skin/icons/tab-arrow-start-bkgnd-enabled.png");
   -moz-border-radius-topleft: 0px;
   -moz-border-radius-topright: 4px;
 }
 
-.scrollbutton-rel-box > .scrollbutton-down-box[disabled="true"] {
+.tabbrowser-arrowscrollbox > stack > .scrollbutton-down-box[disabled="true"] {
   background-image: url("chrome://global/skin/icons/tab-arrow-end-bkgnd-disabled.png");
 }
 
-.tabbrowser-arrowscrollbox[chromedir="rtl"] > stack > .scrollbutton-rel-box > .scrollbutton-down-box[disabled="true"] {
+.tabbrowser-arrowscrollbox[chromedir="rtl"] > stack > .scrollbutton-down-box[disabled="true"] {
   background-image: url("chrome://global/skin/icons/tab-arrow-start-bkgnd-disabled.png");
 }
 
-.scrollbutton-rel-box > .scrollbutton-down-box-animate {
+.tabbrowser-arrowscrollbox > stack > .scrollbutton-down-box-animate {
   background-image: url("chrome://global/skin/icons/tab-arrow-end-bkgnd-animate.png");
   background-repeat: no-repeat;
   opacity: 0.0;
 }
 
-.tabbrowser-arrowscrollbox[chromedir="rtl"] > stack > .scrollbutton-rel-box > .scrollbutton-down-box-animate {
+.tabbrowser-arrowscrollbox[chromedir="rtl"] > stack > .scrollbutton-down-box-animate {
   background-image: url("chrome://global/skin/icons/tab-arrow-start-bkgnd-animate.png");
 }
 
-.scrollbutton-rel-box > .scrollbutton-down {
+.tabbrowser-arrowscrollbox > stack > .scrollbutton-down {
   -moz-appearance: none !important;
   border: none !important;
   width: 18px;
@@ -345,30 +345,30 @@ tabpanels {
   padding: 0px;
 }
 
-.tabbrowser-arrowscrollbox[chromedir="rtl"] > stack > .scrollbutton-rel-box > .scrollbutton-down {
+.tabbrowser-arrowscrollbox[chromedir="rtl"] > stack > .scrollbutton-down {
   list-style-image: url("chrome://global/skin/icons/tab-arrow-start.png");
 }
 
-.scrollbutton-rel-box > .scrollbutton-down[disabled="true"] {
+.tabbrowser-arrowscrollbox > stack > .scrollbutton-down[disabled="true"] {
   -moz-image-region: rect(0, 33px, 14px, 22px);
 }
 
-.scrollbutton-rel-box > .scrollbutton-down:not([disabled="true"]):hover {
+.tabbrowser-arrowscrollbox > stack > .scrollbutton-down:not([disabled="true"]):hover {
   -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 {
+.tabbrowser-arrowscrollbox[chromedir="rtl"] > stack > .scrollbutton-down:not([disabled="true"]):hover {
   background-image: url("chrome://global/skin/icons/tab-arrow-start-bkgnd-hover.png");
 }
 
-.scrollbutton-rel-box > .scrollbutton-down:not([disabled="true"]):hover:active {
+.tabbrowser-arrowscrollbox > stack > .scrollbutton-down:not([disabled="true"]):hover:active {
   -moz-image-region: rect(0, 44px, 14px, 33px);
 }
 
-.scrollbutton-rel-box > .scrollbutton-down > .toolbarbutton-icon {
+.tabbrowser-arrowscrollbox > stack > .scrollbutton-down > .toolbarbutton-icon {
   margin: 6px 0px 0px 1px;
 }
 

toolkit/themes/winstripe/global/globalBindings.xml

@@ -93,38 +93,17 @@
               <children/>
             </xul:arrowscrollbox>
             <xul:stack align="center" pack="end" chromedir="&locale.dir;">
-              <!-- XXXsspitzer hack
-                   this extra hbox with position: relative
-                   is needed to work around two bugs.
-                   see bugs #346307 and #346035 
-              -->
-              <xul:hbox style="position: relative;">
-                <xul:hbox flex="1"
-                          class="tabs-alltabs-box"
-                          anonid="alltabs-box"/>
-              </xul:hbox>
-              <!-- XXXsspitzer hack
-                   this extra hbox with position: relative
-                   is needed to work around two bugs.
-                   see bugs #346307 and #346035 
-              -->
-              <xul:hbox style="position: relative;">
-                <xul:hbox flex="1" class="tabs-alltabs-box-animate"
-                          anonid="alltabs-box-animate"/>
-              </xul:hbox>
-              <!-- XXXsspitzer hack
-                   this extra hbox with position: relative
-                   is needed to work around two bugs.
-                   see bugs #346307 and #346035
-              -->
-              <xul:hbox style="position: relative;">
-                <xul:toolbarbutton class="tabs-alltabs-button" type="menu"
-                                   anonid="alltabs-button" 
-                                   tooltipstring="&listAllTabs.label;">
-                  <xul:menupopup class="tabs-alltabs-popup"
-                                 anonid="alltabs-popup" position="after_end"/>
-                </xul:toolbarbutton>
-              </xul:hbox>
+              <xul:hbox flex="1"
+                        class="tabs-alltabs-box"
+                        anonid="alltabs-box"/>
+              <xul:hbox flex="1" class="tabs-alltabs-box-animate"
+                        anonid="alltabs-box-animate"/>
+              <xul:toolbarbutton class="tabs-alltabs-button" type="menu"
+                                 anonid="alltabs-button" 
+                                 tooltipstring="&listAllTabs.label;">
+                <xul:menupopup class="tabs-alltabs-popup"
+                               anonid="alltabs-popup" position="after_end"/>
+              </xul:toolbarbutton>
             </xul:stack>
             <xul:hbox class="tabs-closebutton-box" align="center" pack="end" anonid="tabstrip-closebutton">
               <xul:toolbarbutton class="close-button tabs-closebutton"/>