Devtools Animations: Support multiple frames in the animation timeline

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();
     target.registerAnimationDispatcher(new WebInspector.AnimationDispatcher(this));
+    /** @type {!Map.<string, !WebInspector.AnimationModel.AnimationPlayer>} */
+    this._animationsMap = new Map();
 }
 
 WebInspector.AnimationModel.Events = {
     AnimationPlayerCreated: "AnimationPlayerCreated",
     AnimationPlayerCanceled: "AnimationPlayerCanceled"
 }
 
 WebInspector.AnimationModel.prototype = {
     /**
      * @param {!DOMAgent.NodeId} nodeId
@@ skipping 19 matching lines @@
         this._agent.getAnimationPlayersForNode(nodeId, showSubtreeAnimations, resultCallback.bind(this));
     },
 
     /**
      * @param {!AnimationAgent.AnimationPlayer} payload
      * @param {boolean} resetTimeline
      */
     animationPlayerCreated: function(payload, resetTimeline)
     {
         var player = WebInspector.AnimationModel.AnimationPlayer.parsePayload(this.target(), payload);
+        if (resetTimeline)
+            this._animationsMap.clear();
+        this._animationsMap.set(player.id(), player);
         this.dispatchEventToListeners(WebInspector.AnimationModel.Events.AnimationPlayerCreated, { "player": player, "resetTimeline": resetTimeline });
     },
 
     /**
      * @param {string} playerId
      */
     animationPlayerCanceled: function(playerId)
     {
         this.dispatchEventToListeners(WebInspector.AnimationModel.Events.AnimationPlayerCanceled, { "playerId": playerId });
     },
 
+    /**
+     * @param {function(?Array.<!AnimationAgent.AnimationStartTime>)} userCallback
+     * @param {?Protocol.Error} error
+     * @param {!Array.<!AnimationAgent.AnimationStartTime>} startTimes
+     */
+    _updateStartTimes: function(userCallback, error, startTimes)
+    {
+        if (error) {
+            userCallback(null);
+            return;
+        }
+        for (var player of startTimes) {
+            var animation = this._animationsMap.get(player.id);
+            console.assert(animation);
+            animation._updateStartTime(player.startTime);
+        }
+        userCallback(startTimes);
+    },
+
+    /**
+     * @param {number} playbackRate
+     * @param {function(?Array.<!AnimationAgent.AnimationStartTime>)} userCallback
+     */
+    setPlaybackRate: function(playbackRate, userCallback)
+    {
+        this._agent.setPlaybackRate(playbackRate, this._updateStartTimes.bind(this, userCallback));
+    },
+
+    /**
+     * @param {number} currentTime
+     * @param {function(?Array.<!AnimationAgent.AnimationStartTime>)} userCallback
+     */
+    setCurrentTime: function(currentTime, userCallback)
+    {
+        this._agent.setCurrentTime(currentTime, this._updateStartTimes.bind(this, userCallback));
+    },
+
+    /**
+     * @param {number} timeDelta
+     */
+    seekTimeline: function(timeDelta)
+    {
+        this._agent.seekTimeline(timeDelta);
+    },
+
     ensureEnabled: function()
     {
         if (this._enabled)
             return;
         this._agent.enable();
         this._enabled = true;
     },
 
     __proto__: WebInspector.SDKModel.prototype
 }
@@ skipping 76 matching lines @@
     playbackRate: function()
     {
         return this._payload.playbackRate;
     },
 
     /**
      * @return {number}
      */
     startTime: function()
     {
-        return this._payload.startTime;
+        return this._startTime === undefined ? this._payload.startTime : this._startTime;
     },
 
     /**
+     * @param {number} startTime
+     */
+    _updateStartTime: function(startTime)
+    {
+        this._startTime = 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();
     },
 
     /**
@@ skipping 300 matching lines @@
 
     /**
      * @override
      * @param {string} playerId
      */
     animationPlayerCanceled: function(playerId)
     {
         this._animationModel.animationPlayerCanceled(playerId);
     }
 }