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/analysis/memory_dump_overview_pane.html">
9<link rel="import" href="/tracing/ui/analysis/memory_dump_sub_view_util.html">
10<link rel="import" href="/tracing/ui/analysis/stacked_pane.html">
11<link rel="import" href="/tracing/ui/base/dom_helpers.html">
12<link rel="import" href="/tracing/value/unit.html">
13
14<polymer-element name="tr-ui-a-memory-dump-header-pane"
15    extends="tr-ui-a-stacked-pane">
16  <template>
17    <style>
18      :host {
19        display: flex;
20        flex-direction: row;
21        align-items: center;
22
23        background-color: #d0d0d0;
24        border-bottom: 1px solid #8e8e8e;
25        border-top: 1px solid white;
26      }
27
28      #label {
29        flex: 1 1 auto;
30        padding: 6px;
31        font-size: 15px;
32      }
33
34      #aggregation_mode_container {
35        display: none;
36        flex: 0 0 auto;
37        padding: 5px;
38        font-size: 15px;
39      }
40    </style>
41    </tr-ui-b-view-specific-brushing-state>
42    <div id="label"></div>
43    <div id="aggregation_mode_container">
44      <span>Metric aggregation:</span>
45      <!-- Aggregation mode selector (added in Polymer.ready()) -->
46    </div>
47  </template>
48</polymer-element>
49<script>
50'use strict';
51
52tr.exportTo('tr.ui.analysis', function() {
53
54  Polymer('tr-ui-a-memory-dump-header-pane', {
55    created: function() {
56      this.containerMemoryDumps_ = undefined;
57    },
58
59    ready: function() {
60      this.$.aggregation_mode_container.appendChild(tr.ui.b.createSelector(
61          this, 'aggregationMode', 'memoryDumpHeaderPane.aggregationMode',
62          tr.ui.analysis.MemoryColumn.AggregationMode.DIFF,
63          [
64            {
65              label: 'Diff',
66              value: tr.ui.analysis.MemoryColumn.AggregationMode.DIFF
67            },
68            {
69              label: 'Max',
70              value: tr.ui.analysis.MemoryColumn.AggregationMode.MAX
71            }
72          ]));
73    },
74
75    /**
76     * Sets the container memory dumps and schedules rebuilding the pane.
77     *
78     * The provided value should be a chronologically sorted list of
79     * ContainerMemoryDump objects. All of the dumps must be associated with
80     * the same container (i.e. containerMemoryDumps must be either a list of
81     * ProcessMemoryDump(s) belonging to the same process, or a list of
82     * GlobalMemoryDump(s)). Example:
83     *
84     *   [
85     *     tr.model.ProcessMemoryDump {},  // PMD at timestamp 1.
86     *     tr.model.ProcessMemoryDump {},  // PMD at timestamp 2.
87     *     tr.model.ProcessMemoryDump {}   // PMD at timestamp 3.
88     *   ]
89     */
90    set containerMemoryDumps(containerMemoryDumps) {
91      this.containerMemoryDumps_ = containerMemoryDumps;
92      this.scheduleRebuildPane_();
93    },
94
95    get containerMemoryDumps() {
96      return this.containerMemoryDumps_;
97    },
98
99    set aggregationMode(aggregationMode) {
100      this.aggregationMode_ = aggregationMode;
101      this.scheduleRebuildPane_();
102    },
103
104    get aggregationMode() {
105      return this.aggregationMode_;
106    },
107
108    rebuildPane_: function() {
109      this.updateLabel_();
110      this.updateAggregationModeSelector_();
111      this.changeChildPane_();
112    },
113
114    updateLabel_: function() {
115      this.$.label.textContent = '';
116
117      if (this.containerMemoryDumps_ === undefined ||
118          this.containerMemoryDumps_.length <= 0) {
119        this.$.label.textContent = 'No memory dumps selected';
120        return;
121      }
122
123      var containerDumpCount = this.containerMemoryDumps_.length;
124      var isMultiSelection = containerDumpCount > 1;
125
126      this.$.label.appendChild(document.createTextNode(
127          'Selected ' + containerDumpCount + ' memory dump' +
128          (isMultiSelection ? 's' : '') +
129          ' in ' + this.containerMemoryDumps_[0].containerName + ' at '));
130      // TODO(petrcermak): Use <tr-v-ui-scalar-span> once it can be displayed
131      // inline. See https://github.com/catapult-project/catapult/issues/1371.
132      this.$.label.appendChild(document.createTextNode(
133          tr.v.Unit.byName.timeStampInMs.format(
134              this.containerMemoryDumps_[0].start)));
135      if (isMultiSelection) {
136        var ELLIPSIS = String.fromCharCode(8230);
137        this.$.label.appendChild(document.createTextNode(ELLIPSIS));
138        this.$.label.appendChild(document.createTextNode(
139            tr.v.Unit.byName.timeStampInMs.format(
140                this.containerMemoryDumps_[containerDumpCount - 1].start)));
141      }
142    },
143
144    updateAggregationModeSelector_: function() {
145      var displayStyle;
146      if (this.containerMemoryDumps_ === undefined ||
147          this.containerMemoryDumps_.length <= 1)
148        displayStyle = 'none';
149      else
150        displayStyle = 'initial';
151      this.$.aggregation_mode_container.style.display = displayStyle;
152    },
153
154    changeChildPane_: function() {
155      this.childPaneBuilder = function() {
156        if (this.containerMemoryDumps_ === undefined ||
157            this.containerMemoryDumps_.length <= 0)
158          return undefined;
159
160        var overviewPane = document.createElement(
161            'tr-ui-a-memory-dump-overview-pane');
162        overviewPane.processMemoryDumps = this.containerMemoryDumps_.map(
163            function(containerDump) {
164              return containerDump.processMemoryDumps;
165            });
166        overviewPane.aggregationMode = this.aggregationMode;
167        return overviewPane;
168      }.bind(this);
169    }
170  });
171
172  return {};
173});
174</script>
175