OLD | NEW |
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"> | 8 <link rel="import" href="/tracing/base/iteration_helpers.html"> |
9 <link rel="import" href="/tracing/model/event_set.html"> | 9 <link rel="import" href="/tracing/model/event_set.html"> |
10 <link rel="import" href="/tracing/ui/analysis/alert_sub_view.html"> | 10 <link rel="import" href="/tracing/ui/analysis/alert_sub_view.html"> |
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
72 } | 72 } |
73 </style> | 73 </style> |
74 <content></content> | 74 <content></content> |
75 </template> | 75 </template> |
76 </dom-module> | 76 </dom-module> |
77 <script> | 77 <script> |
78 'use strict'; | 78 'use strict'; |
79 (function() { | 79 (function() { |
80 var EventRegistry = tr.model.EventRegistry; | 80 var EventRegistry = tr.model.EventRegistry; |
81 | 81 |
| 82 /** Returns the label that goes next to the list of tabs. */ |
| 83 function getTabStripLabel(numEvents) { |
| 84 if (numEvents === 0) |
| 85 return 'Nothing selected. Tap stuff.'; |
| 86 else if (numEvents === 1) |
| 87 return '1 item selected.'; |
| 88 return numEvents + ' items selected.'; |
| 89 } |
| 90 |
| 91 /** |
| 92 * Returns the tab label for the analysis sub-view associated with the |
| 93 * specified event type and number of events. |
| 94 */ |
| 95 function getTabLabel(eventTypeName, numEvents) { |
| 96 var camelLabel = numEvents === 1 ? |
| 97 EventRegistry.getUserFriendlySingularName(eventTypeName) : |
| 98 EventRegistry.getUserFriendlyPluralName(eventTypeName); |
| 99 return camelLabel + ' (' + numEvents + ')'; |
| 100 } |
| 101 |
| 102 /** |
| 103 * Returns the HTML tag for the analysis sub-view associated with the |
| 104 * specified event type and number of events. |
| 105 */ |
| 106 function getSubViewTagName(eventTypeName, numEvents) { |
| 107 var eventTypeInfo = |
| 108 EventRegistry.getEventTypeInfoByTypeName(eventTypeName); |
| 109 return numEvents === 1 ? |
| 110 eventTypeInfo.metadata.singleViewElementName : |
| 111 eventTypeInfo.metadata.multiViewElementName; |
| 112 } |
| 113 |
| 114 /** |
| 115 * Returns a new analysis sub-view for the selection and throws an error if no |
| 116 * such sub-view exists. |
| 117 */ |
| 118 function createSubView(eventTypeName, selection) { |
| 119 var subView = document.createElement( |
| 120 getSubViewTagName(eventTypeName, selection.length)); |
| 121 |
| 122 // Unregistered elements with valid names (i.e. names that have a hyphen |
| 123 // in them) inherit from HTMLElement. Unregistered elements with |
| 124 // invalid names inherit from HTMLUnknownElement. |
| 125 if (subView.constructor === HTMLElement || |
| 126 subView.constructor === HTMLUnknownElement) |
| 127 throw new Error('Element not registered: ' + tagName); |
| 128 |
| 129 subView.tabLabel = getTabLabel(eventTypeName, selection.length); |
| 130 subView.selection = selection; |
| 131 return subView; |
| 132 } |
| 133 |
82 Polymer({ | 134 Polymer({ |
83 is: 'tr-ui-a-analysis-view', | 135 is: 'tr-ui-a-analysis-view', |
84 | 136 |
85 ready: function() { | 137 ready: function() { |
| 138 this.brushingStateController_ = undefined; |
| 139 this.lastSelection_ = undefined; |
86 this.tabView_ = document.createElement('tr-ui-a-tab-view'); | 140 this.tabView_ = document.createElement('tr-ui-a-tab-view'); |
87 this.tabView_.style.flex = '1 1 auto'; | 141 this.tabView_.addEventListener( |
| 142 'selected-tab-change', this.onSelectedSubViewChanged_.bind(this)); |
| 143 |
88 Polymer.dom(this).appendChild(this.tabView_); | 144 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 }, | 145 }, |
95 | 146 |
96 set tallMode(value) { | 147 set tallMode(value) { |
97 if (value) | 148 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 }, | 149 }, |
102 | 150 |
103 get tallMode() { | 151 get tallMode() { |
104 return Polymer.dom(this).classList.contains('tall-mode'); | 152 return Polymer.dom(this).classList.contains('tall-mode'); |
105 }, | 153 }, |
106 | 154 |
107 get tabView() { | 155 get tabView() { |
108 return this.tabView_; | 156 return this.tabView_; |
109 }, | 157 }, |
110 | 158 |
111 get brushingStateController() { | 159 get brushingStateController() { |
112 return this.brushingStateController_; | 160 return this.brushingStateController_; |
113 }, | 161 }, |
114 | 162 |
115 set brushingStateController(brushingStateController) { | 163 set brushingStateController(brushingStateController) { |
116 if (this.brushingStateController) { | 164 if (this.brushingStateController_) { |
117 this.brushingStateController_.removeEventListener( | 165 this.brushingStateController_.removeEventListener( |
118 'change', this.onSelectionChanged_); | 166 'change', this.onSelectionChanged_.bind(this)); |
119 } | 167 } |
| 168 |
120 this.brushingStateController_ = brushingStateController; | 169 this.brushingStateController_ = brushingStateController; |
121 if (this.brushingStateController) { | 170 if (this.brushingStateController) { |
122 this.brushingStateController_.addEventListener( | 171 this.brushingStateController_.addEventListener( |
123 'change', this.onSelectionChanged_); | 172 'change', this.onSelectionChanged_.bind(this)); |
124 } | 173 } |
| 174 |
| 175 // The new brushing controller may have a different selection than the |
| 176 // last one, so we have to refresh the subview. |
125 this.onSelectionChanged_(); | 177 this.onSelectionChanged_(); |
126 }, | 178 }, |
127 | 179 |
128 get selection() { | 180 get selection() { |
129 return this.brushingStateController_.selection; | 181 return this.brushingStateController_.selection; |
130 }, | 182 }, |
131 | 183 |
132 onSelectionChanged_: function(e) { | 184 onSelectionChanged_: function(e) { |
133 var selection = this.brushingStateController_.selection; | 185 if (this.lastSelection_ && this.selection.equals(this.lastSelection_)) |
| 186 return; |
| 187 this.lastSelection_ = this.selection; |
134 | 188 |
135 var selectionHasSameValue = this.lastSeenSelection_.equals(selection); | 189 this.tallMode = false; |
136 this.lastSeenSelection_ = selection; | 190 this.tabView_.clearSubViews(); |
137 if (selectionHasSameValue) | 191 |
| 192 this.tabView_.label = getTabStripLabel(this.selection.length); |
| 193 var eventsByBaseTypeName = |
| 194 this.selection.getEventsOrganizedByBaseType(true); |
| 195 |
| 196 tr.b.iterItems(eventsByBaseTypeName, function(eventTypeName, events) { |
| 197 var subView = createSubView(eventTypeName, events); |
| 198 this.tabView_.addSubView(subView); |
| 199 }, this); |
| 200 }, |
| 201 |
| 202 onSelectedSubViewChanged_: function() { |
| 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> |
OLD | NEW |