extensions/benchmark/options.html

<head>
  <title>Page Benchmark Options</title>

  <script src="jst/util.js" type="text/javascript"></script>
  <script src="jst/jsevalcontext.js" type="text/javascript"></script>
  <script src="jst/jstemplate.js" type="text/javascript"></script>
  <script src="jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
  <script src="jquery/jquery.flot.min.js" type="text/javascript"></script>
  <script src="jquery/jquery.flot.dashes.js" type="text/javascript"></script>
  <script src="util/table2CSV.js" type="text/javascript"></script>
  <script src="util/sorttable.js" type="text/javascript"></script>

<style>
body {
  font-size: 84%;
  font-family: Helvetica, Arial, sans-serif;
  padding: 0.75em;
  margin: 0;
  min-width: 45em;
}

h1 {
  font-size: 110%;
  font-weight: bold;
  color: #4a8ee6;
  letter-spacing: -1px;
  padding: 0;
  margin: 0;
}

div#header {
  padding: 0.75em 1em;
  padding-top: 0.6em;
  padding-left: 10;
  margin-bottom: 0.75em;
  position: relative;
  overflow: hidden;
  background: #5296de;
  background-size: 100%;
  border: 1px solid #3a75bd;
  border-radius: 6px;
  color: white;
  text-shadow: 0 0 2px black;
}
div#header h1 {
  padding-left: 37px;
  margin: 0;
  display: inline;
  color: white;
}
div#header p {
  font-size: 84%;
  font-style: italic;
  padding: 0;
  margin: 0;
  color: white;
  padding-left: 0.4em;
  display: inline;
}

table.sortable {
  font-size: 84%;
  table-layout: fixed;
}

table.sortable:not([class*='filtered']) tr:nth-child(even) td:not([class*='filtered']) {
  background: #eff3ff;
}

.nobg {
  padding: 0 0.5em;
  vertical-align: bottom;
  font-weight: bold;
  color: #315d94;
  color: black;
  text-align: center;
}

.bg{
  padding: 0 0.5em;
  vertical-align: bottom;
  font-weight: bold;
  color: #315d94;
  color: black;
  text-align: center;
  cursor: pointer;
}

.bg:hover {
  background: #eff3aa;
}

.avg {
  font-weight: bold;
  text-align: center;
}

.data {
  text-align: left;
  white-space: nowrap;
}

.bggraph {
  white-space: nowrap;
}

.file_input
{
  position: absolute;
  width: 140px;
  height: 26px;
  overflow: hidden;
}

.file_input_button
{
  width: 140px;
  position: absolute;
  top: 0px;
}

.file_input_hidden
{
  font-size: 25px;
  position: absolute;
  right: 0px;
  top: 0px;
  opacity: 0;
}
</style>

<script>
var max_sample = 0;

Array.max = function(array) {
  return Math.max.apply( Math, array );
}

Array.min = function(array) {
  return Math.min.apply( Math, array );
};

// Compute the average of an array, removing the min/max.
Array.avg = function(array) {
  var count = array.length;
  var sum = 0;
  var min = array[0];
  var max = array[0];
  for (var i = 0; i < count; i++) {
    sum += array[i];
    if (array[i] < min) {
      min = array[i];
    }
    if (array[i] > max) {
      max = array[i];
    }
  }
  if (count >= 3) {
    sum = sum - min - max;
    count -= 2;
  }
  return sum / count;
}

// Compute the standard deviation of an array
Array.stddev = function(array) {
  var count = array.length;
  var mean = Array.avg(array);
  var variance = 0;
  for (var i = 0; i < count; i++) {
    var deviation = mean - array[i];
    variance = variance + deviation * deviation;
  }
  variance = variance / count;
  return Math.sqrt(variance);
}

function handleFileSelect(evt) {
  var files = evt.target.files;
  for (var i = 0, f; f = files[i]; i++) {
    var reader = new FileReader();
    reader.onload = function(evt) {
      document.getElementById("testurl").value = evt.target.result;
    }
    reader.readAsText(f);
  };
}

var THTAG = "th";
var TDTAG = "td";
var NONE_DISPLAY = "none";
var CELL_DISPLAY = "table-cell";
var BRIEF_VIEW = "Show More Details";
var FULL_VIEW = "Hide Details";

