Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(404)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/perf_ui/TimelineOverviewPane.js

Issue 2623743002: DevTools: extract modules (non-extensions) (Closed)
Patch Set: rebaseline Created 3 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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
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
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
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
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
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 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698