Bug 471921 - use proper CSS instead of first-tab, last-tab and afterselected attributes. r=gavin

toolkit/content/widgets/tabbox.xml

@@ -639,10 +639,14 @@
       <property name="_selected">
         <setter>
           <![CDATA[
-          this.setAttribute("selected", val);
+          if (val)
+            this.setAttribute("selected", "true");
+          else
+            this.removeAttribute("selected");
+
           if (this.previousSibling && this.previousSibling.localName == "tab") {
             if (val)
-              this.previousSibling.setAttribute("beforeselected", val);
+              this.previousSibling.setAttribute("beforeselected", "true");
             else
               this.previousSibling.removeAttribute("beforeselected");
             this.removeAttribute("first-tab");
@@ -652,7 +656,7 @@
 
           if (this.nextSibling && this.nextSibling.localName == "tab") {
             if (val)
-              this.nextSibling.setAttribute("afterselected", val);
+              this.nextSibling.setAttribute("afterselected", "true");
             else
               this.nextSibling.removeAttribute("afterselected");
             this.removeAttribute("last-tab");

toolkit/themes/pinstripe/global/tabbox.css

@@ -35,11 +35,11 @@ tab {
   -moz-appearance: tab;
 }
 
-tab[first-tab=true] {
+tab:first-of-type {
   -moz-padding-start: 2px;
 }
 
-tab[last-tab=true] {
+tab:last-of-type {
   -moz-padding-end: 2px;
 }
 
@@ -116,13 +116,13 @@ tabs.tabs-bottom > tab[beforeselected=true] {
   -moz-margin-end: -2px;
 }
 
-tabbox.tabs-bottom > tabs > tab:not([selected=true])[first-tab=true],
-tabs.tabs-bottom > tab:not([selected=true])[first-tab=true] {
+tabbox.tabs-bottom > tabs > tab:first-of-type:not([selected=true]),
+tabs.tabs-bottom > tab:first-of-type:not([selected=true]) {
   -moz-border-start: 4px solid transparent;
 }
 
-tabbox.tabs-bottom > tabs > tab[selected=true][first-tab=true],
-tabs.tabs-bottom > tab[selected=true][first-tab=true] {
+tabbox.tabs-bottom > tabs > tab:first-of-type[selected=true],
+tabs.tabs-bottom > tab:first-of-type[selected=true] {
   -moz-margin-start: 2px;
 }
 

toolkit/themes/winstripe/global/tabbox.css

@@ -106,19 +106,19 @@ tab:focus > .tab-middle {
   outline: 1px dotted;
 }
 
-tab[beforeselected="true"],
-tab[afterselected="true"][chromedir="rtl"] {
+tab[beforeselected="true"]:not([chromedir="rtl"]),
+tab[selected="true"][chromedir="rtl"] + tab {
   border-right: none;
   -moz-border-radius-topright: 0;
 }
 
-tab[afterselected="true"],
+tab[selected="true"]:not([chromedir="rtl"]) + tab,
 tab[beforeselected="true"][chromedir="rtl"] {
   border-left: none;
   -moz-border-radius-topleft: 0;
 }
 
-tab[first-tab="true"][selected="true"] {
+tab:first-of-type[selected="true"] {
   padding-right: 5px;
   padding-left: 5px;
 }
@@ -148,12 +148,12 @@ tab[first-tab="true"][selected="true"] {
   padding: 4px 6px 1px 6px;
 }
 
-.tab-bottom[beforeselected="true"],
-.tab-bottom[afterselected="true"][chromedir="rtl"] {
+.tab-bottom[beforeselected="true"]:not([chromedir="rtl"]),
+.tab-bottom[selected="true"][chromedir="rtl"] + .tab-bottom {
   -moz-border-radius-bottomright: 0;
 }
 
-.tab-bottom[afterselected="true"],
+.tab-bottom[selected="true"]:not([chromedir="rtl"]) + .tab-bottom,
 .tab-bottom[beforeselected="true"][chromedir="rtl"] {
   -moz-border-radius-bottomleft: 0;
 }

widget/src/xpwidgets/nsWidgetAtomList.h

@@ -72,7 +72,6 @@ WIDGET_ATOM(descending, "descending")
 WIDGET_ATOM(dir, "dir")
 WIDGET_ATOM(disabled, "disabled")
 WIDGET_ATOM(_false, "false")
-WIDGET_ATOM(firsttab, "first-tab")
 WIDGET_ATOM(focused, "focused")
 WIDGET_ATOM(Forward, "Forward")
 WIDGET_ATOM(Home, "Home")
@@ -85,7 +84,6 @@ WIDGET_ATOM(image, "image")
 WIDGET_ATOM(input, "input")
 WIDGET_ATOM(key, "key") // The key element / attribute
 WIDGET_ATOM(label, "label")
-WIDGET_ATOM(lasttab, "last-tab")
 WIDGET_ATOM(max, "max")
 WIDGET_ATOM(maxpos, "maxpos")
 WIDGET_ATOM(menu, "menu") // Represents an XP menu