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/analysis_sub_view.html"> 9<link rel="import" href="/tracing/ui/analysis/frame_power_usage_chart.html"> 10<link rel="import" href="/tracing/ui/analysis/power_sample_summary_table.html"> 11<link rel="import" href="/tracing/ui/analysis/power_sample_table.html"> 12 13<polymer-element name="tr-ui-a-multi-power-sample-sub-view" 14 extends="tr-ui-a-sub-view"> 15 <template> 16 <style> 17 :host { 18 display: flex; 19 flex-direction: row; 20 } 21 #tables { 22 display: flex; 23 flex-direction: column; 24 width: 50%; 25 } 26 #chart { 27 width: 50%; 28 } 29 </style> 30 <div id="tables"> 31 <tr-ui-a-power-sample-summary-table id="summaryTable"> 32 </tr-ui-a-power-sample-summary-table> 33 <tr-ui-a-power-sample-table id="samplesTable"> 34 </tr-ui-a-power-sample-table> 35 </div> 36 <tr-ui-a-frame-power-usage-chart id="chart"> 37 </tr-ui-a-frame-power-usage-chart> 38 </template> 39</polymer-element> 40 41<script> 42'use strict'; 43 44// TODO(charliea): Add a dropdown that allows the user to select which type of 45// power sample analysis view they want (e.g. table of samples, graph). 46Polymer('tr-ui-a-multi-power-sample-sub-view', { 47 ready: function() { 48 this.currentSelection_ = undefined; 49 }, 50 51 get selection() { 52 return this.currentSelection_; 53 }, 54 55 set selection(selection) { 56 this.currentSelection_ = selection; 57 this.updateContents_(); 58 }, 59 60 updateContents_: function() { 61 var samples = this.selection; 62 var vSyncTimestamps = (this.selection === undefined) ? 63 [] : this.selection[0].series.device.vSyncTimestamps; 64 65 this.$.summaryTable.samples = samples; 66 this.$.samplesTable.samples = samples; 67 this.$.chart.setData(this.selection, vSyncTimestamps); 68 } 69}); 70</script> 71