Bug 1384341 - Set a minimum size for the animation area so animations that are larger than toolbar buttons don't get clipped. r?mconley draft
authorJared Wein <jwein@mozilla.com>
Wed, 26 Jul 2017 14:20:28 -0400
changeset 619953 8620609e10aa6d378f82f3cf0fac3251ad5bf094
parent 619581 52285ea5e54c73d3ed824544cef2ee3f195f05e6
child 640556 e5ba3813f8a4730adba63d44e1b2753b1eddd367
push id71884
push userbmo:jaws@mozilla.com
push dateWed, 02 Aug 2017 22:32:41 +0000
reviewersmconley
bugs1384341
milestone57.0a1
Bug 1384341 - Set a minimum size for the animation area so animations that are larger than toolbar buttons don't get clipped. r?mconley MozReview-Commit-ID: 2n141CGVogi
browser/extensions/pocket/skin/shared/pocket.css
browser/themes/shared/toolbarbutton-icons.inc.css
browser/themes/shared/urlbar-searchbar.inc.css
--- a/browser/extensions/pocket/skin/shared/pocket.css
+++ b/browser/extensions/pocket/skin/shared/pocket.css
@@ -173,16 +173,17 @@ toolbar[brighttext] #pocket-button {
      of space above and below the icon to allow it to vertically center with the
      sprite's icon on top of the toolbar icon when using position:absolute;. */
   min-height: 54px;
   max-height: 54px;
 }
 
 #library-button[animate="pocket"] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
+  min-height: 54px; /* Minimum height must be equal to the height of the SVG sprite */
 }
 
 #library-button[animate="pocket"] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   background-image: url("chrome://pocket-shared/skin/library-pocket-animation.svg");
   width: 1078px;
   animation-name: library-pocket-animation;
   animation-duration: 768ms;
   animation-timing-function: steps(48);
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -379,16 +379,17 @@ toolbar:not([brighttext]) #bookmarks-men
   height: 36px; /* Height of each frame within the SVG sprite */
 }
 
 #nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   /* Height must be equal to height of toolbarbutton padding-box. --toolbarbutton-height
      is calculated and set during runtime by BrowserUtils.setToolbarButtonHeightProperty()
      before the animation begins. */
   height: var(--toolbarbutton-height);
+  min-height: 36px; /* Minimum height must be equal to the height of the SVG sprite */
 }
 
 #nav-bar-overflow-button[animate] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   animation-name: overflow-animation;
   animation-timing-function: steps(70);
   animation-duration: 1.1s;
   background-image: url("chrome://browser/skin/chevron-animation.svg");
   width: 1278px;
@@ -502,16 +503,17 @@ toolbar:not([brighttext]) #bookmarks-men
   min-width: 22px;
   max-width: 22px;
   min-height: 54px;
   max-height: 54px;
 }
 
 #library-button[animate="bookmark"] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   height: var(--toolbarbutton-height);
+  min-height: 54px; /* Minimum height must be equal to the height of the SVG sprite */
   background-image: url("chrome://browser/skin/library-bookmark-animation.svg");
   width: 1078px;
   animation-name: library-bookmark-animation;
   animation-duration: 768ms;
   animation-timing-function: steps(48);
 }
 
 #library-button[animate="bookmark"]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -184,16 +184,17 @@
   max-height: 33px;
 }
 
 #star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box > #star-button-animatable-image {
   background-image: url("chrome://browser/skin/bookmark-animation.svg");
   background-size: auto;
   list-style-image: none;
   height: var(--toolbarbutton-height);
+  min-height: 33px; /* Minimum height must be equal to the height of the SVG sprite */
   animation-name: bookmark-animation;
   animation-fill-mode: forwards;
   animation-iteration-count: 1;
   animation-timing-function: steps(19);
   animation-duration: 304ms;
   width: 660px;
 }