diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index c730b7ee6628..ac4b39138af7 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1213,18 +1213,6 @@
-
-
-
-
-
-
-
-
-
-
-
-
#endif
diff --git a/browser/themes/osx/Toolbar-background-noise.png b/browser/themes/osx/Toolbar-background-noise.png
new file mode 100644
index 000000000000..aab0a02c84d6
Binary files /dev/null and b/browser/themes/osx/Toolbar-background-noise.png differ
diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
index 0cb7145ef602..6c0ddf75cb7e 100644
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -6,6 +6,8 @@
%include shared.inc
%filter substitution
+%define fgTabTexture linear-gradient(hsla(0,0%,100%,0.6), hsla(0,0%,100%,0.6) 0px, hsl(0,0%,99%) 1px, hsl(0,0%,92%))
+%define fgTabBackgroundMiddle linear-gradient(transparent, transparent)
%define forwardTransitionLength 150ms
%define conditionalForwardWithUrlbar window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button
%define conditionalForwardWithUrlbarWidth 27
@@ -62,6 +64,17 @@ toolbarseparator {
min-height: 22px;
}
+toolbox[tabsontop=true] > toolbar:not(#TabsToolbar):not(#nav-bar):not(#toolbar-menubar),
+toolbox[tabsontop=false] > toolbar:not(#nav-bar) {
+ margin-top: -2px; /* overlay the bottom border of the toolbar above us */
+ padding-top: 1px !important;
+}
+
+toolbox[tabsontop=true] > toolbar:not(#TabsToolbar):not(#nav-bar):not(:-moz-lwtheme) {
+ -moz-appearance: none;
+ background: url(chrome://browser/skin/Toolbar-background-noise.png) hsl(0,0%,83%);
+}
+
/* We need more height when toolbar buttons show both icon and text. */
toolbar[mode="full"] toolbarseparator {
min-height: 36px;
@@ -73,10 +86,9 @@ toolbar[mode="full"] toolbarseparator {
#PersonalToolbar {
-moz-appearance: none;
- margin-top: -2px; /* overlay the bottom border of the toolbar above us */
- padding-top: 1px !important;
background-color: -moz-mac-chrome-active;
- border-bottom: 1px solid rgba(0, 0, 0, 0.57);
+ border-bottom: 2px solid;
+ -moz-border-bottom-colors: hsla(0,0%,0%,.15) hsla(0,0%,100%,.15);
}
#nav-bar[tabsontop=true],
@@ -85,9 +97,11 @@ toolbar[mode="full"] toolbarseparator {
-moz-appearance: none;
margin-top: 0; /* don't overlay the bottom border of the tabs toolbar */
padding-top: 4px !important;
- border-bottom: 1px solid rgba(0, 0, 0, 0.57);
- background-color: -moz-mac-chrome-active;
- background-image: linear-gradient(rgba(255,255,255,.43), rgba(255,255,255,0)) !important; /* override lwtheme style */
+ border-bottom: 2px solid;
+ -moz-border-bottom-colors: hsla(0,0%,0%,.15) hsla(0,0%,100%,.15);
+ background: url(chrome://browser/skin/Toolbar-background-noise.png),
+ linear-gradient(hsl(0,0%,93%), hsl(0,0%,83%)); !important; /* override lwtheme style */
+ background-clip: border-box;
background-origin: border-box !important;
}
@@ -104,7 +118,6 @@ toolbar[mode="full"] toolbarseparator {
#nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + toolbar:not(:-moz-lwtheme):-moz-window-inactive,
#nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme):-moz-window-inactive {
background-color: -moz-mac-chrome-inactive;
- border-bottom-color: rgba(0, 0, 0, 0.32);
}
/* ----- BOOKMARK TOOLBAR ----- */
@@ -2165,6 +2178,8 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
margin: 0;
}
+%include ../shared/tabs.inc.css
+
.tab-throbber,
.tab-icon-image {
width: 16px;
@@ -2196,7 +2211,11 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
}
.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected="true"]) {
- opacity: .8;
+ opacity: .9;
+}
+
+.tab-label:not([selected="true"]) {
+ opacity: .7;
}
.tabbrowser-tab:not([pinned]):not([fadein]) {
@@ -2205,57 +2224,27 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
opacity 50ms ease-out 100ms /* hide the tab for the last 100ms of the max-width transition */;
}
-.tab-stack {
- /* ensure stable tab height with and without toolbarbuttons on the tab bar */
- height: 26px;
-}
-
.tabbrowser-tab,
.tabs-newtab-button {
-moz-appearance: none;
font: message-box;
font-weight: bold;
text-shadow: @loweredShadow@;
- margin: 0;
- padding: 0;
border: none;
- text-align: center;
-moz-box-align: stretch;
}
-%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
+.tabbrowser-tab {
+ color: #333;
+}
+
%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;
-}
-
-@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 {
- -moz-margin-start: -5px;
- -moz-margin-end: -4px;
- pointer-events: none;
-}
-
-.tab-close-button {
- pointer-events: auto;
+.tab-background-start[selected=true]::before,
+.tab-background-end[selected=true]::before {
+ /* The fill is in the image of ::after on OS X */
+ background: none;
}
.tabbrowser-tabs[closebuttons="hidden"] > * > * > * > .tab-close-button:not([pinned]) {
@@ -2263,178 +2252,16 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
visibility: hidden;
}
-.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
- -moz-padding-start: 5px;
- -moz-padding-end: 4px;
-}
-
-.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) {
- clip-path: url(chrome://browser/content/browser.xul#osx-tab-ontop-left-curve-clip-path);
-}
-
-@TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-end:-moz-locale-dir(ltr),
-@TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-start:-moz-locale-dir(rtl) {
- clip-path: url(chrome://browser/content/browser.xul#osx-tab-ontop-right-curve-clip-path);
-}
-
-@TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-start:-moz-locale-dir(ltr),
-@TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-end:-moz-locale-dir(rtl) {
- clip-path: url(chrome://browser/content/browser.xul#osx-tab-onbottom-left-curve-clip-path);
-}
-
-@TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-end:-moz-locale-dir(ltr),
-@TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-start:-moz-locale-dir(rtl) {
- clip-path: url(chrome://browser/content/browser.xul#osx-tab-onbottom-right-curve-clip-path);
-}
-
-.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;
-}
-
-.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;
-}
-
-.tab-background-start[pinned][titlechanged]:not([selected="true"]),
-.tab-background-end[pinned][titlechanged]:not([selected="true"]) {
- background-image: linear-gradient(rgba(148,205,253,.2), rgba(148,205,253,.2)) !important;
-}
-
-@TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-middle[pinned][titlechanged]:not([selected="true"]) {
- background-image: radial-gradient(circle farthest-corner at 50% 99%, rgba(254,254,255,1) 3%, rgba(210,235,255,.9) 12%, rgba(148,205,253,.6) 30%, rgba(148,205,253,.2) 70%);
-}
-
-@TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-middle[pinned][titlechanged]:not([selected="true"]) {
- background-image: radial-gradient(circle farthest-corner at 50% 2px, 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: 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: linear-gradient(hsla(0,0%,60%,.5), hsla(0,0%,45%,.5) 50%);
-}
-
-@TABSONTOP_TAB_STACK@ > .tab-content,
-@TABSONTOP_NEWTAB_BUTTON@ > .toolbarbutton-icon {
- border-image: url(chrome://browser/skin/tabbrowser/tab-top-normal-active.png) 0 11 fill repeat stretch;
-}
-
-@TABSONTOP_TAB@:hover > .tab-stack > .tab-content:not([selected="true"]),
-@TABSONTOP_NEWTAB_BUTTON@:hover > .toolbarbutton-icon {
- border-image: url(chrome://browser/skin/tabbrowser/tab-top-hover-active.png) 0 11 fill repeat stretch;
-}
-
-@TABSONTOP_TAB_STACK@ > .tab-content[selected="true"] {
- border-image: url(chrome://browser/skin/tabbrowser/tab-top-selected-active.png) 0 11 fill repeat stretch;
-}
-
-@TABSONBOTTOM_TAB_STACK@ > .tab-content,
-@TABSONBOTTOM_NEWTAB_BUTTON@ > .toolbarbutton-icon {
- border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-normal-active.png) 0 11 fill repeat stretch;
-}
-
-@media (min-resolution: 2dppx) {
- @TABSONTOP_TAB_STACK@ > .tab-content,
- @TABSONTOP_NEWTAB_BUTTON@ > .toolbarbutton-icon {
- border-image: url(chrome://browser/skin/tabbrowser/tab-top-normal-active@2x.png) 0 22 fill repeat stretch;
- }
-
- @TABSONTOP_TAB@:hover > .tab-stack > .tab-content:not([selected="true"]),
- @TABSONTOP_NEWTAB_BUTTON@:hover > .toolbarbutton-icon {
- border-image: url(chrome://browser/skin/tabbrowser/tab-top-hover-active@2x.png) 0 22 fill repeat stretch;
- }
-
- @TABSONTOP_TAB_STACK@ > .tab-content[selected="true"] {
- border-image: url(chrome://browser/skin/tabbrowser/tab-top-selected-active@2x.png) 0 22 fill repeat stretch;
- }
-}
-
-@TABSONBOTTOM_TAB@:hover > .tab-stack > .tab-content:not([selected="true"]),
-@TABSONBOTTOM_NEWTAB_BUTTON@:hover > .toolbarbutton-icon {
- border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-hover-active.png) 0 11 fill repeat stretch;
-}
-
-@TABSONBOTTOM_TAB_STACK@ > .tab-content[selected="true"] {
- border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-selected-active.png) 0 11 fill 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);
-}
-
-@media (min-resolution: 2dppx) {
- #TabsToolbar::after {
- content: '';
- display: block;
- background-image:
- url(chrome://browser/skin/tabbrowser/tab-top-normal-active@2x.png),
- url(chrome://browser/skin/tabbrowser/tab-top-hover-active@2x.png),
- url(chrome://browser/skin/tabbrowser/tab-top-selected-active@2x.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:not([selected="true"]):not(:hover):not(:-moz-lwtheme) {
- color: #222;
-}
-
-.tabbrowser-tab[selected="true"] {
- color: #000;
- z-index: 1;
- position: relative;
-}
-
.tabbrowser-tab:-moz-lwtheme {
color: inherit;
text-shadow: inherit;
@@ -2449,13 +2276,12 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
content: '';
display: block;
-moz-appearance: toolbar;
- height: 25px;
- margin-bottom: -25px;
+ height: calc(@tabHeight@ + 1px);
+ margin-bottom: calc(-1px - @tabHeight@);
}
#TabsToolbar {
-moz-appearance: none;
- height: 26px;
background-repeat: repeat-x;
}
@@ -2464,59 +2290,34 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
padding-top: 2px;
}
-/* For tabs-on-top, only fill the bottom 2px with the chrome background
- * color, so that the borders in tabbar-top-bg-*.png can mix with it.
- * In the top 24px the unified toolbar (from the ::before above) will show.
+/*
+ * Draw the bottom border of the tabstrip above ::before
*/
#TabsToolbar[tabsontop="true"]:not(:-moz-lwtheme) {
- padding-bottom: 2px;
- background: url(chrome://browser/skin/tabbrowser/tabbar-top-bg-active.png),
- linear-gradient(to top, -moz-mac-chrome-active 2px, transparent 2px);
-}
-
-#TabsToolbar[tabsontop="true"]:not(:-moz-lwtheme):-moz-window-inactive {
- background: url(chrome://browser/skin/tabbrowser/tabbar-top-bg-inactive.png),
- linear-gradient(to top, -moz-mac-chrome-inactive 2px, transparent 2px);
+ background: linear-gradient(to top, hsla(0,0%,0%,.3), hsla(0,0%,0%,.3) 1px, transparent 1px);
}
/* In tabs-on-bottom mode, fill the whole toolbar with the chrome
* background color.
*/
#TabsToolbar[tabsontop="false"]:not(:-moz-lwtheme) {
- background: url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-active.png) -moz-mac-chrome-active;
+ background: -moz-mac-chrome-active;
}
#TabsToolbar[tabsontop="false"]:not(:-moz-lwtheme):-moz-window-inactive {
- background: url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-inactive.png) -moz-mac-chrome-inactive;
+ background: -moz-mac-chrome-inactive;
}
#tabbrowser-tabs {
-moz-box-align: stretch;
- height: 26px;
-}
-
-#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;
+ padding: 6px 0 4px;
}
@TABSONBOTTOM_NEWTAB_BUTTON@ > .toolbarbutton-icon {
- padding: 2px 0 4px;
-}
-
-@TABSONBOTTOM_TAB_STACK@ > .tab-content {
- padding-bottom: 2px;
+ padding: 4px 0 6px;
}
/**
diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn
index 3eb3b2cacd16..6d54e9a0895d 100644
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -176,23 +176,20 @@ browser.jar:
skin/classic/browser/tabbrowser/connecting@2x.png (tabbrowser/connecting@2x.png)
skin/classic/browser/tabbrowser/loading.png (tabbrowser/loading.png)
skin/classic/browser/tabbrowser/loading@2x.png (tabbrowser/loading@2x.png)
+ skin/classic/browser/tabbrowser/tab-active-middle.png (tabbrowser/tab-active-middle.png)
skin/classic/browser/tabbrowser/tab-arrow-left.png (tabbrowser/tab-arrow-left.png)
skin/classic/browser/tabbrowser/tab-arrow-left@2x.png (tabbrowser/tab-arrow-left@2x.png)
skin/classic/browser/tabbrowser/tab-arrow-right.png (tabbrowser/tab-arrow-right.png)
skin/classic/browser/tabbrowser/tab-arrow-right@2x.png (tabbrowser/tab-arrow-right@2x.png)
+ skin/classic/browser/tabbrowser/tab-background-end.png (tabbrowser/tab-background-end.png)
+ skin/classic/browser/tabbrowser/tab-background-middle.png (tabbrowser/tab-background-middle.png)
+ skin/classic/browser/tabbrowser/tab-background-start.png (tabbrowser/tab-background-start.png)
+ skin/classic/browser/tabbrowser/tab-stroke-end.png (tabbrowser/tab-stroke-end.png)
+ skin/classic/browser/tabbrowser/tab-stroke-start.png (tabbrowser/tab-stroke-start.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-normal-active@2x.png (tabbrowser/tab-top-normal-active@2x.png)
- skin/classic/browser/tabbrowser/tab-top-hover-active.png (tabbrowser/tab-top-hover-active.png)
- skin/classic/browser/tabbrowser/tab-top-hover-active@2x.png (tabbrowser/tab-top-hover-active@2x.png)
- skin/classic/browser/tabbrowser/tab-top-selected-active.png (tabbrowser/tab-top-selected-active.png)
- skin/classic/browser/tabbrowser/tab-top-selected-active@2x.png (tabbrowser/tab-top-selected-active@2x.png)
skin/classic/browser/tabbrowser/tab-overflow-border.png (tabbrowser/tab-overflow-border.png)
skin/classic/browser/tabbrowser/tabDragIndicator.png (tabbrowser/tabDragIndicator.png)
skin/classic/browser/tabbrowser/tabDragIndicator@2x.png (tabbrowser/tabDragIndicator.png)
@@ -311,6 +308,7 @@ browser.jar:
skin/classic/browser/keyhole-circle@2x.png (keyhole-circle-lion@2x.png)
skin/classic/browser/lion/Toolbar.png (Toolbar-lion.png)
skin/classic/browser/Toolbar@2x.png (Toolbar-lion@2x.png)
+ skin/classic/browser/Toolbar-background-noise.png (Toolbar-background-noise.png)
skin/classic/browser/lion/toolbarbutton-dropmarker.png (toolbarbutton-dropmarker-lion.png)
skin/classic/browser/toolbarbutton-dropmarker@2x.png (toolbarbutton-dropmarker-lion@2x.png)
skin/classic/browser/lion/tabbrowser/alltabs-box-bkgnd-icon.png (tabbrowser/alltabs-box-bkgnd-icon-lion.png)
diff --git a/browser/themes/osx/tabbrowser/tab-active-middle.png b/browser/themes/osx/tabbrowser/tab-active-middle.png
new file mode 100644
index 000000000000..7872d0367803
Binary files /dev/null and b/browser/themes/osx/tabbrowser/tab-active-middle.png differ
diff --git a/browser/themes/osx/tabbrowser/tab-background-end.png b/browser/themes/osx/tabbrowser/tab-background-end.png
new file mode 100644
index 000000000000..9374cbda64b6
Binary files /dev/null and b/browser/themes/osx/tabbrowser/tab-background-end.png differ
diff --git a/browser/themes/osx/tabbrowser/tab-background-middle.png b/browser/themes/osx/tabbrowser/tab-background-middle.png
new file mode 100644
index 000000000000..060a3afa4abd
Binary files /dev/null and b/browser/themes/osx/tabbrowser/tab-background-middle.png differ
diff --git a/browser/themes/osx/tabbrowser/tab-background-start.png b/browser/themes/osx/tabbrowser/tab-background-start.png
new file mode 100644
index 000000000000..5b0c62ca6371
Binary files /dev/null and b/browser/themes/osx/tabbrowser/tab-background-start.png differ
diff --git a/browser/themes/osx/tabbrowser/tab-bottom-hover-active.png b/browser/themes/osx/tabbrowser/tab-bottom-hover-active.png
deleted file mode 100644
index a5fdaba4bb0f..000000000000
Binary files a/browser/themes/osx/tabbrowser/tab-bottom-hover-active.png and /dev/null differ
diff --git a/browser/themes/osx/tabbrowser/tab-bottom-normal-active.png b/browser/themes/osx/tabbrowser/tab-bottom-normal-active.png
deleted file mode 100644
index 1a0dceea376d..000000000000
Binary files a/browser/themes/osx/tabbrowser/tab-bottom-normal-active.png and /dev/null differ
diff --git a/browser/themes/osx/tabbrowser/tab-bottom-selected-active.png b/browser/themes/osx/tabbrowser/tab-bottom-selected-active.png
deleted file mode 100644
index 0596cb28dd47..000000000000
Binary files a/browser/themes/osx/tabbrowser/tab-bottom-selected-active.png and /dev/null differ
diff --git a/browser/themes/osx/tabbrowser/tab-stroke-end.png b/browser/themes/osx/tabbrowser/tab-stroke-end.png
new file mode 100755
index 000000000000..3efb44726fa1
Binary files /dev/null and b/browser/themes/osx/tabbrowser/tab-stroke-end.png differ
diff --git a/browser/themes/osx/tabbrowser/tab-stroke-start.png b/browser/themes/osx/tabbrowser/tab-stroke-start.png
new file mode 100755
index 000000000000..8e0cd509f524
Binary files /dev/null and b/browser/themes/osx/tabbrowser/tab-stroke-start.png differ
diff --git a/browser/themes/osx/tabbrowser/tab-top-hover-active.png b/browser/themes/osx/tabbrowser/tab-top-hover-active.png
deleted file mode 100644
index f41b253d0bce..000000000000
Binary files a/browser/themes/osx/tabbrowser/tab-top-hover-active.png and /dev/null differ
diff --git a/browser/themes/osx/tabbrowser/tab-top-hover-active@2x.png b/browser/themes/osx/tabbrowser/tab-top-hover-active@2x.png
deleted file mode 100644
index a8215a283d57..000000000000
Binary files a/browser/themes/osx/tabbrowser/tab-top-hover-active@2x.png and /dev/null differ
diff --git a/browser/themes/osx/tabbrowser/tab-top-normal-active.png b/browser/themes/osx/tabbrowser/tab-top-normal-active.png
deleted file mode 100644
index 5987a2fe32d7..000000000000
Binary files a/browser/themes/osx/tabbrowser/tab-top-normal-active.png and /dev/null differ
diff --git a/browser/themes/osx/tabbrowser/tab-top-normal-active@2x.png b/browser/themes/osx/tabbrowser/tab-top-normal-active@2x.png
deleted file mode 100644
index 658b291d3940..000000000000
Binary files a/browser/themes/osx/tabbrowser/tab-top-normal-active@2x.png and /dev/null differ
diff --git a/browser/themes/osx/tabbrowser/tab-top-selected-active.png b/browser/themes/osx/tabbrowser/tab-top-selected-active.png
deleted file mode 100644
index 930e76588fed..000000000000
Binary files a/browser/themes/osx/tabbrowser/tab-top-selected-active.png and /dev/null differ
diff --git a/browser/themes/osx/tabbrowser/tab-top-selected-active@2x.png b/browser/themes/osx/tabbrowser/tab-top-selected-active@2x.png
deleted file mode 100644
index 7de41e77b273..000000000000
Binary files a/browser/themes/osx/tabbrowser/tab-top-selected-active@2x.png and /dev/null differ
diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css
index 8f82ae7673f9..61ebf18deffd 100644
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -8,6 +8,16 @@
%define tabCurveWidth 30px
%define tabCurveHalfWidth 15px
+/* image preloading hack */
+#TabsToolbar::after {
+ content: '';
+ display: block;
+ background-image:
+ url(chrome://browser/skin/tabbrowser/tab-background-end.png),
+ url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
+ url(chrome://browser/skin/tabbrowser/tab-background-start.png);
+}
+
.tabbrowser-tab,
.tabs-newtab-button {
-moz-appearance: none;