Bug 1383974 - Part 3: Display animation-timing-function if CSS Animations. r?pbro draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Mon, 25 Sep 2017 08:44:05 +0900
changeset 669599 a658cf02dc27d05f8fb044fb6dde32954dfa4326
parent 669598 cb3483b4a7e78d30e00656b1573143070e72157b
child 669600 b0c5eb63b2ef533eee0514f7cfd5322b97edba65
push id81372
push userbmo:dakatsuka@mozilla.com
push dateMon, 25 Sep 2017 00:37:37 +0000
reviewerspbro
bugs1383974
milestone58.0a1
Bug 1383974 - Part 3: Display animation-timing-function if CSS Animations. r?pbro MozReview-Commit-ID: CwtdijaEsae
devtools/client/animationinspector/components/animation-time-block.js
devtools/client/locales/en-US/animationinspector.properties
devtools/server/actors/animation.js
devtools/shared/fronts/animation.js
--- a/devtools/client/animationinspector/components/animation-time-block.js
+++ b/devtools/client/animationinspector/components/animation-time-block.js
@@ -271,16 +271,24 @@ AnimationTimeBlock.prototype = {
 
     // Adding the playback rate if it's different than 1.
     if (state.playbackRate !== 1) {
       text += L10N.getStr("player.animationRateLabel") + " ";
       text += state.playbackRate;
       text += "\n";
     }
 
+    // Adding the animation-timing-function
+    // if it is not "ease" which is default value for CSS Animations.
+    if (state.animationTimingFunction && state.animationTimingFunction !== "ease") {
+      text += L10N.getStr("player.animationTimingFunctionLabel") + " ";
+      text += state.animationTimingFunction;
+      text += "\n";
+    }
+
     // Adding a note that the animation is running on the compositor thread if
     // needed.
     if (state.propertyState) {
       if (state.propertyState
                .every(propState => propState.runningOnCompositor)) {
         text += L10N.getStr("player.allPropertiesOnCompositorTooltip");
       } else if (state.propertyState
                       .some(propState => propState.runningOnCompositor)) {
--- a/devtools/client/locales/en-US/animationinspector.properties
+++ b/devtools/client/locales/en-US/animationinspector.properties
@@ -72,16 +72,22 @@ player.animationIterationStartLabel=Iter
 
 # LOCALIZATION NOTE (player.animationOverallEasingLabel):
 # This string is displayed in a tooltip that appears when hovering over
 # animations in the timeline. It is the label displayed before the easing
 # that applies to a whole iteration of an animation as opposed to the
 # easing that applies between animation keyframes.
 player.animationOverallEasingLabel=Overall easing:
 
+# LOCALIZATION NOTE (player.animationTimingFunctionLabel):
+# This string is displayed in a tooltip that appears when hovering over
+# animations in the timeline. It is the label displayed before the
+# animation-timing-function for CSS Animations.
+player.animationTimingFunctionLabel=Animation timing function:
+
 # LOCALIZATION NOTE (player.animationFillLabel):
 # This string is displayed in a tooltip that appears when hovering over
 # animations in the timeline. It is the label displayed before the animation
 # fill mode value.
 player.animationFillLabel=Fill:
 
 # LOCALIZATION NOTE (player.animationDirectionLabel):
 # This string is displayed in a tooltip that appears when hovering over
--- a/devtools/server/actors/animation.js
+++ b/devtools/server/actors/animation.js
@@ -257,16 +257,35 @@ var AnimationPlayerActor = protocol.Acto
   /**
    * Get the animation direction from this player.
    * @return {String}
    */
   getDirection: function () {
     return this.player.effect.getComputedTiming().direction;
   },
 
+  /**
+   * Get animation-timing-function from animated element if CSS Animations.
+   * @return {String}
+   */
+  getAnimationTimingFunction: function () {
+    if (!this.isCssAnimation()) {
+      return null;
+    }
+
+    let pseudo = null;
+    let target = this.player.effect.target;
+    if (target.type) {
+      // Animated element is a pseudo element.
+      pseudo = target.type;
+      target = target.parentElement;
+    }
+    return this.window.getComputedStyle(target, pseudo).animationTimingFunction;
+  },
+
   getPropertiesCompositorStatus: function () {
     let properties = this.player.effect.getProperties();
     return properties.map(prop => {
       return {
         property: prop.property,
         runningOnCompositor: prop.runningOnCompositor,
         warning: prop.warning
       };
@@ -302,16 +321,17 @@ var AnimationPlayerActor = protocol.Acto
       duration: this.getDuration(),
       delay: this.getDelay(),
       endDelay: this.getEndDelay(),
       iterationCount: this.getIterationCount(),
       iterationStart: this.getIterationStart(),
       fill: this.getFill(),
       easing: this.getEasing(),
       direction: this.getDirection(),
+      animationTimingFunction: this.getAnimationTimingFunction(),
       // animation is hitting the fast path or not. Returns false whenever the
       // animation is paused as it is taken off the compositor then.
       isRunningOnCompositor:
         this.getPropertiesCompositorStatus()
             .some(propState => propState.runningOnCompositor),
       propertyState: this.getPropertiesCompositorStatus(),
       // The document timeline's currentTime is being sent along too. This is
       // not strictly related to the node's animationPlayer, but is useful to
--- a/devtools/shared/fronts/animation.js
+++ b/devtools/shared/fronts/animation.js
@@ -63,16 +63,17 @@ const AnimationPlayerFront = FrontClassW
       duration: this._form.duration,
       delay: this._form.delay,
       endDelay: this._form.endDelay,
       iterationCount: this._form.iterationCount,
       iterationStart: this._form.iterationStart,
       easing: this._form.easing,
       fill: this._form.fill,
       direction: this._form.direction,
+      animationTimingFunction: this._form.animationTimingFunction,
       isRunningOnCompositor: this._form.isRunningOnCompositor,
       propertyState: this._form.propertyState,
       documentCurrentTime: this._form.documentCurrentTime
     };
   },
 
   /**
    * Executed when the AnimationPlayerActor emits a "changed" event. Used to