Devtools: Add global animation timeline controls

Source/devtools/front_end/elements/AnimationsSidebarPane.js

Index: Source/devtools/front_end/elements/AnimationsSidebarPane.js
diff --git a/Source/devtools/front_end/elements/AnimationsSidebarPane.js b/Source/devtools/front_end/elements/AnimationsSidebarPane.js
index bc0a14a93278327444128bcec7dfafb0c340524d..11edd157c53151bda973ee566060070454318bf6 100644
--- a/Source/devtools/front_end/elements/AnimationsSidebarPane.js
+++ b/Source/devtools/front_end/elements/AnimationsSidebarPane.js
@@ -11,10 +11,13 @@ WebInspector.AnimationsSidebarPane = function(stylesPane)
     WebInspector.ElementsSidebarPane.call(this, WebInspector.UIString("Animations"));
     this._stylesPane = stylesPane;
 
-    this.headerElement = createElementWithClass("div", "animationsSettings");
+    this.headerElement = createElementWithClass("div", "animationsHeader");
+    this._globalControls = new WebInspector.AnimationsSidebarPane.GlobalAnimationControls();
+    this.headerElement.appendChild(this._globalControls.element);
     this._showSubtreeSetting = WebInspector.settings.createSetting("showSubtreeAnimations", true);
-    this.headerElement.appendChild(WebInspector.AnimationsSidebarPane._showSubtreeAnimationsCheckbox(this._showSubtreeSetting));
     this._showSubtreeSetting.addChangeListener(this._showSubtreeSettingChanged.bind(this));
+    this.headerElement.appendChild(WebInspector.AnimationsSidebarPane._showSubtreeAnimationsCheckbox(this._showSubtreeSetting));
+
     this._emptyElement = createElement("div");
     this._emptyElement.className = "info";
     this._emptyElement.textContent = WebInspector.UIString("No Animations");
@@ -77,6 +80,7 @@ WebInspector.AnimationsSidebarPane.prototype = {
         }
 
         if (!this.node()) {
+            this._globalControls.reset();
             finishCallback();
             return;
         }
@@ -310,3 +314,72 @@ WebInspector.AnimationSection.prototype = {
         }
     }
 }
+
+WebInspector.AnimationsSidebarPane._globalPlaybackRates = [0.1, 0.25, 0.5, 1.0, 2.0];
+
+/**
+ * @constructor
+ * @extends {WebInspector.StatusBar}
+ */
+WebInspector.AnimationsSidebarPane.GlobalAnimationControls = function()
+{
+    WebInspector.StatusBar.call(this);
+    this.element.classList.add("global-animations-toolbar");
+
+    this._pauseButton = new WebInspector.StatusBarButton("", "animation-pause");
+    this._pauseButton.addEventListener("click", this._pauseHandler.bind(this), this);
+    this.appendStatusBarItem(this._pauseButton);
+    this._playbackRateButtons = [];
+    WebInspector.AnimationsSidebarPane._globalPlaybackRates.forEach(this._createPlaybackRateButton.bind(this));
+    this.reset();
+}
+
+WebInspector.AnimationsSidebarPane.GlobalAnimationControls.prototype = {
+    /**
+     * @param {number} playbackRate
+     */
+    _createPlaybackRateButton: function(playbackRate)
+    {
+        var button = new WebInspector.StatusBarTextButton(WebInspector.UIString("Set all animations playback rate to " + playbackRate + "x"), "playback-rate-button", playbackRate + "x");
+        button.playbackRate = playbackRate;
+        button.addEventListener("click", this._playbackRateHandler.bind(this, button), this);
+        this._playbackRateButtons.push(button);
+        this.appendStatusBarItem(button);
+    },
+
+    reset: function()
+    {
+        this._paused = false;
+        this._playbackRate = 1.0;
+        this._updateControls();
+    },
+
+    _updateControls: function()
+    {
+        this._updatePauseButton();
+        for (var i = 0; i < this._playbackRateButtons.length; i++)
+            this._playbackRateButtons[i].setToggled(this._playbackRateButtons[i].playbackRate === this._playbackRate);
+    },
+
+    _updatePauseButton: function()
+    {
+        this._pauseButton.setToggled(this._paused);
+        this._pauseButton.setTitle(this._paused ? WebInspector.UIString("Resume all animations") : WebInspector.UIString("Pause all animations"));
+    },
+
+    _pauseHandler: function()
+    {
+        this._paused = !this._paused;
+        PageAgent.setAnimationsPlaybackRate(this._paused ? 0 : this._playbackRate);
+        this._updatePauseButton();

[vsevik, 2014/11/17 06:03:16]

You should also update toggled state of the last toggled payback reate buttons,
aren't you?

[samli, 2014/11/17 06:15:54]

From a UI perspective, pause/play & playback rate are separate concepts. So here
you can have a playback rate of 0.5x AND be paused at the same time. Also when
you resume you want the playback rate to return to 0.5x.

+    },
+
+    _playbackRateHandler: function(button)

[vsevik, 2014/11/17 06:03:16]

You could actually bind playbackRate directly.

[vsevik, 2014/11/17 06:03:16]

Please annotate

[samli, 2014/11/17 06:15:54]

Done.

[samli, 2014/11/17 06:15:54]

Done.

+    {
+        this._playbackRate = button.playbackRate;
+        this._updateControls();
+        PageAgent.setAnimationsPlaybackRate(button.playbackRate);
+    },
+
+    __proto__: WebInspector.StatusBar.prototype
+}