From 6e16116aa3094441f448c8ac9df910550dfbfe5d Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange@themasta.com>
Date: Mon, 29 Nov 2010 15:18:40 +0100
Subject: [PATCH] Bug 547787 - New style for the tab bar on Mac. r=dao, a=beta8

---
 browser/base/content/browser.xul              |  36 ++
 browser/base/content/tabbrowser.css           |   2 +-
 browser/base/content/tabbrowser.xml           |  12 +-
 browser/themes/pinstripe/browser/browser.css  | 325 ++++++++++++------
 browser/themes/pinstripe/browser/jar.mn       |  12 +-
 .../browser/tabbrowser/tab-bkgnd.png          | Bin 149 -> 0 bytes
 .../tabbrowser/tab-bottom-hover-active.png    | Bin 0 -> 422 bytes
 .../tabbrowser/tab-bottom-normal-active.png   | Bin 0 -> 405 bytes
 .../tabbrowser/tab-bottom-selected-active.png | Bin 0 -> 487 bytes
 .../tabbrowser/tab-top-hover-active.png       | Bin 0 -> 466 bytes
 .../tabbrowser/tab-top-normal-active.png      | Bin 0 -> 464 bytes
 .../tabbrowser/tab-top-selected-active.png    | Bin 0 -> 691 bytes
 .../tabbrowser/tabbar-bottom-bg-active.png    | Bin 0 -> 135 bytes
 .../tabbrowser/tabbar-bottom-bg-inactive.png  | Bin 0 -> 137 bytes
 .../tabbrowser/tabbar-top-bg-active.png       | Bin 0 -> 156 bytes
 .../tabbrowser/tabbar-top-bg-inactive.png     | Bin 0 -> 151 bytes
 .../tabbrowser/tabbrowser-tabs-bkgnd.png      | Bin 155 -> 0 bytes
 17 files changed, 277 insertions(+), 110 deletions(-)
 delete mode 100644 browser/themes/pinstripe/browser/tabbrowser/tab-bkgnd.png
 create mode 100644 browser/themes/pinstripe/browser/tabbrowser/tab-bottom-hover-active.png
 create mode 100644 browser/themes/pinstripe/browser/tabbrowser/tab-bottom-normal-active.png
 create mode 100644 browser/themes/pinstripe/browser/tabbrowser/tab-bottom-selected-active.png
 create mode 100644 browser/themes/pinstripe/browser/tabbrowser/tab-top-hover-active.png
 create mode 100644 browser/themes/pinstripe/browser/tabbrowser/tab-top-normal-active.png
 create mode 100644 browser/themes/pinstripe/browser/tabbrowser/tab-top-selected-active.png
 create mode 100644 browser/themes/pinstripe/browser/tabbrowser/tabbar-bottom-bg-active.png
 create mode 100644 browser/themes/pinstripe/browser/tabbrowser/tabbar-bottom-bg-inactive.png
 create mode 100644 browser/themes/pinstripe/browser/tabbrowser/tabbar-top-bg-active.png
 create mode 100644 browser/themes/pinstripe/browser/tabbrowser/tabbar-top-bg-inactive.png
 delete mode 100644 browser/themes/pinstripe/browser/tabbrowser/tabbrowser-tabs-bkgnd.png

diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index 3346f2c3a514..237198599505 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -987,6 +987,42 @@
     </svg:mask>
   </svg:svg>
 #endif
+#ifdef XP_MACOSX
+  <svg:svg height="0">
+    <svg:mask id="pinstripe-tab-ontop-left-curve-mask" maskContentUnits="userSpaceOnUse">
+      <svg:circle cx="9" cy="3" r="3" fill="white"/>
+      <svg:rect x="9" y="0" width="3" height="3" fill="white"/>
+      <svg:rect x="6" y="3" width="6" height="19" fill="white"/>
+      <svg:rect x="1" y="17" width="5" height="5" fill="white"/>
+      <svg:circle cx="1" cy="17" r="5"/>
+      <svg:rect x="0" y="22" width="12" height="1" fill="white"/>
+    </svg:mask>
+    <svg:mask id="pinstripe-tab-ontop-right-curve-mask" maskContentUnits="userSpaceOnUse">
+      <svg:circle cx="3" cy="3" r="3" fill="white"/>
+      <svg:rect x="0" y="0" width="3" height="3" fill="white"/>
+      <svg:rect x="0" y="3" width="6" height="19" fill="white"/>
+      <svg:rect x="6" y="17" width="5" height="5" fill="white"/>
+      <svg:circle cx="11" cy="17" r="5"/>
+      <svg:rect x="0" y="22" width="12" height="1" fill="white"/>
+    </svg:mask>
+    <svg:mask id="pinstripe-tab-onbottom-left-curve-mask" maskContentUnits="userSpaceOnUse">
+      <svg:circle cx="9" cy="20" r="3" fill="white"/>
+      <svg:rect x="9" y="20" width="3" height="3" fill="white"/>
+      <svg:rect x="6" y="1" width="6" height="19" fill="white"/>
+      <svg:rect x="1" y="1" width="5" height="5" fill="white"/>
+      <svg:circle cx="1" cy="6" r="5"/>
+      <svg:rect x="0" y="0" width="12" height="1" fill="white"/>
+    </svg:mask>
+    <svg:mask id="pinstripe-tab-onbottom-right-curve-mask" maskContentUnits="userSpaceOnUse">
+      <svg:circle cx="3" cy="20" r="3" fill="white"/>
+      <svg:rect x="0" y="20" width="3" height="3" fill="white"/>
+      <svg:rect x="0" y="1" width="6" height="19" fill="white"/>
+      <svg:rect x="6" y="1" width="5" height="5" fill="white"/>
+      <svg:circle cx="11" cy="6" r="5"/>
+      <svg:rect x="0" y="0" width="12" height="1" fill="white"/>
+    </svg:mask>
+  </svg:svg>
+#endif
 
 </vbox>
 # <iframe id="tab-view"> is dynamically appended as the 2nd child of #tab-view-deck.
