getTracks: Task.async(function* () {
let tracks = {};
/*
* getFrames is a AnimationPlayorActor method that returns data about the
* keyframes of the animation.
* In FF48, the data it returns change, and will hold only longhand
* properties ( e.g. borderLeftWidth ), which does not match what we
* want to display in the animation detail.
* A new AnimationPlayerActor function, getProperties, is introduced,
* that returns the animated css properties of the animation and their
* keyframes values.
* If the animation actor has the getProperties function, we use it, and if
* not, we fall back to getFrames, which then returns values we used to
* handle.
*/
if (this.serverTraits.hasGetProperties) {
let properties = yield this.animation.getProperties();
for (let {name, values} of properties) {
if (!tracks[name]) {
tracks[name] = [];
}
for (let {value, offset, easing, distance} of values) {
distance = distance ? distance : 0;
tracks[name].push({value, offset, easing, distance});
}
}
} else {
let frames = yield this.animation.getFrames();
for (let frame of frames) {
for (let name in frame) {
if (this.NON_PROPERTIES.indexOf(name) != -1) {
continue;
}
// We have to change to CSS property name
// since GetKeyframes returns JS property name.
const propertyCSSName = getCssPropertyName(name);
if (!tracks[propertyCSSName]) {
tracks[propertyCSSName] = [];
}
tracks[propertyCSSName].push({
value: frame[name],
offset: frame.computedOffset,
easing: frame.easing,
distance: 0
});
}
}
}
return tracks;
}),
function run_test() {
for (let {jsName, cssName} of TEST_DATA) {
equal(getCssPropertyName(jsName), cssName);
}
}
renderAnimatedPropertiesBody: function (animationTypes) {
// Add animated property body.
const bodyEl = createNode({
parent: this.containerEl,
attributes: { "class": "animated-properties-body" }
});
// Move unchanged value animation to bottom in the list.
const propertyNames = [];
const unchangedPropertyNames = [];
for (let propertyName in this.tracks) {
if (!isUnchangedProperty(this.tracks[propertyName])) {
propertyNames.push(propertyName);
} else {
unchangedPropertyNames.push(propertyName);
}
}
Array.prototype.push.apply(propertyNames, unchangedPropertyNames);
for (let propertyName of propertyNames) {
let line = createNode({
parent: bodyEl,
attributes: {"class": "property"}
});
if (unchangedPropertyNames.includes(propertyName)) {
line.classList.add("unchanged");
}
let {warning, className} =
this.getPerfDataForProperty(this.animation, propertyName);
createNode({
// text-overflow doesn't work in flex items, so we need a second level
// of container to actually have an ellipsis on the name.
// See bug 972664.
parent: createNode({
parent: line,
attributes: {"class": "name"}
}),
textContent: getCssPropertyName(propertyName),
attributes: {"title": warning,
"class": className}
});
// Add the keyframes diagram for this property.
let framesWrapperEl = createNode({
parent: line,
attributes: {"class": "track-container"}
});
let framesEl = createNode({
parent: framesWrapperEl,
attributes: {"class": "frames"}
});
let keyframesComponent = new Keyframes();
keyframesComponent.init(framesEl);
keyframesComponent.render({
keyframes: this.tracks[propertyName],
propertyName: propertyName,
animation: this.animation,
animationType: animationTypes[propertyName]
});
this.keyframeComponents.push(keyframesComponent);
}
},
