Bug 568037 - Adjust toolbar backgrounds and gradients for the new theme. rs=gavin
authorDão Gottwald <dao@mozilla.com>
Fri, 11 Jun 2010 14:15:37 +0200
changeset 43542 c568ecf0b5afd76f4d481138fdac25e71921806a
parent 43541 1b3956e909ddeac1830ef3f959fcc62e71279414
child 43543 37ed46e84dfbb0921b61f9bd181386ff4d4e12cb
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgavin
bugs568037
milestone1.9.3a6pre
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 568037 - Adjust toolbar backgrounds and gradients for the new theme. rs=gavin
browser/themes/winstripe/browser/browser-aero.css
browser/themes/winstripe/browser/browser.css
--- a/browser/themes/winstripe/browser/browser-aero.css
+++ b/browser/themes/winstripe/browser/browser-aero.css
@@ -1,28 +1,46 @@
 %define WINSTRIPE_AERO
 %include browser.css
 %undef WINSTRIPE_AERO
 
+%define customToolbarColor rgb(227,237,246)
+
+@media all and (-moz-windows-default-theme) {
+  #navigator-toolbox > toolbar:not(:-moz-lwtheme) {
+    background-color: @customToolbarColor@;
+  }
+
+  #navigator-toolbox[tabsontop="true"] > #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
+    background-image: -moz-radial-gradient(center top, white, rgba(255,255,255,0) 60%),
+                      -moz-linear-gradient(left, transparent, transparent 1px,
+                                                 @toolbarHighlight@ 1px, @toolbarHighlight@),
+                      -moz-linear-gradient(left, transparent, transparent 1px,
+                                                 @customToolbarColor@ 1px, @customToolbarColor@);
+  }
+}
+
 @media all and (-moz-windows-compositor) {
   #main-window:not(:-moz-lwtheme) {
     -moz-appearance: -moz-win-glass;
     background: transparent;
   }
 
-  #navigator-toolbox:not(:-moz-lwtheme),
-  #navigator-toolbox > toolbar {
-    -moz-appearance: none;
-    background: transparent;
-    border-style: none;
+  #toolbar-menubar:not(:-moz-lwtheme),
+  #navigator-toolbox[tabsontop="true"] > #TabsToolbar:not(:-moz-lwtheme),
+  #navigator-toolbox:not([tabsontop="true"]) > #nav-bar:not(:-moz-lwtheme),
+  #navigator-toolbox:not([tabsontop="true"]) > #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar:last-child:not(:-moz-lwtheme) {
+    background: transparent !important;
+    color: black;
+    text-shadow: 0 0 .7em white, 0 0 .7em white, 0 1px 0 rgba(255,255,255,.4);
   }
 
-  #navigator-toolbox:not(:-moz-lwtheme) {
-    color: black;
-    text-shadow: 0 0 .7em white, 0 0 .7em white, 0 1px 0 rgba(255,255,255,.4);
+  #navigator-toolbox[tabsontop="true"] > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
+    border-left: 1px solid ThreeDShadow;
+    border-right: 1px solid ThreeDShadow;
   }
 
   #browser:not(:-moz-lwtheme),
   #browser-bottombox:not(:-moz-lwtheme) {
     background-color: -moz-dialog;
   }
 
   #urlbar,
@@ -75,21 +93,16 @@
 
 @media not all and (-moz-windows-compositor) {
   #print-preview-toolbar:not(:-moz-lwtheme) {
     -moz-appearance: -moz-win-browsertabbar-toolbox;
   }
 }
 
 @media all and (-moz-windows-default-theme) {
-  #navigator-toolbox > toolbar {
-    -moz-appearance: none;
-    border-style: none;
-  }
-
   /* Bug 413060, comment 16: Vista Aero is a special case where we use a
      tooltip appearance for the address bar popup panels */
   #identity-popup,
   #editBookmarkPanel {
     -moz-appearance: tooltip;
     color: InfoText;
   }
 
--- a/browser/themes/winstripe/browser/browser.css
+++ b/browser/themes/winstripe/browser/browser.css
@@ -41,37 +41,61 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
 @import url("chrome://global/skin/");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
+%filter substitution
+%define toolbarHighlight rgba(255,255,255,.5)
+
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
 }
 
 #main-menubar {
   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
 }
 
-#nav-bar {
+#navigator-toolbox {
+  -moz-appearance: none;
+  border-top: none;
+  background-color: transparent;
+}
+
+#navigator-toolbox[tabsontop="true"] {
+  border-bottom: 1px solid ThreeDShadow;
+}
+
+#navigator-toolbox > toolbar:not(:-moz-lwtheme) {
   -moz-appearance: none;
   border-style: none;
