Bug 858089 - Adjust tab height and polish selected tab stroke seam and toolbar highlight. r=mconley,dao

--HG--
extra : rebase_source : 19713992684aa70bd3f6b2364e9fb9e2e1829295

browser/themes/linux/browser.css

@@ -58,6 +58,16 @@
   background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
 }
 
+#nav-bar[tabsontop=true],
+#nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + toolbar,
+#nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar {
+  box-shadow: 0 1px 0 @toolbarHighlight@ inset;
+  margin-top: -1px; /* Move up 1px into the TabsToolbar */
+  /* Position the toolbar above the bottom of background tabs */
+  position: relative;
+  z-index: 1;
+}
+
 #personal-bookmarks {
   min-height: 29px;
 }
@@ -1589,9 +1599,28 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 
 %include ../shared/tabs.inc.css
 
+#tabbrowser-tabs {
+  /* override the global style to allow the selected tab to be above the nav-bar */
+  z-index: auto;
+}
+
 #TabsToolbar {
   min-height: 0;
   padding: 0;
+  position: relative;
+}
+
+/*
+ * Draw the bottom border of the tabstrip:
+ */
+#TabsToolbar::after {
+  content: "";
+  position: absolute;
+  bottom: 1px;
+  left: 0;
+  right: 0;
+  z-index: 0;
+  border-bottom: 1px solid hsla(0,0%,0%,.3);
 }
 
 #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme) {
@@ -1599,10 +1628,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   color: -moz-menubartext;
 }
 
-#TabsToolbar[tabsontop=true] {
-  box-shadow: 0 -1px 0 rgba(0,0,0,.1) inset;
-}
-
 #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) {
   -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
 }

browser/themes/linux/linuxShared.inc

@@ -5,6 +5,6 @@
 %filter substitution
 
 %define toolbarHighlight rgba(255,255,255,.3)
-%define fgTabTexture linear-gradient(transparent 0px, transparent 1px, hsla(0,0%,100%,0.35) 1px, hsla(0,0%,100%,0.35) 2px, hsla(0,0%,100%,0.65) 2px, hsla(0,0%,100%,0.65) 3px, @toolbarHighlight@)
+%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)

browser/themes/osx/browser.css

@@ -93,6 +93,11 @@ toolbox[tabsontop=true] > toolbar:not(#TabsToolbar):not(#nav-bar):not(:-moz-lwth
               linear-gradient(hsl(0,0%,93%), hsl(0,0%,83%));
   background-clip: border-box;
   background-origin: border-box !important;
+  box-shadow: inset 0 1px 0 hsla(0,0%,100%,.4);
+  margin-top: -1px;
+  /* Position the toolbar above the bottom of background tabs */
+  position: relative;
+  z-index: 1;
 }
 
 #navigator-toolbox[tabsontop=true] > toolbar:not(#TabsToolbar):-moz-lwtheme {
@@ -2261,11 +2266,11 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
 #TabsToolbar::after {
   content: '';
   position: absolute;
-  bottom: 0;
+  bottom: 1px;
   left: 0;
   right: 0;
   z-index: 0;
-  border-bottom: 1px solid hsla(0,0%,0%,.22);
+  border-bottom: 1px solid hsla(0,0%,0%,.3);
 }
 
 /* In tabs-on-bottom mode, fill the whole toolbar with the chrome

browser/themes/shared/tabs.inc.css

@@ -4,7 +4,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
 
-%define tabHeight 30px
+%define tabHeight 31px
 %define tabCurveWidth 30px
 %define tabCurveHalfWidth 15px
 
@@ -32,10 +32,10 @@
   -moz-box-align: stretch;
 }
 
-/* The selected tab should appear above adjacent tabs and .tabs-newtab-button */
+/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
 .tabbrowser-tab[selected=true] {
   position: relative;
-  z-index: 1;
+  z-index: 2;
 }
 
 .tab-background-middle {
@@ -128,7 +128,6 @@
 .tab-background-end[selected=true]::after {
   /* position ::after on top of its parent */
   -moz-margin-start: -@tabCurveWidth@;
-  margin-bottom: -1px;
   display: -moz-box;
 }
 

browser/themes/windows/browser.css

@@ -99,6 +99,11 @@
 #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + toolbar,
 #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar {
   background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
+  box-shadow: 0 1px 0 @toolbarHighlight@ inset;
+  margin-top: -1px; /* Move up 1px into the TabsToolbar */
+  /* Position the toolbar above the bottom of background tabs */
+  position: relative;
+  z-index: 1;
 }
 
 #personal-bookmarks {