Devtools Animations: Show subtree animations for a given node

Source/devtools/front_end/sdk/AnimationModel.js

 // Copyright (c) 2014 The Chromium Authors. All rights reserved.
 // 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
  */
 WebInspector.AnimationModel = function(target)
 {
     WebInspector.SDKModel.call(this, WebInspector.AnimationModel, target);
 
     this._agent = target.animationAgent();
     /** @type {!Object.<*, !Array.<function(?Array.<!WebInspector.AnimationModel.AnimationPlayer>)>>} */
     this._nodeIdToCallbackData = {};
 }
 
 WebInspector.AnimationModel.prototype = {
     /**
      * @param {!DOMAgent.NodeId} nodeId
+     * @param {boolean} showSubtreeAnimations
      * @param {function(?Array.<!WebInspector.AnimationModel.AnimationPlayer>)} userCallback
      */
-    getAnimationPlayers: function(nodeId, userCallback)
+    animationPlayers: function(nodeId, showSubtreeAnimations, userCallback)
     {
         /**
          * @param {?Protocol.Error} error
          * @param {!Array.<!AnimationAgent.AnimationPlayer>} payloads
          * @this {WebInspector.AnimationModel}
          */
         function resultCallback(error, payloads)
         {
             var callbacks = this._nodeIdToCallbackData[nodeId];
             delete this._nodeIdToCallbackData[nodeId];
             if (error) {
-                callbacks.forEach(function(callback) {
-                    callback(null);
-                });
+                for (var i = 0; i < callbacks.length; i++)
+                    callbacks[i](null);
                 return;
             }
             var animationPlayers = payloads.map(WebInspector.AnimationModel.AnimationPlayer.parsePayload.bind(null, target));
 
-            callbacks.forEach(function(callback) {
-                callback(animationPlayers);
-            });
+            for (var i = 0; i < callbacks.length; i++)
+                callbacks[i](animationPlayers);
         }
 
         if (this._nodeIdToCallbackData[nodeId]) {
             this._nodeIdToCallbackData[nodeId].push(userCallback);

[vsevik, 2014/11/12 09:14:35]

Now that we could have different types of such requests for the same node this
seems wrong.

[samli, 2014/11/13 01:12:44]

I've removed this behavior.

             return;
         }
 
         var target = this.target();
         this._nodeIdToCallbackData[nodeId] = [userCallback];
-        this._agent.getAnimationPlayersForNode(nodeId, resultCallback.bind(this));
+        this._agent.getAnimationPlayersForNode(nodeId, showSubtreeAnimations, resultCallback.bind(this));
     },
 
     __proto__: WebInspector.SDKModel.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.SDKObject}
  * @param {!WebInspector.Target} target
  * @param {!AnimationAgent.AnimationPlayer} payload
@@ skipping 122 matching lines @@
     getCurrentState: function(callback)
     {
         /**
          * @param {?Protocol.Error} error
          * @param {number} currentTime
          * @param {boolean} isRunning
          */
         function mycallback(error, currentTime, isRunning)
         {
             if (error) {
-                console.error(error);

[vsevik, 2014/11/12 09:14:35]

Why did you remove this?
You should also remove brackets.

[samli, 2014/11/13 01:12:44]

When the selected node changes, the list of animation players in the
InspectorAnimationAgent is discarded. However, the current time updater in the
animation player is still polling for changes. A protocol error then results
where the animation player can't be found.

                 return;
             }
             callback(currentTime, isRunning);
         }
         this.target().animationModel._agent.getAnimationPlayerState(this.id(), mycallback);
     },
 
     __proto__: WebInspector.SDKObject.prototype
 }
 
@@ skipping 78 matching lines @@
 
     /**
      * @return {string}
      */
     name: function()
     {
         return this._payload.name;
     },
 
     /**
+     * @param {function(?WebInspector.DOMNode)} callback
+     */
+    node: function(callback)

[vsevik, 2014/11/12 09:14:35]

We usually use get prefix for asynchronous getters.
Let's name it getNode or resolveNode.

[samli, 2014/11/13 01:12:44]

Done.

+    {
+        /**
+         * @this {WebInspector.AnimationModel.AnimationNode}
+         * @param {?Array.<number>} nodeIds
+         */
+        function nodePushedCallback(nodeIds)
+        {
+            if (nodeIds)
+                this.nodeId = nodeIds[0];
+            callback(this.target().domModel.nodeForId(this.nodeId));
+        }
+
+        if (this.nodeId)
+            callback(this.target().domModel.nodeForId(this.nodeId));
+        else
+            this._target.domModel.pushNodesByBackendIdsToFrontend([this._payload.backendNodeId], nodePushedCallback.bind(this));
+    },
+
+    /**
      * @return {?WebInspector.AnimationModel.KeyframesRule}
      */
     keyframesRule: function()
     {
         return this._keyframesRule;
     },
 
     __proto__: WebInspector.SDKObject.prototype
 }
 
@@ skipping 67 matching lines @@
     /**
      * @return {!WebInspector.CSSStyleDeclaration}
      */
     style: function()
     {
         return this._style;
     },
 
     __proto__: WebInspector.SDKObject.prototype
 }