Devtools Animations: Basic animation inspection & control in Styles pane

Source/devtools/front_end/elements/AnimationSection.js

+// Copyright (c) 2014 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
+ * @param {?WebInspector.DOMModel.AnimationPlayer} animationPlayer
+ */
+WebInspector.AnimationSection = function(animationPlayer)
+{
+    this.propertiesSection = document.createElement("div");
+    this.setAnimationPlayer(animationPlayer);
+
+    this.element = document.createElement("div");
+    this.element.className = "styles-section";
+
+    this.element.appendChild(this._createAnimationControls());
+    this.element.appendChild(this.propertiesSection);
+}
+
+WebInspector.AnimationSection.prototype = {
+    /**
+     * @private
+     */
+    _updateCurrentTime: function()
+    {
+        /**
+         * @param {number} currentTime
+         * @param {boolean} isRunning
+         * @this {WebInspector.AnimationSection}
+         */
+        function updateSliderCallback(currentTime, isRunning)
+        {
+            this.currentTimeSlider.value = this.player.animation().iterationCount() == null ? currentTime % this.player.animation().duration() : currentTime;
+            if (isRunning)
+                requestAnimationFrame(this._updateCurrentTime.bind(this));

[vsevik, 2014/10/06 16:00:54]

I think polling this on each animation frame creates too much load on the
devtools connection. You could use WebInspector.Throttler to poll the time each
100ms and you could also use local time to emulate smooth slider position change
between these requests if needed.

Also I don't see how you exit from this time request loop, you should do this
when the selected node is changed. 

We might want to change this in future but I think for now we should move all
animation related stuff to a separate StylesSidebarPane tab and only poll
animation state while this tab is selected.

[samli, 2014/10/07 05:25:43]

Done.

+        }
+        this.player.getCurrentState(updateSliderCallback.bind(this));
+    },
+
+    /**
+     * @return {!Element}
+     * @private
+     */
+    _createCurrentTimeSlider: function()
+    {
+        /**
+         * @param {!Event} e
+         * @this {WebInspector.AnimationSection}
+         */
+        function sliderInputHandler(e)
+        {
+            this.player.setCurrentTime(parseFloat(e.target.value), this.setAnimationPlayer.bind(this));
+        }
+        var iterationDuration = this.player.animation().duration();
+        var iterationCount = this.player.animation().iterationCount();
+        var slider = document.createElement("input");
+        slider.type = "range";
+        slider.min = 0;
+        slider.step = 0.01;
+
+        if (!iterationCount) {
+            // Infinite iterations
+            slider.max = iterationDuration;
+            slider.value = this.player.currentTime() % iterationDuration;
+        } else {
+            slider.max = iterationCount * iterationDuration;
+            slider.value = this.player.currentTime();
+        }
+
+        slider.addEventListener("input", sliderInputHandler.bind(this));
+        requestAnimationFrame(this._updateCurrentTime.bind(this));
+        return slider;
+    },
+
+    /**
+     * @return {!Element}
+     * @private
+     */
+    _createAnimationControls: function()
+    {
+        /**
+         * @this {WebInspector.AnimationSection}
+         */
+        function pauseButtonHandler()
+        {
+            if (this.player.paused()) {
+                this.player.play(this.setAnimationPlayer.bind(this));
+                updatePauseButton.call(this, false);
+            } else {
+                this.player.pause(this.setAnimationPlayer.bind(this));
+                updatePauseButton.call(this, true);
+            }
+        }
+
+        /**
+         * @param {boolean} paused
+         * @this {WebInspector.AnimationSection}
+         */
+        function updatePauseButton(paused)
+        {
+            this._pauseButton.state = paused;
+            if (paused)
+                this._pauseButton.title = WebInspector.UIString("Play animation");
+            else
+                this._pauseButton.title = WebInspector.UIString("Pause animation");
+        }
+
+        this._pauseButton = new WebInspector.StatusBarButton("", "animation-pause");
+        updatePauseButton.call(this, this.player.paused());
+        this._pauseButton.addEventListener("click", pauseButtonHandler, this);
+
+        this.currentTimeSlider = this._createCurrentTimeSlider();
+
+        var controls = document.createElement("div");
+        controls.appendChild(this._pauseButton.element);
+        controls.appendChild(this.currentTimeSlider);
+
+        return controls;
+    },
+
+    /**
+     * @param {?WebInspector.DOMModel.AnimationPlayer} p
+     */
+    setAnimationPlayer: function(p)

[vsevik, 2014/10/06 16:00:55]

This should be private (name should start with underscore)

[samli, 2014/10/07 05:25:43]

Done.

+    {
+        if (!p || p === this.player)
+            return;
+
+        this.player = p;
+
+        if (p instanceof WebInspector.DOMModel.AnimationPlayer) {

[vsevik, 2014/10/06 16:00:54]

Why do you need this check? It seems redundant

[samli, 2014/10/07 05:25:43]

Done.

+            this.propertiesSection.removeChildren();
+            var animationObject = {
+                "paused": p.paused(),
+                "finished": p.finished(),
+                "start-time": p.startTime(),
+                "player-playback-rate": p.playbackRate(),
+                "id": p.id(),
+                "start-delay": p.animation().startDelay(),
+                "playback-rate": p.animation().playbackRate(),
+                "iteration-start": p.animation().iterationStart(),
+                "iteration-count": p.animation().iterationCount(),
+                "duration": p.animation().duration(),
+                "direction": p.animation().direction(),
+                "fill-mode": p.animation().fillMode(),
+                "time-fraction": p.animation().timeFraction()
+            };
+            var obj = WebInspector.RemoteObject.fromLocalObject(animationObject);
+            var section = new WebInspector.ObjectPropertiesSection(obj, WebInspector.UIString("Animation Properties"));
+            this.propertiesSection.appendChild(section.element);
+
+            requestAnimationFrame(this._updateCurrentTime.bind(this));
+        }
+    }
+}