src/third_party/trace-viewer/trace_viewer/tracing/timeline_view_side_panel.js

   1 // Copyright (c) 2014 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 'use strict';
   6
   7 tvcm.require('tvcm.range');
   8
   9 tvcm.requireStylesheet('tracing.timeline_view_side_panel');
  10
  11 tvcm.exportTo('tracing', function() {
  12   /**
  13    * @constructor
  14    */
  15   var TimelineViewSidePanel = tvcm.ui.define('x-timeline-view-panel');
  16
  17   var panelConstructors = [];
  18
  19   TimelineViewSidePanel.getPanelConstructors = function() {
  20     return panelConstructors;
  21   }
  22
  23   TimelineViewSidePanel.registerPanelSubtype = function(panelConstructor) {
  24     if (panelConstructor.supportsModel === undefined)
  25       throw new Error('Panel constructors must provide a ' +
  26                       'supportsModel function');
  27     if (panelConstructor.textLabel === undefined)
  28       throw new Error('Panel constructors must provide a ' +
  29                       'textLabel strig');
  30     panelConstructors.push(panelConstructor);
  31   }
  32
  33   TimelineViewSidePanel.unregisterPanelSubtype = function(panelConstructor) {
  34     var i = panelConstructors.indexOf(panelConstructor);
  35     if (i == -1)
  36       throw new Error('Panel not registered');
  37     panelConstructors.splice(i, 1);
  38   }
  39
  40   TimelineViewSidePanel.prototype = {
  41     __proto__: HTMLUnknownElement.prototype,
  42
  43     decorate: function() {
  44     }
  45   };
  46
  47   /**
  48    * @constructor
  49    */
  50   var TimelineViewSidePanelContainer = tvcm.ui.define(
  51       'x-timeline-view-side-panel-container');
  52
  53   TimelineViewSidePanelContainer.prototype = {
  54     __proto__: HTMLUnknownElement.prototype,
  55
  56     decorate: function() {
  57       this.activePanelContainer_ = document.createElement(
  58           'active-panel-container');
  59       this.tabStrip_ = document.createElement('tab-strip');
  60       this.appendChild(this.activePanelContainer_);
  61       this.appendChild(this.tabStrip_);
  62       this.model_ = undefined;
  63       this.rangeOfInterest_ = new tvcm.Range();
  64     },
  65
  66     get model() {
  67       return model_;
  68     },
  69
  70     set model(model) {
  71       this.model_ = model;
  72       this.updateContents_();
  73     },
  74
  75     get expanded() {
  76       this.hasAttribute('expanded');
  77     },
  78
  79     get activePanel() {
  80       if (this.activePanelContainer_.children.length === 0)
  81         return undefined;
  82       return this.activePanelContainer_.children[0];
  83     },
  84
  85     get activePanelConstructor() {
  86       if (this.activePanel)
  87         return this.activePanel.constructor;
  88       return undefined;
  89     },
  90
  91     set activePanelConstructor(panelConstructor) {
  92       if (this.model_ === undefined)
  93         throw new Error('Cannot activate panel without a model');
  94       if (panelConstructor && !panelConstructor.supportsModel(this.model_))
  95         throw new Error('Cannot activate panel: it doesn\'t ' +
  96                         'support this model');
  97
  98       if (this.activePanelConstructor) {
  99         this.getLabelForConstructor_(
 100             this.activePanelConstructor).removeAttribute('selected');
 101       }
 102       this.activePanelContainer_.textContent = '';
 103
 104       if (panelConstructor === undefined) {
 105         this.removeAttribute('expanded');
 106         return;
 107       }
 108
 109       this.getLabelForConstructor_(
 110           panelConstructor).setAttribute('selected', true);
 111
 112       this.setAttribute('expanded', true);
 113
 114       var panelEl = new panelConstructor();
 115       this.activePanelContainer_.appendChild(panelEl);
 116       panelEl.rangeOfInterest = this.rangeOfInterest_;
 117       panelEl.selection = this.selection_;
 118       panelEl.model = this.model_;
 119     },
 120
 121     getLabelForConstructor_: function(panelConstructor) {
 122       for (var i = 0; i < this.tabStrip_.children.length; i++) {
 123         if (this.tabStrip_.children[i].panelConstructor == panelConstructor)
 124           return this.tabStrip_.children[i];
 125       }
 126       return undefined;
 127     },
 128
 129     updateContents_: function() {
 130       var previouslyActivePanelConstructor = this.activePanelConstructor;
 131
 132       this.tabStrip_.textContent = '';
 133       var supportedPanelConstructors = [];
 134
 135       panelConstructors.forEach(function(panelConstructor) {
 136         var labelEl = document.createElement('tab-strip-label');
 137         labelEl.textContent = panelConstructor.textLabel;
 138         labelEl.panelConstructor = panelConstructor;
 139
 140         var supported = panelConstructor.supportsModel(this.model_);
 141         if (this.model_ && supported.supported) {
 142           supportedPanelConstructors.push(panelConstructor);
 143           labelEl.setAttribute('enabled', true);
 144           labelEl.addEventListener('click', function() {
 145             if (this.activePanelConstructor === panelConstructor)
 146               this.activePanelConstructor = undefined;
 147             else
 148               this.activePanelConstructor = panelConstructor;
 149           }.bind(this));
 150         } else {
 151           labelEl.title = 'Not supported for the current trace: ' +
 152               supported.reason;
 153         }
 154         this.tabStrip_.appendChild(labelEl);
 155       }, this);
 156
 157
 158       // Restore the active panel, or collapse
 159       if (previouslyActivePanelConstructor &&
 160           supportedPanelConstructors.indexOf(
 161               previouslyActivePanelConstructor) != -1) {
 162         this.activePanelConstructor = previouslyActivePanelConstructor;
 163         this.setAttribute('expanded', true);
 164       } else {
 165         this.activePanelContainer_.textContent = '';
 166         this.removeAttribute('expanded');
 167       }
 168     },
 169
 170     get selection() {
 171       return selection_;
 172     },
 173
 174     set selection(selection) {
 175       this.selection_ = selection;
 176       if (this.activePanel)
 177         this.activePanel.selection = selection;
 178     },
 179
 180     get rangeOfInterest() {
 181       return this.rangeOfInterest_;
 182     },
 183
 184     set rangeOfInterest(range) {
 185       if (range == undefined)
 186         throw new Error('Must not be undefined');
 187       this.rangeOfInterest_ = range;
 188       if (this.activePanel)
 189         this.activePanel.rangeOfInterest = range;
 190     }
 191   };
 192
 193
 194
 195   return {
 196     TimelineViewSidePanel: TimelineViewSidePanel,
 197     TimelineViewSidePanelContainer: TimelineViewSidePanelContainer
 198   };
 199 });