src/third_party/trace-viewer/trace_viewer/tracing/tracks/heading_track.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2013 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/tracks/heading_track.css">
   9
  10 <link rel="import" href="/tracing/analysis/analysis_link.html">
  11 <link rel="import" href="/tracing/constants.html">
  12 <link rel="import" href="/tracing/tracks/track.html">
  13 <link rel="import" href="/base/ui.html">
  14
  15 <script>
  16 'use strict';
  17
  18 tv.exportTo('tracing.tracks', function() {
  19   var DOWN_ARROW = String.fromCharCode(0x25BE);
  20   var RIGHT_ARROW = String.fromCharCode(0x25B8);
  21
  22   /**
  23    * A track with a header. Provides the basic heading and tooltip
  24    * infrastructure. Subclasses must implement drawing code.
  25    * @constructor
  26    * @extends {HTMLDivElement}
  27    */
  28   var HeadingTrack = tv.ui.define('heading-track', tracing.tracks.Track);
  29
  30   HeadingTrack.prototype = {
  31     __proto__: tracing.tracks.Track.prototype,
  32
  33     decorate: function(viewport) {
  34       tracing.tracks.Track.prototype.decorate.call(this, viewport);
  35       this.classList.add('heading-track');
  36
  37       this.headingDiv_ = document.createElement('heading');
  38       this.headingDiv_.style.width = tracing.constants.HEADING_WIDTH + 'px';
  39       this.headingDiv_.addEventListener(
  40           'click', this.onHeadingDivClicked_.bind(this));
  41       this.heading_ = '';
  42       this.expanded_ = undefined;
  43       this.selectionGenerator_ = undefined;
  44       this.updateContents_();
  45     },
  46
  47     get heading() {
  48       return this.heading_;
  49     },
  50
  51     set heading(text) {
  52       this.heading_ = text;
  53       this.updateContents_();
  54     },
  55
  56     set tooltip(text) {
  57       this.headingDiv_.title = text;
  58     },
  59
  60     set selectionGenerator(generator) {
  61       this.selectionGenerator_ = generator;
  62       this.updateContents_();
  63     },
  64
  65     get expanded() {
  66       return this.expanded_;
  67     },
  68
  69     set expanded(expanded) {
  70       expanded = expanded;
  71       if (this.expanded_ == expanded)
  72         return;
  73       this.expanded_ = expanded;
  74       this.expandedStateChanged_();
  75     },
  76
  77     expandedStateChanged_: function() {
  78       this.updateHeadigDiv_();
  79     },
  80
  81     onHeadingDivClicked_: function() {
  82       var e = new Event('heading-clicked', true, false);
  83       this.dispatchEvent(e);
  84     },
  85
  86     updateContents_: function() {
  87       this.updateHeadigDiv_();
  88     },
  89
  90     updateHeadigDiv_: function() {
  91       /**
  92        * If this is a heading track of a sampling thread, we add a link to
  93        * the heading text ("Sampling Thread"). We associate a selection
  94        * generator with the link so that sampling profiling results are
  95        * displayed in the bottom frame when you click the link.
  96        */
  97       this.headingDiv_.innerHTML = '';
  98       var span = document.createElement('span');
  99       span.classList.add('heading-arrow');
 100       if (this.expanded === true)
 101         span.textContent = DOWN_ARROW;
 102       else if (this.expanded === false)
 103         span.textContent = RIGHT_ARROW;
 104       else
 105         span.textContent = '';
 106       this.headingDiv_.appendChild(span);
 107
 108       if (this.selectionGenerator_) {
 109         this.headingLink_ = document.createElement('a');
 110         tracing.analysis.AnalysisLink.decorate(this.headingLink_);
 111         this.headingLink_.selectionGenerator = this.selectionGenerator_;
 112         this.headingDiv_.appendChild(this.headingLink_);
 113         this.headingLink_.appendChild(document.createTextNode(this.heading_));
 114       } else {
 115         span = document.createElement('span');
 116         span.textContent = this.heading_;
 117         this.headingDiv_.appendChild(span);
 118       }
 119       this.appendChild(this.headingDiv_);
 120     },
 121
 122     draw: function(type, viewLWorld, viewRWorld) {
 123       throw new Error('draw implementation missing');
 124     }
 125   };
 126
 127   return {
 128     HeadingTrack: HeadingTrack
 129   };
 130 });
 131 </script>