| <!DOCTYPE html> |
| <!-- |
| Copyright 2015 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <link rel="import" href="/tracing/ui/analysis/memory_dump_overview_pane.html"> |
| <link rel="import" href="/tracing/ui/analysis/memory_dump_sub_view_util.html"> |
| <link rel="import" href="/tracing/ui/analysis/stacked_pane.html"> |
| <link rel="import" href="/tracing/ui/base/dom_helpers.html"> |
| <link rel="import" href="/tracing/value/unit.html"> |
| |
| <polymer-element name="tr-ui-a-memory-dump-header-pane" |
| extends="tr-ui-a-stacked-pane"> |
| <template> |
| <style> |
| :host { |
| display: flex; |
| flex-direction: row; |
| align-items: center; |
| |
| background-color: #d0d0d0; |
| border-bottom: 1px solid #8e8e8e; |
| border-top: 1px solid white; |
| } |
| |
| #label { |
| flex: 1 1 auto; |
| padding: 6px; |
| font-size: 15px; |
| } |
| |
| #aggregation_mode_container { |
| display: none; |
| flex: 0 0 auto; |
| padding: 5px; |
| font-size: 15px; |
| } |
| </style> |
| </tr-ui-b-view-specific-brushing-state> |
| <div id="label"></div> |
| <div id="aggregation_mode_container"> |
| <span>Metric aggregation:</span> |
| <!-- Aggregation mode selector (added in Polymer.ready()) --> |
| </div> |
| </template> |
| </polymer-element> |
| <script> |
| 'use strict'; |
| |
| tr.exportTo('tr.ui.analysis', function() { |
| |
| Polymer('tr-ui-a-memory-dump-header-pane', { |
| created: function() { |
| this.containerMemoryDumps_ = undefined; |
| }, |
| |
| ready: function() { |
| this.$.aggregation_mode_container.appendChild(tr.ui.b.createSelector( |
| this, 'aggregationMode', 'memoryDumpHeaderPane.aggregationMode', |
| tr.ui.analysis.MemoryColumn.AggregationMode.DIFF, |
| [ |
| { |
| label: 'Diff', |
| value: tr.ui.analysis.MemoryColumn.AggregationMode.DIFF |
| }, |
| { |
| label: 'Max', |
| value: tr.ui.analysis.MemoryColumn.AggregationMode.MAX |
| } |
| ])); |
| }, |
| |
| /** |
| * Sets the container memory dumps and schedules rebuilding the pane. |
| * |
| * The provided value should be a chronologically sorted list of |
| * ContainerMemoryDump objects. All of the dumps must be associated with |
| * the same container (i.e. containerMemoryDumps must be either a list of |
| * ProcessMemoryDump(s) belonging to the same process, or a list of |
| * GlobalMemoryDump(s)). Example: |
| * |
| * [ |
| * tr.model.ProcessMemoryDump {}, // PMD at timestamp 1. |
| * tr.model.ProcessMemoryDump {}, // PMD at timestamp 2. |
| * tr.model.ProcessMemoryDump {} // PMD at timestamp 3. |
| * ] |
| */ |
| set containerMemoryDumps(containerMemoryDumps) { |
| this.containerMemoryDumps_ = containerMemoryDumps; |
| this.scheduleRebuildPane_(); |
| }, |
| |
| get containerMemoryDumps() { |
| return this.containerMemoryDumps_; |
| }, |
| |
| set aggregationMode(aggregationMode) { |
| this.aggregationMode_ = aggregationMode; |
| this.scheduleRebuildPane_(); |
| }, |
| |
| get aggregationMode() { |
| return this.aggregationMode_; |
| }, |
| |
| rebuildPane_: function() { |
| this.updateLabel_(); |
| this.updateAggregationModeSelector_(); |
| this.changeChildPane_(); |
| }, |
| |
| updateLabel_: function() { |
| this.$.label.textContent = ''; |
| |
| if (this.containerMemoryDumps_ === undefined || |
| this.containerMemoryDumps_.length <= 0) { |
| this.$.label.textContent = 'No memory dumps selected'; |
| return; |
| } |
| |
| var containerDumpCount = this.containerMemoryDumps_.length; |
| var isMultiSelection = containerDumpCount > 1; |
| |
| this.$.label.appendChild(document.createTextNode( |
| 'Selected ' + containerDumpCount + ' memory dump' + |
| (isMultiSelection ? 's' : '') + |
| ' in ' + this.containerMemoryDumps_[0].containerName + ' at ')); |
| // TODO(petrcermak): Use <tr-v-ui-scalar-span> once it can be displayed |
| // inline. See https://github.com/catapult-project/catapult/issues/1371. |
| this.$.label.appendChild(document.createTextNode( |
| tr.v.Unit.byName.timeStampInMs.format( |
| this.containerMemoryDumps_[0].start))); |
| if (isMultiSelection) { |
| var ELLIPSIS = String.fromCharCode(8230); |
| this.$.label.appendChild(document.createTextNode(ELLIPSIS)); |
| this.$.label.appendChild(document.createTextNode( |
| tr.v.Unit.byName.timeStampInMs.format( |
| this.containerMemoryDumps_[containerDumpCount - 1].start))); |
| } |
| }, |
| |
| updateAggregationModeSelector_: function() { |
| var displayStyle; |
| if (this.containerMemoryDumps_ === undefined || |
| this.containerMemoryDumps_.length <= 1) |
| displayStyle = 'none'; |
| else |
| displayStyle = 'initial'; |
| this.$.aggregation_mode_container.style.display = displayStyle; |
| }, |
| |
| changeChildPane_: function() { |
| this.childPaneBuilder = function() { |
| if (this.containerMemoryDumps_ === undefined || |
| this.containerMemoryDumps_.length <= 0) |
| return undefined; |
| |
| var overviewPane = document.createElement( |
| 'tr-ui-a-memory-dump-overview-pane'); |
| overviewPane.processMemoryDumps = this.containerMemoryDumps_.map( |
| function(containerDump) { |
| return containerDump.processMemoryDumps; |
| }); |
| overviewPane.aggregationMode = this.aggregationMode; |
| return overviewPane; |
| }.bind(this); |
| } |
| }); |
| |
| return {}; |
| }); |
| </script> |
