Devtools Animations: Basic animation inspection & control in Styles pane

Source/devtools/front_end/elements/AnimationSection.js

Index: Source/devtools/front_end/elements/AnimationSection.js
diff --git a/Source/devtools/front_end/elements/AnimationSection.js b/Source/devtools/front_end/elements/AnimationSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..8d3639893adc696215f032d7222349a345a3c58a
--- /dev/null
+++ b/Source/devtools/front_end/elements/AnimationSection.js
@@ -0,0 +1,148 @@
+// 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));
+        }
+        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 pausePlayHandler ()
+        {
+            if (this.player.paused()) {
+                this.player.play(this.setAnimationPlayer.bind(this));
+                pausePlayButton.textContent = WebInspector.UIString("Pause");
+            } else {
+                this.player.pause(this.setAnimationPlayer.bind(this));
+                pausePlayButton.textContent = WebInspector.UIString("Play");
+            }
+        }
+        var controls = document.createElement("div");
+
+        // Pause/play button
+        var pausePlayButton = document.createElement("button");
+        if (this.player.paused())
+            pausePlayButton.textContent = WebInspector.UIString("Play");
+        else
+            pausePlayButton.textContent = WebInspector.UIString("Pause");
+        pausePlayButton.addEventListener("click", pausePlayHandler.bind(this));
+        controls.appendChild(pausePlayButton);
+
+        // Current time slider
+        this.currentTimeSlider = this._createCurrentTimeSlider();
+        controls.appendChild(this.currentTimeSlider);
+
+        return controls;
+    },
+
+    /**
+     * @param {?WebInspector.DOMModel.AnimationPlayer} p
+     */
+    setAnimationPlayer: function(p)
+    {
+        if (!p || p === this.player)
+            return;
+
+        this.player = p;
+
+        if (p instanceof WebInspector.DOMModel.AnimationPlayer) {
+            this.propertiesSection.removeChildren();
+            var animationObject = {
+                "paused": p.paused(),
+                "finished": p.finished(),
+                "start-time": p.startTime(),
+                "player-playback-rate": p.playbackRate(),
+                "id": p.sequenceNumber(),
+                "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));
+        }
+    }
+}