// Expand or shrink the result table.
// Called when clicking button "Show More Details/Hide Details".
function expand() {
  if (document.getElementById("expand").value == BRIEF_VIEW) {
    // From biref view to detailed view.
    var headers = document.getElementsByTagName(THTAG);
    var cells = document.getElementsByTagName(TDTAG);

    // Display the hidden metrics (both headers and data cells).
    for (var i = 0; i < headers.length; i++) {
      if (headers[i].style.display == NONE_DISPLAY) {
        headers[i].style.display = CELL_DISPLAY;
      }
    }

    for (i = 0; i < cells.length; i++) {
      if (cells[i].style.display == NONE_DISPLAY) {
        cells[i].style.display = CELL_DISPLAY;
      }
    }

    document.getElementById("expand").value = FULL_VIEW;
  } else {
    // From detailed view to brief view.
    var headers = document.getElementsByTagName(THTAG);
    var cells = document.getElementsByTagName(TDTAG);

    // Hide some metrics.
    for (var i = 0; i < headers.length; i++) {
      if (headers[i].style.display == CELL_DISPLAY) {
        headers[i].style.display = NONE_DISPLAY;
      }
    }

    for (i = 0; i < cells.length; i++) {
      if (cells[i].style.display == CELL_DISPLAY) {
        cells[i].style.display = NONE_DISPLAY;
      }
    }

    document.getElementById("expand").value = BRIEF_VIEW;
  }

  // Use cookie to store current expand/hide status.
  var lastValue = document.getElementById("expand").value;
  document.cookie = "lastValue=" + lastValue;
}

// Reloading the page causes table to shrink (default original status).
// Cookie remembers last status of table (in terms of expanded or shrunk).
function restoreTable() {
  if (document.cookie == "lastValue=Hide Details") {
    var headers = document.getElementsByTagName(THTAG);
    var cells = document.getElementsByTagName(TDTAG);

    for (var i = 0; i < headers.length; i++) {
      if (headers[i].style.display == NONE_DISPLAY) {
        headers[i].style.display = CELL_DISPLAY;
      }
    }
    for (i = 0; i < cells.length; i++) {
      if (cells[i].style.display == NONE_DISPLAY) {
        cells[i].style.display = CELL_DISPLAY;
      }
    }
    document.getElementById("expand").value = FULL_VIEW;
  }
}

// A class to store the data to plot.
function PData() {
  this.xAxis = "Iteration(s)";
  this.yAxis = "";
  this.A = []; // Two data sets for comparison.
  this.B = [];
  this.avgA = [];  // Avg value is plotted as a line.
  this.avgB = [];
  this.maxA = 0;
  this.maxB = 0;
  this.countA = 0; // Size of the data sets.
  this.countB = 0;

  this.setYAxis = function (str) {
    this.yAxis = str;
  }

  this.setAvg = function (arr, cha) {
    if (cha == 'A') {
      var avgA = Array.avg(arr);
      for (var i = 1; i <= this.countA; i++) {
        this.avgA.push([i, avgA]);
      }
    } else if (cha == 'B') {
      var avgB = Array.avg(arr);
      for (var i = 1; i <= this.countB; i++) {
        this.avgB.push([i, avgB]);
      }
    }
  }

  this.setMax = function (arr, cha) {
    if (cha == 'A') {
      this.maxA = Array.max(arr);
    } else if (cha == 'B') {
      this.maxB = Array.max(arr);
    }
  }

  // Add an entry to the array.
  this.addArr = function (val, cha) {
    if (cha == 'A') {
      this.countA++;
      this.A.push([this.countA, val]);
    } else if (cha == 'B') {
      this.countB++;
      this.B.push([this.countB, val]);
    }
  }

  // Plot the graph at the specified place.
  this.plot = function (placeholder) {
    $.plot(placeholder,
      [// Line A
       {
         data: this.A,
         label: "A's " + this.yAxis + " in " + this.countA + " " + this.xAxis,
         points: {
           show: true
         },
         lines: {
           show: true
         }
       },

       // Line B
       {
         data: this.B,
         label: "B's " + this.yAxis + " in " + this.countB + " " + this.xAxis,
         points: {
           show: true
         },
         lines: {
           show: true
         }
       },

       // Line avgA
       {
         data: this.avgA,
         label: "A's avg " + this.yAxis,
         dashes: {
           show: true
         }
       },

       // Line avgB
       {
         data: this.avgB,
         label: "B's avg " + this.yAxis,
         dashes: {
           show: true
         }
       }],

       // Axis and legend setup.
       { xaxis: {
           max: this.countA > this.countB ? this.countA : this.countB,
           tickSize: 1,
           tickDecimals: 0
         },
         yaxis: {
           // Leave some space for legend.
           max: this.maxA > this.maxB ? this.maxA * 1.5 : this.maxB * 1.5
         },
         legend: {
           backgroundOpacity: 0
         }
       });
  }
}

