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 draft
authorDão Gottwald <dao@mozilla.com>
Wed, 06 Sep 2017 16:33:22 +0200
changeset 659998 9548eb2a6e2ef0b189703ec8752bdb9631d94867
parent 659873 c959327c6b75cd4930a6ea087583c38b805e7524
child 730118 e265bdf9878f95d6ed1cb5970b98fd5f47aacfc2
push id78270
push userdgottwald@mozilla.com
push dateWed, 06 Sep 2017 14:33:50 +0000
reviewersjohannh
bugs1397285
milestone57.0a1
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);
 }