Devtools Animations: Support multiple frames in the animation timeline

Source/devtools/front_end/elements/AnimationTimeline.js

Index: Source/devtools/front_end/elements/AnimationTimeline.js
diff --git a/Source/devtools/front_end/elements/AnimationTimeline.js b/Source/devtools/front_end/elements/AnimationTimeline.js
index b8c496a74ba361ade64c588bb80aea30271c2c08..9b4d7fd4421d44ed859727a29aa2b79bc33e7471 100644
--- a/Source/devtools/front_end/elements/AnimationTimeline.js
+++ b/Source/devtools/front_end/elements/AnimationTimeline.js
@@ -32,6 +32,7 @@ WebInspector.AnimationTimeline = function()
     this._animationsMap = new Map();
     WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.MainFrameNavigated, this._mainFrameNavigated, this);
     WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
+    WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.FrameAdded, this._frameAdded, this);
 }
 
 WebInspector.AnimationTimeline.prototype = {
@@ -46,7 +47,7 @@ WebInspector.AnimationTimeline.prototype = {
             this._animationsPlaybackRate = WebInspector.AnimationsSidebarPane.GlobalPlaybackRates[event.target.value];
             var target = WebInspector.targetManager.mainTarget();
             if (target)
-                target.animationAgent().setPlaybackRate(this._animationsPlaybackRate);
+                target.animationAgent().setPlaybackRate(this._animationsPlaybackRate, this._updateStartTimes.bind(this));

[pfeldman, 2015/04/01 13:06:45]

You should not be talking to the agents from outside the model. Model should
talk to agent and update its instances internally, you should not need to use
public methods to update model internals (updateStartTime).

[samli, 2015/04/02 09:58:00]

Done.

             this._playbackLabel.textContent = this._animationsPlaybackRate + "x";
             WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();
             if (this._scrubberPlayer)
@@ -83,6 +84,25 @@ WebInspector.AnimationTimeline.prototype = {
         return container;
     },
 
+    /**
+     * @param {?Protocol.Error} error
+     * @param {!Array.<!AnimationAgent.AnimationStartTime>} startTimes
+     */
+    _updateStartTimes: function(error, startTimes)
+    {
+        if (error)
+            return;
+
+        delete this._startTime;
+        for (var player of startTimes) {
+            var animation = this._animationsMap.get(player.id);
+            console.assert(animation);
+            animation.updateStartTime(player.startTime);
+            if (!this._startTime || player.startTime < this._startTime)
+                this._startTime = player.startTime;
+        }
+    },
+
     _updateAnimationsPlaybackRate: function()
     {
         /**
@@ -108,7 +128,7 @@ WebInspector.AnimationTimeline.prototype = {
             return;
         var targets = WebInspector.targetManager.targets();
         for (var target of targets)
-            target.animationAgent().setCurrentTime(/** @type {number} */(this.startTime()));
+            target.animationAgent().setCurrentTime(/** @type {number} */(this.startTime()), this._updateStartTimes.bind(this));
         this._animateTime(0);
     },
 
@@ -171,6 +191,16 @@ WebInspector.AnimationTimeline.prototype = {
     },
 
     /**
+     * @param {!WebInspector.Event} event
+     */
+    _frameAdded: function(event)
+    {
+        var target = WebInspector.targetManager.mainTarget();
+        if (target)
+            target.animationAgent().setPlaybackRate(this._animationsPlaybackRate, this._updateStartTimes.bind(this));
+    },
+
+    /**
      * @param {!WebInspector.AnimationModel.AnimationPlayer} animation
      * @param {boolean} resetTimeline
      */
@@ -381,7 +411,7 @@ WebInspector.AnimationTimeline.prototype = {
         this._timelineScrubberHead.textContent = WebInspector.UIString(Number.millisToString(currentTime));
         var targets = WebInspector.targetManager.targets();
         for (var target of targets)
-            target.animationAgent().setCurrentTime(/** @type {number} */(this.startTime() + currentTime));
+            target.animationAgent().setCurrentTime(/** @type {number} */(this.startTime() + currentTime), this._updateStartTimes.bind(this));
     },
 
     /**