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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: tracing/tracing/ui/analysis/analysis_view.html

Issue 2023283002: [polymer] Rewrite the analysis tab view (Closed) Base URL: git@github.com:zeptonaut/catapult.git@polymer10_rewrite_tab_view2
Patch Set: Created 4 years, 6 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
« tracing/tracing/ui/analysis/alert_sub_view.html ('K') | « tracing/tracing/ui/analysis/alert_sub_view.html ('k') | tracing/tracing/ui/base/tab_view.html » ('j') | tracing/tracing/ui/base/tab_view.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <!-- 2 <!--
3 Copyright (c) 2014 The Chromium Authors. All rights reserved. 3 Copyright (c) 2014 The Chromium Authors. All rights reserved.
4 Use of this source code is governed by a BSD-style license that can be 4 Use of this source code is governed by a BSD-style license that can be
5 found in the LICENSE file. 5 found in the LICENSE file.
6 --> 6 -->
7 7
8 <link rel="import" href="/tracing/base/iteration_helpers.html">
9 <link rel="import" href="/tracing/model/event_set.html"> 8 <link rel="import" href="/tracing/model/event_set.html">
10 <link rel="import" href="/tracing/ui/analysis/alert_sub_view.html"> 9 <link rel="import" href="/tracing/ui/analysis/alert_sub_view.html">
11 <link rel="import" href="/tracing/ui/analysis/analysis_sub_view.html"> 10 <link rel="import" href="/tracing/ui/analysis/analysis_sub_view.html">
12 <link rel="import" 11 <link rel="import"
13 href="/tracing/ui/analysis/container_memory_dump_sub_view.html"> 12 href="/tracing/ui/analysis/container_memory_dump_sub_view.html">
14 <link rel="import" href="/tracing/ui/analysis/counter_sample_sub_view.html"> 13 <link rel="import" href="/tracing/ui/analysis/counter_sample_sub_view.html">
15 <link rel="import" href="/tracing/ui/analysis/layout_tree_sub_view.html"> 14 <link rel="import" href="/tracing/ui/analysis/layout_tree_sub_view.html">
16 <link rel="import" href="/tracing/ui/analysis/multi_async_slice_sub_view.html"> 15 <link rel="import" href="/tracing/ui/analysis/multi_async_slice_sub_view.html">
17 <link rel="import" href="/tracing/ui/analysis/multi_cpu_slice_sub_view.html"> 16 <link rel="import" href="/tracing/ui/analysis/multi_cpu_slice_sub_view.html">
18 <link rel="import" href="/tracing/ui/analysis/multi_flow_event_sub_view.html"> 17 <link rel="import" href="/tracing/ui/analysis/multi_flow_event_sub_view.html">
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after
72 } 71 }
73 </style> 72 </style>
74 <content></content> 73 <content></content>
75 </template> 74 </template>
76 </dom-module> 75 </dom-module>
77 <script> 76 <script>
78 'use strict'; 77 'use strict';
79 (function() { 78 (function() {
80 var EventRegistry = tr.model.EventRegistry; 79 var EventRegistry = tr.model.EventRegistry;
81 80
81 /** Returns the label that goes next to the list of tabs. */
82 function getTabStripLabel(numEvents) {
83 if (!numEvents)
petrcermak 2016/06/01 16:47:09 I'd prefer checking numEvents === 0. Alternatively
charliea (OOO until 10-5) 2016/06/01 17:33:02 Done.
84 return 'Nothing selected. Tap stuff.';
85 else if (numEvents === 1)
86 return '1 item selected.';
87 return numEvents + ' items selected.';
88 }
89
90 /**
91 * Returns the tab label for the analysis sub view associated with the
petrcermak 2016/06/01 16:47:09 nit: I think it should be "sub-view" everywhere (h
charliea (OOO until 10-5) 2016/06/01 17:33:03 Done.
92 * specified event type and number of events.
93 */
94 function getTabLabel(eventTypeName, numEvents) {
95 var camelLabel = numEvents === 1 ?
96 EventRegistry.getUserFriendlySingularName(eventTypeName) :
97 EventRegistry.getUserFriendlyPluralName(eventTypeName);
98 return camelLabel + ' (' + numEvents + ')';
99 }
100
101 /**
102 * Returns the HTML tag for the analysis sub view associated with the
103 * specified event type and number of events.
104 */
105 function getSubViewTagName(eventTypeName, numEvents) {
106 var eventTypeInfo =
107 EventRegistry.getEventTypeInfoByTypeName(eventTypeName);
108 return numEvents === 1 ?
109 eventTypeInfo.metadata.singleViewElementName :
110 eventTypeInfo.metadata.multiViewElementName;
111 }
112
113 /**
114 * Returns a new analysis sub view for the selection and throws an error if no
115 * such sub view exists.
116 */
117 function createSubView(eventTypeName, selection) {
118 var subView = document.createElement(
119 getSubViewTagName(eventTypeName, selection.length));
120
121 // Unregistered elements with valid names (i.e. names that have a hyphen
122 // in them) that are instantiated inherit from HTMLElement. Unregistered
petrcermak 2016/06/01 16:47:09 s/instantiated inherit from/instantiated from/ ?
charliea (OOO until 10-5) 2016/06/01 17:33:03 Done.
123 // elements with invalid names inherit from HTMLUnknownElement.
124 if (subView.constructor === HTMLElement ||
125 subView.constructor === HTMLUnknownElement)
126 throw new Error('Element not registered: ' + tagName);
127
128 subView.tabLabel = getTabLabel(eventTypeName, selection.length);
129 subView.selection = selection;
130 return subView;
131 }
132
82 Polymer({ 133 Polymer({
83 is: 'tr-ui-a-analysis-view', 134 is: 'tr-ui-a-analysis-view',
84 135
85 ready: function() { 136 ready: function() {
137 this.brushingStateController_ = undefined;
138 this.lastSelection_ = undefined;
86 this.tabView_ = document.createElement('tr-ui-a-tab-view'); 139 this.tabView_ = document.createElement('tr-ui-a-tab-view');
87 this.tabView_.style.flex = '1 1 auto'; 140 this.tabView_.addEventListener(
141 'selected-tab-change', this.onSelectedSubViewChanged_.bind(this));
142
88 Polymer.dom(this).appendChild(this.tabView_); 143 Polymer.dom(this).appendChild(this.tabView_);
89 this.brushingStateController_ = undefined;
90 this.onSelectedTabChange_ = this.onSelectedTabChange_.bind(this);
91 this.onSelectionChanged_ = this.onSelectionChanged_.bind(this);
92
93 this.lastSeenSelection_ = new tr.model.EventSet();
94 }, 144 },
95 145
96 set tallMode(value) { 146 set tallMode(value) {
97 if (value) 147 Polymer.dom(this).classList.toggle('tall-mode', value);
98 Polymer.dom(this).classList.add('tall-mode');
99 else
100 Polymer.dom(this).classList.remove('tall-mode');
101 }, 148 },
102 149
103 get tallMode() { 150 get tallMode() {
104 return Polymer.dom(this).classList.contains('tall-mode'); 151 return Polymer.dom(this).classList.contains('tall-mode');
105 }, 152 },
106 153
107 get tabView() { 154 get tabView() {
108 return this.tabView_; 155 return this.tabView_;
109 }, 156 },
110 157
111 get brushingStateController() { 158 get brushingStateController() {
112 return this.brushingStateController_; 159 return this.brushingStateController_;
113 }, 160 },
114 161
115 set brushingStateController(brushingStateController) { 162 set brushingStateController(brushingStateController) {
116 if (this.brushingStateController) { 163 if (this.brushingStateController_) {
117 this.brushingStateController_.removeEventListener( 164 this.brushingStateController_.removeEventListener(
118 'change', this.onSelectionChanged_); 165 'change', this.onSelectionChanged_.bind(this));
119 } 166 }
167
120 this.brushingStateController_ = brushingStateController; 168 this.brushingStateController_ = brushingStateController;
121 if (this.brushingStateController) { 169 if (this.brushingStateController) {
122 this.brushingStateController_.addEventListener( 170 this.brushingStateController_.addEventListener(
123 'change', this.onSelectionChanged_); 171 'change', this.onSelectionChanged_.bind(this));
124 } 172 }
173
174 // The new brushing controller may have a different selection than the
175 // last, so we have to refresh the subview.
petrcermak 2016/06/01 16:47:09 nit: I think it should be "the last ONE"
charliea (OOO until 10-5) 2016/06/01 17:33:02 Done.
125 this.onSelectionChanged_(); 176 this.onSelectionChanged_();
126 }, 177 },
127 178
128 get selection() { 179 get selection() {
129 return this.brushingStateController_.selection; 180 return this.brushingStateController_.selection;
130 }, 181 },
131 182
132 onSelectionChanged_: function(e) { 183 onSelectionChanged_: function(e) {
133 var selection = this.brushingStateController_.selection; 184 if (this.lastSelection_ && this.selection.equals(this.lastSelection_))
185 return;
186 this.lastSelection_ = this.selection;
134 187
135 var selectionHasSameValue = this.lastSeenSelection_.equals(selection); 188 this.tallMode = false;
136 this.lastSeenSelection_ = selection; 189 this.tabView_.clearSubViews();
137 if (selectionHasSameValue) 190
191 this.tabView.label = getTabStripLabel(this.selection.length);
192 var eventsByBaseTypeName =
193 this.selection.getEventsOrganizedByBaseType(true);
194 for (var eventTypeName in eventsByBaseTypeName) {
petrcermak 2016/06/01 16:47:09 maybe tr.b.iterItems?
charliea (OOO until 10-5) 2016/06/01 17:33:02 Done.
195 var subView =
196 createSubView(eventTypeName, eventsByBaseTypeName[eventTypeName]);
197 this.tabView_.addSubView(subView);
198 }
199 },
200
201 onSelectedSubViewChanged_: function() {
202 var brushingStateController = this.brushingStateController_;
petrcermak 2016/06/01 16:47:09 It seems like you're not using this ;-)
charliea (OOO until 10-5) 2016/06/01 17:33:03 Ah, thanks :-) Refactored maybeChangeRelatedEvents
203 var selectedSubView = this.tabView_.selectedSubView;
204
205 if (!selectedSubView) {
206 this.tallMode = false;
207 this.maybeChangeRelatedEvents_(undefined);
138 return; 208 return;
139
140 var lastSelectedTabTagName;
141 var lastSelectedTabTypeName;
142 if (this.tabView_.selectedTab) {
143 lastSelectedTabTagName = this.tabView_.selectedTab.tagName;
144 lastSelectedTabTypeName = this.tabView_.selectedTab._eventTypeName;
145 } 209 }
146 210
147 this.tallMode = false; 211 this.tallMode = selectedSubView.requiresTallView;
148 212 this.maybeChangeRelatedEvents_(selectedSubView.relatedEventsToHighlight);
149 var previouslySelectedTab = this.tabView_.selectedTab;
150 this.tabView_.removeEventListener(
151 'selected-tab-change', this.onSelectedTabChange_);
152
153 var previousSubViews = {};
154 for (var i = 0; i < Polymer.dom(this.tabView_).children.length; i++) {
155 var previousSubView = Polymer.dom(this.tabView_).children[i];
156 previousSubViews[previousSubView._eventTypeName] = previousSubView;
157 }
158
159 this.tabView_.saveTabStates();
160 Polymer.dom(this.tabView_).textContent = '';
161 if (selection.length == 0) {
162 this.tabView_.tabStripHeadingText = 'Nothing selected. Tap stuff.';
163 } else if (selection.length == 1) {
164 this.tabView_.tabStripHeadingText = '1 item selected: ';
165 } else {
166 this.tabView_.tabStripHeadingText = selection.length +
167 ' items selected: ';
168 }
169
170 var eventsByBaseTypeName = selection.getEventsOrganizedByBaseType(true);
171
172 var numBaseTypesToAnalyze = tr.b.dictionaryLength(eventsByBaseTypeName);
173 for (var eventTypeName in eventsByBaseTypeName) {
174 var subSelection = eventsByBaseTypeName[eventTypeName];
175 var subView = this.createSubViewForSelection_(
176 eventTypeName, subSelection, previousSubViews[eventTypeName]);
177 // Store the eventTypeName for future tab restoration.
178 subView._eventTypeName = eventTypeName;
179 Polymer.dom(this.tabView_).appendChild(subView);
180
181 subView.selection = subSelection;
182 }
183
184 // Restore the tab type that was previously selected. First try by tag
185 // name.
186 var tab;
187 if (lastSelectedTabTagName)
188 tab = Polymer.dom(this.tabView_).querySelector(lastSelectedTabTagName);
189
190 // If that fails, look for a tab with that typeName.
191 if (!tab && lastSelectedTabTypeName) {
192 var tab = tr.b.findFirstInArray(
193 Polymer.dom(this.tabView_).children, function(tab) {
194 return tab._eventTypeName === lastSelectedTabTypeName;
195 });
196 }
197 // If all else fails, pick the first tab.
198 if (!tab)
199 tab = Polymer.dom(this.tabView_).firstChild;
200
201 this.tabView_.selectedTab = tab;
202 this.onSelectedTabChange_();
203
204 this.tabView_.addEventListener(
205 'selected-tab-change', this.onSelectedTabChange_);
206 }, 213 },
207 214
208 createSubViewForSelection_: function(eventTypeName, subSelection, 215 /** Changes the highlighted related events if possible. */
209 previousSubView) { 216 maybeChangeRelatedEvents_: function(events) {
210 // Find. 217 if (this.brushingStateController)
211 var eventTypeInfo = EventRegistry.getEventTypeInfoByTypeName( 218 this.brushingStateController.changeAnalysisViewRelatedEvents(events);
212 eventTypeName);
213 var singleMode = subSelection.length == 1;
214 var tagName;
215 if (subSelection.length === 1)
216 tagName = eventTypeInfo.metadata.singleViewElementName;
217 else
218 tagName = eventTypeInfo.metadata.multiViewElementName;
219
220 // if (!tr.ui.b.getPolymerElementNamed(tagName))
221 // throw new Error('Element not registered: ' + tagName);
222
223 // Create if necessary.
224 var subView;
225 if (previousSubView &&
226 previousSubView.tagName === tagName.toUpperCase())
227 subView = previousSubView;
228 else
229 subView = document.createElement(tagName);
230
231 if (subView.constructor === HTMLElement)
232 throw new Error('Element not registered: ' + tagName);
233 // Set label.
234 var camelLabel;
235 if (subSelection.length === 1)
236 camelLabel = EventRegistry.getUserFriendlySingularName(eventTypeName);
237 else
238 camelLabel = EventRegistry.getUserFriendlyPluralName(eventTypeName);
239 subView.tabLabel = camelLabel + ' (' + subSelection.length + ')';
240
241 return subView;
242 },
243
244 onSelectedTabChange_: function() {
245 var brushingStateController = this.brushingStateController_;
246 if (this.tabView_.selectedTab) {
247 var selectedTab = this.tabView_.selectedTab;
248 this.tallMode = selectedTab.requiresTallView;
249 if (brushingStateController) {
250 var rlth = selectedTab.relatedEventsToHighlight;
251 brushingStateController.changeAnalysisViewRelatedEvents(rlth);
252 }
253 } else {
254 this.tallMode = false;
255 if (brushingStateController)
256 brushingStateController.changeAnalysisViewRelatedEvents(undefined);
257 }
258 } 219 }
259 }); 220 });
260 })(); 221 })();
261 </script> 222 </script>
OLDNEW
« tracing/tracing/ui/analysis/alert_sub_view.html ('K') | « tracing/tracing/ui/analysis/alert_sub_view.html ('k') | tracing/tracing/ui/base/tab_view.html » ('j') | tracing/tracing/ui/base/tab_view.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698