Bug 1397285 - Set standard toolbarbutton-1 icon size as width rather than max-width to reserve space for icons while they're loading. r=johannh
authorDão Gottwald <dao@mozilla.com>
Wed, 06 Sep 2017 16:33:22 +0200
changeset 379216 16290ce48f84f5c2224894155291c894ad759d0c
parent 379215 5857b229d11f90fbc8890e8580eed1bca2bdd8c1
child 379217 9435660523cb463d22b032c2f0d88b7565a7ab89
push id32452
push userarchaeopteryx@coole-files.de
push dateThu, 07 Sep 2017 10:31:07 +0000
treeherdermozilla-central@6469a2cb7df6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh
bugs1397285
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 1397285 - Set standard toolbarbutton-1 icon size as width rather than max-width to reserve space for icons while they're loading. r=johannh MozReview-Commit-ID: 28cKHeOamDh
browser/themes/shared/toolbarbuttons.inc.css
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -52,17 +52,17 @@ toolbar[brighttext] {
 }
 
 .toolbarbutton-1 > .toolbarbutton-icon {
   margin-inline-end: 0;
 }
 
 .toolbarbutton-1 > .toolbarbutton-icon,
 .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
-  max-width: 16px;
+  width: 16px;
 }
 
 #TabsToolbar .toolbarbutton-1,
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {
   margin: 0 0 var(--tab-toolbar-navbar-overlap);
 }
 
@@ -113,17 +113,17 @@ toolbar .toolbarbutton-1 > .toolbarbutto
   padding: var(--toolbarbutton-inner-padding);
   border-radius: var(--toolbarbutton-border-radius);
   transition-property: background-color, border-color, box-shadow;
   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);
+  width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
 }
 
 .bookmark-item > .toolbarbutton-menu-dropmarker,
 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
   display: none;
 }
 
 toolbar .toolbarbutton-1 > .toolbarbutton-text {
@@ -209,27 +209,27 @@ toolbar .toolbarbutton-1[checked]:not(:a
 }
 
 :root:not([uidensity=compact]) #back-button > .toolbarbutton-icon {
   background-color: var(--backbutton-background);
   background-origin: padding-box;
   background-clip: padding-box;
   border: 1px solid var(--backbutton-border-color);
   border-radius: 10000px;
-  max-width: 32px;
+  width: 32px;
   padding: 7px;
 }
 
 :root[uidensity=touch] #back-button {
   padding-top: 1px;
   padding-bottom: 1px;
 }
 
 :root[uidensity=touch] #back-button > .toolbarbutton-icon {
-  max-width: 38px;
+  width: 38px;
   padding: 10px;
 }
 
 :root:not([uidensity=compact]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
   background-color: var(--backbutton-hover-background) !important;
   box-shadow: 0 1px 6px hsla(0,0%,0%,.1);
   border-color: hsla(240,5%,5%,.35);
 }