Bug 1386406 - Update animation-duration of the Photon animations to match 60fps timing. r?sfoster draft
authorJared Wein <jwein@mozilla.com>
Tue, 01 Aug 2017 16:47:23 -0400
changeset 619300 11fe9059366a9d1e9c82334c9a776ab084dcfd77
parent 619271 b66ed83fbcb91db55a13a0ca881b1092aa31320b
child 640358 a3615ab20ab6989d186f52b7a0b6956aa03c0f83
push id71638
push userbmo:jaws@mozilla.com
push dateTue, 01 Aug 2017 20:57:09 +0000
reviewerssfoster
bugs1386406
milestone56.0a1
Bug 1386406 - Update animation-duration of the Photon animations to match 60fps timing. r?sfoster MozReview-Commit-ID: IgRr5LN4Xcl
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
@@ -179,17 +179,17 @@ toolbar[brighttext] #pocket-button {
 #library-button[animate="pocket"] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
 }
 
 #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-duration: 800ms;
   animation-timing-function: steps(48);
 }
 
 #library-button[animate="pocket"]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   animation-name: library-pocket-animation-rtl;
   transform: scaleX(-1);
 }
 
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -123,17 +123,17 @@ toolbar[brighttext] .toolbarbutton-1 {
 }
 
 #stop-reload-button[animate] > #reload-button:not([displaystop]):-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   animation-name: reload-to-stop-rtl;
 }
 
 #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   animation-timing-function: steps(25);
-  animation-duration: 400ms;
+  animation-duration: 417ms;
 }
 
 #stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   background-image: url("chrome://browser/skin/stop-to-reload.svg");
   width: 468px;
 }
 
 #stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
@@ -141,17 +141,17 @@ toolbar[brighttext] .toolbarbutton-1 {
 }
 
 #stop-reload-button[animate] > #reload-button[displaystop] + #stop-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   animation-name: stop-to-reload-rtl;
 }
 
 #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   animation-timing-function: steps(25);
-  animation-duration: 400ms;
+  animation-duration: 417ms;
 }
 
 #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   transform: translateX(-450px);
 }
 
 #reload-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   transform: scaleX(-1) translateX(-450px);
@@ -384,17 +384,17 @@ toolbar:not([brighttext]) #bookmarks-men
      is calculated and set during runtime by BrowserUtils.setToolbarButtonHeightProperty()
      before the animation begins. */
   height: var(--toolbarbutton-height);
 }
 
 #nav-bar-overflow-button[animate] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   animation-name: overflow-animation;
   animation-timing-function: steps(69);
-  animation-duration: 1104ms;
+  animation-duration: 1150ms;
   background-image: url("chrome://browser/skin/chevron-animation.svg");
   width: 1260px;
 }
 
 #nav-bar-overflow-button[animate]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   animation-name: overflow-animation-rtl;
 }
 
@@ -505,17 +505,17 @@ toolbar:not([brighttext]) #bookmarks-men
   max-height: 54px;
 }
 
 #library-button[animate="bookmark"] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   height: var(--toolbarbutton-height);
   background-image: url("chrome://browser/skin/library-bookmark-animation.svg");
   width: 1078px;
   animation-name: library-bookmark-animation;
-  animation-duration: 768ms;
+  animation-duration: 800ms;
   animation-timing-function: steps(48);
 }
 
 #library-button[animate="bookmark"]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   animation-name: library-bookmark-animation-rtl;
   transform: scaleX(-1);
 }
 
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -188,17 +188,17 @@
   background-image: url("chrome://browser/skin/bookmark-animation.svg");
   background-size: auto;
   list-style-image: none;
   height: var(--toolbarbutton-height);
   animation-name: bookmark-animation;
   animation-fill-mode: forwards;
   animation-iteration-count: 1;
   animation-timing-function: steps(19);
-  animation-duration: 304ms;
+  animation-duration: 317ms;
   width: 660px;
 }
 
 #star-button-box[animationsenabled] > #star-button[starred][animate]:-moz-locale-dir(rtl) + #star-button-animatable-box > #star-button-animatable-image {
   animation-name: bookmark-animation-rtl;
 }
 %endif /* MOZ_PHOTON_ANIMATIONS */
 %endif /* MOZ_PHOTON_THEME */