| OLD | NEW |
|---|
| 1 <head> | 1 <head> |
| 2 <title>Page Benchmark Options</title> | 2 <title>Page Benchmark Options</title> |
| 3 | 3 |
| 4 <script src="jst/util.js" type="text/javascript"></script> | 4 <script src="jst/util.js" type="text/javascript"></script> |
| 5 <script src="jst/jsevalcontext.js" type="text/javascript"></script> | 5 <script src="jst/jsevalcontext.js" type="text/javascript"></script> |
| 6 <script src="jst/jstemplate.js" type="text/javascript"></script> | 6 <script src="jst/jstemplate.js" type="text/javascript"></script> |
| 7 <script src="jquery/jquery-1.4.2.min.js" type="text/javascript"></script> | 7 <script src="jquery/jquery-1.8.2.min.js" type="text/javascript"></script> |
| 8 <script src="jquery/jquery.flot.min.js" type="text/javascript"></script> | 8 <script src="jquery/jquery.flot.min.js" type="text/javascript"></script> |
| 9 <script src="jquery/jquery.flot.dashes.js" type="text/javascript"></script> | 9 <script src="jquery/jquery.flot.dashes.js" type="text/javascript"></script> |
| 10 <script src="util/table2CSV.js" type="text/javascript"></script> | 10 <script src="util/table2CSV.js" type="text/javascript"></script> |
| 11 <script src="util/sorttable.js" type="text/javascript"></script> | 11 <script src="util/sorttable.js" type="text/javascript"></script> |
| 12 | |
| 13 <style> | 12 <style> |
| 14 body { | 13 body { |
| 15 font-size: 84%; | 14 font-size: 84%; |
| 16 font-family: Helvetica, Arial, sans-serif; | 15 font-family: Helvetica, Arial, sans-serif; |
| 17 padding: 0.75em; | 16 padding: 0.75em; |
| 18 margin: 0; | 17 margin: 0; |
| 19 min-width: 45em; | 18 min-width: 45em; |
| 20 } | 19 } |
| 21 | 20 |
| 22 h1 { | 21 h1 { |
| (...skipping 99 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 122 .file_input_hidden | 121 .file_input_hidden |
| 123 { | 122 { |
| 124 font-size: 25px; | 123 font-size: 25px; |
| 125 position: absolute; | 124 position: absolute; |
| 126 right: 0px; | 125 right: 0px; |
| 127 top: 0px; | 126 top: 0px; |
| 128 opacity: 0; | 127 opacity: 0; |
| 129 } | 128 } |
| 130 </style> | 129 </style> |
| 131 | 130 |
| 132 <script> | 131 <script src="options.js"> |
| 133 var max_sample = 0; | |
| 134 | |
| 135 Array.max = function(array) { | |
| 136 return Math.max.apply( Math, array ); | |
| 137 } | |
| 138 | |
| 139 Array.min = function(array) { | |
| 140 return Math.min.apply( Math, array ); | |
| 141 }; | |
| 142 | |
| 143 // Compute the average of an array, removing the min/max. | |
| 144 Array.avg = function(array) { | |
| 145 var count = array.length; | |
| 146 var sum = 0; | |
| 147 var min = array[0]; | |
| 148 var max = array[0]; | |
| 149 for (var i = 0; i < count; i++) { | |
| 150 sum += array[i]; | |
| 151 if (array[i] < min) { | |
| 152 min = array[i]; | |
| 153 } | |
| 154 if (array[i] > max) { | |
| 155 max = array[i]; | |
| 156 } | |
| 157 } | |
| 158 if (count >= 3) { | |
| 159 sum = sum - min - max; | |
| 160 count -= 2; | |
| 161 } | |
| 162 return sum / count; | |
| 163 } | |
| 164 | |
| 165 // Compute the sample standard deviation of an array | |
| 166 Array.stddev = function(array) { | |
| 167 var count = array.length; | |
| 168 var mean = 0; | |
| 169 for (var i = 0; i < count; i++) { | |
| 170 mean += array[i]; | |
| 171 } | |
| 172 mean /= count; | |
| 173 var variance = 0; | |
| 174 for (var i = 0; i < count; i++) { | |
| 175 var deviation = mean - array[i]; | |
| 176 variance = variance + deviation * deviation; | |
| 177 } | |
| 178 variance = variance / (count - 1); | |
| 179 return Math.sqrt(variance); | |
| 180 } | |
| 181 | |
| 182 function handleFileSelect(evt) { | |
| 183 var files = evt.target.files; | |
| 184 for (var i = 0, f; f = files[i]; i++) { | |
| 185 var reader = new FileReader(); | |
| 186 reader.onload = function(evt) { | |
| 187 document.getElementById("testurl").value = evt.target.result; | |
| 188 } | |
| 189 reader.readAsText(f); | |
| 190 }; | |
| 191 } | |
| 192 | |
| 193 var THTAG = "th"; | |
| 194 var TDTAG = "td"; | |
| 195 var NONE_DISPLAY = "none"; | |
| 196 var CELL_DISPLAY = "table-cell"; | |
| 197 var BRIEF_VIEW = "Show More Details"; | |
| 198 var FULL_VIEW = "Hide Details"; | |
| 199 | |
| 200 // Expand or shrink the result table. | |
| 201 // Called when clicking button "Show More Details/Hide Details". | |
| 202 function expand() { | |
| 203 if (document.getElementById("expand").value == BRIEF_VIEW) { | |
| 204 // From biref view to detailed view. | |
| 205 var headers = document.getElementsByTagName(THTAG); | |
| 206 var cells = document.getElementsByTagName(TDTAG); | |
| 207 | |
| 208 // Display the hidden metrics (both headers and data cells). | |
| 209 for (var i = 0; i < headers.length; i++) { | |
| 210 if (headers[i].style.display == NONE_DISPLAY) { | |
| 211 headers[i].style.display = CELL_DISPLAY; | |
| 212 } | |
| 213 } | |
| 214 | |
| 215 for (i = 0; i < cells.length; i++) { | |
| 216 if (cells[i].style.display == NONE_DISPLAY) { | |
| 217 cells[i].style.display = CELL_DISPLAY; | |
| 218 } | |
| 219 } | |
| 220 | |
| 221 document.getElementById("expand").value = FULL_VIEW; | |
| 222 } else { | |
| 223 // From detailed view to brief view. | |
| 224 var headers = document.getElementsByTagName(THTAG); | |
| 225 var cells = document.getElementsByTagName(TDTAG); | |
| 226 | |
| 227 // Hide some metrics. | |
| 228 for (var i = 0; i < headers.length; i++) { | |
| 229 if (headers[i].style.display == CELL_DISPLAY) { | |
| 230 headers[i].style.display = NONE_DISPLAY; | |
| 231 } | |
| 232 } | |
| 233 | |
| 234 for (i = 0; i < cells.length; i++) { | |
| 235 if (cells[i].style.display == CELL_DISPLAY) { | |
| 236 cells[i].style.display = NONE_DISPLAY; | |
| 237 } | |
| 238 } | |
| 239 | |
| 240 document.getElementById("expand").value = BRIEF_VIEW; | |
| 241 } | |
| 242 | |
| 243 // Use cookie to store current expand/hide status. | |
| 244 var lastValue = document.getElementById("expand").value; | |
| 245 document.cookie = "lastValue=" + lastValue; | |
| 246 } | |
| 247 | |
| 248 // Reloading the page causes table to shrink (default original status). | |
| 249 // Cookie remembers last status of table (in terms of expanded or shrunk). | |
| 250 function restoreTable() { | |
| 251 if (document.cookie == "lastValue=Hide Details") { | |
| 252 var headers = document.getElementsByTagName(THTAG); | |
| 253 var cells = document.getElementsByTagName(TDTAG); | |
| 254 | |
| 255 for (var i = 0; i < headers.length; i++) { | |
| 256 if (headers[i].style.display == NONE_DISPLAY) { | |
| 257 headers[i].style.display = CELL_DISPLAY; | |
| 258 } | |
| 259 } | |
| 260 for (i = 0; i < cells.length; i++) { | |
| 261 if (cells[i].style.display == NONE_DISPLAY) { | |
| 262 cells[i].style.display = CELL_DISPLAY; | |
| 263 } | |
| 264 } | |
| 265 document.getElementById("expand").value = FULL_VIEW; | |
| 266 } | |
| 267 } | |
| 268 | |
| 269 // A class to store the data to plot. | |
| 270 function PData() { | |
| 271 this.xAxis = "Iteration(s)"; | |
| 272 this.yAxis = ""; | |
| 273 this.A = []; // Two data sets for comparison. | |
| 274 this.B = []; | |
| 275 this.avgA = []; // Avg value is plotted as a line. | |
| 276 this.avgB = []; | |
| 277 this.maxA = 0; | |
| 278 this.maxB = 0; | |
| 279 this.countA = 0; // Size of the data sets. | |
| 280 this.countB = 0; | |
| 281 | |
| 282 this.setYAxis = function (str) { | |
| 283 this.yAxis = str; | |
| 284 } | |
| 285 | |
| 286 this.setAvg = function (arr, cha) { | |
| 287 if (cha == 'A') { | |
| 288 var avgA = Array.avg(arr); | |
| 289 for (var i = 1; i <= this.countA; i++) { | |
| 290 this.avgA.push([i, avgA]); | |
| 291 } | |
| 292 } else if (cha == 'B') { | |
| 293 var avgB = Array.avg(arr); | |
| 294 for (var i = 1; i <= this.countB; i++) { | |
| 295 this.avgB.push([i, avgB]); | |
| 296 } | |
| 297 } | |
| 298 } | |
| 299 | |
| 300 this.setMax = function (arr, cha) { | |
| 301 if (cha == 'A') { | |
| 302 this.maxA = Array.max(arr); | |
| 303 } else if (cha == 'B') { | |
| 304 this.maxB = Array.max(arr); | |
| 305 } | |
| 306 } | |
| 307 | |
| 308 // Add an entry to the array. | |
| 309 this.addArr = function (val, cha) { | |
| 310 if (cha == 'A') { | |
| 311 this.countA++; | |
| 312 this.A.push([this.countA, val]); | |
| 313 } else if (cha == 'B') { | |
| 314 this.countB++; | |
| 315 this.B.push([this.countB, val]); | |
| 316 } | |
| 317 } | |
| 318 | |
| 319 // Plot the graph at the specified place. | |
| 320 this.plot = function (placeholder) { | |
| 321 $.plot(placeholder, | |
| 322 [// Line A | |
| 323 { | |
| 324 data: this.A, | |
| 325 label: "A's " + this.yAxis + " in " + this.countA + " " + this.xAxis, | |
| 326 points: { | |
| 327 show: true | |
| 328 }, | |
| 329 lines: { | |
| 330 show: true | |
| 331 } | |
| 332 }, | |
| 333 | |
| 334 // Line B | |
| 335 { | |
| 336 data: this.B, | |
| 337 label: "B's " + this.yAxis + " in " + this.countB + " " + this.xAxis, | |
| 338 points: { | |
| 339 show: true | |
| 340 }, | |
| 341 lines: { | |
| 342 show: true | |
| 343 } | |
| 344 }, | |
| 345 | |
| 346 // Line avgA | |
| 347 { | |
| 348 data: this.avgA, | |
| 349 label: "A's avg " + this.yAxis, | |
| 350 dashes: { | |
| 351 show: true | |
| 352 } | |
| 353 }, | |
| 354 | |
| 355 // Line avgB | |
| 356 { | |
| 357 data: this.avgB, | |
| 358 label: "B's avg " + this.yAxis, | |
| 359 dashes: { | |
| 360 show: true | |
| 361 } | |
| 362 }], | |
| 363 | |
| 364 // Axis and legend setup. | |
| 365 { xaxis: { | |
| 366 max: this.countA > this.countB ? this.countA : this.countB, | |
| 367 tickSize: 1, | |
| 368 tickDecimals: 0 | |
| 369 }, | |
| 370 yaxis: { | |
| 371 // Leave some space for legend. | |
| 372 max: this.maxA > this.maxB ? this.maxA * 1.5 : this.maxB * 1.5 | |
| 373 }, | |
| 374 legend: { | |
| 375 backgroundOpacity: 0 | |
| 376 } | |
| 377 }); | |
| 378 } | |
| 379 } | |
| 380 | |
| 381 // Compare the selected metric of the two selected data sets. | |
| 382 function compare() { | |
| 383 var checkboxArr = document.getElementsByName("checkboxArr"); | |
| 384 var radioArr = document.getElementsByName("radioArr"); | |
| 385 | |
| 386 if (checkAmount(checkboxArr) != 2) { | |
| 387 alert("please select two rows to compare"); | |
| 388 return; | |
| 389 } | |
| 390 | |
| 391 var rowIndexArr = getSelectedIndex(checkboxArr); | |
| 392 var colIndexArr = getSelectedIndex(radioArr); | |
| 393 // To this point, it is for sure that rowIndexArr has two elements | |
| 394 // while colIndexArr has one. | |
| 395 var selectedRowA = rowIndexArr[0]; | |
| 396 var selectedRowB = rowIndexArr[1]; | |
| 397 var selectedCol = colIndexArr[0]; | |
| 398 | |
| 399 var extension = chrome.extension.getBackgroundPage(); | |
| 400 var data = extension.results.data; | |
| 401 var selectedA = getSelectedResults(data,selectedRowA,selectedCol); | |
| 402 var selectedB = getSelectedResults(data,selectedRowB,selectedCol); | |
| 403 var yAxis = getMetricName(selectedCol); | |
| 404 | |
| 405 // Indicate A and B on selected rows. | |
| 406 checkboxArr[selectedRowA].parentElement.firstChild.data = "A"; | |
| 407 checkboxArr[selectedRowB].parentElement.firstChild.data = "B"; | |
| 408 | |
| 409 plot(selectedA, selectedB, yAxis); | |
| 410 } | |
| 411 | |
| 412 // Show the comparison graph. | |
| 413 function plot(A, B, axis) { | |
| 414 var plotData = new PData(); | |
| 415 | |
| 416 plotData.setYAxis(axis); | |
| 417 for (var i = 0; i < A.length; i++) { | |
| 418 plotData.addArr(A[i],'A'); | |
| 419 } | |
| 420 for (var i = 0; i < B.length; i++) { | |
| 421 plotData.addArr(B[i],'B'); | |
| 422 } | |
| 423 plotData.setAvg(A,'A'); | |
| 424 plotData.setAvg(B,'B'); | |
| 425 plotData.setMax(A,'A'); | |
| 426 plotData.setMax(B,'B'); | |
| 427 | |
| 428 var placeholder = document.getElementById("placeholder"); | |
| 429 placeholder.style.display = ""; | |
| 430 plotData.plot(placeholder); | |
| 431 } | |
| 432 | |
| 433 var METRIC = {"STARTLOAD": 0, "COMMITLOAD": 1, "DOCLOAD": 2, "PAINT": 3, | |
| 434 "TOTAL": 4, "REQUESTS": 5, "CONNECTS": 6, "READKB": 7, | |
| 435 "WRITEKB": 8, "READKBPS": 9, "WRITEKBPS": 10}; | |
| 436 | |
| 437 // Retrieve the metric name from index. | |
| 438 function getMetricName (index) { | |
| 439 switch (index) { | |
| 440 case METRIC.STARTLOAD: | |
| 441 return "Start Load Time"; | |
| 442 case METRIC.COMMITLOAD: | |
| 443 return "Commit Load Time"; | |
| 444 case METRIC.DOCLOAD: | |
| 445 return "Doc Load Time"; | |
| 446 case METRIC.PAINT: | |
| 447 return "Paint Time"; | |
| 448 case METRIC.TOTAL: | |
| 449 return "Total Load Time"; | |
| 450 case METRIC.REQUESTS: | |
| 451 return "# Requests"; | |
| 452 case METRIC.CONNECTS: | |
| 453 return "# Connects"; | |
| 454 case METRIC.READKB: | |
| 455 return "Read KB"; | |
| 456 case METRIC.WRITEKB: | |
| 457 return "Write KB"; | |
| 458 case METRIC.READKBPS: | |
| 459 return "Read KBps"; | |
| 460 case METRIC.WRITEKBPS: | |
| 461 return "Write KBps"; | |
| 462 default: | |
| 463 return ""; | |
| 464 } | |
| 465 } | |
| 466 | |
| 467 // Get the results with a specific row (data set) and column (metric). | |
| 468 function getSelectedResults(arr, rowIndex, colIndex) { | |
| 469 switch (colIndex) { | |
| 470 case METRIC.STARTLOAD: | |
| 471 return arr[rowIndex].startLoadResults; | |
| 472 case METRIC.COMMITLOAD: | |
| 473 return arr[rowIndex].commitLoadResults; | |
| 474 case METRIC.DOCLOAD: | |
| 475 return arr[rowIndex].docLoadResults; | |
| 476 case METRIC.PAINT: | |
| 477 return arr[rowIndex].paintResults; | |
| 478 case METRIC.TOTAL: | |
| 479 return arr[rowIndex].totalResults; | |
| 480 case METRIC.REQUESTS: | |
| 481 return arr[rowIndex].requests; | |
| 482 case METRIC.CONNECTS: | |
| 483 return arr[rowIndex].connects; | |
| 484 case METRIC.READKB: | |
| 485 return arr[rowIndex].KbytesRead; | |
| 486 case METRIC.WRITEKB: | |
| 487 return arr[rowIndex].KbytesWritten; | |
| 488 case METRIC.READKBPS: | |
| 489 return arr[rowIndex].readbpsResults; | |
| 490 case METRIC.WRITEKBPS: | |
| 491 return arr[rowIndex].writebpsResults; | |
| 492 default: | |
| 493 return undefined; | |
| 494 } | |
| 495 } | |
| 496 | |
| 497 // Ensure only two data sets (rows) are selected. | |
| 498 function checkAmount(arr) { | |
| 499 var amount = 0; | |
| 500 for (var i = 0; i < arr.length; i++) { | |
| 501 if (arr[i].checked) { | |
| 502 amount++; | |
| 503 } | |
| 504 } | |
| 505 return amount; | |
| 506 } | |
| 507 | |
| 508 // Get the index of selected row or column. | |
| 509 function getSelectedIndex(arr) { | |
| 510 var selectedArr = new Array(); | |
| 511 for (var i = 0; i < arr.length; i++) { | |
| 512 if(arr[i].checked) { | |
| 513 selectedArr.push(i); | |
| 514 } | |
| 515 } | |
| 516 return selectedArr; | |
| 517 } | |
| 518 | |
| 519 // Repaint or hide the chart. | |
| 520 function updateChart(caller) { | |
| 521 var placeholder = document.getElementById("placeholder"); | |
| 522 if (caller.type == "radio") { | |
| 523 // Other radio button is clicked. | |
| 524 if (placeholder.style.display == "") { | |
| 525 compare(); | |
| 526 } | |
| 527 } else { | |
| 528 // Other checkbox or clearing results is clicked. | |
| 529 if (placeholder.style.display == "") { | |
| 530 placeholder.style.display = "none"; | |
| 531 } | |
| 532 } | |
| 533 } | |
| 534 | |
| 535 // Clear indicators besides checkbox. | |
| 536 function clearIndicator () { | |
| 537 var checkboxArr = document.getElementsByName("checkboxArr"); | |
| 538 for (var i = 0; i < checkboxArr.length; i++) { | |
| 539 checkboxArr[i].parentElement.firstChild.data = ""; | |
| 540 } | |
| 541 } | |
| 542 | |
| 543 // Enable/Disable buttons according to checkbox change. | |
| 544 function checkSelected () { | |
| 545 var checkboxArr = document.getElementsByName("checkboxArr"); | |
| 546 if (checkAmount(checkboxArr) !=0) { | |
| 547 document.getElementById("clearSelected").disabled = false; | |
| 548 document.getElementById("compare").disabled = false; | |
| 549 } else { | |
| 550 document.getElementById("clearSelected").disabled = true; | |
| 551 document.getElementById("compare").disabled = true; | |
| 552 } | |
| 553 } | |
| 554 | |
| 555 // Object to summarize everything | |
| 556 var totals = {}; | |
| 557 | |
| 558 // Compute the results for a data set. | |
| 559 function computeDisplayResults(data) { | |
| 560 var count = data.data.length; | |
| 561 for (var i = 0; i < count; i++) { | |
| 562 var obj = data.data[i]; | |
| 563 obj.displayTime = setDisplayTime(obj.timestamp); | |
| 564 var resultList = obj.totalResults; | |
| 565 obj.mean = Array.avg(resultList); | |
| 566 obj.stddev = Array.stddev(resultList); | |
| 567 obj.stderr = obj.stddev / Math.sqrt(obj.iterations); | |
| 568 var ci = 1.96 * obj.stderr; | |
| 569 obj.cihigh = obj.mean + ci; | |
| 570 obj.cilow = obj.mean - ci; | |
| 571 obj.min = Array.min(resultList); | |
| 572 obj.max = Array.max(resultList); | |
| 573 obj.readbps = Array.avg(obj.readbpsResults); | |
| 574 obj.writebps = Array.avg(obj.writebpsResults); | |
| 575 obj.readKB = Array.avg(obj.KbytesRead); | |
| 576 obj.writeKB = Array.avg(obj.KbytesWritten); | |
| 577 obj.paintMean = Array.avg(obj.paintResults); | |
| 578 obj.startLoadMean = Array.avg(obj.startLoadResults); | |
| 579 obj.commitLoadMean = Array.avg(obj.commitLoadResults); | |
| 580 obj.docLoadMean = Array.avg(obj.docLoadResults); | |
| 581 | |
| 582 obj.displayRequests = Array.avg(obj.requests); | |
| 583 obj.displayConnects = Array.avg(obj.connects); | |
| 584 obj.displaySpdySessions = Array.avg(obj.spdySessions); | |
| 585 | |
| 586 obj.displayDomNum = obj.domNum; | |
| 587 obj.displayMaxDepth = obj.maxDepth; | |
| 588 obj.displayMinDepth = obj.minDepth; | |
| 589 obj.displayAvgDepth = obj.avgDepth; | |
| 590 } | |
| 591 return count; | |
| 592 } | |
| 593 | |
| 594 // Convert timestamp to readable string. | |
| 595 function setDisplayTime(ts) { | |
| 596 var year = ts.getFullYear(); | |
| 597 var mon = ts.getMonth()+1; | |
| 598 var date = ts.getDate(); | |
| 599 var hrs = ts.getHours(); | |
| 600 var mins = ts.getMinutes(); | |
| 601 var secs = ts.getSeconds(); | |
| 602 | |
| 603 mon = ( mon < 10 ? "0" : "" ) + mon; | |
| 604 date = ( date < 10 ? "0" : "" ) + date; | |
| 605 mins = ( mins < 10 ? "0" : "" ) + mins; | |
| 606 secs = ( secs < 10 ? "0" : "" ) + secs; | |
| 607 | |
| 608 return (year + "/" + mon + "/" + date + " " + hrs + ":" + mins + ":" + secs); | |
| 609 } | |
| 610 | |
| 611 // Subtract the results from two data sets. | |
| 612 // This function could be smarter about what it subtracts, | |
| 613 // for now it just subtracts everything. | |
| 614 // Returns true if it was able to compare the two data sets. | |
| 615 function subtractData(data, baseline) { | |
| 616 var count = data.data.length; | |
| 617 if (baseline.data.length != count) { | |
| 618 return false; | |
| 619 } | |
| 620 for (var i = 0; i < count; i++) { | |
| 621 var obj = data.data[i]; | |
| 622 var obj2 = baseline.data[i]; | |
| 623 | |
| 624 // The data sets are different. | |
| 625 if (obj.url != obj2.url || | |
| 626 obj.iterations != obj2.iterations) { | |
| 627 return false; | |
| 628 } | |
| 629 | |
| 630 obj.mean -= obj2.mean; | |
| 631 obj.stddev -= obj2.stddev; | |
| 632 obj.min -= obj2.min; | |
| 633 obj.max -= obj2.max; | |
| 634 obj.readbps -= obj2.readbps; | |
| 635 obj.writebps -= obj2.writebps; | |
| 636 obj.readKB -= obj2.readKB; | |
| 637 obj.writeKB -= obj2.writeKB; | |
| 638 obj.paintMean -= obj2.paintMean; | |
| 639 obj.startLoadMean -= obj2.startLoadMean; | |
| 640 obj.commitLoadMean -= obj2.commitLoadMean; | |
| 641 obj.docLoadMean -= obj2.docLoadMean; | |
| 642 | |
| 643 obj.displayRequests -= obj2.displayRequests; | |
| 644 obj.displayConnects -= obj2.displayConnects; | |
| 645 obj.displaySpdySessions -= obj2.displaySpdySessions; | |
| 646 } | |
| 647 return true; | |
| 648 } | |
| 649 | |
| 650 // Compute totals based on a data set. | |
| 651 function computeTotals(data) { | |
| 652 var count = data.data.length; | |
| 653 for (var i = 0; i < count; i++) { | |
| 654 var obj = data.data[i]; | |
| 655 totals.mean += obj.mean; | |
| 656 totals.paintMean += obj.paintMean; | |
| 657 totals.startLoadMean += obj.startLoadMean; | |
| 658 totals.commitLoadMean += obj.commitLoadMean; | |
| 659 totals.docLoadMean += obj.docLoadMean; | |
| 660 } | |
| 661 } | |
| 662 | |
| 663 // Compute results for the data with an optional baseline. | |
| 664 // If |baseline| is undefined, will compute the results of this | |
| 665 // run. Otherwise, computes the diff between this data and the baseline. | |
| 666 function computeResults(data, baseline) { | |
| 667 totals = {}; | |
| 668 totals.mean = 0; | |
| 669 totals.paintMean = 0; | |
| 670 totals.startLoadMean = 0; | |
| 671 totals.commitLoadMean = 0; | |
| 672 totals.docLoadMean = 0; | |
| 673 | |
| 674 var count = computeDisplayResults(data); | |
| 675 | |
| 676 if (baseline) { | |
| 677 computeDisplayResults(baseline); | |
| 678 if (!subtractData(data, baseline)) { | |
| 679 alert("These data sets are different"); | |
| 680 document.getElementById("baseline").value = ""; | |
| 681 return; | |
| 682 } | |
| 683 } | |
| 684 | |
| 685 computeTotals(data); | |
| 686 totals.url = "(" + count + " urls)"; | |
| 687 if (count > 0) { | |
| 688 totals.mean /= count; | |
| 689 totals.paintMean /= count; | |
| 690 totals.startLoadMean /= count; | |
| 691 totals.commitLoadMean /= count; | |
| 692 totals.docLoadMean /= count; | |
| 693 } | |
| 694 | |
| 695 // Find the biggest average for our bar graph. | |
| 696 max_sample = 0; | |
| 697 for (var i = 0; i < data.data.length; i++) { | |
| 698 if (data.data[i].max > max_sample) { | |
| 699 max_sample = data.data[i].mean; | |
| 700 } | |
| 701 } | |
| 702 } | |
| 703 | |
| 704 function jsinit() { | |
| 705 var extension = chrome.extension.getBackgroundPage(); | |
| 706 | |
| 707 // Run the template to show results | |
| 708 var data = extension.results; | |
| 709 | |
| 710 // Get the baseline results | |
| 711 var elt = document.getElementById("baseline"); | |
| 712 var baseline_json = document.getElementById("baseline").value; | |
| 713 var baseline; | |
| 714 if (baseline_json) { | |
| 715 try { | |
| 716 baseline = JSON.parse(baseline_json); | |
| 717 } catch (e) { | |
| 718 alert("JSON parse error: " + e); | |
| 719 } | |
| 720 } | |
| 721 | |
| 722 // Compute | |
| 723 computeResults(data, baseline); | |
| 724 | |
| 725 var context = new JsEvalContext(data); | |
| 726 context.setVariable('$width', 0); | |
| 727 context.setVariable('$samples', 0); | |
| 728 var template = document.getElementById("t"); | |
| 729 jstProcess(context, template); | |
| 730 | |
| 731 // Set the options | |
| 732 document.getElementById("iterations").value = extension.iterations; | |
| 733 document.getElementById("clearconns").checked = extension.clearConnections; | |
| 734 document.getElementById("clearcache").checked = extension.clearCache; | |
| 735 document.getElementById("enablespdy").checked = extension.enableSpdy; | |
| 736 setUrl(extension.testUrl); | |
| 737 | |
| 738 if (!baseline) { | |
| 739 var json_data = JSON.stringify(data); | |
| 740 document.getElementById("json").value = json_data; | |
| 741 } | |
| 742 | |
| 743 // Activate loading Urls from local file. | |
| 744 document.getElementById('files').addEventListener('change', | |
| 745 handleFileSelect, false); | |
| 746 } | |
| 747 | |
| 748 function getWidth(mean, obj) { | |
| 749 var kMinWidth = 200; | |
| 750 var max_width = obj.offsetWidth; | |
| 751 if (max_width < kMinWidth) { | |
| 752 max_width = kMinWidth; | |
| 753 } | |
| 754 return Math.floor(max_width * (mean / max_sample)); | |
| 755 } | |
| 756 | |
| 757 // Apply configuration back to our extension | |
| 758 function config() { | |
| 759 var extension = chrome.extension.getBackgroundPage(); | |
| 760 var iterations = parseInt(document.getElementById("iterations").value); | |
| 761 var clearConnections = document.getElementById("clearconns").checked; | |
| 762 var clearCache = document.getElementById("clearcache").checked; | |
| 763 var enableSpdy = document.getElementById("enablespdy").checked; | |
| 764 if (iterations > 0) { | |
| 765 extension.iterations = iterations; | |
| 766 extension.clearConnections = clearConnections; | |
| 767 extension.clearCache = clearCache; | |
| 768 extension.enableSpdy = enableSpdy; | |
| 769 } | |
| 770 } | |
| 771 | |
| 772 // Set the url in the benchmark url box. | |
| 773 function setUrl(url) { | |
| 774 document.getElementById("testurl").value = url; | |
| 775 } | |
| 776 | |
| 777 // Start the benchmark. | |
| 778 function run() { | |
| 779 if (!chrome.benchmarking) { | |
| 780 alert("Warning: Looks like you forgot to run chrome with " + | |
| 781 " --enable-benchmarking set."); | |
| 782 return; | |
| 783 } | |
| 784 var extension = chrome.extension.getBackgroundPage(); | |
| 785 var testUrl = document.getElementById("testurl").value; | |
| 786 extension.testUrl = testUrl; | |
| 787 extension.run(); | |
| 788 } | |
| 789 | |
| 790 function showConfirm() { | |
| 791 var r = confirm("Are you sure to clear results?"); | |
| 792 if (r) { | |
| 793 // Find out the event source element. | |
| 794 var evtSrc = window.event.srcElement; | |
| 795 if (evtSrc.value == "Clear Selected") { | |
| 796 clearSelected(); | |
| 797 } else if (evtSrc.value == "Clear All") { | |
| 798 clearResults(); | |
| 799 } | |
| 800 } | |
| 801 } | |
| 802 | |
| 803 // Clear the selected results | |
| 804 function clearSelected() { | |
| 805 var extension = chrome.extension.getBackgroundPage(); | |
| 806 var checkboxArr = document.getElementsByName("checkboxArr"); | |
| 807 var rowIndexArr = getSelectedIndex(checkboxArr); | |
| 808 var currIndex; | |
| 809 for (var i = 0; i < rowIndexArr.length; i++) { | |
| 810 currIndex = rowIndexArr[i]; | |
| 811 // Update the index of the original row in the modified array. | |
| 812 currIndex -= i; | |
| 813 extension.results.data.splice(currIndex, 1); | |
| 814 document.location.reload(true); | |
| 815 updateChart(this); | |
| 816 jsinit(); | |
| 817 } | |
| 818 } | |
| 819 | |
| 820 // Clear all the results | |
| 821 function clearResults() { | |
| 822 var extension = chrome.extension.getBackgroundPage(); | |
| 823 extension.results = {}; | |
| 824 extension.results.data = new Array(); | |
| 825 document.getElementById("json").value = ""; | |
| 826 document.getElementById("baseline").value = ""; | |
| 827 updateChart(this); | |
| 828 jsinit(); | |
| 829 } | |
| 830 | |
| 831 // Export html table into CSV format. | |
| 832 function exportHtml() { | |
| 833 var checkboxArr = document.getElementsByName("checkboxArr"); | |
| 834 var rowNum = checkboxArr.length + 1; // # of data rows plus total-stats row. | |
| 835 $('#t').table2CSV(rowNum); | |
| 836 } | |
| 837 | |
| 838 // Toggle display of an element | |
| 839 function toggle(id) { | |
| 840 var elt = document.getElementById(id); | |
| 841 if (elt.style.display == "none") { | |
| 842 elt.style.display = "block"; | |
| 843 } else { | |
| 844 elt.style.display = "none"; | |
| 845 } | |
| 846 } | |
| 847 </script> | 132 </script> |
| 848 | 133 |
| 849 </head> | 134 </head> |
| 850 | 135 |
| 851 <body onload="jsinit(); restoreTable()"> | 136 <body> |
| 852 | 137 |
| 853 <h1><div id="header">Page Benchmark Results</div></h1> | 138 <h1><div id="header">Page Benchmark Results</div></h1> |
| 854 | 139 |
| 855 <h1>Configuration <a href="http://sites.google.com/a/chromium.org/dev/chrome-ben
chmarking-extension" target="_blank" style="float:right"><font size="4%">Help</f
ont></a></h1> | 140 <h1>Configuration <a href="https://sites.google.com/a/chromium.org/dev/developer
s/design-documents/extensions/how-the-extension-system-works/chrome-benchmarking
-extension" target="_blank" style="float:right"><font size="4%">Help</font></a><
/h1> |
| 856 | 141 |
| 857 <span>Iterations</span> | 142 <span>Iterations</span> |
| 858 <input id="iterations" type="text" style="text-align:right" size="4"> | 143 <input id="iterations" type="text" style="text-align:right" size="4"> |
| 859 Clear Connections?<input id="clearconns" type="checkbox"> | 144 Clear Connections?<input id="clearconns" type="checkbox"> |
| 860 Clear Cache?<input id="clearcache" type="checkbox"> | 145 Clear Cache?<input id="clearcache" type="checkbox"> |
| 861 Enable Spdy?<input id="enablespdy" type="checkbox"> | 146 Enable Spdy?<input id="enablespdy" type="checkbox"> |
| 862 <br> | 147 <br> |
| 863 <span>URLs to load</span> <input type="text" id="testurl" size="80"> | 148 <span>URLs to load</span> <input type="text" id="testurl" size="80"> |
| 864 <span class="file_input"> | 149 <span class="file_input"> |
| 865 <input class="file_input_button" type="button" value="Load URLs From File" /> | 150 <input class="file_input_button" type="button" value="Load URLs From File" /> |
| 866 <input class="file_input_hidden" type="file" id="files" name="files[]" multiple
/> | 151 <input class="file_input_hidden" type="file" id="files" name="files[]" multiple
/> |
| 867 </span> | 152 </span> |
| 868 <form onsubmit="config();run()"> | 153 <form> |
| 869 <input type="submit" value="Run"> | 154 <input type="submit" value="Run"> |
| 870 </form> | 155 </form> |
| 871 <p> | 156 <p> |
| 872 | 157 |
| 873 <h1>Results</h1> | 158 <h1>Results</h1> |
| 874 | 159 |
| 875 <input id="expand" type="button" value="Show More Details" onclick="expand()"> | 160 <input id="expand" type="button" value="Show More Details"> |
| 876 <input id="clearSelected" type="button" value="Clear Selected" disabled="true" o
nclick="showConfirm()"> | 161 <input id="clearSelected" type="button" value="Clear Selected" disabled="true"> |
| 877 <input id="clearAll" type="button" value="Clear All" onclick="showConfirm()"> | 162 <input id="clearAll" type="button" value="Clear All"> |
| 878 <input type="button" value="Export As .csv" onclick="exportHtml()"> | 163 <input id="exportCsv" type="button" value="Export As .csv"> |
| 879 <table id="t" class="sortable" width="100%"> | 164 <table id="t" class="sortable" width="100%"> |
| 880 <tr> | 165 <tr> |
| 881 <th width=35 class="nobg"></th> | 166 <th width=35 class="nobg"></th> |
| 882 <th width=215 class="nobg">url</th> | 167 <th width=215 class="nobg">url</th> |
| 883 <th width=110 class="nobg" style="display:none">timestamp</th> | 168 <th width=110 class="nobg" style="display:none">timestamp</th> |
| 884 <th width=50 class="nobg">iterations</th> | 169 <th width=50 class="nobg">iterations</th> |
| 885 <th width=50 class="nobg">via spdy</th> | 170 <th width=50 class="nobg">via spdy</th> |
| 886 <th width=50 class="bg" style="display:none">start load mean</th> | 171 <th width=50 class="bg" style="display:none">start load mean</th> |
| 887 <th width=50 class="bg" style="display:none">commit load mean</th> | 172 <th width=50 class="bg" style="display:none">commit load mean</th> |
| 888 <th width=50 class="bg">doc load mean</th> | 173 <th width=50 class="bg">doc load mean</th> |
| (...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 933 <td class="avg" jseval="1"></td> | 218 <td class="avg" jseval="1"></td> |
| 934 <td class="avg" jseval="1"></td> | 219 <td class="avg" jseval="1"></td> |
| 935 <td class="avg" jseval="1"></td> | 220 <td class="avg" jseval="1"></td> |
| 936 <td class="avg" jseval="1"></td> | 221 <td class="avg" jseval="1"></td> |
| 937 <td class="avg" jseval="1"></td> | 222 <td class="avg" jseval="1"></td> |
| 938 <td class="avg" jseval="1"></td> | 223 <td class="avg" jseval="1"></td> |
| 939 <td class="data"></td> | 224 <td class="data"></td> |
| 940 </tr> | 225 </tr> |
| 941 | 226 |
| 942 <tr jsselect="data"> | 227 <tr jsselect="data"> |
| 943 <td align=right> <input type="checkbox" name="checkboxArr" onclick="updateChar
t(this);clearIndicator();checkSelected()"></td> | 228 <td align=right> <input type="checkbox" name="checkboxArr"></td> |
| 944 <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> | 229 <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> |
| 945 <td class="avg" style="display:none" jseval="val = displayTime" jscontent="val
"></td> | 230 <td class="avg" style="display:none" jseval="val = displayTime" jscontent="val
"></td> |
| 946 <td class="avg" jseval="val = iterations" jscontent="val"></td> | 231 <td class="avg" jseval="val = iterations" jscontent="val"></td> |
| 947 <td class="avg" jseval="val = viaSpdy" jscontent="val"></td> | 232 <td class="avg" jseval="val = viaSpdy" jscontent="val"></td> |
| 948 <td class="avg" style="display:none" jseval="val = startLoadMean.toFixed(1)" j
scontent="val"></td> | 233 <td class="avg" style="display:none" jseval="val = startLoadMean.toFixed(1)" j
scontent="val"></td> |
| 949 <td class="avg" style="display:none" jseval="val = commitLoadMean.toFixed(1)"
jscontent="val"></td> | 234 <td class="avg" style="display:none" jseval="val = commitLoadMean.toFixed(1)"
jscontent="val"></td> |
| 950 <td class="avg" jseval="val = docLoadMean.toFixed(1)" jscontent="val"></td> | 235 <td class="avg" jseval="val = docLoadMean.toFixed(1)" jscontent="val"></td> |
| 951 <td class="avg" jseval="val = paintMean.toFixed(1)" jscontent="val"></td> | 236 <td class="avg" jseval="val = paintMean.toFixed(1)" jscontent="val"></td> |
| 952 <td class="avg" jseval="val = mean.toFixed(1)" jscontent="val"></td> | 237 <td class="avg" jseval="val = mean.toFixed(1)" jscontent="val"></td> |
| 953 <td class="avg" jseval="val = stddev.toFixed(1)" jscontent="val"></td> | 238 <td class="avg" jseval="val = stddev.toFixed(1)" jscontent="val"></td> |
| (...skipping 17 matching lines...) Expand all Loading... |
| 971 </tr> | 256 </tr> |
| 972 <tr jsdisplay="data.length == 0"> | 257 <tr jsdisplay="data.length == 0"> |
| 973 <td colspan=2>No tests have been run yet.</td> | 258 <td colspan=2>No tests have been run yet.</td> |
| 974 </tr> | 259 </tr> |
| 975 <tr jsdisplay="data.length > 1"> | 260 <tr jsdisplay="data.length > 1"> |
| 976 <td width=25 jseval="1"></td> | 261 <td width=25 jseval="1"></td> |
| 977 <td class="url" jseval="1"></td> | 262 <td class="url" jseval="1"></td> |
| 978 <td class="avg" style="display:none" jseval="1"></td> | 263 <td class="avg" style="display:none" jseval="1"></td> |
| 979 <td class="avg" jseval="1"></td> | 264 <td class="avg" jseval="1"></td> |
| 980 <td class="avg" jseval="1"></td> | 265 <td class="avg" jseval="1"></td> |
| 981 <td class="avg" style="display:none"><input name="radioArr" type="radio" oncli
ck="updateChart(this)"> </td> | 266 <td class="avg" style="display:none"><input name="radioArr" type="radio"> </td
> |
| 982 <td class="avg" style="display:none"><input name="radioArr" type="radio" oncli
ck="updateChart(this)"></td> | 267 <td class="avg" style="display:none"><input name="radioArr" type="radio"></td> |
| 983 <td class="avg"><input name="radioArr" type="radio" onclick="updateChart(this)
"></td> | 268 <td class="avg"><input name="radioArr" type="radio"></td> |
| 984 <td class="avg"><input name="radioArr" type="radio" onclick="updateChart(this)
"></td> | 269 <td class="avg"><input name="radioArr" type="radio"></td> |
| 985 <td class="avg"><input name="radioArr" type="radio" onclick="updateChart(this)
" checked></td> | 270 <td class="avg"><input name="radioArr" type="radio" checked></td> |
| 986 <td class="avg" jseval="1"></td> | 271 <td class="avg" jseval="1"></td> |
| 987 <td class="avg" style="display:none" jseval="1"></td> | 272 <td class="avg" style="display:none" jseval="1"></td> |
| 988 <td class="avg" style="display:none" jseval="1"></td> | 273 <td class="avg" style="display:none" jseval="1"></td> |
| 989 <td class="avg" style="display:none" jseval="1"></td> | 274 <td class="avg" style="display:none" jseval="1"></td> |
| 990 <td class="avg" style="display:none" jseval="1"></td> | 275 <td class="avg" style="display:none" jseval="1"></td> |
| 991 <td class="avg" style="display:none" jseval="1"></td> | 276 <td class="avg" style="display:none" jseval="1"></td> |
| 992 <td class="avg" style="display:none"><input name="radioArr" type="radio" oncli
ck="updateChart(this)"></td> | 277 <td class="avg" style="display:none"><input name="radioArr" type="radio"></td> |
| 993 <td class="avg" style="display:none"><input name="radioArr" type="radio" oncli
ck="updateChart(this)"></td> | 278 <td class="avg" style="display:none"><input name="radioArr" type="radio"></td> |
| 994 <td class="avg" style="display:none" jseval="1"></td> | 279 <td class="avg" style="display:none" jseval="1"></td> |
| 995 <td class="avg" style="display:none"><input name="radioArr" type="radio" oncli
ck="updateChart(this)"></td> | 280 <td class="avg" style="display:none"><input name="radioArr" type="radio"></td> |
| 996 <td class="avg" style="display:none"><input name="radioArr" type="radio" oncli
ck="updateChart(this)"></td> | 281 <td class="avg" style="display:none"><input name="radioArr" type="radio"></td> |
| 997 <td class="avg"><input name="radioArr" type="radio" onclick="updateChart(this)
"></td> | 282 <td class="avg"><input name="radioArr" type="radio"></td> |
| 998 <td class="avg"><input name="radioArr" type="radio" onclick="updateChart(this)
"></td> | 283 <td class="avg"><input name="radioArr" type="radio"></td> |
| 999 </tr> | 284 </tr> |
| 1000 <tr jsdisplay="data.length > 1"> | 285 <tr jsdisplay="data.length > 1"> |
| 1001 <td> <input id="compare" type="button" value="Compare" disabled="true" onclick
="compare()"></td> | 286 <td> <input id="compare" type="button" value="Compare" disabled="true"></td> |
| 1002 </tr> | 287 </tr> |
| 1003 </table> | 288 </table> |
| 1004 <hr> | 289 <hr> |
| 1005 <center> | 290 <center> |
| 1006 <div id="placeholder" style="width:430px;height:230px;display:none">graph place<
/div> | 291 <div id="placeholder" style="width:430px;height:230px;display:none">graph place<
/div> |
| 1007 </center> | 292 </center> |
| 1008 <span onclick="toggle('json')">JSON data</span><br> | 293 <span id="toggle-json">JSON data</span><br> |
| 1009 <textarea style="display:none" type=text id=json rows=10 cols=50></textarea><p> | 294 <textarea style="display:none" type=text id=json rows=10 cols=50></textarea><p> |
| 1010 | 295 |
| 1011 <span onclick="toggle('baseline')">COMPARE to</span><br> | 296 <span id="toggle-baseline">COMPARE to</span><br> |
| 1012 <textarea style="display:none" type=text id=baseline rows=10 cols=50 | 297 <textarea style="display:none" type=text id=baseline rows=10 cols=50></textarea>
<p> |
| 1013 onchange="jsinit()"></textarea><p> | |
| 1014 </body> | 298 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 10981008:
Update page benchmarking extension to manifest v2 and event page. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src