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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.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 Timeline.TimelineFlameChartDataProvider = class { 35 Timeline.TimelineFlameChartDataProvider = class {
36 /** 36 /**
37 * @param {!TimelineModel.TimelineModel} model 37 * @param {!TimelineModel.TimelineModel} model
38 * @param {!TimelineModel.TimelineFrameModel} frameModel 38 * @param {!TimelineModel.TimelineFrameModel} frameModel
39 * @param {!TimelineModel.TimelineIRModel} irModel 39 * @param {!TimelineModel.TimelineIRModel} irModel
40 * @param {!Array<!TimelineModel.TimelineModel.Filter>} filters 40 * @param {!Array<!TimelineModel.TimelineModel.Filter>} filters
41 */ 41 */
42 constructor(model, frameModel, irModel, filters) { 42 constructor(model, frameModel, irModel, filters) {
43 this.reset(); 43 this.reset();
44 this._font = '11px ' + Host.fontFamily(); 44 this._font = '11px ' + Host.fontFamily();
45 this._model = model; 45 this._model = model;
46 this._filters = filters; 46 this._filters = filters;
47 /** @type {?UI.FlameChart.TimelineData} */ 47 /** @type {?PerfUI.FlameChart.TimelineData} */
48 this._timelineData = null; 48 this._timelineData = null;
49 this._currentLevel = 0; 49 this._currentLevel = 0;
50 this._frameModel = frameModel; 50 this._frameModel = frameModel;
51 this._irModel = irModel; 51 this._irModel = irModel;
52 this._consoleColorGenerator = 52 this._consoleColorGenerator =
53 new UI.FlameChart.ColorGenerator({min: 30, max: 55}, {min: 70, max: 100, count: 6}, 50, 0.7); 53 new PerfUI.FlameChart.ColorGenerator({min: 30, max: 55}, {min: 70, max: 100, count: 6}, 50, 0.7);
54 this._extensionColorGenerator = 54 this._extensionColorGenerator =
55 new UI.FlameChart.ColorGenerator({min: 210, max: 300}, {min: 70, max: 10 0, count: 6}, 70, 0.7); 55 new PerfUI.FlameChart.ColorGenerator({min: 210, max: 300}, {min: 70, max : 100, count: 6}, 70, 0.7);
56 56
57 const defaultGroupStyle = { 57 const defaultGroupStyle = {
58 padding: 4, 58 padding: 4,
59 height: 17, 59 height: 17,
60 collapsible: true, 60 collapsible: true,
61 color: UI.themeSupport.patchColor('#222', UI.ThemeSupport.ColorUsage.Foreg round), 61 color: UI.themeSupport.patchColor('#222', UI.ThemeSupport.ColorUsage.Foreg round),
62 backgroundColor: UI.themeSupport.patchColor('white', UI.ThemeSupport.Color Usage.Background), 62 backgroundColor: UI.themeSupport.patchColor('white', UI.ThemeSupport.Color Usage.Background),
63 font: this._font, 63 font: this._font,
64 nestingLevel: 0, 64 nestingLevel: 0,
65 shareHeaderLine: true 65 shareHeaderLine: true
66 }; 66 };
67 67
68 this._headerLevel1 = /** @type {!UI.FlameChart.GroupStyle} */ 68 this._headerLevel1 = /** @type {!PerfUI.FlameChart.GroupStyle} */
69 (Object.assign({}, defaultGroupStyle, {shareHeaderLine: false})); 69 (Object.assign({}, defaultGroupStyle, {shareHeaderLine: false}));
70 this._headerLevel2 = /** @type {!UI.FlameChart.GroupStyle} */ 70 this._headerLevel2 = /** @type {!PerfUI.FlameChart.GroupStyle} */
71 (Object.assign({}, defaultGroupStyle, {padding: 2, nestingLevel: 1, coll apsible: false})); 71 (Object.assign({}, defaultGroupStyle, {padding: 2, nestingLevel: 1, coll apsible: false}));
72 this._staticHeader = /** @type {!UI.FlameChart.GroupStyle} */ 72 this._staticHeader = /** @type {!PerfUI.FlameChart.GroupStyle} */
73 (Object.assign({}, defaultGroupStyle, {collapsible: false})); 73 (Object.assign({}, defaultGroupStyle, {collapsible: false}));
74 this._interactionsHeaderLevel1 = /** @type {!UI.FlameChart.GroupStyle} */ 74 this._interactionsHeaderLevel1 = /** @type {!PerfUI.FlameChart.GroupStyle} * /
75 (Object.assign({useFirstLineForOverview: true}, defaultGroupStyle)); 75 (Object.assign({useFirstLineForOverview: true}, defaultGroupStyle));
76 this._interactionsHeaderLevel2 = /** @type {!UI.FlameChart.GroupStyle} */ 76 this._interactionsHeaderLevel2 = /** @type {!PerfUI.FlameChart.GroupStyle} * /
77 (Object.assign({}, defaultGroupStyle, {padding: 2, nestingLevel: 1})); 77 (Object.assign({}, defaultGroupStyle, {padding: 2, nestingLevel: 1}));
78 } 78 }
79 79
80 /** 80 /**
81 * @override 81 * @override
82 * @param {number} entryIndex 82 * @param {number} entryIndex
83 * @return {?string} 83 * @return {?string}
84 */ 84 */
85 entryTitle(entryIndex) { 85 entryTitle(entryIndex) {
86 var entryType = this._entryType(entryIndex); 86 var entryType = this._entryType(entryIndex);
(...skipping 63 matching lines...) Expand 10 before | Expand all | Expand 10 after
150 /** 150 /**
151 * @override 151 * @override
152 * @return {number} 152 * @return {number}
153 */ 153 */
154 maxStackDepth() { 154 maxStackDepth() {
155 return this._currentLevel; 155 return this._currentLevel;
156 } 156 }
157 157
158 /** 158 /**
159 * @override 159 * @override
160 * @return {!UI.FlameChart.TimelineData} 160 * @return {!PerfUI.FlameChart.TimelineData}
161 */ 161 */
162 timelineData() { 162 timelineData() {
163 if (this._timelineData) 163 if (this._timelineData)
164 return this._timelineData; 164 return this._timelineData;
165 165
166 this._timelineData = new UI.FlameChart.TimelineData([], [], [], []); 166 this._timelineData = new PerfUI.FlameChart.TimelineData([], [], [], []);
167 167
168 this._minimumBoundary = this._model.minimumRecordTime(); 168 this._minimumBoundary = this._model.minimumRecordTime();
169 this._timeSpan = this._model.isEmpty() ? 1000 : this._model.maximumRecordTim e() - this._minimumBoundary; 169 this._timeSpan = this._model.isEmpty() ? 1000 : this._model.maximumRecordTim e() - this._minimumBoundary;
170 this._currentLevel = 0; 170 this._currentLevel = 0;
171 171
172 this._appendHeader(Common.UIString('Frames'), this._staticHeader); 172 this._appendHeader(Common.UIString('Frames'), this._staticHeader);
173 this._appendFrameBars(this._frameModel.frames()); 173 this._appendFrameBars(this._frameModel.frames());
174 174
175 this._appendHeader(Common.UIString('Interactions'), this._interactionsHeader Level1); 175 this._appendHeader(Common.UIString('Interactions'), this._interactionsHeader Level1);
176 this._appendInteractionRecords(); 176 this._appendInteractionRecords();
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after
253 /** 253 /**
254 * @param {number} level 254 * @param {number} level
255 * @param {!TimelineModel.TimelineModel.PageFrame} frame 255 * @param {!TimelineModel.TimelineModel.PageFrame} frame
256 */ 256 */
257 _appendFrameEvents(level, frame) { 257 _appendFrameEvents(level, frame) {
258 var events = this._model.eventsForFrame(frame.id); 258 var events = this._model.eventsForFrame(frame.id);
259 var clonedHeader = Object.assign({}, this._headerLevel1); 259 var clonedHeader = Object.assign({}, this._headerLevel1);
260 clonedHeader.nestingLevel = level; 260 clonedHeader.nestingLevel = level;
261 this._appendSyncEvents( 261 this._appendSyncEvents(
262 events, Timeline.TimelineUIUtils.displayNameForFrame(frame), 262 events, Timeline.TimelineUIUtils.displayNameForFrame(frame),
263 /** @type {!UI.FlameChart.GroupStyle} */ (clonedHeader), Timeline.Timeli neFlameChartEntryType.Event); 263 /** @type {!PerfUI.FlameChart.GroupStyle} */ (clonedHeader), Timeline.Ti melineFlameChartEntryType.Event);
264 frame.children.forEach(this._appendFrameEvents.bind(this, level + 1)); 264 frame.children.forEach(this._appendFrameEvents.bind(this, level + 1));
265 } 265 }
266 266
267 /** 267 /**
268 * @param {string} threadTitle 268 * @param {string} threadTitle
269 * @param {!Array<!SDK.TracingModel.Event>} syncEvents 269 * @param {!Array<!SDK.TracingModel.Event>} syncEvents
270 * @param {!Map<!TimelineModel.TimelineModel.AsyncEventGroup, !Array<!SDK.Trac ingModel.AsyncEvent>>} asyncEvents 270 * @param {!Map<!TimelineModel.TimelineModel.AsyncEventGroup, !Array<!SDK.Trac ingModel.AsyncEvent>>} asyncEvents
271 * @param {boolean=} forceExpanded 271 * @param {boolean=} forceExpanded
272 */ 272 */
273 _appendThreadTimelineData(threadTitle, syncEvents, asyncEvents, forceExpanded) { 273 _appendThreadTimelineData(threadTitle, syncEvents, asyncEvents, forceExpanded) {
274 var entryType = Timeline.TimelineFlameChartEntryType.Event; 274 var entryType = Timeline.TimelineFlameChartEntryType.Event;
275 this._appendAsyncEvents(asyncEvents); 275 this._appendAsyncEvents(asyncEvents);
276 this._appendSyncEvents(syncEvents, threadTitle, this._headerLevel1, entryTyp e, forceExpanded); 276 this._appendSyncEvents(syncEvents, threadTitle, this._headerLevel1, entryTyp e, forceExpanded);
277 } 277 }
278 278
279 /** 279 /**
280 * @param {!Array<!SDK.TracingModel.Event>} events 280 * @param {!Array<!SDK.TracingModel.Event>} events
281 * @param {string} title 281 * @param {string} title
282 * @param {!UI.FlameChart.GroupStyle} style 282 * @param {!PerfUI.FlameChart.GroupStyle} style
283 * @param {!Timeline.TimelineFlameChartEntryType} entryType 283 * @param {!Timeline.TimelineFlameChartEntryType} entryType
284 * @param {boolean=} forceExpanded 284 * @param {boolean=} forceExpanded
285 */ 285 */
286 _appendSyncEvents(events, title, style, entryType, forceExpanded) { 286 _appendSyncEvents(events, title, style, entryType, forceExpanded) {
287 var isExtension = entryType === Timeline.TimelineFlameChartEntryType.Extensi onEvent; 287 var isExtension = entryType === Timeline.TimelineFlameChartEntryType.Extensi onEvent;
288 var openEvents = []; 288 var openEvents = [];
289 var blackboxingEnabled = !isExtension && Runtime.experiments.isEnabled('blac kboxJSFramesOnTimeline'); 289 var blackboxingEnabled = !isExtension && Runtime.experiments.isEnabled('blac kboxJSFramesOnTimeline');
290 var maxStackDepth = 0; 290 var maxStackDepth = 0;
291 for (var i = 0; i < events.length; ++i) { 291 for (var i = 0; i < events.length; ++i) {
292 var e = events[i]; 292 var e = events[i];
(...skipping 74 matching lines...) Expand 10 before | Expand all | Expand 10 after
367 if (!events) 367 if (!events)
368 continue; 368 continue;
369 var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(group); 369 var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(group);
370 this._appendAsyncEventsGroup(title, events, this._headerLevel1, entryType) ; 370 this._appendAsyncEventsGroup(title, events, this._headerLevel1, entryType) ;
371 } 371 }
372 } 372 }
373 373
374 /** 374 /**
375 * @param {string} header 375 * @param {string} header
376 * @param {!Array<!SDK.TracingModel.AsyncEvent>} events 376 * @param {!Array<!SDK.TracingModel.AsyncEvent>} events
377 * @param {!UI.FlameChart.GroupStyle} style 377 * @param {!PerfUI.FlameChart.GroupStyle} style
378 * @param {!Timeline.TimelineFlameChartEntryType} entryType 378 * @param {!Timeline.TimelineFlameChartEntryType} entryType
379 */ 379 */
380 _appendAsyncEventsGroup(header, events, style, entryType) { 380 _appendAsyncEventsGroup(header, events, style, entryType) {
381 var lastUsedTimeByLevel = []; 381 var lastUsedTimeByLevel = [];
382 var groupHeaderAppended = false; 382 var groupHeaderAppended = false;
383 for (var i = 0; i < events.length; ++i) { 383 for (var i = 0; i < events.length; ++i) {
384 var asyncEvent = events[i]; 384 var asyncEvent = events[i];
385 if (!this._isVisible(asyncEvent)) 385 if (!this._isVisible(asyncEvent))
386 continue; 386 continue;
387 if (!groupHeaderAppended) { 387 if (!groupHeaderAppended) {
(...skipping 253 matching lines...) Expand 10 before | Expand all | Expand 10 after
641 641
642 this._appendHeader(entry.title, this._headerLevel1); 642 this._appendHeader(entry.title, this._headerLevel1);
643 for (let thread of allThreads) { 643 for (let thread of allThreads) {
644 this._appendAsyncEventsGroup(thread.name(), thread.asyncEvents(), this._he aderLevel2, entryType); 644 this._appendAsyncEventsGroup(thread.name(), thread.asyncEvents(), this._he aderLevel2, entryType);
645 this._appendSyncEvents(thread.events(), thread.name(), this._headerLevel2, entryType, false); 645 this._appendSyncEvents(thread.events(), thread.name(), this._headerLevel2, entryType, false);
646 } 646 }
647 } 647 }
648 648
649 /** 649 /**
650 * @param {string} title 650 * @param {string} title
651 * @param {!UI.FlameChart.GroupStyle} style 651 * @param {!PerfUI.FlameChart.GroupStyle} style
652 * @param {boolean=} expanded 652 * @param {boolean=} expanded
653 */ 653 */
654 _appendHeader(title, style, expanded) { 654 _appendHeader(title, style, expanded) {
655 this._timelineData.groups.push({startLevel: this._currentLevel, name: title, expanded: expanded, style: style}); 655 this._timelineData.groups.push({startLevel: this._currentLevel, name: title, expanded: expanded, style: style});
656 } 656 }
657 657
658 /** 658 /**
659 * @param {!SDK.TracingModel.Event} event 659 * @param {!SDK.TracingModel.Event} event
660 * @param {number} level 660 * @param {number} level
661 */ 661 */
(...skipping 123 matching lines...) Expand 10 before | Expand all | Expand 10 after
785 * @return {boolean} 785 * @return {boolean}
786 */ 786 */
787 _isVisible(event) { 787 _isVisible(event) {
788 return this._filters.every(function(filter) { 788 return this._filters.every(function(filter) {
789 return filter.accept(event); 789 return filter.accept(event);
790 }); 790 });
791 } 791 }
792 }; 792 };
793 793
794 Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs = 0.001; 794 Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs = 0.001;
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698