summaryrefslogtreecommitdiff
path: root/chromium/third_party/catapult/tracing/tracing/ui/extras/deep_reports/html_results.html
blob: 2324a1d92149a5d3d72d708fa93d8fa12072ebd6 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<!--
Copyright (c) 2015 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/ui/base/table.html">

<!--
This class tries to (simply) copy the telemetry Results object, but outputs
directly to an HTML table. It takes things that look like Telemetry values,
and updates the table internally.
-->
<dom-module id='tr-ui-e-deep-reports-html-results'>
  <template>
    <style>
    :host {
      display: flex;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module>

<script>
'use strict';

Polymer({
  is: 'tr-ui-e-deep-reports-html-results',

  created: function() {
    this.hasColumnNamed_ = {};
    this.pageToRowMap_ = new WeakMap();
  },

  ready: function() {
    var table = this.$.table;
    table.tableColumns = [
      {
        title: 'Label',
        value: function(row) { return row.label; },
        width: '350px'
      }
    ];
    this.clear();
  },

  clear: function() {
    this.$.table.tableRows = [];
  },

  addColumnIfNeeded_: function(columnName) {
    if (this.hasColumnNamed_[columnName])
      return;
    this.hasColumnNamed_[columnName] = true;

    var column = {
      title: columnName,
      value: function(row) {
        if (row[columnName] === undefined)
          return '';
        return row[columnName];
      }
    };

    var columns = this.$.table.tableColumns;
    columns.push(column);

    // Update widths.
    var colWidthPercentage;
    if (columns.length === 1)
      colWidthPercentage = '100%';
    else
      colWidthPercentage = (100 / (columns.length - 1)).toFixed(3) + '%';

    for (var i = 1; i < columns.length; i++)
      columns[i].width = colWidthPercentage;

    this.$.table.tableColumns = columns;
  },

  getRowForPage_: function(page) {
    if (!this.pageToRowMap_.has(page)) {
      var i = page.url.lastIndexOf('/');
      var baseName = page.url.substring(i + 1);

      var link = document.createElement('a');
      link.href = 'trace_viewer.html#' + page.url;
      Polymer.dom(link).textContent = baseName;

      var row = {
        label: link,
        value: '',
        subRows: [],
        isExpanded: true
      };
      this.$.table.tableRows.push(row);
      this.pageToRowMap_.set(page, row);

      // Kick table rebuild.
      this.$.table.tableRows = this.$.table.tableRows;
    }
    return this.pageToRowMap_.get(page);
  },

  addValue: function(value) {
    /* Value is expected to be a scalar telemetry-style Value. */
    if (value.type !== 'scalar')
      throw new Error('wat');

    this.addColumnIfNeeded_(value.name);
    var rowForPage = this.getRowForPage_(value.page);
    rowForPage[value.name] = value.value;

    // Kick table rebuild.
    this.$.table.tableRows = this.$.table.tableRows;
  }
});
</script>