+  background-color: -moz-Dialog;
+}
+
+#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar)[iconsize="small"],
+#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar)[defaulticonsize="small"]:not([iconsize]) {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+#nav-bar:not(:-moz-lwtheme) {
+  background-image: -moz-linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
+}
+
+#navigator-toolbox:not([tabsontop="true"]) > #toolbar-menubar:not(:-moz-lwtheme) {
+  background-image: -moz-linear-gradient(@toolbarHighlight@, @toolbarHighlight@);
 }
 
 #personal-bookmarks {
   min-height: 24px;
 }
 
-#navigator-toolbox[inFullscreen="true"] {
-  border-top: none;
-}
-
 #print-preview-toolbar:not(:-moz-lwtheme) {
   -moz-appearance: toolbox;
 }
 
 statusbarpanel#statusbar-display {
   -moz-padding-start: 0;
 }
 
@@ -388,17 +412,22 @@ toolbar:not([iconsize="small"])[mode="ic
 toolbar:not([iconsize="small"])[mode="icons"] #back-button > .toolbarbutton-icon {
   width: auto;
   height: auto;
 }
 
 toolbar:not([iconsize="small"])[mode="icons"][currentset*="unified-back-forward-button"],
 #nav-bar:not([iconsize="small"])[mode="icons"]:not([currentset]) {
   padding-top: 3px;
-  padding-bottom: 3px;
+  padding-bottom: 5px;
+}
+
+#navigator-toolbox[tabsontop="true"] > toolbar:not([iconsize="small"])[mode="icons"][currentset*="unified-back-forward-button"],
+#navigator-toolbox[tabsontop="true"] > #nav-bar:not([iconsize="small"])[mode="icons"]:not([currentset]) {
+  padding-top: 5px;
 }
 
 toolbar:not([iconsize="small"])[mode="icons"] #forward-button {
   /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
   mask: url(chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask);
   -moz-margin-start: -6px;
   padding-left: 7px;
   padding-right: 3px;
@@ -944,22 +973,25 @@ richlistitem[type="action"][actiontype="
 
 #navigator-throbber,
 #wrapper-navigator-throbber > #navigator-throbber {
   list-style-image: url("chrome://global/skin/icons/notloading_16.png");
 }
 
 /* Tabstrip */
 #TabsToolbar {
-  -moz-appearance: none;
   min-height: 0;
   padding: 0;
-  border-style: none;
-  background: -moz-linear-gradient(transparent, transparent 10%,
-                                   rgba(0,0,0,.03) 50%, rgba(0,0,0,.1) 90%, rgba(0,0,0,.2));
+  -moz-box-shadow: 0 -1px ThreeDShadow inset;
+}
+
+#TabsToolbar:not(:-moz-lwtheme),
+#navigator-toolbox:not([tabsontop="true"]) > #TabsToolbar {
+  background-image: -moz-linear-gradient(transparent, transparent 10%,
+                                         rgba(0,0,0,.03) 50%, rgba(0,0,0,.1) 90%, rgba(0,0,0,.2));
 }
 
 .tabbrowser-tabs:-moz-system-metric(touch-enabled) {
   min-height: .81cm;
 }
 
 .tabbrowser-tabs:not([overflow="true"]) {
   -moz-margin-start: 3px;
@@ -1009,21 +1041,23 @@ richlistitem[type="action"][actiontype="
                                                rgba(255,255,255,.6) 1px, rgba(255,255,255,.6));
 }
 
 .tabbrowser-tab[selected="true"] {
   background-image: -moz-linear-gradient(left, transparent, transparent 1px, white 1px, white);
   color: black;
 }
 
-#navigator-toolbox[tabsontop="true"] > #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab[selected="true"] {
+#navigator-toolbox[tabsontop="true"] > #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
   background-image: -moz-radial-gradient(center top, white, rgba(255,255,255,0) 60%),
                     -moz-linear-gradient(left, transparent, transparent 1px,
+                                               @toolbarHighlight@ 1px, @toolbarHighlight@),
+                    -moz-linear-gradient(left, transparent, transparent 1px,
                                                -moz-dialog 1px, -moz-dialog);
-  background-position: center center, -6px 0;
+  background-position: center center, -6px 0, -6px 0;
   color: -moz-dialogText;
 }
 
 .tabbrowser-tab:-moz-lwtheme[selected="true"] {
   text-shadow: none;
 }
 
 .tabbrowser-tab:-moz-lwtheme:not([selected="true"]) {