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/color_scheme.html">
9<link rel="import" href="/tracing/base/sorted_array_utils.html">
10<link rel="import" href="/tracing/base/utils.html">
11<link rel="import" href="/tracing/model/event_set.html">
12<link rel="import" href="/tracing/model/model.html">
13<link rel="import" href="/tracing/ui/analysis/analysis_link.html">
14<link rel="import" href="/tracing/ui/analysis/analysis_sub_view.html">
15<link rel="import" href="/tracing/ui/analysis/generic_object_view.html">
16<link rel="import" href="/tracing/value/ui/scalar_span.html">
17<link rel="import" href="/tracing/value/unit.html">
18
19<polymer-element name="tr-ui-a-single-thread-time-slice-sub-view"
20    extends="tr-ui-a-sub-view">
21  <template>
22    <style>
23    table {
24      border-collapse: collapse;
25      border-width: 0;
26      margin-bottom: 25px;
27      width: 100%;
28    }
29
30    table tr > td:first-child {
31      padding-left: 2px;
32    }
33
34    table tr > td {
35      padding: 2px 4px 2px 4px;
36      vertical-align: text-top;
37      width: 150px;
38    }
39
40    table td td {
41      padding: 0 0 0 0;
42      width: auto;
43    }
44    tr {
45      vertical-align: top;
46    }
47
48    tr:nth-child(2n+0) {
49      background-color: #e2e2e2;
50    }
51    </style>
52    <table>
53      <tr>
54        <td>Running process:</td><td id="process-name"></td>
55      </tr>
56      <tr>
57        <td>Running thread:</td><td id="thread-name"></td>
58      </tr>
59      <tr>
60        <td>State:</td>
61        <td><b><span id="state"></span></b></td>
62      </tr>
63      <tr>
64        <td>Start:</td>
65        <td>
66          <tr-v-ui-scalar-span id="start">
67          </tr-v-ui-scalar-span>
68        </td>
69      </tr>
70      <tr>
71        <td>Duration:</td>
72        <td>
73          <tr-v-ui-scalar-span id="duration">
74          </tr-v-ui-scalar-span>
75        </td>
76      </tr>
77
78      <tr>
79        <td>On CPU:</td><td id="on-cpu"></td>
80      </tr>
81
82      <tr>
83        <td>Running instead:</td><td id="running-instead"></td>
84      </tr>
85
86      <tr>
87        <td>Args:</td><td id="args"></td>
88      </tr>
89    </table>
90  </template>
91
92  <script>
93  'use strict';
94
95  Polymer({
96    created: function() {
97      this.currentSelection_ = undefined;
98    },
99
100    get selection() {
101      return this.currentSelection_;
102    },
103
104    set selection(selection) {
105      if (selection.length !== 1)
106        throw new Error('Only supports single slices');
107      if (!(selection[0] instanceof tr.model.ThreadTimeSlice))
108        throw new Error('Only supports thread time slices');
109
110      this.currentSelection_ = selection;
111
112      var timeSlice = selection[0];
113      var thread = timeSlice.thread;
114
115      var shadowRoot = this.shadowRoot;
116      shadowRoot.querySelector('#state').textContent = timeSlice.title;
117      var stateColor = tr.b.ColorScheme.colorsAsStrings[timeSlice.colorId];
118      shadowRoot.querySelector('#state').style.backgroundColor = stateColor;
119
120      shadowRoot.querySelector('#process-name').textContent =
121          thread.parent.userFriendlyName;
122      shadowRoot.querySelector('#thread-name').textContent =
123          thread.userFriendlyName;
124
125      shadowRoot.querySelector('#start').setValueAndUnit(
126          timeSlice.start, tr.v.Unit.byName.timeStampInMs);
127      shadowRoot.querySelector('#duration').setValueAndUnit(
128          timeSlice.duration, tr.v.Unit.byName.timeDurationInMs);
129
130      var onCpuEl = shadowRoot.querySelector('#on-cpu');
131      onCpuEl.textContent = '';
132      var runningInsteadEl = shadowRoot.querySelector('#running-instead');
133      if (timeSlice.cpuOnWhichThreadWasRunning) {
134        runningInsteadEl.parentElement.removeChild(runningInsteadEl);
135
136        var cpuLink = document.createElement('tr-ui-a-analysis-link');
137        cpuLink.selection = new tr.model.EventSet(
138            timeSlice.getAssociatedCpuSlice());
139        cpuLink.textContent =
140            timeSlice.cpuOnWhichThreadWasRunning.userFriendlyName;
141        onCpuEl.appendChild(cpuLink);
142      } else {
143        onCpuEl.parentElement.removeChild(onCpuEl);
144
145        var cpuSliceThatTookCpu = timeSlice.getCpuSliceThatTookCpu();
146        if (cpuSliceThatTookCpu) {
147          var cpuLink = document.createElement('tr-ui-a-analysis-link');
148          cpuLink.selection = new tr.model.EventSet(cpuSliceThatTookCpu);
149          if (cpuSliceThatTookCpu.thread)
150            cpuLink.textContent = cpuSliceThatTookCpu.thread.userFriendlyName;
151          else
152            cpuLink.textContent = cpuSliceThatTookCpu.title;
153          runningInsteadEl.appendChild(cpuLink);
154        } else {
155          runningInsteadEl.parentElement.removeChild(runningInsteadEl);
156        }
157      }
158
159      var argsEl = shadowRoot.querySelector('#args');
160      if (tr.b.dictionaryKeys(timeSlice.args).length > 0) {
161        var argsView =
162            document.createElement('tr-ui-a-generic-object-view');
163        argsView.object = timeSlice.args;
164
165        argsEl.parentElement.style.display = '';
166        argsEl.textContent = '';
167        argsEl.appendChild(argsView);
168      } else {
169        argsEl.parentElement.style.display = 'none';
170      }
171    }
172  });
173  </script>
174</polymer-element>
175