DevTools: restore pause all that suspended all animations into the animations timeline.

third_party/WebKit/Source/devtools/front_end/animation/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("animation/animationTimeline.css");
     this.element.classList.add("animations-timeline");
 
     this._grid = this.contentElement.createSVGChild("svg", "animation-timeline-grid");
 
-    this._underlyingPlaybackRate = 1;
+    this._playbackRate = 1;
+    this._allPaused = false;
     this._createHeader();
     this._animationsContainer = this.contentElement.createChild("div", "animation-timeline-rows");
     var timelineHint = this.contentElement.createChild("div", "animation-timeline-rows-hint");
     timelineHint.textContent = WebInspector.UIString("Select an effect above to inspect and modify.");
 
     /** @const */ this._defaultDuration = 100;
     this._duration = this._defaultDuration;
     /** @const */ this._timelineControlsWidth = 150;
     /** @type {!Map.<!DOMAgent.BackendNodeId, !WebInspector.AnimationTimeline.NodeUI>} */
     this._nodesMap = new Map();
@@ skipping 91 matching lines @@
 
     _createHeader: function()
     {
         var toolbarContainer = this.contentElement.createChild("div", "animation-timeline-toolbar-container");
         var topToolbar = new WebInspector.Toolbar("animation-timeline-toolbar", toolbarContainer);
         var clearButton = new WebInspector.ToolbarButton(WebInspector.UIString("Clear all"), "clear-toolbar-item");
         clearButton.addEventListener("click", this._reset.bind(this));
         topToolbar.appendToolbarItem(clearButton);
         topToolbar.appendSeparator();
 
+        this._pauseButton = new WebInspector.ToolbarToggle(WebInspector.UIString("Pause all"), "pause-toolbar-item");
+        this._pauseButton.addEventListener("click", this._togglePauseAll.bind(this));
+        topToolbar.appendToolbarItem(this._pauseButton);
+
         var playbackRateControl = toolbarContainer.createChild("div", "animation-playback-rate-control");
         this._playbackRateButtons = [];
         for (var playbackRate of WebInspector.AnimationTimeline.GlobalPlaybackRates) {
             var button = playbackRateControl.createChild("div", "animation-playback-rate-button");
-            button.textContent = WebInspector.UIString(playbackRate * 100 + "%");
+            button.textContent = playbackRate ? WebInspector.UIString(playbackRate * 100 + "%") : WebInspector.UIString("Pause");
             button.playbackRate = playbackRate;
             button.addEventListener("click", this._setPlaybackRate.bind(this, playbackRate));
             button.title = WebInspector.UIString("Set speed to ") + button.textContent;
             this._playbackRateButtons.push(button);
         }
         this._updatePlaybackControls();
 
         this._previewContainer = this.contentElement.createChild("div", "animation-timeline-buffer");
         this._popoverHelper = new WebInspector.PopoverHelper(this._previewContainer, this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._onHidePopover.bind(this), true);
         this._popoverHelper.setTimeout(0);
@@ skipping 46 matching lines @@
             return;
         var content = new WebInspector.AnimationScreenshotPopover(screenshots);
         popover.setNoMargins(true);
         popover.showView(content, anchor);
     },
 
     _onHidePopover: function()
     {
     },
 
