| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 2014 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <link rel="import" href="/base/range.html"> |
| <link rel="import" href="/ui/side_panel/side_panel.html"> |
| <link rel='import' href='/ui/base/polymer_utils.html'> |
| |
| <polymer-element name='tr-ui-side-panel-container' is='HTMLUnknownElement'> |
| <template> |
| <style> |
| :host { |
| align-items: stretch; |
| display: -webkit-flex; |
| } |
| |
| :host([expanded]) > active-panel-container { |
| -webkit-flex: 1 1 auto; |
| border-left: 1px solid black; |
| display: -webkit-flex; |
| } |
| |
| :host(:not([expanded])) > active-panel-container { |
| display: none; |
| } |
| |
| active-panel-container { |
| display: flex; |
| } |
| |
| tab-strip { |
| -webkit-flex: 0 0 auto; |
| -webkit-flex-direction: column; |
| -webkit-user-select: none; |
| background-color: rgb(236, 236, 236); |
| border-left: 1px solid black; |
| cursor: default; |
| display: -webkit-flex; |
| min-width: 18px; /* workaround for flexbox and writing-mode mixing bug */ |
| padding: 10px 0 10px 0; |
| font-size: 12px; |
| } |
| |
| tab-strip > tab-strip-label { |
| -webkit-writing-mode: vertical-rl; |
| display: inline; |
| margin-right: 1px; |
| min-height: 20px; |
| padding: 15px 3px 15px 1px; |
| } |
| |
| tab-strip > |
| tab-strip-label:not([enabled]) { |
| color: rgb(128, 128, 128); |
| } |
| |
| tab-strip > tab-strip-label[selected] { |
| background-color: white; |
| border: 1px solid rgb(163, 163, 163); |
| border-left: none; |
| padding: 14px 2px 14px 1px; |
| } |
| </style> |
| |
| <active-panel-container id='active_panel_container'> |
| </active-panel-container> |
| <tab-strip id='tab_strip'></tab-strip> |
| </template> |
| |
| <script> |
| 'use strict'; |
| Polymer({ |
| ready: function() { |
| this.activePanelContainer_ = this.$.active_panel_container; |
| this.tabStrip_ = this.$.tab_strip; |
| |
| this.rangeOfInterest_ = new tr.b.Range(); |
| this.brushingStateController_ = undefined; |
| this.onSelectionChanged_ = this.onSelectionChanged_.bind(this); |
| this.onModelChanged_ = this.onModelChanged_.bind(this); |
| }, |
| |
| get brushingStateController() { |
| return this.brushingStateController_; |
| }, |
| |
| set brushingStateController(brushingStateController) { |
| if (this.brushingStateController) { |
| this.brushingStateController_.removeEventListener( |
| 'change', this.onSelectionChanged_); |
| this.brushingStateController_.removeEventListener( |
| 'model-changed', this.onModelChanged_); |
| } |
| this.brushingStateController_ = brushingStateController; |
| if (this.brushingStateController) { |
| this.brushingStateController_.addEventListener( |
| 'change', this.onSelectionChanged_); |
| this.brushingStateController_.addEventListener( |
| 'model-changed', this.onModelChanged_); |
| } |
| }, |
| |
| get selection() { |
| return this.brushingStateController_.selection; |
| }, |
| |
| onSelectionChanged_: function() { |
| if (this.activePanel) |
| this.activePanel.selection = this.selection; |
| }, |
| |
| get model() { |
| return this.brushingStateController_.model; |
| }, |
| |
| onModelChanged_: function() { |
| this.activePanelType_ = undefined; |
| this.updateContents_(); |
| }, |
| |
| get expanded() { |
| this.hasAttribute('expanded'); |
| }, |
| |
| get activePanel() { |
| if (this.activePanelContainer_.children.length === 0) |
| return undefined; |
| return this.activePanelContainer_.children[0]; |
| }, |
| |
| get activePanelType() { |
| return this.activePanelType_; |
| }, |
| |
| set activePanelType(panelType) { |
| if (this.model === undefined) |
| throw new Error('Cannot activate panel without a model'); |
| |
| var panel = undefined; |
| if (panelType) |
| panel = document.createElement(panelType); |
| |
| if (panel !== undefined && !panel.supportsModel(this.model)) |
| throw new Error('Cannot activate panel: does not support this model'); |
| |
| if (this.activePanelType) { |
| this.getLabelElementForPanelType_( |
| this.activePanelType).removeAttribute('selected'); |
| } |
| this.activePanelContainer_.textContent = ''; |
| |
| if (panelType === undefined) { |
| this.removeAttribute('expanded'); |
| this.activePanelType_ = undefined; |
| return; |
| } |
| |
| this.getLabelElementForPanelType_(panelType). |
| setAttribute('selected', true); |
| this.setAttribute('expanded', true); |
| |
| this.activePanelContainer_.appendChild(panel); |
| panel.rangeOfInterest = this.rangeOfInterest_; |
| panel.selection = this.selection_; |
| panel.model = this.model; |
| |
| this.activePanelType_ = panelType; |
| }, |
| |
| getPanelTypeForConstructor_: function(constructor) { |
| for (var i = 0; i < this.tabStrip_.children.length; i++) { |
| if (this.tabStrip_.children[i].panelType.constructor == constructor) |
| return this.tabStrip_.children[i].panelType; |
| } |
| }, |
| |
| getLabelElementForPanelType_: function(panelType) { |
| for (var i = 0; i < this.tabStrip_.children.length; i++) { |
| if (this.tabStrip_.children[i].panelType == panelType) |
| return this.tabStrip_.children[i]; |
| } |
| return undefined; |
| }, |
| |
| updateContents_: function() { |
| var previouslyActivePanelType = this.activePanelType; |
| |
| this.tabStrip_.textContent = ''; |
| var supportedPanelTypes = []; |
| |
| var panelTypes = |
| tr.ui.b.getPolymerElementsThatSubclass('tr-ui-side-panel'); |
| panelTypes.forEach(function(panelType) { |
| var labelEl = document.createElement('tab-strip-label'); |
| var panel = document.createElement(panelType); |
| |
| labelEl.textContent = panel.textLabel; |
| labelEl.panelType = panelType; |
| |
| var supported = panel.supportsModel(this.model); |
| if (this.model && supported.supported) { |
| supportedPanelTypes.push(panelType); |
| labelEl.setAttribute('enabled', true); |
| labelEl.addEventListener('click', function() { |
| this.activePanelType = |
| this.activePanelType === panelType ? undefined : panelType; |
| }.bind(this)); |
| } else { |
| labelEl.title = 'Not supported for the current trace: ' + |
| supported.reason; |
| labelEl.style.display = 'none'; |
| } |
| this.tabStrip_.appendChild(labelEl); |
| }, this); |
| |
| // Restore the active panel, or collapse |
| if (previouslyActivePanelType && |
| supportedPanelTypes.indexOf(previouslyActivePanelType) != -1) { |
| this.activePanelType = previouslyActivePanelType; |
| this.setAttribute('expanded', true); |
| } else { |
| this.activePanelContainer_.textContent = ''; |
| this.removeAttribute('expanded'); |
| } |
| }, |
| |
| get rangeOfInterest() { |
| return this.rangeOfInterest_; |
| }, |
| |
| set rangeOfInterest(range) { |
| if (range == undefined) |
| throw new Error('Must not be undefined'); |
| this.rangeOfInterest_ = range; |
| if (this.activePanel) |
| this.activePanel.rangeOfInterest = range; |
| } |
| }); |
| </script> |
| </polymer-element> |
| |
