Devtools Animations: Support multiple frames in the animation timeline

Source/devtools/front_end/elements/AnimationTimeline.js

 // Copyright (c) 2015 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.VBox}
  */
 WebInspector.AnimationTimeline = function()
 {
@@ skipping 14 matching lines @@
     this._duration = this._defaultDuration();
     this._scrubberRadius = 25;
     this._timelineControlsWidth = 200;
     /** @type {!Map.<!DOMAgent.BackendNodeId, !WebInspector.AnimationTimeline.NodeUI>} */
     this._nodesMap = new Map();
     this._symbol = Symbol("animationTimeline");
     /** @type {!Map.<string, !WebInspector.AnimationModel.AnimationPlayer>} */
     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 = {
     _createHeader: function()
     {
         /**
          * @param {!Event} event
          * @this {WebInspector.AnimationTimeline}
          */
         function playbackSliderInputHandler(event)
         {
             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)
                 this._scrubberPlayer.playbackRate = this._animationsPlaybackRate;
         }
 
         var container = createElementWithClass("div", "animation-timeline-header");
         var controls = container.createChild("div", "animation-controls");
         container.createChild("div", "animation-timeline-markers");
 
@@ skipping 16 matching lines @@
         this._playbackSlider.type = "range";
         this._playbackSlider.min = 0;
         this._playbackSlider.max = WebInspector.AnimationsSidebarPane.GlobalPlaybackRates.length - 1;
         this._playbackSlider.value = this._playbackSlider.max;
         this._playbackSlider.addEventListener("input", playbackSliderInputHandler.bind(this));
         this._updateAnimationsPlaybackRate();
 
         return container;
     },
 
+    /**
+     * @param {?Array.<!AnimationAgent.AnimationStartTime>} startTimes
+     */
+    _startTimesUpdated: function(startTimes)
+    {
+        if (!startTimes || !startTimes.length)

[pfeldman, 2015/04/02 14:42:38]

Why is it nullable?

[samli, 2015/04/02 20:13:19]

In the case of protocol error it's called with null

+            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;

[pfeldman, 2015/04/02 14:42:38]

I don't understand how multiple players within multiple frames synchronize. Why
is this different from simply several players?

[samli, 2015/04/02 20:13:19]

All animation players have times calculated based on their attached animation
timeline which in turn are based on monotonic time. Ie: a player can return a
start time of "2000" which means it started 2000ms after the timeline started.
We can compare players in one Crame and have been doing so for a while. However,
we can't compare players in separate frames (timelines) without factoring in the
timeline start times, which is what we're doing in this patch.

+        }
+    },
+
     _updateAnimationsPlaybackRate: function()
     {
         /**
          * @param {?Protocol.Error} error
          * @param {number} playbackRate
          * @this {WebInspector.AnimationTimeline}
          */
         function setPlaybackRate(error, playbackRate)
         {
             this._animationsPlaybackRate = playbackRate;
             this._playbackSlider.value = WebInspector.AnimationsSidebarPane.GlobalPlaybackRates.indexOf(playbackRate);
             this._playbackLabel.textContent = playbackRate + "x";
         }
 
         var target = WebInspector.targetManager.mainTarget();
         if (target)
             target.animationAgent().getPlaybackRate(setPlaybackRate.bind(this));
     },
 
     _replay: function()
     {
         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.setCurrentTime(/** @type {number} */(this.startTime()), this._startTimesUpdated.bind(this));
         this._animateTime(0);
     },
 
     /**
      * @return {number}
      */
     _defaultDuration: function ()
     {
         return 300;
     },
@@ skipping 42 matching lines @@
     {
         this._reset();
         this._updateAnimationsPlaybackRate();
         if (this._scrubberPlayer)
             this._scrubberPlayer.cancel();
         delete this._scrubberPlayer;
         this._timelineScrubberHead.textContent = WebInspector.UIString(Number.millisToString(0));
     },
 
     /**
+     * @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
      */
     addAnimation: function(animation, resetTimeline)
     {
         /**
          * @param {?WebInspector.DOMNode} node
          * @this {WebInspector.AnimationTimeline}
          */
         function nodeResolved(node)
@@ skipping 172 matching lines @@
      */
     _scrubberDragStart: function(event)
     {
         if (!this._scrubberPlayer)
             return false;
 
         this._originalScrubberTime = this._scrubberPlayer.currentTime;
         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.setCurrentTime(/** @type {number} */(this.startTime()), this._startTimesUpdated.bind(this));
+            target.animationModel.setPlaybackRate(0, this._startTimesUpdated.bind(this));
+            target.animationAgent().seekTimeline(this._scrubberPlayer.currentTime);
+        }
         return true;
     },
 
     /**
      * @param {!Event} event
      */
     _scrubberDragMove: function(event)
     {
         var delta = event.x - this._originalMousePosition.x;
         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().seekTimeline(this._scrubberPlayer.currentTime - this._lastCurrentTime);
+        this._lastCurrentTime = this._scrubberPlayer.currentTime;
     },
 
     /**
      * @param {!Event} event
      */
     _scrubberDragEnd: function(event)
     {
         if (this._scrubberPlayer.currentTime < this.duration() - this._scrubberRadius / this.pixelMsRatio())
             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().seekTimeline(this._lastCurrentTime - this._scrubberPlayer.currentTime);
+            target.animationModel.setPlaybackRate(this._animationsPlaybackRate, this._startTimesUpdated.bind(this));
+        }
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @param {!WebInspector.AnimationModel.AnimationNode} animationNode
  */
 WebInspector.AnimationTimeline.NodeUI = function(animationNode) {
@@ skipping 488 matching lines @@
     "Light Blue": WebInspector.Color.parse("#03A9F4"),
     "Deep Orange": WebInspector.Color.parse("#FF5722"),
     "Blue": WebInspector.Color.parse("#5677FC"),
     "Lime": WebInspector.Color.parse("#CDDC39"),
     "Blue Grey": WebInspector.Color.parse("#607D8B"),
     "Pink": WebInspector.Color.parse("#E91E63"),
     "Green": WebInspector.Color.parse("#0F9D58"),
     "Brown": WebInspector.Color.parse("#795548"),
     "Cyan": WebInspector.Color.parse("#00BCD4")
 }