// Compare the selected metric of the two selected data sets.
function compare() {
  var checkboxArr = document.getElementsByName("checkboxArr");
  var radioArr = document.getElementsByName("radioArr");

  if (checkAmount(checkboxArr) != 2) {
    alert("please select two rows to compare");
    return;
  }

  var rowIndexArr = getSelectedIndex(checkboxArr);
  var colIndexArr = getSelectedIndex(radioArr);
  // To this point, it is for sure that rowIndexArr has two elements
  // while colIndexArr has one.
  var selectedRowA = rowIndexArr[0];
  var selectedRowB = rowIndexArr[1];
  var selectedCol = colIndexArr[0];

  var extension = chrome.extension.getBackgroundPage();
  var data = extension.results.data;
  var selectedA = getSelectedResults(data,selectedRowA,selectedCol);
  var selectedB = getSelectedResults(data,selectedRowB,selectedCol);
  var yAxis = getMetricName(selectedCol);

  // Indicate A and B on selected rows.
  checkboxArr[selectedRowA].parentElement.firstChild.data = "A";
  checkboxArr[selectedRowB].parentElement.firstChild.data = "B";

  plot(selectedA, selectedB, yAxis);
}

// Show the comparison graph.
function plot(A, B, axis) {
  var plotData = new PData();

  plotData.setYAxis(axis);
  for (var i = 0; i < A.length; i++) {
    plotData.addArr(A[i],'A');
  }
  for (var i = 0; i < B.length; i++) {
    plotData.addArr(B[i],'B');
  }
  plotData.setAvg(A,'A');
  plotData.setAvg(B,'B');
  plotData.setMax(A,'A');
  plotData.setMax(B,'B');

  var placeholder = document.getElementById("placeholder");
  placeholder.style.display = "";
  plotData.plot(placeholder);
}

var METRIC = {"STARTLOAD": 0, "COMMITLOAD": 1, "DOCLOAD": 2, "PAINT": 3,
               "TOTAL": 4, "REQUESTS": 5, "CONNECTS": 6, "READKB": 7,
               "WRITEKB": 8, "READKBPS": 9, "WRITEKBPS": 10};

// Retrieve the metric name from index.
function getMetricName (index) {
  switch (index) {
    case METRIC.STARTLOAD:
      return "Start Load Time";
    case METRIC.COMMITLOAD:
      return "Commit Load Time";
    case METRIC.DOCLOAD:
      return "Doc Load Time";
    case METRIC.PAINT:
      return "Paint Time";
    case METRIC.TOTAL:
      return "Total Load Time";
    case METRIC.REQUESTS:
      return "# Requests";
    case METRIC.CONNECTS:
      return "# Connects";
    case METRIC.READKB:
      return "Read KB";
    case METRIC.WRITEKB:
      return "Write KB";
    case METRIC.READKBPS:
      return "Read KBps";
    case METRIC.WRITEKBPS:
      return "Write KBps";
    default:
      return "";
  }
}

