Source/devtools/front_end/animation/AnimationTimeline.js - Issue 1156323003: Devtools Animations: Update timeline controls and UI

Unified Diff: Source/devtools/front_end/animation/AnimationTimeline.js

Issue 1156323003: Devtools Animations: Update timeline controls and UI (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Scrubber pauses Created 5 years, 3 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

Index: Source/devtools/front_end/animation/AnimationTimeline.js

diff --git a/Source/devtools/front_end/animation/AnimationTimeline.js b/Source/devtools/front_end/animation/AnimationTimeline.js

index a619f6cc9d5d6f8b289b42027a9d503df80fd6a8..415c3df846dee33f3cfd1a17f421a89b146d1dc7 100644

--- a/Source/devtools/front_end/animation/AnimationTimeline.js

+++ b/Source/devtools/front_end/animation/AnimationTimeline.js

@@ -21,9 +21,14 @@ WebInspector.AnimationTimeline = function()

this._underlyingPlaybackRate = 1;

this.contentElement.appendChild(this._createHeader());

this._animationsContainer = this.contentElement.createChild("div", "animation-timeline-rows");

+ this._emptyTimelineMessage = this._animationsContainer.createChild("div", "animation-timeline-empty-message");

+ var message = this._emptyTimelineMessage.createChild("div");

+ message.textContent = WebInspector.UIString("Trigger animations on the page to view and tweak them on the animation timeline.");

this._duration = this._defaultDuration();

- this._scrubberRadius = 25;

- this._timelineControlsWidth = 200;

+ this._scrubberRadius = 30;

+ this._timelineControlsWidth = 230;

/** @type {!Map.<!DOMAgent.BackendNodeId, !WebInspector.AnimationTimeline.NodeUI>} */

this._nodesMap = new Map();

this._symbol = Symbol("animationTimeline");

@@ -126,11 +131,7 @@ WebInspector.AnimationTimeline.prototype = {

function playbackSliderInputHandler(event)

{

this._underlyingPlaybackRate = WebInspector.AnimationTimeline.GlobalPlaybackRates[event.target.value];

- this._setPlaybackRate(this._playbackRate());

- this._playbackLabel.textContent = this._underlyingPlaybackRate + "✕";

- WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();

- if (this._scrubberPlayer)

- this._scrubberPlayer.playbackRate = this._playbackRate();

+ this._updatePlaybackControls();

}

var container = createElementWithClass("div", "animation-timeline-header");

@@ -139,14 +140,11 @@ WebInspector.AnimationTimeline.prototype = {

var toolbar = new WebInspector.Toolbar(controls);

toolbar.element.classList.add("animation-controls-toolbar");

- this._pauseButton = new WebInspector.ToolbarButton(WebInspector.UIString("Pause timeline"), "pause-toolbar-item");

- this._pauseButton.addEventListener("click", this._togglePause.bind(this));

- toolbar.appendToolbarItem(this._pauseButton);

- var replayButton = new WebInspector.ToolbarButton(WebInspector.UIString("Replay timeline"), "replay-toolbar-item");

- replayButton.addEventListener("click", this._replay.bind(this));

- toolbar.appendToolbarItem(replayButton);

- this._playbackLabel = controls.createChild("div", "animation-playback-label");

+ this._controlButton = new WebInspector.ToolbarButton(WebInspector.UIString("Replay timeline"), "replay-outline-toolbar-item");

+ this._controlButton.addEventListener("click", this._controlButtonToggle.bind(this));

+ toolbar.appendToolbarItem(this._controlButton);

+ this._playbackLabel = controls.createChild("span", "animation-playback-label");

this._playbackLabel.createTextChild("1x");

this._playbackSlider = controls.createChild("input", "animation-playback-slider");

@@ -160,6 +158,54 @@ WebInspector.AnimationTimeline.prototype = {

return container;

+ _updatePlaybackControls: function()

+ {

+ 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());

pfeldman 2015/09/03 19:05:01 It does not seem to be consistent with the other c

samli 2015/09/03 22:04:18 Done. Removed all instances of .mainTarget()

+ WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();

+ if (this._scrubberPlayer)

+ this._scrubberPlayer.playbackRate = this._playbackRate();

+ },

+ _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.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) {

+ this._controlButton.element.classList.add("play-outline-toolbar-item");

+ this._controlButton.setTitle(WebInspector.UIString("Play timeline"));

+ } 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"));

+ } else {

+ this._controlButton.element.classList.add("pause-outline-toolbar-item");

+ this._controlButton.setTitle(WebInspector.UIString("Pause timeline"));

+ }

+ },

_updateAnimationsPlaybackRate: function()

