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(UI.ToolbarButton.Events.Click, this._reset.bind
(this)); | 115 clearButton.addEventListener('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(UI.ToolbarButton.Events.Click, this._togg
lePauseAll.bind(this)); | 120 this._pauseButton.addEventListener('click', this._togglePauseAll.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(UI.ToolbarButton.Events.Click, this._co
ntrolButtonToggle.bind(this)); | 150 this._controlButton.addEventListener('click', this._controlButtonToggle.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 |