// Get the results with a specific row (data set) and column (metric).
function getSelectedResults(arr, rowIndex, colIndex) {
  switch (colIndex) {
    case METRIC.STARTLOAD:
      return arr[rowIndex].startLoadResults;
    case METRIC.COMMITLOAD:
      return arr[rowIndex].commitLoadResults;
    case METRIC.DOCLOAD:
      return arr[rowIndex].docLoadResults;
    case METRIC.PAINT:
      return arr[rowIndex].paintResults;
    case METRIC.TOTAL:
      return arr[rowIndex].totalResults;
    case METRIC.REQUESTS:
      return arr[rowIndex].requests;
    case METRIC.CONNECTS:
      return arr[rowIndex].connects;
    case METRIC.READKB:
      return arr[rowIndex].KbytesRead;
    case METRIC.WRITEKB:
      return arr[rowIndex].KbytesWritten;
    case METRIC.READKBPS:
      return arr[rowIndex].readbpsResults;
    case METRIC.WRITEKBPS:
      return arr[rowIndex].writebpsResults;
    default:
      return undefined;
  }
}

// Ensure only two data sets (rows) are selected.
function checkAmount(arr) {
  var amount = 0;
  for (var i = 0; i < arr.length; i++) {
    if (arr[i].checked) {
      amount++;
    }
  }
  return amount;
}

// Get the index of selected row or column.
function getSelectedIndex(arr) {
  var selectedArr = new Array();
  for (var i = 0; i < arr.length; i++) {
    if(arr[i].checked) {
      selectedArr.push(i);
    }
  }
  return selectedArr;
}

// Repaint or hide the chart.
function updateChart(caller) {
  var placeholder = document.getElementById("placeholder");
  if (caller.type == "radio") {
    // Other radio button is clicked.
    if (placeholder.style.display == "") {
      compare();
    }
  } else {
    // Other checkbox or clearing results is clicked.
    if (placeholder.style.display == "") {
      placeholder.style.display = "none";
    }
  }
}

// Clear indicators besides checkbox.
function clearIndicator () {
  var checkboxArr = document.getElementsByName("checkboxArr");
  for (var i = 0; i < checkboxArr.length; i++) {
    checkboxArr[i].parentElement.firstChild.data = "";
  }
}

// Enable/Disable buttons according to checkbox change.
function checkSelected () {
  var checkboxArr = document.getElementsByName("checkboxArr");
  if (checkAmount(checkboxArr) !=0) {
    document.getElementById("clearSelected").disabled = false;
    document.getElementById("compare").disabled = false;
  } else {
    document.getElementById("clearSelected").disabled = true;
    document.getElementById("compare").disabled = true;
  }
}

// Object to summarize everything
var totals = {};

// Compute the results for a data set.
function computeDisplayResults(data) {
  var count = data.data.length;
  for (var i = 0; i < count; i++) {
    var obj = data.data[i];
    obj.displayTime = setDisplayTime(obj.timestamp);
    var resultList = obj.totalResults;
    obj.mean = Array.avg(resultList);
    obj.stddev = Array.stddev(resultList);
    obj.stderr = obj.stddev / Math.sqrt(obj.iterations);
    var ci = 1.96 * obj.stderr;
    obj.cihigh = obj.mean + ci;
    obj.cilow = obj.mean - ci;
    obj.min = Array.min(resultList);
    obj.max = Array.max(resultList);
    obj.readbps = Array.avg(obj.readbpsResults);
    obj.writebps = Array.avg(obj.writebpsResults);
    obj.readKB = Array.avg(obj.KbytesRead);
    obj.writeKB = Array.avg(obj.KbytesWritten);
    obj.paintMean = Array.avg(obj.paintResults);
    obj.startLoadMean = Array.avg(obj.startLoadResults);
    obj.commitLoadMean = Array.avg(obj.commitLoadResults);
    obj.docLoadMean = Array.avg(obj.docLoadResults);

    obj.displayRequests = Array.avg(obj.requests);
    obj.displayConnects = Array.avg(obj.connects);
    obj.displaySpdySessions = Array.avg(obj.spdySessions);

    obj.displayDomNum = obj.domNum;
    obj.displayMaxDepth = obj.maxDepth;
    obj.displayMinDepth = obj.minDepth;
    obj.displayAvgDepth = obj.avgDepth;
    }
  return count;
}

