Update page benchmarking extension to manifest v2 and event page.

chrome/common/extensions/docs/examples/extensions/benchmark/options.html

Index: chrome/common/extensions/docs/examples/extensions/benchmark/options.html
diff --git a/chrome/common/extensions/docs/examples/extensions/benchmark/options.html b/chrome/common/extensions/docs/examples/extensions/benchmark/options.html
index 5ea0c1c8feafcd45c794c45c4075369887cbdedd..ebf95b39ced86f0f5a0f6741430a1dc2ac4b12c4 100644
--- a/chrome/common/extensions/docs/examples/extensions/benchmark/options.html
+++ b/chrome/common/extensions/docs/examples/extensions/benchmark/options.html
@@ -4,12 +4,11 @@
   <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-1.8.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%;
@@ -129,730 +128,16 @@ table.sortable:not([class*='filtered']) tr:nth-child(even) td:not([class*='filte
 }
 </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 sample standard deviation of an array
-Array.stddev = function(array) {
-  var count = array.length;
-  var mean = 0;
-  for (var i = 0; i < count; i++) {
-    mean += array[i];
-  }
-  mean /= count;
-  var variance = 0;
-  for (var i = 0; i < count; i++) {
-    var deviation = mean - array[i];
-    variance = variance + deviation * deviation;
-  }
-  variance = variance / (count - 1);
-  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 exportHtml() {
-  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 src="options.js">
 </script>
 
 </head>
 
-<body onload="jsinit(); restoreTable()">
+<body>
 
 <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>
+<h1>Configuration <a href="https://sites.google.com/a/chromium.org/dev/developers/design-documents/extensions/how-the-extension-system-works/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">
@@ -865,17 +150,17 @@ Enable Spdy?<input id="enablespdy" type="checkbox">
 <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()">
+<form>
 <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="exportHtml()">
+<input id="expand" type="button" value="Show More Details">
+<input id="clearSelected" type="button" value="Clear Selected" disabled="true">
+<input id="clearAll" type="button" value="Clear All">
+<input id="exportCsv" type="button" value="Export As .csv">
 <table id="t" class="sortable" width="100%">
   <tr>
   <th width=35 class="nobg"></th>
@@ -940,7 +225,7 @@ Enable Spdy?<input id="enablespdy" type="checkbox">
   </tr>
 
   <tr jsselect="data">
-  <td align=right> <input type="checkbox" name="checkboxArr" onclick="updateChart(this);clearIndicator();checkSelected()"></td>
+  <td align=right> <input type="checkbox" name="checkboxArr"></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>
@@ -978,37 +263,36 @@ Enable Spdy?<input id="enablespdy" type="checkbox">
   <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" style="display:none"><input name="radioArr" type="radio"> </td>
+  <td class="avg" style="display:none"><input name="radioArr" type="radio"></td>
+  <td class="avg"><input name="radioArr" type="radio"></td>
+  <td class="avg"><input name="radioArr" type="radio"></td>
+  <td class="avg"><input name="radioArr" type="radio" 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"><input name="radioArr" type="radio"></td>
+  <td class="avg" style="display:none"><input name="radioArr" type="radio"></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>
+  <td class="avg" style="display:none"><input name="radioArr" type="radio"></td>
+  <td class="avg" style="display:none"><input name="radioArr" type="radio"></td>
+  <td class="avg"><input name="radioArr" type="radio"></td>
+  <td class="avg"><input name="radioArr" type="radio"></td>
   </tr>
   <tr jsdisplay="data.length > 1">
-  <td> <input id="compare" type="button" value="Compare" disabled="true" onclick="compare()"></td>
+  <td> <input id="compare" type="button" value="Compare" disabled="true"></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>
+<span id="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>
+<span id="toggle-baseline">COMPARE to</span><br>
+<textarea style="display:none" type=text id=baseline rows=10 cols=50></textarea><p>
 </body>