+    _togglePauseAll: function()
+    {
+        this._allPaused = !this._allPaused;
+        this._pauseButton.setToggled(this._allPaused);
+        this._setPlaybackRate(this._playbackRate);
+        this._pauseButton.setTitle(this._allPaused ? WebInspector.UIString("Resume all") : WebInspector.UIString("Pause all"));
+    },
+
     /**
      * @param {number} playbackRate
      */
     _setPlaybackRate: function(playbackRate)
     {
-        this._underlyingPlaybackRate = playbackRate;
+        this._playbackRate = playbackRate;
         var target = WebInspector.targetManager.mainTarget();
         if (target)
-            WebInspector.AnimationModel.fromTarget(target).setPlaybackRate(this._underlyingPlaybackRate);
+            WebInspector.AnimationModel.fromTarget(target).setPlaybackRate(this._allPaused ? 0 : this._playbackRate);
         WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.AnimationsPlaybackRateChanged);
         if (this._scrubberPlayer)
             this._scrubberPlayer.playbackRate = this._effectivePlaybackRate();
 
         this._updatePlaybackControls();
     },
 
     _updatePlaybackControls: function()
     {
         for (var button of this._playbackRateButtons) {
-            var selected = this._underlyingPlaybackRate === button.playbackRate;
+            var selected = this._playbackRate === button.playbackRate;
             button.classList.toggle("selected", selected);
         }
     },
 
     _controlButtonToggle: function()
     {
         if (this._controlButton.state() === WebInspector.AnimationTimeline._ControlState.Play)
             this._togglePause(false);
         else if (this._controlButton.state() === WebInspector.AnimationTimeline._ControlState.Replay)
             this._replay();
         else
             this._togglePause(true);
     },
 
     _updateControlButton: function()
     {
         this._controlButton.setEnabled(!!this._selectedGroup);
         if (this._selectedGroup && this._selectedGroup.paused()) {
             this._controlButton.setState(WebInspector.AnimationTimeline._ControlState.Play);
             this._controlButton.setTitle(WebInspector.UIString("Play timeline"));
         } else if (!this._scrubberPlayer || this._scrubberPlayer.currentTime >= this.duration()) {
             this._controlButton.setState(WebInspector.AnimationTimeline._ControlState.Replay);
             this._controlButton.setTitle(WebInspector.UIString("Replay timeline"));
         } else {
             this._controlButton.setState(WebInspector.AnimationTimeline._ControlState.Pause);
             this._controlButton.setTitle(WebInspector.UIString("Pause timeline"));
         }
     },
 
-    _updateAnimationsPlaybackRate: function()
-    {
-        /**
-         * @param {number} playbackRate
-         * @this {WebInspector.AnimationTimeline}
-         */
-        function syncPlaybackRate(playbackRate)
-        {
-            this._underlyingPlaybackRate = playbackRate || 1;
-            this._updatePlaybackControls();
-        }
-
-        for (var target of WebInspector.targetManager.targets(WebInspector.Target.Type.Page))
-            WebInspector.AnimationModel.fromTarget(target).playbackRatePromise().then(syncPlaybackRate.bind(this));
-    },
-
     /**
      * @return {number}
      */
     _effectivePlaybackRate: function()
     {
-        return this._selectedGroup && this._selectedGroup.paused() ? 0 : this._underlyingPlaybackRate;
+        return this._selectedGroup && this._selectedGroup.paused() ? 0 : this._playbackRate;
     },
 
     /**
      * @param {boolean} pause
      */
     _togglePause: function(pause)
     {
         this._selectedGroup.togglePause(pause);
         if (this._scrubberPlayer)
             this._scrubberPlayer.playbackRate = this._effectivePlaybackRate();
@@ skipping 39 matching lines @@
         if (this._scrubberPlayer)
             this._scrubberPlayer.cancel();
         delete this._scrubberPlayer;
         this._currentTime.textContent = "";
         this._updateControlButton();
     },
 
     _reset: function()
     {
         this._clearTimeline();
-        this._updateAnimationsPlaybackRate();
+        if (this._allPaused) {
+            this._playbackRate = 1;
+            this._togglePauseAll();
+        } else {
+            this._setPlaybackRate(1);
+        }
         for (var group of this._groupBuffer)
             group.release();
         this._groupBuffer = [];
         this._previewMap.clear();
         this._previewContainer.removeChildren();
         this._popoverHelper.hidePopover();
         this._renderGrid();
     },
 
     /**
@@ skipping 433 matching lines @@
 
     /**
      * @override
      * @return {!WebInspector.ToolbarItem}
      */
     item: function()
     {
         return this._button;
     }
 }