Devtools Animations: Basic animation inspection & control in Styles pane

Source/devtools/front_end/sdk/DOMModel.js

 /*
  * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 853 matching lines @@
     },
 
     /**
      * @param {function(?DOMAgent.BoxModel)} callback
      */
     boxModel: function(callback)
     {
         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
 }
 
 /**
  * @param {!WebInspector.Target} target
  * @param {number} backendNodeId
  * @constructor
  */
 WebInspector.DeferredDOMNode = function(target, backendNodeId)
 {
@@ skipping 1075 matching lines @@
      * @param {boolean} inspectUAShadowDOM
      * @param {!DOMAgent.HighlightConfig} config
      * @param {function(?Protocol.Error)=} callback
      */
     setInspectModeEnabled: function(enabled, inspectUAShadowDOM, config, callback)
     {
         WebInspector.overridesSupport.setTouchEmulationSuspended(enabled);
         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)

[caseq, 2014/10/02 10:02:26]

Here and below, please consider using InspectorBackend.wrapClientCallback() for
reducing boilerplate.

[samli, 2014/10/03 06:05:05]

Done.

+        {
+            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
+}