Devtools Animations: Update timeline controls and UI

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("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");
+
+    this._emptyTimelineMessage = this._animationsContainer.createChild("div", "animation-timeline-empty-message");
+    var message = this._emptyTimelineMessage.createChild("div");
+    message.textContent = WebInspector.UIString("Trigger animations on the page to view and tweak them on the animation timeline.");
+
     this._duration = this._defaultDuration();
-    this._scrubberRadius = 25;
-    this._timelineControlsWidth = 200;
+    this._scrubberRadius = 30;
+    this._timelineControlsWidth = 230;
     /** @type {!Map.<!DOMAgent.BackendNodeId, !WebInspector.AnimationTimeline.NodeUI>} */
     this._nodesMap = new Map();
     this._symbol = Symbol("animationTimeline");
     /** @type {!Map.<string, !WebInspector.AnimationModel.Animation>} */
     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.observeTargets(this, WebInspector.Target.Type.Page);
 }
@@ skipping 82 matching lines @@
      */
     _createHeader: function()
     {
         /**
          * @param {!Event} event
          * @this {WebInspector.AnimationTimeline}
          */
         function playbackSliderInputHandler(event)
         {
             this._underlyingPlaybackRate = WebInspector.AnimationTimeline.GlobalPlaybackRates[event.target.value];
-            this._setPlaybackRate(this._playbackRate());
-            this._playbackLabel.textContent = this._underlyingPlaybackRate + "✕";
-            WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();
-            if (this._scrubberPlayer)
-                this._scrubberPlayer.playbackRate = this._playbackRate();
+            this._updatePlaybackControls();
         }
 
         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);
         toolbar.element.classList.add("animation-controls-toolbar");
-        this._pauseButton = new WebInspector.ToolbarButton(WebInspector.UIString("Pause timeline"), "pause-toolbar-item");
-        this._pauseButton.addEventListener("click", this._togglePause.bind(this));
-        toolbar.appendToolbarItem(this._pauseButton);
-        var replayButton = new WebInspector.ToolbarButton(WebInspector.UIString("Replay timeline"), "replay-toolbar-item");
-        replayButton.addEventListener("click", this._replay.bind(this));
-        toolbar.appendToolbarItem(replayButton);
+        this._controlButton = new WebInspector.ToolbarButton(WebInspector.UIString("Replay timeline"), "replay-outline-toolbar-item");
+        this._controlButton.addEventListener("click", this._controlButtonToggle.bind(this));
+        toolbar.appendToolbarItem(this._controlButton);
 
-        this._playbackLabel = controls.createChild("div", "animation-playback-label");
+        this._playbackLabel = controls.createChild("span", "animation-playback-label");
         this._playbackLabel.createTextChild("1x");
 
         this._playbackSlider = controls.createChild("input", "animation-playback-slider");
         this._playbackSlider.type = "range";
         this._playbackSlider.min = 0;
         this._playbackSlider.max = WebInspector.AnimationTimeline.GlobalPlaybackRates.length - 1;
         this._playbackSlider.value = this._playbackSlider.max;
         this._playbackSlider.addEventListener("input", playbackSliderInputHandler.bind(this));
         this._updateAnimationsPlaybackRate();
 
         return container;
     },
 
