Bug 989761 - Make sure background tabs have the right z-index in relation to the classic theme fog. r=dao, a=sledru.
authorMike Conley <mconley@mozilla.com>
Tue, 08 Apr 2014 10:39:33 -0400
changeset 183663 552251cb84b9
parent 183662 a90a4219b520
child 183664 3f2d6f68c415
push id3439
push usermconley@mozilla.com
push date2014-04-08 14:42 +0000
Treeherderresults
reviewersdao, sledru
bugs989761
milestone29.0
Bug 989761 - Make sure background tabs have the right z-index in relation to the classic theme fog. r=dao, a=sledru.
browser/themes/windows/browser.css
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -117,20 +117,23 @@
 /**
  * In the classic themes, the titlebar has a horizontal gradient, which is
  * problematic for reading the text of background tabs when they're in the
  * titlebar. We side-step this issue by layering our own background underneath
  * the tabs. Unfortunately, this requires a bunch of positioning in order to get
  * text and icons to not appear fuzzy.
  */
 @media (-moz-windows-classic) {
-  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) .tabbrowser-tab:not([selected=true]),
-  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) .tabs-newtab-button {
+  /**
+   * We need to bump up the z-index of the tabbrowser-tabs so that they appear
+   * over top of the fog we're applying for classic themes, as well as the nav-bar.
+   */
+  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #tabbrowser-tabs {
     position: relative;
-    z-index: 1;
+    z-index: 2;
   }
 
   #main-window[tabsintitlebar] #TabsToolbar:not(:-moz-lwtheme) {
     background-image: none;
     position: relative;
   }
 
   #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme)::after {
@@ -144,42 +147,55 @@
     content: "";
     display: -moz-box;
     height: 0;
     margin: 0 50px;
     position: absolute;
     pointer-events: none;
     top: 100%;
     width: -moz-available;
-    z-index: 0;
   }
 
   #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive::after {
     box-shadow: 0 0 50px 8px InactiveCaption;
   }
 
   #main-window[tabsintitlebar]:not([sizemode=fullscreen]) toolbar[customindex]:not(:-moz-lwtheme),
   #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #PersonalToolbar:not(:-moz-lwtheme) {
     position: relative;
   }
 
   /* Need to constrain the box shadow fade to avoid overlapping layers, see bug 886281. */
   #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #navigator-toolbox:not(:-moz-lwtheme) {
     overflow: -moz-hidden-unscrollable;
   }
 
-  #main-window[tabsintitlebar][sizemode=normal] .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox:not(:-moz-lwtheme) {
+  /**
+   * When the tabstrip is overflowed, pinned tab separators get position: absolute,
+   * which makes the pinned tab separators leak over the nav-bar highlight. Forcing
+   * the element to snap to the bottom of the client rect works around the issue.
+   */
+  #main-window[tabsintitlebar] #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
+    bottom: 0px;
+  }
+
+  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar .toolbarbutton-1 {
     position: relative;
+    z-index: 1;
   }
 
-  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar .toolbarbutton-1,
+  /**
+   * With the tabbrowser-tabs element z-index'd above the nav-bar, we now get the
+   * scrollbox button borders leaking over the nav-bar highlight. This transparent bottom
+   * border forces the scrollbox button borders to terminate a pixel early, working
+   * around the issue.
+   */
   #main-window[tabsintitlebar]:not([sizemode=fullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up,
   #main-window[tabsintitlebar]:not([sizemode=fullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down {
-    position: relative;
-    z-index: 1;
+    border-bottom: 1px solid transparent;
   }
 
   #main-window[tabsintitlebar]:not([inFullscreen]) .tab-close-button:not(:-moz-any(:hover,:-moz-lwtheme,[selected="true"])) {
     -moz-image-region: rect(0, 64px, 16px, 48px);
   }
 
   #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme {
     /* Render a window top border: */