Bug 875326 - Improved tab stroke images with an inner highlight and fixed layering. r=mconley ui-r=shorlander

--HG--
extra : rebase_source : 3192812e43eb5c69d76707160d8eaef26a843c6f

browser/base/content/browser.xul

@@ -1163,10 +1163,10 @@
 
   <svg:svg height="0">
     <svg:clipPath id="tab-curve-clip-path-start" clipPathUnits="objectBoundingBox">
-      <svg:path d="M 1,0.0645 C 0.5683,0.0679,0.51693,0.3764,0.4837,0.5484 c -0.0522,0.2702,-0.1425,0.4194,-0.4333,0.4194 L 0,1 H 1.0333 V 0.0645 z"/>
+      <svg:path d="m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z"/>
     </svg:clipPath>
     <svg:clipPath id="tab-curve-clip-path-end" clipPathUnits="objectBoundingBox">
-      <svg:path d="M -0.0333,0.0645 C 0.4317,0.0679,0.4831,0.3764,0.5163,0.5484 c 0.0522,0.2702,+0.1425,0.4194,0.4333,0.4194 L 1,1 H -0.033 V 0.0645 z"/>
+      <svg:path d="m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z"/>
     </svg:clipPath>
     <svg:clipPath id="tab-clip-path-outer" clipPathUnits="objectBoundingBox">
       <svg:path d="m 0.2197,0 0,0.4264 c -0.0156,0.1238 -0.0201,0.2548 -0.0492,0.3730 C 0.1464,0.9030 0.0889,0.9397 0.0379,0.9355 L 0,1 1,1 0.9621,0.9355 c -0.0511,0.0042 -0.1085,-0.0322 -0.1326,-0.1361 -0.0292,-0.1152 -0.0334,-0.2486 -0.0492,-0.3730 L 0.7803,0 z"/>

browser/themes/linux/browser.css

@@ -1605,11 +1605,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   background-image: linear-gradient(to top, rgba(0,0,0,.3) 1px, rgba(0,0,0,.05) 1px, transparent 50%);
 }
 
-.tab-background-middle[selected=true]:-moz-lwtheme {
-  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
-                    @fgTabTexture@;
-}
-
 .tabbrowser-tab:-moz-lwtheme {
   color: inherit;
 }

browser/themes/linux/linuxShared.inc

@@ -7,4 +7,4 @@
 %define toolbarHighlight rgba(255,255,255,.3)
 %define fgTabTexture linear-gradient(transparent 0px, transparent 2px, hsla(0,0%,100%,0.35) 2px, hsla(0,0%,100%,0.35) 3px, hsla(0,0%,100%,0.65) 3px, hsla(0,0%,100%,0.65) 4px, @toolbarHighlight@)
 %define fgTabTextureLWT @fgTabTexture@
-%define fgTabBackgroundMiddle @fgTabTexture@, linear-gradient(transparent 0px, transparent 2px, -moz-dialog 2px, -moz-dialog)
+%define fgTabBackgroundMiddle linear-gradient(transparent 0px, transparent 2px, -moz-dialog 2px, -moz-dialog)

browser/themes/osx/browser-lightweightTheme.css

@@ -21,7 +21,7 @@
 #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle[selected=true]:-moz-lwtheme {
   background-attachment: scroll, scroll, fixed;
   background-color: transparent;
-  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle-lwtheme.png),
+  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
                     @fgTabTextureLWT@;/*,
                     lwtHeader;*/
   background-position: 0 0, 0 0, right top;

browser/themes/osx/jar.mn

@@ -195,7 +195,6 @@ browser.jar:
   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-active-middle@2x.png               (tabbrowser/tab-active-middle@2x.png)
-  skin/classic/browser/tabbrowser/tab-active-middle-lwtheme.png          (tabbrowser/tab-active-middle-lwtheme.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)

browser/themes/osx/shared.inc

@@ -1,10 +1,10 @@
 %include ../../../toolkit/themes/osx/global/shared.inc
 %include ../shared/browser.inc
 
-%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 fgTabTexture linear-gradient(transparent, transparent 2px, hsla(0,0%,100%,0.6) 2px, hsla(0,0%,100%,0.6) 3px, hsl(0,0%,99%) 3px, hsl(0,0%,92%))
 %define toolbarColorLWT rgba(253,253,253,0.45)
 %define fgTabTextureLWT linear-gradient(transparent, transparent 2px, rgba(254,254,254,0.72) 2px, @toolbarColorLWT@)
-%define fgTabBackgroundMiddle linear-gradient(transparent, transparent)
+%define fgTabBackgroundMiddle @fgTabTexture@
 %define hudButton -moz-appearance: none; color: #434343; border-radius: 4px; border: 1px solid #b5b5b5; background: linear-gradient(#fff, #f2f2f2); box-shadow: inset 0 1px rgba(255,255,255,.8), inset 0 0 1px rgba(255,255, 255,.25), 0 1px rgba(255,255,255,.3); background-clip: padding-box; background-origin: padding-box; padding: 2px 6px;
 %define hudButtonPressed box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255,255,255,.3);
 %define hudButtonFocused box-shadow: 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 2px 1px -moz-mac-focusring;

browser/themes/shared/tabs.inc.css

@@ -133,6 +133,7 @@
   background-size: 100% 100%;
   content: "";
   display: -moz-box;
+  position: relative;
 }
 
 .tab-background-start[selected=true]::before,