+    _updatePlaybackControls: function()
+    {
+        this._playbackLabel.textContent = this._underlyingPlaybackRate + "x";
+        var playbackSliderValue = 0;
+        for (var rate of WebInspector.AnimationTimeline.GlobalPlaybackRates) {
+            if (this._underlyingPlaybackRate > rate)
+                playbackSliderValue++;
+        }
+        this._playbackSlider.value = playbackSliderValue;
+
+        for (var target of WebInspector.targetManager.targets(WebInspector.Target.Type.Page))
+            WebInspector.AnimationModel.fromTarget(target).setPlaybackRate(this._playbackRate());
+        WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();
+        if (this._scrubberPlayer)
+            this._scrubberPlayer.playbackRate = this._playbackRate();
+    },
+
+    _controlButtonToggle: function()
+    {
+        if (this._emptyTimelineMessage)
+            return;
+        if (this._controlButton.element.classList.contains("play-outline-toolbar-item"))
+            this._togglePause(false);
+        else if (this._controlButton.element.classList.contains("replay-outline-toolbar-item"))
+            this._replay();
+        else
+            this._togglePause(true);
+        this._updateControlButton();
+    },
+
+    _updateControlButton: function()
+    {
+        this._controlButton.element.classList.remove("play-outline-toolbar-item");
+        this._controlButton.element.classList.remove("replay-outline-toolbar-item");
+        this._controlButton.element.classList.remove("pause-outline-toolbar-item");
+        if (this._paused) {
+            this._controlButton.element.classList.add("play-outline-toolbar-item");
+            this._controlButton.setTitle(WebInspector.UIString("Play timeline"));
+        } else if (!this._scrubberPlayer || this._scrubberPlayer.currentTime >= this.duration() - this._scrubberRadius / this.pixelMsRatio()) {
+            this._controlButton.element.classList.add("replay-outline-toolbar-item");
+            this._controlButton.setTitle(WebInspector.UIString("Replay timeline"));
+        } else {
+            this._controlButton.element.classList.add("pause-outline-toolbar-item");
+            this._controlButton.setTitle(WebInspector.UIString("Pause timeline"));
+        }
+    },
+
     _updateAnimationsPlaybackRate: function()
     {
         /**
          * @param {?Protocol.Error} error
          * @param {number} playbackRate
          * @this {WebInspector.AnimationTimeline}
          */
         function setPlaybackRate(error, playbackRate)
         {
             if (playbackRate === 0) {
                 playbackRate = 1;
-                target.animationAgent().setPlaybackRate(1);
+                if (target)
+                    WebInspector.AnimationModel.fromTarget(target).setPlaybackRate(1);
             }
             this._underlyingPlaybackRate = playbackRate;
-            this._playbackSlider.value = WebInspector.AnimationTimeline.GlobalPlaybackRates.indexOf(playbackRate);
-            this._playbackLabel.textContent = playbackRate + "✕";
+            this._updatePlaybackControls();
         }
 
-        var target = WebInspector.targetManager.mainTarget();
-        if (target)
+        delete this._paused;
+        for (var target of WebInspector.targetManager.targets(WebInspector.Target.Type.Page))
             target.animationAgent().getPlaybackRate(setPlaybackRate.bind(this));
     },
 
     /**
      * @return {number}
      */
     _playbackRate: function()
     {
         return this._paused ? 0 : this._underlyingPlaybackRate;
     },
 
