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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/timeline/TimelineDetailsView.js

Issue 2886393003: DevTools: Use badges to render products in timeline details. (Closed)
Patch Set: rebaseline Created 3 years, 7 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 2017 The Chromium Authors. All rights reserved. 1 // Copyright 2017 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 /** 5 /**
6 * @unrestricted 6 * @unrestricted
7 */ 7 */
8 Timeline.TimelineDetailsView = class extends UI.VBox { 8 Timeline.TimelineDetailsView = class extends UI.VBox {
9 /** 9 /**
10 * @param {!Array<!TimelineModel.TimelineModelFilter>} filters 10 * @param {!Array<!TimelineModel.TimelineModelFilter>} filters
11 * @param {!Timeline.TimelineModeViewDelegate} delegate 11 * @param {!Timeline.TimelineModeViewDelegate} delegate
12 */ 12 */
13 constructor(filters, delegate) { 13 constructor(filters, delegate) {
14 super(); 14 super();
15 this.element.classList.add('timeline-details'); 15 this.element.classList.add('timeline-details');
16 16
17 this._detailsLinkifier = new Components.Linkifier(); 17 this._detailsLinkifier = new Components.Linkifier();
18 this._badgePool = new ProductRegistry.BadgePool();
18 19
19 this._tabbedPane = new UI.TabbedPane(); 20 this._tabbedPane = new UI.TabbedPane();
20 this._tabbedPane.show(this.element); 21 this._tabbedPane.show(this.element);
21 22
22 const tabIds = Timeline.TimelineDetailsView.Tab; 23 const tabIds = Timeline.TimelineDetailsView.Tab;
23 24
24 this._defaultDetailsWidget = new UI.VBox(); 25 this._defaultDetailsWidget = new UI.VBox();
25 this._defaultDetailsWidget.element.classList.add('timeline-details-view'); 26 this._defaultDetailsWidget.element.classList.add('timeline-details-view');
26 this._defaultDetailsContentElement = 27 this._defaultDetailsContentElement =
27 this._defaultDetailsWidget.element.createChild('div', 'timeline-details- view-body vbox'); 28 this._defaultDetailsWidget.element.createChild('div', 'timeline-details- view-body vbox');
(...skipping 77 matching lines...) Expand 10 before | Expand all | Expand 10 after
105 */ 106 */
106 setPreferredTab(tabId) { 107 setPreferredTab(tabId) {
107 this._preferredTabId = tabId; 108 this._preferredTabId = tabId;
108 } 109 }
109 110
110 /** 111 /**
111 * @param {!Timeline.TimelineSelection} selection 112 * @param {!Timeline.TimelineSelection} selection
112 */ 113 */
113 setSelection(selection) { 114 setSelection(selection) {
114 this._detailsLinkifier.reset(); 115 this._detailsLinkifier.reset();
116 this._badgePool.reset();
115 this._selection = selection; 117 this._selection = selection;
116 switch (this._selection.type()) { 118 switch (this._selection.type()) {
117 case Timeline.TimelineSelection.Type.TraceEvent: 119 case Timeline.TimelineSelection.Type.TraceEvent:
118 var event = /** @type {!SDK.TracingModel.Event} */ (this._selection.obje ct()); 120 var event = /** @type {!SDK.TracingModel.Event} */ (this._selection.obje ct());
119 Timeline.TimelineUIUtils.buildTraceEventDetails( 121 Timeline.TimelineUIUtils
120 event, this._model.timelineModel(), this._detailsLinkifier, true) 122 .buildTraceEventDetails(event, this._model.timelineModel(), this._de tailsLinkifier, this._badgePool, true)
121 .then(fragment => this._appendDetailsTabsForTraceEventAndShowDet ails(event, fragment)); 123 .then(fragment => this._appendDetailsTabsForTraceEventAndShowDetails (event, fragment));
122 break; 124 break;
123 case Timeline.TimelineSelection.Type.Frame: 125 case Timeline.TimelineSelection.Type.Frame:
124 var frame = /** @type {!TimelineModel.TimelineFrame} */ (this._selection .object()); 126 var frame = /** @type {!TimelineModel.TimelineFrame} */ (this._selection .object());
125 var filmStripFrame = this._model.filmStripModelFrame(frame); 127 var filmStripFrame = this._model.filmStripModelFrame(frame);
126 this._setContent(Timeline.TimelineUIUtils.generateDetailsContentForFrame (frame, filmStripFrame)); 128 this._setContent(Timeline.TimelineUIUtils.generateDetailsContentForFrame (frame, filmStripFrame));
127 if (frame.layerTree) { 129 if (frame.layerTree) {
128 var layersView = this._layersView(); 130 var layersView = this._layersView();
129 layersView.showLayerTree(frame.layerTree); 131 layersView.showLayerTree(frame.layerTree);
130 if (!this._tabbedPane.hasTab(Timeline.TimelineDetailsView.Tab.LayerVie wer)) 132 if (!this._tabbedPane.hasTab(Timeline.TimelineDetailsView.Tab.LayerVie wer))
131 this._appendTab(Timeline.TimelineDetailsView.Tab.LayerViewer, Common .UIString('Layers'), layersView); 133 this._appendTab(Timeline.TimelineDetailsView.Tab.LayerViewer, Common .UIString('Layers'), layersView);
132 } 134 }
133 break; 135 break;
134 case Timeline.TimelineSelection.Type.NetworkRequest: 136 case Timeline.TimelineSelection.Type.NetworkRequest:
135 var request = /** @type {!TimelineModel.TimelineModel.NetworkRequest} */ (this._selection.object()); 137 var request = /** @type {!TimelineModel.TimelineModel.NetworkRequest} */ (this._selection.object());
136 Timeline.TimelineUIUtils 138 Timeline.TimelineUIUtils
137 .buildNetworkRequestDetails(request, this._model.timelineModel(), th is._detailsLinkifier) 139 .buildNetworkRequestDetails(request, this._model.timelineModel(), th is._detailsLinkifier, this._badgePool)
138 .then(this._setContent.bind(this)); 140 .then(this._setContent.bind(this));
139 break; 141 break;
140 case Timeline.TimelineSelection.Type.Range: 142 case Timeline.TimelineSelection.Type.Range:
141 this._updateSelectedRangeStats(this._selection.startTime(), this._select ion.endTime()); 143 this._updateSelectedRangeStats(this._selection.startTime(), this._select ion.endTime());
142 break; 144 break;
143 } 145 }
144 146
145 this._updateContents(); 147 this._updateContents();
146 } 148 }
147 149
(...skipping 83 matching lines...) Expand 10 before | Expand all | Expand 10 after
231 * @enum {string} 233 * @enum {string}
232 */ 234 */
233 Timeline.TimelineDetailsView.Tab = { 235 Timeline.TimelineDetailsView.Tab = {
234 Details: 'Details', 236 Details: 'Details',
235 EventLog: 'EventLog', 237 EventLog: 'EventLog',
236 CallTree: 'CallTree', 238 CallTree: 'CallTree',
237 BottomUp: 'BottomUp', 239 BottomUp: 'BottomUp',
238 PaintProfiler: 'PaintProfiler', 240 PaintProfiler: 'PaintProfiler',
239 LayerViewer: 'LayerViewer' 241 LayerViewer: 'LayerViewer'
240 }; 242 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698