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 d3602f75df04280ad6bc2c632ed9ed2de0742ff0..55a75eea9ac344ba6ca3104cf26f0806bc4c1317 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.animationModel.setPlaybackRate(this._animationsPlaybackRate);
             this._playbackLabel.textContent = this._animationsPlaybackRate + "x";
             WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();
             if (this._scrubberPlayer)
@@ -171,6 +172,16 @@ WebInspector.AnimationTimeline.prototype = {
     },
 
     /**
+     * @param {!WebInspector.Event} event
+     */
+    _frameAdded: function(event)
+    {
+        var target = WebInspector.targetManager.mainTarget();
+        if (target && this._animationsPlaybackRate)
+            target.animationModel.setPlaybackRate(this._animationsPlaybackRate);

[pfeldman, 2015/04/14 09:37:53]

You want to instrument it on the backend and set current time / playback rate
upon frameAdded.

[samli, 2015/04/15 03:19:16]

Done. PTAL, couldn't use the regular frame added instrumentation event. At the
time the LocalFrame is created, there is no DOMWindow attached. When the
DOMWindow is attached, no document has been loaded into the DOMWindow. So I've
instrumented when the document is loaded into the DOMWindow attached to a frame.
This is the only way to retrieve the timeline.

+    },
+
+    /**
      * @param {!WebInspector.AnimationModel.AnimationPlayer} animation
      * @param {boolean} resetTimeline
      */
@@ -366,7 +377,7 @@ WebInspector.AnimationTimeline.prototype = {
 
         var target = WebInspector.targetManager.mainTarget();
         if (target)
-            target.animationAgent().setPlaybackRate(0);
+            target.animationModel.setPlaybackRate(0);
         return true;
     },
 
@@ -394,7 +405,7 @@ WebInspector.AnimationTimeline.prototype = {
         this._timelineScrubberHead.window().requestAnimationFrame(this._updateScrubber.bind(this));
         var target = WebInspector.targetManager.mainTarget();
         if (target)
-            target.animationAgent().setPlaybackRate(this._animationsPlaybackRate);
+            target.animationModel.setPlaybackRate(this._animationsPlaybackRate);
     },
 
     __proto__: WebInspector.VBox.prototype