{

/**

@@ -171,13 +217,14 @@ WebInspector.AnimationTimeline.prototype = {

{

if (playbackRate === 0) {

playbackRate = 1;

- target.animationAgent().setPlaybackRate(1);

+ if (target)

+ WebInspector.AnimationModel.fromTarget(target).setPlaybackRate(1);

}

this._underlyingPlaybackRate = playbackRate;

- this._playbackSlider.value = WebInspector.AnimationTimeline.GlobalPlaybackRates.indexOf(playbackRate);

- this._playbackLabel.textContent = playbackRate + "✕";

+ this._updatePlaybackControls();

}

+ delete this._paused;

var target = WebInspector.targetManager.mainTarget();

if (target)

target.animationAgent().getPlaybackRate(setPlaybackRate.bind(this));

@@ -191,13 +238,16 @@ WebInspector.AnimationTimeline.prototype = {

return this._paused ? 0 : this._underlyingPlaybackRate;

- _togglePause: function()

+ /**

+ * @param {boolean} pause

+ */

+ _togglePause: function(pause)

{

- this._paused = !this._paused;

- this._setPlaybackRate(this._playbackRate());

+ this._paused = pause;

+ var target = WebInspector.targetManager.mainTarget();

+ if (target)

+ WebInspector.AnimationModel.fromTarget(target).setPlaybackRate(this._playbackRate());

WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();

- this._pauseButton.element.classList.toggle("pause-toolbar-item");

- this._pauseButton.element.classList.toggle("play-toolbar-item");

if (this._scrubberPlayer)

this._scrubberPlayer.playbackRate = this._playbackRate();

@@ -268,6 +318,7 @@ WebInspector.AnimationTimeline.prototype = {

this._scrubberPlayer.cancel();

delete this._scrubberPlayer;

this._timelineScrubberHead.textContent = WebInspector.UIString(Number.millisToString(0));

+ this._updateControlButton();

/**

@@ -290,10 +341,17 @@ WebInspector.AnimationTimeline.prototype = {

function nodeResolved(node)

{

+ if (!node)

+ return;

uiAnimation.setNode(node);

node[this._symbol] = nodeUI;

}

+ if (this._emptyTimelineMessage) {

+ this._emptyTimelineMessage.remove();

+ delete this._emptyTimelineMessage;

+ }

if (resetTimeline)

this._reset();

@@ -364,7 +422,7 @@ WebInspector.AnimationTimeline.prototype = {

}

for (var time = 0; time < this.duration(); time += gridSize) {

var gridWidth = time * this.pixelMsRatio();

- if (time && (!lastDraw || gridWidth - lastDraw > 50)) {

+ if (!lastDraw || gridWidth - lastDraw > 50) {

lastDraw = gridWidth;

var label = this._grid.createSVGChild("text", "animation-timeline-grid-label");

label.setAttribute("x", gridWidth + 5);

@@ -442,6 +500,8 @@ WebInspector.AnimationTimeline.prototype = {

{ transform: "translateX(" + (this.width() - this._scrubberRadius) + "px)" }

], { duration: this.duration() - this._scrubberRadius / this.pixelMsRatio(), fill: "forwards" });

this._scrubberPlayer.playbackRate = this._playbackRate();

+ this._scrubberPlayer.onfinish = this._updateControlButton.bind(this);

+ this._updateControlButton();

if (time !== undefined)

this._scrubberPlayer.currentTime = time;

@@ -494,7 +554,8 @@ WebInspector.AnimationTimeline.prototype = {

this._scrubberPlayer.pause();

this._originalMousePosition = new WebInspector.Geometry.Point(event.x, event.y);

- this._setPlaybackRate(0);

+ this._togglePause(true);

+ this._updateControlButton();

return true;

@@ -517,20 +578,10 @@ WebInspector.AnimationTimeline.prototype = {

_scrubberDragEnd: function(event)

{

- if (this._scrubberPlayer.currentTime < this.duration() - this._scrubberRadius / this.pixelMsRatio())

- this._scrubberPlayer.play();

+ var currentTime = Math.max(0, this._scrubberPlayer.currentTime);

+ this._scrubberPlayer.play();

+ this._scrubberPlayer.currentTime = currentTime;

this._timelineScrubberHead.window().requestAnimationFrame(this._updateScrubber.bind(this));

- this._setPlaybackRate(this._playbackRate());

- },

- /**

- * @param {number} playbackRate

- */

- _setPlaybackRate: function(playbackRate)

- {

- var target = WebInspector.targetManager.mainTarget();

- if (target)

- WebInspector.AnimationModel.fromTarget(target).setPlaybackRate(playbackRate);

__proto__: WebInspector.VBox.prototype

@@ -547,8 +598,10 @@ WebInspector.AnimationTimeline.NodeUI = function(animationEffect) {

function nodeResolved(node)

{

+ if (!node)

+ return;

this._node = node;

- this._description.appendChild(WebInspector.DOMPresentationUtils.linkifyNodeReference(node));

+ WebInspector.DOMPresentationUtils.decorateNodeLabel(node, this._description);

this.element.addEventListener("click", WebInspector.Revealer.reveal.bind(WebInspector.Revealer, node, undefined), false);

}

@@ -1092,7 +1145,6 @@ WebInspector.AnimationUI.Colors = {

"Deep Orange": WebInspector.Color.parse("#FF5722"),

"Blue": WebInspector.Color.parse("#5677FC"),

"Lime": WebInspector.Color.parse("#CDDC39"),

- "Blue Grey": WebInspector.Color.parse("#607D8B"),

"Pink": WebInspector.Color.parse("#E91E63"),

"Green": WebInspector.Color.parse("#0F9D58"),

"Brown": WebInspector.Color.parse("#795548"),

« no previous file with comments | « no previous file | Source/devtools/front_end/animation/animationTimeline.css » ('j') | no next file with comments »