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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartView.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 // 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
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
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
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 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698