// Convert timestamp to readable string.
function setDisplayTime(ts) {
  var year = ts.getFullYear();
  var mon = ts.getMonth()+1;
  var date = ts.getDate();
  var hrs = ts.getHours();
  var mins = ts.getMinutes();
  var secs = ts.getSeconds();

  mon = ( mon < 10 ? "0" : "" ) + mon;
  date = ( date < 10 ? "0" : "" ) + date;
  mins = ( mins < 10 ? "0" : "" ) + mins;
  secs = ( secs < 10 ? "0" : "" ) + secs;

  return (year + "/" + mon + "/" + date + " " + hrs + ":" + mins + ":" + secs);
}

// Subtract the results from two data sets.
// This function could be smarter about what it subtracts,
// for now it just subtracts everything.
// Returns true if it was able to compare the two data sets.
function subtractData(data, baseline) {
  var count = data.data.length;
  if (baseline.data.length != count) {
    return false;
  }
  for (var i = 0; i < count; i++) {
    var obj = data.data[i];
    var obj2 = baseline.data[i];

    // The data sets are different.
    if (obj.url != obj2.url ||
        obj.iterations != obj2.iterations) {
      return false;
    }

    obj.mean -= obj2.mean;
    obj.stddev -= obj2.stddev;
    obj.min -= obj2.min;
    obj.max -= obj2.max;
    obj.readbps -= obj2.readbps;
    obj.writebps -= obj2.writebps;
    obj.readKB -= obj2.readKB;
    obj.writeKB -= obj2.writeKB;
    obj.paintMean -= obj2.paintMean;
    obj.startLoadMean -= obj2.startLoadMean;
    obj.commitLoadMean -= obj2.commitLoadMean;
    obj.docLoadMean -= obj2.docLoadMean;

    obj.displayRequests -= obj2.displayRequests;
    obj.displayConnects -= obj2.displayConnects;
    obj.displaySpdySessions -= obj2.displaySpdySessions;
  }
  return true;
}

// Compute totals based on a data set.
function computeTotals(data) {
  var count = data.data.length;
  for (var i = 0; i < count; i++) {
    var obj = data.data[i];
    totals.mean += obj.mean;
    totals.paintMean += obj.paintMean;
    totals.startLoadMean += obj.startLoadMean;
    totals.commitLoadMean += obj.commitLoadMean;
    totals.docLoadMean += obj.docLoadMean;
  }
}

// Compute results for the data with an optional baseline.
// If |baseline| is undefined, will compute the results of this
// run.  Otherwise, computes the diff between this data and the baseline.
function computeResults(data, baseline) {
  totals = {};
  totals.mean = 0;
  totals.paintMean = 0;
  totals.startLoadMean = 0;
  totals.commitLoadMean = 0;
  totals.docLoadMean = 0;

  var count = computeDisplayResults(data);

  if (baseline) {
    computeDisplayResults(baseline);
    if (!subtractData(data, baseline)) {
      alert("These data sets are different");
      document.getElementById("baseline").value = "";
      return;
    }
  }

  computeTotals(data);
  totals.url = "(" + count + " urls)";
  if (count > 0) {
    totals.mean /= count;
    totals.paintMean /= count;
    totals.startLoadMean /= count;
    totals.commitLoadMean /= count;
    totals.docLoadMean /= count;
  }

  // Find the biggest average for our bar graph.
  max_sample = 0;
  for (var i = 0; i < data.data.length; i++) {
    if (data.data[i].max > max_sample) {
      max_sample = data.data[i].mean;
    }
  }
}

function jsinit() {
  var extension = chrome.extension.getBackgroundPage();

  // Run the template to show results
  var data = extension.results;

  // Get the baseline results
  var elt = document.getElementById("baseline");
  var baseline_json = document.getElementById("baseline").value;
  var baseline;
  if (baseline_json) {
    try {
      baseline = JSON.parse(baseline_json);
    } catch (e) {
      alert("JSON parse error: " + e);
    }
  }

  // Compute
  computeResults(data, baseline);

  var context = new JsEvalContext(data);
  context.setVariable('$width', 0);
  context.setVariable('$samples', 0);
  var template = document.getElementById("t");
  jstProcess(context, template);

  // Set the options
  document.getElementById("iterations").value = extension.iterations;
  document.getElementById("clearconns").checked = extension.clearConnections;
  document.getElementById("clearcache").checked = extension.clearCache;
  document.getElementById("enablespdy").checked = extension.enableSpdy;
  setUrl(extension.testUrl);

  if (!baseline) {
    var json_data = JSON.stringify(data);
    document.getElementById("json").value = json_data;
  }

  // Activate loading Urls from local file.
  document.getElementById('files').addEventListener('change',
                                                    handleFileSelect, false);
}

