Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-28 04:35:33 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1231688 - Use waapi computed timing in devtools animation actors; r=tromey

Browse Source 
--HG--
extra : commitid : 7Bf0SZKcyUN
extra : rebase_source : 229323be9ae1db3a56f26092ff7f4b21c89cc3f5
extra : histedit_source : 3583bc4757159b8d620b7d1aa3ca93d956870aa7
This commit is contained in:
Patrick Brosset 2015-12-21 11:07:58 +01:00
parent 7aa1c2a90b
commit 9b4ccd61ea
1 changed files with 9 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
devtools/server/actors/animation.js
View File

@ -64,12 +64,8 @@ var AnimationPlayerActor = ActorClass({
/**
* @param {AnimationsActor} The main AnimationsActor instance
* @param {AnimationPlayer} The player object returned by getAnimationPlayers
* @param {Number} Temporary work-around used to retrieve duration and
* iteration count from computed-style rather than from waapi. This is needed
* to know which duration to get, in case there are multiple css animations
* applied to the same node.
*/
initialize: function(animationsActor, player, playerIndex) {
initialize: function(animationsActor, player) {
Actor.prototype.initialize.call(this, animationsActor.conn);
this.onAnimationMutation = this.onAnimationMutation.bind(this);
@ -77,7 +73,6 @@ var AnimationPlayerActor = ActorClass({
this.tabActor = animationsActor.tabActor;
this.player = player;
this.node = player.effect.target;
this.playerIndex = playerIndex;
let win = this.node.ownerDocument.defaultView;
this.styles = win.getComputedStyle(this.node);
@ -133,42 +128,6 @@ var AnimationPlayerActor = ActorClass({
return ANIMATION_TYPES.UNKNOWN;
},
/**
* Some of the player's properties are retrieved from the node's
* computed-styles because the Web Animations API does not provide them yet.
* But the computed-styles may contain multiple animations for a node and so
* we need to know which is the index of the current animation in the style.
* @return {Number}
*/
getPlayerIndex: function() {
let names = this.styles.animationName;
if (names === "none") {
names = this.styles.transitionProperty;
}
// If we still don't have a name, let's fall back to the provided index
// which may, by now, be wrong, but it's the best we can do until the waapi
// gives us a way to get duration, delay, ... directly.
if (!names || names === "none") {
return this.playerIndex;
}
// If there's only one name.
if (names.includes(",") === -1) {
return 0;
}
// If there are several names, retrieve the index of the animation name in
// the list.
let playerName = this.getName();
names = names.split(",").map(n => n.trim());
for (let i = 0; i < names.length; i++) {
if (names[i] === playerName) {
return i;
}
}
},
/**
* Get the name associated with the player. This is used to match
* up the player with values in the computed animation-name or
@ -187,72 +146,29 @@ var AnimationPlayerActor = ActorClass({
/**
* Get the animation duration from this player, in milliseconds.
* Note that the Web Animations API doesn't yet offer a way to retrieve this
* directly from the AnimationPlayer object, so for now, a duration is only
* returned if found in the node's computed styles.
* @return {Number}
*/
getDuration: function() {
let durationText;
if (this.styles.animationDuration !== "0s") {
durationText = this.styles.animationDuration;
} else if (this.styles.transitionDuration !== "0s") {
durationText = this.styles.transitionDuration;
} else {
return null;
}
// If the computed duration has multiple entries, we need to find the right
// one.
if (durationText.indexOf(",") !== -1) {
durationText = durationText.split(",")[this.getPlayerIndex()];
}
return parseFloat(durationText) * 1000;
return this.player.effect.getComputedTiming().duration;
},
/**
* Get the animation delay from this player, in milliseconds.
* Note that the Web Animations API doesn't yet offer a way to retrieve this
* directly from the AnimationPlayer object, so for now, a delay is only
* returned if found in the node's computed styles.
* @return {Number}
*/
getDelay: function() {
let delayText;
if (this.styles.animationDelay !== "0s") {
delayText = this.styles.animationDelay;
} else if (this.styles.transitionDelay !== "0s") {
delayText = this.styles.transitionDelay;
} else {
return 0;
}
if (delayText.indexOf(",") !== -1) {
delayText = delayText.split(",")[this.getPlayerIndex()];
}
return parseFloat(delayText) * 1000;
return this.player.effect.getComputedTiming().delay;
},
/**
* Get the animation iteration count for this player. That is, how many times
* is the animation scheduled to run.
* Note that the Web Animations API doesn't yet offer a way to retrieve this
* directly from the AnimationPlayer object, so for now, check for
* animationIterationCount in the node's computed styles, and return that.
* This style property defaults to 1 anyway.
* @return {Number}
* @return {Number} The number of iterations, or null if the animation repeats
* infinitely.
*/
getIterationCount: function() {
let iterationText = this.styles.animationIterationCount;
if (iterationText.indexOf(",") !== -1) {
iterationText = iterationText.split(",")[this.getPlayerIndex()];
}
return iterationText === "infinite"
? null
: parseInt(iterationText, 10);
let iterations = this.player.effect.getComputedTiming().iterations;
return iterations === "Infinity" ? null : iterations;
},
/**
@ -606,9 +522,7 @@ var AnimationsActor = exports.AnimationsActor = ActorClass({
// is assumed that the client is responsible for lifetimes of actors.
this.actors = [];
for (let i = 0; i < animations.length; i++) {
// XXX: for now the index is passed along as the AnimationPlayerActor uses
// it to retrieve animation information from CSS.
let actor = AnimationPlayerActor(this, animations[i], i);
let actor = AnimationPlayerActor(this, animations[i]);
this.actors.push(actor);
}
@ -686,8 +600,7 @@ var AnimationsActor = exports.AnimationsActor = ActorClass({
this.actors.splice(index, 1);
}
let actor = AnimationPlayerActor(
this, player, player.effect.target.getAnimations().indexOf(player));
let actor = AnimationPlayerActor(this, player);
this.actors.push(actor);
eventData.push({
type: "added",