1<!DOCTYPE html>
2<!--
3Copyright (c) 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/base/color_scheme.html">
9<link rel="import" href="/tracing/model/compound_event_selection_state.html">
10<link rel="import" href="/tracing/ui/base/dom_helpers.html">
11
12<!--
13@fileoverview A component used to display a label and a color square.
14
15The colored square is typically filled with the color associated with
16that label, using the getColorId* methods from base/color_scheme.
17-->
18<polymer-element name="tr-ui-b-color-legend">
19  <template>
20    <style>
21    :host {
22      display: inline-block;
23    }
24
25    #square {
26      font-size: 150%;  /* Make the square bigger. */
27      line-height: 0%;  /* Prevent the square from increasing legend height. */
28    }
29    </style>
30    <span id="square"></span>
31    <span id="label"></span>
32  </template>
33  <script>
34  'use strict';
35
36  Polymer({
37    ready: function() {
38      var blackSquareCharCode = 9632;
39      this.$.square.innerText = String.fromCharCode(blackSquareCharCode);
40      this.label_ = undefined;
41
42      this.compoundEventSelectionState_ =
43          tr.model.CompoundEventSelectionState.NOT_SELECTED;
44    },
45
46    set compoundEventSelectionState(compoundEventSelectionState) {
47      this.compoundEventSelectionState_ = compoundEventSelectionState;
48      // TODO(nduca): Adjust appearance based on associated state.
49    },
50
51    get label() {
52      return this.label_;
53    },
54
55    set label(label) {
56      if (label === undefined) {
57        this.setLabelAndColorId(undefined, undefined);
58        return;
59      }
60
61      var colorId = tr.b.ColorScheme.getColorIdForGeneralPurposeString(
62          label);
63      this.setLabelAndColorId(label, colorId);
64    },
65
66    setLabelAndColorId: function(label, colorId) {
67      this.label_ = label;
68
69      this.$.label.textContent = '';
70      this.$.label.appendChild(tr.ui.b.asHTMLOrTextNode(label));
71
72      if (colorId === undefined)
73        this.$.square.style.color = 'initial';
74      else
75        this.$.square.style.color = tr.b.ColorScheme.colorsAsStrings[colorId];
76    }
77  });
78  </script>
79</polymer-element>
80