Bug 1383974 - Part 3: Display animation-timing-function if CSS Animations. r=pbro
☠☠ backed out by 93156e5811ec ☠ ☠
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Fri, 22 Sep 2017 22:37:01 +0900
changeset 382454 f951257a6856075fb8268620895c8bfcc6101eb7
parent 382453 ac38504618340e90a619c4015be68d2a317d41ea
child 382455 588aa1f227f1541b4fb260cd708a93ad5b4f2ebf
push id32558
push userkwierso@gmail.com
push dateFri, 22 Sep 2017 21:29:46 +0000
treeherdermozilla-central@61e58a7d800b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1383974
milestone58.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 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