catapult/tracing/tracing/ui/side_panel/side_panel_container.html - platform/external/chromium-trace - Git at Google

 <!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="/tracing/base/range.html">
 <link rel="import" href="/tracing/ui/side_panel/side_panel.html">
 <link rel="import" href="/tracing/ui/side_panel/side_panel_registry.html">

 <dom-module id='tr-ui-side-panel-container'>
   <template>
     <style>
     :host {
       align-items: stretch;
       display: -webkit-flex;
       background-color: white;
     }

     :host([expanded]) > #side_panel_drag_handle,
     :host([expanded]) > active-panel-container {
       -webkit-flex: 1 1 auto;
       border-left: 1px solid black;
       display: -webkit-flex;
     }

     :host(:not([expanded])) > #side_panel_drag_handle,
     :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;
     }

     #active_panel_container {
       overflow: auto;
     }
     </style>

     <tr-ui-b-drag-handle id="side_panel_drag_handle"></tr-ui-b-drag-handle>
     <active-panel-container id='active_panel_container'>
     </active-panel-container>
     <tab-strip id='tab_strip'></tab-strip>
   </template>
 </dom-module>
 <script>
 'use strict';
 Polymer({
   is: 'tr-ui-side-panel-container',

   ready: function() {
     this.activePanelContainer_ = this.$.active_panel_container;
     this.tabStrip_ = this.$.tab_strip;

     this.dragHandle_ = this.$.side_panel_drag_handle;
     this.dragHandle_.horizontal = false;
     this.dragHandle_.target = this.activePanelContainer_;
     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_);
     }
   },

   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() {
     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) {
       Polymer.dom(this.getLabelElementForPanelType_(
           this.activePanelType)).removeAttribute('selected');
     }

     if (this.activePanelType) {
       this.getLabelElementForPanelType_(
           this.activePanelType).removeAttribute('selected');
     }

     if (this.activePanel)
       this.activePanelContainer_.removeChild(this.activePanel);

     if (panelType === undefined) {
       Polymer.dom(this).removeAttribute('expanded');
       this.activePanelType_ = undefined;
       return;
     }

     Polymer.dom(this.getLabelElementForPanelType_(panelType)).
         setAttribute('selected', true);
     Polymer.dom(this).setAttribute('expanded', true);

     Polymer.dom(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;

     Polymer.dom(this.tabStrip_).textContent = '';
     var supportedPanelTypes = [];

     for (var panelTypeInfo of
         tr.ui.side_panel.SidePanelRegistry.getAllRegisteredTypeInfos()) {
       var labelEl = document.createElement('tab-strip-label');
       var panel = panelTypeInfo.constructor();
       var panelType = panel.tagName;

       Polymer.dom(labelEl).textContent = panel.textLabel;
       labelEl.panelType = panelType;

       var supported = panel.supportsModel(this.model);
       if (this.model && supported.supported) {
         supportedPanelTypes.push(panelType);
         Polymer.dom(labelEl).setAttribute('enabled', true);
         labelEl.addEventListener('click', function(panelType) {
           this.activePanelType =
               this.activePanelType === panelType ? undefined : panelType;
         }.bind(this, panelType));
       } else {
         if (this.activePanel)
           this.activePanelContainer_.removeChild(this.activePanel);
         this.removeAttribute('expanded');
       }
       Polymer.dom(this.tabStrip_).appendChild(labelEl);
     }

     // Restore the active panel, or collapse
     if (previouslyActivePanelType &&
         supportedPanelTypes.indexOf(previouslyActivePanelType) != -1) {
       this.activePanelType = previouslyActivePanelType;
       Polymer.dom(this).setAttribute('expanded', true);
     } else {
       if (this.activePanel)
         Polymer.dom(this.activePanelContainer_).removeChild(this.activePanel);
       Polymer.dom(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>
	<!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="/tracing/base/range.html">
	<link rel="import" href="/tracing/ui/side_panel/side_panel.html">
	<link rel="import" href="/tracing/ui/side_panel/side_panel_registry.html">

	<dom-module id='tr-ui-side-panel-container'>
	<template>
	<style>
	:host {
	align-items: stretch;
	display: -webkit-flex;
	background-color: white;
	}

	:host([expanded]) > #side_panel_drag_handle,
	:host([expanded]) > active-panel-container {
	-webkit-flex: 1 1 auto;
	border-left: 1px solid black;
	display: -webkit-flex;
	}

	:host(:not([expanded])) > #side_panel_drag_handle,
	: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;
	}

	#active_panel_container {
	overflow: auto;
	}
	</style>

	<tr-ui-b-drag-handle id="side_panel_drag_handle"></tr-ui-b-drag-handle>
	<active-panel-container id='active_panel_container'>
	</active-panel-container>
	<tab-strip id='tab_strip'></tab-strip>
	</template>
	</dom-module>
	<script>
	'use strict';
	Polymer({
	is: 'tr-ui-side-panel-container',

	ready: function() {
	this.activePanelContainer_ = this.$.active_panel_container;
	this.tabStrip_ = this.$.tab_strip;

	this.dragHandle_ = this.$.side_panel_drag_handle;
	this.dragHandle_.horizontal = false;
	this.dragHandle_.target = this.activePanelContainer_;
	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_);
	}
	},

	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() {
	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) {
	Polymer.dom(this.getLabelElementForPanelType_(
	this.activePanelType)).removeAttribute('selected');
	}

	if (this.activePanelType) {
	this.getLabelElementForPanelType_(
	this.activePanelType).removeAttribute('selected');
	}

	if (this.activePanel)
	this.activePanelContainer_.removeChild(this.activePanel);

	if (panelType === undefined) {
	Polymer.dom(this).removeAttribute('expanded');
	this.activePanelType_ = undefined;
	return;
	}

	Polymer.dom(this.getLabelElementForPanelType_(panelType)).
	setAttribute('selected', true);
	Polymer.dom(this).setAttribute('expanded', true);

	Polymer.dom(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;

	Polymer.dom(this.tabStrip_).textContent = '';
	var supportedPanelTypes = [];

	for (var panelTypeInfo of
	tr.ui.side_panel.SidePanelRegistry.getAllRegisteredTypeInfos()) {
	var labelEl = document.createElement('tab-strip-label');
	var panel = panelTypeInfo.constructor();
	var panelType = panel.tagName;

	Polymer.dom(labelEl).textContent = panel.textLabel;
	labelEl.panelType = panelType;

	var supported = panel.supportsModel(this.model);
	if (this.model && supported.supported) {
	supportedPanelTypes.push(panelType);
	Polymer.dom(labelEl).setAttribute('enabled', true);
	labelEl.addEventListener('click', function(panelType) {
	this.activePanelType =
	this.activePanelType === panelType ? undefined : panelType;
	}.bind(this, panelType));
	} else {
	if (this.activePanel)
	this.activePanelContainer_.removeChild(this.activePanel);
	this.removeAttribute('expanded');
	}
	Polymer.dom(this.tabStrip_).appendChild(labelEl);
	}

	// Restore the active panel, or collapse
	if (previouslyActivePanelType &&
	supportedPanelTypes.indexOf(previouslyActivePanelType) != -1) {
	this.activePanelType = previouslyActivePanelType;
	Polymer.dom(this).setAttribute('expanded', true);
	} else {
	if (this.activePanel)
	Polymer.dom(this.activePanelContainer_).removeChild(this.activePanel);
	Polymer.dom(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>