<!DOCTYPE html>
<!--
Copyright (c) 2013 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="stylesheet" href="/core/analysis/analysis_results.css">

<link rel="import" href="/base/ui.html">
<link rel="import" href="/base/units/util.html">
<link rel="import" href="/core/analysis/analysis_link.html">
<link rel="import" href="/core/analysis/generic_object_view.html">

<script>
'use strict';

tr.exportTo('tr.c.analysis', function() {
  var AnalysisResults = tr.b.ui.define('div');

  AnalysisResults.prototype = {
    __proto__: HTMLDivElement.prototype,

    decorate: function() {
      this.className = 'analysis-results';
    },

    get requiresTallView() {
      return true;
    },

    clear: function() {
      this.textContent = '';
    },

    createSelectionChangingLink: function(text, selectionGenerator,
                                          opt_tooltip) {
      var el = this.ownerDocument.createElement('tr-c-a-analysis-link');
      function wrap() {
        return selectionGenerator();
      }
      wrap.userFriendlyName = text;
      el.selection = wrap;
      if (opt_tooltip)
        el.title = opt_tooltip;
      return el;
    },

    appendElement_: function(parent, tagName, opt_text) {
      var n = parent.ownerDocument.createElement(tagName);
      parent.appendChild(n);
      if (opt_text != undefined)
        n.textContent = opt_text;
      return n;
    },

    appendText_: function(parent, text) {
      var textElement = parent.ownerDocument.createTextNode(text);
      parent.appendChild(textNode);
      return textNode;
    },

    appendTableCell_: function(table, row, cellnum, text, opt_warning) {
      var td = this.appendElement_(row, 'td', text);
      td.className = table.className + '-col-' + cellnum;
      if (opt_warning) {
        var span = document.createElement('span');
        span.textContent = ' ' + String.fromCharCode(9888);
        span.title = opt_warning;
        td.appendChild(span);
      }
      return td;
    },

    /**
     * Creates and append a table cell at the end of the given row.
     */
    appendTableCell: function(table, row, text) {
      return this.appendTableCell_(table, row, row.children.length, text);
    },

    appendTableCellWithTooltip_: function(table, row, cellnum, text, tooltip) {
      if (tooltip) {
        var td = this.appendElement_(row, 'td');
        td.className = table.className + '-col-' + cellnum;
        var span = this.appendElement_(td, 'span', text);
        span.className = 'tooltip';
        span.title = tooltip;
        return td;
      } else {
        return this.appendTableCell_(table, row, cellnum, text);
      }
    },

    /**
     * Creates and appends a section header element.
     */
    appendHeader: function(label) {
      var header = this.appendElement_(this, 'span', label);
      header.className = 'analysis-header';
      return header;
    },

    /**
     * Creates and appends a info element of the format "<b>label</b>value".
     */
    appendInfo: function(label, value) {
      var div = this.appendElement_(this, 'div');
      div.label = this.appendElement_(div, 'b', label);
      div.value = this.appendElement_(div, 'span', value);
      return div;
    },

    /**
     * Adds a table with the given className.
     *
     * @return {HTMLTableElement} The newly created table.
     */
    appendTable: function(className, numColumns) {
      var table = this.appendElement_(this, 'table');
      table.className = className + ' analysis-table';
      table.numColumns = numColumns;
      return table;
    },

    /**
     * Creates and appends a |tr| in |thead|, if |thead| does not exist, create
     * it as well.
     */
    appendHeadRow: function(table) {
      if (table.headerRow)
        throw new Error('Only one header row allowed.');
      if (table.tbody || table.tfoot)
        throw new Error(
            'Cannot add a header row after data rows have been added.');
      table.headerRow = this.appendElement_(
                                  this.appendElement_(table, 'thead'), 'tr');
      table.headerRow.className = 'analysis-table-header';
      return table.headerRow;
    },

    /**
     * Creates and appends a |tr| in |tbody|, if |tbody| does not exist, create
     * it as well.
     */
    appendBodyRow: function(table) {
      if (table.tfoot)
        throw new Error(
            'Cannot add a tbody row after footer rows have been added.');
      if (!table.tbody)
        table.tbody = this.appendElement_(table, 'tbody');
      var row = this.appendElement_(table.tbody, 'tr');
      if (table.headerRow)
        row.className = 'analysis-table-row';
      else
        row.className = 'analysis-table-row-inverted';
      return row;
    },

    /**
     * Creates and appends a |tr| in |tfoot|, if |tfoot| does not exist, create
     * it as well.
     */
    appendFootRow: function(table) {
      if (!table.tfoot) {
        table.tfoot = this.appendElement_(table, 'tfoot');
        table.tfoot.rowsClassName = (
            (table.headerRow ? 1 : 0) +
            (table.tbody ? table.tbody.rows.length : 0)) % 2 ?
                'analysis-table-row' : 'analysis-table-row-inverted';
      }

      var row = this.appendElement_(table.tfoot, 'tr');
      row.className = table.tfoot.rowsClassName;
      return row;
    },

    /**
     * Adds a spacing row to spread out results.
     */
    appendSpacingRow: function(table, opt_inFoot) {
      if (table.tfoot || opt_inFoot)
        var row = this.appendFootRow(table);
      else
        var row = this.appendBodyRow(table);
      for (var i = 0; i < table.numColumns; i++)
        this.appendTableCell_(table, row, i, ' ');
    },

    /**
     * Creates and appends a row to |table| with a left-aligned |label] in the
     * first column and an optional |opt_value| in the second column.
     */
    appendInfoRow: function(table, label, opt_value, opt_inFoot) {
      if (table.tfoot || opt_inFoot)
        var row = this.appendFootRow(table);
      else
        var row = this.appendBodyRow(table);
      this.appendTableCell_(table, row, 0, label);
      if (opt_value !== undefined) {
        var objectView =
            document.createElement('tr-c-a-generic-object-view');
        objectView.object = opt_value;
        objectView.classList.add('analysis-table-col-1');
        objectView.style.display = 'table-cell';
        row.appendChild(objectView);
      } else {
        this.appendTableCell_(table, row, 1, '');
      }
      for (var i = 2; i < table.numColumns; i++)
        this.appendTableCell_(table, row, i, '');
    },

    /**
     * Creates and appends a row to |table| with a left-aligned |label] in the
     * first column and a millisecond |time| value in the second column.
     */
    appendInfoRowTime: function(table, label, time, opt_inFoot, opt_warning) {
      if (table.tfoot || opt_inFoot)
        var row = this.appendFootRow(table);
      else
        var row = this.appendBodyRow(table);
      this.appendTableCell_(table, row, 0, label);
      this.appendTableCell_(
          table, row, 1, tr.b.units.tsString(time), opt_warning);
    },

    /**
     * Creates and appends a row to |table| that summarizes a single slice or a
     * single counter. The row has a left-aligned |start| in the first column,
     * the |duration| of the data in the second, the number of |occurrences| in
     * the third.
     *
     * @param {object=} opt_statistics May be undefined, or an object which
     *          contains calculated statistics containing min/max/avg for
     *          slices, or min/max/avg/start/end for counters.
     */
    appendDetailsRow: function(table, start, duration, selfTime, args,
        opt_selectionGenerator, opt_cpuDuration, opt_inFoot) {
      if (opt_inFoot) {
        // If inFoot is true, then we're reporting Totals.
        var row = this.appendFootRow(table);
        this.appendTableCell(table, row, 'Totals');
      }
      else {
        var row = this.appendBodyRow(table);

        if (opt_selectionGenerator) {
          var labelEl = this.appendTableCell(table, row,
                                             tr.b.units.tsString(start));
          labelEl.textContent = '';
          labelEl.appendChild(this.createSelectionChangingLink(
                                      tr.b.units.tsString(start),
                                      opt_selectionGenerator, ''));
        } else {
          this.appendTableCell(table, row, tr.b.units.tsString(start));
        }
      }
      if (duration !== null)
        this.appendTableCell(table, row, tr.b.units.tsString(duration));

      if (opt_cpuDuration)
        this.appendTableCell(table, row,
                             opt_cpuDuration != '' ?
                             tr.b.units.tsString(opt_cpuDuration) :
                             '');

      if (selfTime !== null)
        this.appendTableCell(table, row, tr.b.units.tsString(selfTime));

      var argsCell = this.appendTableCell(table, row, '');
      var n = 0;
      for (var argName in args) {
        n += 1;
      }

      if (n > 0) {
        for (var argName in args) {
          var argVal = args[argName];
          var objectView =
              document.createElement('tr-c-a-generic-object-view');
          objectView.object = argVal;
          var argsRow = this.appendElement_(
              this.appendElement_(argsCell, 'table'), 'tr');
          this.appendElement_(argsRow, 'td', argName + ':');
          this.appendElement_(argsRow, 'td').appendChild(objectView);
        }
      }
    },

    /**
     * Creates and appends a row to |table| that summarizes one or more slices,
     * or one or more counters. The row has a left-aligned |label| in the first
     * column, the |duration| of the data in the second, the number of
     * |occurrences| in the third.
     *
     * @param {object=} opt_statistics May be undefined, or an object which
     *          contains calculated statistics containing min/max/avg for
     *          slices, or min/max/avg/start/end for counters.
     */
    appendDataRow: function(table, label, opt_duration, opt_cpuDuration,
                            opt_selfTime, opt_cpuSelfTime, opt_occurrences,
                            opt_percentage, opt_statistics,
                            opt_selectionGenerator, opt_inFoot) {

      var tooltip = undefined;
      if (opt_statistics) {
        var stddevRounded = Math.round(opt_statistics.avg_stddev * 1000) / 1000;

        tooltip = 'Min Duration:\u0009' +
                  tr.b.units.tsString(opt_statistics.min) +
                  ' \u000DMax Duration:\u0009' +
                  tr.b.units.tsString(opt_statistics.max) +
                  ' \u000DAvg Duration:\u0009' +
                  tr.b.units.tsString(opt_statistics.avg) +
                  ' (\u03C3 = ' + stddevRounded + ')';

        if (opt_statistics.start) {
          tooltip += '\u000DStart Time:\u0009' +
              tr.b.units.tsString(opt_statistics.start);
        }
        if (opt_statistics.end) {
          tooltip += '\u000DEnd Time:\u0009' +
              tr.b.units.tsString(opt_statistics.end);
        }
        if (opt_statistics.frequency && opt_statistics.frequency_stddev) {
          var fR = Math.round(opt_statistics.frequency * 1000) / 1000;
          var fSR = Math.round(opt_statistics.frequency_stddev * 1000) / 1000;
          tooltip += '\u000DFrequency:\u0009' +
              fR + ' occurrences/s (\u03C3 = ' + fSR + ')';
        }
      }

      if (table.tfoot || opt_inFoot)
        var row = this.appendFootRow(table);
      else
        var row = this.appendBodyRow(table);

      var cellNum = 0;
      if (!opt_selectionGenerator) {
        this.appendTableCellWithTooltip_(table, row, cellNum, label, tooltip);
      } else {
        var labelEl = this.appendTableCellWithTooltip_(
            table, row, cellNum, label, tooltip);
        if (labelEl) {
          labelEl.textContent = '';
          labelEl.appendChild(
              this.createSelectionChangingLink(label, opt_selectionGenerator,
                                               tooltip));
        }
      }
      cellNum++;

      if (opt_duration !== null) {
        if (opt_duration) {
          if (opt_duration instanceof Array) {
            this.appendTableCellWithTooltip_(table, row, cellNum,
                '[' + opt_duration.join(', ') + ']', tooltip);
          } else {
            this.appendTableCellWithTooltip_(table, row, cellNum,
                tr.b.units.tsString(opt_duration), tooltip);
          }
        } else {
          this.appendTableCell_(table, row, cellNum, '');
        }
        cellNum++;
      }

      if (opt_cpuDuration !== null) {
        if (opt_cpuDuration != '') {
          this.appendTableCellWithTooltip_(table, row, cellNum,
              tr.b.units.tsString(opt_cpuDuration), tooltip);
        } else {
          this.appendTableCell_(table, row, cellNum, '');
        }
        cellNum++;
      }

      if (opt_selfTime !== null) {
        if (opt_selfTime) {
          this.appendTableCellWithTooltip_(table, row, cellNum,
              tr.b.units.tsString(opt_selfTime), tooltip);
        } else {
          this.appendTableCell_(table, row, cellNum, '');
        }
        cellNum++;
      }

      if (opt_cpuSelfTime !== null) {
        if (opt_cpuSelfTime) {
          this.appendTableCellWithTooltip_(table, row, cellNum,
              tr.b.units.tsString(opt_cpuSelfTime), tooltip);
        } else {
          this.appendTableCell_(table, row, cellNum, '');
        }
        cellNum++;
      }

      if (opt_percentage !== null) {
        if (opt_percentage) {
          this.appendTableCellWithTooltip_(table, row, cellNum,
                                           opt_percentage, tooltip);
        } else {
          this.appendTableCell_(table, row, cellNum, '');
        }
        cellNum++;
      }

      if (opt_occurrences) {
        this.appendTableCellWithTooltip_(table, row, cellNum,
            String(opt_occurrences), tooltip);
      } else {
        this.appendTableCell_(table, row, cellNum, '');
      }
      cellNum++;
    }
  };
  return {
    AnalysisResults: AnalysisResults
  };
});
</script>