Devtools Animations: Update timeline controls and UI

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 63106dc4de61d08ce15962e338497d5a8499aa8d..e23c206a4db318b9ad2d700d700c753f017ef255 100644
--- a/Source/devtools/front_end/elements/AnimationTimeline.js
+++ b/Source/devtools/front_end/elements/AnimationTimeline.js
@@ -21,9 +21,14 @@ WebInspector.AnimationTimeline = function()
     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");
@@ -124,12 +129,7 @@ WebInspector.AnimationTimeline.prototype = {
         function playbackSliderInputHandler(event)
         {
             this._underlyingPlaybackRate = WebInspector.AnimationTimeline.GlobalPlaybackRates[event.target.value];
-            var target = WebInspector.targetManager.mainTarget();
-            if (target)
-                target.animationModel.setPlaybackRate(this._playbackRate());
-            this._playbackLabel.textContent = this._underlyingPlaybackRate + "✕";
-            WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();
-            this._updateTimelineAnimations();
+            this._updatePlaybackControls();
         }
 
         var container = createElementWithClass("div", "animation-timeline-header");
@@ -138,15 +138,13 @@ WebInspector.AnimationTimeline.prototype = {
 
         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._playbackLabel = controls.createChild("div", "animation-playback-label");
+        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("span", "animation-playback-label");
         this._playbackLabel.createTextChild("1x");
+        this._playbackLabel.addEventListener("keydown", this._playbackLabelInput.bind(this));
 
         this._playbackSlider = controls.createChild("input", "animation-playback-slider");
         this._playbackSlider.type = "range";
@@ -159,6 +157,68 @@ WebInspector.AnimationTimeline.prototype = {
         return container;
     },
 
+    /**
+     * @param {!Event} event
+     */
+    _playbackLabelInput: function(event)

[pfeldman, 2015/06/05 14:34:34]

I applied your change and I can now enter random text into that field. Please
test your changes thoroughly.

[samli, 2015/06/09 03:53:08]

I did test it thoroughly. This is intended. I can't see anywhere else we
restrict input like this. eg. metrics, you can enter random text. To commit a
value, enter/focus out must be used. Otherwise, you'll have the page jumping
around as you type a playback value. Once it has been committed, the field
updates, removing random text.

+    {
+        if (!isEnterKey(event))
+            return;
+
+        this._underlyingPlaybackRate = parseFloat(this._playbackLabel.textContent);
+        if (isNaN(this._underlyingPlaybackRate))
+            this._underlyingPlaybackRate = 1;
+        this._updatePlaybackControls();
+        event.consume(true);
+    },
+
+    _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;
+
+        var target = WebInspector.targetManager.mainTarget();
+        if (target)
+            target.animationModel.setPlaybackRate(this._playbackRate());
+        WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();
+        this._updateTimelineAnimations();
+    },
+
+    _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("Play timeline");

[pfeldman, 2015/06/05 14:34:34]

UIString please.

[samli, 2015/06/09 03:53:08]

Done.

+        } else if (!this._scrubberPlayer || this._scrubberPlayer.currentTime >= this._scrubberPlayer.source.timing.duration) {
+            this._controlButton.element.classList.add("replay-outline-toolbar-item");
+            this._controlButton.setTitle("Replay timeline");
+        } else {
+            this._controlButton.element.classList.add("pause-outline-toolbar-item");
+            this._controlButton.setTitle("Pause timeline");
+        }
+    },
+
     _updateAnimationsPlaybackRate: function()
     {
         /**
@@ -173,10 +233,10 @@ WebInspector.AnimationTimeline.prototype = {
                 target.animationAgent().setPlaybackRate(1);
             }
             this._underlyingPlaybackRate = playbackRate;
-            this._playbackSlider.value = WebInspector.AnimationTimeline.GlobalPlaybackRates.indexOf(playbackRate);
-            this._playbackLabel.textContent = playbackRate + "✕";
+            this._updatePlaybackControls();
         }
 
+        delete this._paused;
         var target = WebInspector.targetManager.mainTarget();
         if (target)
             target.animationAgent().getPlaybackRate(setPlaybackRate.bind(this));
@@ -201,15 +261,16 @@ WebInspector.AnimationTimeline.prototype = {
         }
     },
 
-    _togglePause: function()
+    /**
+     * @param {boolean} pause
+     */
+    _togglePause: function(pause)
     {
-        this._paused = !this._paused;
+        this._paused = pause;
         var target = WebInspector.targetManager.mainTarget();
         if (target)
             target.animationModel.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();
     },
 
@@ -279,6 +340,7 @@ WebInspector.AnimationTimeline.prototype = {
             this._scrubberPlayer.cancel();
         delete this._scrubberPlayer;
         this._timelineScrubberHead.textContent = WebInspector.UIString(Number.millisToString(0));
+        this._updateControlButton();
     },
 
     /**
@@ -301,10 +363,17 @@ WebInspector.AnimationTimeline.prototype = {
          */
         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();
 
@@ -377,7 +446,7 @@ WebInspector.AnimationTimeline.prototype = {
         }
         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);
@@ -472,7 +541,7 @@ WebInspector.AnimationTimeline.prototype = {
     {
         if (this._timerSpinnerPlayer !== timerPlayer)
             return;
-        this._timelineScrubber.classList.add("animation-timeline-end");
+        this._timelineScrubber.classList.remove("animation-timeline-capturing");
         delete this._timerSpinnerPlayer;
         delete this._timerFillerPlayer;
         delete this._timerMaskPlayer;
@@ -494,6 +563,8 @@ WebInspector.AnimationTimeline.prototype = {
             { 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;
@@ -573,12 +644,14 @@ WebInspector.AnimationTimeline.prototype = {
      */
     _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));
         var target = WebInspector.targetManager.mainTarget();
         if (target)
             target.animationModel.setPlaybackRate(this._playbackRate());
+        this._updateControlButton();
     },
 
     __proto__: WebInspector.VBox.prototype
@@ -595,8 +668,10 @@ WebInspector.AnimationTimeline.NodeUI = function(animationNode) {
      */
     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);
     }