| OLD | NEW |
| 1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 /** | 4 /** |
| 5 * @implements {WebInspector.TargetManager.Observer} | 5 * @implements {WebInspector.TargetManager.Observer} |
| 6 * @unrestricted | 6 * @unrestricted |
| 7 */ | 7 */ |
| 8 WebInspector.AnimationTimeline = class extends WebInspector.VBox { | 8 WebInspector.AnimationTimeline = class extends WebInspector.VBox { |
| 9 constructor() { | 9 constructor() { |
| 10 super(true); | 10 super(true); |
| (...skipping 99 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 110 } | 110 } |
| 111 | 111 |
| 112 _createHeader() { | 112 _createHeader() { |
| 113 var toolbarContainer = this.contentElement.createChild('div', 'animation-tim
eline-toolbar-container'); | 113 var toolbarContainer = this.contentElement.createChild('div', 'animation-tim
eline-toolbar-container'); |
| 114 var topToolbar = new WebInspector.Toolbar('animation-timeline-toolbar', tool
barContainer); | 114 var topToolbar = new WebInspector.Toolbar('animation-timeline-toolbar', tool
barContainer); |
| 115 var clearButton = new WebInspector.ToolbarButton(WebInspector.UIString('Clea
r all'), 'clear-toolbar-item'); | 115 var clearButton = new WebInspector.ToolbarButton(WebInspector.UIString('Clea
r all'), 'clear-toolbar-item'); |
| 116 clearButton.addEventListener('click', this._reset.bind(this)); | 116 clearButton.addEventListener('click', this._reset.bind(this)); |
| 117 topToolbar.appendToolbarItem(clearButton); | 117 topToolbar.appendToolbarItem(clearButton); |
| 118 topToolbar.appendSeparator(); | 118 topToolbar.appendSeparator(); |
| 119 | 119 |
| 120 this._pauseButton = new WebInspector.ToolbarToggle(WebInspector.UIString('Pa
use all'), 'pause-toolbar-item'); | 120 this._pauseButton = new WebInspector.ToolbarToggle(WebInspector.UIString('Pa
use all'), 'pause-toolbar-item', '', 'resume-toolbar-item'); |
| 121 this._pauseButton.addEventListener('click', this._togglePauseAll.bind(this))
; | 121 this._pauseButton.addEventListener('click', this._togglePauseAll.bind(this))
; |
| 122 topToolbar.appendToolbarItem(this._pauseButton); | 122 topToolbar.appendToolbarItem(this._pauseButton); |
| 123 | 123 |
| 124 var playbackRateControl = toolbarContainer.createChild('div', 'animation-pla
yback-rate-control'); | 124 var playbackRateControl = toolbarContainer.createChild('div', 'animation-pla
yback-rate-control'); |
| 125 this._playbackRateButtons = []; | 125 this._playbackRateButtons = []; |
| 126 for (var playbackRate of WebInspector.AnimationTimeline.GlobalPlaybackRates)
{ | 126 for (var playbackRate of WebInspector.AnimationTimeline.GlobalPlaybackRates)
{ |
| 127 var button = playbackRateControl.createChild('div', 'animation-playback-ra
te-button'); | 127 var button = playbackRateControl.createChild('div', 'animation-playback-ra
te-button'); |
| 128 button.textContent = | 128 button.textContent = |
| 129 playbackRate ? WebInspector.UIString(playbackRate * 100 + '%') : WebIn
spector.UIString('Pause'); | 129 playbackRate ? WebInspector.UIString(playbackRate * 100 + '%') : WebIn
spector.UIString('Pause'); |
| 130 button.playbackRate = playbackRate; | 130 button.playbackRate = playbackRate; |
| 131 button.addEventListener('click', this._setPlaybackRate.bind(this, playback
Rate)); | 131 button.addEventListener('click', this._setPlaybackRate.bind(this, playback
Rate)); |
| 132 button.title = WebInspector.UIString('Set speed to ') + button.textContent
; | 132 button.title = WebInspector.UIString('Set speed to ') + button.textContent
; |
| 133 this._playbackRateButtons.push(button); | 133 this._playbackRateButtons.push(button); |
| 134 } | 134 } |
| 135 this._updatePlaybackControls(); | 135 this._updatePlaybackControls(); |
| 136 | 136 |
| 137 this._previewContainer = this.contentElement.createChild('div', 'animation-t
imeline-buffer'); | 137 this._previewContainer = this.contentElement.createChild('div', 'animation-t
imeline-buffer'); |
| 138 this._popoverHelper = new WebInspector.PopoverHelper(this._previewContainer,
true); | 138 this._popoverHelper = new WebInspector.PopoverHelper(this._previewContainer,
true); |
| 139 this._popoverHelper.initializeCallbacks( | 139 this._popoverHelper.initializeCallbacks( |
| 140 this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._o
nHidePopover.bind(this)); | 140 this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._o
nHidePopover.bind(this)); |
| 141 this._popoverHelper.setTimeout(0); | 141 this._popoverHelper.setTimeout(0); |
| 142 var emptyBufferHint = this.contentElement.createChild('div', 'animation-time
line-buffer-hint'); | 142 var emptyBufferHint = this.contentElement.createChild('div', 'animation-time
line-buffer-hint'); |
| 143 emptyBufferHint.textContent = WebInspector.UIString('Listening for animation
s...'); | 143 emptyBufferHint.textContent = WebInspector.UIString('Listening for animation
s...'); |
| 144 var container = this.contentElement.createChild('div', 'animation-timeline-h
eader'); | 144 var container = this.contentElement.createChild('div', 'animation-timeline-h
eader'); |
| 145 var controls = container.createChild('div', 'animation-controls'); | 145 var controls = container.createChild('div', 'animation-controls'); |
| 146 this._currentTime = controls.createChild('div', 'animation-timeline-current-
time monospace'); | 146 this._currentTime = controls.createChild('div', 'animation-timeline-current-
time monospace'); |
| 147 | 147 |
| 148 var toolbar = new WebInspector.Toolbar('animation-controls-toolbar', control
s); | 148 var toolbar = new WebInspector.Toolbar('animation-controls-toolbar', control
s); |
| 149 this._controlButton = | 149 this._controlButton = |
| 150 new WebInspector.ToolbarButton(WebInspector.UIString('Replay timeline'),
'animation-control-toolbar-item'); | 150 new WebInspector.ToolbarToggle(WebInspector.UIString('Replay timeline'),
'animation-control-toolbar-item'); |
| 151 this._controlButton.setState(WebInspector.AnimationTimeline._ControlState.Re
play); | 151 this._controlState = WebInspector.AnimationTimeline._ControlState.Replay; |
| 152 this._controlButton.setToggled(true); |
| 152 this._controlButton.addEventListener('click', this._controlButtonToggle.bind
(this)); | 153 this._controlButton.addEventListener('click', this._controlButtonToggle.bind
(this)); |
| 153 toolbar.appendToolbarItem(this._controlButton); | 154 toolbar.appendToolbarItem(this._controlButton); |
| 154 | 155 |
| 155 var gridHeader = container.createChild('div', 'animation-grid-header'); | 156 var gridHeader = container.createChild('div', 'animation-grid-header'); |
| 156 WebInspector.installDragHandle( | 157 WebInspector.installDragHandle( |
| 157 gridHeader, this._repositionScrubber.bind(this), this._scrubberDragMove.
bind(this), | 158 gridHeader, this._repositionScrubber.bind(this), this._scrubberDragMove.
bind(this), |
| 158 this._scrubberDragEnd.bind(this), 'text'); | 159 this._scrubberDragEnd.bind(this), 'text'); |
| 159 container.appendChild(this._createScrubber()); | 160 container.appendChild(this._createScrubber()); |
| 160 WebInspector.installDragHandle( | 161 WebInspector.installDragHandle( |
| 161 this._timelineScrubberLine, this._scrubberDragStart.bind(this), this._sc
rubberDragMove.bind(this), | 162 this._timelineScrubberLine, this._scrubberDragStart.bind(this), this._sc
rubberDragMove.bind(this), |
| (...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 232 } | 233 } |
| 233 | 234 |
| 234 _updatePlaybackControls() { | 235 _updatePlaybackControls() { |
| 235 for (var button of this._playbackRateButtons) { | 236 for (var button of this._playbackRateButtons) { |
| 236 var selected = this._playbackRate === button.playbackRate; | 237 var selected = this._playbackRate === button.playbackRate; |
| 237 button.classList.toggle('selected', selected); | 238 button.classList.toggle('selected', selected); |
| 238 } | 239 } |
| 239 } | 240 } |
| 240 | 241 |
| 241 _controlButtonToggle() { | 242 _controlButtonToggle() { |
| 242 if (this._controlButton.state() === WebInspector.AnimationTimeline._ControlS
tate.Play) | 243 if (this._controlState === WebInspector.AnimationTimeline._ControlState.Play
) |
| 243 this._togglePause(false); | 244 this._togglePause(false); |
| 244 else if (this._controlButton.state() === WebInspector.AnimationTimeline._Con
trolState.Replay) | 245 else if (this._controlState === WebInspector.AnimationTimeline._ControlState
.Replay) |
| 245 this._replay(); | 246 this._replay(); |
| 246 else | 247 else |
| 247 this._togglePause(true); | 248 this._togglePause(true); |
| 248 } | 249 } |
| 249 | 250 |
| 250 _updateControlButton() { | 251 _updateControlButton() { |
| 251 this._controlButton.setEnabled(!!this._selectedGroup); | 252 this._controlButton.setEnabled(!!this._selectedGroup); |
| 252 if (this._selectedGroup && this._selectedGroup.paused()) { | 253 if (this._selectedGroup && this._selectedGroup.paused()) { |
| 253 this._controlButton.setState(WebInspector.AnimationTimeline._ControlState.
Play); | 254 this._controlState = WebInspector.AnimationTimeline._ControlState.Play; |
| 255 this._controlButton.setToggled(true); |
| 254 this._controlButton.setTitle(WebInspector.UIString('Play timeline')); | 256 this._controlButton.setTitle(WebInspector.UIString('Play timeline')); |
| 257 this._controlButton.setGlyph('animation-play-item'); |
| 255 } else if (!this._scrubberPlayer || this._scrubberPlayer.currentTime >= this
.duration()) { | 258 } else if (!this._scrubberPlayer || this._scrubberPlayer.currentTime >= this
.duration()) { |
| 256 this._controlButton.setState(WebInspector.AnimationTimeline._ControlState.
Replay); | 259 this._controlState = WebInspector.AnimationTimeline._ControlState.Replay; |
| 260 this._controlButton.setToggled(true); |
| 257 this._controlButton.setTitle(WebInspector.UIString('Replay timeline')); | 261 this._controlButton.setTitle(WebInspector.UIString('Replay timeline')); |
| 262 this._controlButton.setGlyph('animation-replay-item'); |
| 258 } else { | 263 } else { |
| 259 this._controlButton.setState(WebInspector.AnimationTimeline._ControlState.
Pause); | 264 this._controlState = WebInspector.AnimationTimeline._ControlState.Pause; |
| 265 this._controlButton.setToggled(false); |
| 260 this._controlButton.setTitle(WebInspector.UIString('Pause timeline')); | 266 this._controlButton.setTitle(WebInspector.UIString('Pause timeline')); |
| 267 this._controlButton.setGlyph('animation-pause-item'); |
| 261 } | 268 } |
| 262 } | 269 } |
| 263 | 270 |
| 264 /** | 271 /** |
| 265 * @return {number} | 272 * @return {number} |
| 266 */ | 273 */ |
| 267 _effectivePlaybackRate() { | 274 _effectivePlaybackRate() { |
| 268 return (this._allPaused || (this._selectedGroup && this._selectedGroup.pause
d())) ? 0 : this._playbackRate; | 275 return (this._allPaused || (this._selectedGroup && this._selectedGroup.pause
d())) ? 0 : this._playbackRate; |
| 269 } | 276 } |
| 270 | 277 |
| (...skipping 461 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 732 static parse(text) { | 739 static parse(text) { |
| 733 var match = text.match(/^steps\((\d+), (start|middle)\)$/); | 740 var match = text.match(/^steps\((\d+), (start|middle)\)$/); |
| 734 if (match) | 741 if (match) |
| 735 return new WebInspector.AnimationTimeline.StepTimingFunction(parseInt(matc
h[1], 10), match[2]); | 742 return new WebInspector.AnimationTimeline.StepTimingFunction(parseInt(matc
h[1], 10), match[2]); |
| 736 match = text.match(/^steps\((\d+)\)$/); | 743 match = text.match(/^steps\((\d+)\)$/); |
| 737 if (match) | 744 if (match) |
| 738 return new WebInspector.AnimationTimeline.StepTimingFunction(parseInt(matc
h[1], 10), 'end'); | 745 return new WebInspector.AnimationTimeline.StepTimingFunction(parseInt(matc
h[1], 10), 'end'); |
| 739 return null; | 746 return null; |
| 740 } | 747 } |
| 741 }; | 748 }; |
| OLD | NEW |