Bug 593967 - Add more elements into tabbrowser tabs for easier stylability. r=gavin

browser/base/content/browser.css

@@ -37,15 +37,15 @@ tabbrowser {
   min-width: 1px;
 }
 
-.tabbrowser-tab:not([fadein]):not([pinned]) > .tab-text,
+.tab-label:not([fadein]):not([pinned]),
-.tabbrowser-tab:not([fadein]):not([pinned]) > .tab-icon-image,
+.tab-icon-image:not([fadein]):not([pinned]),
-.tabbrowser-tab:not([fadein]):not([pinned]) > .tab-close-button {
+.tab-close-button:not([fadein]):not([pinned]) {
   opacity: 0 !important;
 }
 
-.tabbrowser-tab > .tab-text,
+.tab-label,
-.tabbrowser-tab > .tab-icon-image,
+.tab-icon-image,
-.tabbrowser-tab > .tab-close-button {
+.tab-close-button {
   -moz-transition: opacity .25s;
 }
 
@@ -54,14 +54,6 @@ tabbrowser {
   display: block; /* position:fixed already does this (bug 579776), but let's be explicit */
 }
 
-.tabbrowser-tab[pinned] > .tab-text {
-  display: none;
-}
-
-.tabbrowser-tab[pinned] > .tab-icon-image {
-  vertical-align: middle;
-}
-
 #alltabs-popup {
   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-alltabs-popup");
 }

browser/base/content/browser.xul

@@ -415,7 +415,7 @@
       <stack id="allTabs-stack">
         <vbox id="allTabs-container"><hbox/></vbox>
         <toolbarbutton id="allTabs-tab-close-button"
-                       class="tab-close-button"
+                       class="tabs-closebutton"
                        oncommand="allTabs.closeTab(event);"
                        tooltiptext="&closeCmd.label;"
                        style="visibility:hidden"/>

browser/base/content/tabbrowser.css

@@ -11,11 +11,25 @@
   display: none;
 }
 
-.tabbrowser-tabs:not([closebuttons="noclose"]):not([closebuttons="closeatend"]) > .tabbrowser-tab[selected="true"]:not([pinned]) > .tab-close-button,
+.tabbrowser-tabs:not([closebuttons="noclose"]):not([closebuttons="closeatend"]) > * > * > * .tab-close-button:not([pinned])[selected="true"],
-.tabbrowser-tabs[closebuttons="alltabs"] > .tabbrowser-tab:not([pinned]) > .tab-close-button {
+.tabbrowser-tabs[closebuttons="alltabs"] > * > * > * > .tab-close-button:not([pinned]) {
   display: -moz-box;
 }
 
+.tab-close-button[selected="true"] {
+  /* Make this button focusable so clicking on it will not focus the tab while
+     it's getting closed */
+  -moz-user-focus: normal;
+}
+
+.tab-label[pinned] {
+  display: none;
+}
+
+.tab-stack {
+  vertical-align: middle; /* for pinned tabs */
+}
+
 tabpanels {
   background-color: white;
 }

browser/base/content/tabbrowser.xml

@@ -3329,17 +3329,22 @@
     </resources>
 
     <content context="tabContextMenu" closetabtext="&closeTab.label;">
-      <xul:image xbl:inherits="validate,src=image"
+      <xul:stack class="tab-stack" flex="1">
-                 class="tab-icon-image"
+        <xul:hbox class="tab-content" align="center">
-                 role="presentation"/>
+          <xul:image xbl:inherits="validate,src=image,fadein,pinned,busy,stalled,progress,selected"
-      <xul:label flex="1"
+                     class="tab-icon-image"
-                 xbl:inherits="value=label,crop,accesskey"
+                     role="presentation"/>
-                 class="tab-text"
+          <xul:label flex="1"
-                 role="presentation"/>
+                     xbl:inherits="value=label,crop,accesskey,fadein,pinned,selected"
-      <xul:toolbarbutton anonid="close-button"
+                     class="tab-text tab-label"
-                         tabindex="-1"
+                     role="presentation"/>
-                         clickthrough="never"
+          <xul:toolbarbutton anonid="close-button"
-                         class="tab-close-button"/>
+                             xbl:inherits="fadein,pinned,selected"
+                             tabindex="-1"
+                             clickthrough="never"
+                             class="tab-close-button"/>
+        </xul:hbox>
+      </xul:stack>
     </content>
 
     <implementation>

browser/themes/gnomestripe/browser/browser.css

@@ -1432,16 +1432,7 @@ statusbarpanel#statusbar-display {
   min-height: 18px; /* corresponds to the max. height of non-textual tab contents, i.e. the tab close button */
 }
 
