src/third_party/trace-viewer/trace_viewer/tracing/side_panel/timeline_view.html

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