chrome/common/extensions/docs/examples/extensions/benchmark/options.js - Issue 10981008: Update page benchmarking extension to manifest v2 and event page.

Unified Diff: chrome/common/extensions/docs/examples/extensions/benchmark/options.js

Issue 10981008: Update page benchmarking extension to manifest v2 and event page. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src

Patch Set: license Created 8 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « chrome/common/extensions/docs/examples/extensions/benchmark/options.html ('k') | chrome/common/extensions/docs/examples/extensions/benchmark/util/sorttable.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: chrome/common/extensions/docs/examples/extensions/benchmark/options.js

diff --git a/chrome/common/extensions/docs/examples/extensions/benchmark/options.html b/chrome/common/extensions/docs/examples/extensions/benchmark/options.js

similarity index 62%

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

copy to chrome/common/extensions/docs/examples/extensions/benchmark/options.js

index 5ea0c1c8feafcd45c794c45c4075369887cbdedd..674e1d9a3235fca9cf5cec6ae974955c9ef42306 100644

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

+++ b/chrome/common/extensions/docs/examples/extensions/benchmark/options.js

@@ -1,135 +1,7 @@

-<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;

+// Use of this source code is governed by a BSD-style license that can be

+// found in the LICENSE file.

-.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) {

@@ -279,11 +151,11 @@ function PData() {

this.countA = 0; // Size of the data sets.

this.countB = 0;

- this.setYAxis = function (str) {

+ this.setYAxis = function(str) {

this.yAxis = str;

}

- this.setAvg = function (arr, cha) {

+ this.setAvg = function(arr, cha) {

if (cha == 'A') {

var avgA = Array.avg(arr);

for (var i = 1; i <= this.countA; i++) {

@@ -297,7 +169,7 @@ function PData() {

}

- this.setMax = function (arr, cha) {

+ this.setMax = function(arr, cha) {

if (cha == 'A') {

this.maxA = Array.max(arr);

} else if (cha == 'B') {

@@ -306,7 +178,7 @@ function PData() {

}

// Add an entry to the array.

- this.addArr = function (val, cha) {

+ this.addArr = function(val, cha) {

if (cha == 'A') {

this.countA++;

this.A.push([this.countA, val]);

@@ -317,7 +189,7 @@ function PData() {

}

// Plot the graph at the specified place.

- this.plot = function (placeholder) {

+ this.plot = function(placeholder) {

$.plot(placeholder,

[// Line A

{

@@ -435,7 +307,7 @@ var METRIC = {"STARTLOAD": 0, "COMMITLOAD": 1, "DOCLOAD": 2, "PAINT": 3,

"WRITEKB": 8, "READKBPS": 9, "WRITEKBPS": 10};

// Retrieve the metric name from index.

-function getMetricName (index) {

+function getMetricName(index) {

switch (index) {

case METRIC.STARTLOAD:

return "Start Load Time";

@@ -533,7 +405,7 @@ function updateChart(caller) {

}

// Clear indicators besides checkbox.

-function clearIndicator () {

+function clearIndicator() {

var checkboxArr = document.getElementsByName("checkboxArr");

for (var i = 0; i < checkboxArr.length; i++) {

checkboxArr[i].parentElement.firstChild.data = "";

@@ -541,7 +413,7 @@ function clearIndicator () {

}

// Enable/Disable buttons according to checkbox change.

-function checkSelected () {

+function checkSelected() {

var checkboxArr = document.getElementsByName("checkboxArr");

if (checkAmount(checkboxArr) !=0) {

document.getElementById("clearSelected").disabled = false;

@@ -844,171 +716,36 @@ function toggle(id) {

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="exportHtml()">

-<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" 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="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" 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)" checked></td>

- <td class="avg" 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" jseval="1"></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>

- </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>

+document.addEventListener("DOMContentLoaded", function() {

+ jsinit();

+ restoreTable();

+ document.querySelector('form').addEventListener('click', function() {

+ config();

+ run();

+ });

+ $('#expand')[0].addEventListener('click', function() { expand(); });

+ $('#clearSelected')[0].addEventListener('click',

+ function() { showConfirm(); });

+ $('#clearAll')[0].addEventListener('click', function() { showConfirm(); });

+ $('#exportCsv')[0].addEventListener('click', function() { exportHtml(); });

+ var checkboxArrs = document.getElementsByName('checkboxArr');

+ for (var i = 0; i < checkboxArrs.length; ++i) {

+ checkboxArrs[i].addEventListener('click', function() {

+ updateChart(this);

+ clearIndicator();

+ checkSelected();

+ });

+ }

+ var radioArrs = document.getElementsByName('radioArr');

+ for (i = 0; i < radioArrs.length; ++i) {

+ radioArrs[i].addEventListener('click', function() { updateChart(this); });

+ }

+ $('#compare')[0].addEventListener('click', function() { compare(); });

+ $('#toggle-json')[0].addEventListener('click',

+ function() { toggle('json'); });

+ $('#toggle-baseline')[0].addEventListener('click',

+ function() { toggle('baseline'); });

+ $('#baseline')[0].addEventListener('change', function() { jsinit(); });

+});