Bug 1405542 - Replace nav-bar top border and the tabs toolbar's negative margin with a box-shadow to avoid running into bug 477157. r=nhnt11

MozReview-Commit-ID: HFelefofjYY

--HG--
extra : rebase_source : 0d2d1f220a6a203ba0892b04f581678f258c73d7

browser/base/content/browser-tabsintitlebar.js

@@ -160,9 +160,7 @@ var TabsInTitlebar = {
       // then later set the properties affecting layout together in a batch.
 
       // Get the height of the tabs toolbar:
-      let tabsToolbar = $("TabsToolbar");
-      let tabsStyles = window.getComputedStyle(tabsToolbar);
-      let fullTabsHeight = rect(tabsToolbar).height + verticalMargins(tabsStyles);
+      let fullTabsHeight = rect($("TabsToolbar")).height;
 
       // Buttons first:
       let captionButtonsBoxWidth = rect($("titlebar-buttonbox-container")).width;

browser/themes/linux/browser.css

@@ -65,11 +65,9 @@
 }
 
 #TabsToolbar:not([collapsed="true"]) + #nav-bar {
-  border-top: 1px solid var(--tabs-border) !important;
-  background-clip: padding-box;
-  /* Position the toolbar above the bottom of background tabs */
+  box-shadow: 0 calc(-1 * var(--tab-toolbar-navbar-overlap)) 0 var(--tabs-border);
+  /* This is needed for some toolbar button animations. Gross :( */
   position: relative;
-  z-index: 1;
 }
 
 #nav-bar {
@@ -540,7 +538,6 @@ html|span.ac-emphasize-text-url {
 #TabsToolbar {
   min-height: 0;
   padding: 0;
-  margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap));
 }
 
 #TabsToolbar:not(:-moz-lwtheme) {

browser/themes/osx/browser.css

@@ -111,7 +111,7 @@
  * tabstrip can overlap it.
  */
 #main-window[tabsintitlebar] > #titlebar {
-  min-height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tab-toolbar-navbar-overlap));
+  min-height: calc(var(--tab-min-height) + var(--space-above-tabbar));
 }
 
 /** End titlebar **/
@@ -131,8 +131,7 @@
 #main-window:-moz-any([sizemode="fullscreen"],[customize-entered]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
 #main-window:not([tabsintitlebar]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
 #TabsToolbar:not([collapsed="true"]) + #nav-bar:-moz-lwtheme {
-  border-top: 1px solid var(--tabs-border);
-  background-clip: padding-box;
+  box-shadow: 0 calc(-1 * var(--tab-toolbar-navbar-overlap)) 0 var(--tabs-border);
   /* Position the toolbar above the bottom of background tabs */
   position: relative;
   z-index: 1;
@@ -811,8 +810,6 @@ html|span.ac-emphasize-text-url {
 
 #TabsToolbar {
   -moz-appearance: none;
-  /* overlap the nav-bar's top border */
-  margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap));
   padding-top: var(--space-above-tabbar);
 }
 

browser/themes/windows/browser.css

@@ -253,17 +253,16 @@
 }
 
 #TabsToolbar:not([collapsed="true"]) + #nav-bar {
-  /* Position the toolbar above the bottom of background tabs */
+  /* This is needed for some toolbar button animations. Gross :( */
   position: relative;
-  z-index: 1;
 }
 
 #nav-bar {
-  border-top: 1px solid var(--tabs-border) !important;
+  box-shadow: 0 calc(-1 * var(--tab-toolbar-navbar-overlap)) 0 var(--tabs-border);
 }
 @media (-moz-windows-compositor: 0) {
   #TabsToolbar[collapsed="true"] + #nav-bar {
-    border-top-style: none !important;
+    box-shadow: none;
   }
 }
 
@@ -777,7 +776,6 @@ html|span.ac-emphasize-text-url {
 #TabsToolbar {
   min-height: 0;
   padding: 0;
-  margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap)); /* overlap the nav-bar's top border */
 }
 
 %include ../shared/tabs.inc.css