Bug 702225 - revised nav bar button styling. r=shorlander
authorDão Gottwald <dao@mozilla.com>
Tue, 21 Feb 2012 11:24:28 +0100
changeset 88796 8bca9af041025ba4b40b83fb1213d20137202b4c
parent 88795 6d0f16d85f276ccf5bdea56ca9ea1cbb4455e3f6
child 88797 5ba9a4f411286b01dccee20658fad5984c653f6b
push id975
push userffxbld
push dateTue, 13 Mar 2012 21:39:16 +0000
treeherdermozilla-aurora@99faebf9dc36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersshorlander
bugs702225
milestone13.0a1
Bug 702225 - revised nav bar button styling. r=shorlander
browser/base/content/browser.xul
browser/themes/winstripe/browser.css
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1050,21 +1050,17 @@
       <statusbar id="status-bar" ordinal="1000"/>
     </toolbar>
   </vbox>
 
 #ifndef XP_UNIX
   <svg:svg height="0">
     <svg:mask id="winstripe-keyhole-forward-mask" maskContentUnits="objectBoundingBox">
       <svg:rect x="0" y="0" width="1" height="1" fill="white"/>
-      <svg:circle cx="-0.46" cy="0.5" r="0.63"/>
-    </svg:mask>
-    <svg:mask id="winstripe-keyhole-forward-mask-hover" maskContentUnits="objectBoundingBox">
-      <svg:rect x="0" y="0" width="1" height="1" fill="white"/>
-      <svg:circle cx="-0.35" cy="0.5" r="0.58"/>
+      <svg:circle cx="-0.34" cy="0.5" r="0.61"/>
     </svg:mask>
     <svg:mask id="winstripe-urlbar-back-button-mask" maskContentUnits="userSpaceOnUse">
       <svg:rect x="0" y="0" width="10000" height="50" fill="white"/>
       <svg:circle cx="-11" cy="13" r="15"/>
     </svg:mask>
   </svg:svg>
 #endif
 #ifdef XP_MACOSX
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -681,27 +681,32 @@ menuitem.bookmark-item {
   list-style-image: url("chrome://browser/skin/Toolbar.png") !important;
 }
 
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
 @navbarLargeIcons@ .toolbarbutton-1 {
   -moz-appearance: none;
   padding: 1px 5px;
-  background: rgba(151,152,153,.05)
-              -moz-linear-gradient(rgba(251,252,253,.95), rgba(246,247,248,.47) 49%, 
-                                   rgba(231,232,233,.45) 51%, rgba(225,226,229,.3));
-  background-clip: padding-box;
+  background: hsla(210,48%,90%,.1)
+              -moz-linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.45) 49%,
+                                   rgba(255,255,255,.35) 51%, rgba(255,255,255,.1))
+              padding-box;
   border-radius: 2.5px;
   border: 1px solid;
-  border-color: rgba(0,0,0,.12) rgba(0,0,0,.19) rgba(0,0,0,.38);
-  box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
-              0 0 0 2px rgba(255,255,255,.1) inset;
+  border-color: hsla(210,54%,20%,.13) hsla(210,54%,20%,.16) hsla(210,54%,20%,.2);
+  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
+              0 0 0 1px rgba(255,255,255,.3) inset,
+              0 1px 0 hsla(210,54%,20%,.02),
+              /* allows winstripe-keyhole-forward-mask to be used for non-hover as well as hover: */
+              0 0 2px hsla(210,54%,20%,0);
   color: black;
   text-shadow: 0 0 2px white;
+  -moz-transition-property: background-color, border-color, box-shadow;
+  -moz-transition-duration: 250ms;
 }
 
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   padding-left: 3px;
   padding-right: 3px;
 }
 
 @navbarLargeIcons@ .toolbarbutton-1[type="menu-button"] {
@@ -750,40 +755,40 @@ menuitem.bookmark-item {
 
 @navbarLargeIcons@ .toolbarbutton-1[disabled="true"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 @navbarLargeIcons@ .toolbarbutton-1[disabled="true"] > .toolbarbutton-icon {
   opacity: 1;
 }
 
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):not(:active):hover,
 @navbarLargeIcons@ .toolbarbutton-1:not([open="true"]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
-@navbarLargeIcons@ .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):not([checked="true"]):not([open="true"]):not(:active):hover,
-@navbarLargeIcons@ #back-button:not([disabled="true"]):not([open]):not(:active):hover > .toolbarbutton-icon {
-  background-color: hsla(190,60%,70%,.5);
-  border-color: hsla(190,50%,65%,.8) hsla(190,50%,50%,.8) hsla(190,50%,40%,.8);
-  box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
-              0 0 0 1.5px rgba(255,255,255,.1) inset,
-              0 0 3.5px hsl(190,90%,80%);
-  -moz-transition: background-color .4s ease-in,
-                   border-color .3s ease-in,
-                   box-shadow .3s ease-in;
+@navbarLargeIcons@ .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):not([checked="true"]):not([open="true"]):not(:active):hover {
+  background-color: hsla(210,48%,96%,.75);
+  border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4);
+  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
+              0 0 0 1px rgba(255,255,255,.3) inset,
+              0 1px 0 hsla(210,54%,20%,.03),
+              0 0 2px hsla(210,54%,20%,.1);
 }
 
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
 @navbarLargeIcons@ .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
 @navbarLargeIcons@ .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker,
 @navbarLargeIcons@ .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):hover:active,
 @navbarLargeIcons@ .toolbarbutton-1:not([type="menu-button"])[checked="true"],
 @navbarLargeIcons@ .toolbarbutton-1[open="true"] {
-  background-color: transparent;
-  border-color: rgba(0,0,0,.65) rgba(0,0,0,.55) rgba(0,0,0,.5);
-  box-shadow: 0 0 6.5px rgba(0,0,0,.4) inset,
-              0 0 2px rgba(0,0,0,.4) inset,
-              0 1px 0 rgba(255,255,255,.4);
+  background-color: hsla(210,54%,20%,.2);
+  border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4);
+  box-shadow: 0 1px 1px rgba(0,0,0,.1) inset,
+              0 0 2px rgba(0,0,0,.3) inset,
+              /* allows winstripe-keyhole-forward-mask to be used for non-hover as well as hover: */
+              0 1px 0 hsla(210,54%,20%,0),
+              0 0 2px hsla(210,54%,20%,0);
   text-shadow: none;
