| 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 {SDK.TargetManager.Observer} | 5 * @implements {SDK.TargetManager.Observer} |
| 6 * @unrestricted | 6 * @unrestricted |
| 7 */ | 7 */ |
| 8 Animation.AnimationTimeline = class extends UI.VBox { | 8 Animation.AnimationTimeline = class extends UI.VBox { |
| 9 constructor() { | 9 constructor() { |
| 10 super(true); | 10 super(true); |
| (...skipping 94 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 105 this._timelineScrubberLine = this._timelineScrubber.createChild('div', 'anim
ation-scrubber-line'); | 105 this._timelineScrubberLine = this._timelineScrubber.createChild('div', 'anim
ation-scrubber-line'); |
| 106 this._timelineScrubberLine.createChild('div', 'animation-scrubber-head'); | 106 this._timelineScrubberLine.createChild('div', 'animation-scrubber-head'); |
| 107 this._timelineScrubber.createChild('div', 'animation-time-overlay'); | 107 this._timelineScrubber.createChild('div', 'animation-time-overlay'); |
| 108 return this._timelineScrubber; | 108 return this._timelineScrubber; |
| 109 } | 109 } |
| 110 | 110 |
| 111 _createHeader() { | 111 _createHeader() { |
| 112 var toolbarContainer = this.contentElement.createChild('div', 'animation-tim
eline-toolbar-container'); | 112 var toolbarContainer = this.contentElement.createChild('div', 'animation-tim
eline-toolbar-container'); |
| 113 var topToolbar = new UI.Toolbar('animation-timeline-toolbar', toolbarContain
er); | 113 var topToolbar = new UI.Toolbar('animation-timeline-toolbar', toolbarContain
er); |
| 114 var clearButton = new UI.ToolbarButton(Common.UIString('Clear all'), 'largei
con-clear'); | 114 var clearButton = new UI.ToolbarButton(Common.UIString('Clear all'), 'largei
con-clear'); |
| 115 clearButton.addEventListener('click', this._reset.bind(this)); | 115 clearButton.addEventListener(UI.ToolbarButton.Events.Click, this._reset.bind
(this)); |
| 116 topToolbar.appendToolbarItem(clearButton); | 116 topToolbar.appendToolbarItem(clearButton); |
| 117 topToolbar.appendSeparator(); | 117 topToolbar.appendSeparator(); |
| 118 | 118 |
| 119 this._pauseButton = new UI.ToolbarToggle(Common.UIString('Pause all'), 'larg
eicon-pause', 'largeicon-resume'); | 119 this._pauseButton = new UI.ToolbarToggle(Common.UIString('Pause all'), 'larg
eicon-pause', 'largeicon-resume'); |
| 120 this._pauseButton.addEventListener('click', this._togglePauseAll.bind(this))
; | 120 this._pauseButton.addEventListener(UI.ToolbarButton.Events.Click, this._togg
lePauseAll.bind(this)); |
| 121 topToolbar.appendToolbarItem(this._pauseButton); | 121 topToolbar.appendToolbarItem(this._pauseButton); |
| 122 | 122 |
| 123 var playbackRateControl = toolbarContainer.createChild('div', 'animation-pla
yback-rate-control'); | 123 var playbackRateControl = toolbarContainer.createChild('div', 'animation-pla
yback-rate-control'); |
| 124 this._playbackRateButtons = []; | 124 this._playbackRateButtons = []; |
| 125 for (var playbackRate of Animation.AnimationTimeline.GlobalPlaybackRates) { | 125 for (var playbackRate of Animation.AnimationTimeline.GlobalPlaybackRates) { |
| 126 var button = playbackRateControl.createChild('div', 'animation-playback-ra
te-button'); | 126 var button = playbackRateControl.createChild('div', 'animation-playback-ra
te-button'); |
| 127 button.textContent = playbackRate ? Common.UIString(playbackRate * 100 + '
%') : Common.UIString('Pause'); | 127 button.textContent = playbackRate ? Common.UIString(playbackRate * 100 + '
%') : Common.UIString('Pause'); |
| 128 button.playbackRate = playbackRate; | 128 button.playbackRate = playbackRate; |
| 129 button.addEventListener('click', this._setPlaybackRate.bind(this, playback
Rate)); | 129 button.addEventListener('click', this._setPlaybackRate.bind(this, playback
Rate)); |
| 130 button.title = Common.UIString('Set speed to ') + button.textContent; | 130 button.title = Common.UIString('Set speed to ') + button.textContent; |
| 131 this._playbackRateButtons.push(button); | 131 this._playbackRateButtons.push(button); |
| 132 } | 132 } |
| 133 this._updatePlaybackControls(); | 133 this._updatePlaybackControls(); |
| 134 | 134 |
| 135 this._previewContainer = this.contentElement.createChild('div', 'animation-t
imeline-buffer'); | 135 this._previewContainer = this.contentElement.createChild('div', 'animation-t
imeline-buffer'); |
| 136 this._popoverHelper = new UI.PopoverHelper(this._previewContainer, true); | 136 this._popoverHelper = new UI.PopoverHelper(this._previewContainer, true); |
| 137 this._popoverHelper.initializeCallbacks( | 137 this._popoverHelper.initializeCallbacks( |
| 138 this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._o
nHidePopover.bind(this)); | 138 this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._o
nHidePopover.bind(this)); |
| 139 this._popoverHelper.setTimeout(0); | 139 this._popoverHelper.setTimeout(0); |
| 140 var emptyBufferHint = this.contentElement.createChild('div', 'animation-time
line-buffer-hint'); | 140 var emptyBufferHint = this.contentElement.createChild('div', 'animation-time
line-buffer-hint'); |
| 141 emptyBufferHint.textContent = Common.UIString('Listening for animations...')
; | 141 emptyBufferHint.textContent = Common.UIString('Listening for animations...')
; |
| 142 var container = this.contentElement.createChild('div', 'animation-timeline-h
eader'); | 142 var container = this.contentElement.createChild('div', 'animation-timeline-h
eader'); |
| 143 var controls = container.createChild('div', 'animation-controls'); | 143 var controls = container.createChild('div', 'animation-controls'); |
| 144 this._currentTime = controls.createChild('div', 'animation-timeline-current-
time monospace'); | 144 this._currentTime = controls.createChild('div', 'animation-timeline-current-
time monospace'); |
| 145 | 145 |
| 146 var toolbar = new UI.Toolbar('animation-controls-toolbar', controls); | 146 var toolbar = new UI.Toolbar('animation-controls-toolbar', controls); |
| 147 this._controlButton = new UI.ToolbarToggle(Common.UIString('Replay timeline'
), 'largeicon-replay-animation'); | 147 this._controlButton = new UI.ToolbarToggle(Common.UIString('Replay timeline'
), 'largeicon-replay-animation'); |
| 148 this._controlState = Animation.AnimationTimeline._ControlState.Replay; | 148 this._controlState = Animation.AnimationTimeline._ControlState.Replay; |
| 149 this._controlButton.setToggled(true); | 149 this._controlButton.setToggled(true); |
| 150 this._controlButton.addEventListener('click', this._controlButtonToggle.bind
(this)); | 150 this._controlButton.addEventListener(UI.ToolbarButton.Events.Click, this._co
ntrolButtonToggle.bind(this)); |
| 151 toolbar.appendToolbarItem(this._controlButton); | 151 toolbar.appendToolbarItem(this._controlButton); |
| 152 | 152 |
| 153 var gridHeader = container.createChild('div', 'animation-grid-header'); | 153 var gridHeader = container.createChild('div', 'animation-grid-header'); |
| 154 UI.installDragHandle( | 154 UI.installDragHandle( |
| 155 gridHeader, this._repositionScrubber.bind(this), this._scrubberDragMove.
bind(this), | 155 gridHeader, this._repositionScrubber.bind(this), this._scrubberDragMove.
bind(this), |
| 156 this._scrubberDragEnd.bind(this), 'text'); | 156 this._scrubberDragEnd.bind(this), 'text'); |
| 157 container.appendChild(this._createScrubber()); | 157 container.appendChild(this._createScrubber()); |
| 158 UI.installDragHandle( | 158 UI.installDragHandle( |
| 159 this._timelineScrubberLine, this._scrubberDragStart.bind(this), this._sc
rubberDragMove.bind(this), | 159 this._timelineScrubberLine, this._scrubberDragStart.bind(this), this._sc
rubberDragMove.bind(this), |
| 160 this._scrubberDragEnd.bind(this), 'col-resize'); | 160 this._scrubberDragEnd.bind(this), 'col-resize'); |
| (...skipping 573 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 734 static parse(text) { | 734 static parse(text) { |
| 735 var match = text.match(/^steps\((\d+), (start|middle)\)$/); | 735 var match = text.match(/^steps\((\d+), (start|middle)\)$/); |
| 736 if (match) | 736 if (match) |
| 737 return new Animation.AnimationTimeline.StepTimingFunction(parseInt(match[1
], 10), match[2]); | 737 return new Animation.AnimationTimeline.StepTimingFunction(parseInt(match[1
], 10), match[2]); |
| 738 match = text.match(/^steps\((\d+)\)$/); | 738 match = text.match(/^steps\((\d+)\)$/); |
| 739 if (match) | 739 if (match) |
| 740 return new Animation.AnimationTimeline.StepTimingFunction(parseInt(match[1
], 10), 'end'); | 740 return new Animation.AnimationTimeline.StepTimingFunction(parseInt(match[1
], 10), 'end'); |
| 741 return null; | 741 return null; |
| 742 } | 742 } |
| 743 }; | 743 }; |
| OLD | NEW |