src/third_party/trace-viewer/trace_viewer/tracing/analysis/analysis_results.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2013 The Chromium Authors. All rights reserved.
   4 Use of this source code is governed by a BSD-style license that can be
   5 found in the LICENSE file.
   6 -->
   7 <link rel="stylesheet" href="/tracing/analysis/analysis_results.css">
   8
   9 <link rel="import" href="/base/ui.html">
  10 <link rel="import" href="/tracing/analysis/util.html">
  11 <link rel="import" href="/tracing/analysis/analysis_link.html">
  12 <link rel="import" href="/tracing/analysis/generic_object_view.html">
  13
  14 <script>
  15 'use strict';
  16
  17 tv.exportTo('tracing.analysis', function() {
  18   var AnalysisResults = tv.ui.define('div');
  19
  20   AnalysisResults.prototype = {
  21     __proto__: HTMLDivElement.prototype,
  22
  23     decorate: function() {
  24       this.className = 'analysis-results';
  25     },
  26
  27     get requiresTallView() {
  28       return true;
  29     },
  30
  31     clear: function() {
  32       this.textContent = '';
  33     },
  34
  35     createSelectionChangingLink: function(text, selectionGenerator,
  36                                           opt_tooltip) {
  37       var el = this.ownerDocument.createElement('a');
  38       tracing.analysis.AnalysisLink.decorate(el);
  39       el.textContent = text;
  40       el.selectionGenerator = selectionGenerator;
  41       if (opt_tooltip)
  42         el.title = opt_tooltip;
  43       return el;
  44     },
  45
  46     appendElement_: function(parent, tagName, opt_text) {
  47       var n = parent.ownerDocument.createElement(tagName);
  48       parent.appendChild(n);
  49       if (opt_text != undefined)
  50         n.textContent = opt_text;
  51       return n;
  52     },
  53
  54     appendText_: function(parent, text) {
  55       var textElement = parent.ownerDocument.createTextNode(text);
  56       parent.appendChild(textNode);
  57       return textNode;
  58     },
  59
  60     appendTableCell_: function(table, row, cellnum, text, opt_warning) {
  61       var td = this.appendElement_(row, 'td', text);
  62       td.className = table.className + '-col-' + cellnum;
  63       if (opt_warning) {
  64         var span = document.createElement('span');
  65         span.textContent = ' ' + String.fromCharCode(9888);
  66         span.title = opt_warning;
  67         td.appendChild(span);
  68       }
  69       return td;
  70     },
  71
  72     /**
  73      * Creates and append a table cell at the end of the given row.
  74      */
  75     appendTableCell: function(table, row, text) {
  76       return this.appendTableCell_(table, row, row.children.length, text);
  77     },
  78
  79     appendTableCellWithTooltip_: function(table, row, cellnum, text, tooltip) {
  80       if (tooltip) {
  81         var td = this.appendElement_(row, 'td');
  82         td.className = table.className + '-col-' + cellnum;
  83         var span = this.appendElement_(td, 'span', text);
  84         span.className = 'tooltip';
  85         span.title = tooltip;
  86         return td;
  87       } else {
  88         return this.appendTableCell_(table, row, cellnum, text);
  89       }
  90     },
  91
  92     /**
  93      * Creates and appends a section header element.
  94      */
  95     appendHeader: function(label) {
  96       var header = this.appendElement_(this, 'span', label);
  97       header.className = 'analysis-header';
  98       return header;
  99     },
 100
 101     /**
 102      * Creates and appends a info element of the format "<b>label</b>value".
 103      */
 104     appendInfo: function(label, value) {
 105       var div = this.appendElement_(this, 'div');
 106       div.label = this.appendElement_(div, 'b', label);
 107       div.value = this.appendElement_(div, 'span', value);
 108       return div;
 109     },
 110
 111     /**
 112      * Adds a table with the given className.
 113      *
 114      * @return {HTMLTableElement} The newly created table.
 115      */
 116     appendTable: function(className, numColumns) {
 117       var table = this.appendElement_(this, 'table');
 118       table.className = className + ' analysis-table';
 119       table.numColumns = numColumns;
 120       return table;
 121     },
 122
 123     /**
 124      * Creates and appends a |tr| in |thead|, if |thead| does not exist, create
 125      * it as well.
 126      */
 127     appendHeadRow: function(table) {
 128       if (table.headerRow)
 129         throw new Error('Only one header row allowed.');
 130       if (table.tbody || table.tfoot)
 131         throw new Error(
 132             'Cannot add a header row after data rows have been added.');
 133       table.headerRow = this.appendElement_(
 134                                   this.appendElement_(table, 'thead'), 'tr');
 135       table.headerRow.className = 'analysis-table-header';
 136       return table.headerRow;
 137     },
 138
 139     /**
 140      * Creates and appends a |tr| in |tbody|, if |tbody| does not exist, create
 141      * it as well.
 142      */
 143     appendBodyRow: function(table) {
 144       if (table.tfoot)
 145         throw new Error(
 146             'Cannot add a tbody row after footer rows have been added.');
 147       if (!table.tbody)
 148         table.tbody = this.appendElement_(table, 'tbody');
 149       var row = this.appendElement_(table.tbody, 'tr');
 150       if (table.headerRow)
 151         row.className = 'analysis-table-row';
 152       else
 153         row.className = 'analysis-table-row-inverted';
 154       return row;
 155     },
 156
 157     /**
 158      * Creates and appends a |tr| in |tfoot|, if |tfoot| does not exist, create
 159      * it as well.
 160      */
 161     appendFootRow: function(table) {
 162       if (!table.tfoot) {
 163         table.tfoot = this.appendElement_(table, 'tfoot');
 164         table.tfoot.rowsClassName = (
 165             (table.headerRow ? 1 : 0) +
 166             (table.tbody ? table.tbody.rows.length : 0)) % 2 ?
 167                 'analysis-table-row' : 'analysis-table-row-inverted';
 168       }
 169
 170       var row = this.appendElement_(table.tfoot, 'tr');
 171       row.className = table.tfoot.rowsClassName;
 172       return row;
 173     },
 174
 175     /**
 176      * Adds a spacing row to spread out results.
 177      */
 178     appendSpacingRow: function(table, opt_inFoot) {
 179       if (table.tfoot || opt_inFoot)
 180         var row = this.appendFootRow(table);
 181       else
 182         var row = this.appendBodyRow(table);
 183       for (var i = 0; i < table.numColumns; i++)
 184         this.appendTableCell_(table, row, i, ' ');
 185     },
 186
 187     /**
 188      * Creates and appends a row to |table| with a left-aligned |label] in the
 189      * first column and an optional |opt_value| in the second column.
 190      */
 191     appendInfoRow: function(table, label, opt_value, opt_inFoot) {
 192       if (table.tfoot || opt_inFoot)
 193         var row = this.appendFootRow(table);
 194       else
 195         var row = this.appendBodyRow(table);
 196       this.appendTableCell_(table, row, 0, label);
 197       if (opt_value !== undefined) {
 198         var objectView = new tracing.analysis.GenericObjectView();
 199         objectView.object = opt_value;
 200         objectView.classList.add('analysis-table-col-1');
 201         objectView.style.display = 'table-cell';
 202         row.appendChild(objectView);
 203       } else {
 204         this.appendTableCell_(table, row, 1, '');
 205       }
 206       for (var i = 2; i < table.numColumns; i++)
 207         this.appendTableCell_(table, row, i, '');
 208     },
 209
 210     /**
 211      * Creates and appends a row to |table| with a left-aligned |label] in the
 212      * first column and a millisecond |time| value in the second column.
 213      */
 214     appendInfoRowTime: function(table, label, time, opt_inFoot, opt_warning) {
 215       if (table.tfoot || opt_inFoot)
 216         var row = this.appendFootRow(table);
 217       else
 218         var row = this.appendBodyRow(table);
 219       this.appendTableCell_(table, row, 0, label);
 220       this.appendTableCell_(
 221           table, row, 1, tracing.analysis.tsRound(time) + ' ms', opt_warning);
 222     },
 223
 224     /**
 225      * Creates and appends a row to |table| that summarizes a single slice or a
 226      * single counter. The row has a left-aligned |start| in the first column,
 227      * the |duration| of the data in the second, the number of |occurrences| in
 228      * the third.
 229      *
 230      * @param {object=} opt_statistics May be undefined, or an object which
 231      *          contains calculated staistics containing min/max/avg for slices,
 232      *          or min/max/avg/start/end for counters.
 233      */
 234     appendDetailsRow: function(table, start, duration, selfTime, args,
 235         opt_selectionGenerator, opt_cpuDuration) {
 236       var row = this.appendBodyRow(table);
 237
 238       if (opt_selectionGenerator) {
 239         var labelEl = this.appendTableCell(table, row,
 240                                            tracing.analysis.tsRound(start));
 241         labelEl.textContent = '';
 242         labelEl.appendChild(this.createSelectionChangingLink(
 243                                     tracing.analysis.tsRound(start),
 244                                     opt_selectionGenerator, ''));
 245       } else {
 246         this.appendTableCell(table, row, tracing.analysis.tsRound(start));
 247       }
 248
 249       if (duration !== null)
 250         this.appendTableCell(table, row, tracing.analysis.tsRound(duration));
 251
 252       if (opt_cpuDuration)
 253         this.appendTableCell(table, row,
 254                              opt_cpuDuration != '' ?
 255                              tracing.analysis.tsRound(opt_cpuDuration) :
 256                              '');
 257
 258       if (selfTime !== null)
 259         this.appendTableCell(table, row, tracing.analysis.tsRound(selfTime));
 260
 261       var argsCell = this.appendTableCell(table, row, '');
 262       var n = 0;
 263       for (var argName in args) {
 264         n += 1;
 265       }
 266
 267       if (n > 0) {
 268         for (var argName in args) {
 269           var argVal = args[argName];
 270           var objectView = new tracing.analysis.GenericObjectView();
 271           objectView.object = argVal;
 272           var argsRow = this.appendElement_(
 273               this.appendElement_(argsCell, 'table'), 'tr');
 274           this.appendElement_(argsRow, 'td', argName + ':');
 275           this.appendElement_(argsRow, 'td').appendChild(objectView);
 276         }
 277       }
 278     },
 279
 280     /**
 281      * Creates and appends a row to |table| that summarizes one or more slices,
 282      * or one or more counters. The row has a left-aligned |label| in the first
 283      * column, the |duration| of the data in the second, the number of
 284      * |occurrences| in the third.
 285      *
 286      * @param {object=} opt_statistics May be undefined, or an object which
 287      *          contains calculated staistics containing min/max/avg for slices,
 288      *          or min/max/avg/start/end for counters.
 289      */
 290     appendDataRow: function(table, label, opt_duration, opt_cpuDuration,
 291                             opt_selfTime, opt_cpuSelfTime, opt_occurences,
 292                             opt_percentage, opt_statistics,
 293                             opt_selectionGenerator, opt_inFoot) {
 294
 295       var tooltip = undefined;
 296       if (opt_statistics) {
 297         tooltip = 'Min Duration:\u0009' +
 298                   tracing.analysis.tsRound(opt_statistics.min) +
 299                   ' ms \u000DMax Duration:\u0009' +
 300                   tracing.analysis.tsRound(opt_statistics.max) +
 301                   ' ms \u000DAvg Duration:\u0009' +
 302                   tracing.analysis.tsRound(opt_statistics.avg) +
 303                   ' ms (\u03C3 = ' +
 304                   tracing.analysis.tsRound(opt_statistics.avg_stddev) + ')';
 305
 306         if (opt_statistics.start) {
 307           tooltip += '\u000DStart Time:\u0009' +
 308               tracing.analysis.tsRound(opt_statistics.start) + ' ms';
 309         }
 310         if (opt_statistics.end) {
 311           tooltip += '\u000DEnd Time:\u0009' +
 312               tracing.analysis.tsRound(opt_statistics.end) + ' ms';
 313         }
 314         if (opt_statistics.frequency && opt_statistics.frequency_stddev) {
 315           tooltip += '\u000DFrequency:\u0009' +
 316               tracing.analysis.tsRound(opt_statistics.frequency) +
 317               ' occurrences/s (\u03C3 = ' +
 318               tracing.analysis.tsRound(opt_statistics.frequency_stddev) + ')';
 319         }
 320       }
 321
 322       if (table.tfoot || opt_inFoot)
 323         var row = this.appendFootRow(table);
 324       else
 325         var row = this.appendBodyRow(table);
 326
 327       var cellNum = 0;
 328       if (!opt_selectionGenerator) {
 329         this.appendTableCellWithTooltip_(table, row, cellNum, label, tooltip);
 330       } else {
 331         var labelEl = this.appendTableCellWithTooltip_(
 332             table, row, cellNum, label, tooltip);
 333         if (labelEl) {
 334           labelEl.textContent = '';
 335           labelEl.appendChild(
 336               this.createSelectionChangingLink(label, opt_selectionGenerator,
 337                                                tooltip));
 338         }
 339       }
 340       cellNum++;
 341
 342       if (opt_duration !== null) {
 343         if (opt_duration) {
 344           if (opt_duration instanceof Array) {
 345             this.appendTableCellWithTooltip_(table, row, cellNum,
 346                 '[' + opt_duration.join(', ') + ']', tooltip);
 347           } else {
 348             this.appendTableCellWithTooltip_(table, row, cellNum,
 349                 tracing.analysis.tsRound(opt_duration), tooltip);
 350           }
 351         } else {
 352           this.appendTableCell_(table, row, cellNum, '');
 353         }
 354         cellNum++;
 355       }
 356
 357       if (opt_cpuDuration !== null) {
 358         if (opt_cpuDuration != '') {
 359           this.appendTableCellWithTooltip_(table, row, cellNum,
 360               tracing.analysis.tsRound(opt_cpuDuration), tooltip);
 361         } else {
 362           this.appendTableCell_(table, row, cellNum, '');
 363         }
 364         cellNum++;
 365       }
 366
 367       if (opt_selfTime !== null) {
 368         if (opt_selfTime) {
 369           this.appendTableCellWithTooltip_(table, row, cellNum,
 370               tracing.analysis.tsRound(opt_selfTime), tooltip);
 371         } else {
 372           this.appendTableCell_(table, row, cellNum, '');
 373         }
 374         cellNum++;
 375       }
 376
 377       if (opt_cpuSelfTime !== null) {
 378         if (opt_cpuSelfTime) {
 379           this.appendTableCellWithTooltip_(table, row, cellNum,
 380               tracing.analysis.tsRound(opt_cpuSelfTime), tooltip);
 381         } else {
 382           this.appendTableCell_(table, row, cellNum, '');
 383         }
 384         cellNum++;
 385       }
 386
 387       if (opt_percentage !== null) {
 388         if (opt_percentage) {
 389           this.appendTableCellWithTooltip_(table, row, cellNum,
 390                                            opt_percentage, tooltip);
 391         } else {
 392           this.appendTableCell_(table, row, cellNum, '');
 393         }
 394         cellNum++;
 395       }
 396
 397       if (opt_occurences) {
 398         this.appendTableCellWithTooltip_(table, row, cellNum,
 399             String(opt_occurences), tooltip);
 400       } else {
 401         this.appendTableCell_(table, row, cellNum, '');
 402       }
 403       cellNum++;
 404     }
 405   };
 406   return {
 407     AnalysisResults: AnalysisResults
 408   };
 409 });
 410 </script>