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 /** | 5 /** |
6 * @constructor | 6 * @constructor |
7 * @extends {WebInspector.VBox} | 7 * @extends {WebInspector.VBox} |
8 */ | 8 */ |
9 WebInspector.AnimationTimeline = function() | 9 WebInspector.AnimationTimeline = function() |
10 { | 10 { |
(...skipping 14 matching lines...) Expand all Loading... | |
25 this._duration = this._defaultDuration(); | 25 this._duration = this._defaultDuration(); |
26 this._scrubberRadius = 25; | 26 this._scrubberRadius = 25; |
27 this._timelineControlsWidth = 200; | 27 this._timelineControlsWidth = 200; |
28 /** @type {!Map.<!DOMAgent.BackendNodeId, !WebInspector.AnimationTimeline.No deUI>} */ | 28 /** @type {!Map.<!DOMAgent.BackendNodeId, !WebInspector.AnimationTimeline.No deUI>} */ |
29 this._nodesMap = new Map(); | 29 this._nodesMap = new Map(); |
30 this._symbol = Symbol("animationTimeline"); | 30 this._symbol = Symbol("animationTimeline"); |
31 /** @type {!Map.<string, !WebInspector.AnimationModel.AnimationPlayer>} */ | 31 /** @type {!Map.<string, !WebInspector.AnimationModel.AnimationPlayer>} */ |
32 this._animationsMap = new Map(); | 32 this._animationsMap = new Map(); |
33 WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.MainFrameNavigated, this._mainFrameNav igated, this); | 33 WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.MainFrameNavigated, this._mainFrameNav igated, this); |
34 WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspec tor.DOMModel.Events.NodeRemoved, this._nodeRemoved, this); | 34 WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspec tor.DOMModel.Events.NodeRemoved, this._nodeRemoved, this); |
35 WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.FrameAdded, this._frameAdded, this); | |
35 } | 36 } |
36 | 37 |
37 WebInspector.AnimationTimeline.prototype = { | 38 WebInspector.AnimationTimeline.prototype = { |
38 _createHeader: function() | 39 _createHeader: function() |
39 { | 40 { |
40 /** | 41 /** |
41 * @param {!Event} event | 42 * @param {!Event} event |
42 * @this {WebInspector.AnimationTimeline} | 43 * @this {WebInspector.AnimationTimeline} |
43 */ | 44 */ |
44 function playbackSliderInputHandler(event) | 45 function playbackSliderInputHandler(event) |
45 { | 46 { |
46 this._animationsPlaybackRate = WebInspector.AnimationsSidebarPane.Gl obalPlaybackRates[event.target.value]; | 47 this._animationsPlaybackRate = WebInspector.AnimationsSidebarPane.Gl obalPlaybackRates[event.target.value]; |
47 var target = WebInspector.targetManager.mainTarget(); | 48 var target = WebInspector.targetManager.mainTarget(); |
48 if (target) | 49 if (target) |
49 target.animationAgent().setPlaybackRate(this._animationsPlayback Rate); | 50 target.animationModel.setPlaybackRate(this._animationsPlaybackRa te, this._startTimesUpdated.bind(this)); |
50 this._playbackLabel.textContent = this._animationsPlaybackRate + "x" ; | 51 this._playbackLabel.textContent = this._animationsPlaybackRate + "x" ; |
51 WebInspector.userMetrics.AnimationsPlaybackRateChanged.record(); | 52 WebInspector.userMetrics.AnimationsPlaybackRateChanged.record(); |
52 if (this._scrubberPlayer) | 53 if (this._scrubberPlayer) |
53 this._scrubberPlayer.playbackRate = this._animationsPlaybackRate ; | 54 this._scrubberPlayer.playbackRate = this._animationsPlaybackRate ; |
54 } | 55 } |
55 | 56 |
56 var container = createElementWithClass("div", "animation-timeline-header "); | 57 var container = createElementWithClass("div", "animation-timeline-header "); |
57 var controls = container.createChild("div", "animation-controls"); | 58 var controls = container.createChild("div", "animation-controls"); |
58 container.createChild("div", "animation-timeline-markers"); | 59 container.createChild("div", "animation-timeline-markers"); |
59 | 60 |
(...skipping 16 matching lines...) Expand all Loading... | |
76 this._playbackSlider.type = "range"; | 77 this._playbackSlider.type = "range"; |
77 this._playbackSlider.min = 0; | 78 this._playbackSlider.min = 0; |
78 this._playbackSlider.max = WebInspector.AnimationsSidebarPane.GlobalPlay backRates.length - 1; | 79 this._playbackSlider.max = WebInspector.AnimationsSidebarPane.GlobalPlay backRates.length - 1; |
79 this._playbackSlider.value = this._playbackSlider.max; | 80 this._playbackSlider.value = this._playbackSlider.max; |
80 this._playbackSlider.addEventListener("input", playbackSliderInputHandle r.bind(this)); | 81 this._playbackSlider.addEventListener("input", playbackSliderInputHandle r.bind(this)); |
81 this._updateAnimationsPlaybackRate(); | 82 this._updateAnimationsPlaybackRate(); |
82 | 83 |
83 return container; | 84 return container; |
84 }, | 85 }, |
85 | 86 |
87 /** | |
88 * @param {?Array.<!AnimationAgent.AnimationStartTime>} startTimes | |
89 */ | |
90 _startTimesUpdated: function(startTimes) | |
91 { | |
92 if (!startTimes || !startTimes.length) | |
pfeldman
2015/04/02 14:42:38
Why is it nullable?
samli
2015/04/02 20:13:19
In the case of protocol error it's called with nul
| |
93 return; | |
94 | |
95 // Update timeline start time from new monotonic time values | |
96 delete this._startTime; | |
97 for (var player of startTimes) { | |
98 if (!this._startTime || player.startTime < this._startTime) | |
99 this._startTime = player.startTime; | |
pfeldman
2015/04/02 14:42:38
I don't understand how multiple players within mul
samli
2015/04/02 20:13:19
All animation players have times calculated based
| |
100 } | |
101 }, | |
102 | |
86 _updateAnimationsPlaybackRate: function() | 103 _updateAnimationsPlaybackRate: function() |
87 { | 104 { |
88 /** | 105 /** |
89 * @param {?Protocol.Error} error | 106 * @param {?Protocol.Error} error |
90 * @param {number} playbackRate | 107 * @param {number} playbackRate |
91 * @this {WebInspector.AnimationTimeline} | 108 * @this {WebInspector.AnimationTimeline} |
92 */ | 109 */ |
93 function setPlaybackRate(error, playbackRate) | 110 function setPlaybackRate(error, playbackRate) |
94 { | 111 { |
95 this._animationsPlaybackRate = playbackRate; | 112 this._animationsPlaybackRate = playbackRate; |
96 this._playbackSlider.value = WebInspector.AnimationsSidebarPane.Glob alPlaybackRates.indexOf(playbackRate); | 113 this._playbackSlider.value = WebInspector.AnimationsSidebarPane.Glob alPlaybackRates.indexOf(playbackRate); |
97 this._playbackLabel.textContent = playbackRate + "x"; | 114 this._playbackLabel.textContent = playbackRate + "x"; |
98 } | 115 } |
99 | 116 |
100 var target = WebInspector.targetManager.mainTarget(); | 117 var target = WebInspector.targetManager.mainTarget(); |
101 if (target) | 118 if (target) |
102 target.animationAgent().getPlaybackRate(setPlaybackRate.bind(this)); | 119 target.animationAgent().getPlaybackRate(setPlaybackRate.bind(this)); |
103 }, | 120 }, |
104 | 121 |
105 _replay: function() | 122 _replay: function() |
106 { | 123 { |
107 if (this.startTime() === undefined) | 124 if (this.startTime() === undefined) |
108 return; | 125 return; |
109 var targets = WebInspector.targetManager.targets(); | 126 var target = WebInspector.targetManager.mainTarget(); |
110 for (var target of targets) | 127 if (target) |
111 target.animationAgent().setCurrentTime(/** @type {number} */(this.st artTime())); | 128 target.animationModel.setCurrentTime(/** @type {number} */(this.star tTime()), this._startTimesUpdated.bind(this)); |
112 this._animateTime(0); | 129 this._animateTime(0); |
113 }, | 130 }, |
114 | 131 |
115 /** | 132 /** |
116 * @return {number} | 133 * @return {number} |
117 */ | 134 */ |
118 _defaultDuration: function () | 135 _defaultDuration: function () |
119 { | 136 { |
120 return 300; | 137 return 300; |
121 }, | 138 }, |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
164 { | 181 { |
165 this._reset(); | 182 this._reset(); |
166 this._updateAnimationsPlaybackRate(); | 183 this._updateAnimationsPlaybackRate(); |
167 if (this._scrubberPlayer) | 184 if (this._scrubberPlayer) |
168 this._scrubberPlayer.cancel(); | 185 this._scrubberPlayer.cancel(); |
169 delete this._scrubberPlayer; | 186 delete this._scrubberPlayer; |
170 this._timelineScrubberHead.textContent = WebInspector.UIString(Number.mi llisToString(0)); | 187 this._timelineScrubberHead.textContent = WebInspector.UIString(Number.mi llisToString(0)); |
171 }, | 188 }, |
172 | 189 |
173 /** | 190 /** |
191 * @param {!WebInspector.Event} event | |
192 */ | |
193 _frameAdded: function(event) | |
194 { | |
195 var target = WebInspector.targetManager.mainTarget(); | |
196 if (target && this._animationsPlaybackRate) | |
197 target.animationModel.setPlaybackRate(this._animationsPlaybackRate, this._startTimesUpdated.bind(this)); | |
198 }, | |
199 | |
200 /** | |
174 * @param {!WebInspector.AnimationModel.AnimationPlayer} animation | 201 * @param {!WebInspector.AnimationModel.AnimationPlayer} animation |
175 * @param {boolean} resetTimeline | 202 * @param {boolean} resetTimeline |
176 */ | 203 */ |
177 addAnimation: function(animation, resetTimeline) | 204 addAnimation: function(animation, resetTimeline) |
178 { | 205 { |
179 /** | 206 /** |
180 * @param {?WebInspector.DOMNode} node | 207 * @param {?WebInspector.DOMNode} node |
181 * @this {WebInspector.AnimationTimeline} | 208 * @this {WebInspector.AnimationTimeline} |
182 */ | 209 */ |
183 function nodeResolved(node) | 210 function nodeResolved(node) |
(...skipping 172 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
356 */ | 383 */ |
357 _scrubberDragStart: function(event) | 384 _scrubberDragStart: function(event) |
358 { | 385 { |
359 if (!this._scrubberPlayer) | 386 if (!this._scrubberPlayer) |
360 return false; | 387 return false; |
361 | 388 |
362 this._originalScrubberTime = this._scrubberPlayer.currentTime; | 389 this._originalScrubberTime = this._scrubberPlayer.currentTime; |
363 this._timelineScrubber.classList.remove("animation-timeline-end"); | 390 this._timelineScrubber.classList.remove("animation-timeline-end"); |
364 this._scrubberPlayer.pause(); | 391 this._scrubberPlayer.pause(); |
365 this._originalMousePosition = new WebInspector.Geometry.Point(event.x, e vent.y); | 392 this._originalMousePosition = new WebInspector.Geometry.Point(event.x, e vent.y); |
393 this._lastCurrentTime = this._scrubberPlayer.currentTime; | |
366 | 394 |
367 var target = WebInspector.targetManager.mainTarget(); | 395 var target = WebInspector.targetManager.mainTarget(); |
368 if (target) | 396 if (target) { |
369 target.animationAgent().setPlaybackRate(0); | 397 target.animationModel.setCurrentTime(/** @type {number} */(this.star tTime()), this._startTimesUpdated.bind(this)); |
398 target.animationModel.setPlaybackRate(0, this._startTimesUpdated.bin d(this)); | |
399 target.animationAgent().seekTimeline(this._scrubberPlayer.currentTim e); | |
400 } | |
370 return true; | 401 return true; |
371 }, | 402 }, |
372 | 403 |
373 /** | 404 /** |
374 * @param {!Event} event | 405 * @param {!Event} event |
375 */ | 406 */ |
376 _scrubberDragMove: function(event) | 407 _scrubberDragMove: function(event) |
377 { | 408 { |
378 var delta = event.x - this._originalMousePosition.x; | 409 var delta = event.x - this._originalMousePosition.x; |
379 this._scrubberPlayer.currentTime = Math.min(this._originalScrubberTime + delta / this.pixelMsRatio(), this.duration() - this._scrubberRadius / this.pixe lMsRatio()); | 410 this._scrubberPlayer.currentTime = Math.min(this._originalScrubberTime + delta / this.pixelMsRatio(), this.duration() - this._scrubberRadius / this.pixe lMsRatio()); |
380 var currentTime = Math.max(0, Math.round(this._scrubberPlayer.currentTim e)); | 411 var currentTime = Math.max(0, Math.round(this._scrubberPlayer.currentTim e)); |
381 this._timelineScrubberHead.textContent = WebInspector.UIString(Number.mi llisToString(currentTime)); | 412 this._timelineScrubberHead.textContent = WebInspector.UIString(Number.mi llisToString(currentTime)); |
382 var targets = WebInspector.targetManager.targets(); | 413 var target = WebInspector.targetManager.mainTarget(); |
383 for (var target of targets) | 414 if (target) |
384 target.animationAgent().setCurrentTime(/** @type {number} */(this.st artTime() + currentTime)); | 415 target.animationAgent().seekTimeline(this._scrubberPlayer.currentTim e - this._lastCurrentTime); |
416 this._lastCurrentTime = this._scrubberPlayer.currentTime; | |
385 }, | 417 }, |
386 | 418 |
387 /** | 419 /** |
388 * @param {!Event} event | 420 * @param {!Event} event |
389 */ | 421 */ |
390 _scrubberDragEnd: function(event) | 422 _scrubberDragEnd: function(event) |
391 { | 423 { |
392 if (this._scrubberPlayer.currentTime < this.duration() - this._scrubberR adius / this.pixelMsRatio()) | 424 if (this._scrubberPlayer.currentTime < this.duration() - this._scrubberR adius / this.pixelMsRatio()) |
393 this._scrubberPlayer.play(); | 425 this._scrubberPlayer.play(); |
394 this._timelineScrubberHead.window().requestAnimationFrame(this._updateSc rubber.bind(this)); | 426 this._timelineScrubberHead.window().requestAnimationFrame(this._updateSc rubber.bind(this)); |
395 var target = WebInspector.targetManager.mainTarget(); | 427 var target = WebInspector.targetManager.mainTarget(); |
396 if (target) | 428 if (target) { |
397 target.animationAgent().setPlaybackRate(this._animationsPlaybackRate ); | 429 target.animationAgent().seekTimeline(this._lastCurrentTime - this._s crubberPlayer.currentTime); |
430 target.animationModel.setPlaybackRate(this._animationsPlaybackRate, this._startTimesUpdated.bind(this)); | |
431 } | |
398 }, | 432 }, |
399 | 433 |
400 __proto__: WebInspector.VBox.prototype | 434 __proto__: WebInspector.VBox.prototype |
401 } | 435 } |
402 | 436 |
403 /** | 437 /** |
404 * @constructor | 438 * @constructor |
405 * @param {!WebInspector.AnimationModel.AnimationNode} animationNode | 439 * @param {!WebInspector.AnimationModel.AnimationNode} animationNode |
406 */ | 440 */ |
407 WebInspector.AnimationTimeline.NodeUI = function(animationNode) { | 441 WebInspector.AnimationTimeline.NodeUI = function(animationNode) { |
(...skipping 488 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
896 "Light Blue": WebInspector.Color.parse("#03A9F4"), | 930 "Light Blue": WebInspector.Color.parse("#03A9F4"), |
897 "Deep Orange": WebInspector.Color.parse("#FF5722"), | 931 "Deep Orange": WebInspector.Color.parse("#FF5722"), |
898 "Blue": WebInspector.Color.parse("#5677FC"), | 932 "Blue": WebInspector.Color.parse("#5677FC"), |
899 "Lime": WebInspector.Color.parse("#CDDC39"), | 933 "Lime": WebInspector.Color.parse("#CDDC39"), |
900 "Blue Grey": WebInspector.Color.parse("#607D8B"), | 934 "Blue Grey": WebInspector.Color.parse("#607D8B"), |
901 "Pink": WebInspector.Color.parse("#E91E63"), | 935 "Pink": WebInspector.Color.parse("#E91E63"), |
902 "Green": WebInspector.Color.parse("#0F9D58"), | 936 "Green": WebInspector.Color.parse("#0F9D58"), |
903 "Brown": WebInspector.Color.parse("#795548"), | 937 "Brown": WebInspector.Color.parse("#795548"), |
904 "Cyan": WebInspector.Color.parse("#00BCD4") | 938 "Cyan": WebInspector.Color.parse("#00BCD4") |
905 } | 939 } |
OLD | NEW |