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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/profiler/CPUProfileFlameChart.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) 2014 Google Inc. All rights reserved. 2 * Copyright (C) 2014 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 11 matching lines...) Expand all
22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
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 * @implements {UI.FlameChartDataProvider} 32 * @implements {PerfUI.FlameChartDataProvider}
33 * @unrestricted 33 * @unrestricted
34 */ 34 */
35 Profiler.ProfileFlameChartDataProvider = class { 35 Profiler.ProfileFlameChartDataProvider = class {
36 constructor() { 36 constructor() {
37 UI.FlameChartDataProvider.call(this); 37 PerfUI.FlameChartDataProvider.call(this);
38 this._colorGenerator = Profiler.ProfileFlameChartDataProvider.colorGenerator (); 38 this._colorGenerator = Profiler.ProfileFlameChartDataProvider.colorGenerator ();
39 } 39 }
40 40
41 /** 41 /**
42 * @return {!UI.FlameChart.ColorGenerator} 42 * @return {!PerfUI.FlameChart.ColorGenerator}
43 */ 43 */
44 static colorGenerator() { 44 static colorGenerator() {
45 if (!Profiler.ProfileFlameChartDataProvider._colorGenerator) { 45 if (!Profiler.ProfileFlameChartDataProvider._colorGenerator) {
46 var colorGenerator = new UI.FlameChart.ColorGenerator( 46 var colorGenerator = new PerfUI.FlameChart.ColorGenerator(
47 {min: 30, max: 330}, {min: 50, max: 80, count: 5}, {min: 80, max: 90, count: 3}); 47 {min: 30, max: 330}, {min: 50, max: 80, count: 5}, {min: 80, max: 90, count: 3});
48 48
49 colorGenerator.setColorForID('(idle)', 'hsl(0, 0%, 94%)'); 49 colorGenerator.setColorForID('(idle)', 'hsl(0, 0%, 94%)');
50 colorGenerator.setColorForID('(program)', 'hsl(0, 0%, 80%)'); 50 colorGenerator.setColorForID('(program)', 'hsl(0, 0%, 80%)');
51 colorGenerator.setColorForID('(garbage collector)', 'hsl(0, 0%, 80%)'); 51 colorGenerator.setColorForID('(garbage collector)', 'hsl(0, 0%, 80%)');
52 Profiler.ProfileFlameChartDataProvider._colorGenerator = colorGenerator; 52 Profiler.ProfileFlameChartDataProvider._colorGenerator = colorGenerator;
53 } 53 }
54 return Profiler.ProfileFlameChartDataProvider._colorGenerator; 54 return Profiler.ProfileFlameChartDataProvider._colorGenerator;
55 } 55 }
56 56
(...skipping 26 matching lines...) Expand all
83 /** 83 /**
84 * @override 84 * @override
85 * @return {number} 85 * @return {number}
86 */ 86 */
87 maxStackDepth() { 87 maxStackDepth() {
88 return this._maxStackDepth; 88 return this._maxStackDepth;
89 } 89 }
90 90
91 /** 91 /**
92 * @override 92 * @override
93 * @return {?UI.FlameChart.TimelineData} 93 * @return {?PerfUI.FlameChart.TimelineData}
94 */ 94 */
95 timelineData() { 95 timelineData() {
96 return this._timelineData || this._calculateTimelineData(); 96 return this._timelineData || this._calculateTimelineData();
97 } 97 }
98 98
99 /** 99 /**
100 * @return {!UI.FlameChart.TimelineData} 100 * @return {!PerfUI.FlameChart.TimelineData}
101 */ 101 */
102 _calculateTimelineData() { 102 _calculateTimelineData() {
103 throw 'Not implemented.'; 103 throw 'Not implemented.';
104 } 104 }
105 105
106 /** 106 /**
107 * @override 107 * @override
108 * @param {number} entryIndex 108 * @param {number} entryIndex
109 * @return {?Element} 109 * @return {?Element}
110 */ 110 */
(...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after
192 }; 192 };
193 193
194 194
195 /** 195 /**
196 * @implements {UI.Searchable} 196 * @implements {UI.Searchable}
197 * @unrestricted 197 * @unrestricted
198 */ 198 */
199 Profiler.CPUProfileFlameChart = class extends UI.VBox { 199 Profiler.CPUProfileFlameChart = class extends UI.VBox {
200 /** 200 /**
201 * @param {!UI.SearchableView} searchableView 201 * @param {!UI.SearchableView} searchableView
202 * @param {!UI.FlameChartDataProvider} dataProvider 202 * @param {!PerfUI.FlameChartDataProvider} dataProvider
203 */ 203 */
204 constructor(searchableView, dataProvider) { 204 constructor(searchableView, dataProvider) {
205 super(); 205 super();
206 this.element.id = 'cpu-flame-chart'; 206 this.element.id = 'cpu-flame-chart';
207 207
208 this._searchableView = searchableView; 208 this._searchableView = searchableView;
209 this._overviewPane = new Profiler.CPUProfileFlameChart.OverviewPane(dataProv ider); 209 this._overviewPane = new Profiler.CPUProfileFlameChart.OverviewPane(dataProv ider);
210 this._overviewPane.show(this.element); 210 this._overviewPane.show(this.element);
211 211
212 this._mainPane = new UI.FlameChart(dataProvider, this._overviewPane); 212 this._mainPane = new PerfUI.FlameChart(dataProvider, this._overviewPane);
213 this._mainPane.setBarHeight(15); 213 this._mainPane.setBarHeight(15);
214 this._mainPane.setTextBaseline(4); 214 this._mainPane.setTextBaseline(4);
215 this._mainPane.setTextPadding(2); 215 this._mainPane.setTextPadding(2);
216 this._mainPane.show(this.element); 216 this._mainPane.show(this.element);
217 this._mainPane.addEventListener(UI.FlameChart.Events.EntrySelected, this._on EntrySelected, this); 217 this._mainPane.addEventListener(PerfUI.FlameChart.Events.EntrySelected, this ._onEntrySelected, this);
218 this._overviewPane.addEventListener(UI.OverviewGrid.Events.WindowChanged, th is._onWindowChanged, this); 218 this._overviewPane.addEventListener(PerfUI.OverviewGrid.Events.WindowChanged , this._onWindowChanged, this);
219 this._dataProvider = dataProvider; 219 this._dataProvider = dataProvider;
220 this._searchResults = []; 220 this._searchResults = [];
221 } 221 }
222 222
223 /** 223 /**
224 * @override 224 * @override
225 */ 225 */
226 focus() { 226 focus() {
227 this._mainPane.focus(); 227 this._mainPane.focus();
228 } 228 }
(...skipping 12 matching lines...) Expand all
241 * @param {number} timeRight 241 * @param {number} timeRight
242 */ 242 */
243 selectRange(timeLeft, timeRight) { 243 selectRange(timeLeft, timeRight) {
244 this._overviewPane._selectRange(timeLeft, timeRight); 244 this._overviewPane._selectRange(timeLeft, timeRight);
245 } 245 }
246 246
247 /** 247 /**
248 * @param {!Common.Event} event 248 * @param {!Common.Event} event
249 */ 249 */
250 _onEntrySelected(event) { 250 _onEntrySelected(event) {
251 this.dispatchEventToListeners(UI.FlameChart.Events.EntrySelected, event.data ); 251 this.dispatchEventToListeners(PerfUI.FlameChart.Events.EntrySelected, event. data);
252 } 252 }
253 253
254 update() { 254 update() {
255 this._overviewPane.update(); 255 this._overviewPane.update();
256 this._mainPane.update(); 256 this._mainPane.update();
257 } 257 }
258 258
259 /** 259 /**
260 * @override 260 * @override
261 * @param {!UI.SearchableView.SearchConfig} searchConfig 261 * @param {!UI.SearchableView.SearchConfig} searchConfig
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after
323 /** 323 /**
324 * @override 324 * @override
325 * @return {boolean} 325 * @return {boolean}
326 */ 326 */
327 supportsRegexSearch() { 327 supportsRegexSearch() {
328 return false; 328 return false;
329 } 329 }
330 }; 330 };
331 331
332 /** 332 /**
333 * @implements {UI.TimelineGrid.Calculator} 333 * @implements {PerfUI.TimelineGrid.Calculator}
334 * @unrestricted 334 * @unrestricted
335 */ 335 */
336 Profiler.CPUProfileFlameChart.OverviewCalculator = class { 336 Profiler.CPUProfileFlameChart.OverviewCalculator = class {
337 constructor(dataProvider) { 337 constructor(dataProvider) {
338 this._dataProvider = dataProvider; 338 this._dataProvider = dataProvider;
339 } 339 }
340 340
341 /** 341 /**
342 * @override 342 * @override
343 * @return {number} 343 * @return {number}
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after
402 /** 402 /**
403 * @override 403 * @override
404 * @return {number} 404 * @return {number}
405 */ 405 */
406 boundarySpan() { 406 boundarySpan() {
407 return this._maximumBoundaries - this._minimumBoundaries; 407 return this._maximumBoundaries - this._minimumBoundaries;
408 } 408 }
409 }; 409 };
410 410
411 /** 411 /**
412 * @implements {UI.FlameChartDelegate} 412 * @implements {PerfUI.FlameChartDelegate}
413 * @unrestricted 413 * @unrestricted
414 */ 414 */
415 Profiler.CPUProfileFlameChart.OverviewPane = class extends UI.VBox { 415 Profiler.CPUProfileFlameChart.OverviewPane = class extends UI.VBox {
416 /** 416 /**
417 * @param {!UI.FlameChartDataProvider} dataProvider 417 * @param {!PerfUI.FlameChartDataProvider} dataProvider
418 */ 418 */
419 constructor(dataProvider) { 419 constructor(dataProvider) {
420 super(); 420 super();
421 this.element.classList.add('cpu-profile-flame-chart-overview-pane'); 421 this.element.classList.add('cpu-profile-flame-chart-overview-pane');
422 this._overviewContainer = this.element.createChild('div', 'cpu-profile-flame -chart-overview-container'); 422 this._overviewContainer = this.element.createChild('div', 'cpu-profile-flame -chart-overview-container');
423 this._overviewGrid = new UI.OverviewGrid('cpu-profile-flame-chart'); 423 this._overviewGrid = new PerfUI.OverviewGrid('cpu-profile-flame-chart');
424 this._overviewGrid.element.classList.add('fill'); 424 this._overviewGrid.element.classList.add('fill');
425 this._overviewCanvas = this._overviewContainer.createChild('canvas', 'cpu-pr ofile-flame-chart-overview-canvas'); 425 this._overviewCanvas = this._overviewContainer.createChild('canvas', 'cpu-pr ofile-flame-chart-overview-canvas');
426 this._overviewContainer.appendChild(this._overviewGrid.element); 426 this._overviewContainer.appendChild(this._overviewGrid.element);
427 this._overviewCalculator = new Profiler.CPUProfileFlameChart.OverviewCalcula tor(dataProvider); 427 this._overviewCalculator = new Profiler.CPUProfileFlameChart.OverviewCalcula tor(dataProvider);
428 this._dataProvider = dataProvider; 428 this._dataProvider = dataProvider;
429 this._overviewGrid.addEventListener(UI.OverviewGrid.Events.WindowChanged, th is._onWindowChanged, this); 429 this._overviewGrid.addEventListener(PerfUI.OverviewGrid.Events.WindowChanged , this._onWindowChanged, this);
430 } 430 }
431 431
432 /** 432 /**
433 * @override 433 * @override
434 * @param {number} windowStartTime 434 * @param {number} windowStartTime
435 * @param {number} windowEndTime 435 * @param {number} windowEndTime
436 */ 436 */
437 requestWindowTimes(windowStartTime, windowEndTime) { 437 requestWindowTimes(windowStartTime, windowEndTime) {
438 this._selectRange(windowStartTime, windowEndTime); 438 this._selectRange(windowStartTime, windowEndTime);
439 } 439 }
(...skipping 19 matching lines...) Expand all
459 /** 459 /**
460 * @param {!Common.Event} event 460 * @param {!Common.Event} event
461 */ 461 */
462 _onWindowChanged(event) { 462 _onWindowChanged(event) {
463 var startTime = this._dataProvider.minimumBoundary(); 463 var startTime = this._dataProvider.minimumBoundary();
464 var totalTime = this._dataProvider.totalTime(); 464 var totalTime = this._dataProvider.totalTime();
465 var data = { 465 var data = {
466 windowTimeLeft: startTime + this._overviewGrid.windowLeft() * totalTime, 466 windowTimeLeft: startTime + this._overviewGrid.windowLeft() * totalTime,
467 windowTimeRight: startTime + this._overviewGrid.windowRight() * totalTime 467 windowTimeRight: startTime + this._overviewGrid.windowRight() * totalTime
468 }; 468 };
469 this.dispatchEventToListeners(UI.OverviewGrid.Events.WindowChanged, data); 469 this.dispatchEventToListeners(PerfUI.OverviewGrid.Events.WindowChanged, data );
470 } 470 }
471 471
472 /** 472 /**
473 * @return {?UI.FlameChart.TimelineData} 473 * @return {?PerfUI.FlameChart.TimelineData}
474 */ 474 */
475 _timelineData() { 475 _timelineData() {
476 return this._dataProvider.timelineData(); 476 return this._dataProvider.timelineData();
477 } 477 }
478 478
479 /** 479 /**
480 * @override 480 * @override
481 */ 481 */
482 onResize() { 482 onResize() {
483 this._scheduleUpdate(); 483 this._scheduleUpdate();
484 } 484 }
485 485
486 _scheduleUpdate() { 486 _scheduleUpdate() {
487 if (this._updateTimerId) 487 if (this._updateTimerId)
488 return; 488 return;
489 this._updateTimerId = this.element.window().requestAnimationFrame(this.updat e.bind(this)); 489 this._updateTimerId = this.element.window().requestAnimationFrame(this.updat e.bind(this));
490 } 490 }
491 491
492 update() { 492 update() {
493 this._updateTimerId = 0; 493 this._updateTimerId = 0;
494 var timelineData = this._timelineData(); 494 var timelineData = this._timelineData();
495 if (!timelineData) 495 if (!timelineData)
496 return; 496 return;
497 this._resetCanvas( 497 this._resetCanvas(
498 this._overviewContainer.clientWidth, this._overviewContainer.clientHeigh t - UI.FlameChart.HeaderHeight); 498 this._overviewContainer.clientWidth, this._overviewContainer.clientHeigh t - PerfUI.FlameChart.HeaderHeight);
499 this._overviewCalculator._updateBoundaries(this); 499 this._overviewCalculator._updateBoundaries(this);
500 this._overviewGrid.updateDividers(this._overviewCalculator); 500 this._overviewGrid.updateDividers(this._overviewCalculator);
501 this._drawOverviewCanvas(); 501 this._drawOverviewCanvas();
502 } 502 }
503 503
504 _drawOverviewCanvas() { 504 _drawOverviewCanvas() {
505 var canvasWidth = this._overviewCanvas.width; 505 var canvasWidth = this._overviewCanvas.width;
506 var canvasHeight = this._overviewCanvas.height; 506 var canvasHeight = this._overviewCanvas.height;
507 var drawData = this._calculateDrawData(canvasWidth); 507 var drawData = this._calculateDrawData(canvasWidth);
508 var context = this._overviewCanvas.getContext('2d'); 508 var context = this._overviewCanvas.getContext('2d');
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after
559 * @param {number} height 559 * @param {number} height
560 */ 560 */
561 _resetCanvas(width, height) { 561 _resetCanvas(width, height) {
562 var ratio = window.devicePixelRatio; 562 var ratio = window.devicePixelRatio;
563 this._overviewCanvas.width = width * ratio; 563 this._overviewCanvas.width = width * ratio;
564 this._overviewCanvas.height = height * ratio; 564 this._overviewCanvas.height = height * ratio;
565 this._overviewCanvas.style.width = width + 'px'; 565 this._overviewCanvas.style.width = width + 'px';
566 this._overviewCanvas.style.height = height + 'px'; 566 this._overviewCanvas.style.height = height + 'px';
567 } 567 }
568 }; 568 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698