--- a/devtools/client/animationinspector/animation-controller.js
+++ b/devtools/client/animationinspector/animation-controller.js
@@ -8,78 +8,77 @@
import-globals-from to avoid infinite loops since animation-panel.js already
imports globals from animation-controller.js */
/* globals AnimationsPanel */
/* eslint no-unused-vars: [2, {"vars": "local", "args": "none"}] */
"use strict";
var { loader, require } = ChromeUtils.import("resource://devtools/shared/Loader.jsm", {});
-var { Task } = require("devtools/shared/task");
loader.lazyRequireGetter(this, "promise");
loader.lazyRequireGetter(this, "EventEmitter", "devtools/shared/event-emitter");
loader.lazyRequireGetter(this, "AnimationsFront", "devtools/shared/fronts/animation", true);
const { LocalizationHelper } = require("devtools/shared/l10n");
const L10N =
new LocalizationHelper("devtools/client/locales/animationinspector.properties");
// Global toolbox/inspector, set when startup is called.
var gToolbox, gInspector;
/**
* Startup the animationinspector controller and view, called by the sidebar
* widget when loading/unloading the iframe into the tab.
*/
-var startup = Task.async(function* (inspector) {
+var startup = async function(inspector) {
gInspector = inspector;
gToolbox = inspector.toolbox;
// Don't assume that AnimationsPanel is defined here, it's in another file.
if (!typeof AnimationsPanel === "undefined") {
throw new Error("AnimationsPanel was not loaded in the " +
"animationinspector window");
}
// Startup first initalizes the controller and then the panel, in sequence.
// If you want to know when everything's ready, do:
// AnimationsPanel.once(AnimationsPanel.PANEL_INITIALIZED)
- yield AnimationsController.initialize();
- yield AnimationsPanel.initialize();
-});
+ await AnimationsController.initialize();
+ await AnimationsPanel.initialize();
+};
/**
* Shutdown the animationinspector controller and view, called by the sidebar
* widget when loading/unloading the iframe into the tab.
*/
-var shutdown = Task.async(function* () {
- yield AnimationsController.destroy();
+var shutdown = async function() {
+ await AnimationsController.destroy();
// Don't assume that AnimationsPanel is defined here, it's in another file.
if (typeof AnimationsPanel !== "undefined") {
- yield AnimationsPanel.destroy();
+ await AnimationsPanel.destroy();
}
gToolbox = gInspector = null;
-});
+};
// This is what makes the sidebar widget able to load/unload the panel.
function setPanel(panel) {
return startup(panel).catch(console.error);
}
function destroy() {
return shutdown().catch(console.error);
}
/**
* Get all the server-side capabilities (traits) so the UI knows whether or not
* features should be enabled/disabled.
* @param {Target} target The current toolbox target.
* @return {Object} An object with boolean properties.
*/
-var getServerTraits = Task.async(function* (target) {
+var getServerTraits = async function(target) {
let config = [
{ name: "hasToggleAll", actor: "animations",
method: "toggleAll" },
{ name: "hasToggleSeveral", actor: "animations",
method: "toggleSeveral" },
{ name: "hasSetCurrentTime", actor: "animationplayer",
method: "setCurrentTime" },
{ name: "hasMutationEvents", actor: "animations",
@@ -99,21 +98,21 @@ var getServerTraits = Task.async(functio
{ name: "hasSetWalkerActor", actor: "animations",
method: "setWalkerActor" },
{ name: "hasGetAnimationTypes", actor: "animationplayer",
method: "getAnimationTypes" },
];
let traits = {};
for (let {name, actor, method} of config) {
- traits[name] = yield target.actorHasMethod(actor, method);
+ traits[name] = await target.actorHasMethod(actor, method);
}
return traits;
-});
+};
/**
* The animationinspector controller's job is to retrieve AnimationPlayerFronts
* from the server. It is also responsible for keeping the list of players up to
* date when the node selection changes in the inspector, as well as making sure
* no updates are done when the animationinspector sidebar panel is not visible.
*
* AnimationPlayerFronts are available in AnimationsController.animationPlayers.
@@ -127,61 +126,61 @@ var getServerTraits = Task.async(functio
* // do something with player
* }
* }
*/
var AnimationsController = {
PLAYERS_UPDATED_EVENT: "players-updated",
ALL_ANIMATIONS_TOGGLED_EVENT: "all-animations-toggled",
- initialize: Task.async(function* () {
+ async initialize() {
if (this.initialized) {
- yield this.initialized;
+ await this.initialized;
return;
}
let resolver;
this.initialized = new Promise(resolve => {
resolver = resolve;
});
this.onPanelVisibilityChange = this.onPanelVisibilityChange.bind(this);
this.onNewNodeFront = this.onNewNodeFront.bind(this);
this.onAnimationMutations = this.onAnimationMutations.bind(this);
let target = gInspector.target;
this.animationsFront = new AnimationsFront(target.client, target.form);
// Expose actor capabilities.
- this.traits = yield getServerTraits(target);
+ this.traits = await getServerTraits(target);
if (this.destroyed) {
console.warn("Could not fully initialize the AnimationsController");
return;
}
// Let the AnimationsActor know what WalkerActor we're using. This will
// come in handy later to return references to DOM Nodes.
if (this.traits.hasSetWalkerActor) {
- yield this.animationsFront.setWalkerActor(gInspector.walker);
+ await this.animationsFront.setWalkerActor(gInspector.walker);
}
this.startListeners();
- yield this.onNewNodeFront();
+ await this.onNewNodeFront();
resolver();
- }),
+ },
- destroy: Task.async(function* () {
+ async destroy() {
if (!this.initialized) {
return;
}
if (this.destroyed) {
- yield this.destroyed;
+ await this.destroyed;
return;
}
let resolver;
this.destroyed = new Promise(resolve => {
resolver = resolve;
});
@@ -189,17 +188,17 @@ var AnimationsController = {
this.destroyAnimationPlayers();
this.nodeFront = null;
if (this.animationsFront) {
this.animationsFront.destroy();
this.animationsFront = null;
}
resolver();
- }),
+ },
startListeners: function() {
// Re-create the list of players when a new node is selected, except if the
// sidebar isn't visible.
gInspector.selection.on("new-node-front", this.onNewNodeFront);
gInspector.sidebar.on("select", this.onPanelVisibilityChange);
gToolbox.on("select", this.onPanelVisibilityChange);
},
@@ -214,23 +213,23 @@ var AnimationsController = {
},
isPanelVisible: function() {
return gToolbox.currentToolId === "inspector" &&
gInspector.sidebar &&
gInspector.sidebar.getCurrentTabID() == "animationinspector";
},
- onPanelVisibilityChange: Task.async(function* () {
+ async onPanelVisibilityChange() {
if (this.isPanelVisible()) {
this.onNewNodeFront();
}
- }),
+ },
- onNewNodeFront: Task.async(function* () {
+ async onNewNodeFront() {
// Ignore if the panel isn't visible.
// Or the node selection hasn't changed and no animation mutations event occurs during
// hidden.
if (!this.isPanelVisible() || (this.nodeFront === gInspector.selection.nodeFront &&
!this.mutationsDetectedWhileHidden)) {
return;
}
@@ -242,21 +241,21 @@ var AnimationsController = {
if (!gInspector.selection.isConnected() ||
!gInspector.selection.isElementNode()) {
this.destroyAnimationPlayers();
this.emit(this.PLAYERS_UPDATED_EVENT);
done();
return;
}
- yield this.refreshAnimationPlayers(this.nodeFront);
+ await this.refreshAnimationPlayers(this.nodeFront);
this.emit(this.PLAYERS_UPDATED_EVENT, this.animationPlayers);
done();
- }),
+ },
/**
* Toggle (pause/play) all animations in the current target.
*/
toggleAll: function() {
if (!this.traits.hasToggleAll) {
return promise.resolve();
}
@@ -268,91 +267,91 @@ var AnimationsController = {
/**
* Similar to toggleAll except that it only plays/pauses the currently known
* animations (those listed in this.animationPlayers).
* @param {Boolean} shouldPause True if the animations should be paused, false
* if they should be played.
* @return {Promise} Resolves when the playState has been changed.
*/
- toggleCurrentAnimations: Task.async(function* (shouldPause) {
+ async toggleCurrentAnimations(shouldPause) {
if (this.traits.hasToggleSeveral) {
- yield this.animationsFront.toggleSeveral(this.animationPlayers,
+ await this.animationsFront.toggleSeveral(this.animationPlayers,
shouldPause);
} else {
// Fall back to pausing/playing the players one by one, which is bound to
// introduce some de-synchronization.
for (let player of this.animationPlayers) {
if (shouldPause) {
- yield player.pause();
+ await player.pause();
} else {
- yield player.play();
+ await player.play();
}
}
}
- }),
+ },
/**
* Set all known animations' currentTimes to the provided time.
* @param {Number} time.
* @param {Boolean} shouldPause Should the animations be paused too.
* @return {Promise} Resolves when the current time has been set.
*/
- setCurrentTimeAll: Task.async(function* (time, shouldPause) {
+ async setCurrentTimeAll(time, shouldPause) {
if (this.traits.hasSetCurrentTimes) {
- yield this.animationsFront.setCurrentTimes(this.animationPlayers, time,
+ await this.animationsFront.setCurrentTimes(this.animationPlayers, time,
shouldPause);
} else {
// Fall back to pausing and setting the current time on each player, one
// by one, which is bound to introduce some de-synchronization.
for (let animation of this.animationPlayers) {
if (shouldPause) {
- yield animation.pause();
+ await animation.pause();
}
- yield animation.setCurrentTime(time);
+ await animation.setCurrentTime(time);
}
}
- }),
+ },
/**
* Set all known animations' playback rates to the provided rate.
* @param {Number} rate.
* @return {Promise} Resolves when the rate has been set.
*/
- setPlaybackRateAll: Task.async(function* (rate) {
+ async setPlaybackRateAll(rate) {
if (this.traits.hasSetPlaybackRates) {
// If the backend can set all playback rates at the same time, use that.
- yield this.animationsFront.setPlaybackRates(this.animationPlayers, rate);
+ await this.animationsFront.setPlaybackRates(this.animationPlayers, rate);
} else if (this.traits.hasSetPlaybackRate) {
// Otherwise, fall back to setting each rate individually.
for (let animation of this.animationPlayers) {
- yield animation.setPlaybackRate(rate);
+ await animation.setPlaybackRate(rate);
}
}
- }),
+ },
// AnimationPlayerFront objects are managed by this controller. They are
// retrieved when refreshAnimationPlayers is called, stored in the
// animationPlayers array, and destroyed when refreshAnimationPlayers is
// called again.
animationPlayers: [],
- refreshAnimationPlayers: Task.async(function* (nodeFront) {
+ async refreshAnimationPlayers(nodeFront) {
this.destroyAnimationPlayers();
- this.animationPlayers = yield this.animationsFront
+ this.animationPlayers = await this.animationsFront
.getAnimationPlayersForNode(nodeFront);
// Start listening for animation mutations only after the first method call
// otherwise events won't be sent.
if (!this.isListeningToMutations && this.traits.hasMutationEvents) {
this.animationsFront.on("mutations", this.onAnimationMutations);
this.isListeningToMutations = true;
}
- }),
+ },
onAnimationMutations: function(changes) {
// Insert new players into this.animationPlayers when new animations are
// added.
for (let {type, player} of changes) {
if (type === "added") {
this.animationPlayers.push(player);
}
--- a/devtools/client/animationinspector/animation-panel.js
+++ b/devtools/client/animationinspector/animation-panel.js
@@ -18,24 +18,24 @@ var $ = (selector, target = document) =>
/**
* The main animations panel UI.
*/
var AnimationsPanel = {
UI_UPDATED_EVENT: "ui-updated",
PANEL_INITIALIZED: "panel-initialized",
- initialize: Task.async(function* () {
+ async initialize() {
if (AnimationsController.destroyed) {
console.warn("Could not initialize the animation-panel, controller " +
"was destroyed");
return;
}
if (this.initialized) {
- yield this.initialized;
+ await this.initialized;
return;
}
let resolver;
this.initialized = new Promise(resolve => {
resolver = resolve;
});
@@ -76,29 +76,29 @@ var AnimationsPanel = {
if (AnimationsController.traits.hasSetPlaybackRate) {
this.rateSelectorComponent = new RateSelector();
this.rateSelectorComponent.init(this.rateSelectorEl);
}
this.startListeners();
- yield this.refreshAnimationsUI();
+ await this.refreshAnimationsUI();
resolver();
this.emit(this.PANEL_INITIALIZED);
- }),
+ },
- destroy: Task.async(function* () {
+ async destroy() {
if (!this.initialized) {
return;
}
if (this.destroyed) {
- yield this.destroyed;
+ await this.destroyed;
return;
}
let resolver;
this.destroyed = new Promise(resolve => {
resolver = resolve;
});
@@ -113,17 +113,17 @@ var AnimationsPanel = {
}
this.playersEl = this.errorMessageEl = null;
this.toggleAllButtonEl = this.pickerButtonEl = null;
this.playTimelineButtonEl = this.rewindTimelineButtonEl = null;
this.timelineCurrentTimeEl = this.rateSelectorEl = null;
resolver();
- }),
+ },
startListeners: function() {
AnimationsController.on(AnimationsController.PLAYERS_UPDATED_EVENT,
this.refreshAnimationsUI);
this.pickerButtonEl.addEventListener("click", this.togglePicker);
gToolbox.on("picker-started", this.onPickerStarted);
gToolbox.on("picker-stopped", this.onPickerStopped);
@@ -210,20 +210,20 @@ var AnimationsPanel = {
onToggleAllClicked: function() {
this.toggleAll().catch(console.error);
},
/**
* Toggle (pause/play) all animations in the current target
* and update the UI the toggleAll button.
*/
- toggleAll: Task.async(function* () {
+ async toggleAll() {
this.toggleAllButtonEl.classList.toggle("paused");
- yield AnimationsController.toggleAll();
- }),
+ await AnimationsController.toggleAll();
+ },
onTimelinePlayClicked: function() {
this.playPauseTimeline().catch(console.error);
},
/**
* Depending on the state of the timeline either pause or play the animations
* displayed in it.
@@ -303,28 +303,28 @@ var AnimationsPanel = {
this.timelineCurrentTimeEl.textContent = formatStopwatchTime(time);
},
/**
* Make sure all known animations have their states up to date (which is
* useful after the playState or currentTime has been changed and in case the
* animations aren't auto-refreshing), and then refresh the UI.
*/
- refreshAnimationsStateAndUI: Task.async(function* () {
+ async refreshAnimationsStateAndUI() {
for (let player of AnimationsController.animationPlayers) {
- yield player.refreshState();
+ await player.refreshState();
}
- yield this.refreshAnimationsUI();
- }),
+ await this.refreshAnimationsUI();
+ },
/**
* Refresh the list of animations UI. This will empty the panel and re-render
* the various components again.
*/
- refreshAnimationsUI: Task.async(function* () {
+ async refreshAnimationsUI() {
// Empty the whole panel first.
this.togglePlayers(true);
// Re-render the timeline component.
this.animationsTimelineComponent.render(
AnimationsController.animationPlayers,
AnimationsController.documentCurrentTime);
@@ -337,12 +337,12 @@ var AnimationsPanel = {
// return.
if (!AnimationsController.animationPlayers.length) {
this.togglePlayers(false);
this.emit(this.UI_UPDATED_EVENT);
return;
}
this.emit(this.UI_UPDATED_EVENT);
- })
+ }
};
EventEmitter.decorate(AnimationsPanel);
--- a/devtools/client/animationinspector/components/animation-details.js
+++ b/devtools/client/animationinspector/components/animation-details.js
@@ -1,17 +1,16 @@
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
-const {Task} = require("devtools/shared/task");
const {createNode, getCssPropertyName} =
require("devtools/client/animationinspector/utils");
const {Keyframes} = require("devtools/client/animationinspector/components/keyframes");
const { LocalizationHelper } = require("devtools/shared/l10n");
const L10N =
new LocalizationHelper("devtools/client/locales/animationinspector.properties");
@@ -84,61 +83,61 @@ AnimationDetails.prototype = {
/**
* Get animation types of given CSS property names.
* @param {Array} CSS property names.
* e.g. ["background-color", "opacity", ...]
* @return {Object} Animation type mapped with CSS property name.
* e.g. { "background-color": "color", }
* "opacity": "float", ... }
*/
- getAnimationTypes: Task.async(function* (propertyNames) {
+ async getAnimationTypes(propertyNames) {
if (this.serverTraits.hasGetAnimationTypes) {
- return yield this.animation.getAnimationTypes(propertyNames);
+ return this.animation.getAnimationTypes(propertyNames);
}
// Set animation type 'none' since does not support getAnimationTypes.
const animationTypes = {};
propertyNames.forEach(propertyName => {
animationTypes[propertyName] = "none";
});
return Promise.resolve(animationTypes);
- }),
+ },
- render: Task.async(function* (animation, tracks) {
+ async render(animation, tracks) {
this.unrender();
if (!animation) {
return;
}
this.animation = animation;
this.tracks = tracks;
// We might have been destroyed in the meantime, or the component might
// have been re-rendered.
if (!this.containerEl || this.animation !== animation) {
return;
}
// Get animation type for each CSS properties.
- const animationTypes = yield this.getAnimationTypes(Object.keys(this.tracks));
+ const animationTypes = await this.getAnimationTypes(Object.keys(this.tracks));
// Render progress indicator.
this.renderProgressIndicator();
// Render animated properties header.
this.renderAnimatedPropertiesHeader();
// Render animated properties body.
this.renderAnimatedPropertiesBody(animationTypes);
// Create dummy animation to indicate the animation progress.
const timing = Object.assign({}, animation.state, {
iterations: animation.state.iterationCount
? animation.state.iterationCount : Infinity
});
this.dummyAnimation =
new this.win.Animation(new this.win.KeyframeEffect(null, null, timing), null);
- }),
+ },
renderAnimatedPropertiesHeader: function() {
// Add animated property header.
const headerEl = createNode({
parent: this.containerEl,
attributes: { "class": "animated-properties-header" }
});
--- a/devtools/client/animationinspector/components/animation-target-node.js
+++ b/devtools/client/animationinspector/components/animation-target-node.js
@@ -1,17 +1,16 @@
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
-const {Task} = require("devtools/shared/task");
const EventEmitter = require("devtools/shared/event-emitter");
const {DomNodePreview} = require("devtools/client/inspector/shared/dom-node-preview");
// Map dom node fronts by animation fronts so we don't have to get them from the
// walker every time the timeline is refreshed.
var nodeFronts = new WeakMap();
/**
@@ -35,29 +34,29 @@ AnimationTargetNode.prototype = {
},
destroy: function() {
this.previewer.destroy();
this.inspector = null;
this.isDestroyed = true;
},
- render: Task.async(function* (playerFront) {
+ async render(playerFront) {
// Get the nodeFront from the cache if it was stored previously.
let nodeFront = nodeFronts.get(playerFront);
// Try and get it from the playerFront directly next.
if (!nodeFront) {
nodeFront = playerFront.animationTargetNodeFront;
}
// Finally, get it from the walkerActor if it wasn't found.
if (!nodeFront) {
try {
- nodeFront = yield this.inspector.walker.getNodeFromActor(
+ nodeFront = await this.inspector.walker.getNodeFromActor(
playerFront.actorID, ["node"]);
} catch (e) {
// If an error occured while getting the nodeFront and if it can't be
// attributed to the panel having been destroyed in the meantime, this
// error needs to be logged and render needs to stop.
if (!this.isDestroyed) {
console.error(e);
}
@@ -71,10 +70,10 @@ AnimationTargetNode.prototype = {
}
}
// Add the nodeFront to the cache.
nodeFronts.set(playerFront, nodeFront);
this.previewer.render(nodeFront);
this.emit("target-retrieved");
- })
+ }
};
--- a/devtools/client/animationinspector/components/animation-timeline.js
+++ b/devtools/client/animationinspector/components/animation-timeline.js
@@ -1,17 +1,16 @@
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
-const { Task } = require("devtools/shared/task");
const EventEmitter = require("devtools/shared/event-emitter");
const {
createNode,
findOptimalTimeInterval,
getFormattedAnimationTitle,
TimeScale,
getCssPropertyName
} = require("devtools/client/animationinspector/utils");
@@ -310,17 +309,17 @@ AnimationsTimeline.prototype = {
this.win.clearTimeout(this.windowResizeTimer);
}
this.windowResizeTimer = this.win.setTimeout(() => {
this.drawHeaderAndBackground();
}, TIMELINE_BACKGROUND_RESIZE_DEBOUNCE_TIMER);
},
- onAnimationSelected: Task.async(function* (animation) {
+ async onAnimationSelected(animation) {
let index = this.animations.indexOf(animation);
if (index === -1) {
return;
}
// Unselect an animation which was selected.
const animationEls = this.rootWrapperEl.querySelectorAll(".animation");
for (let i = 0; i < animationEls.length; i++) {
@@ -349,22 +348,22 @@ AnimationsTimeline.prototype = {
// Select and render.
const selectedAnimationEl = animationEls[index];
selectedAnimationEl.classList.add("selected");
this.animationRootEl.classList.add("animation-detail-visible");
// Don't render if the detail displays same animation already.
if (animation !== this.details.animation) {
this.selectedAnimation = animation;
- yield this.details.render(animation, this.componentsMap[animation.actorID].tracks);
+ await this.details.render(animation, this.componentsMap[animation.actorID].tracks);
this.animationAnimationNameEl.textContent = getFormattedAnimationTitle(animation);
}
this.onTimelineDataChanged({ time: this.currentTime || 0 });
this.emit("animation-selected", animation);
- }),
+ },
/**
* When move the scrubber to the corresponding position
*/
onScrubberMouseDown: function(e) {
this.moveScrubberTo(e.pageX);
this.win.addEventListener("mouseup", this.onScrubberMouseUp);
this.win.addEventListener("mouseout", this.onScrubberMouseOut);
@@ -433,17 +432,17 @@ AnimationsTimeline.prototype = {
state.propertyState.some(propState => !propState.runningOnCompositor)
? " some-properties"
: " all-properties";
}
return className;
},
- render: Task.async(function* (animations, documentCurrentTime) {
+ async render(animations, documentCurrentTime) {
this.animations = animations;
// Destroy components which are no longer existed in given animations.
for (let animation of this.animations) {
if (this.componentsMap[animation.actorID]) {
this.componentsMap[animation.actorID].needToLeave = true;
}
}
@@ -467,17 +466,17 @@ AnimationsTimeline.prototype = {
TimeScale.addAnimation(state);
}
this.drawHeaderAndBackground();
for (let animation of this.animations) {
animation.on("changed", this.onAnimationStateChanged);
- const tracks = yield this.getTracks(animation);
+ const tracks = await this.getTracks(animation);
// If we're destroyed by now, just give up.
if (this.isDestroyed) {
return;
}
if (this.componentsMap[animation.actorID]) {
// Update animation UI using existent components.
this.updateAnimation(animation, tracks, this.componentsMap[animation.actorID]);
@@ -505,28 +504,28 @@ AnimationsTimeline.prototype = {
}
// To indicate the animation progress in AnimationDetails.
this.on("timeline-data-changed", this.onTimelineDataChanged);
if (this.animations.length === 1) {
// Display animation's detail if there is only one animation,
// even if the detail pane is closing.
- yield this.onAnimationSelected(this.animations[0]);
+ await this.onAnimationSelected(this.animations[0]);
} else if (this.animationRootEl.classList.contains("animation-detail-visible") &&
this.animations.includes(this.selectedAnimation)) {
// animation's detail displays in case of the previously displayed animation is
// included in timeline list and the detail pane is not closing.
- yield this.onAnimationSelected(this.selectedAnimation);
+ await this.onAnimationSelected(this.selectedAnimation);
} else {
// Otherwise, close detail pane.
this.onDetailCloseButtonClick();
}
this.emit("animation-timeline-rendering-completed");
- }),
+ },
updateAnimation: function(animation, tracks, existentComponents) {
// If keyframes (tracks) and effect timing (state) are not changed, we update the
// view box only.
// As an exception, if iterationCount reprensents Infinity, we need to re-render
// the shape along new time scale.
// FIXME: To avoid re-rendering even Infinity, we need to change the
// representation for Infinity.
@@ -708,17 +707,17 @@ AnimationsTimeline.prototype = {
},
/**
* Get a list of the tracks of the animation actor
* @param {Object} animation
* @return {Object} A list of tracks, one per animated property, each
* with a list of keyframes
*/
- getTracks: Task.async(function* (animation) {
+ async getTracks(animation) {
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.
@@ -727,17 +726,17 @@ AnimationsTimeline.prototype = {
* 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 = [];
try {
- properties = yield animation.getProperties();
+ properties = await animation.getProperties();
} catch (e) {
// Expected if we've already been destroyed in the meantime.
if (!this.isDestroyed) {
throw e;
}
}
for (let {name, values} of properties) {
@@ -749,17 +748,17 @@ AnimationsTimeline.prototype = {
distance = distance ? distance : 0;
offset = parseFloat(offset.toFixed(3));
tracks[name].push({value, offset, easing, distance});
}
}
} else {
let frames = [];
try {
- frames = yield animation.getFrames();
+ frames = await animation.getFrames();
} catch (e) {
// Expected if we've already been destroyed in the meantime.
if (!this.isDestroyed) {
throw e;
}
}
for (let frame of frames) {
@@ -781,17 +780,17 @@ AnimationsTimeline.prototype = {
easing: frame.easing,
distance: 0
});
}
}
}
return tracks;
- })
+ }
};
/**
* Check the equality given states as effect timing.
* @param {Object} state of animation.
* @param {Object} same to avobe.
* @return {boolean} true: same effect timing
*/
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
@@ -26,19 +26,19 @@ const EXPECTED_PROPERTIES = [
"background-image",
"background-origin",
"background-position-x",
"background-position-y",
"background-repeat",
"background-size"
].sort();
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_keyframes.html");
- let {panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_keyframes.html");
+ let {panel} = await openAnimationInspector();
let timeline = panel.animationsTimelineComponent;
let propertiesList = timeline.rootWrapperEl
.querySelector(".animated-properties");
// doc_keyframes.html has only one animation,
// so the propertiesList shoud be shown.
ok(isNodeVisible(propertiesList),
"The list of properties panel shoud be shown");
@@ -46,17 +46,17 @@ add_task(function* () {
ok(propertiesList.querySelectorAll(".property").length,
"The list of properties panel actually contains properties");
ok(hasExpectedProperties(propertiesList),
"The list of properties panel contains the right properties");
ok(hasExpectedWarnings(propertiesList),
"The list of properties panel contains the right warnings");
info("Click same animation again");
- yield clickOnAnimation(panel, 0, true);
+ await clickOnAnimation(panel, 0, true);
ok(isNodeVisible(propertiesList),
"The list of properties panel keeps");
});
function hasExpectedProperties(containerEl) {
let names = [...containerEl.querySelectorAll(".property .name")]
.map(n => n.textContent)
.sort();
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_for_delayed_starttime_animations.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_for_delayed_starttime_animations.js
@@ -3,32 +3,32 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test for animations that have different starting time.
// We should check progress indicator working well even if the start time is not zero.
// Also, check that there is no duplication display.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_delayed_starttime_animations.html");
- const { panel } = yield openAnimationInspector();
- yield setStyle(null, panel, "animation", "anim 100s", "#target2");
- yield setStyle(null, panel, "animation", "anim 100s", "#target3");
- yield setStyle(null, panel, "animation", "anim 100s", "#target4");
- yield setStyle(null, panel, "animation", "anim 100s", "#target5");
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_delayed_starttime_animations.html");
+ const { panel } = await openAnimationInspector();
+ await setStyle(null, panel, "animation", "anim 100s", "#target2");
+ await setStyle(null, panel, "animation", "anim 100s", "#target3");
+ await setStyle(null, panel, "animation", "anim 100s", "#target4");
+ await setStyle(null, panel, "animation", "anim 100s", "#target5");
const timelineComponent = panel.animationsTimelineComponent;
const detailsComponent = timelineComponent.details;
const headers =
detailsComponent.containerEl.querySelectorAll(".animated-properties-header");
is(headers.length, 1, "There should be only one header in the details panel");
// Check indicator.
- yield clickOnAnimation(panel, 1);
+ await clickOnAnimation(panel, 1);
const progressIndicatorEl = detailsComponent.progressIndicatorEl;
const startTime = detailsComponent.animation.state.previousStartTime;
detailsComponent.indicateProgress(0);
is(progressIndicatorEl.style.left, "0%",
"The progress indicator position should be 0% at 0ms");
detailsComponent.indicateProgress(startTime);
is(progressIndicatorEl.style.left, "0%",
"The progress indicator position should be 0% at start time");
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
@@ -327,26 +327,26 @@ const TEST_CASES = [
{ x: 500, y: 0 },
{ x: 750, y: 0.5 },
{ x: 1000, y: 1 },
]
}
}
];
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_multiple_property_types.html");
- const {panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_multiple_property_types.html");
+ const {panel} = await openAnimationInspector();
const timelineComponent = panel.animationsTimelineComponent;
const detailEl = timelineComponent.details.containerEl;
const hasClosePath = true;
for (let i = 0; i < TEST_CASES.length; i++) {
info(`Click to select the animation[${ i }]`);
- yield clickOnAnimation(panel, i);
+ await clickOnAnimation(panel, i);
const timeBlock = getAnimationTimeBlocks(panel)[0];
const state = timeBlock.animation.state;
const properties = TEST_CASES[i];
for (let property in properties) {
const testcase = properties[property];
info(`Test path of ${ property }`);
const className = testcase.expectedClass;
const pathEl = detailEl.querySelector(`path.${ className }`);
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_progress_indicator.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_progress_indicator.js
@@ -3,39 +3,39 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test progress indicator in animated properties.
// Since this indicator works with the timeline, after selecting each animation,
// click the timeline header to change the current time and check the change.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_multiple_property_types.html");
- const { panel } = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_multiple_property_types.html");
+ const { panel } = await openAnimationInspector();
const timelineComponent = panel.animationsTimelineComponent;
const detailsComponent = timelineComponent.details;
info("Click to select the animation");
- yield clickOnAnimation(panel, 0);
+ await clickOnAnimation(panel, 0);
let progressIndicatorEl = detailsComponent.progressIndicatorEl;
ok(progressIndicatorEl, "The progress indicator should be exist");
- yield clickOnTimelineHeader(panel, 0);
+ await clickOnTimelineHeader(panel, 0);
is(progressIndicatorEl.style.left, "0%",
"The left style of progress indicator element should be 0% at 0ms");
- yield clickOnTimelineHeader(panel, 0.5);
+ await clickOnTimelineHeader(panel, 0.5);
approximate(progressIndicatorEl.style.left, "50%",
"The left style of progress indicator element should be "
+ "approximately 50% at 500ms");
- yield clickOnTimelineHeader(panel, 1);
+ await clickOnTimelineHeader(panel, 1);
is(progressIndicatorEl.style.left, "100%",
"The left style of progress indicator element should be 100% at 1000ms");
info("Click to select the steps animation");
- yield clickOnAnimation(panel, 4);
+ await clickOnAnimation(panel, 4);
// Re-get progressIndicatorEl since this element re-create
// in case of select the animation.
progressIndicatorEl = detailsComponent.progressIndicatorEl;
// Use indicateProgess directly from here since
// MouseEvent.clientX may not be able to indicate finely
// in case of the width of header element * xPositionRate has a fraction.
detailsComponent.indicateProgress(499);
is(progressIndicatorEl.style.left, "0%",
@@ -44,42 +44,42 @@ add_task(function* () {
is(progressIndicatorEl.style.left, "0%",
"The left style of progress indicator element should be 0% at 499ms");
detailsComponent.indicateProgress(500);
is(progressIndicatorEl.style.left, "50%",
"The left style of progress indicator element should be 50% at 500ms");
detailsComponent.indicateProgress(999);
is(progressIndicatorEl.style.left, "50%",
"The left style of progress indicator element should be 50% at 999ms");
- yield clickOnTimelineHeader(panel, 1);
+ await clickOnTimelineHeader(panel, 1);
is(progressIndicatorEl.style.left, "100%",
"The left style of progress indicator element should be 100% at 1000ms");
info("Change the playback rate");
- yield changeTimelinePlaybackRate(panel, 2);
- yield clickOnAnimation(panel, 0);
+ await changeTimelinePlaybackRate(panel, 2);
+ await clickOnAnimation(panel, 0);
progressIndicatorEl = detailsComponent.progressIndicatorEl;
- yield clickOnTimelineHeader(panel, 0);
+ await clickOnTimelineHeader(panel, 0);
is(progressIndicatorEl.style.left, "0%",
"The left style of progress indicator element should be 0% "
+ "at 0ms and playback rate 2");
detailsComponent.indicateProgress(250);
is(progressIndicatorEl.style.left, "50%",
"The left style of progress indicator element should be 50% "
+ "at 250ms and playback rate 2");
detailsComponent.indicateProgress(500);
is(progressIndicatorEl.style.left, "100%",
"The left style of progress indicator element should be 100% "
+ "at 500ms and playback rate 2");
info("Check the progress indicator position after select another animation");
- yield changeTimelinePlaybackRate(panel, 1);
- yield clickOnTimelineHeader(panel, 0.5);
+ await changeTimelinePlaybackRate(panel, 1);
+ await clickOnTimelineHeader(panel, 0.5);
const originalIndicatorPosition = progressIndicatorEl.style.left;
- yield clickOnAnimation(panel, 1);
+ await clickOnAnimation(panel, 1);
is(progressIndicatorEl.style.left, originalIndicatorPosition,
"The animation time should be continued even if another animation selects");
});
function approximate(percentageString1, percentageString2, message) {
const val1 = Math.round(parseFloat(percentageString1));
const val2 = Math.round(parseFloat(percentageString2));
is(val1, val2, message);
--- a/devtools/client/animationinspector/test/browser_animation_click_selects_animation.js
+++ b/devtools/client/animationinspector/test/browser_animation_click_selects_animation.js
@@ -2,42 +2,42 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Check that animations displayed in the timeline can be selected by clicking
// them, and that this emits the right events and adds the right classes.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {panel} = await openAnimationInspector();
let timeline = panel.animationsTimelineComponent;
let selected = timeline.rootWrapperEl.querySelectorAll(".animation.selected");
ok(!selected.length, "There are no animations selected by default");
info("Click on the first animation, expect the right event and right class");
- let animation0 = yield clickOnAnimation(panel, 0);
+ let animation0 = await clickOnAnimation(panel, 0);
is(animation0, timeline.animations[0],
"The selected event was emitted with the right animation");
ok(isTimeBlockSelected(timeline, 0),
"The time block has the right selected class");
info("Click on the second animation, expect it to be selected too");
- let animation1 = yield clickOnAnimation(panel, 1);
+ let animation1 = await clickOnAnimation(panel, 1);
is(animation1, timeline.animations[1],
"The selected event was emitted with the right animation");
ok(isTimeBlockSelected(timeline, 1),
"The second time block has the right selected class");
ok(!isTimeBlockSelected(timeline, 0),
"The first time block has been unselected");
info("Click again on the first animation and check if it unselects");
- yield clickOnAnimation(panel, 0);
+ await clickOnAnimation(panel, 0);
ok(isTimeBlockSelected(timeline, 0),
"The time block has the right selected class again");
ok(!isTimeBlockSelected(timeline, 1),
"The second time block has been unselected");
});
function isTimeBlockSelected(timeline, index) {
let animation = timeline.rootWrapperEl.querySelectorAll(".animation")[index];
--- a/devtools/client/animationinspector/test/browser_animation_controller_exposes_document_currentTime.js
+++ b/devtools/client/animationinspector/test/browser_animation_controller_exposes_document_currentTime.js
@@ -2,46 +2,46 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the controller provides the document.timeline currentTime (at least
// the last known version since new animations were added).
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel, controller} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {panel, controller} = await openAnimationInspector();
ok(controller.documentCurrentTime, "The documentCurrentTime getter exists");
checkDocumentTimeIsCorrect(controller);
let time1 = controller.documentCurrentTime;
- yield startNewAnimation(controller, panel);
+ await startNewAnimation(controller, panel);
checkDocumentTimeIsCorrect(controller);
let time2 = controller.documentCurrentTime;
ok(time2 > time1, "The new documentCurrentTime is higher than the old one");
});
function checkDocumentTimeIsCorrect(controller) {
let time = 0;
for (let {state} of controller.animationPlayers) {
time = Math.max(time, state.documentCurrentTime);
}
is(controller.documentCurrentTime, time,
"The documentCurrentTime is correct");
}
-function* startNewAnimation(controller, panel) {
+async function startNewAnimation(controller, panel) {
info("Add a new animation to the page and check the time again");
let onPlayerAdded = controller.once(controller.PLAYERS_UPDATED_EVENT);
let onRendered = waitForAnimationTimelineRendering(panel);
- yield executeInContent("devtools:test:setAttribute", {
+ await executeInContent("devtools:test:setAttribute", {
selector: ".still",
attributeName: "class",
attributeValue: "ball still short"
});
- yield onPlayerAdded;
- yield onRendered;
- yield waitForAllAnimationTargets(panel);
+ await onPlayerAdded;
+ await onRendered;
+ await waitForAllAnimationTargets(panel);
}
--- a/devtools/client/animationinspector/test/browser_animation_detail_displayed.js
+++ b/devtools/client/animationinspector/test/browser_animation_detail_displayed.js
@@ -11,75 +11,75 @@
// 3. Display after click on an animation.
// 4. Display from first time if displayed animation is only one.
// 5. Close the animation-detail element by clicking on close button.
// 6. Stay selected animation even if refresh all UI.
// 7. Close the animation-detail element again and click selected animation again.
requestLongerTimeout(5);
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_multiple_property_types.html");
- const { panel, inspector } = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_multiple_property_types.html");
+ const { panel, inspector } = await openAnimationInspector();
const timelineComponent = panel.animationsTimelineComponent;
const animationDetailEl =
timelineComponent.rootWrapperEl.querySelector(".animation-detail");
const splitboxControlledEl =
timelineComponent.rootWrapperEl.querySelector(".controlled");
// 1. Existance of animation-detail element.
ok(animationDetailEl, "The animation-detail element should exist");
// 2. Hidden at first if multiple animations were displayed.
const win = timelineComponent.rootWrapperEl.ownerGlobal;
is(win.getComputedStyle(splitboxControlledEl).display, "none",
"The animation-detail element should be hidden at first "
+ "if multiple animations were displayed");
// 3. Display after click on an animation.
- yield clickOnAnimation(panel, 0);
+ await clickOnAnimation(panel, 0);
isnot(win.getComputedStyle(splitboxControlledEl).display, "none",
"The animation-detail element should be displayed after clicked on an animation");
// 4. Display from first time if displayed animation is only one.
- yield selectNodeAndWaitForAnimations("#target1", inspector);
+ await selectNodeAndWaitForAnimations("#target1", inspector);
ok(animationDetailEl.querySelector(".property"),
"The property in animation-detail element should be displayed");
// 5. Close the animation-detail element by clicking on close button.
const previousHeight = animationDetailEl.offsetHeight;
- yield clickCloseButtonForDetailPanel(timelineComponent, animationDetailEl);
+ await clickCloseButtonForDetailPanel(timelineComponent, animationDetailEl);
is(win.getComputedStyle(splitboxControlledEl).display, "none",
"animation-detail element should not display");
// Select another animation.
- yield selectNodeAndWaitForAnimations("#target2", inspector);
+ await selectNodeAndWaitForAnimations("#target2", inspector);
isnot(win.getComputedStyle(splitboxControlledEl).display, "none",
"animation-detail element should display");
is(animationDetailEl.offsetHeight, previousHeight,
"The height of animation-detail should keep the height");
// 6. Stay selected animation even if refresh all UI.
- yield selectNodeAndWaitForAnimations("#target1", inspector);
- yield clickTimelineRewindButton(panel);
+ await selectNodeAndWaitForAnimations("#target1", inspector);
+ await clickTimelineRewindButton(panel);
ok(animationDetailEl.querySelector(".property"),
"The property in animation-detail element should stay as is");
// 7. Close the animation-detail element again and click selected animation again.
- yield clickCloseButtonForDetailPanel(timelineComponent, animationDetailEl);
- yield clickOnAnimation(panel, 0);
+ await clickCloseButtonForDetailPanel(timelineComponent, animationDetailEl);
+ await clickOnAnimation(panel, 0);
isnot(win.getComputedStyle(splitboxControlledEl).display, "none",
"animation-detail element should display again");
});
/**
* Click close button for animation-detail panel.
*
* @param {AnimationTimeline} AnimationTimeline component
* @param {DOMNode} animation-detail element
* @return {Promise} which wait for close the detail pane
*/
-function* clickCloseButtonForDetailPanel(timeline, element) {
+async function clickCloseButtonForDetailPanel(timeline, element) {
const button = element.querySelector(".animation-detail-header button");
const onclosed = timeline.once("animation-detail-closed");
EventUtils.sendMouseEvent({type: "click"}, button, element.ownerDocument.defaultView);
- return yield onclosed;
+ return onclosed;
}
--- a/devtools/client/animationinspector/test/browser_animation_detail_easings.js
+++ b/devtools/client/animationinspector/test/browser_animation_detail_easings.js
@@ -43,24 +43,24 @@ const TEST_CASES = {
},
"css-animations": {
opacity: {
expectedValues: ["ease", "ease"],
}
},
};
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_multiple_easings.html");
- const { panel } = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_multiple_easings.html");
+ const { panel } = await openAnimationInspector();
const timelineComponent = panel.animationsTimelineComponent;
const timeBlocks = getAnimationTimeBlocks(panel);
for (let i = 0; i < timeBlocks.length; i++) {
- yield clickOnAnimation(panel, i);
+ await clickOnAnimation(panel, i);
const detailComponent = timelineComponent.details;
const detailEl = detailComponent.containerEl;
const state = detailComponent.animation.state;
const testcase = TEST_CASES[state.name];
if (!testcase) {
continue;
--- a/devtools/client/animationinspector/test/browser_animation_empty_on_invalid_nodes.js
+++ b/devtools/client/animationinspector/test/browser_animation_empty_on_invalid_nodes.js
@@ -2,36 +2,36 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
requestLongerTimeout(2);
// Test that the panel shows no animation data for invalid or not animated nodes
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {inspector, panel, window} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {inspector, panel, window} = await openAnimationInspector();
let {document} = window;
info("Select node .still and check that the panel is empty");
- let stillNode = yield getNodeFront(".still", inspector);
- yield selectNodeAndWaitForAnimations(stillNode, inspector);
+ let stillNode = await getNodeFront(".still", inspector);
+ await selectNodeAndWaitForAnimations(stillNode, inspector);
is(panel.animationsTimelineComponent.animations.length, 0,
"No animation players stored in the timeline component for a still node");
is(panel.animationsTimelineComponent.animationsEl.childNodes.length, 0,
"No animation displayed in the timeline component for a still node");
is(document.querySelector("#error-type").textContent,
ANIMATION_L10N.getStr("panel.invalidElementSelected"),
"The correct error message is displayed");
info("Select the comment text node and check that the panel is empty");
- let commentNode = yield inspector.walker.previousSibling(stillNode);
- yield selectNodeAndWaitForAnimations(commentNode, inspector);
+ let commentNode = await inspector.walker.previousSibling(stillNode);
+ await selectNodeAndWaitForAnimations(commentNode, inspector);
is(panel.animationsTimelineComponent.animations.length, 0,
"No animation players stored in the timeline component for a text node");
is(panel.animationsTimelineComponent.animationsEl.childNodes.length, 0,
"No animation displayed in the timeline component for a text node");
is(document.querySelector("#error-type").textContent,
ANIMATION_L10N.getStr("panel.invalidElementSelected"),
"The correct error message is displayed");
--- a/devtools/client/animationinspector/test/browser_animation_keyframe_markers.js
+++ b/devtools/client/animationinspector/test/browser_animation_keyframe_markers.js
@@ -16,28 +16,28 @@ const EXPECTED_PROPERTIES = [
"borderTopLeftRadius",
"borderTopRightRadius",
"filter",
"height",
"transform",
"width"
];
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_keyframes.html");
- let {panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_keyframes.html");
+ let {panel} = await openAnimationInspector();
let timeline = panel.animationsTimelineComponent;
// doc_keyframes.html has only one animation.
// So we don't need to click the animation since already the animation detail shown.
ok(timeline.rootWrapperEl.querySelectorAll(".frames .keyframes").length,
"There are container elements for displaying keyframes");
- let data = yield getExpectedKeyframesData(timeline.animations[0]);
+ let data = await getExpectedKeyframesData(timeline.animations[0]);
for (let propertyName in data) {
info("Check the keyframe markers for " + propertyName);
let widthMarkerSelector = ".frame[data-property=" + propertyName + "]";
let markers = timeline.rootWrapperEl.querySelectorAll(widthMarkerSelector);
is(markers.length, data[propertyName].length,
"The right number of keyframes was found for " + propertyName);
@@ -47,20 +47,20 @@ add_task(function* () {
is(markers[i].dataset.offset, offsets[i],
"Marker " + i + " for " + propertyName + " has the right offset");
is(markers[i].dataset.value, values[i],
"Marker " + i + " for " + propertyName + " has the right value");
}
}
});
-function* getExpectedKeyframesData(animation) {
+async function getExpectedKeyframesData(animation) {
// We're testing the UI state here, so it's fine to get the list of expected
// properties from the animation actor.
- let properties = yield animation.getProperties();
+ let properties = await animation.getProperties();
let data = {};
for (let expectedProperty of EXPECTED_PROPERTIES) {
data[expectedProperty] = [];
for (let {name, values} of properties) {
if (name !== expectedProperty) {
continue;
}
--- a/devtools/client/animationinspector/test/browser_animation_mutations_with_same_names.js
+++ b/devtools/client/animationinspector/test/browser_animation_mutations_with_same_names.js
@@ -4,33 +4,33 @@
"use strict";
// Check that when animations are added later (through animation mutations) and
// if these animations have the same names, then all of them are still being
// displayed (which should be true as long as these animations apply to
// different nodes).
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_negative_animation.html");
- const {controller, panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_negative_animation.html");
+ const {controller, panel} = await openAnimationInspector();
const timeline = panel.animationsTimelineComponent;
const areTracksReady = () => timeline.animations.every(a => {
return timeline.componentsMap[a.actorID];
});
// We need to wait for all tracks to be ready, cause this is an async part of the init
// of the panel.
while (controller.animationPlayers.length < 3 || !areTracksReady()) {
- yield waitForAnimationTimelineRendering(panel);
+ await waitForAnimationTimelineRendering(panel);
}
// Same for animation targets, they're retrieved asynchronously.
- yield waitForAllAnimationTargets(panel);
+ await waitForAllAnimationTargets(panel);
is(panel.animationsTimelineComponent.animations.length, 3,
"The timeline shows 3 animations too");
// Reduce the known nodeFronts to a set to make them unique.
let nodeFronts =
new Set(getAnimationTargetNodes(panel).map(n => n.previewer.nodeFront));
is(nodeFronts.size, 3, "The animations are applied to 3 different node fronts");
--- a/devtools/client/animationinspector/test/browser_animation_panel_exists.js
+++ b/devtools/client/animationinspector/test/browser_animation_panel_exists.js
@@ -1,19 +1,19 @@
/* vim: set ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the animation panel sidebar exists
-add_task(function* () {
- yield addTab("data:text/html;charset=utf-8,welcome to the animation panel");
- let {panel, controller} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab("data:text/html;charset=utf-8,welcome to the animation panel");
+ let {panel, controller} = await openAnimationInspector();
ok(controller,
"The animation controller exists");
ok(controller.animationsFront,
"The animation controller has been initialized");
ok(panel,
"The animation panel exists");
ok(panel.playersEl,
--- a/devtools/client/animationinspector/test/browser_animation_participate_in_inspector_update.js
+++ b/devtools/client/animationinspector/test/browser_animation_participate_in_inspector_update.js
@@ -5,36 +5,36 @@
"use strict";
requestLongerTimeout(2);
// Test that the update of the animation panel participate in the
// inspector-updated event. This means that the test verifies that the
// inspector-updated event is emitted *after* the animation panel is ready.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {inspector, panel, controller} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {inspector, panel, controller} = await openAnimationInspector();
info("Listen for the players-updated, ui-updated and " +
"inspector-updated events");
let receivedEvents = [];
controller.once(controller.PLAYERS_UPDATED_EVENT, () => {
receivedEvents.push(controller.PLAYERS_UPDATED_EVENT);
});
panel.once(panel.UI_UPDATED_EVENT, () => {
receivedEvents.push(panel.UI_UPDATED_EVENT);
});
inspector.once("inspector-updated", () => {
receivedEvents.push("inspector-updated");
});
info("Selecting an animated node");
- let node = yield getNodeFront(".animated", inspector);
- yield selectNodeAndWaitForAnimations(node, inspector);
+ let node = await getNodeFront(".animated", inspector);
+ await selectNodeAndWaitForAnimations(node, inspector);
info("Check that all events were received");
// Only assert that the inspector-updated event is last, the order of the
// first 2 events is irrelevant.
is(receivedEvents.length, 3, "3 events were received");
is(receivedEvents[2], "inspector-updated",
"The third event received was the inspector-updated event");
--- a/devtools/client/animationinspector/test/browser_animation_playerFronts_are_refreshed.js
+++ b/devtools/client/animationinspector/test/browser_animation_playerFronts_are_refreshed.js
@@ -4,33 +4,33 @@
"use strict";
requestLongerTimeout(2);
// Check that the AnimationPlayerFront objects lifecycle is managed by the
// AnimationController.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {controller, inspector} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {controller, inspector} = await openAnimationInspector();
info("Selecting an animated node");
// selectNode waits for the inspector-updated event before resolving, which
// means the controller.PLAYERS_UPDATED_EVENT event has been emitted before
// and players are ready.
- yield selectNodeAndWaitForAnimations(".animated", inspector);
+ await selectNodeAndWaitForAnimations(".animated", inspector);
is(controller.animationPlayers.length, 1,
"One AnimationPlayerFront has been created");
info("Selecting a node with mutliple animations");
- yield selectNodeAndWaitForAnimations(".multi", inspector);
+ await selectNodeAndWaitForAnimations(".multi", inspector);
is(controller.animationPlayers.length, 2,
"2 AnimationPlayerFronts have been created");
info("Selecting a node with no animations");
- yield selectNodeAndWaitForAnimations(".still", inspector);
+ await selectNodeAndWaitForAnimations(".still", inspector);
is(controller.animationPlayers.length, 0,
"There are no more AnimationPlayerFront objects");
});
--- a/devtools/client/animationinspector/test/browser_animation_playerWidgets_appear_on_panel_init.js
+++ b/devtools/client/animationinspector/test/browser_animation_playerWidgets_appear_on_panel_init.js
@@ -4,20 +4,20 @@
"use strict";
// Test that player widgets are displayed right when the animation panel is
// initialized, if the selected node (<body> by default) is animated.
const { ANIMATION_TYPES } = require("devtools/server/actors/animation");
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_multiple_animation_types.html");
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_multiple_animation_types.html");
- let {panel} = yield openAnimationInspector();
+ let {panel} = await openAnimationInspector();
is(panel.animationsTimelineComponent.animations.length, 3,
"Three animations are handled by the timeline after init");
assertAnimationsDisplayed(panel, 3,
"Three animations are displayed after init");
is(
panel.animationsTimelineComponent
.animationsEl
.querySelectorAll(`.animation.${ANIMATION_TYPES.SCRIPT_ANIMATION}`)
--- a/devtools/client/animationinspector/test/browser_animation_playerWidgets_target_nodes.js
+++ b/devtools/client/animationinspector/test/browser_animation_playerWidgets_target_nodes.js
@@ -3,30 +3,30 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
requestLongerTimeout(2);
// Test that player widgets display information about target nodes
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {inspector, panel} = await openAnimationInspector();
info("Select the simple animated node");
- yield selectNodeAndWaitForAnimations(".animated", inspector);
+ await selectNodeAndWaitForAnimations(".animated", inspector);
let targetNodeComponent = getAnimationTargetNodes(panel)[0];
let {previewer} = targetNodeComponent;
// Make sure to wait for the target-retrieved event if the nodeFront hasn't
// yet been retrieved by the TargetNodeComponent.
if (!previewer.nodeFront) {
- yield targetNodeComponent.once("target-retrieved");
+ await targetNodeComponent.once("target-retrieved");
}
is(previewer.el.textContent, "div#.ball.animated",
"The target element's content is correct");
let highlighterEl = previewer.el.querySelector(".node-highlighter");
ok(highlighterEl,
"The icon to highlight the target element in the page exists");
--- a/devtools/client/animationinspector/test/browser_animation_pseudo_elements.js
+++ b/devtools/client/animationinspector/test/browser_animation_pseudo_elements.js
@@ -1,19 +1,19 @@
/* vim: set ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that animated pseudo-elements do show in the timeline.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_pseudo_elements.html");
- let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_pseudo_elements.html");
+ let {inspector, panel} = await openAnimationInspector();
info("With <body> selected by default check the content of the timeline");
is(getAnimationTimeBlocks(panel).length, 3, "There are 3 animations in the timeline");
let targetNodes = getAnimationTargetNodes(panel);
let getTargetNodeText = index => {
let el = targetNodes[index].previewer.previewEl;
return [...el.childNodes]
@@ -21,29 +21,29 @@ add_task(function* () {
.join("");
};
is(getTargetNodeText(0), "body", "The first animated node is <body>");
is(getTargetNodeText(1), "::before", "The second animated node is ::before");
is(getTargetNodeText(2), "::after", "The third animated node is ::after");
info("Getting the before and after nodeFronts");
- let bodyContainer = yield getContainerForSelector("body", inspector);
+ let bodyContainer = await getContainerForSelector("body", inspector);
let getBodyChildNodeFront = index => {
return bodyContainer.elt.children[1].childNodes[index].container.node;
};
let beforeNode = getBodyChildNodeFront(0);
let afterNode = getBodyChildNodeFront(1);
info("Select the ::before pseudo-element in the inspector");
- yield selectNodeAndWaitForAnimations(beforeNode, inspector);
+ await selectNodeAndWaitForAnimations(beforeNode, inspector);
is(getAnimationTimeBlocks(panel).length, 1, "There is 1 animation in the timeline");
is(getAnimationTargetNodes(panel)[0].previewer.nodeFront,
inspector.selection.nodeFront,
"The right node front is displayed in the timeline");
info("Select the ::after pseudo-element in the inspector");
- yield selectNodeAndWaitForAnimations(afterNode, inspector);
+ await selectNodeAndWaitForAnimations(afterNode, inspector);
is(getAnimationTimeBlocks(panel).length, 1, "There is 1 animation in the timeline");
is(getAnimationTargetNodes(panel)[0].previewer.nodeFront,
inspector.selection.nodeFront,
"The right node front is displayed in the timeline");
});
--- a/devtools/client/animationinspector/test/browser_animation_refresh_on_added_animation.js
+++ b/devtools/client/animationinspector/test/browser_animation_refresh_on_added_animation.js
@@ -3,48 +3,48 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
requestLongerTimeout(2);
// Test that the panel content refreshes when new animations are added.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {inspector, panel} = await openAnimationInspector();
info("Select a non animated node");
- yield selectNodeAndWaitForAnimations(".still", inspector);
+ await selectNodeAndWaitForAnimations(".still", inspector);
assertAnimationsDisplayed(panel, 0);
info("Start an animation on the node");
let onRendered = waitForAnimationTimelineRendering(panel);
- yield changeElementAndWait({
+ await changeElementAndWait({
selector: ".still",
attributeName: "class",
attributeValue: "ball animated"
}, panel, inspector);
- yield onRendered;
- yield waitForAllAnimationTargets(panel);
+ await onRendered;
+ await waitForAllAnimationTargets(panel);
assertAnimationsDisplayed(panel, 1);
info("Remove the animation class on the node");
- yield changeElementAndWait({
+ await changeElementAndWait({
selector: ".ball.animated",
attributeName: "class",
attributeValue: "ball still"
}, panel, inspector);
assertAnimationsDisplayed(panel, 0);
});
-function* changeElementAndWait(options, panel, inspector) {
+async function changeElementAndWait(options, panel, inspector) {
let onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
let onInspectorUpdated = inspector.once("inspector-updated");
- yield executeInContent("devtools:test:setAttribute", options);
+ await executeInContent("devtools:test:setAttribute", options);
- yield promise.all([onInspectorUpdated, onPanelUpdated]);
+ await promise.all([onInspectorUpdated, onPanelUpdated]);
}
--- a/devtools/client/animationinspector/test/browser_animation_refresh_on_removed_animation.js
+++ b/devtools/client/animationinspector/test/browser_animation_refresh_on_removed_animation.js
@@ -3,47 +3,47 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
requestLongerTimeout(2);
// Test that the panel content refreshes when animations are removed.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
- let {inspector, panel} = yield openAnimationInspector();
- yield testRefreshOnRemove(inspector, panel);
+ let {inspector, panel} = await openAnimationInspector();
+ await testRefreshOnRemove(inspector, panel);
});
-function* testRefreshOnRemove(inspector, panel) {
+async function testRefreshOnRemove(inspector, panel) {
info("Select a animated node");
- yield selectNodeAndWaitForAnimations(".animated", inspector);
+ await selectNodeAndWaitForAnimations(".animated", inspector);
assertAnimationsDisplayed(panel, 1);
info("Listen to the next UI update event");
let onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
info("Remove the animation on the node by removing the class");
- yield executeInContent("devtools:test:setAttribute", {
+ await executeInContent("devtools:test:setAttribute", {
selector: ".animated",
attributeName: "class",
attributeValue: "ball still test-node"
});
- yield onPanelUpdated;
+ await onPanelUpdated;
ok(true, "The panel update event was fired");
assertAnimationsDisplayed(panel, 0);
info("Add an finite animation on the node again, and wait for it to appear");
onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
- yield executeInContent("devtools:test:setAttribute", {
+ await executeInContent("devtools:test:setAttribute", {
selector: ".test-node",
attributeName: "class",
attributeValue: "ball short test-node"
});
- yield onPanelUpdated;
- yield waitForAnimationSelecting(panel);
+ await onPanelUpdated;
+ await waitForAnimationSelecting(panel);
assertAnimationsDisplayed(panel, 1);
}
--- a/devtools/client/animationinspector/test/browser_animation_refresh_when_active.js
+++ b/devtools/client/animationinspector/test/browser_animation_refresh_when_active.js
@@ -3,53 +3,53 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
requestLongerTimeout(2);
// Test that the panel only refreshes when it is visible in the sidebar.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
- let {inspector, panel} = yield openAnimationInspector();
- yield testRefresh(inspector, panel);
+ let {inspector, panel} = await openAnimationInspector();
+ await testRefresh(inspector, panel);
});
-function* testRefresh(inspector, panel) {
+async function testRefresh(inspector, panel) {
info("Select a non animated node");
- yield selectNodeAndWaitForAnimations(".still", inspector);
+ await selectNodeAndWaitForAnimations(".still", inspector);
info("Switch to the rule-view panel");
inspector.sidebar.select("ruleview");
info("Select the animated node now");
- yield selectNode(".animated", inspector);
+ await selectNode(".animated", inspector);
assertAnimationsDisplayed(panel, 0,
"The panel doesn't show the animation data while inactive");
info("Switch to the animation panel");
let onRendered = waitForAnimationTimelineRendering(panel);
inspector.sidebar.select("animationinspector");
- yield panel.once(panel.UI_UPDATED_EVENT);
- yield onRendered;
+ await panel.once(panel.UI_UPDATED_EVENT);
+ await onRendered;
assertAnimationsDisplayed(panel, 1,
"The panel shows the animation data after selecting it");
info("Switch again to the rule-view");
inspector.sidebar.select("ruleview");
info("Select the non animated node again");
- yield selectNode(".still", inspector);
+ await selectNode(".still", inspector);
assertAnimationsDisplayed(panel, 1,
"The panel still shows the previous animation data since it is inactive");
info("Switch to the animation panel again");
inspector.sidebar.select("animationinspector");
- yield panel.once(panel.UI_UPDATED_EVENT);
+ await panel.once(panel.UI_UPDATED_EVENT);
assertAnimationsDisplayed(panel, 0,
"The panel is now empty after refreshing");
}
--- a/devtools/client/animationinspector/test/browser_animation_refresh_when_active_after_mutations.js
+++ b/devtools/client/animationinspector/test/browser_animation_refresh_when_active_after_mutations.js
@@ -9,42 +9,42 @@ requestLongerTimeout(2);
// Test that refresh animation UI while the panel is hidden.
const EXPECTED_GRAPH_PATH_SEGMENTS = [{ x: 0, y: 0 },
{ x: 49999, y: 0.0 },
{ x: 50000, y: 0.5 },
{ x: 99999, y: 0.5 },
{ x: 100000, y: 0 }];
-add_task(function* () {
+add_task(async function() {
info("Open animation inspector once so that activate animation mutations listener");
- yield addTab("data:text/html;charset=utf8,<div id='target'>test</div>");
- const { controller, inspector, panel } = yield openAnimationInspector();
+ await addTab("data:text/html;charset=utf8,<div id='target'>test</div>");
+ const { controller, inspector, panel } = await openAnimationInspector();
info("Select other tool to hide animation inspector");
- yield inspector.sidebar.select("ruleview");
+ await inspector.sidebar.select("ruleview");
// Count players-updated event in controller.
let updatedEventCount = 0;
controller.on("players-updated", () => {
updatedEventCount += 1;
});
info("Make animation by eval in content");
- yield evalInDebuggee(`document.querySelector('#target').animate(
+ await evalInDebuggee(`document.querySelector('#target').animate(
{ transform: 'translate(100px)' },
{ duration: 100000, easing: 'steps(2)' });`);
info("Wait for animation mutations event");
- yield controller.animationsFront.once("mutations");
+ await controller.animationsFront.once("mutations");
info("Check players-updated events count");
is(updatedEventCount, 0, "players-updated event shoud not be fired");
info("Re-select animation inspector and check the UI");
- yield inspector.sidebar.select("animationinspector");
- yield waitForAnimationTimelineRendering(panel);
+ await inspector.sidebar.select("animationinspector");
+ await waitForAnimationTimelineRendering(panel);
const timeBlocks = getAnimationTimeBlocks(panel);
is(timeBlocks.length, 1, "One animation should display");
const timeBlock = timeBlocks[0];
const state = timeBlock.animation.state;
const effectEl = timeBlock.containerEl.querySelector(".effect-easing");
ok(effectEl, "<g> element for effect easing should exist");
const pathEl = effectEl.querySelector("path");
--- a/devtools/client/animationinspector/test/browser_animation_running_on_compositor.js
+++ b/devtools/client/animationinspector/test/browser_animation_running_on_compositor.js
@@ -4,47 +4,47 @@
"use strict";
requestLongerTimeout(2);
// Test that when animations displayed in the timeline are running on the
// compositor, they get a special icon and information in the tooltip.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {inspector, panel} = await openAnimationInspector();
let timeline = panel.animationsTimelineComponent;
info("Select a test node we know has an animation running on the compositor");
- yield selectNodeAndWaitForAnimations(".compositor-all", inspector);
+ await selectNodeAndWaitForAnimations(".compositor-all", inspector);
let animationEl = timeline.animationsEl.querySelector(".animation");
ok(animationEl.classList.contains("fast-track"),
"The animation element has the fast-track css class");
ok(hasTooltip(animationEl,
ANIMATION_L10N.getStr("player.allPropertiesOnCompositorTooltip")),
"The animation element has the right tooltip content");
info("Select a node we know doesn't have an animation on the compositor");
- yield selectNodeAndWaitForAnimations(".no-compositor", inspector);
+ await selectNodeAndWaitForAnimations(".no-compositor", inspector);
animationEl = timeline.animationsEl.querySelector(".animation");
ok(!animationEl.classList.contains("fast-track"),
"The animation element does not have the fast-track css class");
ok(!hasTooltip(animationEl,
ANIMATION_L10N.getStr("player.allPropertiesOnCompositorTooltip")),
"The animation element does not have oncompositor tooltip content");
ok(!hasTooltip(animationEl,
ANIMATION_L10N.getStr("player.somePropertiesOnCompositorTooltip")),
"The animation element does not have oncompositor tooltip content");
info("Select a node we know has animation on the compositor and not on the" +
" compositor");
- yield selectNodeAndWaitForAnimations(".compositor-notall", inspector);
+ await selectNodeAndWaitForAnimations(".compositor-notall", inspector);
animationEl = timeline.animationsEl.querySelector(".animation");
ok(animationEl.classList.contains("fast-track"),
"The animation element has the fast-track css class");
ok(hasTooltip(animationEl,
ANIMATION_L10N.getStr("player.somePropertiesOnCompositorTooltip")),
"The animation element has the right tooltip content");
});
--- a/devtools/client/animationinspector/test/browser_animation_same_nb_of_playerWidgets_and_playerFronts.js
+++ b/devtools/client/animationinspector/test/browser_animation_same_nb_of_playerWidgets_and_playerFronts.js
@@ -4,20 +4,20 @@
"use strict";
requestLongerTimeout(2);
// Check that when playerFronts are updated, the same number of playerWidgets
// are created in the panel.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {inspector, panel, controller} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {inspector, panel, controller} = await openAnimationInspector();
let timeline = panel.animationsTimelineComponent;
info("Selecting the test animated node again");
- yield selectNodeAndWaitForAnimations(".multi", inspector);
+ await selectNodeAndWaitForAnimations(".multi", inspector);
is(controller.animationPlayers.length,
timeline.animationsEl.querySelectorAll(".animation").length,
"As many timeline elements were created as there are playerFronts");
});
--- a/devtools/client/animationinspector/test/browser_animation_shows_player_on_valid_node.js
+++ b/devtools/client/animationinspector/test/browser_animation_shows_player_on_valid_node.js
@@ -4,18 +4,18 @@
"use strict";
requestLongerTimeout(2);
// Test that the panel shows an animation player when an animated node is
// selected.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {inspector, panel} = await openAnimationInspector();
info("Select node .animated and check that the panel is not empty");
- let node = yield getNodeFront(".animated", inspector);
- yield selectNodeAndWaitForAnimations(node, inspector);
+ let node = await getNodeFront(".animated", inspector);
+ await selectNodeAndWaitForAnimations(node, inspector);
assertAnimationsDisplayed(panel, 1);
});
--- a/devtools/client/animationinspector/test/browser_animation_spacebar_toggles_animations.js
+++ b/devtools/client/animationinspector/test/browser_animation_spacebar_toggles_animations.js
@@ -5,39 +5,39 @@
"use strict";
// Test that the spacebar key press toggles the toggleAll button state
// when a node with no animation is selected.
// This test doesn't need to test if animations actually pause/resume
// because there's an other test that does this :
// browser_animation_toggle_button_toggles_animation.js
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel, inspector, window, controller} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {panel, inspector, window, controller} = await openAnimationInspector();
let {toggleAllButtonEl} = panel;
// select a node without animations
- yield selectNodeAndWaitForAnimations(".still", inspector);
+ await selectNodeAndWaitForAnimations(".still", inspector);
// ensure the focus is on the animation panel
window.focus();
info("Simulate spacebar stroke and check toggleAll button" +
" is in paused state");
// sending the key will lead to a ALL_ANIMATIONS_TOGGLED_EVENT
let onToggled = once(controller, controller.ALL_ANIMATIONS_TOGGLED_EVENT);
EventUtils.sendKey("SPACE", window);
- yield onToggled;
+ await onToggled;
ok(toggleAllButtonEl.classList.contains("paused"),
"The toggle all button is in its paused state");
info("Simulate spacebar stroke and check toggleAll button" +
" is in playing state");
// sending the key will lead to a ALL_ANIMATIONS_TOGGLED_EVENT
onToggled = once(controller, controller.ALL_ANIMATIONS_TOGGLED_EVENT);
EventUtils.sendKey("SPACE", window);
- yield onToggled;
+ await onToggled;
ok(!toggleAllButtonEl.classList.contains("paused"),
"The toggle all button is in its playing state again");
});
--- a/devtools/client/animationinspector/test/browser_animation_spacebar_toggles_node_animations.js
+++ b/devtools/client/animationinspector/test/browser_animation_spacebar_toggles_node_animations.js
@@ -8,36 +8,36 @@
// This test doesn't need to test if animations actually pause/resume
// because there's an other test that does this.
// There are animations in the test page and since, by default, the <body> node
// is selected, animations will be displayed in the timeline, so the timeline
// play/resume button will be displayed
requestLongerTimeout(2);
-add_task(function* () {
+add_task(async function() {
requestLongerTimeout(2);
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel, window} = yield openAnimationInspector();
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {panel, window} = await openAnimationInspector();
let {playTimelineButtonEl} = panel;
// ensure the focus is on the animation panel
window.focus();
info("Simulate spacebar stroke and check playResume button" +
" is in paused state");
// sending the key will lead to render animation timeline
EventUtils.sendKey("SPACE", window);
- yield waitForAnimationTimelineRendering(panel);
+ await waitForAnimationTimelineRendering(panel);
ok(playTimelineButtonEl.classList.contains("paused"),
"The play/resume button is in its paused state");
info("Simulate spacebar stroke and check playResume button" +
" is in playing state");
// sending the key will lead to render animation timeline
EventUtils.sendKey("SPACE", window);
- yield waitForAnimationTimelineRendering(panel);
+ await waitForAnimationTimelineRendering(panel);
ok(!playTimelineButtonEl.classList.contains("paused"),
"The play/resume button is in its play state again");
});
--- a/devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js
+++ b/devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js
@@ -138,19 +138,19 @@ const TEST_CASES = {
{ x: 50000, y: 0.5 },
{ x: 75000, y: 0.5 },
{ x: 99999, y: 0.5 },
]
]
},
};
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_multiple_easings.html");
- const { panel } = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_multiple_easings.html");
+ const { panel } = await openAnimationInspector();
getAnimationTimeBlocks(panel).forEach(timeBlock => {
const state = timeBlock.animation.state;
const testcase = TEST_CASES[state.name];
if (!testcase) {
return;
}
info(`Test effect easing graph of ${ state.name }`);
--- a/devtools/client/animationinspector/test/browser_animation_target_highlight_select.js
+++ b/devtools/client/animationinspector/test/browser_animation_target_highlight_select.js
@@ -4,36 +4,36 @@
"use strict";
requestLongerTimeout(2);
// Test that the DOM element targets displayed in animation player widgets can
// be used to highlight elements in the DOM and select them in the inspector.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
- let {toolbox, inspector, panel} = yield openAnimationInspector();
+ let {toolbox, inspector, panel} = await openAnimationInspector();
info("Select the simple animated node");
- yield selectNodeAndWaitForAnimations(".animated", inspector);
+ await selectNodeAndWaitForAnimations(".animated", inspector);
let targets = getAnimationTargetNodes(panel);
// Arbitrary select the first one
let targetNodeComponent = targets[0];
info("Retrieve the part of the widget that highlights the node on hover");
let highlightingEl = targetNodeComponent.previewer.previewEl;
info("Listen to node-highlight event and mouse over the widget");
let onHighlight = toolbox.once("node-highlight");
EventUtils.synthesizeMouse(highlightingEl, 10, 5, {type: "mouseover"},
highlightingEl.ownerDocument.defaultView);
- let nodeFront = yield onHighlight;
+ let nodeFront = await onHighlight;
// Do not forget to mouseout, otherwise we get random mouseover event
// when selecting another node, which triggers some requests in animation
// inspector.
EventUtils.synthesizeMouse(highlightingEl, 10, 5, {type: "mouseout"},
highlightingEl.ownerDocument.defaultView);
ok(true, "The node-highlight event was fired");
@@ -42,27 +42,27 @@ add_task(function* () {
is(nodeFront.tagName, "DIV",
"The highlighted node has the correct tagName");
is(nodeFront.attributes[0].name, "class",
"The highlighted node has the correct attributes");
is(nodeFront.attributes[0].value, "ball animated",
"The highlighted node has the correct class");
info("Select the body node in order to have the list of all animations");
- yield selectNodeAndWaitForAnimations("body", inspector);
+ await selectNodeAndWaitForAnimations("body", inspector);
targets = getAnimationTargetNodes(panel);
targetNodeComponent = targets[0];
info("Click on the first animated node component and wait for the " +
"selection to change");
let onSelection = inspector.selection.once("new-node-front");
let onRendered = waitForAnimationTimelineRendering(panel);
let nodeEl = targetNodeComponent.previewer.previewEl;
EventUtils.sendMouseEvent({type: "click"}, nodeEl,
nodeEl.ownerDocument.defaultView);
- yield onSelection;
+ await onSelection;
is(inspector.selection.nodeFront, targetNodeComponent.previewer.nodeFront,
"The selected node is the one stored on the animation widget");
- yield onRendered;
+ await onRendered;
});
--- a/devtools/client/animationinspector/test/browser_animation_target_highlighter_lock.js
+++ b/devtools/client/animationinspector/test/browser_animation_target_highlighter_lock.js
@@ -4,51 +4,51 @@
"use strict";
requestLongerTimeout(2);
// Test that the DOM element targets displayed in animation player widgets can
// be used to highlight elements in the DOM and select them in the inspector.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {panel} = await openAnimationInspector();
let targets = getAnimationTargetNodes(panel);
info("Click on the highlighter icon for the first animated node");
let domNodePreview1 = targets[0].previewer;
- yield lockHighlighterOn(domNodePreview1);
+ await lockHighlighterOn(domNodePreview1);
ok(domNodePreview1.highlightNodeEl.classList.contains("selected"),
"The highlighter icon is selected");
info("Click on the highlighter icon for the second animated node");
let domNodePreview2 = targets[1].previewer;
- yield lockHighlighterOn(domNodePreview2);
+ await lockHighlighterOn(domNodePreview2);
ok(domNodePreview2.highlightNodeEl.classList.contains("selected"),
"The highlighter icon is selected");
ok(!domNodePreview1.highlightNodeEl.classList.contains("selected"),
"The highlighter icon for the first node is unselected");
info("Click again to unhighlight");
- yield unlockHighlighterOn(domNodePreview2);
+ await unlockHighlighterOn(domNodePreview2);
ok(!domNodePreview2.highlightNodeEl.classList.contains("selected"),
"The highlighter icon for the second node is unselected");
});
-function* lockHighlighterOn(domNodePreview) {
+async function lockHighlighterOn(domNodePreview) {
let onLocked = domNodePreview.once("target-highlighter-locked");
clickOnHighlighterIcon(domNodePreview);
- yield onLocked;
+ await onLocked;
}
-function* unlockHighlighterOn(domNodePreview) {
+async function unlockHighlighterOn(domNodePreview) {
let onUnlocked = domNodePreview.once("target-highlighter-unlocked");
clickOnHighlighterIcon(domNodePreview);
- yield onUnlocked;
+ await onUnlocked;
}
function clickOnHighlighterIcon(domNodePreview) {
let lockEl = domNodePreview.highlightNodeEl;
EventUtils.sendMouseEvent({type: "click"}, lockEl,
lockEl.ownerDocument.defaultView);
}
--- a/devtools/client/animationinspector/test/browser_animation_timeline_add_animation.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_add_animation.js
@@ -2,34 +2,34 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test re-used animation element since we re-use existent animation element
// for the render performance.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_add_animation.html");
- let {panel, controller} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_add_animation.html");
+ let {panel, controller} = await openAnimationInspector();
const timelineComponent = panel.animationsTimelineComponent;
// Add new animation which has delay and endDelay.
- yield startNewAnimation(controller, panel, "#target2");
+ await startNewAnimation(controller, panel, "#target2");
const previousAnimationEl =
timelineComponent.animationsEl.querySelector(".animation:nth-child(2)");
const previousSummaryGraphEl = previousAnimationEl.querySelector(".summary");
const previousDelayEl = previousAnimationEl.querySelector(".delay");
const previousEndDelayEl = previousAnimationEl.querySelector(".end-delay");
const previousSummaryGraphWidth = previousSummaryGraphEl.viewBox.baseVal.width;
const previousDelayBounds = previousDelayEl.getBoundingClientRect();
const previousEndDelayBounds = previousEndDelayEl.getBoundingClientRect();
// Add another animation.
- yield startNewAnimation(controller, panel, "#target3");
+ await startNewAnimation(controller, panel, "#target3");
const currentAnimationEl =
timelineComponent.animationsEl.querySelector(".animation:nth-child(2)");
const currentSummaryGraphEl = currentAnimationEl.querySelector(".summary");
const currentDelayEl = currentAnimationEl.querySelector(".delay");
const currentEndDelayEl = currentAnimationEl.querySelector(".end-delay");
const currentSummaryGraphWidth = currentSummaryGraphEl.viewBox.baseVal.width;
const currentDelayBounds = currentDelayEl.getBoundingClientRect();
const currentEndDelayBounds = currentEndDelayEl.getBoundingClientRect();
@@ -46,23 +46,23 @@ add_task(function* () {
ok(currentDelayBounds.width < previousDelayBounds.width,
"Reused .delay element should be shorter");
ok(currentEndDelayBounds.left < previousEndDelayBounds.left,
"Reused .end-delay element should move to the left");
ok(currentEndDelayBounds.width < previousEndDelayBounds.width,
"Reused .end-delay element should be shorter");
});
-function* startNewAnimation(controller, panel, selector) {
+async function startNewAnimation(controller, panel, selector) {
info("Add a new animation to the page and check the time again");
let onPlayerAdded = controller.once(controller.PLAYERS_UPDATED_EVENT);
let onRendered = waitForAnimationTimelineRendering(panel);
- yield executeInContent("devtools:test:setAttribute", {
+ await executeInContent("devtools:test:setAttribute", {
selector: selector,
attributeName: "class",
attributeValue: "animation"
});
- yield onPlayerAdded;
- yield onRendered;
- yield waitForAllAnimationTargets(panel);
+ await onPlayerAdded;
+ await onRendered;
+ await waitForAllAnimationTargets(panel);
}
--- a/devtools/client/animationinspector/test/browser_animation_timeline_currentTime.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_currentTime.js
@@ -6,44 +6,44 @@
"use strict";
requestLongerTimeout(2);
// Check that the timeline toolbar displays the current time, and that it
// changes when animations are playing, gets back to 0 when animations are
// rewound, and stops when animations are paused.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel} = yield openAnimationInspector();
+ let {panel} = await openAnimationInspector();
let label = panel.timelineCurrentTimeEl;
ok(label, "The current time label exists");
// On page load animations are playing so the time shoud change, although we
// don't want to test the exact value of the time displayed, just that it
// actually changes.
info("Make sure the time displayed actually changes");
- yield isCurrentTimeLabelChanging(panel, true);
+ await isCurrentTimeLabelChanging(panel, true);
info("Pause the animations and check that the time stops changing");
- yield clickTimelinePlayPauseButton(panel);
- yield isCurrentTimeLabelChanging(panel, false);
+ await clickTimelinePlayPauseButton(panel);
+ await isCurrentTimeLabelChanging(panel, false);
info("Rewind the animations and check that the time stops changing");
- yield clickTimelineRewindButton(panel);
- yield isCurrentTimeLabelChanging(panel, false);
+ await clickTimelineRewindButton(panel);
+ await isCurrentTimeLabelChanging(panel, false);
is(label.textContent, "00:00.000");
});
-function* isCurrentTimeLabelChanging(panel, isChanging) {
+async function isCurrentTimeLabelChanging(panel, isChanging) {
let label = panel.timelineCurrentTimeEl;
let time1 = label.textContent;
- yield new Promise(r => setTimeout(r, 200));
+ await new Promise(r => setTimeout(r, 200));
let time2 = label.textContent;
if (isChanging) {
ok(time1 !== time2, "The text displayed in the label changes with time");
} else {
is(time1, time2, "The text displayed in the label doesn't change");
}
}
--- a/devtools/client/animationinspector/test/browser_animation_timeline_header.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_header.js
@@ -9,25 +9,25 @@ requestLongerTimeout(2);
// Check that the timeline shows correct time graduations in the header.
const {findOptimalTimeInterval, TimeScale} = require("devtools/client/animationinspector/utils");
// Should be kept in sync with TIME_GRADUATION_MIN_SPACING in
// animation-timeline.js
const TIME_GRADUATION_MIN_SPACING = 40;
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
// System scrollbar is enabled by default on our testing envionment and it
// would shrink width of inspector and affect number of time-ticks causing
// unexpected results. So, we set it wider to avoid this kind of edge case.
- yield pushPref("devtools.toolsidebar-width.inspector", 350);
+ await pushPref("devtools.toolsidebar-width.inspector", 350);
- let {panel} = yield openAnimationInspector();
+ let {panel} = await openAnimationInspector();
let timeline = panel.animationsTimelineComponent;
let headerEl = timeline.timeHeaderEl;
info("Find out how many time graduations should there be");
let width = headerEl.offsetWidth;
let animationDuration = TimeScale.maxEndTime - TimeScale.minStartTime;
--- a/devtools/client/animationinspector/test/browser_animation_timeline_iterationStart.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_iterationStart.js
@@ -1,26 +1,26 @@
/* vim: set ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Check that the iteration start is displayed correctly in time blocks.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_script_animation.html");
- let {panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_script_animation.html");
+ let {panel} = await openAnimationInspector();
let timelineComponent = panel.animationsTimelineComponent;
let timeBlockComponents = getAnimationTimeBlocks(panel);
let detailsComponent = timelineComponent.details;
for (let i = 0; i < timeBlockComponents.length; i++) {
info(`Expand time block ${i} so its keyframes are visible`);
- yield clickOnAnimation(panel, i);
+ await clickOnAnimation(panel, i);
info(`Check the state of time block ${i}`);
let {containerEl, animation: {state}} = timeBlockComponents[i];
checkAnimationTooltip(containerEl, state);
checkProgressAtStartingTime(containerEl, state);
// Get the first set of keyframes (there's only one animated property
--- a/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_01.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_01.js
@@ -5,30 +5,30 @@
"use strict";
requestLongerTimeout(2);
// Check that the timeline toolbar contains a pause button and that this pause button can
// be clicked. Check that when it is, the button changes state and the scrubber stops and
// resumes.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel} = yield openAnimationInspector();
+ let {panel} = await openAnimationInspector();
let btn = panel.playTimelineButtonEl;
ok(btn, "The play/pause button exists");
ok(!btn.classList.contains("paused"), "The play/pause button is in its playing state");
info("Click on the button to pause all timeline animations");
- yield clickTimelinePlayPauseButton(panel);
+ await clickTimelinePlayPauseButton(panel);
ok(btn.classList.contains("paused"), "The play/pause button is in its paused state");
- yield assertScrubberMoving(panel, false);
+ await assertScrubberMoving(panel, false);
info("Click again on the button to play all timeline animations");
- yield clickTimelinePlayPauseButton(panel);
+ await clickTimelinePlayPauseButton(panel);
ok(!btn.classList.contains("paused"),
"The play/pause button is in its playing state again");
- yield assertScrubberMoving(panel, true);
+ await assertScrubberMoving(panel, true);
});
--- a/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_02.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_02.js
@@ -7,45 +7,45 @@
requestLongerTimeout(2);
ChromeUtils.defineModuleGetter(this, "Preferences",
"resource://gre/modules/Preferences.jsm");
// Checks that the play/pause button goes to the right state when the scrubber has reached
// the end of the timeline but there are infinite animations playing.
-add_task(function* () {
+add_task(async function() {
// TODO see if this is needed?
// let timerPrecision = Preferences.get("privacy.reduceTimerPrecision");
// Preferences.set("privacy.reduceTimerPrecision", false);
// registerCleanupFunction(function () {
// Preferences.set("privacy.reduceTimerPrecision", timerPrecision);
// });
- yield addTab(URL_ROOT + "doc_simple_animation.html");
+ await addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel, inspector} = yield openAnimationInspector();
+ let {panel, inspector} = await openAnimationInspector();
let timeline = panel.animationsTimelineComponent;
let btn = panel.playTimelineButtonEl;
info("Select an infinite animation and wait for the scrubber to reach the end");
- yield selectNodeAndWaitForAnimations(".multi", inspector);
- yield waitForOutOfBoundScrubber(timeline);
+ await selectNodeAndWaitForAnimations(".multi", inspector);
+ await waitForOutOfBoundScrubber(timeline);
ok(!btn.classList.contains("paused"),
"The button is in its playing state still, animations are infinite.");
- yield assertScrubberMoving(panel, true);
+ await assertScrubberMoving(panel, true);
info("Click on the button after the scrubber has moved out of bounds");
- yield clickTimelinePlayPauseButton(panel);
+ await clickTimelinePlayPauseButton(panel);
ok(btn.classList.contains("paused"),
"The button can be paused after the scrubber has moved out of bounds");
- yield assertScrubberMoving(panel, false);
+ await assertScrubberMoving(panel, false);
});
function waitForOutOfBoundScrubber({win, scrubberEl}) {
return new Promise(resolve => {
function check() {
let pos = scrubberEl.getBoxQuads()[0].bounds.right;
let width = win.document.documentElement.offsetWidth;
if (pos >= width) {
--- a/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_03.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_03.js
@@ -7,43 +7,43 @@
requestLongerTimeout(2);
// Also checks that the button goes to the right state when the scrubber has
// reached the end of the timeline: continues to be in playing mode for infinite
// animations, goes to paused mode otherwise.
// And test that clicking the button once the scrubber has reached the end of
// the timeline does the right thing.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel, inspector} = yield openAnimationInspector();
+ let {panel, inspector} = await openAnimationInspector();
let btn = panel.playTimelineButtonEl;
// For a finite animation, once the scrubber reaches the end of the timeline, the pause
// button should go back to paused mode.
info("Select a finite animation and wait for the animation to complete");
- yield selectNodeAndWaitForAnimations(".negative-delay", inspector);
+ await selectNodeAndWaitForAnimations(".negative-delay", inspector);
- yield reloadTab(inspector);
+ await reloadTab(inspector);
if (!btn.classList.contains("paused")) {
- yield waitForButtonPaused(btn);
+ await waitForButtonPaused(btn);
}
ok(btn.classList.contains("paused"),
"The button is in paused state once finite animations are done");
- yield assertScrubberMoving(panel, false);
+ await assertScrubberMoving(panel, false);
info("Click again on the button to play the animation from the start again");
- yield clickTimelinePlayPauseButton(panel);
+ await clickTimelinePlayPauseButton(panel);
ok(!btn.classList.contains("paused"),
"Clicking the button once finite animations are done should restart them");
- yield assertScrubberMoving(panel, true);
+ await assertScrubberMoving(panel, true);
});
function waitForButtonPaused(btn) {
return new Promise(resolve => {
let observer = new btn.ownerDocument.defaultView.MutationObserver(mutations => {
for (let mutation of mutations) {
if (mutation.type === "attributes" &&
mutation.attributeName === "class" &&
--- a/devtools/client/animationinspector/test/browser_animation_timeline_rate_selector.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_rate_selector.js
@@ -7,50 +7,50 @@
requestLongerTimeout(2);
// Check that the timeline toolbar contains a playback rate selector UI and that
// it can be used to change the playback rate of animations in the timeline.
// Also check that it displays the rate of the current animations in case they
// all have the same rate, or that it displays the empty value in case they
// have mixed rates.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel, controller, inspector, toolbox} = yield openAnimationInspector();
+ let {panel, controller, inspector, toolbox} = await openAnimationInspector();
// In this test, we disable the highlighter on purpose because of the way
// events are simulated to select an option in the playbackRate <select>.
// Indeed, this may cause mousemove events to be triggered on the nodes that
// are underneath the <select>, and these are AnimationTargetNode instances.
// Simulating mouse events on them will cause the highlighter to emit requests
// and this might cause the test to fail if they happen after it has ended.
disableHighlighter(toolbox);
let select = panel.rateSelectorEl.firstChild;
ok(select, "The rate selector exists");
info("Change all of the current animations' rates to 0.5");
- yield changeTimelinePlaybackRate(panel, .5);
+ await changeTimelinePlaybackRate(panel, .5);
checkAllAnimationsRatesChanged(controller, select, .5);
info("Select just one animated node and change its rate only");
- yield selectNodeAndWaitForAnimations(".animated", inspector);
+ await selectNodeAndWaitForAnimations(".animated", inspector);
- yield changeTimelinePlaybackRate(panel, 2);
+ await changeTimelinePlaybackRate(panel, 2);
checkAllAnimationsRatesChanged(controller, select, 2);
info("Select the <body> again, it should now have mixed-rates animations");
- yield selectNodeAndWaitForAnimations("body", inspector);
+ await selectNodeAndWaitForAnimations("body", inspector);
is(select.value, "", "The selected rate is empty");
info("Change the rate for these mixed-rate animations");
- yield changeTimelinePlaybackRate(panel, 1);
+ await changeTimelinePlaybackRate(panel, 1);
checkAllAnimationsRatesChanged(controller, select, 1);
});
function checkAllAnimationsRatesChanged({animationPlayers}, select, rate) {
ok(animationPlayers.every(({state}) => state.playbackRate === rate),
"All animations' rates have been set to " + rate);
is(select.value, rate, "The right value is displayed in the select");
}
--- a/devtools/client/animationinspector/test/browser_animation_timeline_rewind_button.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_rewind_button.js
@@ -8,45 +8,45 @@
requestLongerTimeout(2);
// Check that the timeline toolbar contains a rewind button and that it can be
// clicked. Check that when it is, the current animations displayed in the
// timeline get their playstates changed to paused, and their currentTimes
// reset to 0, and that the scrubber stops moving and is positioned to the
// start.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel, controller} = yield openAnimationInspector();
+ let {panel, controller} = await openAnimationInspector();
let players = controller.animationPlayers;
let btn = panel.rewindTimelineButtonEl;
ok(btn, "The rewind button exists");
info("Click on the button to rewind all timeline animations");
- yield clickTimelineRewindButton(panel);
+ await clickTimelineRewindButton(panel);
info("Check that the scrubber has stopped moving");
- yield assertScrubberMoving(panel, false);
+ await assertScrubberMoving(panel, false);
ok(players.every(({state}) => state.currentTime === 0),
"All animations' currentTimes have been set to 0");
ok(players.every(({state}) => state.playState === "paused"),
"All animations have been paused");
info("Play the animations again");
- yield clickTimelinePlayPauseButton(panel);
+ await clickTimelinePlayPauseButton(panel);
info("And pause them after a short while");
- yield new Promise(r => setTimeout(r, 200));
+ await new Promise(r => setTimeout(r, 200));
info("Check that rewinding when animations are paused works too");
- yield clickTimelineRewindButton(panel);
+ await clickTimelineRewindButton(panel);
info("Check that the scrubber has stopped moving");
- yield assertScrubberMoving(panel, false);
+ await assertScrubberMoving(panel, false);
ok(players.every(({state}) => state.currentTime === 0),
"All animations' currentTimes have been set to 0");
ok(players.every(({state}) => state.playState === "paused"),
"All animations have been paused");
});
--- a/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_exists.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_exists.js
@@ -3,18 +3,18 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
requestLongerTimeout(2);
// Check that the timeline does have a scrubber element.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {panel} = await openAnimationInspector();
let timeline = panel.animationsTimelineComponent;
let scrubberEl = timeline.scrubberEl;
ok(scrubberEl, "The scrubber element exists");
ok(scrubberEl.classList.contains("scrubber"), "It has the right classname");
});
--- a/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_movable.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_movable.js
@@ -7,65 +7,65 @@
requestLongerTimeout(2);
// Check that the scrubber in the timeline can be moved by clicking & dragging
// in the header area.
// Also check that doing so changes the timeline's play/pause button to paused
// state.
// Finally, also check that the scrubber can be moved using the scrubber handle.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel} = yield openAnimationInspector();
+ let {panel} = await openAnimationInspector();
let timeline = panel.animationsTimelineComponent;
let {win, timeHeaderEl, scrubberEl, scrubberHandleEl} = timeline;
let playTimelineButtonEl = panel.playTimelineButtonEl;
ok(!playTimelineButtonEl.classList.contains("paused"),
"The timeline play button is in its playing state by default");
info("Mousedown in the header to move the scrubber");
- yield synthesizeInHeaderAndWaitForChange(timeline, 50, 1, "mousedown");
+ await synthesizeInHeaderAndWaitForChange(timeline, 50, 1, "mousedown");
checkScrubberIsAt(scrubberEl, timeHeaderEl, 50);
ok(playTimelineButtonEl.classList.contains("paused"),
"The timeline play button is in its paused state after mousedown");
info("Continue moving the mouse and verify that the scrubber tracks it");
- yield synthesizeInHeaderAndWaitForChange(timeline, 100, 1, "mousemove");
+ await synthesizeInHeaderAndWaitForChange(timeline, 100, 1, "mousemove");
checkScrubberIsAt(scrubberEl, timeHeaderEl, 100);
ok(playTimelineButtonEl.classList.contains("paused"),
"The timeline play button is in its paused state after mousemove");
info("Release the mouse and move again and verify that the scrubber stays");
EventUtils.synthesizeMouse(timeHeaderEl, 100, 1, {type: "mouseup"}, win);
EventUtils.synthesizeMouse(timeHeaderEl, 200, 1, {type: "mousemove"}, win);
checkScrubberIsAt(scrubberEl, timeHeaderEl, 100);
info("Try to drag the scrubber handle and check that the scrubber moves");
let onDataChanged = timeline.once("timeline-data-changed");
EventUtils.synthesizeMouse(scrubberHandleEl, 1, 20, {type: "mousedown"}, win);
EventUtils.synthesizeMouse(timeHeaderEl, 0, 0, {type: "mousemove"}, win);
EventUtils.synthesizeMouse(timeHeaderEl, 0, 0, {type: "mouseup"}, win);
- yield onDataChanged;
+ await onDataChanged;
checkScrubberIsAt(scrubberEl, timeHeaderEl, 0);
// Wait for promise of setCurrentTimes if setCurrentTimes is running.
if (panel.setCurrentTimeAllPromise) {
- yield panel.setCurrentTimeAllPromise;
+ await panel.setCurrentTimeAllPromise;
}
});
-function* synthesizeInHeaderAndWaitForChange(timeline, x, y, type) {
+async function synthesizeInHeaderAndWaitForChange(timeline, x, y, type) {
let onDataChanged = timeline.once("timeline-data-changed");
EventUtils.synthesizeMouse(timeline.timeHeaderEl, x, y, {type}, timeline.win);
- yield onDataChanged;
+ await onDataChanged;
}
function getPositionPercentage(pos, headerEl) {
return pos * 100 / headerEl.offsetWidth;
}
function checkScrubberIsAt(scrubberEl, timeHeaderEl, pos) {
let newPos = Math.round(parseFloat(scrubberEl.style.left));
--- a/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_moves.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_moves.js
@@ -7,23 +7,23 @@
requestLongerTimeout(2);
// Check that the scrubber in the timeline moves when animations are playing.
// The animations in the test page last for a very long time, so the test just
// measures the position of the scrubber once, then waits for some time to pass
// and measures its position again.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {panel} = await openAnimationInspector();
let timeline = panel.animationsTimelineComponent;
let scrubberEl = timeline.scrubberEl;
let startPos = scrubberEl.getBoundingClientRect().left;
info("Wait for some time to check that the scrubber moves");
- yield new Promise(r => setTimeout(r, 2000));
+ await new Promise(r => setTimeout(r, 2000));
let endPos = scrubberEl.getBoundingClientRect().left;
ok(endPos > startPos, "The scrubber has moved");
});
--- a/devtools/client/animationinspector/test/browser_animation_timeline_setCurrentTime.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_setCurrentTime.js
@@ -13,70 +13,70 @@ requestLongerTimeout(2);
// the animation progress is 0.5 at 700ms because the progress stops as 0.5 at
// 500ms in original animation. However, if you set as
// animation.currentTime = 700 manually, the progress will be 0.7.
// So we modify setCurrentTime method since
// AnimationInspector should re-produce same as original animation.
// In these tests,
// we confirm the behavior of setCurrentTime by delay and endDelay.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_timing_combination_animation.html");
- const { panel, controller } = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_timing_combination_animation.html");
+ const { panel, controller } = await openAnimationInspector();
- yield clickTimelinePlayPauseButton(panel);
+ await clickTimelinePlayPauseButton(panel);
const timeBlockComponents = getAnimationTimeBlocks(panel);
// Test -5000ms.
let time = -5000;
- yield controller.setCurrentTimeAll(time, true);
+ await controller.setCurrentTimeAll(time, true);
for (let i = 0; i < timeBlockComponents.length; i++) {
- yield timeBlockComponents[i].animation.refreshState();
- const state = yield timeBlockComponents[i].animation.state;
+ await timeBlockComponents[i].animation.refreshState();
+ const state = await timeBlockComponents[i].animation.state;
info(`Check the state at ${ time }ms with `
+ `delay:${ state.delay } and endDelay:${ state.endDelay }`);
is(state.currentTime, 0,
`The currentTime should be 0 at setCurrentTime(${ time })`);
}
// Test 10000ms.
time = 10000;
- yield controller.setCurrentTimeAll(time, true);
+ await controller.setCurrentTimeAll(time, true);
for (let i = 0; i < timeBlockComponents.length; i++) {
- yield timeBlockComponents[i].animation.refreshState();
- const state = yield timeBlockComponents[i].animation.state;
+ await timeBlockComponents[i].animation.refreshState();
+ const state = await timeBlockComponents[i].animation.state;
info(`Check the state at ${ time }ms with `
+ `delay:${ state.delay } and endDelay:${ state.endDelay }`);
const expected = state.delay < 0 ? 0 : time;
is(state.currentTime, expected,
`The currentTime should be ${ expected } at setCurrentTime(${ time }).`
+ ` delay: ${ state.delay } and endDelay: ${ state.endDelay }`);
}
// Test 60000ms.
time = 60000;
- yield controller.setCurrentTimeAll(time, true);
+ await controller.setCurrentTimeAll(time, true);
for (let i = 0; i < timeBlockComponents.length; i++) {
- yield timeBlockComponents[i].animation.refreshState();
- const state = yield timeBlockComponents[i].animation.state;
+ await timeBlockComponents[i].animation.refreshState();
+ const state = await timeBlockComponents[i].animation.state;
info(`Check the state at ${ time }ms with `
+ `delay:${ state.delay } and endDelay:${ state.endDelay }`);
const expected = state.delay < 0 ? time + state.delay : time;
is(state.currentTime, expected,
`The currentTime should be ${ expected } at setCurrentTime(${ time }).`
+ ` delay: ${ state.delay } and endDelay: ${ state.endDelay }`);
}
// Test 150000ms.
time = 150000;
- yield controller.setCurrentTimeAll(time, true);
+ await controller.setCurrentTimeAll(time, true);
for (let i = 0; i < timeBlockComponents.length; i++) {
- yield timeBlockComponents[i].animation.refreshState();
- const state = yield timeBlockComponents[i].animation.state;
+ await timeBlockComponents[i].animation.refreshState();
+ const state = await timeBlockComponents[i].animation.state;
info(`Check the state at ${ time }ms with `
+ `delay:${ state.delay } and endDelay:${ state.endDelay }`);
const currentTime = state.delay < 0 ? time + state.delay : time;
const endTime =
state.delay + state.iterationCount * state.duration + state.endDelay;
const expected =
state.endDelay < 0 && state.fill === "both" && currentTime > endTime
? endTime : currentTime;
--- a/devtools/client/animationinspector/test/browser_animation_timeline_short_duration.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_short_duration.js
@@ -3,38 +3,38 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
requestLongerTimeout(2);
// Test short duration (e.g. 1ms) animation.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_short_duration_animation.html");
- const { panel, inspector } = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_short_duration_animation.html");
+ const { panel, inspector } = await openAnimationInspector();
info("Check the listed time blocks");
const timeBlocks = getAnimationTimeBlocks(panel);
for (let i = 0; i < timeBlocks.length; i++) {
info(`Check the time block ${i}`);
const {containerEl, animation: {state}} = timeBlocks[i];
checkSummaryGraph(containerEl, state);
}
info("Check the time block one by one");
info("Check #onetime");
- yield selectNodeAndWaitForAnimations("#onetime", inspector);
+ await selectNodeAndWaitForAnimations("#onetime", inspector);
let timeBlock = getAnimationTimeBlocks(panel)[0];
let containerEl = timeBlock.containerEl;
let state = timeBlock.animation.state;
checkSummaryGraph(containerEl, state, true);
info("Check #infinite");
- yield selectNodeAndWaitForAnimations("#infinite", inspector);
+ await selectNodeAndWaitForAnimations("#infinite", inspector);
timeBlock = getAnimationTimeBlocks(panel)[0];
containerEl = timeBlock.containerEl;
state = timeBlock.animation.state;
checkSummaryGraph(containerEl, state, true);
});
function checkSummaryGraph(el, state, isDetail) {
info("Check the coordinates of summary graph");
--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_delay.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_delay.js
@@ -6,37 +6,37 @@
requestLongerTimeout(2);
// Check that animation delay is visualized in the timeline when the animation
// is delayed.
// Also check that negative delays do not overflow the UI, and are shown like
// positive delays.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {inspector, panel} = await openAnimationInspector();
info("Selecting a delayed animated node");
- yield selectNodeAndWaitForAnimations(".delayed", inspector);
+ await selectNodeAndWaitForAnimations(".delayed", inspector);
let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
checkDelayAndName(timelineEl, true);
let animationEl = timelineEl.querySelector(".animation");
let state = getAnimationTimeBlocks(panel)[0].animation.state;
checkPath(animationEl, state);
info("Selecting a no-delay animated node");
- yield selectNodeAndWaitForAnimations(".animated", inspector);
+ await selectNodeAndWaitForAnimations(".animated", inspector);
checkDelayAndName(timelineEl, false);
animationEl = timelineEl.querySelector(".animation");
state = getAnimationTimeBlocks(panel)[0].animation.state;
checkPath(animationEl, state);
info("Selecting a negative-delay animated node");
- yield selectNodeAndWaitForAnimations(".negative-delay", inspector);
+ await selectNodeAndWaitForAnimations(".negative-delay", inspector);
checkDelayAndName(timelineEl, true);
animationEl = timelineEl.querySelector(".animation");
state = getAnimationTimeBlocks(panel)[0].animation.state;
checkPath(animationEl, state);
});
function checkDelayAndName(timelineEl, hasDelay) {
let delay = timelineEl.querySelector(".delay");
--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_endDelay.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_endDelay.js
@@ -6,25 +6,25 @@
requestLongerTimeout(2);
// Check that animation endDelay is visualized in the timeline when the
// animation is delayed.
// Also check that negative endDelays do not overflow the UI, and are shown
// like positive endDelays.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_end_delay.html");
- let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_end_delay.html");
+ let {inspector, panel} = await openAnimationInspector();
let selectors = ["#target1", "#target2", "#target3", "#target4"];
for (let i = 0; i < selectors.length; i++) {
let selector = selectors[i];
- yield selectNode(selector, inspector);
- yield waitForAnimationSelecting(panel);
+ await selectNode(selector, inspector);
+ await waitForAnimationSelecting(panel);
let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
let animationEl = timelineEl.querySelector(".animation");
checkEndDelayAndName(animationEl);
const state = getAnimationTimeBlocks(panel)[0].animation.state;
checkPath(animationEl, state);
}
});
--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_iterations.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_iterations.js
@@ -4,22 +4,22 @@
"use strict";
requestLongerTimeout(2);
// Check that the timeline is displays as many iteration elements as there are
// iterations in an animation.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {inspector, panel} = await openAnimationInspector();
info("Selecting the test node");
- yield selectNodeAndWaitForAnimations(".delayed", inspector);
+ await selectNodeAndWaitForAnimations(".delayed", inspector);
info("Getting the animation element from the panel");
const timelineComponent = panel.animationsTimelineComponent;
const timelineEl = timelineComponent.rootWrapperEl;
let animation = timelineEl.querySelector(".time-block");
// Get iteration count from summary graph path.
let iterationCount = getIterationCount(animation);
@@ -28,17 +28,17 @@ add_task(function* () {
"The animation timeline contains one g element");
is(iterationCount, 10,
"The animation timeline contains the right number of iterations");
ok(!animation.querySelector(".infinity"),
"The summary graph does not have any elements "
+ " that have infinity class");
info("Selecting another test node with an infinite animation");
- yield selectNodeAndWaitForAnimations(".animated", inspector);
+ await selectNodeAndWaitForAnimations(".animated", inspector);
info("Getting the animation element from the panel again");
animation = timelineEl.querySelector(".time-block");
iterationCount = getIterationCount(animation);
is(animation.querySelectorAll("svg g").length, 1,
"The animation timeline contains one g element");
is(iterationCount, 1,
--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_name_label.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_name_label.js
@@ -3,26 +3,26 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
requestLongerTimeout(2);
// Check the text content and width of name label.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {inspector, panel} = await openAnimationInspector();
info("Selecting 'simple-animation' animation which is running on compositor");
- yield selectNodeAndWaitForAnimations(".animated", inspector);
+ await selectNodeAndWaitForAnimations(".animated", inspector);
checkNameLabel(panel.animationsTimelineComponent.rootWrapperEl, "simple-animation");
info("Selecting 'no-compositor' animation which is not running on compositor");
- yield selectNodeAndWaitForAnimations(".no-compositor", inspector);
+ await selectNodeAndWaitForAnimations(".no-compositor", inspector);
checkNameLabel(panel.animationsTimelineComponent.rootWrapperEl, "no-compositor");
});
function checkNameLabel(rootWrapperEl, expectedLabelContent) {
const labelEl = rootWrapperEl.querySelector(".name svg text");
is(labelEl.textContent, expectedLabelContent,
`Text content of labelEl sould be ${ expectedLabelContent }`);
}
--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_time_info.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_time_info.js
@@ -4,19 +4,19 @@
"use strict";
requestLongerTimeout(2);
// Check that the timeline displays animations' duration, delay iteration
// counts and iteration start in tooltips.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel, controller} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {panel, controller} = await openAnimationInspector();
info("Getting the animation element from the panel");
let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
let timeBlockNameEls = timelineEl.querySelectorAll(".time-block .name");
// Verify that each time-block's name element has a tooltip that looks sort of
// ok. We don't need to test the actual content.
[...timeBlockNameEls].forEach((el, i) => {
--- a/devtools/client/animationinspector/test/browser_animation_timeline_takes_rate_into_account.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_takes_rate_into_account.js
@@ -6,20 +6,20 @@
// Check that if an animation has had its playbackRate changed via the DOM, then
// the timeline UI shows the right delay and duration.
// Indeed, the header in the timeline UI always shows the unaltered time,
// because there might be multiple animations displayed at the same time, some
// of which may have a different rate than others. Those that have had their
// rate changed have a delay = delay/rate and a duration = duration/rate.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_modify_playbackRate.html");
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_modify_playbackRate.html");
- let {panel} = yield openAnimationInspector();
+ let {panel} = await openAnimationInspector();
let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
let timeBlocks = timelineEl.querySelectorAll(".time-block");
is(timeBlocks.length, 2, "2 animations are displayed");
info("The first animation has its rate set to 1, let's measure it");
--- a/devtools/client/animationinspector/test/browser_animation_timeline_ui.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_ui.js
@@ -3,19 +3,19 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
requestLongerTimeout(2);
// Check that the timeline contains the right elements.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {panel} = await openAnimationInspector();
let timeline = panel.animationsTimelineComponent;
let el = timeline.rootWrapperEl;
ok(el.querySelector(".time-header"),
"The header element is in the DOM of the timeline");
ok(el.querySelectorAll(".time-header .header-item").length,
"The header has some time graduations");
--- a/devtools/client/animationinspector/test/browser_animation_toggle_button_resets_on_navigate.js
+++ b/devtools/client/animationinspector/test/browser_animation_toggle_button_resets_on_navigate.js
@@ -3,29 +3,29 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
requestLongerTimeout(2);
// Test that a page navigation resets the state of the global toggle button.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {inspector, panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {inspector, panel} = await openAnimationInspector();
info("Select the non-animated test node");
- yield selectNodeAndWaitForAnimations(".still", inspector);
+ await selectNodeAndWaitForAnimations(".still", inspector);
ok(!panel.toggleAllButtonEl.classList.contains("paused"),
"The toggle button is in its running state by default");
info("Toggle all animations, so that they pause");
- yield panel.toggleAll();
+ await panel.toggleAll();
ok(panel.toggleAllButtonEl.classList.contains("paused"),
"The toggle button now is in its paused state");
info("Reloading the page");
- yield reloadTab(inspector);
+ await reloadTab(inspector);
ok(!panel.toggleAllButtonEl.classList.contains("paused"),
"The toggle button is back in its running state");
});
--- a/devtools/client/animationinspector/test/browser_animation_toggle_button_toggles_animations.js
+++ b/devtools/client/animationinspector/test/browser_animation_toggle_button_toggles_animations.js
@@ -6,27 +6,27 @@
requestLongerTimeout(2);
// Test that the main toggle button actually toggles animations.
// This test doesn't need to be extra careful about checking that *all*
// animations have been paused (including inside iframes) because there's an
// actor test in /devtools/server/tests/browser/ that does this.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {panel} = await openAnimationInspector();
info("Click the toggle button");
- yield panel.toggleAll();
- yield checkState("paused");
+ await panel.toggleAll();
+ await checkState("paused");
info("Click again the toggle button");
- yield panel.toggleAll();
- yield checkState("running");
+ await panel.toggleAll();
+ await checkState("running");
});
-function* checkState(state) {
+async function checkState(state) {
for (let selector of [".animated", ".multi", ".long"]) {
- let playState = yield getAnimationPlayerState(selector);
+ let playState = await getAnimationPlayerState(selector);
is(playState, state, "The animation on node " + selector + " is " + state);
}
}
--- a/devtools/client/animationinspector/test/browser_animation_toolbar_exists.js
+++ b/devtools/client/animationinspector/test/browser_animation_toolbar_exists.js
@@ -6,31 +6,31 @@
requestLongerTimeout(2);
// Test that the animation panel has a top toolbar that contains the play/pause
// button and that is displayed at all times.
// Also test that this toolbar gets replaced by the timeline toolbar when there
// are animations to be displayed.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {inspector, window} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {inspector, window} = await openAnimationInspector();
let doc = window.document;
let toolbar = doc.querySelector("#global-toolbar");
ok(toolbar, "The panel contains the toolbar element with the new UI");
ok(!isNodeVisible(toolbar),
"The toolbar is hidden while there are animations");
let timelineToolbar = doc.querySelector("#timeline-toolbar");
ok(timelineToolbar, "The panel contains a timeline toolbar element");
ok(isNodeVisible(timelineToolbar),
"The timeline toolbar is visible when there are animations");
info("Select a node that has no animations");
- yield selectNodeAndWaitForAnimations(".still", inspector);
+ await selectNodeAndWaitForAnimations(".still", inspector);
ok(isNodeVisible(toolbar),
"The toolbar is shown when there are no animations");
ok(!isNodeVisible(timelineToolbar),
"The timeline toolbar is hidden when there are no animations");
});
--- a/devtools/client/animationinspector/test/browser_animation_ui_updates_when_animation_data_changes.js
+++ b/devtools/client/animationinspector/test/browser_animation_ui_updates_when_animation_data_changes.js
@@ -4,27 +4,27 @@
"use strict";
requestLongerTimeout(2);
// Verify that if the animation's duration, iterations or delay change in
// content, then the widget reflects the changes.
-add_task(function* () {
- yield addTab(URL_ROOT + "doc_simple_animation.html");
- let {panel, controller, inspector} = yield openAnimationInspector();
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ let {panel, controller, inspector} = await openAnimationInspector();
info("Select the test node");
- yield selectNodeAndWaitForAnimations(".animated", inspector);
+ await selectNodeAndWaitForAnimations(".animated", inspector);
let animation = controller.animationPlayers[0];
- yield setStyle(animation, panel, "animationDuration", "5.5s", ".animated");
- yield setStyle(animation, panel, "animationIterationCount", "300", ".animated");
- yield setStyle(animation, panel, "animationDelay", "45s", ".animated");
+ await setStyle(animation, panel, "animationDuration", "5.5s", ".animated");
+ await setStyle(animation, panel, "animationIterationCount", "300", ".animated");
+ await setStyle(animation, panel, "animationDelay", "45s", ".animated");
let animationsEl = panel.animationsTimelineComponent.animationsEl;
let timeBlockEl = animationsEl.querySelector(".time-block");
// 45s delay + (300 * 5.5)s duration
let expectedTotalDuration = 1695 * 1000;
// XXX: the nb and size of each iteration cannot be tested easily (displayed
--- a/devtools/client/animationinspector/test/head.js
+++ b/devtools/client/animationinspector/test/head.js
@@ -12,18 +12,18 @@ Services.scriptloader.loadSubScript(
this);
const FRAME_SCRIPT_URL = CHROME_URL_ROOT + "doc_frame_script.js";
const TAB_NAME = "animationinspector";
const ANIMATION_L10N =
new LocalizationHelper("devtools/client/locales/animationinspector.properties");
// Auto clean-up when a test ends
-registerCleanupFunction(function* () {
- yield closeAnimationInspector();
+registerCleanupFunction(async function() {
+ await closeAnimationInspector();
while (gBrowser.tabs.length > 1) {
gBrowser.removeCurrentTab();
}
});
// Clean-up all prefs that might have been changed during a test run
// (safer here because if the test fails, then the pref is never reverted)
@@ -60,54 +60,52 @@ addTab = function(url) {
});
};
/**
* Reload the current tab location.
* @param {InspectorPanel} inspector The instance of InspectorPanel currently
* loaded in the toolbox
*/
-function* reloadTab(inspector) {
+async function reloadTab(inspector) {
let onNewRoot = inspector.once("new-root");
- yield executeInContent("devtools:test:reload", {}, {}, false);
- yield onNewRoot;
- yield inspector.once("inspector-updated");
+ await executeInContent("devtools:test:reload", {}, {}, false);
+ await onNewRoot;
+ await inspector.once("inspector-updated");
}
/*
* Set the inspector's current selection to a node or to the first match of the
* given css selector and wait for the animations to be displayed
* @param {String|NodeFront}
* data The node to select
* @param {InspectorPanel} inspector
* The instance of InspectorPanel currently
* loaded in the toolbox
* @param {String} reason
* Defaults to "test" which instructs the inspector not
* to highlight the node upon selection
* @return {Promise} Resolves when the inspector is updated with the new node
and animations of its subtree are properly displayed.
*/
-var selectNodeAndWaitForAnimations = Task.async(
- function* (data, inspector, reason = "test") {
- // We want to make sure the rest of the test waits for the animations to
- // be properly displayed (wait for all target DOM nodes to be previewed).
- let {AnimationsController, AnimationsPanel} =
- inspector.sidebar.getWindowForTab(TAB_NAME);
- let onUiUpdated = AnimationsPanel.once(AnimationsPanel.UI_UPDATED_EVENT);
+var selectNodeAndWaitForAnimations = async function(data, inspector, reason = "test") {
+ // We want to make sure the rest of the test waits for the animations to
+ // be properly displayed (wait for all target DOM nodes to be previewed).
+ let {AnimationsController, AnimationsPanel} =
+ inspector.sidebar.getWindowForTab(TAB_NAME);
+ let onUiUpdated = AnimationsPanel.once(AnimationsPanel.UI_UPDATED_EVENT);
- yield selectNode(data, inspector, reason);
+ await selectNode(data, inspector, reason);
- yield onUiUpdated;
- if (AnimationsController.animationPlayers.length !== 0) {
- yield waitForAnimationTimelineRendering(AnimationsPanel);
- yield waitForAllAnimationTargets(AnimationsPanel);
- }
+ await onUiUpdated;
+ if (AnimationsController.animationPlayers.length !== 0) {
+ await waitForAnimationTimelineRendering(AnimationsPanel);
+ await waitForAllAnimationTargets(AnimationsPanel);
}
-);
+};
/**
* Check if there are the expected number of animations being displayed in the
* panel right now.
* @param {AnimationsPanel} panel
* @param {Number} nbAnimations The expected number of animations.
* @param {String} msg An optional string to be used as the assertion message.
*/
@@ -121,74 +119,74 @@ function assertAnimationsDisplayed(panel
/**
* Takes an Inspector panel that was just created, and waits
* for a "inspector-updated" event as well as the animation inspector
* sidebar to be ready. Returns a promise once these are completed.
*
* @param {InspectorPanel} inspector
* @return {Promise}
*/
-var waitForAnimationInspectorReady = Task.async(function* (inspector) {
+var waitForAnimationInspectorReady = async function(inspector) {
let win = inspector.sidebar.getWindowForTab(TAB_NAME);
let updated = inspector.once("inspector-updated");
// In e10s, if we wait for underlying toolbox actors to
// load (by setting DevToolsUtils.testing to true), we miss the
// "animationinspector-ready" event on the sidebar, so check to see if the
// iframe is already loaded.
let tabReady = win.document.readyState === "complete" ?
promise.resolve() :
inspector.sidebar.once("animationinspector-ready");
return promise.all([updated, tabReady]);
-});
+};
/**
* Open the toolbox, with the inspector tool visible and the animationinspector
* sidebar selected.
* @return a promise that resolves when the inspector is ready.
*/
-var openAnimationInspector = Task.async(function* () {
- let {inspector, toolbox} = yield openInspectorSidebarTab(TAB_NAME);
+var openAnimationInspector = async function() {
+ let {inspector, toolbox} = await openInspectorSidebarTab(TAB_NAME);
info("Waiting for the inspector and sidebar to be ready");
- yield waitForAnimationInspectorReady(inspector);
+ await waitForAnimationInspectorReady(inspector);
let win = inspector.sidebar.getWindowForTab(TAB_NAME);
let {AnimationsController, AnimationsPanel} = win;
info("Waiting for the animation controller and panel to be ready");
if (AnimationsPanel.initialized) {
- yield AnimationsPanel.initialized;
+ await AnimationsPanel.initialized;
} else {
- yield AnimationsPanel.once(AnimationsPanel.PANEL_INITIALIZED);
+ await AnimationsPanel.once(AnimationsPanel.PANEL_INITIALIZED);
}
if (AnimationsController.animationPlayers.length !== 0) {
- yield waitForAnimationTimelineRendering(AnimationsPanel);
- yield waitForAllAnimationTargets(AnimationsPanel);
+ await waitForAnimationTimelineRendering(AnimationsPanel);
+ await waitForAllAnimationTargets(AnimationsPanel);
}
return {
toolbox: toolbox,
inspector: inspector,
controller: AnimationsController,
panel: AnimationsPanel,
window: win
};
-});
+};
/**
* Close the toolbox.
* @return a promise that resolves when the toolbox has closed.
*/
-var closeAnimationInspector = Task.async(function* () {
+var closeAnimationInspector = async function() {
let target = TargetFactory.forTab(gBrowser.selectedTab);
- yield gDevTools.closeToolbox(target);
-});
+ await gDevTools.closeToolbox(target);
+};
/**
* Wait for a content -> chrome message on the message manager (the window
* messagemanager is used).
* @param {String} name The message name
* @return {Promise} A promise that resolves to the response data when the
* message has been received
*/
@@ -228,22 +226,22 @@ function executeInContent(name, data = {
}
return promise.resolve();
}
/**
* Get the current playState of an animation player on a given node.
*/
-var getAnimationPlayerState = Task.async(function* (selector,
+var getAnimationPlayerState = async function(selector,
animationIndex = 0) {
- let playState = yield executeInContent("Test:GetAnimationPlayerState",
+ let playState = await executeInContent("Test:GetAnimationPlayerState",
{selector, animationIndex});
return playState;
-});
+};
/**
* Is the given node visible in the page (rendered in the frame tree).
* @param {DOMNode}
* @return {Boolean}
*/
function isNodeVisible(node) {
return !!node.getClientRects().length;
@@ -252,98 +250,97 @@ function isNodeVisible(node) {
/**
* Wait for all AnimationTargetNode instances to be fully loaded
* (fetched their related actor and rendered), and return them.
* This method should be called after "animation-timeline-rendering-completed" is emitted,
* since we get all the AnimationTargetNode instances using getAnimationTargetNodes().
* @param {AnimationsPanel} panel
* @return {Array} all AnimationTargetNode instances
*/
-var waitForAllAnimationTargets = Task.async(function* (panel) {
+var waitForAllAnimationTargets = async function(panel) {
let targets = getAnimationTargetNodes(panel);
- yield promise.all(targets.map(t => {
+ await promise.all(targets.map(t => {
if (!t.previewer.nodeFront) {
return t.once("target-retrieved");
}
return false;
}));
return targets;
-});
+};
/**
* Check the scrubber element in the timeline is moving.
* @param {AnimationPanel} panel
* @param {Boolean} isMoving
*/
-function* assertScrubberMoving(panel, isMoving) {
+async function assertScrubberMoving(panel, isMoving) {
let timeline = panel.animationsTimelineComponent;
if (isMoving) {
// If we expect the scrubber to move, just wait for a couple of
// timeline-data-changed events and compare times.
- let {time: time1} = yield timeline.once("timeline-data-changed");
- let {time: time2} = yield timeline.once("timeline-data-changed");
+ let {time: time1} = await timeline.once("timeline-data-changed");
+ let {time: time2} = await timeline.once("timeline-data-changed");
ok(time2 > time1, "The scrubber is moving");
} else {
// If instead we expect the scrubber to remain at its position, just wait
// for some time and make sure timeline-data-changed isn't emitted.
let hasMoved = false;
timeline.once("timeline-data-changed", () => {
hasMoved = true;
});
- yield new Promise(r => setTimeout(r, 500));
+ await new Promise(r => setTimeout(r, 500));
ok(!hasMoved, "The scrubber is not moving");
}
}
/**
* Click the play/pause button in the timeline toolbar and wait for animations
* to update.
* @param {AnimationsPanel} panel
*/
-function* clickTimelinePlayPauseButton(panel) {
+async function clickTimelinePlayPauseButton(panel) {
let onUiUpdated = panel.once(panel.UI_UPDATED_EVENT);
let onRendered = waitForAnimationTimelineRendering(panel);
let btn = panel.playTimelineButtonEl;
let win = btn.ownerDocument.defaultView;
EventUtils.sendMouseEvent({type: "click"}, btn, win);
- yield onUiUpdated;
- yield onRendered;
- yield waitForAllAnimationTargets(panel);
+ await onUiUpdated;
+ await onRendered;
+ await waitForAllAnimationTargets(panel);
}
/**
* Click the rewind button in the timeline toolbar and wait for animations to
* update.
* @param {AnimationsPanel} panel
*/
-function* clickTimelineRewindButton(panel) {
+async function clickTimelineRewindButton(panel) {
let onUiUpdated = panel.once(panel.UI_UPDATED_EVENT);
let onRendered = waitForAnimationTimelineRendering(panel);
let btn = panel.rewindTimelineButtonEl;
let win = btn.ownerDocument.defaultView;
EventUtils.sendMouseEvent({type: "click"}, btn, win);
- yield onUiUpdated;
- yield onRendered;
- yield waitForAllAnimationTargets(panel);
+ await onUiUpdated;
+ await onRendered;
+ await waitForAllAnimationTargets(panel);
}
/**
* Select a rate inside the playback rate selector in the timeline toolbar and
* wait for animations to update.
* @param {AnimationsPanel} panel
* @param {Number} rate The new rate value to be selected
*/
-function* changeTimelinePlaybackRate(panel, rate) {
+async function changeTimelinePlaybackRate(panel, rate) {
let onUiUpdated = panel.once(panel.UI_UPDATED_EVENT);
- let onRendered = waitForAnimationTimelineRendering(panel);
let select = panel.rateSelectorEl.firstChild;
let win = select.ownerDocument.defaultView;
// Get the right option.
let option = [...select.options].filter(o => o.value === rate + "")[0];
if (!option) {
ok(false,
@@ -351,63 +348,63 @@ function* changeTimelinePlaybackRate(pan
"Values are: " + [...select.options].map(o => o.value));
return;
}
// Simulate the right events to select the option in the drop-down.
EventUtils.synthesizeMouseAtCenter(select, {type: "mousedown"}, win);
EventUtils.synthesizeMouseAtCenter(option, {type: "mouseup"}, win);
- yield onUiUpdated;
- yield onRendered;
- yield waitForAllAnimationTargets(panel);
+ await onUiUpdated;
+ await waitForAnimationTimelineRendering(panel);
+ await waitForAllAnimationTargets(panel);
// Simulate a mousemove outside of the rate selector area to avoid subsequent
// tests from failing because of unwanted mouseover events.
EventUtils.synthesizeMouseAtCenter(
win.document.querySelector("#timeline-toolbar"), {type: "mousemove"}, win);
}
/**
* Wait for animation selecting.
* @param {AnimationsPanel} panel
*/
-function* waitForAnimationSelecting(panel) {
- yield panel.animationsTimelineComponent.once("animation-selected");
+async function waitForAnimationSelecting(panel) {
+ await panel.animationsTimelineComponent.once("animation-selected");
}
/**
* Wait for rendering animation timeline.
* @param {AnimationsPanel} panel
*/
-function* waitForAnimationTimelineRendering(panel) {
+function waitForAnimationTimelineRendering(panel) {
return panel.animationsTimelineComponent.once("animation-timeline-rendering-completed");
}
/**
+ * Click the timeline header to update the animation current time.
+ * @param {AnimationsPanel} panel
+ * @param {Number} x position rate on timeline header.
+ * This method calculates
+ * `position * offsetWidth + offsetLeft of timeline header`
+ * as the clientX of MouseEvent.
+ * This parameter should be from 0.0 to 1.0.
+ */
-function* clickOnTimelineHeader(panel, position) {
+async function clickOnTimelineHeader(panel, position) {
const timeline = panel.animationsTimelineComponent;
const onTimelineDataChanged = timeline.once("timeline-data-changed");
const header = timeline.timeHeaderEl;
const clientX = header.offsetLeft + header.offsetWidth * position;
EventUtils.sendMouseEvent({ type: "mousedown", clientX: clientX },
header, header.ownerDocument.defaultView);
info(`Click at (${ clientX }, 0) on timeline header`);
EventUtils.sendMouseEvent({ type: "mouseup", clientX: clientX }, header,
header.ownerDocument.defaultView);
- return yield onTimelineDataChanged;
+ return onTimelineDataChanged;
}
/**
* Prevent the toolbox common highlighter from making backend requests.
* @param {Toolbox} toolbox
*/
function disableHighlighter(toolbox) {
toolbox._highlighter = {
@@ -423,17 +420,17 @@ function disableHighlighter(toolbox) {
/**
* Click on an animation in the timeline to select/unselect it.
* @param {AnimationsPanel} panel The panel instance.
* @param {Number} index The index of the animation to click on.
* @param {Boolean} shouldAlreadySelected Set to true
* if the clicked animation is already selected.
* @return {Promise} resolves to the animation whose state has changed.
*/
-function* clickOnAnimation(panel, index, shouldAlreadySelected) {
+async function clickOnAnimation(panel, index, shouldAlreadySelected) {
let timeline = panel.animationsTimelineComponent;
// Expect a selection event.
let onSelectionChanged = timeline.once(shouldAlreadySelected
? "animation-already-selected"
: "animation-selected");
info("Click on animation " + index + " in the timeline");
@@ -444,17 +441,17 @@ function* clickOnAnimation(panel, index,
let x = timeBlockBounds.width / 2;
let y = timeBlockBounds.height / 2;
if (timeBlock != timeBlock.ownerDocument.elementFromPoint(x, y)) {
// Move the mouse pointer a little since scrubber element may be at the point.
x += timeBlockBounds.width / 4;
}
EventUtils.synthesizeMouse(timeBlock, x, y, {}, timeBlock.ownerDocument.defaultView);
- return yield onSelectionChanged;
+ return onSelectionChanged;
}
/**
* Get an instance of the Keyframes component from the timeline.
* @param {AnimationsPanel} panel The panel instance.
* @param {String} propertyName The name of the animated property.
* @return {Keyframes} The Keyframes component instance.
*/
@@ -481,32 +478,32 @@ function getKeyframeEl(panel, propertyNa
/**
* Set style to test document.
* @param {Animation} animation - animation object.
* @param {AnimationsPanel} panel - The panel instance.
* @param {String} name - property name.
* @param {String} value - property value.
* @param {String} selector - selector for test document.
*/
-function* setStyle(animation, panel, name, value, selector) {
+async function setStyle(animation, panel, name, value, selector) {
info("Change the animation style via the content DOM. Setting " +
name + " to " + value + " of " + selector);
const onAnimationChanged = animation ? once(animation, "changed") : Promise.resolve();
const onRendered = waitForAnimationTimelineRendering(panel);
- yield executeInContent("devtools:test:setStyle", {
+ await executeInContent("devtools:test:setStyle", {
selector: selector,
propertyName: name,
propertyValue: value
});
- yield onAnimationChanged;
- yield onRendered;
- yield waitForAllAnimationTargets(panel);
+ await onAnimationChanged;
+ await onRendered;
+ await waitForAllAnimationTargets(panel);
}
/**
* Graph shapes of summary and detail are constructed by <path> element.
* This function checks the vertex of path segments.
* Also, if needed, checks the color for <stop> element.
* @param pathEl - <path> element.
* @param duration - float as duration which pathEl represetns.