function getWidth(mean, obj) {
  var kMinWidth = 200;
  var max_width = obj.offsetWidth;
  if (max_width < kMinWidth) {
    max_width = kMinWidth;
  }
  return Math.floor(max_width * (mean / max_sample));
}

// Apply configuration back to our extension
function config() {
  var extension = chrome.extension.getBackgroundPage();
  var iterations = parseInt(document.getElementById("iterations").value);
  var clearConnections = document.getElementById("clearconns").checked;
  var clearCache = document.getElementById("clearcache").checked;
  var enableSpdy = document.getElementById("enablespdy").checked;
  if (iterations > 0) {
    extension.iterations = iterations;
    extension.clearConnections = clearConnections;
    extension.clearCache = clearCache;
    extension.enableSpdy = enableSpdy;
  }
}

// Set the url in the benchmark url box.
function setUrl(url) {
  document.getElementById("testurl").value = url;
}

// Start the benchmark.
function run() {
  if (!chrome.benchmarking) {
    alert("Warning:  Looks like you forgot to run chrome with " +
          " --enable-benchmarking set.");
    return;
  }
  var extension = chrome.extension.getBackgroundPage();
  var testUrl = document.getElementById("testurl").value;
  extension.testUrl = testUrl;
  extension.run();
}

function showConfirm() {
  var r = confirm("Are you sure to clear results?");
  if (r) {
    // Find out the event source element.
    var evtSrc = window.event.srcElement;
    if (evtSrc.value == "Clear Selected") {
      clearSelected();
    } else if (evtSrc.value == "Clear All") {
      clearResults();
    }
  }
}

// Clear the selected results
function clearSelected() {
  var extension = chrome.extension.getBackgroundPage();
  var checkboxArr = document.getElementsByName("checkboxArr");
  var rowIndexArr = getSelectedIndex(checkboxArr);
  var currIndex;
  for (var i = 0; i < rowIndexArr.length; i++) {
    currIndex = rowIndexArr[i];
    // Update the index of the original row in the modified array.
    currIndex -= i;
    extension.results.data.splice(currIndex, 1);
    document.location.reload(true);
    updateChart(this);
    jsinit();
  }
}

// Clear all the results
function clearResults() {
  var extension = chrome.extension.getBackgroundPage();
  extension.results = {};
  extension.results.data = new Array();
  document.getElementById("json").value = "";
  document.getElementById("baseline").value = "";
  updateChart(this);
  jsinit();
}

// Export html table into CSV format.
function export() {
  var checkboxArr = document.getElementsByName("checkboxArr");
  var rowNum = checkboxArr.length + 1; // # of data rows plus total-stats row.
  $('#t').table2CSV(rowNum);
}

// Toggle display of an element
function toggle(id) {
  var elt = document.getElementById(id);
  if (elt.style.display == "none") {
    elt.style.display = "block";
  } else {
    elt.style.display = "none";
  }
}
</script>

</head>

<body onload="jsinit(); restoreTable()">

<h1><div id="header">Page Benchmark Results</div></h1>

<h1>Configuration <a href="http://sites.google.com/a/chromium.org/dev/chrome-benchmarking-extension" target="_blank" style="float:right"><font size="4%">Help</font></a></h1>

<span>Iterations</span>
<input id="iterations" type="text" style="text-align:right" size="4">
Clear Connections?<input id="clearconns" type="checkbox">
Clear Cache?<input id="clearcache" type="checkbox">
Enable Spdy?<input id="enablespdy" type="checkbox">
<br>
<span>URLs to load</span> <input type="text" id="testurl" size="80">
<span class="file_input">
<input class="file_input_button" type="button" value="Load URLs From File" />
<input class="file_input_hidden" type="file" id="files" name="files[]" multiple />
</span>
<form onsubmit="config();run()">
<input type="submit" value="Run">
</form>
<p>

<h1>Results</h1>

