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..82495dd9f1e3e485831b96e93578cb446cd051d8 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,255 @@ 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 {number}
+     */
+    sequenceNumber: function()
+    {
+        return this._payload.sequenceNumber;
+    },
+
+    /**
+     * @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);
+    },
+
+    /**
+     * @param {function(?WebInspector.DOMModel.AnimationPlayer)} callback
+     */
+    pause: function(callback)
+    {
+        var target = this.target();
+        /**
+         * @param {?Protocol.Error} error
+         * @param {!DOMAgent.AnimationPlayer} player
+         */
+        function mycallback(error, player)
+        {
+            if (error) {
+                callback(null);
+                return;
+            }
+
+            callback(new WebInspector.DOMModel.AnimationPlayer(target, player));
+        }
+        this.target().domModel._agent.pauseAnimationPlayer(this.sequenceNumber(), mycallback);
+    },
+
+    /**
+     * @param {function(?WebInspector.DOMModel.AnimationPlayer)} callback
+     */
+    play: function(callback)
+    {
+        var target = this.target();
+        /**
+         * @param {?Protocol.Error} error
+         * @param {!DOMAgent.AnimationPlayer} player
+         */
+        function mycallback(error, player)
+        {
+            if (error) {
+                callback(null);
+                return;
+            }
+
+            callback(new WebInspector.DOMModel.AnimationPlayer(target, player));
+        }
+        this.target().domModel._agent.playAnimationPlayer(this.sequenceNumber(), mycallback);
+    },
+
+    /**
+     * @param {number} currentTime
+     * @param {function(?WebInspector.DOMModel.AnimationPlayer)} callback
+     */
+    setCurrentTime: function(currentTime, callback)
+    {
+        var target = this.target();
+        /**
+         * @param {?Protocol.Error} error
+         * @param {!DOMAgent.AnimationPlayer} payload
+         */
+        function mycallback(error, payload)
+        {
+            if (error) {
+                callback(null);
+                return;
+            }
+            callback(new WebInspector.DOMModel.AnimationPlayer(target, payload));
+        }
+        this.target().domModel._agent.setCurrentTimeAnimationPlayer(this.sequenceNumber(), currentTime, mycallback);
+    },
+
+    /**
+     * @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);
+        }
+        this.target().domModel._agent.getStateAnimationPlayer(this.sequenceNumber(), 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()
+    {
+        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;
+    },
+
+    __proto__: WebInspector.SDKObject.prototype
+}