1<!DOCTYPE html>
2<!--
3Copyright 2015 The Chromium Authors. All rights reserved.
4Use of this source code is governed by a BSD-style license that can be
5found in the LICENSE file.
6-->
7
8<link rel='import' href='/tracing/ui/base/constants.html'>
9
10<polymer-element name='tr-ui-heading'>
11  <template>
12    <style>
13    :host {
14      background-color: rgb(243, 245, 247);
15      border-right: 1px solid #8e8e8e;
16      display: block;
17      height: 100%;
18      margin: 0;
19      padding: 0 5px 0 0;
20    }
21
22    heading {
23      display: block;
24      overflow-x: hidden;
25      text-align: left;
26      text-overflow: ellipsis;
27      white-space: nowrap;
28    }
29
30    #arrow {
31      -webkit-flex: 0 0 auto;
32      font-family: sans-serif;
33      margin-left: 5px;
34      margin-right: 5px;
35      width: 8px;
36    }
37
38    #link, #heading_content {
39      display: none;
40    }
41    </style>
42    <heading id='heading' on-click='{{onHeadingDivClicked_}}'>
43      <span id='arrow'></span>
44      <span id='heading_content'></span>
45      <tr-ui-a-analysis-link id='link'></tr-ui-a-analysis-link>
46    </heading>
47  </template>
48
49  <script>
50  'use strict';
51  Polymer({
52    DOWN_ARROW: String.fromCharCode(0x25BE),
53    RIGHT_ARROW: String.fromCharCode(0x25B8),
54
55    ready: function(viewport) {
56      // Minus 6 == 1px border + 5px padding right.
57      this.style.width = (tr.ui.b.constants.HEADING_WIDTH - 6) + 'px';
58
59      this.heading_ = '';
60      this.expanded_ = true;
61      this.arrowVisible_ = false;
62      this.selectionGenerator_ = undefined;
63
64      this.updateContents_();
65    },
66
67    get heading() {
68      return this.heading_;
69    },
70
71    set heading(text) {
72      if (this.heading_ === text)
73        return;
74
75      this.heading_ = text;
76      this.updateContents_();
77    },
78
79    set arrowVisible(val) {
80      if (this.arrowVisible_ === val)
81        return;
82
83      this.arrowVisible_ = !!val;
84      this.updateContents_();
85    },
86
87    set tooltip(text) {
88      this.$.heading.title = text;
89    },
90
91    set selectionGenerator(generator) {
92      if (this.selectionGenerator_ === generator)
93        return;
94
95      this.selectionGenerator_ = generator;
96      this.updateContents_();
97    },
98
99    get expanded() {
100      return this.expanded_;
101    },
102
103    set expanded(expanded) {
104      if (this.expanded_ === expanded)
105        return;
106
107      this.expanded_ = !!expanded;
108      this.updateContents_();
109    },
110
111    onHeadingDivClicked_: function() {
112      this.dispatchEvent(new tr.b.Event('heading-clicked', {'bubbles': true}));
113    },
114
115    updateContents_: function() {
116      if (this.arrowVisible_) {
117        this.$.arrow.style.display = '';
118      } else {
119        this.$.arrow.style.display = 'none';
120        this.$.heading.style.display = this.expanded_ ? '' : 'none';
121      }
122
123      if (this.arrowVisible_) {
124        this.$.arrow.textContent =
125            this.expanded_ ? this.DOWN_ARROW : this.RIGHT_ARROW;
126      }
127
128      this.$.link.style.display = 'none';
129      this.$.heading_content.style.display = 'none';
130
131      if (this.selectionGenerator_) {
132        this.$.link.style.display = 'inline-block';
133        this.$.link.selection = this.selectionGenerator_;
134        this.$.link.textContent = this.heading_;
135      } else {
136        this.$.heading_content.style.display = 'inline-block';
137        this.$.heading_content.textContent = this.heading_;
138      }
139    }
140  });
141  </script>
142</polymer-element>
143