Devtools Animations: Update timeline controls and UI

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}
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.AnimationTimeline = function()
 {
     WebInspector.VBox.call(this, true);
     this.registerRequiredCSS("elements/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.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.observeTargets(this, WebInspector.Target.Type.Page);
 }
@@ skipping 80 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._playbackLabel.textContent = this._underlyingPlaybackRate + "✕";
-            WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();
-            this._updateTimelineAnimations();
+            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._playbackLabel.addEventListener("keydown", this._playbackLabelInput.bind(this));
 
         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;
     },
 
+    /**
+     * @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()
     {
         /**
          * @param {?Protocol.Error} error
          * @param {number} playbackRate
          * @this {WebInspector.AnimationTimeline}
          */
         function setPlaybackRate(error, playbackRate)
         {
             if (playbackRate === 0) {
                 playbackRate = 1;
                 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));
     },
 
     /**
      * @return {number}
      */
     _playbackRate: function()
     {
         return this._paused ? 0 : this._underlyingPlaybackRate;
     },
 
     _updateTimelineAnimations: function()
     {
         if (this._scrubberPlayer)
             this._scrubberPlayer.playbackRate = this._playbackRate();
         if (this._timerSpinnerPlayer) {
             this._timerSpinnerPlayer.playbackRate = this._playbackRate();
             this._timerFillerPlayer.playbackRate = this._playbackRate();
             this._timerMaskPlayer.playbackRate = this._playbackRate();
         }
     },
 
-    _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();
     },
 
     _replay: function()
     {
         if (this.startTime() === undefined)
             return;
         var targets = WebInspector.targetManager.targets();
         for (var target of targets)
             target.animationAgent().setCurrentTime(/** @type {number} */(this.startTime()));
@@ skipping 49 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.AnimationPlayer} */ (event.data.player), event.data.resetTimeline)
     },
 
     /**
      * @param {!WebInspector.AnimationModel.AnimationPlayer} 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();
         else
@@ skipping 52 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 74 matching lines @@
         this._timerMaskPlayer.currentTime = 0;
     },
 
     /**
      * @param {!Object} timerPlayer
      */
     _timerFinished: function(timerPlayer)
     {
         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;
     },
 
     /**
       * @param {number=} time
       * @param {boolean=} timelineCapturing
       */
     _animateTime: function(time, timelineCapturing)
     {
         var oldPlayer = this._scrubberPlayer;
         this._timelineScrubber.classList.toggle("animation-timeline-capturing", timelineCapturing);
         if (timelineCapturing)
             this._startTimerAnimation();
 
         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 59 matching lines @@
         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();
+        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
 }
 
 /**
  * @constructor
  * @param {!WebInspector.AnimationModel.AnimationNode} animationNode
  */
 WebInspector.AnimationTimeline.NodeUI = function(animationNode) {
     /**
      * @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");
     animationNode.deferredNode().resolve(nodeResolved.bind(this));
     this._timelineElement = this.element.createChild("div", "animation-node-timeline");
 }
 
@@ skipping 529 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")
 }