Devtools: Move animation to separate module

Source/devtools/front_end/animation/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}
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.AnimationTimeline = function()
 {
     WebInspector.VBox.call(this, true);
-    this.registerRequiredCSS("elements/animationTimeline.css");
+    this.registerRequiredCSS("animation/animationTimeline.css");
     this.element.classList.add("animations-timeline");
 
     this._grid = this.contentElement.createSVGChild("svg", "animation-timeline-grid");
     this.contentElement.appendChild(this._createScrubber());
     WebInspector.installDragHandle(this._timelineScrubberHead, this._scrubberDragStart.bind(this), this._scrubberDragMove.bind(this), this._scrubberDragEnd.bind(this), "move");
     this._timelineScrubberHead.textContent = WebInspector.UIString(Number.millisToString(0));
 
     this._underlyingPlaybackRate = 1;
     this.contentElement.appendChild(this._createHeader());
     this._animationsContainer = this.contentElement.createChild("div", "animation-timeline-rows");
@@ skipping 43 matching lines @@
     targetRemoved: function(target)
     {
         this._removeEventListeners(target);
     },
 
     /**
      * @param {!WebInspector.Target} target
      */
     _addEventListeners: function(target)
     {
-        target.animationModel.ensureEnabled();
-        target.animationModel.addEventListener(WebInspector.AnimationModel.Events.AnimationPlayerCreated, this._animationCreated, this);
-        target.animationModel.addEventListener(WebInspector.AnimationModel.Events.AnimationPlayerCanceled, this._animationCanceled, this);
+        var animationModel = WebInspector.AnimationModel.fromTarget(target);
+        animationModel.ensureEnabled();
+        animationModel.addEventListener(WebInspector.AnimationModel.Events.AnimationPlayerCreated, this._animationCreated, this);
+        animationModel.addEventListener(WebInspector.AnimationModel.Events.AnimationPlayerCanceled, this._animationCanceled, this);
     },
 
     /**
      * @param {!WebInspector.Target} target
      */
     _removeEventListeners: function(target)
     {
-        target.animationModel.removeEventListener(WebInspector.AnimationModel.Events.AnimationPlayerCreated, this._animationCreated, this);
-        target.animationModel.removeEventListener(WebInspector.AnimationModel.Events.AnimationPlayerCanceled, this._animationCanceled, this);
+        var animationModel = WebInspector.AnimationModel.fromTarget(target);
+        animationModel.removeEventListener(WebInspector.AnimationModel.Events.AnimationPlayerCreated, this._animationCreated, this);
+        animationModel.removeEventListener(WebInspector.AnimationModel.Events.AnimationPlayerCanceled, this._animationCanceled, this);
     },
 
     /**
      * @param {?WebInspector.DOMNode} node
      */
     setNode: function(node)
     {
         for (var nodeUI of this._nodesMap.values())
             nodeUI.setNode(node);
     },
@@ skipping 18 matching lines @@
      */
     _createHeader: function()
     {
         /**
          * @param {!Event} event
          * @this {WebInspector.AnimationTimeline}
          */
         function playbackSliderInputHandler(event)
         {
             this._underlyingPlaybackRate = WebInspector.AnimationTimeline.GlobalPlaybackRates[event.target.value];
-            var target = WebInspector.targetManager.mainTarget();
-            if (target)
-                target.animationModel.setPlaybackRate(this._playbackRate());
+            this._setPlaybackRate(this._playbackRate());
             this._playbackLabel.textContent = this._underlyingPlaybackRate + "✕";
             WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();
             this._updateTimelineAnimations();
         }
 
         var container = createElementWithClass("div", "animation-timeline-header");
         var controls = container.createChild("div", "animation-controls");
         container.createChild("div", "animation-timeline-markers");
 
         var toolbar = new WebInspector.Toolbar(controls);
@@ skipping 57 matching lines @@
         if (this._timerSpinnerPlayer) {
             this._timerSpinnerPlayer.playbackRate = this._playbackRate();
             this._timerFillerPlayer.playbackRate = this._playbackRate();
             this._timerMaskPlayer.playbackRate = this._playbackRate();
         }
     },
 
     _togglePause: function()
     {
         this._paused = !this._paused;
-        var target = WebInspector.targetManager.mainTarget();
-        if (target)
-            target.animationModel.setPlaybackRate(this._playbackRate());
+        this._setPlaybackRate(this._playbackRate());
         WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();
         this._pauseButton.element.classList.toggle("pause-toolbar-item");
         this._pauseButton.element.classList.toggle("play-toolbar-item");
         this._updateTimelineAnimations();
     },
 
     _replay: function()
     {
         if (this.startTime() === undefined)
             return;
@@ skipping 321 matching lines @@
     {
         if (!this._scrubberPlayer)
             return false;
 
         this._originalScrubberTime = this._scrubberPlayer.currentTime;
         this._timelineScrubber.classList.remove("animation-timeline-end");
         this._timelineScrubber.classList.remove("animation-timeline-capturing");
         this._scrubberPlayer.pause();
         this._originalMousePosition = new WebInspector.Geometry.Point(event.x, event.y);
 
-        var target = WebInspector.targetManager.mainTarget();
-        if (target)
-            target.animationModel.setPlaybackRate(0);
+        this._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));
+        this._setPlaybackRate(this._playbackRate());
+    },
+
+    /**
+     * @param {number} playbackRate
+     */
+    _setPlaybackRate: function(playbackRate)
+    {
         var target = WebInspector.targetManager.mainTarget();
         if (target)
-            target.animationModel.setPlaybackRate(this._playbackRate());
+            WebInspector.AnimationModel.fromTarget(target).setPlaybackRate(playbackRate);
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @param {!WebInspector.AnimationModel.AnimationNode} animationNode
  */
 WebInspector.AnimationTimeline.NodeUI = function(animationNode) {
@@ skipping 547 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")
 }