OLD | NEW |
---|---|
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 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
69 font: font, | 69 font: font, |
70 nestingLevel: 0, | 70 nestingLevel: 0, |
71 shareHeaderLine: true | 71 shareHeaderLine: true |
72 }; | 72 }; |
73 return /** @type {!PerfUI.FlameChart.GroupStyle} */ (Object.assign(default GroupStyle, extra)); | 73 return /** @type {!PerfUI.FlameChart.GroupStyle} */ (Object.assign(default GroupStyle, extra)); |
74 } | 74 } |
75 | 75 |
76 this._headerLevel1 = buildGroupStyle({shareHeaderLine: false}); | 76 this._headerLevel1 = buildGroupStyle({shareHeaderLine: false}); |
77 this._headerLevel2 = buildGroupStyle({padding: 2, nestingLevel: 1, collapsib le: false}); | 77 this._headerLevel2 = buildGroupStyle({padding: 2, nestingLevel: 1, collapsib le: false}); |
78 this._staticHeader = buildGroupStyle({collapsible: false}); | 78 this._staticHeader = buildGroupStyle({collapsible: false}); |
79 this._framesHeader = buildGroupStyle({useFirstLineForOverview: true, shareHe aderLine: true, itemsHeight: 150}); | 79 this._framesHeader = buildGroupStyle({useFirstLineForOverview: true}); |
80 this._screenshotsHeader = | |
81 buildGroupStyle({useFirstLineForOverview: true, nestingLevel: 1, collaps ible: false, itemsHeight: 150}); | |
80 this._interactionsHeaderLevel1 = buildGroupStyle({useFirstLineForOverview: t rue}); | 82 this._interactionsHeaderLevel1 = buildGroupStyle({useFirstLineForOverview: t rue}); |
81 this._interactionsHeaderLevel2 = buildGroupStyle({padding: 2, nestingLevel: 1}); | 83 this._interactionsHeaderLevel2 = buildGroupStyle({padding: 2, nestingLevel: 1}); |
82 | 84 |
83 /** @type {!Map<string, number>} */ | 85 /** @type {!Map<string, number>} */ |
84 this._flowEventIndexById = new Map(); | 86 this._flowEventIndexById = new Map(); |
85 } | 87 } |
86 | 88 |
87 /** | 89 /** |
88 * @param {?Timeline.PerformanceModel} performanceModel | 90 * @param {?Timeline.PerformanceModel} performanceModel |
89 */ | 91 */ |
90 setModel(performanceModel) { | 92 setModel(performanceModel) { |
91 this.reset(); | 93 this.reset(); |
92 this._performanceModel = performanceModel; | 94 this._performanceModel = performanceModel; |
93 this._model = performanceModel && performanceModel.timelineModel(); | 95 this._model = performanceModel && performanceModel.timelineModel(); |
94 } | 96 } |
95 | 97 |
96 /** | 98 /** |
97 * @override | 99 * @override |
98 * @param {number} entryIndex | 100 * @param {number} entryIndex |
99 * @return {?string} | 101 * @return {?string} |
100 */ | 102 */ |
101 entryTitle(entryIndex) { | 103 entryTitle(entryIndex) { |
102 var entryType = this._entryType(entryIndex); | 104 var entryType = this._entryType(entryIndex); |
103 if (entryType === Timeline.TimelineFlameChartEntryType.Event) { | 105 if (entryType === Timeline.TimelineFlameChartDataProvider.EntryType.Event) { |
caseq
2017/05/10 18:40:28
nit: consider aliasing EntryType to something.
alph
2017/05/10 19:22:38
Done.
| |
104 var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryI ndex]); | 106 var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryI ndex]); |
105 if (event.phase === SDK.TracingModel.Phase.AsyncStepInto || event.phase == = SDK.TracingModel.Phase.AsyncStepPast) | 107 if (event.phase === SDK.TracingModel.Phase.AsyncStepInto || event.phase == = SDK.TracingModel.Phase.AsyncStepPast) |
106 return event.name + ':' + event.args['step']; | 108 return event.name + ':' + event.args['step']; |
107 if (event._blackboxRoot) | 109 if (event._blackboxRoot) |
108 return Common.UIString('Blackboxed'); | 110 return Common.UIString('Blackboxed'); |
109 var name = Timeline.TimelineUIUtils.eventStyle(event).title; | 111 var name = Timeline.TimelineUIUtils.eventStyle(event).title; |
110 // TODO(yurys): support event dividers | 112 // TODO(yurys): support event dividers |
111 var detailsText = Timeline.TimelineUIUtils.buildDetailsTextForTraceEvent(e vent, this._model.targetByEvent(event)); | 113 var detailsText = Timeline.TimelineUIUtils.buildDetailsTextForTraceEvent(e vent, this._model.targetByEvent(event)); |
112 if (event.name === TimelineModel.TimelineModel.RecordType.JSFrame && detai lsText) | 114 if (event.name === TimelineModel.TimelineModel.RecordType.JSFrame && detai lsText) |
113 return detailsText; | 115 return detailsText; |
114 return detailsText ? Common.UIString('%s (%s)', name, detailsText) : name; | 116 return detailsText ? Common.UIString('%s (%s)', name, detailsText) : name; |
115 } | 117 } |
116 if (entryType === Timeline.TimelineFlameChartEntryType.ExtensionEvent) { | 118 if (entryType === Timeline.TimelineFlameChartDataProvider.EntryType.Extensio nEvent) { |
117 var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryI ndex]); | 119 var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryI ndex]); |
118 return event.name; | 120 return event.name; |
119 } | 121 } |
122 if (entryType === Timeline.TimelineFlameChartDataProvider.EntryType.Screensh ot) | |
123 return ''; | |
120 var title = this._entryIndexToTitle[entryIndex]; | 124 var title = this._entryIndexToTitle[entryIndex]; |
121 if (!title) { | 125 if (!title) { |
122 title = Common.UIString('Unexpected entryIndex %d', entryIndex); | 126 title = Common.UIString('Unexpected entryIndex %d', entryIndex); |
123 console.error(title); | 127 console.error(title); |
124 } | 128 } |
125 return title; | 129 return title; |
126 } | 130 } |
127 | 131 |
128 /** | 132 /** |
129 * @override | 133 * @override |
(...skipping 10 matching lines...) Expand all Loading... | |
140 * @param {number} index | 144 * @param {number} index |
141 * @return {?string} | 145 * @return {?string} |
142 */ | 146 */ |
143 entryFont(index) { | 147 entryFont(index) { |
144 return this._font; | 148 return this._font; |
145 } | 149 } |
146 | 150 |
147 reset() { | 151 reset() { |
148 this._currentLevel = 0; | 152 this._currentLevel = 0; |
149 this._timelineData = null; | 153 this._timelineData = null; |
150 /** @type {!Array<!SDK.TracingModel.Event|!TimelineModel.TimelineFrame|!Time lineModel.TimelineIRModel.Phases>} */ | 154 /** @type {!Array<!SDK.FilmStripModel.Frame|!SDK.TracingModel.Event|!Timelin eModel.TimelineFrame|!TimelineModel.TimelineIRModel.Phases>} */ |
151 this._entryData = []; | 155 this._entryData = []; |
152 /** @type {!Array<!SDK.TracingModel.Event>} */ | 156 /** @type {!Array<!SDK.TracingModel.Event>} */ |
153 this._entryParent = []; | 157 this._entryParent = []; |
154 /** @type {!Array<!Timeline.TimelineFlameChartEntryType>} */ | 158 /** @type {!Array<!Timeline.TimelineFlameChartDataProvider.EntryType>} */ |
155 this._entryTypeByLevel = []; | 159 this._entryTypeByLevel = []; |
156 /** @type {!Array<string>} */ | 160 /** @type {!Array<string>} */ |
157 this._entryIndexToTitle = []; | 161 this._entryIndexToTitle = []; |
158 /** @type {!Array<!Timeline.TimelineFlameChartMarker>} */ | 162 /** @type {!Array<!Timeline.TimelineFlameChartMarker>} */ |
159 this._markers = []; | 163 this._markers = []; |
160 /** @type {!Map<!Timeline.TimelineCategory, string>} */ | 164 /** @type {!Map<!Timeline.TimelineCategory, string>} */ |
161 this._asyncColorByCategory = new Map(); | 165 this._asyncColorByCategory = new Map(); |
162 /** @type {!Map<!TimelineModel.TimelineIRModel.Phases, string>} */ | 166 /** @type {!Map<!TimelineModel.TimelineIRModel.Phases, string>} */ |
163 this._asyncColorByInteractionPhase = new Map(); | 167 this._asyncColorByInteractionPhase = new Map(); |
164 /** @type {!Array<!{title: string, model: !SDK.TracingModel}>} */ | 168 /** @type {!Array<!{title: string, model: !SDK.TracingModel}>} */ |
165 this._extensionInfo = []; | 169 this._extensionInfo = []; |
166 /** @type {!Map<!TimelineModel.TimelineFrame, ?Image>} */ | 170 /** @type {!Map<!SDK.FilmStripModel.Frame, ?Image>} */ |
167 this._frameImageCache = new Map(); | 171 this._screenshotImageCache = new Map(); |
168 } | 172 } |
169 | 173 |
170 /** | 174 /** |
171 * @override | 175 * @override |
172 * @return {number} | 176 * @return {number} |
173 */ | 177 */ |
174 maxStackDepth() { | 178 maxStackDepth() { |
175 return this._currentLevel; | 179 return this._currentLevel; |
176 } | 180 } |
177 | 181 |
178 /** | 182 /** |
179 * @override | 183 * @override |
180 * @return {!PerfUI.FlameChart.TimelineData} | 184 * @return {!PerfUI.FlameChart.TimelineData} |
181 */ | 185 */ |
182 timelineData() { | 186 timelineData() { |
183 if (this._timelineData) | 187 if (this._timelineData) |
184 return this._timelineData; | 188 return this._timelineData; |
185 | 189 |
186 this._timelineData = new PerfUI.FlameChart.TimelineData([], [], [], []); | 190 this._timelineData = new PerfUI.FlameChart.TimelineData([], [], [], []); |
187 if (!this._model) | 191 if (!this._model) |
188 return this._timelineData; | 192 return this._timelineData; |
189 | 193 |
190 this._flowEventIndexById.clear(); | 194 this._flowEventIndexById.clear(); |
191 | 195 |
192 this._minimumBoundary = this._model.minimumRecordTime(); | 196 this._minimumBoundary = this._model.minimumRecordTime(); |
193 this._timeSpan = this._model.isEmpty() ? 1000 : this._model.maximumRecordTim e() - this._minimumBoundary; | 197 this._timeSpan = this._model.isEmpty() ? 1000 : this._model.maximumRecordTim e() - this._minimumBoundary; |
194 this._currentLevel = 0; | 198 this._currentLevel = 0; |
195 | 199 |
196 this._appendFrameBars(this._performanceModel.frames()); | 200 this._appendFrameBars(); |
197 | 201 |
198 this._appendHeader(Common.UIString('Interactions'), this._interactionsHeader Level1); | 202 this._appendHeader(Common.UIString('Interactions'), this._interactionsHeader Level1); |
199 this._appendInteractionRecords(); | 203 this._appendInteractionRecords(); |
200 | 204 |
201 var eventEntryType = Timeline.TimelineFlameChartEntryType.Event; | 205 var eventEntryType = Timeline.TimelineFlameChartDataProvider.EntryType.Event ; |
202 | 206 |
203 var asyncEventGroups = TimelineModel.TimelineModel.AsyncEventGroup; | 207 var asyncEventGroups = TimelineModel.TimelineModel.AsyncEventGroup; |
204 var inputLatencies = this._model.mainThreadAsyncEvents().get(asyncEventGroup s.input); | 208 var inputLatencies = this._model.mainThreadAsyncEvents().get(asyncEventGroup s.input); |
205 if (inputLatencies && inputLatencies.length) { | 209 if (inputLatencies && inputLatencies.length) { |
206 var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(asyncEventGro ups.input); | 210 var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(asyncEventGro ups.input); |
207 this._appendAsyncEventsGroup(title, inputLatencies, this._interactionsHead erLevel2, eventEntryType); | 211 this._appendAsyncEventsGroup(title, inputLatencies, this._interactionsHead erLevel2, eventEntryType); |
208 } | 212 } |
209 var animations = this._model.mainThreadAsyncEvents().get(asyncEventGroups.an imation); | 213 var animations = this._model.mainThreadAsyncEvents().get(asyncEventGroups.an imation); |
210 if (animations && animations.length) { | 214 if (animations && animations.length) { |
211 var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(asyncEventGro ups.animation); | 215 var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(asyncEventGro ups.animation); |
(...skipping 24 matching lines...) Expand all Loading... | |
236 } | 240 } |
237 this._appendGPUEvents(); | 241 this._appendGPUEvents(); |
238 | 242 |
239 otherThreads.forEach( | 243 otherThreads.forEach( |
240 thread => this._appendThreadTimelineData( | 244 thread => this._appendThreadTimelineData( |
241 thread.name || Common.UIString('Thread %d', thread.id), thread.event s, thread.asyncEventsByGroup)); | 245 thread.name || Common.UIString('Thread %d', thread.id), thread.event s, thread.asyncEventsByGroup)); |
242 | 246 |
243 for (let extensionIndex = 0; extensionIndex < this._extensionInfo.length; ex tensionIndex++) | 247 for (let extensionIndex = 0; extensionIndex < this._extensionInfo.length; ex tensionIndex++) |
244 this._innerAppendExtensionEvents(extensionIndex); | 248 this._innerAppendExtensionEvents(extensionIndex); |
245 | 249 |
246 /** | 250 this._markers.sort((a, b) => a.startTime() - b.startTime()); |
247 * @param {!Timeline.TimelineFlameChartMarker} a | |
248 * @param {!Timeline.TimelineFlameChartMarker} b | |
249 */ | |
250 function compareStartTime(a, b) { | |
251 return a.startTime() - b.startTime(); | |
252 } | |
253 | |
254 this._markers.sort(compareStartTime); | |
255 this._timelineData.markers = this._markers; | 251 this._timelineData.markers = this._markers; |
256 this._flowEventIndexById.clear(); | 252 this._flowEventIndexById.clear(); |
257 | 253 |
258 return this._timelineData; | 254 return this._timelineData; |
259 } | 255 } |
260 | 256 |
261 /** | 257 /** |
262 * @override | 258 * @override |
263 * @return {number} | 259 * @return {number} |
264 */ | 260 */ |
(...skipping 12 matching lines...) Expand all Loading... | |
277 /** | 273 /** |
278 * @param {number} level | 274 * @param {number} level |
279 * @param {!TimelineModel.TimelineModel.PageFrame} frame | 275 * @param {!TimelineModel.TimelineModel.PageFrame} frame |
280 */ | 276 */ |
281 _appendFrameEvents(level, frame) { | 277 _appendFrameEvents(level, frame) { |
282 var events = this._model.eventsForFrame(frame.id); | 278 var events = this._model.eventsForFrame(frame.id); |
283 var clonedHeader = Object.assign({}, this._headerLevel1); | 279 var clonedHeader = Object.assign({}, this._headerLevel1); |
284 clonedHeader.nestingLevel = level; | 280 clonedHeader.nestingLevel = level; |
285 this._appendSyncEvents( | 281 this._appendSyncEvents( |
286 events, Timeline.TimelineUIUtils.displayNameForFrame(frame), | 282 events, Timeline.TimelineUIUtils.displayNameForFrame(frame), |
287 /** @type {!PerfUI.FlameChart.GroupStyle} */ (clonedHeader), Timeline.Ti melineFlameChartEntryType.Event); | 283 /** @type {!PerfUI.FlameChart.GroupStyle} */ (clonedHeader), |
284 Timeline.TimelineFlameChartDataProvider.EntryType.Event); | |
288 frame.children.forEach(this._appendFrameEvents.bind(this, level + 1)); | 285 frame.children.forEach(this._appendFrameEvents.bind(this, level + 1)); |
289 } | 286 } |
290 | 287 |
291 /** | 288 /** |
292 * @param {string} threadTitle | 289 * @param {string} threadTitle |
293 * @param {!Array<!SDK.TracingModel.Event>} syncEvents | 290 * @param {!Array<!SDK.TracingModel.Event>} syncEvents |
294 * @param {!Map<!TimelineModel.TimelineModel.AsyncEventGroup, !Array<!SDK.Trac ingModel.AsyncEvent>>} asyncEvents | 291 * @param {!Map<!TimelineModel.TimelineModel.AsyncEventGroup, !Array<!SDK.Trac ingModel.AsyncEvent>>} asyncEvents |
295 * @param {boolean=} forceExpanded | 292 * @param {boolean=} forceExpanded |
296 */ | 293 */ |
297 _appendThreadTimelineData(threadTitle, syncEvents, asyncEvents, forceExpanded) { | 294 _appendThreadTimelineData(threadTitle, syncEvents, asyncEvents, forceExpanded) { |
298 var entryType = Timeline.TimelineFlameChartEntryType.Event; | 295 var entryType = Timeline.TimelineFlameChartDataProvider.EntryType.Event; |
299 this._appendAsyncEvents(asyncEvents); | 296 this._appendAsyncEvents(asyncEvents); |
300 this._appendSyncEvents(syncEvents, threadTitle, this._headerLevel1, entryTyp e, forceExpanded); | 297 this._appendSyncEvents(syncEvents, threadTitle, this._headerLevel1, entryTyp e, forceExpanded); |
301 } | 298 } |
302 | 299 |
303 /** | 300 /** |
304 * @param {!Array<!SDK.TracingModel.Event>} events | 301 * @param {!Array<!SDK.TracingModel.Event>} events |
305 * @param {string} title | 302 * @param {string} title |
306 * @param {!PerfUI.FlameChart.GroupStyle} style | 303 * @param {!PerfUI.FlameChart.GroupStyle} style |
307 * @param {!Timeline.TimelineFlameChartEntryType} entryType | 304 * @param {!Timeline.TimelineFlameChartDataProvider.EntryType} entryType |
308 * @param {boolean=} forceExpanded | 305 * @param {boolean=} forceExpanded |
309 */ | 306 */ |
310 _appendSyncEvents(events, title, style, entryType, forceExpanded) { | 307 _appendSyncEvents(events, title, style, entryType, forceExpanded) { |
311 var isExtension = entryType === Timeline.TimelineFlameChartEntryType.Extensi onEvent; | 308 var isExtension = entryType === Timeline.TimelineFlameChartDataProvider.Entr yType.ExtensionEvent; |
312 var openEvents = []; | 309 var openEvents = []; |
313 var flowEventsEnabled = Runtime.experiments.isEnabled('timelineFlowEvents'); | 310 var flowEventsEnabled = Runtime.experiments.isEnabled('timelineFlowEvents'); |
314 var blackboxingEnabled = !isExtension && Runtime.experiments.isEnabled('blac kboxJSFramesOnTimeline'); | 311 var blackboxingEnabled = !isExtension && Runtime.experiments.isEnabled('blac kboxJSFramesOnTimeline'); |
315 var maxStackDepth = 0; | 312 var maxStackDepth = 0; |
316 for (var i = 0; i < events.length; ++i) { | 313 for (var i = 0; i < events.length; ++i) { |
317 var e = events[i]; | 314 var e = events[i]; |
318 if (!isExtension && TimelineModel.TimelineModel.isMarkerEvent(e)) { | 315 if (!isExtension && TimelineModel.TimelineModel.isMarkerEvent(e)) { |
319 this._markers.push(new Timeline.TimelineFlameChartMarker( | 316 this._markers.push(new Timeline.TimelineFlameChartMarker( |
320 e.startTime, e.startTime - this._model.minimumRecordTime(), | 317 e.startTime, e.startTime - this._model.minimumRecordTime(), |
321 Timeline.TimelineUIUtils.markerStyleForEvent(e))); | 318 Timeline.TimelineUIUtils.markerStyleForEvent(e))); |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
376 * @return {boolean} | 373 * @return {boolean} |
377 */ | 374 */ |
378 _isBlackboxedURL(url) { | 375 _isBlackboxedURL(url) { |
379 return Bindings.blackboxManager.isBlackboxedURL(url); | 376 return Bindings.blackboxManager.isBlackboxedURL(url); |
380 } | 377 } |
381 | 378 |
382 /** | 379 /** |
383 * @param {!Map<!TimelineModel.TimelineModel.AsyncEventGroup, !Array<!SDK.Trac ingModel.AsyncEvent>>} asyncEvents | 380 * @param {!Map<!TimelineModel.TimelineModel.AsyncEventGroup, !Array<!SDK.Trac ingModel.AsyncEvent>>} asyncEvents |
384 */ | 381 */ |
385 _appendAsyncEvents(asyncEvents) { | 382 _appendAsyncEvents(asyncEvents) { |
386 var entryType = Timeline.TimelineFlameChartEntryType.Event; | 383 var entryType = Timeline.TimelineFlameChartDataProvider.EntryType.Event; |
387 var groups = TimelineModel.TimelineModel.AsyncEventGroup; | 384 var groups = TimelineModel.TimelineModel.AsyncEventGroup; |
388 var groupArray = Object.keys(groups).map(key => groups[key]); | 385 var groupArray = Object.keys(groups).map(key => groups[key]); |
389 | 386 |
390 groupArray.remove(groups.animation); | 387 groupArray.remove(groups.animation); |
391 groupArray.remove(groups.input); | 388 groupArray.remove(groups.input); |
392 | 389 |
393 for (var groupIndex = 0; groupIndex < groupArray.length; ++groupIndex) { | 390 for (var groupIndex = 0; groupIndex < groupArray.length; ++groupIndex) { |
394 var group = groupArray[groupIndex]; | 391 var group = groupArray[groupIndex]; |
395 var events = asyncEvents.get(group); | 392 var events = asyncEvents.get(group); |
396 if (!events) | 393 if (!events) |
397 continue; | 394 continue; |
398 var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(group); | 395 var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(group); |
399 this._appendAsyncEventsGroup(title, events, this._headerLevel1, entryType) ; | 396 this._appendAsyncEventsGroup(title, events, this._headerLevel1, entryType) ; |
400 } | 397 } |
401 } | 398 } |
402 | 399 |
403 /** | 400 /** |
404 * @param {string} header | 401 * @param {string} header |
405 * @param {!Array<!SDK.TracingModel.AsyncEvent>} events | 402 * @param {!Array<!SDK.TracingModel.AsyncEvent>} events |
406 * @param {!PerfUI.FlameChart.GroupStyle} style | 403 * @param {!PerfUI.FlameChart.GroupStyle} style |
407 * @param {!Timeline.TimelineFlameChartEntryType} entryType | 404 * @param {!Timeline.TimelineFlameChartDataProvider.EntryType} entryType |
408 */ | 405 */ |
409 _appendAsyncEventsGroup(header, events, style, entryType) { | 406 _appendAsyncEventsGroup(header, events, style, entryType) { |
410 var lastUsedTimeByLevel = []; | 407 var lastUsedTimeByLevel = []; |
411 var groupHeaderAppended = false; | 408 var groupHeaderAppended = false; |
412 for (var i = 0; i < events.length; ++i) { | 409 for (var i = 0; i < events.length; ++i) { |
413 var asyncEvent = events[i]; | 410 var asyncEvent = events[i]; |
414 if (!this._isVisible(asyncEvent)) | 411 if (!this._isVisible(asyncEvent)) |
415 continue; | 412 continue; |
416 if (!groupHeaderAppended) { | 413 if (!groupHeaderAppended) { |
417 this._appendHeader(header, style); | 414 this._appendHeader(header, style); |
418 groupHeaderAppended = true; | 415 groupHeaderAppended = true; |
419 } | 416 } |
420 var startTime = asyncEvent.startTime; | 417 var startTime = asyncEvent.startTime; |
421 var level; | 418 var level; |
422 for (level = 0; level < lastUsedTimeByLevel.length && lastUsedTimeByLevel[ level] > startTime; ++level) { | 419 for (level = 0; level < lastUsedTimeByLevel.length && lastUsedTimeByLevel[ level] > startTime; ++level) { |
423 } | 420 } |
424 this._appendAsyncEvent(asyncEvent, this._currentLevel + level); | 421 this._appendAsyncEvent(asyncEvent, this._currentLevel + level); |
425 lastUsedTimeByLevel[level] = asyncEvent.endTime; | 422 lastUsedTimeByLevel[level] = asyncEvent.endTime; |
426 } | 423 } |
427 this._entryTypeByLevel.length = this._currentLevel + lastUsedTimeByLevel.len gth; | 424 this._entryTypeByLevel.length = this._currentLevel + lastUsedTimeByLevel.len gth; |
428 this._entryTypeByLevel.fill(entryType, this._currentLevel); | 425 this._entryTypeByLevel.fill(entryType, this._currentLevel); |
429 this._currentLevel += lastUsedTimeByLevel.length; | 426 this._currentLevel += lastUsedTimeByLevel.length; |
430 } | 427 } |
431 | 428 |
432 _appendGPUEvents() { | 429 _appendGPUEvents() { |
433 var eventType = Timeline.TimelineFlameChartEntryType.Event; | 430 var eventType = Timeline.TimelineFlameChartDataProvider.EntryType.Event; |
434 var gpuEvents = this._model.gpuEvents(); | 431 var gpuEvents = this._model.gpuEvents(); |
435 if (this._appendSyncEvents(gpuEvents, Common.UIString('GPU'), this._headerLe vel1, eventType, false)) | 432 if (this._appendSyncEvents(gpuEvents, Common.UIString('GPU'), this._headerLe vel1, eventType, false)) |
436 ++this._currentLevel; | 433 ++this._currentLevel; |
437 } | 434 } |
438 | 435 |
439 _appendInteractionRecords() { | 436 _appendInteractionRecords() { |
440 this._performanceModel.interactionRecords().forEach(this._appendSegment, thi s); | 437 this._performanceModel.interactionRecords().forEach(this._appendSegment, thi s); |
441 this._entryTypeByLevel[this._currentLevel++] = Timeline.TimelineFlameChartEn tryType.InteractionRecord; | 438 this._entryTypeByLevel[this._currentLevel++] = Timeline.TimelineFlameChartDa taProvider.EntryType.InteractionRecord; |
442 } | 439 } |
443 | 440 |
444 /** | 441 _appendFrameBars() { |
445 * @param {!Array.<!TimelineModel.TimelineFrame>} frames | 442 var screenshots = this._performanceModel.filmStripModel().frames(); |
446 */ | 443 var hasFilmStrip = !!screenshots.length; |
447 _appendFrameBars(frames) { | |
448 var hasFilmStrip = !!this._performanceModel.filmStripModel().frames().length ; | |
449 this._framesHeader.collapsible = hasFilmStrip; | 444 this._framesHeader.collapsible = hasFilmStrip; |
450 this._appendHeader(Common.UIString('Frames'), this._framesHeader); | 445 this._appendHeader(Common.UIString('Frames'), this._framesHeader); |
451 this._frameGroup = this._timelineData.groups.peekLast(); | 446 this._frameGroup = this._timelineData.groups.peekLast(); |
452 var style = Timeline.TimelineUIUtils.markerStyleForFrame(); | 447 var style = Timeline.TimelineUIUtils.markerStyleForFrame(); |
453 this._entryTypeByLevel[this._currentLevel] = Timeline.TimelineFlameChartEntr yType.Frame; | 448 this._entryTypeByLevel[this._currentLevel] = Timeline.TimelineFlameChartData Provider.EntryType.Frame; |
454 for (var frame of frames) { | 449 for (var frame of this._performanceModel.frames()) { |
455 this._markers.push(new Timeline.TimelineFlameChartMarker( | 450 this._markers.push(new Timeline.TimelineFlameChartMarker( |
456 frame.startTime, frame.startTime - this._model.minimumRecordTime(), st yle)); | 451 frame.startTime, frame.startTime - this._model.minimumRecordTime(), st yle)); |
457 this._appendFrame(frame); | 452 this._appendFrame(frame); |
458 } | 453 } |
459 ++this._currentLevel; | 454 ++this._currentLevel; |
455 if (!hasFilmStrip) | |
456 return; | |
457 this._appendHeader('', this._screenshotsHeader); | |
458 this._entryTypeByLevel[this._currentLevel] = Timeline.TimelineFlameChartData Provider.EntryType.Screenshot; | |
459 var prevTimestamp; | |
460 for (var screenshot of screenshots) { | |
461 var index = this._entryData.length; | |
462 this._entryData.push(screenshot); | |
463 this._timelineData.entryLevels[index] = this._currentLevel; | |
464 this._timelineData.entryStartTimes[index] = screenshot.timestamp; | |
465 if (prevTimestamp) | |
466 this._timelineData.entryTotalTimes[index - 1] = screenshot.timestamp - p revTimestamp; | |
467 prevTimestamp = screenshot.timestamp; | |
468 } | |
469 this._timelineData.entryTotalTimes[this._timelineData.entryTotalTimes.length - 1] = | |
470 this._model.maximumRecordTime() - screenshots.peekLast().timestamp; | |
caseq
2017/05/10 18:40:28
just use prevTimestamp?
alph
2017/05/10 19:22:38
Done.
| |
471 ++this._currentLevel; | |
460 } | 472 } |
461 | 473 |
462 /** | 474 /** |
463 * @param {number} entryIndex | 475 * @param {number} entryIndex |
464 * @return {!Timeline.TimelineFlameChartEntryType} | 476 * @return {!Timeline.TimelineFlameChartDataProvider.EntryType} |
465 */ | 477 */ |
466 _entryType(entryIndex) { | 478 _entryType(entryIndex) { |
467 return this._entryTypeByLevel[this._timelineData.entryLevels[entryIndex]]; | 479 return this._entryTypeByLevel[this._timelineData.entryLevels[entryIndex]]; |
468 } | 480 } |
469 | 481 |
470 /** | 482 /** |
471 * @override | 483 * @override |
472 * @param {number} entryIndex | 484 * @param {number} entryIndex |
473 * @return {?Element} | 485 * @return {?Element} |
474 */ | 486 */ |
475 prepareHighlightedEntryInfo(entryIndex) { | 487 prepareHighlightedEntryInfo(entryIndex) { |
476 var time = ''; | 488 var time = ''; |
477 var title; | 489 var title; |
478 var warning; | 490 var warning; |
479 var type = this._entryType(entryIndex); | 491 var type = this._entryType(entryIndex); |
480 if (type === Timeline.TimelineFlameChartEntryType.Event) { | 492 if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Event) { |
481 var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryI ndex]); | 493 var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryI ndex]); |
482 var totalTime = event.duration; | 494 var totalTime = event.duration; |
483 var selfTime = event.selfTime; | 495 var selfTime = event.selfTime; |
484 var /** @const */ eps = 1e-6; | 496 var /** @const */ eps = 1e-6; |
485 if (typeof totalTime === 'number') { | 497 if (typeof totalTime === 'number') { |
486 time = Math.abs(totalTime - selfTime) > eps && selfTime > eps ? | 498 time = Math.abs(totalTime - selfTime) > eps && selfTime > eps ? |
487 Common.UIString( | 499 Common.UIString( |
488 '%s (self %s)', Number.millisToString(totalTime, true), Number.m illisToString(selfTime, true)) : | 500 '%s (self %s)', Number.millisToString(totalTime, true), Number.m illisToString(selfTime, true)) : |
489 Number.millisToString(totalTime, true); | 501 Number.millisToString(totalTime, true); |
490 } | 502 } |
491 title = this.entryTitle(entryIndex); | 503 title = this.entryTitle(entryIndex); |
492 warning = Timeline.TimelineUIUtils.eventWarning(event); | 504 warning = Timeline.TimelineUIUtils.eventWarning(event); |
493 } else if (type === Timeline.TimelineFlameChartEntryType.Frame) { | 505 } else if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Frame) { |
494 var frame = /** @type {!TimelineModel.TimelineFrame} */ (this._entryData[e ntryIndex]); | 506 var frame = /** @type {!TimelineModel.TimelineFrame} */ (this._entryData[e ntryIndex]); |
495 time = Common.UIString( | 507 time = Common.UIString( |
496 '%s ~ %.0f\xa0fps', Number.preciseMillisToString(frame.duration, 1), ( 1000 / frame.duration)); | 508 '%s ~ %.0f\xa0fps', Number.preciseMillisToString(frame.duration, 1), ( 1000 / frame.duration)); |
497 title = frame.idle ? Common.UIString('Idle Frame') : Common.UIString('Fram e'); | 509 title = frame.idle ? Common.UIString('Idle Frame') : Common.UIString('Fram e'); |
498 if (frame.hasWarnings()) { | 510 if (frame.hasWarnings()) { |
499 warning = createElement('span'); | 511 warning = createElement('span'); |
500 warning.textContent = Common.UIString('Long frame'); | 512 warning.textContent = Common.UIString('Long frame'); |
501 } | 513 } |
502 } else { | 514 } else { |
503 return null; | 515 return null; |
(...skipping 21 matching lines...) Expand all Loading... | |
525 var color = cache.get(key); | 537 var color = cache.get(key); |
526 if (color) | 538 if (color) |
527 return color; | 539 return color; |
528 var parsedColor = Common.Color.parse(lookupColor(key)); | 540 var parsedColor = Common.Color.parse(lookupColor(key)); |
529 color = parsedColor.setAlpha(0.7).asString(Common.Color.Format.RGBA) || '' ; | 541 color = parsedColor.setAlpha(0.7).asString(Common.Color.Format.RGBA) || '' ; |
530 cache.set(key, color); | 542 cache.set(key, color); |
531 return color; | 543 return color; |
532 } | 544 } |
533 | 545 |
534 var type = this._entryType(entryIndex); | 546 var type = this._entryType(entryIndex); |
535 if (type === Timeline.TimelineFlameChartEntryType.Event) { | 547 if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Event) { |
caseq
2017/05/10 18:40:28
nit: consider aliasing EntryType to something.
alph
2017/05/10 19:22:38
Done.
| |
536 var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryI ndex]); | 548 var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryI ndex]); |
537 if (!SDK.TracingModel.isAsyncPhase(event.phase)) | 549 if (!SDK.TracingModel.isAsyncPhase(event.phase)) |
538 return this._colorForEvent(event); | 550 return this._colorForEvent(event); |
539 if (event.hasCategory(TimelineModel.TimelineModel.Category.Console) || | 551 if (event.hasCategory(TimelineModel.TimelineModel.Category.Console) || |
540 event.hasCategory(TimelineModel.TimelineModel.Category.UserTiming)) | 552 event.hasCategory(TimelineModel.TimelineModel.Category.UserTiming)) |
541 return this._consoleColorGenerator.colorForID(event.name); | 553 return this._consoleColorGenerator.colorForID(event.name); |
542 if (event.hasCategory(TimelineModel.TimelineModel.Category.LatencyInfo)) { | 554 if (event.hasCategory(TimelineModel.TimelineModel.Category.LatencyInfo)) { |
543 var phase = | 555 var phase = |
544 TimelineModel.TimelineIRModel.phaseForEvent(event) || TimelineModel. TimelineIRModel.Phases.Uncategorized; | 556 TimelineModel.TimelineIRModel.phaseForEvent(event) || TimelineModel. TimelineIRModel.Phases.Uncategorized; |
545 return patchColorAndCache( | 557 return patchColorAndCache( |
546 this._asyncColorByInteractionPhase, phase, Timeline.TimelineUIUtils. interactionPhaseColor); | 558 this._asyncColorByInteractionPhase, phase, Timeline.TimelineUIUtils. interactionPhaseColor); |
547 } | 559 } |
548 var category = Timeline.TimelineUIUtils.eventStyle(event).category; | 560 var category = Timeline.TimelineUIUtils.eventStyle(event).category; |
549 return patchColorAndCache(this._asyncColorByCategory, category, () => cate gory.color); | 561 return patchColorAndCache(this._asyncColorByCategory, category, () => cate gory.color); |
550 } | 562 } |
551 if (type === Timeline.TimelineFlameChartEntryType.Frame) | 563 if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Frame) |
552 return 'white'; | 564 return 'white'; |
553 if (type === Timeline.TimelineFlameChartEntryType.InteractionRecord) | 565 if (type === Timeline.TimelineFlameChartDataProvider.EntryType.InteractionRe cord) |
554 return 'transparent'; | 566 return 'transparent'; |
555 if (type === Timeline.TimelineFlameChartEntryType.ExtensionEvent) { | 567 if (type === Timeline.TimelineFlameChartDataProvider.EntryType.ExtensionEven t) { |
556 var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryI ndex]); | 568 var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryI ndex]); |
557 return this._extensionColorGenerator.colorForID(event.name); | 569 return this._extensionColorGenerator.colorForID(event.name); |
558 } | 570 } |
559 return ''; | 571 return ''; |
560 } | 572 } |
561 | 573 |
562 /** | 574 /** |
563 * @param {number} entryIndex | 575 * @param {number} entryIndex |
564 * @param {!CanvasRenderingContext2D} context | 576 * @param {!CanvasRenderingContext2D} context |
565 * @param {?string} text | 577 * @param {?string} text |
566 * @param {number} barX | 578 * @param {number} barX |
567 * @param {number} barY | 579 * @param {number} barY |
568 * @param {number} barWidth | 580 * @param {number} barWidth |
569 * @param {number} barHeight | 581 * @param {number} barHeight |
570 */ | 582 */ |
571 _drawFrame(entryIndex, context, text, barX, barY, barWidth, barHeight) { | 583 _drawFrame(entryIndex, context, text, barX, barY, barWidth, barHeight) { |
572 var /** @const */ hPadding = 1; | 584 var /** @const */ hPadding = 1; |
573 var frame = /** @type {!TimelineModel.TimelineFrame} */ (this._entryData[ent ryIndex]); | 585 var frame = /** @type {!TimelineModel.TimelineFrame} */ (this._entryData[ent ryIndex]); |
574 barX += hPadding; | 586 barX += hPadding; |
575 barWidth -= 2 * hPadding; | 587 barWidth -= 2 * hPadding; |
576 context.fillStyle = frame.idle ? 'white' : (frame.hasWarnings() ? '#fad1d1' : '#d7f0d1'); | 588 context.fillStyle = frame.idle ? 'white' : (frame.hasWarnings() ? '#fad1d1' : '#d7f0d1'); |
577 context.fillRect(barX, barY, barWidth, barHeight); | 589 context.fillRect(barX, barY, barWidth, barHeight); |
578 | 590 |
579 var headerHeight = 17; | |
580 var frameDurationText = Number.preciseMillisToString(frame.duration, 1); | 591 var frameDurationText = Number.preciseMillisToString(frame.duration, 1); |
581 var textWidth = context.measureText(frameDurationText).width; | 592 var textWidth = context.measureText(frameDurationText).width; |
582 if (textWidth <= barWidth) { | 593 if (textWidth <= barWidth) { |
583 var font = this.entryFont(entryIndex); | |
584 if (font) | |
585 context.font = font; | |
586 context.fillStyle = this.textColor(entryIndex); | 594 context.fillStyle = this.textColor(entryIndex); |
587 context.fillText(frameDurationText, barX + (barWidth - textWidth) / 2, bar Y + headerHeight - 4); | 595 context.fillText(frameDurationText, barX + (barWidth - textWidth) / 2, bar Y + barHeight - 4); |
588 } | 596 } |
597 } | |
589 | 598 |
590 var imageHeight = barHeight - headerHeight; | 599 /** |
591 if (imageHeight < headerHeight) | 600 * @param {number} entryIndex |
601 * @param {!CanvasRenderingContext2D} context | |
602 * @param {number} barX | |
603 * @param {number} barY | |
604 * @param {number} barWidth | |
605 * @param {number} barHeight | |
606 */ | |
607 async _drawScreenshot(entryIndex, context, barX, barY, barWidth, barHeight) { | |
608 var screenshot = /** @type {!SDK.FilmStripModel.Frame} */ (this._entryData[e ntryIndex]); | |
609 if (!this._screenshotImageCache.has(screenshot)) { | |
610 this._screenshotImageCache.set(screenshot, null); | |
611 var data = await screenshot.imageDataPromise(); | |
612 var image = await UI.loadImageFromData(data); | |
613 this._screenshotImageCache.set(screenshot, image); | |
614 this.dispatchEventToListeners(Timeline.TimelineFlameChartDataProvider.Even ts.DataChanged); | |
592 return; | 615 return; |
593 if (!this._frameImageCache.has(frame)) { | |
594 this._frameImageCache.set(frame, null); // Mark the image promise is in f light. | |
595 var modelFrame = this._performanceModel.filmStripModelFrame(frame); | |
596 if (modelFrame) { | |
597 modelFrame.imageDataPromise().then(data => UI.loadImageFromData(data)).t hen(image => { | |
598 this._frameImageCache.set(frame, image); | |
599 this.dispatchEventToListeners(Timeline.TimelineFlameChartDataProvider. Events.DataChanged); | |
600 }); | |
601 } | |
602 } | 616 } |
603 var image = this._frameImageCache.get(frame); | 617 context.fillStyle = '#eee'; |
618 context.fillRect(barX, barY, barWidth, barHeight); | |
619 var image = this._screenshotImageCache.get(screenshot); | |
604 if (!image) | 620 if (!image) |
605 return; | 621 return; |
606 var imageX = barX; | 622 var imageX = barX + 1; |
607 var imageY = barY + headerHeight; | 623 var imageY = barY + 1; |
624 var imageHeight = barHeight - 2; | |
608 var scale = imageHeight / image.naturalHeight; | 625 var scale = imageHeight / image.naturalHeight; |
609 var imageWidth = image.naturalWidth * scale; | 626 var imageWidth = image.naturalWidth * scale; |
610 context.save(); | 627 context.save(); |
611 context.beginPath(); | 628 context.beginPath(); |
612 context.rect(imageX, imageY, barWidth, imageHeight); | 629 context.rect(imageX, imageY, barWidth - 2, imageHeight); |
613 context.clip(); | 630 context.clip(); |
614 context.drawImage(image, imageX, imageY, imageWidth, imageHeight); | 631 context.drawImage(image, imageX, imageY, imageWidth, imageHeight); |
615 context.restore(); | 632 context.restore(); |
616 } | 633 } |
617 | 634 |
618 /** | 635 /** |
619 * @override | 636 * @override |
620 * @param {number} entryIndex | 637 * @param {number} entryIndex |
621 * @param {!CanvasRenderingContext2D} context | 638 * @param {!CanvasRenderingContext2D} context |
622 * @param {?string} text | 639 * @param {?string} text |
623 * @param {number} barX | 640 * @param {number} barX |
624 * @param {number} barY | 641 * @param {number} barY |
625 * @param {number} barWidth | 642 * @param {number} barWidth |
626 * @param {number} barHeight | 643 * @param {number} barHeight |
627 * @param {number} unclippedBarX | 644 * @param {number} unclippedBarX |
628 * @param {number} timeToPixels | 645 * @param {number} timeToPixels |
629 * @return {boolean} | 646 * @return {boolean} |
630 */ | 647 */ |
631 decorateEntry(entryIndex, context, text, barX, barY, barWidth, barHeight, uncl ippedBarX, timeToPixels) { | 648 decorateEntry(entryIndex, context, text, barX, barY, barWidth, barHeight, uncl ippedBarX, timeToPixels) { |
632 var data = this._entryData[entryIndex]; | 649 var data = this._entryData[entryIndex]; |
633 var type = this._entryType(entryIndex); | 650 var type = this._entryType(entryIndex); |
634 if (type === Timeline.TimelineFlameChartEntryType.Frame) { | 651 |
652 if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Frame) { | |
caseq
2017/05/10 18:40:28
ditto.
alph
2017/05/10 19:22:38
Done.
| |
635 this._drawFrame(entryIndex, context, text, barX, barY, barWidth, barHeight ); | 653 this._drawFrame(entryIndex, context, text, barX, barY, barWidth, barHeight ); |
636 return true; | 654 return true; |
637 } | 655 } |
638 | 656 |
639 if (type === Timeline.TimelineFlameChartEntryType.InteractionRecord) { | 657 if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Screenshot) { |
658 this._drawScreenshot(entryIndex, context, barX, barY, barWidth, barHeight) ; | |
659 return true; | |
660 } | |
661 | |
662 if (type === Timeline.TimelineFlameChartDataProvider.EntryType.InteractionRe cord) { | |
640 var color = Timeline.TimelineUIUtils.interactionPhaseColor( | 663 var color = Timeline.TimelineUIUtils.interactionPhaseColor( |
641 /** @type {!TimelineModel.TimelineIRModel.Phases} */ (data)); | 664 /** @type {!TimelineModel.TimelineIRModel.Phases} */ (data)); |
642 context.fillStyle = color; | 665 context.fillStyle = color; |
643 context.fillRect(barX, barY, barWidth - 1, 2); | 666 context.fillRect(barX, barY, barWidth - 1, 2); |
644 context.fillRect(barX, barY - 3, 2, 3); | 667 context.fillRect(barX, barY - 3, 2, 3); |
645 context.fillRect(barX + barWidth - 3, barY - 3, 2, 3); | 668 context.fillRect(barX + barWidth - 3, barY - 3, 2, 3); |
646 return false; | 669 return false; |
647 } | 670 } |
648 | 671 |
649 if (type === Timeline.TimelineFlameChartEntryType.Event) { | 672 if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Event) { |
650 var event = /** @type {!SDK.TracingModel.Event} */ (data); | 673 var event = /** @type {!SDK.TracingModel.Event} */ (data); |
651 if (event.hasCategory(TimelineModel.TimelineModel.Category.LatencyInfo)) { | 674 if (event.hasCategory(TimelineModel.TimelineModel.Category.LatencyInfo)) { |
652 var timeWaitingForMainThread = TimelineModel.TimelineData.forEvent(event ).timeWaitingForMainThread; | 675 var timeWaitingForMainThread = TimelineModel.TimelineData.forEvent(event ).timeWaitingForMainThread; |
653 if (timeWaitingForMainThread) { | 676 if (timeWaitingForMainThread) { |
654 context.fillStyle = 'hsla(0, 70%, 60%, 1)'; | 677 context.fillStyle = 'hsla(0, 70%, 60%, 1)'; |
655 var width = Math.floor(unclippedBarX - barX + timeWaitingForMainThread * timeToPixels); | 678 var width = Math.floor(unclippedBarX - barX + timeWaitingForMainThread * timeToPixels); |
656 context.fillRect(barX, barY + barHeight - 3, width, 2); | 679 context.fillRect(barX, barY + barHeight - 3, width, 2); |
657 } | 680 } |
658 } | 681 } |
659 if (TimelineModel.TimelineData.forEvent(event).warning) | 682 if (TimelineModel.TimelineData.forEvent(event).warning) |
(...skipping 22 matching lines...) Expand all Loading... | |
682 return false; | 705 return false; |
683 } | 706 } |
684 | 707 |
685 /** | 708 /** |
686 * @override | 709 * @override |
687 * @param {number} entryIndex | 710 * @param {number} entryIndex |
688 * @return {boolean} | 711 * @return {boolean} |
689 */ | 712 */ |
690 forceDecoration(entryIndex) { | 713 forceDecoration(entryIndex) { |
691 var type = this._entryType(entryIndex); | 714 var type = this._entryType(entryIndex); |
692 if (type === Timeline.TimelineFlameChartEntryType.Frame) | 715 if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Frame) |
caseq
2017/05/10 18:40:28
ditto.
alph
2017/05/10 19:22:38
Done.
| |
716 return true; | |
717 if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Screenshot) | |
693 return true; | 718 return true; |
694 | 719 |
695 if (type === Timeline.TimelineFlameChartEntryType.Event) { | 720 if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Event) { |
696 var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryI ndex]); | 721 var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryI ndex]); |
697 return !!TimelineModel.TimelineData.forEvent(event).warning; | 722 return !!TimelineModel.TimelineData.forEvent(event).warning; |
698 } | 723 } |
699 return false; | 724 return false; |
700 } | 725 } |
701 | 726 |
702 /** | 727 /** |
703 * @param {!{title: string, model: !SDK.TracingModel}} entry | 728 * @param {!{title: string, model: !SDK.TracingModel}} entry |
704 */ | 729 */ |
705 appendExtensionEvents(entry) { | 730 appendExtensionEvents(entry) { |
706 this._extensionInfo.push(entry); | 731 this._extensionInfo.push(entry); |
707 if (this._timelineData) | 732 if (this._timelineData) |
708 this._innerAppendExtensionEvents(this._extensionInfo.length - 1); | 733 this._innerAppendExtensionEvents(this._extensionInfo.length - 1); |
709 } | 734 } |
710 | 735 |
711 /** | 736 /** |
712 * @param {number} index | 737 * @param {number} index |
713 */ | 738 */ |
714 _innerAppendExtensionEvents(index) { | 739 _innerAppendExtensionEvents(index) { |
715 var entry = this._extensionInfo[index]; | 740 var entry = this._extensionInfo[index]; |
716 var entryType = Timeline.TimelineFlameChartEntryType.ExtensionEvent; | 741 var entryType = Timeline.TimelineFlameChartDataProvider.EntryType.ExtensionE vent; |
717 var allThreads = [].concat(...entry.model.sortedProcesses().map(process => p rocess.sortedThreads())); | 742 var allThreads = [].concat(...entry.model.sortedProcesses().map(process => p rocess.sortedThreads())); |
718 if (!allThreads.length) | 743 if (!allThreads.length) |
719 return; | 744 return; |
720 | 745 |
721 this._appendHeader(entry.title, this._headerLevel1); | 746 this._appendHeader(entry.title, this._headerLevel1); |
722 for (let thread of allThreads) { | 747 for (let thread of allThreads) { |
723 this._appendAsyncEventsGroup(thread.name(), thread.asyncEvents(), this._he aderLevel2, entryType); | 748 this._appendAsyncEventsGroup(thread.name(), thread.asyncEvents(), this._he aderLevel2, entryType); |
724 this._appendSyncEvents(thread.events(), thread.name(), this._headerLevel2, entryType, false); | 749 this._appendSyncEvents(thread.events(), thread.name(), this._headerLevel2, entryType, false); |
725 } | 750 } |
726 } | 751 } |
(...skipping 111 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
838 this._timelineData.entryStartTimes[index] = segment.begin; | 863 this._timelineData.entryStartTimes[index] = segment.begin; |
839 } | 864 } |
840 | 865 |
841 /** | 866 /** |
842 * @param {number} entryIndex | 867 * @param {number} entryIndex |
843 * @return {?Timeline.TimelineSelection} | 868 * @return {?Timeline.TimelineSelection} |
844 */ | 869 */ |
845 createSelection(entryIndex) { | 870 createSelection(entryIndex) { |
846 var type = this._entryType(entryIndex); | 871 var type = this._entryType(entryIndex); |
847 var timelineSelection = null; | 872 var timelineSelection = null; |
848 if (type === Timeline.TimelineFlameChartEntryType.Event) { | 873 if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Event) { |
849 timelineSelection = Timeline.TimelineSelection.fromTraceEvent( | 874 timelineSelection = Timeline.TimelineSelection.fromTraceEvent( |
850 /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex])); | 875 /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex])); |
851 } else if (type === Timeline.TimelineFlameChartEntryType.Frame) { | 876 } else if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Frame) { |
852 timelineSelection = Timeline.TimelineSelection.fromFrame( | 877 timelineSelection = Timeline.TimelineSelection.fromFrame( |
853 /** @type {!TimelineModel.TimelineFrame} */ (this._entryData[entryInde x])); | 878 /** @type {!TimelineModel.TimelineFrame} */ (this._entryData[entryInde x])); |
854 } | 879 } |
855 if (timelineSelection) | 880 if (timelineSelection) |
856 this._lastSelection = new Timeline.TimelineFlameChartView.Selection(timeli neSelection, entryIndex); | 881 this._lastSelection = new Timeline.TimelineFlameChartView.Selection(timeli neSelection, entryIndex); |
857 return timelineSelection; | 882 return timelineSelection; |
858 } | 883 } |
859 | 884 |
860 /** | 885 /** |
861 * @override | 886 * @override |
(...skipping 92 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
954 */ | 979 */ |
955 _eventParent(event) { | 980 _eventParent(event) { |
956 return this._entryParent[event[Timeline.TimelineFlameChartDataProvider._inde xSymbol]] || null; | 981 return this._entryParent[event[Timeline.TimelineFlameChartDataProvider._inde xSymbol]] || null; |
957 } | 982 } |
958 | 983 |
959 /** | 984 /** |
960 * @param {number} entryIndex | 985 * @param {number} entryIndex |
961 * @return {?SDK.TracingModel.Event} | 986 * @return {?SDK.TracingModel.Event} |
962 */ | 987 */ |
963 eventByIndex(entryIndex) { | 988 eventByIndex(entryIndex) { |
964 return this._entryType(entryIndex) === Timeline.TimelineFlameChartEntryType. Event ? | 989 return this._entryType(entryIndex) === Timeline.TimelineFlameChartDataProvid er.EntryType.Event ? |
965 /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]) : | 990 /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]) : |
966 null; | 991 null; |
967 } | 992 } |
968 | 993 |
969 /** | 994 /** |
970 * @param {function(!SDK.TracingModel.Event):string} colorForEvent | 995 * @param {function(!SDK.TracingModel.Event):string} colorForEvent |
971 */ | 996 */ |
972 setEventColorMapping(colorForEvent) { | 997 setEventColorMapping(colorForEvent) { |
973 this._colorForEvent = colorForEvent; | 998 this._colorForEvent = colorForEvent; |
974 } | 999 } |
975 }; | 1000 }; |
976 | 1001 |
977 Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs = 0.001; | 1002 Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs = 0.001; |
978 Timeline.TimelineFlameChartDataProvider._indexSymbol = Symbol('index'); | 1003 Timeline.TimelineFlameChartDataProvider._indexSymbol = Symbol('index'); |
979 | 1004 |
980 /** @enum {symbol} */ | 1005 /** @enum {symbol} */ |
981 Timeline.TimelineFlameChartDataProvider.Events = { | 1006 Timeline.TimelineFlameChartDataProvider.Events = { |
982 DataChanged: Symbol('DataChanged') | 1007 DataChanged: Symbol('DataChanged') |
983 }; | 1008 }; |
1009 | |
1010 /** @enum {symbol} */ | |
1011 Timeline.TimelineFlameChartDataProvider.EntryType = { | |
1012 Frame: Symbol('Frame'), | |
1013 Event: Symbol('Event'), | |
1014 InteractionRecord: Symbol('InteractionRecord'), | |
1015 ExtensionEvent: Symbol('ExtensionEvent'), | |
1016 Screenshot: Symbol('Screenshot'), | |
1017 }; | |
OLD | NEW |