| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 2013 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/base/color_scheme.html"> |
| <link rel="import" href="/tracing/base/iteration_helpers.html"> |
| <link rel="import" href="/tracing/base/sorted_array_utils.html"> |
| <link rel="import" href="/tracing/base/unit.html"> |
| <link rel="import" href="/tracing/base/utils.html"> |
| <link rel="import" href="/tracing/model/event_set.html"> |
| <link rel="import" href="/tracing/model/model.html"> |
| <link rel="import" href="/tracing/ui/analysis/analysis_link.html"> |
| <link rel="import" href="/tracing/ui/analysis/analysis_sub_view.html"> |
| <link rel="import" href="/tracing/ui/analysis/generic_object_view.html"> |
| <link rel="import" href="/tracing/value/ui/scalar_span.html"> |
| |
| <dom-module id='tr-ui-a-single-thread-time-slice-sub-view'> |
| <template> |
| <style> |
| table { |
| border-collapse: collapse; |
| border-width: 0; |
| margin-bottom: 25px; |
| width: 100%; |
| } |
| |
| table tr > td:first-child { |
| padding-left: 2px; |
| } |
| |
| table tr > td { |
| padding: 2px 4px 2px 4px; |
| vertical-align: text-top; |
| width: 150px; |
| } |
| |
| table td td { |
| padding: 0 0 0 0; |
| width: auto; |
| } |
| tr { |
| vertical-align: top; |
| } |
| |
| tr:nth-child(2n+0) { |
| background-color: #e2e2e2; |
| } |
| </style> |
| <table> |
| <tr> |
| <td>Running process:</td><td id="process-name"></td> |
| </tr> |
| <tr> |
| <td>Running thread:</td><td id="thread-name"></td> |
| </tr> |
| <tr> |
| <td>State:</td> |
| <td><b><span id="state"></span></b></td> |
| </tr> |
| <tr> |
| <td>Start:</td> |
| <td> |
| <tr-v-ui-scalar-span id="start"> |
| </tr-v-ui-scalar-span> |
| </td> |
| </tr> |
| <tr> |
| <td>Duration:</td> |
| <td> |
| <tr-v-ui-scalar-span id="duration"> |
| </tr-v-ui-scalar-span> |
| </td> |
| </tr> |
| |
| <tr> |
| <td>On CPU:</td><td id="on-cpu"></td> |
| </tr> |
| |
| <tr> |
| <td>Running instead:</td><td id="running-instead"></td> |
| </tr> |
| |
| <tr> |
| <td>Args:</td><td id="args"></td> |
| </tr> |
| </table> |
| </template> |
| </dom-module> |
| <script> |
| 'use strict'; |
| |
| Polymer({ |
| is: 'tr-ui-a-single-thread-time-slice-sub-view', |
| behaviors: [tr.ui.analysis.AnalysisSubView], |
| |
| created: function() { |
| this.currentSelection_ = undefined; |
| }, |
| |
| get selection() { |
| return this.currentSelection_; |
| }, |
| |
| set selection(selection) { |
| var timeSlice = tr.b.getOnlyElement(selection); |
| |
| if (!(timeSlice instanceof tr.model.ThreadTimeSlice)) |
| throw new Error('Only supports thread time slices'); |
| |
| this.currentSelection_ = selection; |
| |
| var thread = timeSlice.thread; |
| |
| var root = Polymer.dom(this.root); |
| Polymer.dom(root.querySelector('#state')).textContent = |
| timeSlice.title; |
| var stateColor = tr.b.ColorScheme.colorsAsStrings[timeSlice.colorId]; |
| root.querySelector('#state').style.backgroundColor = stateColor; |
| |
| Polymer.dom(root.querySelector('#process-name')).textContent = |
| thread.parent.userFriendlyName; |
| Polymer.dom(root.querySelector('#thread-name')).textContent = |
| thread.userFriendlyName; |
| |
| root.querySelector('#start').setValueAndUnit( |
| timeSlice.start, tr.b.Unit.byName.timeStampInMs); |
| root.querySelector('#duration').setValueAndUnit( |
| timeSlice.duration, tr.b.Unit.byName.timeDurationInMs); |
| |
| var onCpuEl = root.querySelector('#on-cpu'); |
| Polymer.dom(onCpuEl).textContent = ''; |
| var runningInsteadEl = root.querySelector('#running-instead'); |
| if (timeSlice.cpuOnWhichThreadWasRunning) { |
| Polymer.dom(runningInsteadEl.parentElement).removeChild(runningInsteadEl); |
| |
| var cpuLink = document.createElement('tr-ui-a-analysis-link'); |
| cpuLink.selection = new tr.model.EventSet( |
| timeSlice.getAssociatedCpuSlice()); |
| Polymer.dom(cpuLink).textContent = |
| timeSlice.cpuOnWhichThreadWasRunning.userFriendlyName; |
| Polymer.dom(onCpuEl).appendChild(cpuLink); |
| } else { |
| Polymer.dom(onCpuEl.parentElement).removeChild(onCpuEl); |
| |
| var cpuSliceThatTookCpu = timeSlice.getCpuSliceThatTookCpu(); |
| if (cpuSliceThatTookCpu) { |
| var cpuLink = document.createElement('tr-ui-a-analysis-link'); |
| cpuLink.selection = new tr.model.EventSet(cpuSliceThatTookCpu); |
| if (cpuSliceThatTookCpu.thread) |
| Polymer.dom(cpuLink).textContent = |
| cpuSliceThatTookCpu.thread.userFriendlyName; |
| else |
| Polymer.dom(cpuLink).textContent = cpuSliceThatTookCpu.title; |
| Polymer.dom(runningInsteadEl).appendChild(cpuLink); |
| } else { |
| Polymer.dom(runningInsteadEl.parentElement).removeChild( |
| runningInsteadEl); |
| } |
| } |
| |
| var argsEl = root.querySelector('#args'); |
| if (tr.b.dictionaryKeys(timeSlice.args).length > 0) { |
| var argsView = |
| document.createElement('tr-ui-a-generic-object-view'); |
| argsView.object = timeSlice.args; |
| |
| argsEl.parentElement.style.display = ''; |
| Polymer.dom(argsEl).textContent = ''; |
| Polymer.dom(argsEl).appendChild(argsView); |
| } else { |
| argsEl.parentElement.style.display = 'none'; |
| } |
| } |
| }); |
| |
| tr.ui.analysis.AnalysisSubView.register( |
| 'tr-ui-a-single-thread-time-slice-sub-view', |
| tr.model.ThreadTimeSlice, |
| { |
| multi: false, |
| title: 'Thread Timeslice', |
| }); |
| </script> |
