Devtools: Add global animation timeline controls

Devtools: Add global animation timeline controls

Animation timelines now expose a protocol method to change the playback
rate. This change adds controls on the animations pane to allow all
animations to be paused and for the playback rate to be changed. This
aids debugging of non-trivial web pages with many animations running
simultaneously.

BUG=432368
Committed: https://src.chromium.org/viewvc/blink?view=rev&revision=185441

[samli, 2014-11-17 05:39:03]

Patchset #2 (id:20001) has been deleted

[samli, 2014-11-17 05:40:16]

PTAL

[samli, 2014-11-17 05:40:47]

samli@chromium.org changed reviewers:
+ vsevik@chromium.org

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

Could you please attach a screenshot?

https://codereview.chromium.org/724693003/diff/40001/Source/devtools/front_en...
File Source/devtools/front_end/elements/AnimationsSidebarPane.js (right):

https://codereview.chromium.org/724693003/diff/40001/Source/devtools/front_en...
Source/devtools/front_end/elements/AnimationsSidebarPane.js:374:
this._updatePauseButton();
You should also update toggled state of the last toggled payback reate buttons,
aren't you?

https://codereview.chromium.org/724693003/diff/40001/Source/devtools/front_en...
Source/devtools/front_end/elements/AnimationsSidebarPane.js:377:
_playbackRateHandler: function(button)
Please annotate

https://codereview.chromium.org/724693003/diff/40001/Source/devtools/front_en...
Source/devtools/front_end/elements/AnimationsSidebarPane.js:377:
_playbackRateHandler: function(button)
You could actually bind playbackRate directly.

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

Screenshot: http://imgur.com/iNS3ELN

I think we should move subtree option up into the status bar as well. The slider
UI was broken in https://codereview.chromium.org/732603002. I'll fix it up in
another patch.

https://codereview.chromium.org/724693003/diff/40001/Source/devtools/front_en...
File Source/devtools/front_end/elements/AnimationsSidebarPane.js (right):

https://codereview.chromium.org/724693003/diff/40001/Source/devtools/front_en...
Source/devtools/front_end/elements/AnimationsSidebarPane.js:374:
this._updatePauseButton();
On 2014/11/17 06:03:16, vsevik wrote:
> You should also update toggled state of the last toggled payback reate
buttons,
> aren't you?

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.

https://codereview.chromium.org/724693003/diff/40001/Source/devtools/front_en...
Source/devtools/front_end/elements/AnimationsSidebarPane.js:377:
_playbackRateHandler: function(button)
On 2014/11/17 06:03:16, vsevik wrote:
> Please annotate

Done.

https://codereview.chromium.org/724693003/diff/40001/Source/devtools/front_en...
Source/devtools/front_end/elements/AnimationsSidebarPane.js:377:
_playbackRateHandler: function(button)
On 2014/11/17 06:03:16, vsevik wrote:
> You could actually bind playbackRate directly.

Done.

[vsevik, 2014-11-17 08:29:15]

lgtm

[samli, 2014-11-17 08:43:21]

The CQ bit was checked by samli@chromium.org

[commit-bot: I haz the power, 2014-11-17 08:44:16]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/724693003/60001

[commit-bot: I haz the power, 2014-11-17 12:58:09]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2014-11-17 12:58:11]

Try jobs failed on following builders:
  win_blink_rel on tryserver.blink
(http://build.chromium.org/p/tryserver.blink/builders/win_blink_rel/builds/36808)

[vsevik, 2014-11-17 13:50:13]

The CQ bit was checked by vsevik@chromium.org

[commit-bot: I haz the power, 2014-11-17 13:51:07]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/724693003/60001

[commit-bot: I haz the power, 2014-11-17 14:29:46]

Committed patchset #3 (id:60001) as 185441