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/math/range.html"> | 8 <link rel="import" href="/tracing/base/math/range.html"> |
9 <link rel="import" href="/tracing/ui/side_panel/side_panel.html"> | 9 <link rel="import" href="/tracing/ui/side_panel/side_panel.html"> |
10 <link rel="import" href="/tracing/ui/side_panel/side_panel_registry.html"> | 10 <link rel="import" href="/tracing/ui/side_panel/side_panel_registry.html"> |
(...skipping 30 matching lines...) Expand all Loading... |
41 background-color: rgb(236, 236, 236); | 41 background-color: rgb(236, 236, 236); |
42 border-left: 1px solid black; | 42 border-left: 1px solid black; |
43 cursor: default; | 43 cursor: default; |
44 display: -webkit-flex; | 44 display: -webkit-flex; |
45 min-width: 18px; /* workaround for flexbox and writing-mode mixing bug */ | 45 min-width: 18px; /* workaround for flexbox and writing-mode mixing bug */ |
46 padding: 10px 0 10px 0; | 46 padding: 10px 0 10px 0; |
47 font-size: 12px; | 47 font-size: 12px; |
48 } | 48 } |
49 | 49 |
50 tab-strip > tab-strip-label { | 50 tab-strip > tab-strip-label { |
| 51 flex-shrink: 0; |
51 -webkit-writing-mode: vertical-rl; | 52 -webkit-writing-mode: vertical-rl; |
| 53 white-space: nowrap; |
52 display: inline; | 54 display: inline; |
53 margin-right: 1px; | 55 margin-right: 1px; |
54 min-height: 20px; | 56 min-height: 20px; |
55 padding: 15px 3px 15px 1px; | 57 padding: 15px 3px 15px 1px; |
56 } | 58 } |
57 | 59 |
58 tab-strip > | 60 tab-strip > |
59 tab-strip-label:not([enabled]) { | 61 tab-strip-label:not([enabled]) { |
60 color: rgb(128, 128, 128); | 62 color: rgb(128, 128, 128); |
61 } | 63 } |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
106 'change', this.onSelectionChanged_); | 108 'change', this.onSelectionChanged_); |
107 this.brushingStateController_.removeEventListener( | 109 this.brushingStateController_.removeEventListener( |
108 'model-changed', this.onModelChanged_); | 110 'model-changed', this.onModelChanged_); |
109 } | 111 } |
110 this.brushingStateController_ = brushingStateController; | 112 this.brushingStateController_ = brushingStateController; |
111 if (this.brushingStateController) { | 113 if (this.brushingStateController) { |
112 this.brushingStateController_.addEventListener( | 114 this.brushingStateController_.addEventListener( |
113 'change', this.onSelectionChanged_); | 115 'change', this.onSelectionChanged_); |
114 this.brushingStateController_.addEventListener( | 116 this.brushingStateController_.addEventListener( |
115 'model-changed', this.onModelChanged_); | 117 'model-changed', this.onModelChanged_); |
| 118 if (this.model) { |
| 119 this.onModelChanged_(); |
| 120 } |
116 } | 121 } |
117 }, | 122 }, |
118 | 123 |
119 onSelectionChanged_() { | 124 onSelectionChanged_() { |
120 if (this.activePanel) { | 125 if (this.activePanel) { |
121 this.activePanel.selection = this.selection; | 126 this.activePanel.selection = this.selection; |
122 } | 127 } |
123 }, | 128 }, |
124 | 129 |
125 get model() { | 130 get model() { |
(...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
204 } | 209 } |
205 } | 210 } |
206 return undefined; | 211 return undefined; |
207 }, | 212 }, |
208 | 213 |
209 updateContents_() { | 214 updateContents_() { |
210 const previouslyActivePanelType = this.activePanelType; | 215 const previouslyActivePanelType = this.activePanelType; |
211 | 216 |
212 Polymer.dom(this.tabStrip_).textContent = ''; | 217 Polymer.dom(this.tabStrip_).textContent = ''; |
213 const supportedPanelTypes = []; | 218 const supportedPanelTypes = []; |
| 219 const panelTypeInfos = |
| 220 tr.ui.side_panel.SidePanelRegistry.getAllRegisteredTypeInfos(); |
| 221 const unsupportedLabelEls = []; |
214 | 222 |
215 for (const panelTypeInfo of | 223 for (const panelTypeInfo of panelTypeInfos) { |
216 tr.ui.side_panel.SidePanelRegistry.getAllRegisteredTypeInfos()) { | |
217 const labelEl = document.createElement('tab-strip-label'); | 224 const labelEl = document.createElement('tab-strip-label'); |
218 const panel = panelTypeInfo.constructor(); | 225 const panel = panelTypeInfo.constructor(); |
219 const panelType = panel.tagName; | 226 const panelType = panel.tagName; |
220 | 227 |
221 Polymer.dom(labelEl).textContent = panel.textLabel; | 228 Polymer.dom(labelEl).textContent = panel.textLabel; |
222 labelEl.panelType = panelType; | 229 labelEl.panelType = panelType; |
223 | 230 |
224 const supported = panel.supportsModel(this.model); | 231 const supported = panel.supportsModel(this.model); |
225 if (this.model && supported.supported) { | 232 if (this.model && supported.supported) { |
226 supportedPanelTypes.push(panelType); | 233 supportedPanelTypes.push(panelType); |
227 Polymer.dom(labelEl).setAttribute('enabled', true); | 234 Polymer.dom(labelEl).setAttribute('enabled', true); |
228 labelEl.addEventListener('click', function(panelType) { | 235 labelEl.addEventListener('click', function(panelType) { |
229 this.activePanelType = | 236 this.activePanelType = |
230 this.activePanelType === panelType ? undefined : panelType; | 237 this.activePanelType === panelType ? undefined : panelType; |
231 }.bind(this, panelType)); | 238 }.bind(this, panelType)); |
| 239 Polymer.dom(this.tabStrip_).appendChild(labelEl); |
232 } else { | 240 } else { |
233 if (this.activePanel) { | 241 if (this.activePanel) { |
234 this.activePanelContainer_.removeChild(this.activePanel); | 242 this.activePanelContainer_.removeChild(this.activePanel); |
235 } | 243 } |
236 this.removeAttribute('expanded'); | 244 this.removeAttribute('expanded'); |
| 245 unsupportedLabelEls.push(labelEl); |
237 } | 246 } |
| 247 } |
| 248 |
| 249 // Labels do not shrink, so when the user drags the analysis-view up, the |
| 250 // bottom labels are obscured first. |
| 251 // Append all unsupported panel labels after all supported panel labels so |
| 252 // that unsupported panel labels are obscured first. |
| 253 for (const labelEl of unsupportedLabelEls) { |
238 Polymer.dom(this.tabStrip_).appendChild(labelEl); | 254 Polymer.dom(this.tabStrip_).appendChild(labelEl); |
239 } | 255 } |
240 | 256 |
241 // Restore the active panel, or collapse | 257 // Restore the active panel, or collapse |
242 if (previouslyActivePanelType && | 258 if (previouslyActivePanelType && |
243 supportedPanelTypes.includes(previouslyActivePanelType)) { | 259 supportedPanelTypes.includes(previouslyActivePanelType)) { |
244 this.activePanelType = previouslyActivePanelType; | 260 this.activePanelType = previouslyActivePanelType; |
245 Polymer.dom(this).setAttribute('expanded', true); | 261 Polymer.dom(this).setAttribute('expanded', true); |
246 } else { | 262 } else { |
247 if (this.activePanel) { | 263 if (this.activePanel) { |
(...skipping 11 matching lines...) Expand all Loading... |
259 if (range === undefined) { | 275 if (range === undefined) { |
260 throw new Error('Must not be undefined'); | 276 throw new Error('Must not be undefined'); |
261 } | 277 } |
262 this.rangeOfInterest_ = range; | 278 this.rangeOfInterest_ = range; |
263 if (this.activePanel) { | 279 if (this.activePanel) { |
264 this.activePanel.rangeOfInterest = range; | 280 this.activePanel.rangeOfInterest = range; |
265 } | 281 } |
266 } | 282 } |
267 }); | 283 }); |
268 </script> | 284 </script> |
OLD | NEW |