+  -moz-transition: none;
 }
 
 @navbarLargeIcons@ .toolbarbutton-1[checked="true"]:not(:active):hover {
   background-color: rgba(90%,90%,90%,.4);
   -moz-transition: background-color .4s;
 }
 
 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
@@ -899,38 +904,43 @@ toolbar[mode="full"] .toolbarbutton-1 > 
 @navbarLargeIcons@ #back-button:-moz-locale-dir(rtl) {
   border-radius: 10000px 0 0 10000px;
 }
 
 @navbarLargeIcons@ #back-button > .toolbarbutton-icon {
   border-radius: 10000px;
   padding: 5px;
   border: none;
-  background-image: -moz-linear-gradient(rgba(251,252,253,.97), rgba(246,247,248,.5) 49%, 
-                                         rgba(231,232,233,.45) 51%, rgba(225,226,229,.2));
-  box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
-              0 0 0 2px rgba(255,255,255,.1) inset,
-              0 0 0 1px rgba(0,0,0,.15),
-              0 1px 0 rgba(0,0,0,.4);
+  background: hsla(210,48%,90%,.1)
+              -moz-linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.45) 49%,
+                                   rgba(255,255,255,.35) 51%, rgba(255,255,255,.67));
+  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
+              0 0 0 1px rgba(255,255,255,.3) inset,
+              0 1px 0 hsla(210,54%,20%,.02),
+              0 0 0 1px rgba(0,0,0,.15);
+  -moz-transition-property: background-color, box-shadow;
+  -moz-transition-duration: 250ms;
 }
 
 @navbarLargeIcons@ #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
-  box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
-              0 0 0 2px rgba(255,255,255,.1) inset,
-              0 0 0 1px hsla(190,50%,40%,.3),
-              0 1px 0 rgba(0,0,0,.4),
-              0 0 5px 1px hsl(190,90%,80%);
+  background-color: hsla(210,48%,96%,.75);
+  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
+              0 0 0 1px rgba(255,255,255,.1) inset,
+              0 1px 0 hsla(210,54%,20%,.03),
+              0 0 0 1px rgba(0,0,0,.2),
+              0 0 2px 1px hsla(210,54%,20%,.2);
 }
 
 @navbarLargeIcons@ #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
 @navbarLargeIcons@ #back-button[open="true"] > .toolbarbutton-icon {
-  box-shadow: 0 0 6.5px rgba(0,0,0,.4) inset,
-              0 0 2px rgba(0,0,0,.4) inset,
-              0 0 0 1px rgba(0,0,0,.65),
-              0 2px 0 rgba(255,255,255,.4);
+  background-color: hsla(210,54%,20%,.2);
+  box-shadow: 0 1px 1px rgba(0,0,0,.1) inset,
+              0 0 2px rgba(0,0,0,.3) inset,
+              0 0 0 1px rgba(0,0,0,.2);
+  -moz-transition: none;
 }
 
 @navbarLargeIcons@[currentset*="unified-back-forward-button"],
 @navbarLargeIcons@:not([currentset]) {
   padding-top: 3px;
   padding-bottom: 5px;
 }
 
@@ -942,23 +952,16 @@ toolbar[mode="full"] .toolbarbutton-1 > 
 @navbarLargeIcons@ #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 !important;
   padding-left: 7px;
   padding-right: 3px;
 }
 
-@navbarLargeIcons@ #forward-button:not([disabled="true"]):not(:active):hover {
-  /*mask: url(keyhole-forward-mask.svg#mask-hover);*/
-  mask: url(chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask-hover);
-  /* Don't animate the box shadow, as the blur and spread radii affect the mask. */
-  -moz-transition: background-color .4s ease-in;
-}
-
 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
   list-style-image: url("chrome://browser/skin/menu-back.png") !important;
 }
 
 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
   list-style-image: url("chrome://browser/skin/menu-forward.png") !important;