@@ -172,6 +173,7 @@
 .tab-background-middle[selected=true] {
   background-color: transparent;
   background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
+                    @fgTabTexture@,
                     @fgTabBackgroundMiddle@;
   background-repeat: repeat-x;
   background-size: 100% 100%;
@@ -179,6 +181,8 @@
 
 /* Selected tab lightweight theme styles */
 .tab-background-middle[selected=true]:-moz-lwtheme {
+  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
+                    @fgTabTextureLWT@;
   /* Don't stretch the LWT header images */
   background-size: 100% 100%, 100% 100%, auto auto;
 }
@@ -188,10 +192,6 @@
   background-image: @fgTabTextureLWT@;
 }
 
-.tab-background-middle[selected=true]:-moz-lwtheme {
-  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle-lwtheme.png), @fgTabTextureLWT@;
-}
-
 .tab-background-start[selected=true]:-moz-lwtheme::before,
 .tab-background-end[selected=true]:-moz-lwtheme::before,
 .tab-background-middle[selected=true]:-moz-lwtheme {
@@ -253,6 +253,7 @@
   background-size: 3px 100%;
   content: "";
   display: -moz-box;
+  margin-bottom: 1px;
   width: 3px;
 }
 

browser/themes/windows/browser-aero.css

@@ -34,6 +34,7 @@
 
   .tab-background-middle[selected=true]:not(:-moz-lwtheme) {
     background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
+                      @fgTabTexture@,
                       linear-gradient(transparent, transparent 2px, @customToolbarColor@ 2px, @customToolbarColor@);
   }
 

browser/themes/windows/browser-lightweightTheme.css

@@ -22,7 +22,7 @@
 #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle[selected=true]:-moz-lwtheme {
   background-attachment: scroll, scroll, fixed;
   background-color: transparent;
-  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle-lwtheme.png),
+  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
                     @fgTabTextureLWT@;/*,
                     lwtHeader;*/
   background-position: 0 0, 0 0, right top;

browser/themes/windows/browser.css

@@ -72,17 +72,17 @@
   }
 
   #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[inactive] ~ #TabsToolbar:not(:-moz-lwtheme) {
-    background: linear-gradient(to top, @toolbarShadowColor@ 1px, transparent 1px),
+    background: linear-gradient(to top, @toolbarShadowColor@ 2px, transparent 2px),
                 linear-gradient(rgba(50%,50%,50%,0), ActiveCaption 85%);
     color: CaptionText;
   }
   #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[inactive] ~ #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
-    background: linear-gradient(to top, @toolbarShadowColor@ 1px, transparent 1px),
+    background: linear-gradient(to top, @toolbarShadowColor@ 2px, transparent 2px),
                 linear-gradient(rgba(50%,50%,50%,0), InactiveCaption 85%);
     color: InactiveCaptionText;
   }
   #TabsToolbar:-moz-lwtheme {
-    background: linear-gradient(to top, @toolbarShadowColor@ 1px, transparent 1px);
+    background: linear-gradient(to top, @toolbarShadowColor@ 2px, transparent 2px);
   }
   #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
     visibility: hidden;
@@ -1518,7 +1518,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 
 #TabsToolbar:not(:-moz-lwtheme),
 #TabsToolbar[tabsontop=false] {
-  background-image: linear-gradient(to top, @toolbarShadowColor@ 1px, rgba(0,0,0,.05) 1px, transparent 50%);
+  background-image: linear-gradient(to top, @toolbarShadowColor@ 2px, rgba(0,0,0,.05) 2px, transparent 50%);
 }
 
 #main-window[tabsintitlebar] #TabsToolbar {

browser/themes/windows/jar.mn

@@ -142,7 +142,6 @@ browser.jar:
         skin/classic/browser/tabbrowser/loading.png                  (tabbrowser/loading.png)
         skin/classic/browser/tabbrowser/tab.png                      (tabbrowser/tab.png)
         skin/classic/browser/tabbrowser/tab-active-middle.png        (tabbrowser/tab-active-middle.png)
-        skin/classic/browser/tabbrowser/tab-active-middle-lwtheme.png (tabbrowser/tab-active-middle-lwtheme.png)
         skin/classic/browser/tabbrowser/tab-arrow-left.png           (tabbrowser/tab-arrow-left.png)
         skin/classic/browser/tabbrowser/tab-arrow-left-inverted.png  (tabbrowser/tab-arrow-left-inverted.png)
         skin/classic/browser/tabbrowser/tab-background-start.png     (tabbrowser/tab-background-start.png)
@@ -411,7 +410,6 @@ browser.jar:
         skin/classic/aero/browser/tabbrowser/loading.png             (tabbrowser/loading.png)
         skin/classic/aero/browser/tabbrowser/tab.png                 (tabbrowser/tab.png)
         skin/classic/aero/browser/tabbrowser/tab-active-middle.png   (tabbrowser/tab-active-middle.png)
-        skin/classic/aero/browser/tabbrowser/tab-active-middle-lwtheme.png (tabbrowser/tab-active-middle-lwtheme.png)
         skin/classic/aero/browser/tabbrowser/tab-arrow-left.png      (tabbrowser/tab-arrow-left.png)
         skin/classic/aero/browser/tabbrowser/tab-arrow-left-inverted.png (tabbrowser/tab-arrow-left-inverted.png)
         skin/classic/aero/browser/tabbrowser/tab-background-start.png    (tabbrowser/tab-background-start.png)