Bug 1298449 - Add hover effect to the zoom indicator in the location bar. r=dao
authorMatthew Wein <mwein@mozilla.com>
Thu, 08 Sep 2016 14:48:14 +0100
changeset 354596 bc92a66cc0d50860a0c0a837289bcb3d416b3fec
parent 354595 54358335e1b1e6e920bab076ed512ff33ed3e322
child 354597 6a240891ba8afd09b89f079d0bd13e94c227e6b2
push id6570
push userraliiev@mozilla.com
push dateMon, 14 Nov 2016 12:26:13 +0000
treeherdermozilla-beta@f455459b2ae5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1298449
milestone51.0a1
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 1298449 - Add hover effect to the zoom indicator in the location bar. r=dao For the :hover state, I used the background color that was currently being used for the :active state. For the :active state, I bumped up the alpha from .1 to .15 to make it darker, and checked that it passes the WCAG tests. MozReview-Commit-ID: DLeSf6XAmhp
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/windows/browser.css
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -972,18 +972,22 @@ toolbaritem[cui-areatype="menu-panel"] >
   border: 1px solid ThreeDLightShadow;
 }
 
 #urlbar-zoom-button[animate="true"] {
   animation-name: urlbar-zoom-reset-pulse;
   animation-duration: 250ms;
 }
 
+#urlbar-zoom-button:hover {
+  background-color: hsla(0,0%,0%,.1);
+}
+
 #urlbar-zoom-button:hover:active {
-  background-color: hsla(0,0%,0%,.1);
+  background-color: hsla(0,0%,0%,.15);
 }
 
 #urlbar-zoom-button > .toolbarbutton-text {
   display: -moz-box;
 }
 
 #urlbar-zoom-button > .toolbarbutton-icon {
   display: none;
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -1684,18 +1684,23 @@ toolbar .toolbarbutton-1 > .toolbarbutto
   background-color: hsla(0,0%,0%,.05);
   border: 1px solid hsla(0,0%,0%,.1);
 }
 
 #urlbar-zoom-button[animate="true"] {
   animation-name: urlbar-zoom-reset-pulse;
   animation-duration: 250ms;
 }
+
+#urlbar-zoom-button:hover {
+  background-color: hsla(0,0%,0%,.1);
+}
+
 #urlbar-zoom-button:hover:active {
-  background-color: hsla(0,0%,0%,.1);
+  background-color: hsla(0,0%,0%,.15);
 }
 
 #urlbar-zoom-button > .toolbarbutton-text {
   display: -moz-box;
 }
 
 #urlbar-zoom-button > .toolbarbutton-icon {
   display: none;
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1417,18 +1417,22 @@ html|*.urlbar-input:-moz-lwtheme::placeh
   border: 1px solid ThreeDLightShadow;
 }
 
 #urlbar-zoom-button[animate="true"] {
   animation-name: urlbar-zoom-reset-pulse;
   animation-duration: 250ms;
 }
 
+#urlbar-zoom-button:hover {
+  background-color: hsla(0,0%,0%,.1);
+}
+
 #urlbar-zoom-button:hover:active {
-  background-color: hsla(0,0%,0%,.1);
+  background-color: hsla(0,0%,0%,.15);
 }
 
 #urlbar-zoom-button > .toolbarbutton-text {
   display: -moz-box;
 }
 
 #urlbar-zoom-button > .toolbarbutton-icon {
   display: none;