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 28 matching lines @@
     {
         /**
          * @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._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 299 matching lines @@
         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);
 
         var target = WebInspector.targetManager.mainTarget();
         if (target)
-            target.animationAgent().setPlaybackRate(0);
+            target.animationModel.setPlaybackRate(0);
         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));
     },
 
     /**
      * @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);
+            target.animationModel.setPlaybackRate(this._animationsPlaybackRate);
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @param {!WebInspector.AnimationModel.AnimationNode} animationNode
  */
 WebInspector.AnimationTimeline.NodeUI = function(animationNode) {
@@ skipping 534 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")
 }