1<!DOCTYPE html> 2<!-- 3Copyright (c) 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/base/base.html"> 9<link rel="import" href="/tracing/ui/analysis/analysis_sub_view.html"> 10<link rel="import" href="/tracing/ui/base/dom_helpers.html"> 11<link rel="import" href="/tracing/ui/base/table.html"> 12<link rel="import" href="/tracing/ui/base/ui.html"> 13 14<polymer-element name="tr-ui-a-alert-sub-view" 15 extends="tr-ui-a-sub-view"> 16 <template> 17 <style> 18 :host { 19 display: flex; 20 flex-direction: column; 21 } 22 #table { 23 flex: 1 1 auto; 24 align-self: stretch; 25 } 26 </style> 27 <tr-ui-b-table id="table"> 28 </tr-ui-b-table> 29 </template> 30 <script> 31 'use strict'; 32 33 Polymer({ 34 ready: function() { 35 this.currentSelection_ = undefined; 36 this.$.table.tableColumns = [ 37 { 38 title: 'Label', 39 value: function(row) { return row.name; }, 40 width: '150px' 41 }, 42 { 43 title: 'Value', 44 width: '100%', 45 value: function(row) { return row.value; } 46 } 47 ]; 48 this.$.table.showHeader = false; 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 getRowsForSingleAlert_: function(alert) { 61 var rows = []; 62 63 // Arguments 64 for (var argName in alert.args) { 65 var argView = 66 document.createElement('tr-ui-a-generic-object-view'); 67 argView.object = alert.args[argName]; 68 rows.push({ name: argName, value: argView }); 69 } 70 71 // Associated events 72 if (alert.associatedEvents.length) { 73 alert.associatedEvents.forEach(function(event, i) { 74 var linkEl = document.createElement('tr-ui-a-analysis-link'); 75 linkEl.setSelectionAndContent(function() { 76 return event; 77 }, event.title); 78 79 var valueString = ''; 80 if (event instanceof tr.model.TimedEvent) 81 valueString = 'took ' + event.duration.toFixed(2) + 'ms'; 82 83 rows.push({ 84 name: linkEl, 85 value: valueString 86 }); 87 }); 88 } 89 90 // Description 91 var descriptionEl = tr.ui.b.createDiv({ 92 textContent: alert.info.description, 93 maxWidth: '300px' 94 }); 95 rows.push({ 96 name: 'Description', 97 value: descriptionEl 98 }); 99 100 // Additional Reading Links 101 if (alert.info.docLinks) { 102 alert.info.docLinks.forEach(function(linkObject) { 103 var linkEl = document.createElement('a'); 104 linkEl.target = '_blank'; 105 linkEl.href = linkObject.href; 106 linkEl.textContent = linkObject.textContent; 107 rows.push({ 108 name: linkObject.label, 109 value: linkEl 110 }); 111 }); 112 } 113 return rows; 114 }, 115 116 getRowsForAlerts_: function(alerts) { 117 if (alerts.length == 1) { 118 var rows = [{ 119 name: 'Alert', 120 value: alerts[0].title 121 }]; 122 var detailRows = this.getRowsForSingleAlert_(alerts[0]); 123 rows.push.apply(rows, detailRows); 124 return rows; 125 } else { 126 return alerts.map(function(alert) { 127 return { 128 name: 'Alert', 129 value: alert.title, 130 isExpanded: alerts.size < 10, // This is somewhat arbitrary for now. 131 subRows: this.getRowsForSingleAlert_(alert) 132 }; 133 }, this); 134 } 135 }, 136 137 updateContents_: function() { 138 if (this.currentSelection_ === undefined) { 139 this.$.table.rows = []; 140 this.$.table.rebuild(); 141 return; 142 } 143 144 var alerts = this.currentSelection_; 145 this.$.table.tableRows = this.getRowsForAlerts_(alerts); 146 this.$.table.rebuild(); 147 }, 148 149 get relatedEventsToHighlight() { 150 if (!this.currentSelection_) 151 return undefined; 152 return this.currentSelection_[0].associatedEvents; 153 } 154 }); 155 </script> 156</polymer-element> 157