<input id="expand" type="button" value="Show More Details" onclick="expand()">
<input id="clearSelected" type="button" value="Clear Selected" disabled="true" onclick="showConfirm()">
<input id="clearAll" type="button" value="Clear All" onclick="showConfirm()">
<input type="button" value="Export As .csv" onclick="export()">
<table id="t" class="sortable" width="100%">
  <tr>
  <th width=35 class="nobg"></th>
  <th width=215 class="nobg">url</th>
  <th width=110 class="nobg" style="display:none">timestamp</th>
  <th width=50 class="nobg">iterations</th>
  <th width=50 class="nobg">via spdy</th>
  <th width=50 class="bg" style="display:none">start load mean</th>
  <th width=50 class="bg" style="display:none">commit load mean</th>
  <th width=50 class="bg">doc load mean</th>
  <th width=50 class="bg">paint mean</th>
  <th width=50 class="bg">total load mean</th>
  <th width=50 class="bg">stddev</th>
  <th width=50 class="bg" style="display:none">stderr</th>
  <th width=50 class="bg" style="display:none">95% CI-low</th>
  <th width=50 class="bg" style="display:none">95% CI-high</th>
  <th width=50 class="bg" style="display:none">min</th>
  <th width=50 class="bg" style="display:none">max</th>
  <th width=60 class="bg" style="display:none"># Requests</th>
  <th width=60 class="bg" style="display:none"># Connects</th>
  <th width=50 class="bg" style="display:none"># SPDY Sessions</th>
  <th width=50 class="bg" style="display:none">Read KB</th>
  <th width=50 class="bg" style="display:none">Write KB</th>
  <th width=50 class="bg">Read KBps</th>
  <th width=50 class="bg">Write KBps</th>
  <th width=50 class="bg"># DOM</th>
  <th width=70 class="bg" style="display:none">max DOM depth</th>
  <th width=30 class="bg" style="display:none">min</th>
  <th width=30 class="bg" style="display:none">avg</th>
  <th samples class="nobg" style="display:none">total loan time samples</th>
  </tr>

  <tr id="t.total" jsselect="totals">
  <td class="avg" jseval="1"></td>
  <td class="url">TOTALS <span jscontent="url"></span></td>
  <td class="avg" style="display:none"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" style="display:none"><span jseval="val = startLoadMean.toFixed(1)" jscontent="val"></span></td>
  <td class="avg" style="display:none"><span jseval="val = commitLoadMean.toFixed(1)" jscontent="val"></span></td>
  <td class="avg"><span jseval="val = docLoadMean.toFixed(1)" jscontent="val"></span></td>
  <td class="avg"><span jseval="val = paintMean.toFixed(1)" jscontent="val"></span></td>
  <td class="avg"><span jseval="val = mean.toFixed(1)" jscontent="val"></span></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="data"></td>
  </tr>

  <tr jsselect="data">
  <td align=right> <input type="checkbox" name="checkboxArr" onclick="updateChart(this);clearIndicator();checkSelected()"></td>
  <td class="url" jseval="$width = getWidth($this.mean, this); url.length > 40 ? $suburl = url.substring(0,27) + '...' + url.substring(url.length-10, url.length) : $suburl=url"><div jsvalues=".style.width:$width" class="bggraph"><a jsvalues="href:$this.url" jscontent="$suburl"></a></div></td>
  <td class="avg" style="display:none" jseval="val = displayTime" jscontent="val"></td>
  <td class="avg" jseval="val = iterations" jscontent="val"></td>
  <td class="avg" jseval="val = viaSpdy" jscontent="val"></td>
  <td class="avg" style="display:none" jseval="val = startLoadMean.toFixed(1)" jscontent="val"></td>
  <td class="avg" style="display:none" jseval="val = commitLoadMean.toFixed(1)" jscontent="val"></td>
  <td class="avg" jseval="val = docLoadMean.toFixed(1)" jscontent="val"></td>
  <td class="avg" jseval="val = paintMean.toFixed(1)" jscontent="val"></td>
  <td class="avg" jseval="val = mean.toFixed(1)" jscontent="val"></td>
  <td class="avg" jseval="val = stddev.toFixed(1)" jscontent="val"></td>
  <td class="avg" style="display:none" jseval="val = stderr.toFixed(1)" jscontent="val"></td>
  <td class="avg" style="display:none" jseval="val = cilow.toFixed(1)" jscontent="val"></td>
  <td class="avg" style="display:none" jseval="val = cihigh.toFixed(1)" jscontent="val"></td>
  <td class="avg" style="display:none" jseval="val = min.toFixed(1)" jscontent="val"></td>
  <td class="avg" style="display:none" jseval="val = max.toFixed(1)" jscontent="val"></td>
  <td class="avg" style="display:none" jseval="val = displayRequests.toFixed(1)" jscontent="val"></td>
  <td class="avg" style="display:none" jseval="val = displayConnects.toFixed(1)" jscontent="val"></td>
  <td class="avg" style="display:none" jseval="val = displaySpdySessions.toFixed(1)" jscontent="val"></td>
  <td class="avg" style="display:none" jseval="val = readKB.toFixed(1)" jscontent="val"></td>
  <td class="avg" style="display:none" jseval="val = writeKB.toFixed(1)" jscontent="val"></td>
  <td class="avg" jseval="val = readbps.toFixed(1)" jscontent="val"></td>
  <td class="avg" jseval="val = writebps.toFixed(1)" jscontent="val"></td>
  <td class="avg" jseval="val = displayDomNum" jscontent="val"></td>
  <td class="avg" style="display:none" jseval="val = displayMaxDepth" jscontent="val"></td>
  <td class="avg" style="display:none" jseval="val = displayMinDepth" jscontent="val"></td>
  <td class="avg" style="display:none" jseval="val = displayAvgDepth.toFixed(1)" jscontent="val"></td>
  <td class="data" style="display:none"><span jsselect="totalResults"><span jscontent="$this"></span>,</span> </td>
  </tr>
  <tr jsdisplay="data.length == 0">
  <td colspan=2>No tests have been run yet.</td>
  </tr>
  <tr jsdisplay="data.length > 1">
  <td width=25 jseval="1"></td>
  <td class="url" jseval="1"></td>
  <td class="avg" style="display:none" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" style="display:none"><input name="radioArr" type="radio" onclick="updateChart(this)"> </td>
  <td class="avg" style="display:none"><input name="radioArr" type="radio" onclick="updateChart(this)"></td>
  <td class="avg"><input name="radioArr" type="radio" onclick="updateChart(this)"></td>
  <td class="avg"><input name="radioArr" type="radio" onclick="updateChart(this)"></td>
  <td class="avg"><input name="radioArr" type="radio" onclick="updateChart(this)" checked></td>
  <td class="avg" jseval="1"></td>
  <td class="avg" style="display:none" jseval="1"></td>
  <td class="avg" style="display:none" jseval="1"></td>
  <td class="avg" style="display:none" jseval="1"></td>
  <td class="avg" style="display:none" jseval="1"></td>
  <td class="avg" style="display:none" jseval="1"></td>
  <td class="avg" style="display:none"><input name="radioArr" type="radio" onclick="updateChart(this)"></td>
  <td class="avg" style="display:none"><input name="radioArr" type="radio" onclick="updateChart(this)"></td>
  <td class="avg" style="display:none" jseval="1"></td>
  <td class="avg" style="display:none"><input name="radioArr" type="radio" onclick="updateChart(this)"></td>
  <td class="avg" style="display:none"><input name="radioArr" type="radio" onclick="updateChart(this)"></td>
  <td class="avg"><input name="radioArr" type="radio" onclick="updateChart(this)"></td>
  <td class="avg"><input name="radioArr" type="radio" onclick="updateChart(this)"></td>
  </tr>
  <tr jsdisplay="data.length > 1">
  <td> <input id="compare" type="button" value="Compare" disabled="true" onclick="compare()"></td>
  </tr>
</table>
<hr>
<center>
<div id="placeholder" style="width:430px;height:230px;display:none">graph place</div>
</center>
<span onclick="toggle('json')">JSON data</span><br>
<textarea style="display:none" type=text id=json rows=10 cols=50></textarea><p>

<span onclick="toggle('baseline')">COMPARE to</span><br>
<textarea style="display:none" type=text id=baseline rows=10 cols=50
onchange="jsinit()"></textarea><p>
</body>