-    _togglePause: function()
+    /**
+     * @param {boolean} pause
+     */
+    _togglePause: function(pause)
     {
-        this._paused = !this._paused;
-        this._setPlaybackRate(this._playbackRate());
+        this._paused = pause;
+        for (var target of WebInspector.targetManager.targets(WebInspector.Target.Type.Page))
+            WebInspector.AnimationModel.fromTarget(target).setPlaybackRate(this._playbackRate());
         WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();
-        this._pauseButton.element.classList.toggle("pause-toolbar-item");
-        this._pauseButton.element.classList.toggle("play-toolbar-item");
         if (this._scrubberPlayer)
             this._scrubberPlayer.playbackRate = this._playbackRate();
     },
 
     _replay: function()
     {
         if (this.startTime() === undefined)
             return;
         for (var target of WebInspector.targetManager.targets(WebInspector.Target.Type.Page))
             target.animationAgent().setCurrentTime(/** @type {number} */(this.startTime()));
@@ skipping 50 matching lines @@
      * @param {!WebInspector.Event} event
      */
     _mainFrameNavigated: function(event)
     {
         this._reset();
         this._updateAnimationsPlaybackRate();
         if (this._scrubberPlayer)
             this._scrubberPlayer.cancel();
         delete this._scrubberPlayer;
         this._timelineScrubberHead.textContent = WebInspector.UIString(Number.millisToString(0));
+        this._updateControlButton();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _animationCreated: function(event)
     {
         this._addAnimation(/** @type {!WebInspector.AnimationModel.Animation} */ (event.data.player), event.data.resetTimeline)
     },
 
     /**
      * @param {!WebInspector.AnimationModel.Animation} animation
      * @param {boolean} resetTimeline
      */
     _addAnimation: function(animation, resetTimeline)
     {
         /**
          * @param {?WebInspector.DOMNode} node
          * @this {WebInspector.AnimationTimeline}
          */
         function nodeResolved(node)
         {
+            if (!node)
+                return;
             uiAnimation.setNode(node);
             node[this._symbol] = nodeUI;
         }
 
+        if (this._emptyTimelineMessage) {
+            this._emptyTimelineMessage.remove();
+            delete this._emptyTimelineMessage;
+        }
+
         if (resetTimeline)
             this._reset();
 
         // Ignore Web Animations custom effects & groups
         if (animation.type() === "WebAnimation" && animation.source().keyframesRule().keyframes().length === 0)
             return;
 
         if (this._resizeWindow(animation))
             this.scheduleRedraw();
 
@@ skipping 50 matching lines @@
         var lastDraw = undefined;
         for (var time = 0; time < this.duration(); time += gridSize) {
             var line = this._grid.createSVGChild("rect", "animation-timeline-grid-line");
             line.setAttribute("x", time * this.pixelMsRatio());
             line.setAttribute("y", 0);
             line.setAttribute("height", "100%");
             line.setAttribute("width", 1);
         }
         for (var time = 0; time < this.duration(); time += gridSize) {
             var gridWidth = time * this.pixelMsRatio();
-            if (time && (!lastDraw || gridWidth - lastDraw > 50)) {
+            if (!lastDraw || gridWidth - lastDraw > 50) {
                 lastDraw = gridWidth;
                 var label = this._grid.createSVGChild("text", "animation-timeline-grid-label");
                 label.setAttribute("x", gridWidth + 5);
                 label.setAttribute("y", 35);
                 label.textContent = WebInspector.UIString(Number.millisToString(time));
             }
         }
     },
 
     scheduleRedraw: function() {
@@ skipping 57 matching lines @@
       */
     _animateTime: function(time)
     {
         var oldPlayer = this._scrubberPlayer;
 
         this._scrubberPlayer = this._timelineScrubber.animate([
             { transform: "translateX(0px)" },
             { transform: "translateX(" +  (this.width() - this._scrubberRadius) + "px)" }
         ], { duration: this.duration() - this._scrubberRadius / this.pixelMsRatio(), fill: "forwards" });
         this._scrubberPlayer.playbackRate = this._playbackRate();
+        this._scrubberPlayer.onfinish = this._updateControlButton.bind(this);
+        this._updateControlButton();
 
         if (time !== undefined)
             this._scrubberPlayer.currentTime = time;
         else if (oldPlayer.playState === "finished")
             this._scrubberPlayer.finish();
         else
             this._scrubberPlayer.startTime = oldPlayer.startTime;
 
         if (oldPlayer)
             oldPlayer.cancel();
@@ skipping 32 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._setPlaybackRate(0);
+        this._togglePause(true);
+        this._updateControlButton();
         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));
         for (var target of WebInspector.targetManager.targets(WebInspector.Target.Type.Page))
             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();
+        var currentTime = Math.max(0, this._scrubberPlayer.currentTime);
+        this._scrubberPlayer.play();
+        this._scrubberPlayer.currentTime = currentTime;
         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)
-            WebInspector.AnimationModel.fromTarget(target).setPlaybackRate(playbackRate);
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @param {!WebInspector.AnimationModel.AnimationEffect} animationEffect
  */
 WebInspector.AnimationTimeline.NodeUI = function(animationEffect) {
     /**
      * @param {?WebInspector.DOMNode} node
      * @this {WebInspector.AnimationTimeline.NodeUI}
      */
     function nodeResolved(node)
     {
+        if (!node)
+            return;
         this._node = node;
-        this._description.appendChild(WebInspector.DOMPresentationUtils.linkifyNodeReference(node));
+        WebInspector.DOMPresentationUtils.decorateNodeLabel(node, this._description);
         this.element.addEventListener("click", WebInspector.Revealer.reveal.bind(WebInspector.Revealer, node, undefined), false);
     }
 
     this._rows = [];
     this.element = createElementWithClass("div", "animation-node-row");
     this._description = this.element.createChild("div", "animation-node-description");
     animationEffect.deferredNode().resolve(nodeResolved.bind(this));
     this._timelineElement = this.element.createChild("div", "animation-node-timeline");
 }
 
@@ skipping 414 matching lines @@
 
         // Commit changes
         if (this._mouseEventType === WebInspector.AnimationUI.MouseEvents.KeyframeMove) {
             this._keyframes[this._keyframeMoved].setOffset(this._offset(this._keyframeMoved));
         } else {
             var delay = this._delay();
             var duration = this._duration();
             this._setDelay(delay);
             this._setDuration(duration);
             if (this._animation.type() !== "CSSAnimation") {
-                var target = WebInspector.targetManager.mainTarget();
-                if (target)
+                for (var target of WebInspector.targetManager.targets(WebInspector.Target.Type.Page))
                     target.animationAgent().setTiming(this._animation.id(), duration, delay);
             }
         }
 
         this._movementInMs = 0;
         this.redraw();
 
         this._parentElement.ownerDocument.removeEventListener("mousemove", this._mouseMoveHandler);
         this._parentElement.ownerDocument.removeEventListener("mouseup", this._mouseUpHandler);
         delete this._mouseMoveHandler;
@@ skipping 87 matching lines @@
     EndpointsClickRegionSize: 10,
     GridCanvasHeight: 40
 }
 
 WebInspector.AnimationUI.Colors = {
     "Purple": WebInspector.Color.parse("#9C27B0"),
     "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")
 }