| 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 |
|---|
Chromium Code Reviews
Issue 3001613002:
Fix trace-viewer's side-panel-container's tab-strip. (Closed)
