Bug 1383974 - Part 3: Display animation-timing-function if CSS Animations. r?pbro
MozReview-Commit-ID: CwtdijaEsae
--- 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