1<!DOCTYPE html>
2<!--
3Copyright (c) 2013 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/base.html">
9<link rel="import" href="/tracing/ui/analysis/analysis_sub_view.html">
10<link rel="import" href="/tracing/ui/analysis/selection_summary_table.html">
11<link rel="import" href="/tracing/ui/analysis/multi_event_summary_table.html">
12<link rel="import" href="/tracing/ui/analysis/multi_event_details_table.html">
13<link rel="import" href="/tracing/ui/base/ui.html">
14<link rel="import" href="/tracing/ui/base/table.html">
15
16<polymer-element name="tr-ui-a-multi-event-sub-view"
17    extends="tr-ui-a-sub-view">
18  <template>
19    <style>
20    :host {
21      display: flex;
22      overflow: auto;
23    }
24    #content {
25      display: flex;
26      flex-direction: column;
27      flex: 0 1 auto;
28      align-self: stretch;
29    }
30    #content > * {
31      flex: 0 0 auto;
32      align-self: stretch;
33    }
34    tr-ui-a-multi-event-summary-table {
35      border-bottom: 1px solid #aaa;
36    }
37
38    tr-ui-a-selection-summary-table  {
39      margin-top: 1.25em;
40      border-top: 1px solid #aaa;
41      background-color: #eee;
42      font-weight: bold;
43      margin-bottom: 1.25em;
44      border-bottom: 1px solid #aaa;
45    }
46    </style>
47    <div id="content"></div>
48  </template>
49  <script>
50  'use strict';
51
52  Polymer({
53    created: function() {
54      this.currentSelection_ = undefined;
55      this.eventsHaveDuration_ = true;
56      this.eventsHaveSubRows_ = true;
57    },
58
59    set selection(selection) {
60      if (selection.length <= 1)
61        throw new Error('Only supports multiple items');
62      this.setSelectionWithoutErrorChecks(selection);
63    },
64
65    get selection() {
66      return this.currentSelection_;
67    },
68
69    setSelectionWithoutErrorChecks: function(selection) {
70      this.currentSelection_ = selection;
71      this.updateContents_();
72    },
73
74    get eventsHaveDuration() {
75      return this.eventsHaveDuration_;
76    },
77
78    set eventsHaveDuration(eventsHaveDuration) {
79      this.eventsHaveDuration_ = eventsHaveDuration;
80      this.updateContents_();
81    },
82
83    get eventsHaveSubRows() {
84      return this.eventsHaveSubRows_;
85    },
86
87    set eventsHaveSubRows(eventsHaveSubRows) {
88      this.eventsHaveSubRows_ = eventsHaveSubRows;
89      this.updateContents_();
90    },
91
92    updateContents_: function() {
93      var selection = this.currentSelection_;
94
95      this.$.content.textContent = '';
96      if (!selection)
97        return;
98
99      var eventsByTitle = selection.getEventsOrganizedByTitle();
100      var numTitles = tr.b.dictionaryLength(eventsByTitle);
101
102      var summaryTableEl = document.createElement(
103          'tr-ui-a-multi-event-summary-table');
104      summaryTableEl.configure({
105        showTotals: numTitles > 1,
106        eventsByTitle: eventsByTitle,
107        eventsHaveDuration: this.eventsHaveDuration_,
108        eventsHaveSubRows: this.eventsHaveSubRows_
109      });
110      this.$.content.appendChild(summaryTableEl);
111
112      var selectionSummaryTableEl = document.createElement(
113          'tr-ui-a-selection-summary-table');
114      selectionSummaryTableEl.selection = this.currentSelection_;
115      this.$.content.appendChild(selectionSummaryTableEl);
116
117      if (numTitles === 1) {
118        var detailsTableEl = document.createElement(
119            'tr-ui-a-multi-event-details-table');
120        detailsTableEl.eventsHaveDuration = this.eventsHaveDuration_;
121        detailsTableEl.eventsHaveSubRows = this.eventsHaveSubRows_;
122        detailsTableEl.selection = selection;
123        this.$.content.appendChild(detailsTableEl);
124      }
125    }
126  });
127  </script>
128</polymer-element>
129