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..7c054fe425dafdc3b9e9c99613a1a0c5f318e763 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._startTimesUpdated.bind(this));
             this._playbackLabel.textContent = this._animationsPlaybackRate + "x";
             WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();
             if (this._scrubberPlayer)
@@ -83,6 +84,22 @@ WebInspector.AnimationTimeline.prototype = {
         return container;
     },
 
+    /**
+     * @param {?Array.<!AnimationAgent.AnimationStartTime>} startTimes
+     */
+    _startTimesUpdated: function(startTimes)
+    {
+        if (!startTimes || !startTimes.length)
+            return;
+
+        // Update timeline start time from new monotonic time values
+        delete this._startTime;
+        for (var player of startTimes) {
+            if (!this._startTime || player.startTime < this._startTime)
+                this._startTime = player.startTime;
+        }
+    },
+
     _updateAnimationsPlaybackRate: function()
     {
         /**
@@ -106,9 +123,9 @@ WebInspector.AnimationTimeline.prototype = {
     {
         if (this.startTime() === undefined)
             return;
-        var targets = WebInspector.targetManager.targets();
-        for (var target of targets)
-            target.animationAgent().setCurrentTime(/** @type {number} */(this.startTime()));
+        var target = WebInspector.targetManager.mainTarget();
+        if (target)
+            target.animationModel.seekTimelineTo(/** @type {number} */(this.startTime()), this._startTimesUpdated.bind(this));
         this._animateTime(0);
     },
 
@@ -171,6 +188,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, this._startTimesUpdated.bind(this));
+    },
+
+    /**
      * @param {!WebInspector.AnimationModel.AnimationPlayer} animation
      * @param {boolean} resetTimeline
      */
@@ -363,10 +390,14 @@ WebInspector.AnimationTimeline.prototype = {
         this._timelineScrubber.classList.remove("animation-timeline-end");
         this._scrubberPlayer.pause();
         this._originalMousePosition = new WebInspector.Geometry.Point(event.x, event.y);
+        this._lastCurrentTime = this._scrubberPlayer.currentTime;
 
         var target = WebInspector.targetManager.mainTarget();
-        if (target)
-            target.animationAgent().setPlaybackRate(0);
+        if (target) {
+            target.animationModel.seekTimelineTo(/** @type {number} */(this.startTime()), this._startTimesUpdated.bind(this));
+            target.animationModel.setPlaybackRate(0, this._startTimesUpdated.bind(this));
+            target.animationAgent().seekTimelineBy(this._scrubberPlayer.currentTime);
+        }
         return true;
     },
 
@@ -379,9 +410,10 @@ WebInspector.AnimationTimeline.prototype = {
         this._scrubberPlayer.currentTime = Math.min(this._originalScrubberTime + delta / this.pixelMsRatio(), this.duration() - this._scrubberRadius / this.pixelMsRatio());
         var currentTime = Math.max(0, Math.round(this._scrubberPlayer.currentTime));
         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));
+        var target = WebInspector.targetManager.mainTarget();
+        if (target)
+            target.animationAgent().seekTimelineBy(this._scrubberPlayer.currentTime - this._lastCurrentTime);
+        this._lastCurrentTime = this._scrubberPlayer.currentTime;
     },
 
     /**
@@ -393,8 +425,10 @@ WebInspector.AnimationTimeline.prototype = {
             this._scrubberPlayer.play();
         this._timelineScrubberHead.window().requestAnimationFrame(this._updateScrubber.bind(this));
         var target = WebInspector.targetManager.mainTarget();
-        if (target)
-            target.animationAgent().setPlaybackRate(this._animationsPlaybackRate);
+        if (target) {
+            target.animationAgent().seekTimelineBy(this._lastCurrentTime - this._scrubberPlayer.currentTime);
+            target.animationModel.setPlaybackRate(this._animationsPlaybackRate, this._startTimesUpdated.bind(this));
+        }
     },
 
     __proto__: WebInspector.VBox.prototype