diff --git a/browser/base/content/tabbrowser.css b/browser/base/content/tabbrowser.css
index cf87cbab718d..df7d0931fc3a 100644
--- a/browser/base/content/tabbrowser.css
+++ b/browser/base/content/tabbrowser.css
@@ -40,7 +40,7 @@ tabpanels {
 
 .tab-drop-indicator {
   position: relative;
-  z-index: 1;
+  z-index: 2;
 }
 
 .tab-throbber:not([busy]),
diff --git a/browser/base/content/tabbrowser.xml b/browser/base/content/tabbrowser.xml
index 902b7040adda..17b95c718cf4 100644
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -3388,7 +3388,17 @@
 
     <content context="tabContextMenu" closetabtext="&closeTab.label;">
       <xul:stack class="tab-stack" flex="1">
-        <xul:hbox class="tab-content" align="center">
+        <xul:hbox xbl:inherits="pinned,selected,titlechanged"
+                  class="tab-background">
+          <xul:hbox xbl:inherits="pinned,selected,titlechanged"
+                    class="tab-background-start"/>
+          <xul:hbox xbl:inherits="pinned,selected,titlechanged"
+                    class="tab-background-middle"/>
+          <xul:hbox xbl:inherits="pinned,selected,titlechanged"
+                    class="tab-background-end"/>
+        </xul:hbox>
+        <xul:hbox xbl:inherits="pinned,selected,titlechanged"
+                  class="tab-content" align="center">
           <xul:image xbl:inherits="fadein,pinned,busy,progress,selected"
                      class="tab-throbber"
                      role="presentation"/>
diff --git a/browser/themes/pinstripe/browser/browser.css b/browser/themes/pinstripe/browser/browser.css
index e18a594427dd..5c69faef22c1 100644
--- a/browser/themes/pinstripe/browser/browser.css
+++ b/browser/themes/pinstripe/browser/browser.css
@@ -68,39 +68,6 @@
   border-color: transparent !important;
 }
 
-.tabbrowser-tab:-moz-lwtheme[selected="true"] {
-  background-color: transparent !important;
-}
-.tabbrowser-tab:not(:hover) > * > * > .tab-label:not([selected="true"]):-moz-lwtheme {
-  opacity: .8;
-}
-
-#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button:-moz-lwtheme {
-  width: auto;
-  -moz-box-flex: 1;
-  -moz-box-pack: start;
-  border-style: none;
-  background: none;
-}
-
-#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button:-moz-lwtheme-darktext,
-#TabsToolbar[tabsontop="false"] .toolbarbutton-1:-moz-lwtheme-darktext,
-#TabsToolbar[tabsontop="false"] #tabs-closebutton:-moz-lwtheme-darktext,
-#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-darktext,
-#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-darktext,
-#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]) {
-  box-shadow: inset 0 1px 0 rgba(50,50,50,.5);
-}
-
-#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button:-moz-lwtheme-brighttext,
-#TabsToolbar[tabsontop="false"] .toolbarbutton-1:-moz-lwtheme-brighttext,
-#TabsToolbar[tabsontop="false"] #tabs-closebutton:-moz-lwtheme-brighttext,
-#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
-#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext,
-#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]) {
-  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
-}
-
 #main-window {
   -moz-appearance: none;
   background-color: #eeeeee;
@@ -132,8 +99,9 @@
 #navigator-toolbox[tabsontop="true"] > #nav-bar,
 #navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + toolbar,
 #navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + #customToolbars + #PersonalToolbar {
+  margin-top: 0 !important; /* don't overlay the bottom border of the tabs toolbar */
   padding-top: 4px !important;
-  background-image: -moz-linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,0)) !important; /* override lwtheme style */
+  background-image: -moz-linear-gradient(rgba(255,255,255,.43), rgba(255,255,255,0)) !important; /* override lwtheme style */
 }
 
 /* ----- BOOKMARK TOOLBAR ----- */
@@ -1485,107 +1453,203 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
 }
 
-.tabbrowser-tab:not(:hover) > * > * > .tab-icon-image:not([selected="true"]) {
-  opacity: .6;
-}
-
-.tab-label {
-  margin-top: 1px;
-  margin-bottom: 0;
-  font: message-box;
-  font-weight: bold;
+.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected="true"]) {
+  opacity: .8;
 }
 
 .tab-stack {
   /* ensure stable tab height with and without toolbarbuttons on the tab bar */
-  height: 19px;
+  height: 26px;
 }
 
 .tabbrowser-tab,
 .tabs-newtab-button {
   -moz-appearance: none;
-  border-radius: 0 0 6px 6px;
-  color: #222;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
-  margin: 0 0 1px;
-  padding: 2px 5px 0;
-  border-style: none solid solid;
-  border-width: 3px;
-  -moz-border-top-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.35);
-  -moz-border-bottom-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.25);
-  -moz-border-right-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.1);
-  -moz-border-left-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.1);
-  background-clip: padding-box;
+  font: message-box;
+  font-weight: bold;
+  text-shadow: @loweredShadow@;
+  margin: 0;
+  padding: 0;
+  border: none;
   text-align: center;
