Devtools: Add global animation timeline controls

Source/devtools/front_end/elements/AnimationsSidebarPane.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
  * @extends {WebInspector.ElementsSidebarPane}
  */
 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._showSubtreeSetting.addChangeListener(this._showSubtreeSettingChanged.bind(this));
     this.headerElement.appendChild(WebInspector.AnimationsSidebarPane._showSubtreeAnimationsCheckbox(this._showSubtreeSetting));
-    this._showSubtreeSetting.addChangeListener(this._showSubtreeSettingChanged.bind(this));
+
     this._emptyElement = createElement("div");
     this._emptyElement.className = "info";
     this._emptyElement.textContent = WebInspector.UIString("No Animations");
     this.animationsElement = createElement("div");
     this.animationsElement.appendChild(this._emptyElement);
 
     this._animationSections = [];
 
     this.bodyElement.appendChild(this.headerElement);
     this.bodyElement.appendChild(this.animationsElement);
@@ skipping 42 matching lines @@
                 var player = animationPlayers[i];
                 this._animationSections[i] = new WebInspector.AnimationSection(this, this._stylesPane, player);
                 if (animationPlayers.length < 5)
                     this._animationSections[i].expand(true);
                 this.animationsElement.appendChild(this._animationSections[i].element);
             }
             finishCallback();
         }
 
         if (!this.node()) {
+            this._globalControls.reset();
             finishCallback();
             return;
         }
 
         if (!this._forceUpdate && this._selectedNode === this.node()) {
             for (var i = 0; i < this._animationSections.length; ++i)
                 this._animationSections[i].updateCurrentTime();
             finishCallback();
             return;
         }
@@ skipping 213 matching lines @@
             var keyframes = this.player.source().keyframesRule().keyframes();
             for (var j = 0; j < keyframes.length; j++) {
                 var inlineStyle = { selectorText: keyframes[j].offset(), style: keyframes[j].style(), isAttribute: true };
                 var styleSection = new WebInspector.StylePropertiesSection(this._stylesPane, inlineStyle, true, false);
                 styleSection.expanded = true;
                 this._keyframesElement.appendChild(styleSection.element);
             }
         }
     }
 }
+
+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
+}