Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1126)

Unified Diff: third_party/WebKit/Source/devtools/front_end/animation/AnimationModel.js

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)
Patch Set: all done Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: third_party/WebKit/Source/devtools/front_end/animation/AnimationModel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/animation/AnimationModel.js b/third_party/WebKit/Source/devtools/front_end/animation/AnimationModel.js
index fc62974ff81e70660b2dfa3fd25f582e0bf0b814..218e3d8d9fff141eb957ae726adba884b8263fa6 100644
--- a/third_party/WebKit/Source/devtools/front_end/animation/AnimationModel.js
+++ b/third_party/WebKit/Source/devtools/front_end/animation/AnimationModel.js
@@ -2,15 +2,15 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-
/**
- * @constructor
- * @extends {WebInspector.SDKModel}
- * @param {!WebInspector.Target} target
+ * @unrestricted
*/
-WebInspector.AnimationModel = function(target)
-{
- WebInspector.SDKModel.call(this, WebInspector.AnimationModel, target);
+WebInspector.AnimationModel = class extends WebInspector.SDKModel {
+ /**
+ * @param {!WebInspector.Target} target
+ */
+ constructor(target) {
+ super(WebInspector.AnimationModel, target);
this._agent = target.animationAgent();
target.registerAnimationDispatcher(new WebInspector.AnimationDispatcher(this));
/** @type {!Map.<string, !WebInspector.AnimationModel.Animation>} */
@@ -20,930 +20,845 @@ WebInspector.AnimationModel = function(target)
/** @type {!Array.<string>} */
this._pendingAnimations = [];
this._playbackRate = 1;
- var resourceTreeModel = /** @type {!WebInspector.ResourceTreeModel} */ (WebInspector.ResourceTreeModel.fromTarget(target));
+ var resourceTreeModel =
+ /** @type {!WebInspector.ResourceTreeModel} */ (WebInspector.ResourceTreeModel.fromTarget(target));
resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.Events.MainFrameNavigated, this._reset, this);
this._screenshotCapture = new WebInspector.AnimationModel.ScreenshotCapture(target, this, resourceTreeModel);
-};
+ }
-/** @enum {symbol} */
-WebInspector.AnimationModel.Events = {
- AnimationGroupStarted: Symbol("AnimationGroupStarted"),
- ModelReset: Symbol("ModelReset")
-};
-
-WebInspector.AnimationModel.prototype = {
- _reset: function()
- {
- this._animationsById.clear();
- this._animationGroups.clear();
- this._pendingAnimations = [];
- this.dispatchEventToListeners(WebInspector.AnimationModel.Events.ModelReset);
- },
+ /**
+ * @param {!WebInspector.Target} target
+ * @return {?WebInspector.AnimationModel}
+ */
+ static fromTarget(target) {
+ if (!target.hasDOMCapability())
+ return null;
+ if (!target[WebInspector.AnimationModel._symbol])
+ target[WebInspector.AnimationModel._symbol] = new WebInspector.AnimationModel(target);
- /**
- * @param {string} id
- */
- animationCreated: function(id)
- {
- this._pendingAnimations.push(id);
- },
+ return target[WebInspector.AnimationModel._symbol];
+ }
- /**
- * @param {string} id
- */
- _animationCanceled: function(id)
- {
- this._pendingAnimations.remove(id);
- this._flushPendingAnimationsIfNeeded();
- },
+ _reset() {
+ this._animationsById.clear();
+ this._animationGroups.clear();
+ this._pendingAnimations = [];
+ this.dispatchEventToListeners(WebInspector.AnimationModel.Events.ModelReset);
+ }
+
+ /**
+ * @param {string} id
+ */
+ animationCreated(id) {
+ this._pendingAnimations.push(id);
+ }
+
+ /**
+ * @param {string} id
+ */
+ _animationCanceled(id) {
+ this._pendingAnimations.remove(id);
+ this._flushPendingAnimationsIfNeeded();
+ }
+
+ /**
+ * @param {!AnimationAgent.Animation} payload
+ */
+ animationStarted(payload) {
+ var animation = WebInspector.AnimationModel.Animation.parsePayload(this.target(), payload);
+
+ // Ignore Web Animations custom effects & groups.
+ if (animation.type() === 'WebAnimation' && animation.source().keyframesRule().keyframes().length === 0) {
+ this._pendingAnimations.remove(animation.id());
+ } else {
+ this._animationsById.set(animation.id(), animation);
+ if (this._pendingAnimations.indexOf(animation.id()) === -1)
+ this._pendingAnimations.push(animation.id());
+ }
- /**
- * @param {!AnimationAgent.Animation} payload
- */
- animationStarted: function(payload)
- {
- var animation = WebInspector.AnimationModel.Animation.parsePayload(this.target(), payload);
-
- // Ignore Web Animations custom effects & groups.
- if (animation.type() === "WebAnimation" && animation.source().keyframesRule().keyframes().length === 0) {
- this._pendingAnimations.remove(animation.id());
- } else {
- this._animationsById.set(animation.id(), animation);
- if (this._pendingAnimations.indexOf(animation.id()) === -1)
- this._pendingAnimations.push(animation.id());
- }
-
- this._flushPendingAnimationsIfNeeded();
- },
-
- _flushPendingAnimationsIfNeeded: function()
- {
- for (var id of this._pendingAnimations) {
- if (!this._animationsById.get(id))
- return;
- }
-
- while (this._pendingAnimations.length)
- this._matchExistingGroups(this._createGroupFromPendingAnimations());
- },
+ this._flushPendingAnimationsIfNeeded();
+ }
- /**
- * @param {!WebInspector.AnimationModel.AnimationGroup} incomingGroup
- * @return {boolean}
- */
- _matchExistingGroups: function(incomingGroup)
- {
- var matchedGroup = null;
- for (var group of this._animationGroups.values()) {
- if (group._matches(incomingGroup)) {
- matchedGroup = group;
- group._update(incomingGroup);
- break;
- }
- }
-
- if (!matchedGroup) {
- this._animationGroups.set(incomingGroup.id(), incomingGroup);
- this._screenshotCapture.captureScreenshots(incomingGroup.finiteDuration(), incomingGroup._screenshots);
- }
- this.dispatchEventToListeners(WebInspector.AnimationModel.Events.AnimationGroupStarted, matchedGroup || incomingGroup);
- return !!matchedGroup;
- },
+ _flushPendingAnimationsIfNeeded() {
+ for (var id of this._pendingAnimations) {
+ if (!this._animationsById.get(id))
+ return;
+ }
- /**
- * @return {!WebInspector.AnimationModel.AnimationGroup}
- */
- _createGroupFromPendingAnimations: function()
- {
- console.assert(this._pendingAnimations.length);
- var groupedAnimations = [this._animationsById.get(this._pendingAnimations.shift())];
- var remainingAnimations = [];
- for (var id of this._pendingAnimations) {
- var anim = this._animationsById.get(id);
- if (anim.startTime() === groupedAnimations[0].startTime())
- groupedAnimations.push(anim);
- else
- remainingAnimations.push(id);
- }
- this._pendingAnimations = remainingAnimations;
- return new WebInspector.AnimationModel.AnimationGroup(this, groupedAnimations[0].id(), groupedAnimations);
- },
+ while (this._pendingAnimations.length)
+ this._matchExistingGroups(this._createGroupFromPendingAnimations());
+ }
+
+ /**
+ * @param {!WebInspector.AnimationModel.AnimationGroup} incomingGroup
+ * @return {boolean}
+ */
+ _matchExistingGroups(incomingGroup) {
+ var matchedGroup = null;
+ for (var group of this._animationGroups.values()) {
+ if (group._matches(incomingGroup)) {
+ matchedGroup = group;
+ group._update(incomingGroup);
+ break;
+ }
+ }
- /**
- * @return {!Promise.<number>}
- */
- playbackRatePromise: function()
- {
- /**
- * @param {?Protocol.Error} error
- * @param {number} playbackRate
- * @return {number}
- * @this {!WebInspector.AnimationModel}
- */
- function callback(error, playbackRate)
- {
- if (error)
- return 1;
- this._playbackRate = playbackRate;
- return playbackRate;
- }
-
- return this._agent.getPlaybackRate(callback.bind(this)).catchException(1);
- },
+ if (!matchedGroup) {
+ this._animationGroups.set(incomingGroup.id(), incomingGroup);
+ this._screenshotCapture.captureScreenshots(incomingGroup.finiteDuration(), incomingGroup._screenshots);
+ }
+ this.dispatchEventToListeners(
+ WebInspector.AnimationModel.Events.AnimationGroupStarted, matchedGroup || incomingGroup);
+ return !!matchedGroup;
+ }
+
+ /**
+ * @return {!WebInspector.AnimationModel.AnimationGroup}
+ */
+ _createGroupFromPendingAnimations() {
+ console.assert(this._pendingAnimations.length);
+ var groupedAnimations = [this._animationsById.get(this._pendingAnimations.shift())];
+ var remainingAnimations = [];
+ for (var id of this._pendingAnimations) {
+ var anim = this._animationsById.get(id);
+ if (anim.startTime() === groupedAnimations[0].startTime())
+ groupedAnimations.push(anim);
+ else
+ remainingAnimations.push(id);
+ }
+ this._pendingAnimations = remainingAnimations;
+ return new WebInspector.AnimationModel.AnimationGroup(this, groupedAnimations[0].id(), groupedAnimations);
+ }
+ /**
+ * @return {!Promise.<number>}
+ */
+ playbackRatePromise() {
/**
+ * @param {?Protocol.Error} error
* @param {number} playbackRate
+ * @return {number}
+ * @this {!WebInspector.AnimationModel}
*/
- setPlaybackRate: function(playbackRate)
- {
- this._playbackRate = playbackRate;
- this._agent.setPlaybackRate(playbackRate);
- },
-
- /**
- * @param {!Array.<string>} animations
- */
- _releaseAnimations: function(animations)
- {
- this.target().animationAgent().releaseAnimations(animations);
- },
-
- /**
- * @override
- * @return {!Promise}
- */
- suspendModel: function()
- {
- this._reset();
- return this._agent.disable();
- },
+ function callback(error, playbackRate) {
+ if (error)
+ return 1;
+ this._playbackRate = playbackRate;
+ return playbackRate;
+ }
- /**
- * @override
- * @return {!Promise}
- */
- resumeModel: function()
- {
- if (!this._enabled)
- return Promise.resolve();
- return this._agent.enable();
- },
-
- ensureEnabled: function()
- {
- if (this._enabled)
- return;
- this._agent.enable();
- this._enabled = true;
- },
-
- __proto__: WebInspector.SDKModel.prototype
+ return this._agent.getPlaybackRate(callback.bind(this)).catchException(1);
+ }
+
+ /**
+ * @param {number} playbackRate
+ */
+ setPlaybackRate(playbackRate) {
+ this._playbackRate = playbackRate;
+ this._agent.setPlaybackRate(playbackRate);
+ }
+
+ /**
+ * @param {!Array.<string>} animations
+ */
+ _releaseAnimations(animations) {
+ this.target().animationAgent().releaseAnimations(animations);
+ }
+
+ /**
+ * @override
+ * @return {!Promise}
+ */
+ suspendModel() {
+ this._reset();
+ return this._agent.disable();
+ }
+
+ /**
+ * @override
+ * @return {!Promise}
+ */
+ resumeModel() {
+ if (!this._enabled)
+ return Promise.resolve();
+ return this._agent.enable();
+ }
+
+ ensureEnabled() {
+ if (this._enabled)
+ return;
+ this._agent.enable();
+ this._enabled = true;
+ }
};
-WebInspector.AnimationModel._symbol = Symbol("AnimationModel");
+/** @enum {symbol} */
+WebInspector.AnimationModel.Events = {
+ AnimationGroupStarted: Symbol('AnimationGroupStarted'),
+ ModelReset: Symbol('ModelReset')
+};
-/**
- * @param {!WebInspector.Target} target
- * @return {?WebInspector.AnimationModel}
- */
-WebInspector.AnimationModel.fromTarget = function(target)
-{
- if (!target.hasDOMCapability())
- return null;
- if (!target[WebInspector.AnimationModel._symbol])
- target[WebInspector.AnimationModel._symbol] = new WebInspector.AnimationModel(target);
+WebInspector.AnimationModel._symbol = Symbol('AnimationModel');
- return target[WebInspector.AnimationModel._symbol];
-};
/**
- * @constructor
- * @extends {WebInspector.SDKObject}
- * @param {!WebInspector.Target} target
- * @param {!AnimationAgent.Animation} payload
+ * @unrestricted
*/
-WebInspector.AnimationModel.Animation = function(target, payload)
-{
- WebInspector.SDKObject.call(this, target);
+WebInspector.AnimationModel.Animation = class extends WebInspector.SDKObject {
+ /**
+ * @param {!WebInspector.Target} target
+ * @param {!AnimationAgent.Animation} payload
+ */
+ constructor(target, payload) {
+ super(target);
this._payload = payload;
this._source = new WebInspector.AnimationModel.AnimationEffect(this.target(), this._payload.source);
-};
-
-/**
- * @param {!WebInspector.Target} target
- * @param {!AnimationAgent.Animation} payload
- * @return {!WebInspector.AnimationModel.Animation}
- */
-WebInspector.AnimationModel.Animation.parsePayload = function(target, payload)
-{
+ }
+
+ /**
+ * @param {!WebInspector.Target} target
+ * @param {!AnimationAgent.Animation} payload
+ * @return {!WebInspector.AnimationModel.Animation}
+ */
+ static parsePayload(target, payload) {
return new WebInspector.AnimationModel.Animation(target, payload);
-};
-
-/** @enum {string} */
-WebInspector.AnimationModel.Animation.Type = {
- CSSTransition: "CSSTransition",
- CSSAnimation: "CSSAnimation",
- WebAnimation: "WebAnimation"
-};
-
-WebInspector.AnimationModel.Animation.prototype = {
- /**
- * @return {!AnimationAgent.Animation}
- */
- payload: function()
- {
- return this._payload;
- },
-
- /**
- * @return {string}
- */
- id: function()
- {
- return this._payload.id;
- },
-
- /**
- * @return {string}
- */
- name: function()
- {
- return this._payload.name;
- },
-
- /**
- * @return {boolean}
- */
- paused: function()
- {
- return this._payload.pausedState;
- },
-
- /**
- * @return {string}
- */
- playState: function()
- {
- return this._playState || this._payload.playState;
- },
-
- /**
- * @param {string} playState
- */
- setPlayState: function(playState)
- {
- this._playState = playState;
- },
-
- /**
- * @return {number}
- */
- playbackRate: function()
- {
- return this._payload.playbackRate;
- },
-
- /**
- * @return {number}
- */
- startTime: function()
- {
- return this._payload.startTime;
- },
-
- /**
- * @return {number}
- */
- endTime: function()
- {
- if (!this.source().iterations)
- return Infinity;
- return this.startTime() + this.source().delay() + this.source().duration() * this.source().iterations() + this.source().endDelay();
- },
-
- /**
- * @return {number}
- */
- _finiteDuration: function()
- {
- var iterations = Math.min(this.source().iterations(), 3);
- return this.source().delay() + this.source().duration() * iterations;
- },
-
- /**
- * @return {number}
- */
- currentTime: function()
- {
- return this._payload.currentTime;
- },
-
- /**
- * @return {!WebInspector.AnimationModel.AnimationEffect}
- */
- source: function()
- {
- return this._source;
- },
-
- /**
- * @return {!WebInspector.AnimationModel.Animation.Type}
- */
- type: function()
- {
- return /** @type {!WebInspector.AnimationModel.Animation.Type} */(this._payload.type);
- },
-
- /**
- * @param {!WebInspector.AnimationModel.Animation} animation
- * @return {boolean}
- */
- overlaps: function(animation)
- {
- // Infinite animations
- if (!this.source().iterations() || !animation.source().iterations())
- return true;
-
- var firstAnimation = this.startTime() < animation.startTime() ? this : animation;
- var secondAnimation = firstAnimation === this ? animation : this;
- return firstAnimation.endTime() >= secondAnimation.startTime();
- },
-
- /**
- * @param {number} duration
- * @param {number} delay
- */
- setTiming: function(duration, delay)
- {
- this._source.node().then(this._updateNodeStyle.bind(this, duration, delay));
- this._source._duration = duration;
- this._source._delay = delay;
- this.target().animationAgent().setTiming(this.id(), duration, delay);
- },
+ }
+
+ /**
+ * @return {!AnimationAgent.Animation}
+ */
+ payload() {
+ return this._payload;
+ }
+
+ /**
+ * @return {string}
+ */
+ id() {
+ return this._payload.id;
+ }
+
+ /**
+ * @return {string}
+ */
+ name() {
+ return this._payload.name;
+ }
+
+ /**
+ * @return {boolean}
+ */
+ paused() {
+ return this._payload.pausedState;
+ }
+
+ /**
+ * @return {string}
+ */
+ playState() {
+ return this._playState || this._payload.playState;
+ }
+
+ /**
+ * @param {string} playState
+ */
+ setPlayState(playState) {
+ this._playState = playState;
+ }
+
+ /**
+ * @return {number}
+ */
+ playbackRate() {
+ return this._payload.playbackRate;
+ }
+
+ /**
+ * @return {number}
+ */
+ startTime() {
+ return this._payload.startTime;
+ }
+
+ /**
+ * @return {number}
+ */
+ endTime() {
+ if (!this.source().iterations)
+ return Infinity;
+ return this.startTime() + this.source().delay() + this.source().duration() * this.source().iterations() +
+ this.source().endDelay();
+ }
+
+ /**
+ * @return {number}
+ */
+ _finiteDuration() {
+ var iterations = Math.min(this.source().iterations(), 3);
+ return this.source().delay() + this.source().duration() * iterations;
+ }
+
+ /**
+ * @return {number}
+ */
+ currentTime() {
+ return this._payload.currentTime;
+ }
+
+ /**
+ * @return {!WebInspector.AnimationModel.AnimationEffect}
+ */
+ source() {
+ return this._source;
+ }
+
+ /**
+ * @return {!WebInspector.AnimationModel.Animation.Type}
+ */
+ type() {
+ return /** @type {!WebInspector.AnimationModel.Animation.Type} */ (this._payload.type);
+ }
+
+ /**
+ * @param {!WebInspector.AnimationModel.Animation} animation
+ * @return {boolean}
+ */
+ overlaps(animation) {
+ // Infinite animations
+ if (!this.source().iterations() || !animation.source().iterations())
+ return true;
+
+ var firstAnimation = this.startTime() < animation.startTime() ? this : animation;
+ var secondAnimation = firstAnimation === this ? animation : this;
+ return firstAnimation.endTime() >= secondAnimation.startTime();
+ }
+
+ /**
+ * @param {number} duration
+ * @param {number} delay
+ */
+ setTiming(duration, delay) {
+ this._source.node().then(this._updateNodeStyle.bind(this, duration, delay));
+ this._source._duration = duration;
+ this._source._delay = delay;
+ this.target().animationAgent().setTiming(this.id(), duration, delay);
+ }
+
+ /**
+ * @param {number} duration
+ * @param {number} delay
+ * @param {!WebInspector.DOMNode} node
+ */
+ _updateNodeStyle(duration, delay, node) {
+ var animationPrefix;
+ if (this.type() === WebInspector.AnimationModel.Animation.Type.CSSTransition)
+ animationPrefix = 'transition-';
+ else if (this.type() === WebInspector.AnimationModel.Animation.Type.CSSAnimation)
+ animationPrefix = 'animation-';
+ else
+ return;
+
+ var cssModel = WebInspector.CSSModel.fromTarget(node.target());
+ if (!cssModel)
+ return;
+ cssModel.setEffectivePropertyValueForNode(node.id, animationPrefix + 'duration', duration + 'ms');
+ cssModel.setEffectivePropertyValueForNode(node.id, animationPrefix + 'delay', delay + 'ms');
+ }
+
+ /**
+ * @return {!Promise.<?WebInspector.RemoteObject>}
+ */
+ remoteObjectPromise() {
+ /**
+ * @param {?Protocol.Error} error
+ * @param {!RuntimeAgent.RemoteObject} payload
+ * @return {?WebInspector.RemoteObject}
+ * @this {!WebInspector.AnimationModel.Animation}
+ */
+ function callback(error, payload) {
+ return !error ? this.target().runtimeModel.createRemoteObject(payload) : null;
+ }
- /**
- * @param {number} duration
- * @param {number} delay
- * @param {!WebInspector.DOMNode} node
- */
- _updateNodeStyle: function(duration, delay, node)
- {
- var animationPrefix;
- if (this.type() === WebInspector.AnimationModel.Animation.Type.CSSTransition)
- animationPrefix = "transition-";
- else if (this.type() === WebInspector.AnimationModel.Animation.Type.CSSAnimation)
- animationPrefix = "animation-";
- else
- return;
-
- var cssModel = WebInspector.CSSModel.fromTarget(node.target());
- if (!cssModel)
- return;
- cssModel.setEffectivePropertyValueForNode(node.id, animationPrefix + "duration", duration + "ms");
- cssModel.setEffectivePropertyValueForNode(node.id, animationPrefix + "delay", delay + "ms");
- },
+ return this.target().animationAgent().resolveAnimation(this.id(), callback.bind(this));
+ }
- /**
- * @return {!Promise.<?WebInspector.RemoteObject>}
- */
- remoteObjectPromise: function()
- {
- /**
- * @param {?Protocol.Error} error
- * @param {!RuntimeAgent.RemoteObject} payload
- * @return {?WebInspector.RemoteObject}
- * @this {!WebInspector.AnimationModel.Animation}
- */
- function callback(error, payload)
- {
- return !error ? this.target().runtimeModel.createRemoteObject(payload) : null;
- }
-
- return this.target().animationAgent().resolveAnimation(this.id(), callback.bind(this));
- },
+ /**
+ * @return {string}
+ */
+ _cssId() {
+ return this._payload.cssId || '';
+ }
+};
- /**
- * @return {string}
- */
- _cssId: function()
- {
- return this._payload.cssId || "";
- },
- __proto__: WebInspector.SDKObject.prototype
+/** @enum {string} */
+WebInspector.AnimationModel.Animation.Type = {
+ CSSTransition: 'CSSTransition',
+ CSSAnimation: 'CSSAnimation',
+ WebAnimation: 'WebAnimation'
};
/**
- * @constructor
- * @extends {WebInspector.SDKObject}
- * @param {!WebInspector.Target} target
- * @param {!AnimationAgent.AnimationEffect} payload
+ * @unrestricted
*/
-WebInspector.AnimationModel.AnimationEffect = function(target, payload)
-{
- WebInspector.SDKObject.call(this, target);
+WebInspector.AnimationModel.AnimationEffect = class extends WebInspector.SDKObject {
+ /**
+ * @param {!WebInspector.Target} target
+ * @param {!AnimationAgent.AnimationEffect} payload
+ */
+ constructor(target, payload) {
+ super(target);
this._payload = payload;
if (payload.keyframesRule)
- this._keyframesRule = new WebInspector.AnimationModel.KeyframesRule(target, payload.keyframesRule);
+ this._keyframesRule = new WebInspector.AnimationModel.KeyframesRule(target, payload.keyframesRule);
this._delay = this._payload.delay;
this._duration = this._payload.duration;
-};
-
-WebInspector.AnimationModel.AnimationEffect.prototype = {
- /**
- * @return {number}
- */
- delay: function()
- {
- return this._delay;
- },
-
- /**
- * @return {number}
- */
- endDelay: function()
- {
- return this._payload.endDelay;
- },
-
- /**
- * @return {number}
- */
- iterationStart: function()
- {
- return this._payload.iterationStart;
- },
-
- /**
- * @return {number}
- */
- iterations: function()
- {
- // Animations with zero duration, zero delays and infinite iterations can't be shown.
- if (!this.delay() && !this.endDelay() && !this.duration())
- return 0;
- return this._payload.iterations || Infinity;
- },
-
- /**
- * @return {number}
- */
- duration: function()
- {
- return this._duration;
- },
-
- /**
- * @return {string}
- */
- direction: function()
- {
- return this._payload.direction;
- },
-
- /**
- * @return {string}
- */
- fill: function()
- {
- return this._payload.fill;
- },
-
- /**
- * @return {!Promise.<!WebInspector.DOMNode>}
- */
- node: function()
- {
- if (!this._deferredNode)
- this._deferredNode = new WebInspector.DeferredDOMNode(this.target(), this.backendNodeId());
- return this._deferredNode.resolvePromise();
- },
-
- /**
- * @return {!WebInspector.DeferredDOMNode}
- */
- deferredNode: function()
- {
- return new WebInspector.DeferredDOMNode(this.target(), this.backendNodeId());
- },
-
- /**
- * @return {number}
- */
- backendNodeId: function()
- {
- return this._payload.backendNodeId;
- },
-
- /**
- * @return {?WebInspector.AnimationModel.KeyframesRule}
- */
- keyframesRule: function()
- {
- return this._keyframesRule;
- },
-
- /**
- * @return {string}
- */
- easing: function()
- {
- return this._payload.easing;
- },
-
- __proto__: WebInspector.SDKObject.prototype
+ }
+
+ /**
+ * @return {number}
+ */
+ delay() {
+ return this._delay;
+ }
+
+ /**
+ * @return {number}
+ */
+ endDelay() {
+ return this._payload.endDelay;
+ }
+
+ /**
+ * @return {number}
+ */
+ iterationStart() {
+ return this._payload.iterationStart;
+ }
+
+ /**
+ * @return {number}
+ */
+ iterations() {
+ // Animations with zero duration, zero delays and infinite iterations can't be shown.
+ if (!this.delay() && !this.endDelay() && !this.duration())
+ return 0;
+ return this._payload.iterations || Infinity;
+ }
+
+ /**
+ * @return {number}
+ */
+ duration() {
+ return this._duration;
+ }
+
+ /**
+ * @return {string}
+ */
+ direction() {
+ return this._payload.direction;
+ }
+
+ /**
+ * @return {string}
+ */
+ fill() {
+ return this._payload.fill;
+ }
+
+ /**
+ * @return {!Promise.<!WebInspector.DOMNode>}
+ */
+ node() {
+ if (!this._deferredNode)
+ this._deferredNode = new WebInspector.DeferredDOMNode(this.target(), this.backendNodeId());
+ return this._deferredNode.resolvePromise();
+ }
+
+ /**
+ * @return {!WebInspector.DeferredDOMNode}
+ */
+ deferredNode() {
+ return new WebInspector.DeferredDOMNode(this.target(), this.backendNodeId());
+ }
+
+ /**
+ * @return {number}
+ */
+ backendNodeId() {
+ return this._payload.backendNodeId;
+ }
+
+ /**
+ * @return {?WebInspector.AnimationModel.KeyframesRule}
+ */
+ keyframesRule() {
+ return this._keyframesRule;
+ }
+
+ /**
+ * @return {string}
+ */
+ easing() {
+ return this._payload.easing;
+ }
};
/**
- * @constructor
- * @extends {WebInspector.SDKObject}
- * @param {!WebInspector.Target} target
- * @param {!AnimationAgent.KeyframesRule} payload
+ * @unrestricted
*/
-WebInspector.AnimationModel.KeyframesRule = function(target, payload)
-{
- WebInspector.SDKObject.call(this, target);
+WebInspector.AnimationModel.KeyframesRule = class extends WebInspector.SDKObject {
+ /**
+ * @param {!WebInspector.Target} target
+ * @param {!AnimationAgent.KeyframesRule} payload
+ */
+ constructor(target, payload) {
+ super(target);
this._payload = payload;
this._keyframes = this._payload.keyframes.map(function(keyframeStyle) {
- return new WebInspector.AnimationModel.KeyframeStyle(target, keyframeStyle);
+ return new WebInspector.AnimationModel.KeyframeStyle(target, keyframeStyle);
});
-};
-
-WebInspector.AnimationModel.KeyframesRule.prototype = {
- /**
- * @param {!Array.<!AnimationAgent.KeyframeStyle>} payload
- */
- _setKeyframesPayload: function(payload)
- {
- this._keyframes = payload.map(function(keyframeStyle) {
- return new WebInspector.AnimationModel.KeyframeStyle(this._target, keyframeStyle);
- });
- },
-
- /**
- * @return {string|undefined}
- */
- name: function()
- {
- return this._payload.name;
- },
-
- /**
- * @return {!Array.<!WebInspector.AnimationModel.KeyframeStyle>}
- */
- keyframes: function()
- {
- return this._keyframes;
- },
-
- __proto__: WebInspector.SDKObject.prototype
+ }
+
+ /**
+ * @param {!Array.<!AnimationAgent.KeyframeStyle>} payload
+ */
+ _setKeyframesPayload(payload) {
+ this._keyframes = payload.map(function(keyframeStyle) {
+ return new WebInspector.AnimationModel.KeyframeStyle(this._target, keyframeStyle);
+ });
+ }
+
+ /**
+ * @return {string|undefined}
+ */
+ name() {
+ return this._payload.name;
+ }
+
+ /**
+ * @return {!Array.<!WebInspector.AnimationModel.KeyframeStyle>}
+ */
+ keyframes() {
+ return this._keyframes;
+ }
};
/**
- * @constructor
- * @extends {WebInspector.SDKObject}
- * @param {!WebInspector.Target} target
- * @param {!AnimationAgent.KeyframeStyle} payload
+ * @unrestricted
*/
-WebInspector.AnimationModel.KeyframeStyle = function(target, payload)
-{
- WebInspector.SDKObject.call(this, target);
+WebInspector.AnimationModel.KeyframeStyle = class extends WebInspector.SDKObject {
+ /**
+ * @param {!WebInspector.Target} target
+ * @param {!AnimationAgent.KeyframeStyle} payload
+ */
+ constructor(target, payload) {
+ super(target);
this._payload = payload;
this._offset = this._payload.offset;
-};
-
-WebInspector.AnimationModel.KeyframeStyle.prototype = {
- /**
- * @return {string}
- */
- offset: function()
- {
- return this._offset;
- },
-
- /**
- * @param {number} offset
- */
- setOffset: function(offset)
- {
- this._offset = offset * 100 + "%";
- },
-
- /**
- * @return {number}
- */
- offsetAsNumber: function()
- {
- return parseFloat(this._offset) / 100;
- },
-
- /**
- * @return {string}
- */
- easing: function()
- {
- return this._payload.easing;
- },
-
- __proto__: WebInspector.SDKObject.prototype
+ }
+
+ /**
+ * @return {string}
+ */
+ offset() {
+ return this._offset;
+ }
+
+ /**
+ * @param {number} offset
+ */
+ setOffset(offset) {
+ this._offset = offset * 100 + '%';
+ }
+
+ /**
+ * @return {number}
+ */
+ offsetAsNumber() {
+ return parseFloat(this._offset) / 100;
+ }
+
+ /**
+ * @return {string}
+ */
+ easing() {
+ return this._payload.easing;
+ }
};
/**
- * @constructor
- * @extends {WebInspector.SDKObject}
- * @param {!WebInspector.AnimationModel} model
- * @param {string} id
- * @param {!Array.<!WebInspector.AnimationModel.Animation>} animations
+ * @unrestricted
*/
-WebInspector.AnimationModel.AnimationGroup = function(model, id, animations)
-{
- WebInspector.SDKObject.call(this, model.target());
+WebInspector.AnimationModel.AnimationGroup = class extends WebInspector.SDKObject {
+ /**
+ * @param {!WebInspector.AnimationModel} model
+ * @param {string} id
+ * @param {!Array.<!WebInspector.AnimationModel.Animation>} animations
+ */
+ constructor(model, id, animations) {
+ super(model.target());
this._model = model;
this._id = id;
this._animations = animations;
this._paused = false;
this._screenshots = [];
this._screenshotImages = [];
-};
-
-WebInspector.AnimationModel.AnimationGroup.prototype = {
+ }
+
+ /**
+ * @return {string}
+ */
+ id() {
+ return this._id;
+ }
+
+ /**
+ * @return {!Array.<!WebInspector.AnimationModel.Animation>}
+ */
+ animations() {
+ return this._animations;
+ }
+
+ release() {
+ this._model._animationGroups.remove(this.id());
+ this._model._releaseAnimations(this._animationIds());
+ }
+
+ /**
+ * @return {!Array.<string>}
+ */
+ _animationIds() {
/**
+ * @param {!WebInspector.AnimationModel.Animation} animation
* @return {string}
*/
- id: function()
- {
- return this._id;
- },
-
- /**
- * @return {!Array.<!WebInspector.AnimationModel.Animation>}
- */
- animations: function()
- {
- return this._animations;
- },
-
- release: function()
- {
- this._model._animationGroups.remove(this.id());
- this._model._releaseAnimations(this._animationIds());
- },
-
- /**
- * @return {!Array.<string>}
- */
- _animationIds: function()
- {
- /**
- * @param {!WebInspector.AnimationModel.Animation} animation
- * @return {string}
- */
- function extractId(animation)
- {
- return animation.id();
- }
-
- return this._animations.map(extractId);
- },
-
- /**
- * @return {number}
- */
- startTime: function()
- {
- return this._animations[0].startTime();
- },
-
- /**
- * @return {number}
- */
- finiteDuration: function()
- {
- var maxDuration = 0;
- for (var i = 0; i < this._animations.length; ++i)
- maxDuration = Math.max(maxDuration, this._animations[i]._finiteDuration());
- return maxDuration;
- },
+ function extractId(animation) {
+ return animation.id();
+ }
- /**
+ return this._animations.map(extractId);
+ }
+
+ /**
+ * @return {number}
+ */
+ startTime() {
+ return this._animations[0].startTime();
+ }
+
+ /**
+ * @return {number}
+ */
+ finiteDuration() {
+ var maxDuration = 0;
+ for (var i = 0; i < this._animations.length; ++i)
+ maxDuration = Math.max(maxDuration, this._animations[i]._finiteDuration());
+ return maxDuration;
+ }
+
+ /**
+ * @param {number} currentTime
+ */
+ seekTo(currentTime) {
+ this.target().animationAgent().seekAnimations(this._animationIds(), currentTime);
+ }
+
+ /**
+ * @return {boolean}
+ */
+ paused() {
+ return this._paused;
+ }
+
+ /**
+ * @param {boolean} paused
+ */
+ togglePause(paused) {
+ if (paused === this._paused)
+ return;
+ this._paused = paused;
+ this.target().animationAgent().setPaused(this._animationIds(), paused);
+ }
+
+ /**
+ * @return {!Promise.<number>}
+ */
+ currentTimePromise() {
+ /**
+ * @param {?Protocol.Error} error
* @param {number} currentTime
+ * @return {number}
*/
- seekTo: function(currentTime)
- {
- this.target().animationAgent().seekAnimations(this._animationIds(), currentTime);
- },
-
- /**
- * @return {boolean}
- */
- paused: function()
- {
- return this._paused;
- },
-
- /**
- * @param {boolean} paused
- */
- togglePause: function(paused)
- {
- if (paused === this._paused)
- return;
- this._paused = paused;
- this.target().animationAgent().setPaused(this._animationIds(), paused);
- },
-
- /**
- * @return {!Promise.<number>}
- */
- currentTimePromise: function()
- {
- /**
- * @param {?Protocol.Error} error
- * @param {number} currentTime
- * @return {number}
- */
- function callback(error, currentTime)
- {
- return !error ? currentTime : 0;
- }
-
- var longestAnim = null;
- for (var anim of this._animations) {
- if (!longestAnim || anim.endTime() > longestAnim.endTime())
- longestAnim = anim;
- }
- return this.target().animationAgent().getCurrentTime(longestAnim.id(), callback).catchException(0);
- },
+ function callback(error, currentTime) {
+ return !error ? currentTime : 0;
+ }
- /**
- * @param {!WebInspector.AnimationModel.AnimationGroup} group
- * @return {boolean}
- */
- _matches: function(group)
- {
- /**
- * @param {!WebInspector.AnimationModel.Animation} anim
- * @return {string}
- */
- function extractId(anim)
- {
- if (anim.type() === WebInspector.AnimationModel.Animation.Type.WebAnimation)
- return anim.type() + anim.id();
- else
- return anim._cssId();
- }
-
- if (this._animations.length !== group._animations.length)
- return false;
- var left = this._animations.map(extractId).sort();
- var right = group._animations.map(extractId).sort();
- for (var i = 0; i < left.length; i++) {
- if (left[i] !== right[i])
- return false;
- }
- return true;
- },
+ var longestAnim = null;
+ for (var anim of this._animations) {
+ if (!longestAnim || anim.endTime() > longestAnim.endTime())
+ longestAnim = anim;
+ }
+ return this.target().animationAgent().getCurrentTime(longestAnim.id(), callback).catchException(0);
+ }
+ /**
+ * @param {!WebInspector.AnimationModel.AnimationGroup} group
+ * @return {boolean}
+ */
+ _matches(group) {
/**
- * @param {!WebInspector.AnimationModel.AnimationGroup} group
+ * @param {!WebInspector.AnimationModel.Animation} anim
+ * @return {string}
*/
- _update: function(group)
- {
- this._model._releaseAnimations(this._animationIds());
- this._animations = group._animations;
- },
+ function extractId(anim) {
+ if (anim.type() === WebInspector.AnimationModel.Animation.Type.WebAnimation)
+ return anim.type() + anim.id();
+ else
+ return anim._cssId();
+ }
- /**
- * @return {!Array.<!Image>}
- */
- screenshots: function()
- {
- for (var i = 0; i < this._screenshots.length; ++i) {
- var image = new Image();
- image.src = "data:image/jpeg;base64," + this._screenshots[i];
- this._screenshotImages.push(image);
- }
- this._screenshots = [];
- return this._screenshotImages;
- },
-
- __proto__: WebInspector.SDKObject.prototype
+ if (this._animations.length !== group._animations.length)
+ return false;
+ var left = this._animations.map(extractId).sort();
+ var right = group._animations.map(extractId).sort();
+ for (var i = 0; i < left.length; i++) {
+ if (left[i] !== right[i])
+ return false;
+ }
+ return true;
+ }
+
+ /**
+ * @param {!WebInspector.AnimationModel.AnimationGroup} group
+ */
+ _update(group) {
+ this._model._releaseAnimations(this._animationIds());
+ this._animations = group._animations;
+ }
+
+ /**
+ * @return {!Array.<!Image>}
+ */
+ screenshots() {
+ for (var i = 0; i < this._screenshots.length; ++i) {
+ var image = new Image();
+ image.src = 'data:image/jpeg;base64,' + this._screenshots[i];
+ this._screenshotImages.push(image);
+ }
+ this._screenshots = [];
+ return this._screenshotImages;
+ }
};
-
/**
- * @constructor
* @implements {AnimationAgent.Dispatcher}
+ * @unrestricted
*/
-WebInspector.AnimationDispatcher = function(animationModel)
-{
+WebInspector.AnimationDispatcher = class {
+ constructor(animationModel) {
this._animationModel = animationModel;
-};
-
-WebInspector.AnimationDispatcher.prototype = {
- /**
- * @override
- * @param {string} id
- */
- animationCreated: function(id)
- {
- this._animationModel.animationCreated(id);
- },
-
- /**
- * @override
- * @param {string} id
- */
- animationCanceled: function(id)
- {
- this._animationModel._animationCanceled(id);
- },
-
- /**
- * @override
- * @param {!AnimationAgent.Animation} payload
- */
- animationStarted: function(payload)
- {
- this._animationModel.animationStarted(payload);
- }
+ }
+
+ /**
+ * @override
+ * @param {string} id
+ */
+ animationCreated(id) {
+ this._animationModel.animationCreated(id);
+ }
+
+ /**
+ * @override
+ * @param {string} id
+ */
+ animationCanceled(id) {
+ this._animationModel._animationCanceled(id);
+ }
+
+ /**
+ * @override
+ * @param {!AnimationAgent.Animation} payload
+ */
+ animationStarted(payload) {
+ this._animationModel.animationStarted(payload);
+ }
};
/**
- * @constructor
- * @param {!WebInspector.Target} target
- * @param {!WebInspector.AnimationModel} model
- * @param {!WebInspector.ResourceTreeModel} resourceTreeModel
+ * @unrestricted
*/
-WebInspector.AnimationModel.ScreenshotCapture = function(target, model, resourceTreeModel)
-{
+WebInspector.AnimationModel.ScreenshotCapture = class {
+ /**
+ * @param {!WebInspector.Target} target
+ * @param {!WebInspector.AnimationModel} model
+ * @param {!WebInspector.ResourceTreeModel} resourceTreeModel
+ */
+ constructor(target, model, resourceTreeModel) {
this._target = target;
/** @type {!Array<!WebInspector.AnimationModel.ScreenshotCapture.Request>} */
this._requests = [];
- resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.Events.ScreencastFrame, this._screencastFrame, this);
+ resourceTreeModel.addEventListener(
+ WebInspector.ResourceTreeModel.Events.ScreencastFrame, this._screencastFrame, this);
this._model = model;
this._model.addEventListener(WebInspector.AnimationModel.Events.ModelReset, this._stopScreencast, this);
-};
-
-/** @typedef {{ endTime: number, screenshots: !Array.<string>}} */
-WebInspector.AnimationModel.ScreenshotCapture.Request;
+ }
+
+ /**
+ * @param {number} duration
+ * @param {!Array<string>} screenshots
+ */
+ captureScreenshots(duration, screenshots) {
+ var screencastDuration = Math.min(duration / this._model._playbackRate, 3000);
+ var endTime = screencastDuration + window.performance.now();
+ this._requests.push({endTime: endTime, screenshots: screenshots});
+
+ if (!this._endTime || endTime > this._endTime) {
+ clearTimeout(this._stopTimer);
+ this._stopTimer = setTimeout(this._stopScreencast.bind(this), screencastDuration);
+ this._endTime = endTime;
+ }
-WebInspector.AnimationModel.ScreenshotCapture.prototype = {
- /**
- * @param {number} duration
- * @param {!Array<string>} screenshots
- */
- captureScreenshots: function(duration, screenshots)
- {
- var screencastDuration = Math.min(duration / this._model._playbackRate, 3000);
- var endTime = screencastDuration + window.performance.now();
- this._requests.push({ endTime: endTime, screenshots: screenshots });
-
- if (!this._endTime || endTime > this._endTime) {
- clearTimeout(this._stopTimer);
- this._stopTimer = setTimeout(this._stopScreencast.bind(this), screencastDuration);
- this._endTime = endTime;
- }
-
- if (this._capturing)
- return;
- this._capturing = true;
- this._target.pageAgent().startScreencast("jpeg", 80, undefined, 300, 2);
- },
+ if (this._capturing)
+ return;
+ this._capturing = true;
+ this._target.pageAgent().startScreencast('jpeg', 80, undefined, 300, 2);
+ }
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _screencastFrame(event) {
/**
- * @param {!WebInspector.Event} event
+ * @param {!WebInspector.AnimationModel.ScreenshotCapture.Request} request
+ * @return {boolean}
*/
- _screencastFrame: function(event)
- {
- /**
- * @param {!WebInspector.AnimationModel.ScreenshotCapture.Request} request
- * @return {boolean}
- */
- function isAnimating(request)
- {
- return request.endTime >= now;
- }
-
- if (!this._capturing)
- return;
-
- var base64Data = /** type {string} */(event.data["data"]);
- var now = window.performance.now();
- this._requests = this._requests.filter(isAnimating);
- for (var request of this._requests)
- request.screenshots.push(base64Data);
- },
-
- _stopScreencast: function()
- {
- if (!this._capturing)
- return;
-
- delete this._stopTimer;
- delete this._endTime;
- this._requests = [];
- this._capturing = false;
- this._target.pageAgent().stopScreencast();
+ function isAnimating(request) {
+ return request.endTime >= now;
}
+
+ if (!this._capturing)
+ return;
+
+ var base64Data = /** type {string} */ (event.data['data']);
+ var now = window.performance.now();
+ this._requests = this._requests.filter(isAnimating);
+ for (var request of this._requests)
+ request.screenshots.push(base64Data);
+ }
+
+ _stopScreencast() {
+ if (!this._capturing)
+ return;
+
+ delete this._stopTimer;
+ delete this._endTime;
+ this._requests = [];
+ this._capturing = false;
+ this._target.pageAgent().stopScreencast();
+ }
};
+
+/** @typedef {{ endTime: number, screenshots: !Array.<string>}} */
+WebInspector.AnimationModel.ScreenshotCapture.Request;

Powered by Google App Engine
This is Rietveld 408576698