-  background-image: url(chrome://browser/skin/tabbrowser/tab-bkgnd.png);
+  -moz-box-align: stretch;
 }
 
-#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab,
-#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button {
-  border-top-style: solid;
-  border-bottom-style: none;
-  border-radius: 6px 6px 0 0;
-  padding-top: 0;
-  padding-bottom: 2px;
-  margin-top: 1px;
-  margin-bottom: 0;
-  background-image: -moz-linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0));
+%define TABSONTOP_TAB #tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab
+%define TABSONBOTTOM_TAB #tabbrowser-tabs[tabsontop="false"] > .tabbrowser-tab
+%define TABSONTOP_TAB_STACK #tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab > .tab-stack
+%define TABSONBOTTOM_TAB_STACK #tabbrowser-tabs[tabsontop="false"] > .tabbrowser-tab > .tab-stack
+%define TABSONTOP_NEWTAB_BUTTON #tabbrowser-tabs[tabsontop="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button
+%define TABSONBOTTOM_NEWTAB_BUTTON #tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button
+
+@TABSONTOP_TAB_STACK@ > .tab-background {
+  margin-top: 3px;
 }
 
-.tabs-newtab-button {
-  width: 34px;
+@TABSONBOTTOM_TAB_STACK@ > .tab-background {
+  margin-bottom: 3px;
 }
 
+@TABSONTOP_TAB_STACK@ > .tab-background:not([selected="true"]):not(:-moz-lwtheme) {
+  margin-bottom: 2px;
+}
+
+@TABSONBOTTOM_TAB_STACK@ > .tab-background:not([selected="true"]) {
+  margin-top: 2px;
+}
+
+.tab-background,
+.tab-content,
 .tabs-newtab-button > .toolbarbutton-icon {
-  margin-top: -1px;
+  -moz-margin-start: -5px;
+  -moz-margin-end: -4px;
+  pointer-events: none;
 }
 
-#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button > .toolbarbutton-icon {
-  margin-top: 0;
-  margin-bottom: -1px;
+.tab-close-button {
+  pointer-events: auto;
 }
 
-.tabs-newtab-button > .toolbarbutton-icon:-moz-window-inactive {
-  opacity: 0.75;
+.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
+  -moz-padding-start: 5px;
+  -moz-padding-end: 4px;
 }
 
-.tabbrowser-tab[selected="true"] {
-  -moz-border-bottom-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.3);
-  -moz-border-right-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.3);
-  -moz-border-left-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.35);
-  background-image: none;
+.tab-content,
+.tabs-newtab-button > .toolbarbutton-icon {
+  -moz-box-align: center;
+  border: solid transparent;
+  border-width: 0 11px;
+}
+
+.tab-background-start,
+.tab-background-end {
+  width: 12px;
+  height: 21px;
+}
+
+.tab-background-middle {
+  -moz-box-flex: 1;
+}
+
+@TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-start:-moz-locale-dir(ltr),
+@TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-end:-moz-locale-dir(rtl) {
+  mask: url(chrome://browser/content/browser.xul#pinstripe-tab-ontop-left-curve-mask);
+}
+
+@TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-end:-moz-locale-dir(ltr),
+@TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-start:-moz-locale-dir(rtl) {
+  mask: url(chrome://browser/content/browser.xul#pinstripe-tab-ontop-right-curve-mask);
+}
+
+@TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-start:-moz-locale-dir(ltr),
+@TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-end:-moz-locale-dir(rtl) {
+  mask: url(chrome://browser/content/browser.xul#pinstripe-tab-onbottom-left-curve-mask);
+}
+
+@TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-end:-moz-locale-dir(ltr),
+@TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-start:-moz-locale-dir(rtl) {
+  mask: url(chrome://browser/content/browser.xul#pinstripe-tab-onbottom-right-curve-mask);
+}
+
+.tab-background-start[selected="true"]:not(:-moz-lwtheme),
+.tab-background-middle[selected="true"]:not(:-moz-lwtheme),
+.tab-background-end[selected="true"]:not(:-moz-lwtheme) {
   background-color: -moz-mac-chrome-active;
 }
 
-.tabbrowser-tab[selected="true"]:-moz-window-inactive {
+.tab-background-start[selected="true"]:not(:-moz-lwtheme):-moz-window-inactive,
+.tab-background-middle[selected="true"]:not(:-moz-lwtheme):-moz-window-inactive,
+.tab-background-end[selected="true"]:not(:-moz-lwtheme):-moz-window-inactive {
   background-color: -moz-mac-chrome-inactive;
 }
 
-#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
-  background-image: -moz-radial-gradient(center 2px, circle cover, rgba(254,254,255,1) 3%, rgba(210,235,255,.9) 12%, rgba(148,205,253,.6) 30%, rgba(148,205,253,.2) 70%);
+.tab-background-start[pinned][titlechanged]:not([selected="true"]),
+.tab-background-end[pinned][titlechanged]:not([selected="true"]) {
+  background-image: -moz-linear-gradient(rgba(148,205,253,.2), rgba(148,205,253,.2)) !important;
 }
-.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
+
+@TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-middle[pinned][titlechanged]:not([selected="true"]) {
   background-image: -moz-radial-gradient(center 99%, circle cover, rgba(254,254,255,1) 3%, rgba(210,235,255,.9) 12%, rgba(148,205,253,.6) 30%, rgba(148,205,253,.2) 70%);
 }
 
-#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab[selected="true"] {
-  -moz-border-top-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.9);
-  -moz-border-right-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.6);
-  -moz-border-left-colors: rgba(0,0,0,.04) rgba(0,0,0,.17) rgba(255,255,255,.6);
-  background-image: -moz-linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.58));
+@TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-middle[pinned][titlechanged]:not([selected="true"]) {
+  background-image: -moz-radial-gradient(center 2px, circle cover, rgba(254,254,255,1) 3%, rgba(210,235,255,.9) 12%, rgba(148,205,253,.6) 30%, rgba(148,205,253,.2) 70%);
+}
+
+.tabbrowser-tab > .tab-stack > .tab-background > .tab-background-start:-moz-lwtheme-brighttext:not([selected="true"]),
+.tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle:-moz-lwtheme-brighttext:not([selected="true"]),
+.tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end:-moz-lwtheme-brighttext:not([selected="true"]) {
+  background-image: -moz-linear-gradient(hsla(0,0%,40%,.6), hsla(0,0%,30%,.6) 50%);
+}
+
+.tabbrowser-tab > .tab-stack > .tab-background > .tab-background-start:-moz-lwtheme-darktext:not([selected="true"]),
+.tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle:-moz-lwtheme-darktext:not([selected="true"]),
+.tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end:-moz-lwtheme-darktext:not([selected="true"]) {
+  background-image: -moz-linear-gradient(hsla(0,0%,60%,.5), hsla(0,0%,45%,.5) 50%);
+}
+
+@TABSONTOP_TAB_STACK@ > .tab-content,
+@TABSONTOP_NEWTAB_BUTTON@ > .toolbarbutton-icon {
+  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-normal-active.png) 0 11 repeat stretch;
+}
+
+@TABSONTOP_TAB@:hover > .tab-stack > .tab-content:not([selected="true"]),
+@TABSONTOP_NEWTAB_BUTTON@:hover > .toolbarbutton-icon {
+  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-hover-active.png) 0 11 repeat stretch;
+}
+
+@TABSONTOP_TAB_STACK@ > .tab-content[selected="true"] {
+  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-selected-active.png) 0 11 repeat stretch;
+}
+
+@TABSONBOTTOM_TAB_STACK@ > .tab-content,
+@TABSONBOTTOM_NEWTAB_BUTTON@ > .toolbarbutton-icon {
+  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-normal-active.png) 0 11 repeat stretch;
+}
+
+@TABSONBOTTOM_TAB@:hover > .tab-stack > .tab-content:not([selected="true"]),
+@TABSONBOTTOM_NEWTAB_BUTTON@:hover > .toolbarbutton-icon {
+  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-hover-active.png) 0 11 repeat stretch;
+}
+
+@TABSONBOTTOM_TAB_STACK@ > .tab-content[selected="true"] {
+  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-selected-active.png) 0 11 repeat stretch;
+}
+
+/* preloading hack */
+#TabsToolbar::after {
+  content: '';
+  display: block;
+  background-image:
+    url(chrome://browser/skin/tabbrowser/tab-top-normal-active.png),
+    url(chrome://browser/skin/tabbrowser/tab-top-hover-active.png),
+    url(chrome://browser/skin/tabbrowser/tab-top-selected-active.png),
+    url(chrome://browser/skin/tabbrowser/tab-bottom-normal-active.png),
+    url(chrome://browser/skin/tabbrowser/tab-bottom-hover-active.png),
+    url(chrome://browser/skin/tabbrowser/tab-bottom-selected-active.png),
+    url(chrome://browser/skin/tabbrowser/tabbar-top-bg-active.png),
+    url(chrome://browser/skin/tabbrowser/tabbar-top-bg-inactive.png),
+    url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-active.png),
+    url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-inactive.png);
 }
 
 .tabbrowser-tab:focus > .tab-stack {
   box-shadow: @focusRingShadow@;
 }
 
-.tabbrowser-tab[selected="true"],
-.tabbrowser-tab:hover {
-  color: #000000;
+.tabbrowser-tab:not([selected="true"]):not(:hover):not(:-moz-lwtheme) {
+  color: #222;
 }
 
-.tabbrowser-tab:-moz-window-inactive {
-  color: #575757;
+.tabbrowser-tab[selected="true"] {
+  z-index: 1;
+}
+
+.tabbrowser-tab[selected="true"]:not([pinned]),
+#tabbrowser-tabs[pinnedonly="true"] > .tabbrowser-tab[selected="true"] {
+  /* Don't overwrite position:fixed on pinned tabs. */
+  position: relative;
 }
 
 .tabbrowser-tab:-moz-lwtheme {
@@ -1593,33 +1657,82 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   text-shadow: inherit;
 }
 
-#TabsToolbar[tabsontop="true"]:not(:-moz-lwtheme) {
-  padding-bottom: 1px;
-  box-shadow: 0 -6px 3.5px -5px rgba(0,0,0,.3) inset,
-              0 -2px 0 rgba(0,0,0,.2) inset;
+#navigator-toolbox[tabsontop="true"]:not(:-moz-lwtheme)::before {
+  /* We want the titlebar to be unified, but we still want to be able
+   * to give #TabsToolbar a background. So we can't set -moz-appearance:
+   * toolbar on #TabsToolbar itself. Instead, we set it on a box of the
+   * right size which is put underneath #TabsToolbar.
+   */
+  content: '';
+  display: block;
+  -moz-appearance: toolbar;
+  height: 25px;
+  margin-bottom: -25px;
+}
+
+#TabsToolbar {
+  -moz-appearance: none;
+  height: 26px;
+  background-repeat: repeat-x;
+}
+
+#TabsToolbar:not(:-moz-lwtheme) {
+  background-color: -moz-mac-chrome-active;
+}
+
+#TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
+  background-color: -moz-mac-chrome-inactive;
 }
 
 #TabsToolbar[tabsontop="false"] {
-  -moz-appearance: none;
   margin-top: -1px;
-  border-bottom: 1px solid #404040;
+  padding-top: 2px;
+}
+
+#TabsToolbar[tabsontop="true"]:not(:-moz-lwtheme) {
+  padding-bottom: 2px;
+  background-image: url(chrome://browser/skin/tabbrowser/tabbar-top-bg-active.png) ;
+}
+
+#TabsToolbar[tabsontop="true"]:not(:-moz-lwtheme):-moz-window-inactive {
+  background-image: url(chrome://browser/skin/tabbrowser/tabbar-top-bg-inactive.png);
 }
 
 #TabsToolbar[tabsontop="false"]:not(:-moz-lwtheme) {
-  background: #9B9B9B url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd.png") repeat-x;
+  background-image: url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-active.png);
 }
 
 #TabsToolbar[tabsontop="false"]:not(:-moz-lwtheme):-moz-window-inactive {
