OLD | NEW |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 Timeline.FlameChartStyle = { | 5 Timeline.FlameChartStyle = { |
6 textColor: '#333' | 6 textColor: '#333' |
7 }; | 7 }; |
8 | 8 |
9 /** | 9 /** |
10 * @enum {symbol} | 10 * @enum {symbol} |
11 */ | 11 */ |
12 Timeline.TimelineFlameChartEntryType = { | 12 Timeline.TimelineFlameChartEntryType = { |
13 Frame: Symbol('Frame'), | 13 Frame: Symbol('Frame'), |
14 Event: Symbol('Event'), | 14 Event: Symbol('Event'), |
15 InteractionRecord: Symbol('InteractionRecord'), | 15 InteractionRecord: Symbol('InteractionRecord'), |
16 ExtensionEvent: Symbol('ExtensionEvent') | 16 ExtensionEvent: Symbol('ExtensionEvent') |
17 }; | 17 }; |
18 | 18 |
19 /** | 19 /** |
20 * @implements {UI.FlameChartMarker} | 20 * @implements {PerfUI.FlameChartMarker} |
21 * @unrestricted | 21 * @unrestricted |
22 */ | 22 */ |
23 Timeline.TimelineFlameChartMarker = class { | 23 Timeline.TimelineFlameChartMarker = class { |
24 /** | 24 /** |
25 * @param {number} startTime | 25 * @param {number} startTime |
26 * @param {number} startOffset | 26 * @param {number} startOffset |
27 * @param {!Timeline.TimelineMarkerStyle} style | 27 * @param {!Timeline.TimelineMarkerStyle} style |
28 */ | 28 */ |
29 constructor(startTime, startOffset, style) { | 29 constructor(startTime, startOffset, style) { |
30 this._startTime = startTime; | 30 this._startTime = startTime; |
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
89 context.setLineDash(this._style.dashStyle); | 89 context.setLineDash(this._style.dashStyle); |
90 context.lineTo(x, context.canvas.height); | 90 context.lineTo(x, context.canvas.height); |
91 context.stroke(); | 91 context.stroke(); |
92 } | 92 } |
93 context.restore(); | 93 context.restore(); |
94 } | 94 } |
95 }; | 95 }; |
96 | 96 |
97 /** | 97 /** |
98 * @implements {Timeline.TimelineModeView} | 98 * @implements {Timeline.TimelineModeView} |
99 * @implements {UI.FlameChartDelegate} | 99 * @implements {PerfUI.FlameChartDelegate} |
100 * @unrestricted | 100 * @unrestricted |
101 */ | 101 */ |
102 Timeline.TimelineFlameChartView = class extends UI.VBox { | 102 Timeline.TimelineFlameChartView = class extends UI.VBox { |
103 /** | 103 /** |
104 * @param {!Timeline.TimelineModeViewDelegate} delegate | 104 * @param {!Timeline.TimelineModeViewDelegate} delegate |
105 * @param {!TimelineModel.TimelineModel} timelineModel | 105 * @param {!TimelineModel.TimelineModel} timelineModel |
106 * @param {!TimelineModel.TimelineFrameModel} frameModel | 106 * @param {!TimelineModel.TimelineFrameModel} frameModel |
107 * @param {!TimelineModel.TimelineIRModel} irModel | 107 * @param {!TimelineModel.TimelineIRModel} irModel |
108 * @param {!Array<!{title: string, model: !SDK.TracingModel}>} extensionModels | 108 * @param {!Array<!{title: string, model: !SDK.TracingModel}>} extensionModels |
109 * @param {!Array<!TimelineModel.TimelineModel.Filter>} filters | 109 * @param {!Array<!TimelineModel.TimelineModel.Filter>} filters |
110 */ | 110 */ |
111 constructor(delegate, timelineModel, frameModel, irModel, extensionModels, fil
ters) { | 111 constructor(delegate, timelineModel, frameModel, irModel, extensionModels, fil
ters) { |
112 super(); | 112 super(); |
113 this.element.classList.add('timeline-flamechart'); | 113 this.element.classList.add('timeline-flamechart'); |
114 this._delegate = delegate; | 114 this._delegate = delegate; |
115 this._model = timelineModel; | 115 this._model = timelineModel; |
116 this._extensionModels = extensionModels; | 116 this._extensionModels = extensionModels; |
117 this._splitWidget = new UI.SplitWidget(false, false, 'timelineFlamechartMain
View', 150); | 117 this._splitWidget = new UI.SplitWidget(false, false, 'timelineFlamechartMain
View', 150); |
118 | 118 |
119 this._dataProvider = new Timeline.TimelineFlameChartDataProvider(this._model
, frameModel, irModel, filters); | 119 this._dataProvider = new Timeline.TimelineFlameChartDataProvider(this._model
, frameModel, irModel, filters); |
120 var mainViewGroupExpansionSetting = Common.settings.createSetting('timelineF
lamechartMainViewGroupExpansion', {}); | 120 var mainViewGroupExpansionSetting = Common.settings.createSetting('timelineF
lamechartMainViewGroupExpansion', {}); |
121 this._mainView = new UI.FlameChart(this._dataProvider, this, mainViewGroupEx
pansionSetting); | 121 this._mainView = new PerfUI.FlameChart(this._dataProvider, this, mainViewGro
upExpansionSetting); |
122 this._mainView.alwaysShowVerticalScroll(); | 122 this._mainView.alwaysShowVerticalScroll(); |
123 this._mainView.enableRuler(false); | 123 this._mainView.enableRuler(false); |
124 | 124 |
125 var networkViewGroupExpansionSetting = | 125 var networkViewGroupExpansionSetting = |
126 Common.settings.createSetting('timelineFlamechartNetworkViewGroupExpansi
on', {}); | 126 Common.settings.createSetting('timelineFlamechartNetworkViewGroupExpansi
on', {}); |
127 this._networkDataProvider = new Timeline.TimelineFlameChartNetworkDataProvid
er(this._model); | 127 this._networkDataProvider = new Timeline.TimelineFlameChartNetworkDataProvid
er(this._model); |
128 this._networkView = new UI.FlameChart(this._networkDataProvider, this, netwo
rkViewGroupExpansionSetting); | 128 this._networkView = new PerfUI.FlameChart(this._networkDataProvider, this, n
etworkViewGroupExpansionSetting); |
129 this._networkView.alwaysShowVerticalScroll(); | 129 this._networkView.alwaysShowVerticalScroll(); |
130 networkViewGroupExpansionSetting.addChangeListener(this.resizeToPreferredHei
ghts.bind(this)); | 130 networkViewGroupExpansionSetting.addChangeListener(this.resizeToPreferredHei
ghts.bind(this)); |
131 | 131 |
132 const networkPane = new UI.VBox(); | 132 const networkPane = new UI.VBox(); |
133 networkPane.setMinimumSize(23, 23); | 133 networkPane.setMinimumSize(23, 23); |
134 this._networkView.show(networkPane.element); | 134 this._networkView.show(networkPane.element); |
135 this._splitResizer = networkPane.element.createChild('div', 'timeline-flamec
hart-resizer'); | 135 this._splitResizer = networkPane.element.createChild('div', 'timeline-flamec
hart-resizer'); |
136 this._splitWidget.hideDefaultResizer(); | 136 this._splitWidget.hideDefaultResizer(); |
137 this._splitWidget.installResizer(this._splitResizer); | 137 this._splitWidget.installResizer(this._splitResizer); |
138 | 138 |
139 this._splitWidget.setMainWidget(this._mainView); | 139 this._splitWidget.setMainWidget(this._mainView); |
140 this._splitWidget.setSidebarWidget(networkPane); | 140 this._splitWidget.setSidebarWidget(networkPane); |
141 this._splitWidget.show(this.element); | 141 this._splitWidget.show(this.element); |
142 | 142 |
143 this._onMainEntrySelected = this._onEntrySelected.bind(this, this._dataProvi
der); | 143 this._onMainEntrySelected = this._onEntrySelected.bind(this, this._dataProvi
der); |
144 this._onNetworkEntrySelected = this._onEntrySelected.bind(this, this._networ
kDataProvider); | 144 this._onNetworkEntrySelected = this._onEntrySelected.bind(this, this._networ
kDataProvider); |
145 this._mainView.addEventListener(UI.FlameChart.Events.EntrySelected, this._on
MainEntrySelected, this); | 145 this._mainView.addEventListener(PerfUI.FlameChart.Events.EntrySelected, this
._onMainEntrySelected, this); |
146 this._networkView.addEventListener(UI.FlameChart.Events.EntrySelected, this.
_onNetworkEntrySelected, this); | 146 this._networkView.addEventListener(PerfUI.FlameChart.Events.EntrySelected, t
his._onNetworkEntrySelected, this); |
147 this._nextExtensionIndex = 0; | 147 this._nextExtensionIndex = 0; |
148 | 148 |
149 Bindings.blackboxManager.addChangeListener(this.refreshRecords, this); | 149 Bindings.blackboxManager.addChangeListener(this.refreshRecords, this); |
150 } | 150 } |
151 | 151 |
152 /** | 152 /** |
153 * @override | 153 * @override |
154 */ | 154 */ |
155 dispose() { | 155 dispose() { |
156 this._mainView.removeEventListener(UI.FlameChart.Events.EntrySelected, this.
_onMainEntrySelected, this); | 156 this._mainView.removeEventListener(PerfUI.FlameChart.Events.EntrySelected, t
his._onMainEntrySelected, this); |
157 this._networkView.removeEventListener(UI.FlameChart.Events.EntrySelected, th
is._onNetworkEntrySelected, this); | 157 this._networkView.removeEventListener(PerfUI.FlameChart.Events.EntrySelected
, this._onNetworkEntrySelected, this); |
158 Bindings.blackboxManager.removeChangeListener(this.refreshRecords, this); | 158 Bindings.blackboxManager.removeChangeListener(this.refreshRecords, this); |
159 } | 159 } |
160 | 160 |
161 /** | 161 /** |
162 * @override | 162 * @override |
163 * @return {?Element} | 163 * @return {?Element} |
164 */ | 164 */ |
165 resizerElement() { | 165 resizerElement() { |
166 return null; | 166 return null; |
167 } | 167 } |
(...skipping 20 matching lines...) Expand all Loading... |
188 * @override | 188 * @override |
189 */ | 189 */ |
190 refreshRecords() { | 190 refreshRecords() { |
191 this._dataProvider.reset(); | 191 this._dataProvider.reset(); |
192 this._nextExtensionIndex = 0; | 192 this._nextExtensionIndex = 0; |
193 this.extensionDataAdded(); | 193 this.extensionDataAdded(); |
194 this._mainView.scheduleUpdate(); | 194 this._mainView.scheduleUpdate(); |
195 | 195 |
196 this._networkDataProvider.reset(); | 196 this._networkDataProvider.reset(); |
197 if (this._networkDataProvider.isEmpty()) { | 197 if (this._networkDataProvider.isEmpty()) { |
198 this._mainView.enableRuler(true); | 198 this._mainView.enableRuler(true); |
199 this._splitWidget.hideSidebar(); | 199 this._splitWidget.hideSidebar(); |
200 } else { | 200 } else { |
201 this._mainView.enableRuler(false); | 201 this._mainView.enableRuler(false); |
202 this._splitWidget.showBoth(); | 202 this._splitWidget.showBoth(); |
203 this.resizeToPreferredHeights(); | 203 this.resizeToPreferredHeights(); |
204 } | 204 } |
205 this._networkView.scheduleUpdate(); | 205 this._networkView.scheduleUpdate(); |
206 } | 206 } |
207 | 207 |
208 /** | 208 /** |
209 * @override | 209 * @override |
210 */ | 210 */ |
211 extensionDataAdded() { | 211 extensionDataAdded() { |
212 while (this._nextExtensionIndex < this._extensionModels.length) | 212 while (this._nextExtensionIndex < this._extensionModels.length) |
213 this._dataProvider.appendExtensionEvents(this._extensionModels[this._nextE
xtensionIndex++]); | 213 this._dataProvider.appendExtensionEvents(this._extensionModels[this._nextE
xtensionIndex++]); |
(...skipping 73 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
287 * @param {?Timeline.TimelineSelection} selection | 287 * @param {?Timeline.TimelineSelection} selection |
288 */ | 288 */ |
289 setSelection(selection) { | 289 setSelection(selection) { |
290 var index = this._dataProvider.entryIndexForSelection(selection); | 290 var index = this._dataProvider.entryIndexForSelection(selection); |
291 this._mainView.setSelectedEntry(index); | 291 this._mainView.setSelectedEntry(index); |
292 index = this._networkDataProvider.entryIndexForSelection(selection); | 292 index = this._networkDataProvider.entryIndexForSelection(selection); |
293 this._networkView.setSelectedEntry(index); | 293 this._networkView.setSelectedEntry(index); |
294 } | 294 } |
295 | 295 |
296 /** | 296 /** |
297 * @param {!UI.FlameChartDataProvider} dataProvider | 297 * @param {!PerfUI.FlameChartDataProvider} dataProvider |
298 * @param {!Common.Event} event | 298 * @param {!Common.Event} event |
299 */ | 299 */ |
300 _onEntrySelected(dataProvider, event) { | 300 _onEntrySelected(dataProvider, event) { |
301 var entryIndex = /** @type{number} */ (event.data); | 301 var entryIndex = /** @type{number} */ (event.data); |
302 this._delegate.select(dataProvider.createSelection(entryIndex)); | 302 this._delegate.select(dataProvider.createSelection(entryIndex)); |
303 } | 303 } |
304 | 304 |
305 resizeToPreferredHeights() { | 305 resizeToPreferredHeights() { |
306 this._splitWidget.setSidebarSize( | 306 this._splitWidget.setSidebarSize( |
307 this._networkDataProvider.preferredHeight() + this._splitResizer.clientH
eight + UI.FlameChart.HeaderHeight + 2); | 307 this._networkDataProvider.preferredHeight() + this._splitResizer.clientH
eight + PerfUI.FlameChart.HeaderHeight + |
| 308 2); |
308 } | 309 } |
309 }; | 310 }; |
310 | 311 |
311 /** | 312 /** |
312 * @unrestricted | 313 * @unrestricted |
313 */ | 314 */ |
314 Timeline.TimelineFlameChartView.Selection = class { | 315 Timeline.TimelineFlameChartView.Selection = class { |
315 /** | 316 /** |
316 * @param {!Timeline.TimelineSelection} selection | 317 * @param {!Timeline.TimelineSelection} selection |
317 * @param {number} entryIndex | 318 * @param {number} entryIndex |
318 */ | 319 */ |
319 constructor(selection, entryIndex) { | 320 constructor(selection, entryIndex) { |
320 this.timelineSelection = selection; | 321 this.timelineSelection = selection; |
321 this.entryIndex = entryIndex; | 322 this.entryIndex = entryIndex; |
322 } | 323 } |
323 }; | 324 }; |
OLD | NEW |