Bug 920589 - Only show TabsToolbar gradient in Windows classic themes. r=dao.
authorMike Conley <mconley@mozilla.com>
Wed, 25 Sep 2013 12:10:42 -0400
changeset 149182 bd0548b83afc56e3f3adea07a0e8663bb9fe53e5
parent 149181 10956082ccb7c7ad827dadde8c5d04975161b688
child 149183 ce4f9fca01b37aa7cb9c20f8f6c8f635caa0add4
push id454
push usermconley@mozilla.com
push dateWed, 25 Sep 2013 16:11:04 +0000
treeherderux@bd0548b83afc [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs920589
milestone27.0a1
Bug 920589 - Only show TabsToolbar gradient in Windows classic themes. r=dao.
browser/themes/windows/browser.css
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -73,39 +73,57 @@
 %ifdef WINDOWS_AERO
 @media not all and (-moz-windows-compositor) {
 %endif
   #toolbar-menubar {
     background-color: transparent !important;
   }
 
   #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
-    background: linear-gradient(to top, @toolbarShadowColor@ 2px, transparent 2px),
-                linear-gradient(rgba(50%,50%,50%,0), ActiveCaption 85%);
     color: CaptionText;
   }
+
   #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
-    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@ 2px, transparent 2px);
   }
+
   #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
     visibility: hidden;
   }
+
   #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
     -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
     visibility: visible;
   }
 %ifdef WINDOWS_AERO
 }
 %endif
 
+/**
+ * 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 gradient underneath
+ * the tabs.
+ */
+@media (-moz-windows-classic) {
+  #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
+    background: linear-gradient(to top, @toolbarShadowColor@ 2px, transparent 2px),
+                linear-gradient(rgba(50%,50%,50%,0), ActiveCaption 85%);
+  }
+
+  #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
+    background: linear-gradient(to top, @toolbarShadowColor@ 2px, transparent 2px),
+                linear-gradient(rgba(50%,50%,50%,0), InactiveCaption 85%);
+  }
+}
+
 #nav-bar {
   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 */
 }
 
 #personal-bookmarks {
   min-height: 24px;