Devtools Animations: Basic animation inspection & control in Styles pane

Source/devtools/front_end/sdk/DOMModel.js

Index: Source/devtools/front_end/sdk/DOMModel.js
diff --git a/Source/devtools/front_end/sdk/DOMModel.js b/Source/devtools/front_end/sdk/DOMModel.js
index d0db42c94c84718f28257a0d5089bcdd40e09ce1..fe83e0d88f22af4871bbb929f54bef9d21acd371 100644
--- a/Source/devtools/front_end/sdk/DOMModel.js
+++ b/Source/devtools/front_end/sdk/DOMModel.js
@@ -871,6 +871,29 @@ WebInspector.DOMNode.prototype = {
         this._agent.getBoxModel(this.id, this._domModel._wrapClientCallback(callback));
     },
 
+    /**
+     * @param {function(?Array.<!WebInspector.DOMModel.AnimationPlayer>)} callback
+     */
+    animationPlayers: function(callback)
+    {
+        var target = this.target();
+        /**
+         * @param {?Protocol.Error} error
+         * @param {!Array.<!DOMAgent.AnimationPlayer>} payloads
+         */
+        function mycallback(error, payloads)
+        {
+            if (error) {
+                callback(null);
+                return;
+            }
+            callback(payloads.map(function(payload) {
+                return new WebInspector.DOMModel.AnimationPlayer(target, payload);
+            }));
+        }
+        this._agent.getAnimationPlayersForNode(this.id, mycallback);
+    },
+
     __proto__: WebInspector.SDKObject.prototype
 }
 
@@ -1966,3 +1989,225 @@ WebInspector.DefaultDOMNodeHighlighter.prototype = {
         this._agent.setInspectModeEnabled(enabled, inspectUAShadowDOM, config, callback);
     }
 }
+
+/**
+ * @constructor
+ * @extends {WebInspector.SDKObject}
+ * @param {!WebInspector.Target} target
+ * @param {!DOMAgent.AnimationPlayer} payload
+ */
+WebInspector.DOMModel.AnimationPlayer = function(target, payload)
+{
+    WebInspector.SDKObject.call(this, target);
+    this._payload = payload;
+}
+
+WebInspector.DOMModel.AnimationPlayer.prototype = {
+    /**
+     * @return {!DOMAgent.AnimationPlayer}
+     */
+    payload: function()
+    {
+        return this._payload;
+    },
+
+    /**
+     * @return {string}
+     */
+    id: function()
+    {
+        return this._payload.id;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    paused: function()
+    {
+        return this._payload.paused;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    finished: function()
+    {
+        return this._payload.finished;
+    },
+
+    /**
+     * @return {number}
+     */
+    playbackRate: function()
+    {
+        return this._payload.playbackRate;
+    },
+
+    /**
+     * @return {number}
+     */
+    startTime: function()
+    {
+        return this._payload.startTime;
+    },
+
+    /**
+     * @return {number}
+     */
+    currentTime: function()
+    {
+        return this._payload.currentTime;
+    },
+
+    /**
+     * @return {!WebInspector.DOMModel.AnimationNode}
+     */
+    animation: function()
+    {
+        return new WebInspector.DOMModel.AnimationNode(this.target(), this._payload.animation);

[vsevik, 2014/10/14 09:08:09]

This could be done in constructor to avoid creation of duplicating AnimationNode
objects.

[samli, 2014/10/15 08:46:44]

Done.

+    },
+
+    /**
+     * @param {function(?WebInspector.DOMModel.AnimationPlayer)} callback
+     */
+    pause: function(callback)
+    {
+        var wrappedCallback = InspectorBackend.wrapClientCallback(callback, "DOMAgent.pauseAnimationPlayer(): ", WebInspector.DOMModel.AnimationPlayer.bind(null, this._target));
+        this.target().domModel._agent.pauseAnimationPlayer(this.id(), wrappedCallback);
+    },
+
+    /**
+     * @param {function(?WebInspector.DOMModel.AnimationPlayer)} callback
+     */
+    play: function(callback)
+    {
+        var wrappedCallback = InspectorBackend.wrapClientCallback(callback, "DOMAgent.playAnimationPlayer(): ", WebInspector.DOMModel.AnimationPlayer.bind(null, this._target));
+        this.target().domModel._agent.playAnimationPlayer(this.id(), wrappedCallback);
+    },
+
+    /**
+     * @param {number} currentTime
+     * @param {function(?WebInspector.DOMModel.AnimationPlayer)} callback
+     */
+    setCurrentTime: function(currentTime, callback)
+    {
+        var wrappedCallback = InspectorBackend.wrapClientCallback(callback, "DOMAgent.setAnimationPlayerCurrentTime(): ", WebInspector.DOMModel.AnimationPlayer.bind(null, this._target));
+        this.target().domModel._agent.setAnimationPlayerCurrentTime(this.id(), currentTime, wrappedCallback);
+    },
+
+    /**
+     * @param {function(number, boolean)} callback
+     */
+    getCurrentState: function(callback)
+    {
+        var target = this.target();
+        /**
+         * @param {?Protocol.Error} error
+         * @param {number} currentTime
+         * @param {boolean} isRunning
+         */
+        function mycallback(error, currentTime, isRunning)
+        {
+            callback(currentTime, isRunning);

[vsevik, 2014/10/14 09:08:09]

You might want to add console.error calls when error is not empty.

[samli, 2014/10/15 08:46:45]

Done.

+        }
+        this.target().domModel._agent.getAnimationPlayerState(this.id(), mycallback);
+    },
+
+    __proto__: WebInspector.SDKObject.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.SDKObject}
+ * @param {!WebInspector.Target} target
+ * @param {!DOMAgent.AnimationNode} payload
+ */
+WebInspector.DOMModel.AnimationNode = function(target, payload)
+{
+    WebInspector.SDKObject.call(this, target);
+    this._payload = payload;
+}
+
+WebInspector.DOMModel.AnimationNode.prototype = {
+    /**
+     * @return {!DOMAgent.AnimationNode}
+     */
+    payload: function()

[vsevik, 2014/10/14 09:08:09]

I don't think this is needed

[samli, 2014/10/15 08:46:45]

Done.

+    {
+        return this._payload;
+    },
+
+    /**
+     * @return {number}
+     */
+    startDelay: function()
+    {
+        return this._payload.startDelay;
+    },
+
+    /**
+     * @return {number}
+     */
+    playbackRate: function()
+    {
+        return this._payload.playbackRate;
+    },
+
+    /**
+     * @return {number}
+     */
+    iterationStart: function()
+    {
+        return this._payload.iterationStart;
+    },
+
+    /**
+     * @return {number}
+     */
+    iterationCount: function()
+    {
+        return this._payload.iterationCount;
+    },
+
+    /**
+     * @return {number}
+     */
+    duration: function()
+    {
+        return this._payload.duration;
+    },
+
+    /**
+     * @return {number}
+     */
+    direction: function()
+    {
+        return this._payload.direction;
+    },
+
+    /**
+     * @return {number}
+     */
+    fillMode: function()
+    {
+        return this._payload.fillMode;
+    },
+
+    /**
+     * @return {number}
+     */
+    timeFraction: function()
+    {
+        return this._payload.timeFraction;
+    },
+
+    /**
+     * @return {string}
+     */
+    name: function()
+    {
+        return this._payload.name;
+    },
+
+    __proto__: WebInspector.SDKObject.prototype
+}