Devtools Animations: Pause button based on groups not global

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()
@@ skipping 172 matching lines @@
         this._playbackLabel.textContent = this._underlyingPlaybackRate + "x";
         var playbackSliderValue = 0;
         for (var rate of WebInspector.AnimationTimeline.GlobalPlaybackRates) {
             if (this._underlyingPlaybackRate > rate)
                 playbackSliderValue++;
         }
         this._playbackSlider.value = playbackSliderValue;
 
         var target = WebInspector.targetManager.mainTarget();
         if (target)
-            WebInspector.AnimationModel.fromTarget(target).setPlaybackRate(this._playbackRate());
+            WebInspector.AnimationModel.fromTarget(target).setPlaybackRate(this._underlyingPlaybackRate);
         WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.AnimationsPlaybackRateChanged);
         if (this._scrubberPlayer)
-            this._scrubberPlayer.playbackRate = this._playbackRate();
+            this._scrubberPlayer.playbackRate = this._effectivePlaybackRate();
     },
 
     _controlButtonToggle: function()
     {
         if (this._emptyTimelineMessage)
             return;
         if (this._controlButton.element.classList.contains("play-outline-toolbar-item"))
             this._togglePause(false);
         else if (this._controlButton.element.classList.contains("replay-outline-toolbar-item"))
             this._replay();
         else
             this._togglePause(true);
         this._updateControlButton();
     },
 
     _updateControlButton: function()
     {
+        this._controlButton.setEnabled(!!this._selectedGroup);
         this._controlButton.element.classList.remove("play-outline-toolbar-item");
         this._controlButton.element.classList.remove("replay-outline-toolbar-item");
         this._controlButton.element.classList.remove("pause-outline-toolbar-item");
-        if (this._paused) {
+        if (this._selectedGroup && this._selectedGroup.paused()) {
             this._controlButton.element.classList.add("play-outline-toolbar-item");
             this._controlButton.setTitle(WebInspector.UIString("Play timeline"));
             this._controlButton.setToggled(true);
         } else if (!this._scrubberPlayer || this._scrubberPlayer.currentTime >= this.duration() - this._scrubberRadius / this.pixelMsRatio()) {
             this._controlButton.element.classList.add("replay-outline-toolbar-item");
             this._controlButton.setTitle(WebInspector.UIString("Replay timeline"));
             this._controlButton.setToggled(true);
         } else {
             this._controlButton.element.classList.add("pause-outline-toolbar-item");
             this._controlButton.setTitle(WebInspector.UIString("Pause timeline"));
             this._controlButton.setToggled(false);
         }
     },
 
     _updateAnimationsPlaybackRate: function()
     {
         /**
          * @param {number} playbackRate
          * @this {WebInspector.AnimationTimeline}
          */
         function syncPlaybackRate(playbackRate)
         {
             this._underlyingPlaybackRate = playbackRate;
             this._updatePlaybackControls();
         }
 
-        delete this._paused;
         for (var target of WebInspector.targetManager.targets(WebInspector.Target.Type.Page))
             WebInspector.AnimationModel.fromTarget(target).playbackRatePromise().then(syncPlaybackRate.bind(this));
     },
 
     /**
      * @return {number}
      */
-    _playbackRate: function()
+    _effectivePlaybackRate: function()
     {
-        return this._paused ? 0 : this._underlyingPlaybackRate;
+        return this._selectedGroup && this._selectedGroup.paused() ? 0 : this._underlyingPlaybackRate;
     },
 
     /**
      * @param {boolean} pause
      */
     _togglePause: function(pause)
     {
-        this._paused = pause;
-        for (var target of WebInspector.targetManager.targets(WebInspector.Target.Type.Page))
-            WebInspector.AnimationModel.fromTarget(target).setPlaybackRate(this._playbackRate());
-        WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.AnimationsPlaybackRateChanged);
+        this._selectedGroup.togglePause(pause);
         if (this._scrubberPlayer)
-            this._scrubberPlayer.playbackRate = this._playbackRate();
+            this._scrubberPlayer.playbackRate = this._effectivePlaybackRate();
     },
 
     _replay: function()
     {
         if (!this._selectedGroup)
             return;
         this._selectedGroup.seekTo(0);
         this._animateTime(0);
     },
 
@@ skipping 285 matching lines @@
     _animateTime: function(currentTime)
     {
         if (this._scrubberPlayer)
             this._scrubberPlayer.cancel();
 
         var scrubberDuration = this.duration() - this._scrubberRadius / this.pixelMsRatio();
         this._scrubberPlayer = this._timelineScrubber.animate([
             { transform: "translateX(0px)" },
             { transform: "translateX(" +  (this.width() - this._scrubberRadius) + "px)" }
         ], { duration: scrubberDuration , fill: "forwards" });
-        this._scrubberPlayer.playbackRate = this._playbackRate();
+        this._scrubberPlayer.playbackRate = this._effectivePlaybackRate();
         this._scrubberPlayer.onfinish = this._updateControlButton.bind(this);
         this._scrubberPlayer.currentTime = currentTime;
         this._timelineScrubber.classList.remove("animation-timeline-end");
         this._timelineScrubberHead.window().requestAnimationFrame(this._updateScrubber.bind(this));
     },
 
     /**
      * @return {number}
      */
     pixelMsRatio: function()
@@ skipping 167 matching lines @@
  */
 WebInspector.AnimationTimeline.StepTimingFunction.parse = function(text) {
     var match = text.match(/^step-(start|middle|end)$/);
     if (match)
         return new WebInspector.AnimationTimeline.StepTimingFunction(1, match[1]);
     match = text.match(/^steps\((\d+), (start|middle|end)\)$/);
     if (match)
         return new WebInspector.AnimationTimeline.StepTimingFunction(parseInt(match[1], 10), match[2]);
     return null;
 }