Bug 915521 - Change gradient with transparency and moz-dialog on .tab-background-middle to a solid background-color. r=mconley

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 linear-gradient(transparent 0px, transparent 2px, -moz-dialog 2px, -moz-dialog)
+%define fgTabBackgroundColor -moz-dialog

browser/themes/osx/browser.css

@@ -2461,7 +2461,7 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   .tab-background-middle[selected=true] {
     background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png),
                       @fgTabTexture@,
-                      @fgTabBackgroundMiddle@;
+                      none;
   }
 
   .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,

browser/themes/osx/shared.inc

@@ -4,7 +4,7 @@
 %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%,93%))
 %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 none
+%define fgTabBackgroundColor transparent
 %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

@@ -173,24 +173,27 @@
 
 .tab-background-start[selected=true]::before,
 .tab-background-end[selected=true]::before {
-  background-color: -moz-dialog;
+  background-color: @fgTabBackgroundColor@;
   background-image: @fgTabTexture@;
   background-repeat: no-repeat;
 }
 
 .tab-background-middle[selected=true] {
-  background-color: transparent;
+  background-clip: padding-box, padding-box, content-box;
+  background-color: @fgTabBackgroundColor@;
   background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
                     @fgTabTexture@,
-                    @fgTabBackgroundMiddle@;
+                    none;
   background-repeat: repeat-x;
   background-size: auto 100%;
+  /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the
+     background-color doesn't extend above the top border. */
+  padding-top: 2px;
 }
 
 /* Selected tab lightweight theme styles */
 .tab-background-middle[selected=true]:-moz-lwtheme {
-  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
-                    @fgTabTextureLWT@;
+  background-color: transparent;
   /* Don't stretch the LWT header images */
   background-size: auto 100%, auto 100%, auto auto;
 }

browser/themes/windows/browser-aero.css

@@ -34,9 +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@);
+    background-color: @customToolbarColor@;
   }
 
   #navigator-toolbox:not(:-moz-lwtheme)::after {

browser/themes/windows/browser.css

@@ -11,7 +11,7 @@
 %include windowsShared.inc
 %filter substitution
 %define toolbarShadowColor hsla(209,67%,12%,0.35)
-%define fgTabBackgroundMiddle linear-gradient(transparent, transparent 2px, -moz-dialog 2px, -moz-dialog)
+%define fgTabBackgroundColor -moz-dialog
 %define navbarTextboxCustomBorder border-color: rgba(0,0,0,.32);
 %define forwardTransitionLength 150ms
 %define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-container