OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2013 Google Inc. All rights reserved. | 2 * Copyright (C) 2013 Google Inc. All rights reserved. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions are | 5 * modification, are permitted provided that the following conditions are |
6 * met: | 6 * met: |
7 * | 7 * |
8 * * Redistributions of source code must retain the above copyright | 8 * * Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * * Redistributions in binary form must reproduce the above | 10 * * Redistributions in binary form must reproduce the above |
(...skipping 13 matching lines...) Expand all Loading... |
24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, | 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY | 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | 28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
29 */ | 29 */ |
30 | 30 |
31 /** | 31 /** |
32 * @unrestricted | 32 * @unrestricted |
33 */ | 33 */ |
34 UI.TimelineOverviewPane = class extends UI.VBox { | 34 PerfUI.TimelineOverviewPane = class extends UI.VBox { |
35 /** | 35 /** |
36 * @param {string} prefix | 36 * @param {string} prefix |
37 */ | 37 */ |
38 constructor(prefix) { | 38 constructor(prefix) { |
39 super(); | 39 super(); |
40 this.element.id = prefix + '-overview-pane'; | 40 this.element.id = prefix + '-overview-pane'; |
41 | 41 |
42 this._overviewCalculator = new UI.TimelineOverviewCalculator(); | 42 this._overviewCalculator = new PerfUI.TimelineOverviewCalculator(); |
43 this._overviewGrid = new UI.OverviewGrid(prefix); | 43 this._overviewGrid = new PerfUI.OverviewGrid(prefix); |
44 this.element.appendChild(this._overviewGrid.element); | 44 this.element.appendChild(this._overviewGrid.element); |
45 this._cursorArea = this._overviewGrid.element.createChild('div', 'overview-g
rid-cursor-area'); | 45 this._cursorArea = this._overviewGrid.element.createChild('div', 'overview-g
rid-cursor-area'); |
46 this._cursorElement = this._overviewGrid.element.createChild('div', 'overvie
w-grid-cursor-position'); | 46 this._cursorElement = this._overviewGrid.element.createChild('div', 'overvie
w-grid-cursor-position'); |
47 this._cursorArea.addEventListener('mousemove', this._onMouseMove.bind(this),
true); | 47 this._cursorArea.addEventListener('mousemove', this._onMouseMove.bind(this),
true); |
48 this._cursorArea.addEventListener('mouseleave', this._hideCursor.bind(this),
true); | 48 this._cursorArea.addEventListener('mouseleave', this._hideCursor.bind(this),
true); |
49 | 49 |
50 this._overviewGrid.setResizeEnabled(false); | 50 this._overviewGrid.setResizeEnabled(false); |
51 this._overviewGrid.addEventListener(UI.OverviewGrid.Events.WindowChanged, th
is._onWindowChanged, this); | 51 this._overviewGrid.addEventListener(PerfUI.OverviewGrid.Events.WindowChanged
, this._onWindowChanged, this); |
52 this._overviewGrid.setClickHandler(this._onClick.bind(this)); | 52 this._overviewGrid.setClickHandler(this._onClick.bind(this)); |
53 this._overviewControls = []; | 53 this._overviewControls = []; |
54 this._markers = new Map(); | 54 this._markers = new Map(); |
55 | 55 |
56 this._popoverHelper = new UI.PopoverHelper(this._cursorArea); | 56 this._popoverHelper = new UI.PopoverHelper(this._cursorArea); |
57 this._popoverHelper.initializeCallbacks( | 57 this._popoverHelper.initializeCallbacks( |
58 this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._o
nHidePopover.bind(this)); | 58 this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._o
nHidePopover.bind(this)); |
59 this._popoverHelper.setTimeout(0); | 59 this._popoverHelper.setTimeout(0); |
60 | 60 |
61 this._updateThrottler = new Common.Throttler(100); | 61 this._updateThrottler = new Common.Throttler(100); |
(...skipping 12 matching lines...) Expand all Loading... |
74 return this._cursorArea; | 74 return this._cursorArea; |
75 } | 75 } |
76 | 76 |
77 /** | 77 /** |
78 * @param {!Element} anchor | 78 * @param {!Element} anchor |
79 * @param {!UI.Popover} popover | 79 * @param {!UI.Popover} popover |
80 */ | 80 */ |
81 _showPopover(anchor, popover) { | 81 _showPopover(anchor, popover) { |
82 this._buildPopoverContents().then(maybeShowPopover.bind(this)); | 82 this._buildPopoverContents().then(maybeShowPopover.bind(this)); |
83 /** | 83 /** |
84 * @this {UI.TimelineOverviewPane} | 84 * @this {PerfUI.TimelineOverviewPane} |
85 * @param {!DocumentFragment} fragment | 85 * @param {!DocumentFragment} fragment |
86 */ | 86 */ |
87 function maybeShowPopover(fragment) { | 87 function maybeShowPopover(fragment) { |
88 if (!fragment.firstChild) | 88 if (!fragment.firstChild) |
89 return; | 89 return; |
90 var content = new UI.TimelineOverviewPane.PopoverContents(); | 90 var content = new PerfUI.TimelineOverviewPane.PopoverContents(); |
91 this._popoverContents = content.contentElement.createChild('div'); | 91 this._popoverContents = content.contentElement.createChild('div'); |
92 this._popoverContents.appendChild(fragment); | 92 this._popoverContents.appendChild(fragment); |
93 this._popover = popover; | 93 this._popover = popover; |
94 popover.showView(content, this._cursorElement); | 94 popover.showView(content, this._cursorElement); |
95 } | 95 } |
96 } | 96 } |
97 | 97 |
98 _onHidePopover() { | 98 _onHidePopover() { |
99 this._popover = null; | 99 this._popover = null; |
100 this._popoverContents = null; | 100 this._popoverContents = null; |
101 } | 101 } |
102 | 102 |
103 /** | 103 /** |
104 * @param {!Event} event | 104 * @param {!Event} event |
105 */ | 105 */ |
106 _onMouseMove(event) { | 106 _onMouseMove(event) { |
107 if (!this._cursorEnabled) | 107 if (!this._cursorEnabled) |
108 return; | 108 return; |
109 this._cursorPosition = event.offsetX + event.target.offsetLeft; | 109 this._cursorPosition = event.offsetX + event.target.offsetLeft; |
110 this._cursorElement.style.left = this._cursorPosition + 'px'; | 110 this._cursorElement.style.left = this._cursorPosition + 'px'; |
111 this._cursorElement.style.visibility = 'visible'; | 111 this._cursorElement.style.visibility = 'visible'; |
112 if (!this._popover) | 112 if (!this._popover) |
113 return; | 113 return; |
114 this._buildPopoverContents().then(updatePopover.bind(this)); | 114 this._buildPopoverContents().then(updatePopover.bind(this)); |
115 this._popover.positionElement(this._cursorElement); | 115 this._popover.positionElement(this._cursorElement); |
116 | 116 |
117 /** | 117 /** |
118 * @param {!DocumentFragment} fragment | 118 * @param {!DocumentFragment} fragment |
119 * @this {UI.TimelineOverviewPane} | 119 * @this {PerfUI.TimelineOverviewPane} |
120 */ | 120 */ |
121 function updatePopover(fragment) { | 121 function updatePopover(fragment) { |
122 if (!this._popoverContents) | 122 if (!this._popoverContents) |
123 return; | 123 return; |
124 this._popoverContents.removeChildren(); | 124 this._popoverContents.removeChildren(); |
125 this._popoverContents.appendChild(fragment); | 125 this._popoverContents.appendChild(fragment); |
126 } | 126 } |
127 } | 127 } |
128 | 128 |
129 /** | 129 /** |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
170 */ | 170 */ |
171 onResize() { | 171 onResize() { |
172 var width = this.element.offsetWidth; | 172 var width = this.element.offsetWidth; |
173 if (width === this._lastWidth) | 173 if (width === this._lastWidth) |
174 return; | 174 return; |
175 this._lastWidth = width; | 175 this._lastWidth = width; |
176 this.scheduleUpdate(); | 176 this.scheduleUpdate(); |
177 } | 177 } |
178 | 178 |
179 /** | 179 /** |
180 * @param {!Array.<!UI.TimelineOverview>} overviewControls | 180 * @param {!Array.<!PerfUI.TimelineOverview>} overviewControls |
181 */ | 181 */ |
182 setOverviewControls(overviewControls) { | 182 setOverviewControls(overviewControls) { |
183 for (var i = 0; i < this._overviewControls.length; ++i) | 183 for (var i = 0; i < this._overviewControls.length; ++i) |
184 this._overviewControls[i].dispose(); | 184 this._overviewControls[i].dispose(); |
185 | 185 |
186 for (var i = 0; i < overviewControls.length; ++i) { | 186 for (var i = 0; i < overviewControls.length; ++i) { |
187 overviewControls[i].setCalculator(this._overviewCalculator); | 187 overviewControls[i].setCalculator(this._overviewCalculator); |
188 overviewControls[i].show(this._overviewGrid.element); | 188 overviewControls[i].show(this._overviewGrid.element); |
189 } | 189 } |
190 this._overviewControls = overviewControls; | 190 this._overviewControls = overviewControls; |
191 this._update(); | 191 this._update(); |
192 } | 192 } |
193 | 193 |
194 /** | 194 /** |
195 * @param {number} minimumBoundary | 195 * @param {number} minimumBoundary |
196 * @param {number} maximumBoundary | 196 * @param {number} maximumBoundary |
197 */ | 197 */ |
198 setBounds(minimumBoundary, maximumBoundary) { | 198 setBounds(minimumBoundary, maximumBoundary) { |
199 this._overviewCalculator.setBounds(minimumBoundary, maximumBoundary); | 199 this._overviewCalculator.setBounds(minimumBoundary, maximumBoundary); |
200 this._overviewGrid.setResizeEnabled(true); | 200 this._overviewGrid.setResizeEnabled(true); |
201 this._cursorEnabled = true; | 201 this._cursorEnabled = true; |
202 } | 202 } |
203 | 203 |
204 scheduleUpdate() { | 204 scheduleUpdate() { |
205 this._updateThrottler.schedule(process.bind(this)); | 205 this._updateThrottler.schedule(process.bind(this)); |
206 /** | 206 /** |
207 * @this {UI.TimelineOverviewPane} | 207 * @this {PerfUI.TimelineOverviewPane} |
208 * @return {!Promise.<undefined>} | 208 * @return {!Promise.<undefined>} |
209 */ | 209 */ |
210 function process() { | 210 function process() { |
211 this._update(); | 211 this._update(); |
212 return Promise.resolve(); | 212 return Promise.resolve(); |
213 } | 213 } |
214 } | 214 } |
215 | 215 |
216 _update() { | 216 _update() { |
217 if (!this.isShowing()) | 217 if (!this.isShowing()) |
(...skipping 63 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
281 _onWindowChanged(event) { | 281 _onWindowChanged(event) { |
282 if (this._muteOnWindowChanged) | 282 if (this._muteOnWindowChanged) |
283 return; | 283 return; |
284 // Always use first control as a time converter. | 284 // Always use first control as a time converter. |
285 if (!this._overviewControls.length) | 285 if (!this._overviewControls.length) |
286 return; | 286 return; |
287 var windowTimes = | 287 var windowTimes = |
288 this._overviewControls[0].windowTimes(this._overviewGrid.windowLeft(), t
his._overviewGrid.windowRight()); | 288 this._overviewControls[0].windowTimes(this._overviewGrid.windowLeft(), t
his._overviewGrid.windowRight()); |
289 this._windowStartTime = windowTimes.startTime; | 289 this._windowStartTime = windowTimes.startTime; |
290 this._windowEndTime = windowTimes.endTime; | 290 this._windowEndTime = windowTimes.endTime; |
291 this.dispatchEventToListeners(UI.TimelineOverviewPane.Events.WindowChanged,
windowTimes); | 291 this.dispatchEventToListeners(PerfUI.TimelineOverviewPane.Events.WindowChang
ed, windowTimes); |
292 } | 292 } |
293 | 293 |
294 /** | 294 /** |
295 * @param {number} startTime | 295 * @param {number} startTime |
296 * @param {number} endTime | 296 * @param {number} endTime |
297 */ | 297 */ |
298 requestWindowTimes(startTime, endTime) { | 298 requestWindowTimes(startTime, endTime) { |
299 if (startTime === this._windowStartTime && endTime === this._windowEndTime) | 299 if (startTime === this._windowStartTime && endTime === this._windowEndTime) |
300 return; | 300 return; |
301 this._windowStartTime = startTime; | 301 this._windowStartTime = startTime; |
302 this._windowEndTime = endTime; | 302 this._windowEndTime = endTime; |
303 this._updateWindow(); | 303 this._updateWindow(); |
304 this.dispatchEventToListeners( | 304 this.dispatchEventToListeners( |
305 UI.TimelineOverviewPane.Events.WindowChanged, {startTime: startTime, end
Time: endTime}); | 305 PerfUI.TimelineOverviewPane.Events.WindowChanged, {startTime: startTime,
endTime: endTime}); |
306 } | 306 } |
307 | 307 |
308 _updateWindow() { | 308 _updateWindow() { |
309 if (!this._overviewControls.length) | 309 if (!this._overviewControls.length) |
310 return; | 310 return; |
311 var windowBoundaries = this._overviewControls[0].windowBoundaries(this._wind
owStartTime, this._windowEndTime); | 311 var windowBoundaries = this._overviewControls[0].windowBoundaries(this._wind
owStartTime, this._windowEndTime); |
312 this._muteOnWindowChanged = true; | 312 this._muteOnWindowChanged = true; |
313 this._overviewGrid.setWindow(windowBoundaries.left, windowBoundaries.right); | 313 this._overviewGrid.setWindow(windowBoundaries.left, windowBoundaries.right); |
314 this._muteOnWindowChanged = false; | 314 this._muteOnWindowChanged = false; |
315 } | 315 } |
316 }; | 316 }; |
317 | 317 |
318 /** @enum {symbol} */ | 318 /** @enum {symbol} */ |
319 UI.TimelineOverviewPane.Events = { | 319 PerfUI.TimelineOverviewPane.Events = { |
320 WindowChanged: Symbol('WindowChanged') | 320 WindowChanged: Symbol('WindowChanged') |
321 }; | 321 }; |
322 | 322 |
323 /** | 323 /** |
324 * @unrestricted | 324 * @unrestricted |
325 */ | 325 */ |
326 UI.TimelineOverviewPane.PopoverContents = class extends UI.VBox { | 326 PerfUI.TimelineOverviewPane.PopoverContents = class extends UI.VBox { |
327 constructor() { | 327 constructor() { |
328 super(true); | 328 super(true); |
329 this.contentElement.classList.add('timeline-overview-popover'); | 329 this.contentElement.classList.add('timeline-overview-popover'); |
330 } | 330 } |
331 }; | 331 }; |
332 | 332 |
333 /** | 333 /** |
334 * @implements {UI.TimelineGrid.Calculator} | 334 * @implements {PerfUI.TimelineGrid.Calculator} |
335 * @unrestricted | 335 * @unrestricted |
336 */ | 336 */ |
337 UI.TimelineOverviewCalculator = class { | 337 PerfUI.TimelineOverviewCalculator = class { |
338 constructor() { | 338 constructor() { |
339 this.reset(); | 339 this.reset(); |
340 } | 340 } |
341 | 341 |
342 /** | 342 /** |
343 * @override | 343 * @override |
344 * @return {number} | 344 * @return {number} |
345 */ | 345 */ |
346 paddingLeft() { | 346 paddingLeft() { |
347 return this._paddingLeft; | 347 return this._paddingLeft; |
(...skipping 77 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
425 * @return {number} | 425 * @return {number} |
426 */ | 426 */ |
427 boundarySpan() { | 427 boundarySpan() { |
428 return this._maximumBoundary - this._minimumBoundary; | 428 return this._maximumBoundary - this._minimumBoundary; |
429 } | 429 } |
430 }; | 430 }; |
431 | 431 |
432 /** | 432 /** |
433 * @interface | 433 * @interface |
434 */ | 434 */ |
435 UI.TimelineOverview = function() {}; | 435 PerfUI.TimelineOverview = function() {}; |
436 | 436 |
437 UI.TimelineOverview.prototype = { | 437 PerfUI.TimelineOverview.prototype = { |
438 /** | 438 /** |
439 * @param {!Element} parentElement | 439 * @param {!Element} parentElement |
440 * @param {?Element=} insertBefore | 440 * @param {?Element=} insertBefore |
441 */ | 441 */ |
442 show(parentElement, insertBefore) {}, | 442 show(parentElement, insertBefore) {}, |
443 | 443 |
444 update() {}, | 444 update() {}, |
445 | 445 |
446 dispose() {}, | 446 dispose() {}, |
447 | 447 |
(...skipping 24 matching lines...) Expand all Loading... |
472 * @return {!{left: number, right: number}} | 472 * @return {!{left: number, right: number}} |
473 */ | 473 */ |
474 windowBoundaries(startTime, endTime) {}, | 474 windowBoundaries(startTime, endTime) {}, |
475 | 475 |
476 timelineStarted() {}, | 476 timelineStarted() {}, |
477 | 477 |
478 timelineStopped() {}, | 478 timelineStopped() {}, |
479 }; | 479 }; |
480 | 480 |
481 /** | 481 /** |
482 * @implements {UI.TimelineOverview} | 482 * @implements {PerfUI.TimelineOverview} |
483 * @unrestricted | 483 * @unrestricted |
484 */ | 484 */ |
485 UI.TimelineOverviewBase = class extends UI.VBox { | 485 PerfUI.TimelineOverviewBase = class extends UI.VBox { |
486 constructor() { | 486 constructor() { |
487 super(); | 487 super(); |
488 /** @type {?UI.TimelineOverviewCalculator} */ | 488 /** @type {?PerfUI.TimelineOverviewCalculator} */ |
489 this._calculator = null; | 489 this._calculator = null; |
490 this._canvas = this.element.createChild('canvas', 'fill'); | 490 this._canvas = this.element.createChild('canvas', 'fill'); |
491 this._context = this._canvas.getContext('2d'); | 491 this._context = this._canvas.getContext('2d'); |
492 } | 492 } |
493 | 493 |
494 /** @return {number} */ | 494 /** @return {number} */ |
495 width() { | 495 width() { |
496 return this._canvas.width; | 496 return this._canvas.width; |
497 } | 497 } |
498 | 498 |
499 /** @return {number} */ | 499 /** @return {number} */ |
500 height() { | 500 height() { |
501 return this._canvas.height; | 501 return this._canvas.height; |
502 } | 502 } |
503 | 503 |
504 /** @return {!CanvasRenderingContext2D} */ | 504 /** @return {!CanvasRenderingContext2D} */ |
505 context() { | 505 context() { |
506 return this._context; | 506 return this._context; |
507 } | 507 } |
508 | 508 |
509 /** | 509 /** |
510 * @protected | 510 * @protected |
511 * @return {?UI.TimelineOverviewCalculator} | 511 * @return {?PerfUI.TimelineOverviewCalculator} |
512 */ | 512 */ |
513 calculator() { | 513 calculator() { |
514 return this._calculator; | 514 return this._calculator; |
515 } | 515 } |
516 | 516 |
517 /** | 517 /** |
518 * @override | 518 * @override |
519 */ | 519 */ |
520 update() { | 520 update() { |
521 this.resetCanvas(); | 521 this.resetCanvas(); |
(...skipping 27 matching lines...) Expand all Loading... |
549 timelineStarted() { | 549 timelineStarted() { |
550 } | 550 } |
551 | 551 |
552 /** | 552 /** |
553 * @override | 553 * @override |
554 */ | 554 */ |
555 timelineStopped() { | 555 timelineStopped() { |
556 } | 556 } |
557 | 557 |
558 /** | 558 /** |
559 * @param {!UI.TimelineOverviewCalculator} calculator | 559 * @param {!PerfUI.TimelineOverviewCalculator} calculator |
560 */ | 560 */ |
561 setCalculator(calculator) { | 561 setCalculator(calculator) { |
562 this._calculator = calculator; | 562 this._calculator = calculator; |
563 } | 563 } |
564 | 564 |
565 /** | 565 /** |
566 * @override | 566 * @override |
567 * @param {!Event} event | 567 * @param {!Event} event |
568 * @return {boolean} | 568 * @return {boolean} |
569 */ | 569 */ |
(...skipping 27 matching lines...) Expand all Loading... |
597 left: haveRecords && startTime ? Math.min((startTime - absoluteMin) / time
Span, 1) : 0, | 597 left: haveRecords && startTime ? Math.min((startTime - absoluteMin) / time
Span, 1) : 0, |
598 right: haveRecords && endTime < Infinity ? (endTime - absoluteMin) / timeS
pan : 1 | 598 right: haveRecords && endTime < Infinity ? (endTime - absoluteMin) / timeS
pan : 1 |
599 }; | 599 }; |
600 } | 600 } |
601 | 601 |
602 resetCanvas() { | 602 resetCanvas() { |
603 this._canvas.width = this.element.clientWidth * window.devicePixelRatio; | 603 this._canvas.width = this.element.clientWidth * window.devicePixelRatio; |
604 this._canvas.height = this.element.clientHeight * window.devicePixelRatio; | 604 this._canvas.height = this.element.clientHeight * window.devicePixelRatio; |
605 } | 605 } |
606 }; | 606 }; |
OLD | NEW |