-.tabbrowser-tab > .tab-text {
+.tabbrowser-tab:focus > .tab-stack {
-  border: 1px dotted transparent;
-  margin: -1px !important; /* let the border not consume any space, like outline */
-}
-
-.tabbrowser-tab:focus > .tab-text {
-  border: 1px dotted -moz-DialogText;
-}
-
-.tabbrowser-tab[pinned]:focus > .tab-icon-image {
   outline: 1px dotted;
 }
 
@@ -1453,41 +1444,41 @@ statusbarpanel#statusbar-display {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
-.tabbrowser-tab[pinned] > .tab-icon-image,
+.tab-icon-image[pinned],
 .tabs-newtab-button > .toolbarbutton-icon {
   -moz-margin-start: 2px;
   -moz-margin-end: 2px;
 }
 
-.tabbrowser-tab[busy] > .tab-icon-image {
+.tab-icon-image[busy] {
   list-style-image: url("chrome://browser/skin/tabbrowser/progress.png") !important;
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
-.tabbrowser-tab[busy][stalled] > .tab-icon-image {
+.tab-icon-image[busy][stalled] {
   list-style-image: url("chrome://browser/skin/tabbrowser/progress-pulsing.png") !important;
 }
-.tabbrowser-tab[busy][progress="1"] > .tab-icon-image {
+.tab-icon-image[busy][progress="1"] {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
-.tabbrowser-tab[busy][progress="2"] > .tab-icon-image {
+.tab-icon-image[busy][progress="2"] {
   -moz-image-region: rect(0, 48px, 16px, 32px);
 }
-.tabbrowser-tab[busy][progress="3"] > .tab-icon-image {
+.tab-icon-image[busy][progress="3"] {
   -moz-image-region: rect(0, 64px, 16px, 48px);
 }
-.tabbrowser-tab[busy][progress="4"] > .tab-icon-image {
+.tab-icon-image[busy][progress="4"] {
   -moz-image-region: rect(0, 80px, 16px, 64px);
 }
-.tabbrowser-tab[busy][progress="5"] > .tab-icon-image {
+.tab-icon-image[busy][progress="5"] {
   -moz-image-region: rect(0, 96px, 16px, 80px);
 }
-.tabbrowser-tab[busy][progress="6"] > .tab-icon-image {
+.tab-icon-image[busy][progress="6"] {
   -moz-image-region: rect(0, 112px, 16px, 96px);
 }
-.tabbrowser-tab[busy][progress="7"] > .tab-icon-image {
+.tab-icon-image[busy][progress="7"] {
   -moz-image-region: rect(0, 128px, 16px, 112px);
 }
-.tabbrowser-tab[busy][progress="8"] > .tab-icon-image {
+.tab-icon-image[busy][progress="8"] {
   -moz-image-region: rect(0, 144px, 16px, 128px);
 }
 
@@ -1531,12 +1522,6 @@ statusbarpanel#statusbar-display {
   -moz-margin-end: -1px;
 }
 
-.tabbrowser-tab[selected="true"] > .tab-close-button {
-  /* Make this button focusable so clicking on it will not focus the tab while
-     it's getting closed */
-  -moz-user-focus: normal;
-}
-
 /* Tabstrip new tab button */
 .tabs-newtab-button,
 #TabsToolbar > #new-tab-button ,

browser/themes/pinstripe/browser/browser.css

@@ -70,7 +70,7 @@
 .tabbrowser-tab:-moz-lwtheme[selected="true"] {
   background-color: transparent !important;
 }
-.tabbrowser-tab:-moz-lwtheme:not([selected="true"]):not(:hover) > .tab-text {
+.tabbrowser-tab:not(:hover) > * > * > .tab-label:not([selected="true"]):-moz-lwtheme {
   opacity: .8;
 }
 
@@ -1482,43 +1482,43 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   list-style-image: url("chrome://global/skin/tree/item.png");
 }
 
-.tabbrowser-tab[busy] > .tab-icon-image {
+.tab-icon-image[busy] {
   list-style-image: url("chrome://browser/skin/tabbrowser/progress.png") !important;
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
-.tabbrowser-tab[busy][stalled] > .tab-icon-image {
+.tab-icon-image[busy][stalled] {
   list-style-image: url("chrome://browser/skin/tabbrowser/progress-pulsing.png") !important;
 }
-.tabbrowser-tab[busy][progress="1"] > .tab-icon-image {
+.tab-icon-image[busy][progress="1"] {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
-.tabbrowser-tab[busy][progress="2"] > .tab-icon-image {
+.tab-icon-image[busy][progress="2"] {
   -moz-image-region: rect(0, 48px, 16px, 32px);
 }
-.tabbrowser-tab[busy][progress="3"] > .tab-icon-image {
+.tab-icon-image[busy][progress="3"] {
   -moz-image-region: rect(0, 64px, 16px, 48px);
 }
-.tabbrowser-tab[busy][progress="4"] > .tab-icon-image {
+.tab-icon-image[busy][progress="4"] {
   -moz-image-region: rect(0, 80px, 16px, 64px);
 }
-.tabbrowser-tab[busy][progress="5"] > .tab-icon-image {
+.tab-icon-image[busy][progress="5"] {
   -moz-image-region: rect(0, 96px, 16px, 80px);
 }
-.tabbrowser-tab[busy][progress="6"] > .tab-icon-image {
+.tab-icon-image[busy][progress="6"] {
   -moz-image-region: rect(0, 112px, 16px, 96px);
 }
-.tabbrowser-tab[busy][progress="7"] > .tab-icon-image {
+.tab-icon-image[busy][progress="7"] {
   -moz-image-region: rect(0, 128px, 16px, 112px);
 }
-.tabbrowser-tab[busy][progress="8"] > .tab-icon-image {
+.tab-icon-image[busy][progress="8"] {
   -moz-image-region: rect(0, 144px, 16px, 128px);
 }
 
-.tabbrowser-tab:not(:hover):not([selected="true"]) > .tab-icon-image {
+.tabbrowser-tab:not(:hover) > * > * > .tab-icon-image:not([selected="true"]) {
   opacity: .6;
 }
 
-.tabbrowser-tab > .tab-text {
+.tab-label {
   margin-top: 1px;
   margin-bottom: 0;
   font: message-box;
@@ -1597,7 +1597,7 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   background-image: -moz-linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.58));
 }
 
-.tabbrowser-tab:focus > .tab-text {
+.tabbrowser-tab:focus > .tab-stack {
   box-shadow: @focusRingShadow@;
 }
 
@@ -1680,12 +1680,6 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   list-style-image: url("chrome://global/skin/icons/closetab-active.png");
 }
 
-.tabbrowser-tab[selected="true"] > .tab-close-button {
-  /* Make this button focusable so clicking on it will not focus the tab while
-     it's getting closed */
-  -moz-user-focus: normal;
-}
-
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {
   -moz-image-region: rect(0, 11px, 17px, 0);

browser/themes/winstripe/browser/browser.css

@@ -1479,35 +1479,35 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   background-image: -moz-linear-gradient(rgba(255,0,0,.5), rgba(255,0,0,.5)) !important;
 }
 
-.tabbrowser-tab[busy] > .tab-icon-image {
+.tab-icon-image[busy] {
   list-style-image: url("chrome://browser/skin/tabbrowser/progress.png") !important;
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
-.tabbrowser-tab[busy][stalled] > .tab-icon-image {
+.tab-icon-image[busy][stalled] {
   list-style-image: url("chrome://browser/skin/tabbrowser/progress-pulsing.png") !important;
 }
-.tabbrowser-tab[busy][progress="1"] > .tab-icon-image {
+.tab-icon-image[busy][progress="1"] {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
-.tabbrowser-tab[busy][progress="2"] > .tab-icon-image {
+.tab-icon-image[busy][progress="2"] {
   -moz-image-region: rect(0, 48px, 16px, 32px);
 }
-.tabbrowser-tab[busy][progress="3"] > .tab-icon-image {
+.tab-icon-image[busy][progress="3"] {
   -moz-image-region: rect(0, 64px, 16px, 48px);
 }
-.tabbrowser-tab[busy][progress="4"] > .tab-icon-image {
+.tab-icon-image[busy][progress="4"] {
   -moz-image-region: rect(0, 80px, 16px, 64px);
 }
-.tabbrowser-tab[busy][progress="5"] > .tab-icon-image {
+.tab-icon-image[busy][progress="5"] {
   -moz-image-region: rect(0, 96px, 16px, 80px);
 }
-.tabbrowser-tab[busy][progress="6"] > .tab-icon-image {
+.tab-icon-image[busy][progress="6"] {
   -moz-image-region: rect(0, 112px, 16px, 96px);
 }
-.tabbrowser-tab[busy][progress="7"] > .tab-icon-image {
+.tab-icon-image[busy][progress="7"] {
   -moz-image-region: rect(0, 128px, 16px, 112px);
 }
-.tabbrowser-tab[busy][progress="8"] > .tab-icon-image {
+.tab-icon-image[busy][progress="8"] {
   -moz-image-region: rect(0, 144px, 16px, 128px);
 }
 
@@ -1523,22 +1523,13 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   min-height: 16px; /* corresponds to the max. height of non-textual tab contents, i.e. the favicon */
 }
 
-.tabbrowser-tab[pinned] > .tab-icon-image {
+.tab-icon-image[pinned] {
   -moz-margin-start: 2px;
   -moz-margin-end: 2px;
 }
 
 /* tabbrowser-tab focus ring */
-.tabbrowser-tab > .tab-text {
+.tabbrowser-tab:focus > .tab-stack {
-  border: 1px dotted transparent;
-  margin: -1px !important; /* let the border not consume any space, like outline */
-}
-
-.tabbrowser-tab:focus > .tab-text {
-  border: 1px dotted -moz-DialogText;
-}
-
-.tabbrowser-tab[pinned]:focus > .tab-icon-image {
   outline: 1px dotted;
 }
 
@@ -1561,20 +1552,17 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 }
 
 .tab-close-button:hover,
-.tabbrowser-tab[selected="true"] > .tab-close-button:hover {
+.tab-close-button:hover[selected="true"] {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
 .tab-close-button:hover:active,
-.tabbrowser-tab[selected="true"] > .tab-close-button:hover:active {
+.tab-close-button:hover:active[selected="true"] {
   -moz-image-region: rect(0, 48px, 16px, 32px);
 }
 
-.tabbrowser-tab[selected="true"] > .tab-close-button {
+.tab-close-button[selected="true"] {
   -moz-image-region: rect(0, 16px, 16px, 0);
-  /* Make this button focusable so clicking on it will not focus the tab while
-     it's getting closed */
-  -moz-user-focus: normal;
 }
 
 .tab-close-button:focus {