Bug 1388589 - Add Button States to Items in the Location Bar. r=dao
authorDrew Willcoxon <adw@mozilla.com>
Sat, 02 Sep 2017 14:59:09 -0700
changeset 428426 31c8cec38f4677dd87156c8a0a55290f3fc1a67c
parent 428425 2b0d4df90489db8e1922c28cf3c9fc973ce86d0b
child 428427 f08a3cf8fcb64c1e710e41e09733ef9094b1a080
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1388589
milestone57.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 1388589 - Add Button States to Items in the Location Bar. r=dao MozReview-Commit-ID: EseMI7z8DBo
browser/themes/shared/toolbarbuttons.inc.css
browser/themes/shared/urlbar-searchbar.inc.css
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -1,16 +1,19 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
   --toolbarbutton-hover-background: hsla(240,5%,5%,.1);
   --toolbarbutton-active-background: hsla(240,5%,5%,.15);
 
+  --toolbarbutton-hover-transition-duration: 150ms;
+  --toolbarbutton-active-transition-duration: 10ms;
+
   --toolbarbutton-inner-padding: 6px;
 
   --backbutton-background: hsla(0,100%,100%,.8);
   --backbutton-hover-background: var(--backbutton-background);
   --backbutton-active-background: var(--toolbarbutton-active-background);
   --backbutton-border-color: hsla(240,5%,5%,.3);
 
   /* This default value of --toolbarbutton-height is defined to prevent
@@ -105,17 +108,17 @@ toolbar .toolbarbutton-1 > menupopup.cui
 .findbar-button > .toolbarbutton-text,
 toolbarbutton.bookmark-item:not(.subviewbutton),
 toolbar .toolbarbutton-1 > .toolbarbutton-icon,
 toolbar .toolbarbutton-1 > .toolbarbutton-text,
 toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
   padding: var(--toolbarbutton-inner-padding);
   border-radius: var(--toolbarbutton-border-radius);
   transition-property: background-color, border-color, box-shadow;
-  transition-duration: 150ms;
+  transition-duration: var(--toolbarbutton-hover-transition-duration);
 }
 
 toolbar .toolbarbutton-1 > .toolbarbutton-icon {
   /* horizontal padding + actual icon width */
   max-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
 }
 
 .bookmark-item > .toolbarbutton-menu-dropmarker,
@@ -173,17 +176,17 @@ toolbar .toolbarbutton-1:not([disabled=t
 
 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),
 toolbarbutton.bookmark-item[open="true"],
 toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
 toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
 toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
   background-color: var(--toolbarbutton-active-background);
-  transition-duration: 10ms;
+  transition-duration: var(--toolbarbutton-active-transition-duration);
   color: inherit;
 }
 
 toolbar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
   background-color: var(--toolbarbutton-hover-background);
   transition: background-color .4s;
 }
 
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -113,18 +113,16 @@
 #pageAction-urlbar-sendToDevice-fxa {
   list-style-image: url("chrome://browser/skin/sync.svg");
 }
 
 /* URL bar and page action buttons */
 
 #page-action-buttons {
   -moz-box-align: center;
-  /* Add more space between the last icon and the urlbar's edge. */
-  margin-inline-end: 3px;
 }
 
 #pageActionSeparator {
   /* This draws the separator the same way that #urlbar-display-box draws its
      left and right borders, which end up looking like separators.  It might not
      be the best way in this case, but it makes sure that all these vertical
      lines in the urlbar look the same: same height, vertical position, etc. */
   border-inline-start: 1px solid var(--urlbar-separator-color);
@@ -153,28 +151,49 @@
 
 #userContext-icons,
 #urlbar-zoom-button {
   margin-left: 6px;
   margin-right: 6px;
 }
 
 .urlbar-icon {
-  padding: 0 6px;
-  /* 16x16 icon with border-box sizing */
   width: 28px;
-  height: 16px;
+  height: 28px;
+  /* 28x28 box - 16x16 image = 12x12 padding, 6 on each side */
+  padding: 6px;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.6;
   color: inherit;
+  transition-property: background-color;
+  transition-duration: var(--toolbarbutton-hover-transition-duration);
+}
+
+:root[uidensity=compact] .urlbar-icon {
+  width: 24px;
+  height: 24px;
+  /* 24x24 box - 16x16 image = 8x8 padding, 4 on each side */
+  padding: 4px;
+}
+
+:root[uidensity=touch] .urlbar-icon {
+  width: 30px;
+  height: 30px;
+  /* 30x30 box - 16x16 image = 14x14 padding, 7 on each side */
+  padding: 7px;
 }
 
 .urlbar-icon:hover {
-  fill-opacity: 0.8;
+  background-color: hsla(0,0%,80%,.4);
+}
+
+.urlbar-icon:hover:active {
+  background-color: hsla(0,0%,80%,.45);
+  transition-duration: var(--toolbarbutton-active-transition-duration);
 }
 
 .urlbar-go-button,
 .search-go-button {
   list-style-image: url("chrome://browser/skin/back.svg");
   width: 26px;
 }