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/ui/base/table.html">
9
10<!--
11This class tries to (simply) copy the telemetry Results object, but outputs
12directly to an HTML table. It takes things that look like Telemetry values,
13and updates the table internally.
14-->
15<polymer-element name="tr-ui-e-deep-reports-html-results">
16  <template>
17    <style>
18    :host {
19      display: flex;
20    }
21    </style>
22    <tr-ui-b-table id="table"></tr-ui-b-table>
23  </template>
24  <script>
25  'use strict';
26
27  Polymer({
28    created: function() {
29      this.hasColumnNamed_ = {};
30      this.pageToRowMap_ = new WeakMap();
31    },
32
33    ready: function() {
34      var table = this.$.table;
35      table.tableColumns = [
36        {
37          title: 'Label',
38          value: function(row) { return row.label; },
39          width: '350px'
40        }
41      ];
42      this.clear();
43    },
44
45    clear: function() {
46      this.$.table.tableRows = [];
47    },
48
49    addColumnIfNeeded_: function(columnName) {
50      if (this.hasColumnNamed_[columnName])
51        return;
52      this.hasColumnNamed_[columnName] = true;
53
54      var column = {
55        title: columnName,
56        value: function(row) {
57          if (row[columnName] === undefined)
58            return '';
59          return row[columnName];
60        }
61      };
62
63      var columns = this.$.table.tableColumns;
64      columns.push(column);
65
66      // Update widths.
67      var colWidthPercentage;
68      if (columns.length == 1)
69        colWidthPercentage = '100%';
70      else
71        colWidthPercentage = (100 / (columns.length - 1)).toFixed(3) + '%';
72
73      for (var i = 1; i < columns.length; i++)
74        columns[i].width = colWidthPercentage;
75
76      this.$.table.tableColumns = columns;
77    },
78
79    getRowForPage_: function(page) {
80      if (!this.pageToRowMap_.has(page)) {
81        var i = page.url.lastIndexOf('/');
82        var baseName = page.url.substring(i + 1);
83
84        var link = document.createElement('a');
85        link.href = 'trace_viewer.html#' + page.url;
86        link.textContent = baseName;
87
88        var row = {
89          label: link,
90          value: '',
91          subRows: [],
92          isExpanded: true
93        };
94        this.$.table.tableRows.push(row);
95        this.pageToRowMap_.set(page, row);
96
97        // Kick table rebuild.
98        this.$.table.tableRows = this.$.table.tableRows;
99      }
100      return this.pageToRowMap_.get(page);
101    },
102
103    addValue: function(value) {
104      /* Value is expected to be a scalar telemetry-style Value. */
105      if (value.type !== 'scalar')
106        throw new Error('wat');
107
108      this.addColumnIfNeeded_(value.name);
109      var rowForPage = this.getRowForPage_(value.page);
110      rowForPage[value.name] = value.value;
111
112      // Kick table rebuild.
113      this.$.table.tableRows = this.$.table.tableRows;
114    }
115  });
116  </script>
117</polymer-element>
118