-  background-color: #e2e2e2;
+  background-image: url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-inactive.png);
 }
 
-.tabbrowser-tabs {
+#tabbrowser-tabs {
   -moz-box-align: stretch;
-  height: 25px;
+  height: 26px;
 }
 
-.tabbrowser-tabs:not([overflow="true"]) {
-  -moz-margin-start: 3px;
+#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox:not(:-moz-lwtheme) {
+  margin-bottom: -2px;
+}
+
+#tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
+  margin-top: -2px;
+}
+
+@TABSONTOP_NEWTAB_BUTTON@ > .toolbarbutton-icon {
+  padding: 4px 0 2px;
+}
+
+@TABSONTOP_TAB_STACK@ > .tab-content {
+  padding-top: 2px;
+}
+
+@TABSONBOTTOM_NEWTAB_BUTTON@ > .toolbarbutton-icon {
+  padding: 2px 0 4px;
+}
+
+@TABSONBOTTOM_TAB_STACK@ > .tab-content {
+  padding-bottom: 2px;
 }
 
 /**
diff --git a/browser/themes/pinstripe/browser/jar.mn b/browser/themes/pinstripe/browser/jar.mn
index 9d0fbb763a45..d7bb71862553 100644
--- a/browser/themes/pinstripe/browser/jar.mn
+++ b/browser/themes/pinstripe/browser/jar.mn
@@ -110,9 +110,17 @@ browser.jar:
   skin/classic/browser/tabbrowser/loading.png                            (tabbrowser/loading.png)
   skin/classic/browser/tabbrowser/tab-arrow-left.png                     (tabbrowser/tab-arrow-left.png)
   skin/classic/browser/tabbrowser/tab-arrow-right.png                    (tabbrowser/tab-arrow-right.png)
-  skin/classic/browser/tabbrowser/tabbrowser-tabs-bkgnd.png              (tabbrowser/tabbrowser-tabs-bkgnd.png)
+  skin/classic/browser/tabbrowser/tabbar-bottom-bg-active.png            (tabbrowser/tabbar-bottom-bg-active.png)
+  skin/classic/browser/tabbrowser/tabbar-bottom-bg-inactive.png          (tabbrowser/tabbar-bottom-bg-inactive.png)
+  skin/classic/browser/tabbrowser/tab-bottom-normal-active.png           (tabbrowser/tab-bottom-normal-active.png)
+  skin/classic/browser/tabbrowser/tab-bottom-hover-active.png            (tabbrowser/tab-bottom-hover-active.png)
+  skin/classic/browser/tabbrowser/tab-bottom-selected-active.png         (tabbrowser/tab-bottom-selected-active.png)
+  skin/classic/browser/tabbrowser/tabbar-top-bg-active.png               (tabbrowser/tabbar-top-bg-active.png)
+  skin/classic/browser/tabbrowser/tabbar-top-bg-inactive.png             (tabbrowser/tabbar-top-bg-inactive.png)
+  skin/classic/browser/tabbrowser/tab-top-normal-active.png              (tabbrowser/tab-top-normal-active.png)
+  skin/classic/browser/tabbrowser/tab-top-hover-active.png               (tabbrowser/tab-top-hover-active.png)
+  skin/classic/browser/tabbrowser/tab-top-selected-active.png            (tabbrowser/tab-top-selected-active.png)
   skin/classic/browser/tabbrowser/tabDragIndicator.png                   (tabbrowser/tabDragIndicator.png)
-  skin/classic/browser/tabbrowser/tab-bkgnd.png                          (tabbrowser/tab-bkgnd.png)
   skin/classic/browser/tabview/edit-light.png               (tabview/edit-light.png)
   skin/classic/browser/tabview/edit.png                     (tabview/edit.png)
   skin/classic/browser/tabview/new-tab.png                  (tabview/new-tab.png)
diff --git a/browser/themes/pinstripe/browser/tabbrowser/tab-bkgnd.png b/browser/themes/pinstripe/browser/tabbrowser/tab-bkgnd.png
deleted file mode 100644
index acf39e6e0e9236bddd226536703a50bc502aca4a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 149
zcmeAS@N?(olHy`uVBq!ia0vp^96+qW!2%>RR~4H9DfSXiUsv`UT#N$dLi=?swSYpL
z1s;*b3=DDyL74GyW=JqlkR{#G*O7tY+Knsz5k^41il>WXNX4yW9o`fNMxC1d7g&ze
qE#NHp>nfU%lprB0A-Z5C14G<87R$%cTls<N89ZJ6T-G@yGywoKq$N54

diff --git a/browser/themes/pinstripe/browser/tabbrowser/tab-bottom-hover-active.png b/browser/themes/pinstripe/browser/tabbrowser/tab-bottom-hover-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5fdaba4bb0f223984253e0839b70b9f81f0e7f2
GIT binary patch
literal 422
zcmV;X0a^ZuP)<h;3K|Lk000e1NJLTq000{R000^Y1^@s6Mu;cy0004PNkl<ZNQvFn
zy=%fi9LDi4zO-t!wdl}MS}QtKmkxr1OL24%L23~ZL`4z*|LN(FUrH*z<Z_*Q@JzXT
zKHMcH!haumpay&bV@V}RHII~lvGvug|7WCt8=wq)0ev3~=vz<OdQ-<(1}Fe+U@57d
zG{Dk&3fB7z3&9-l1RNwiCk=40p4=%YdX$wv!YZeZ@ECgp_MXSMx1Lzo&J)|YU|UJA
zNds(Mu#G3SalzJ}*xChKd15OUZ0U(DU9g3um!ts}u9(lxoUpkkHjjg43EtE*NsXid
zX4aF9gH3H=k~c^Ln8v{}z&$Vt7bZv@m{`xr&r1}$1BQ|^lA4ZCQ&I*PTF+T51aE;Z
z(3RAY^d_lw1!>v5PPo>3&O*`MRe=wnCn+zfEva`QZAp2cXX~ohb`=G~2jv|Y*s+WV
z{=^(-WY-5a|Kfvj3QGZLg3o%9;ATG%{C1A>VAqQ_KOO0C8sVaBj9dl20rjltj$1U9
QkN^Mx07*qoM6N<$f_?C{YXATM

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/browser/tabbrowser/tab-bottom-normal-active.png b/browser/themes/pinstripe/browser/tabbrowser/tab-bottom-normal-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a0dceea376d576199d3c6d4bcf8ac974104c4c3
GIT binary patch
literal 405
zcmV;G0c!q<P)<h;3K|Lk000e1NJLTq000{R000^Y1^@s6Mu;cy00048Nkl<ZNQvFm
zy=%fy6vp8n(bUiS)u06t+zXvLbarr5kb=}AB8rM4`u{JdLrzL+Ly~*1Qv>fHx#xYz
zO=94`9~EE-d;%MwA|j8r(Y}rL4fXfW;Q<do3-|)2BGRx8Fx8%x_IkHi5vT&Mz*$7v
zwgJxCQ`O#ISOk`VXW%L#P1^uh?I|Zg@vVFUE{@nmd;V<UE!Mu%Hn#I(Cr9jLf*l>P
zqX~9!#11Cd-VxiIU^_=_XM$}Vv8@TV7Lkr^fVC+W*v1rFIby3km{0gmy>!Hu+T-WJ
z7CLBi&jMhP2P*;%U>*%xqyx;gC-L(V$7;X?sEJ6|5bDO~)369E0q?*_L<S<#7m;2D
z($jSVV5IY<G$?*`0Wj8-wCE)zeJzh>f~>2GgVBTXro$6p27DxBrsv1HKJ~#!!aSfr
z_*t(L-s~pfyK|eSp0DfrLaf8+h=%+e$ppRuoT|Y29U1&t00000NkvXXu0mjfoZz;9

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/browser/tabbrowser/tab-bottom-selected-active.png b/browser/themes/pinstripe/browser/tabbrowser/tab-bottom-selected-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..0596cb28dd471f83629de71d56cfd8b348e4d9c1
GIT binary patch
literal 487
zcmV<D0T}*?P)<h;3K|Lk000e1NJLTq000{R000^Y1^@s6Mu;cy00055Nkl<ZNQuRk
z-%Daa7=|CTEc<1FZRH|aLL@Fi5M9-kNbUXy?NudeMG`Fg|G!<#Yq^T2bLIp)@Z5d#
zKFrL=%pmF9oJnd*D)9wFQptH|69+&Mr~yBKs-${ep+$9I-?=q=K++OW0WN@%q;gJK
z85lXQ;{5kf09Ju5pa)#$k$Ha4d8^L<M>bjADe#z6_UN37bLV6wV3V-F!<@3Ab2gn@
zm@QZW)`13aC#e_<aOa$L=gy7)CVO!EMgcrzk@Y2&V*&bEWCKYXu>ga#vO{1fX)6{&
zHy);yjU?^FLbyFr$&P?0N!3_@C+DP=?ZuK+_AIFu3-Fvp_9Cef3-FRw)&#~14__3(
z*g2`XaV)7N=_G=dWuJCq8K_&<wlFJg%j(WsC|e;s<$bqt$I`TP-1>dztSpihfMsAC
z_yycbx{-9H@L}mBaPGPr;MViEoj3QE&2HrZ;eNaK3cHeiC(u>6IR@q+X$z-UHxcdv
zKM8NsEAR*SyMR~MT?5rA(ZW?t3yXYwfW8q9y8#@V<_zCmH~HWc(}-rJ%Y;K-12z&^
db6w&Yy#bfDTDje}t0n*d002ovPDHLkV1oTh+T;KL

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/browser/tabbrowser/tab-top-hover-active.png b/browser/themes/pinstripe/browser/tabbrowser/tab-top-hover-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..f41b253d0bce22c49f06bba7bdf1934813ff3562
GIT binary patch
literal 466
zcmV;@0WJQCP)<h;3K|Lk000e1NJLTq000{R000^Y1^@s6Mu;cy0004*Nkl<ZNQu3b
zT}uK%7=@oUQ&}bYkS+{LEkp#9pz_))5s5B>GEme0|9?1L_%3d;AF~cLaISXdJe>2+
zGLXEE_H+!CGIX49#%aX?CqNYlff`UxP|dzqZGRl>1S*+H3+Mxnz!UJCpeOs@xBWFc
zp9_o<)$MQ(K+;gsI734_-?MY|Si;OyWuOc6Bt1y#OS+TP%FvzddoW<vd{Wazsj9#W
zP?FS<bX!0jt8ipKsp;ag8cVu1SW(>q<GtCX!cKvSq<cy219T5e%*P2f%b8K8fSD`o
z40!W|y_rug>;iZ%crpG6csHL^SP)D0ap1h#lG?yWELo5SD+A}i+_T2H`IPfu7r;W>
zAN3#s3-if^T>?vo|0z|#(tMm?E6<s&ion*MGg}vdeS6mU?E<R+4NK-z<Jx>GF0dcZ
z+xP=qrNIJr&r1{7c-FW9uGu{^K@uzk2EdnRji2Td?!$uE<!At}z{s=4k@+-Ymn4W_
zA#ejs*}i3=q#F-~Y~Qr0`GyfJs;_C$kyP@PwKg!{sLuaeza+5;BST<b1^@s607*qo
IM6N<$g3(jcA^-pY

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/browser/tabbrowser/tab-top-normal-active.png b/browser/themes/pinstripe/browser/tabbrowser/tab-top-normal-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f4cdad3aafcd74ce7f837b06f1d9c53a3890c6b
GIT binary patch
literal 464
zcmV;>0WbcEP)<h;3K|Lk000e1NJLTq000{R000^Y1^@s6Mu;cy0004(Nkl<ZNQu3b
zOKZYF6otP=Ya~9ZRtmLRx^iK$(9*}+jUrN9NTrMVK>z=5I9>DxgCr(qpaW+$ch1MT
zbD4qob#bHuP&}bR%$ZCp3b+KyKmb&LYK$tjU$*)vI1{L7CJ(>>cm`g9w-~+J{=n)h
zc0LstCaMCDz!Tt0>PdPzp&sB{{iB@^6P`>}0{Xy{q^_h}Ni9kB6KYvq*MNQVNlX`}
zDg*C8MN%^ba;&Dc@xy!)(?#!UB*{M$6e<8lM|YP9s{<2B4N0{eY5)`S$po9_1l1(f
zfLT^p1DHF)=H`<MYXJ*M)w}{0=938XBFUDLuJQ_4Mv{3+uoBP&z8zuT=2J?8wSb?T
zV_%n42Y$>a6?P4*9APW-$pl+F!q(@&wvMB}JqNbY-wTpUz$OdK2ilg*Wg55U<7a{G
z9AP`)CJE+o_+C1|-VwG3?l^oiUK}g{hL+4_8n@;X9K*cGaI}F>VC<M|Y(DMCka!_1
z0PcY)@C5{Ndx!(`nVN49!ov1-EIN{kuClHT%{Of4|E*uZ#q2gD3HIgy0000<MNUMn
GLSTYDHpiR*

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/browser/tabbrowser/tab-top-selected-active.png b/browser/themes/pinstripe/browser/tabbrowser/tab-top-selected-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..791217c1e4b97962614580c29eaf52847ce4f9c7
GIT binary patch
literal 691
zcmV;k0!;mhP)<h;3K|Lk000e1NJLTq000{R000^Y1^@s6Mu;cy0007dNkl<ZNQteL
zze`(D7=|Cs56#t>#2;<ZT3qVT#jbV`Tq>=DgCL@Vii@H+1%yCAoCHA-1fe(yf*=Tj
zP>MsRg5qD$|3Gl>`gX{B^(MrSn|65Na_>3MlkYnx=K!=h2`34pfDWe<$N*hVcO>Dv
zjK_s@Qs#ur&`~9;6?FkQAP@8ceL#OCeSV+!xULt3RkGTu0)svR6ToL+3i#rDjXY2J
z`-I2$d49d>swzvn9Rt8P&@bsu(xaq54e}`I&ee{4ey4eL+nDsnEHDOiNP3X;ThhIx
zUk!5aaSv|cm^o>4pJdTirrq~RNjFVM>Pc^aNpqr=J&D>PE$juRCEdmpg}DW$%?Vps
zw~ZMu@QkFNtp=DeCsW(TXbZc6SHP^KYe_#^$Tcu)PIql9qp|>a4a`ZplJvcWTmf_D
z1odQX5!oAHUecwji<?Ve-keZYwHw>r+rZ^7NV;%!adQDIm=l=W9u-B`Y!FzMbY@}P
zoB_+`MAxjnR@MUyS#~PvyoH=vHe}w5vaqrhNhcP@%?Ys5Ol4XBqE$)97RJpnuxd`W
zk*o(82G%4UN;<N%*&Ina1lG)H*v6~}txG!a<hVHi*3EgbvQ8=&;4rW$X;0F=rOjqv
z(jKsBPR`saS;{X9z&l_|(yoPZvkPpQQ!qCb$`U-^&IRB-P?WS|VchHhMRN)~-`WZM
zknuJh06qa5lFAmwO&QoQXTaQyJtV2zt~uZ>umt2JZA&V(kZrS;%*&ad#JeRAd;k`y
zoE|01T1|<{DY9s8-W~#A6d05=;{R7!Qt=;BHfO{q$tVz@%2jfy%DMK<gSY-eisqe%
Zj=xr3EdSYAa}xjn002ovPDHLkV1jkAI>G<|

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/browser/tabbrowser/tabbar-bottom-bg-active.png b/browser/themes/pinstripe/browser/tabbrowser/tabbar-bottom-bg-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..211f88f8d34308391f11535d02ac55848a6fa380
GIT binary patch
literal 135
zcmeAS@N?(olHy`uVBq!ia0vp^(m*W5!3HGVI@CV^DL+pa#}JRsw`UD`8w>;-F6u94
zQ^?IYb%~R^V+GF>d9@SrdOZ1cE=RU7*eK-*PVdlsB=YyB`AvbHk>aZ7_yQlT>0Ghs
j$W6T@;hm9!8+G(oN8DJ<`-FE3&}0TrS3j3^P6<r_@Z>By

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/browser/tabbrowser/tabbar-bottom-bg-inactive.png b/browser/themes/pinstripe/browser/tabbrowser/tabbar-bottom-bg-inactive.png
new file mode 100644
index 0000000000000000000000000000000000000000..df1cf3960462845c99a16d12549aad535baf4de7
GIT binary patch
literal 137
zcmeAS@N?(olHy`uVBq!ia0vp^;y^6L!3HE_wj8emQURVWjv*eMZ_g~`Z7>jUxOktF
zBh#57^f=QDzk_mj@5^&1?BBui@r|-l9`^weLzft(T^+$+p5OneSoAq|ip71G&d+L#
mx`dvu?r?qb%=JieCF6@lUH?isJ~;!;X7F_Nb6Mw<&;$ThgECG4

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/browser/tabbrowser/tabbar-top-bg-active.png b/browser/themes/pinstripe/browser/tabbrowser/tabbar-top-bg-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..76be3054f63b997fac19bab0496cd9b930d50fa9
GIT binary patch
literal 156
zcmeAS@N?(olHy`uVBq!ia0vp^(m*W5!3HGVI@CV^sbo(V#}JRsy@wsy4g<LdRj0dY
zScY&YE)QDzCB$j}_2*BzZ^yqeSaDzLRiNwNkih$)SHeZV2D<JI58STxD#|r>)rw-#
z(lv|tLbIG_c+b#0V|qsBnOGX{=Jv`q%R_%Qy^8$HJT>dmZQGe_bAaYEc)I$ztaD0e
F0swzEI@16E

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/browser/tabbrowser/tabbar-top-bg-inactive.png b/browser/themes/pinstripe/browser/tabbrowser/tabbar-top-bg-inactive.png
new file mode 100644
index 0000000000000000000000000000000000000000..24a14b825da0c9c0325fae2c773f1397bd4b145d
GIT binary patch
literal 151
zcmeAS@N?(olHy`uVBq!ia0vp^(m*W5!3HGVI@CV^sW?v;#}JRsy@xk)9s+U?_HzUV
zC@MxQ*|2egcj|K;zsU#fqyHRS_;1yU`&zHUT>pjyUe|gR<hnO}C2yi%;<?0Q2Gb3$
z8*De|Hwd0#c}D1&WE$^huFrg%TYsis-CM;lBlpV2YYW#%0F7qwboFyt=akR{0FJde
AIsgCw

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/browser/tabbrowser/tabbrowser-tabs-bkgnd.png b/browser/themes/pinstripe/browser/tabbrowser/tabbrowser-tabs-bkgnd.png
deleted file mode 100644
index 1f80c83e76afe2460b6e60836836663b9b504d79..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 155
zcmeAS@N?(olHy`uVBq!ia0vp^%s?#3!3HG1q)u@HQY`6?zK#qG*KS<#k1zsBmbgZg
z1m~xflqVLYGB~E>C#5QQ<|d}62BjvZR2H60wE-&9^>lFzskoJtn2_L+(!eC9P}g+k
zXXlxpeP@0)pZV#}_FVq$mp_ZI<Sr><VB%p2-78U_l7HD8sFA_b)z4*}Q$iB}34t?F