| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | |
| 2 // Use of this source code is governed by a BSD-style license that can be | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 var max_sample = 0; | |
| 6 | |
| 7 Array.max = function(array) { | |
| 8 return Math.max.apply( Math, array ); | |
| 9 } | |
| 10 | |
| 11 Array.min = function(array) { | |
| 12 return Math.min.apply( Math, array ); | |
| 13 }; | |
| 14 | |
| 15 // Compute the average of an array, removing the min/max. | |
| 16 Array.avg = function(array) { | |
| 17 var count = array.length; | |
| 18 var sum = 0; | |
| 19 var min = array[0]; | |
| 20 var max = array[0]; | |
| 21 for (var i = 0; i < count; i++) { | |
| 22 sum += array[i]; | |
| 23 if (array[i] < min) { | |
| 24 min = array[i]; | |
| 25 } | |
| 26 if (array[i] > max) { | |
| 27 max = array[i]; | |
| 28 } | |
| 29 } | |
| 30 if (count >= 3) { | |
| 31 sum = sum - min - max; | |
| 32 count -= 2; | |
| 33 } | |
| 34 return sum / count; | |
| 35 } | |
| 36 | |
| 37 // Compute the sample standard deviation of an array | |
| 38 Array.stddev = function(array) { | |
| 39 var count = array.length; | |
| 40 var mean = 0; | |
| 41 for (var i = 0; i < count; i++) { | |
| 42 mean += array[i]; | |
| 43 } | |
| 44 mean /= count; | |
| 45 var variance = 0; | |
| 46 for (var i = 0; i < count; i++) { | |
| 47 var deviation = mean - array[i]; | |
| 48 variance = variance + deviation * deviation; | |
| 49 } | |
| 50 variance = variance / (count - 1); | |
| 51 return Math.sqrt(variance); | |
| 52 } | |
| 53 | |
| 54 function handleFileSelect(evt) { | |
| 55 var files = evt.target.files; | |
| 56 for (var i = 0, f; f = files[i]; i++) { | |
| 57 var reader = new FileReader(); | |
| 58 reader.onload = function(evt) { | |
| 59 document.getElementById("testurl").value = evt.target.result; | |
| 60 } | |
| 61 reader.readAsText(f); | |
| 62 }; | |
| 63 } | |
| 64 | |
| 65 var THTAG = "th"; | |
| 66 var TDTAG = "td"; | |
| 67 var NONE_DISPLAY = "none"; | |
| 68 var CELL_DISPLAY = "table-cell"; | |
| 69 var BRIEF_VIEW = "Show More Details"; | |
| 70 var FULL_VIEW = "Hide Details"; | |
| 71 | |
| 72 // Expand or shrink the result table. | |
| 73 // Called when clicking button "Show More Details/Hide Details". | |
| 74 function expand() { | |
| 75 if (document.getElementById("expand").value == BRIEF_VIEW) { | |
| 76 // From biref view to detailed view. | |
| 77 var headers = document.getElementsByTagName(THTAG); | |
| 78 var cells = document.getElementsByTagName(TDTAG); | |
| 79 | |
| 80 // Display the hidden metrics (both headers and data cells). | |
| 81 for (var i = 0; i < headers.length; i++) { | |
| 82 if (headers[i].style.display == NONE_DISPLAY) { | |
| 83 headers[i].style.display = CELL_DISPLAY; | |
| 84 } | |
| 85 } | |
| 86 | |
| 87 for (i = 0; i < cells.length; i++) { | |
| 88 if (cells[i].style.display == NONE_DISPLAY) { | |
| 89 cells[i].style.display = CELL_DISPLAY; | |
| 90 } | |
| 91 } | |
| 92 | |
| 93 document.getElementById("expand").value = FULL_VIEW; | |
| 94 } else { | |
| 95 // From detailed view to brief view. | |
| 96 var headers = document.getElementsByTagName(THTAG); | |
| 97 var cells = document.getElementsByTagName(TDTAG); | |
| 98 | |
| 99 // Hide some metrics. | |
| 100 for (var i = 0; i < headers.length; i++) { | |
| 101 if (headers[i].style.display == CELL_DISPLAY) { | |
| 102 headers[i].style.display = NONE_DISPLAY; | |
| 103 } | |
| 104 } | |
| 105 | |
| 106 for (i = 0; i < cells.length; i++) { | |
| 107 if (cells[i].style.display == CELL_DISPLAY) { | |
| 108 cells[i].style.display = NONE_DISPLAY; | |
| 109 } | |
| 110 } | |
| 111 | |
| 112 document.getElementById("expand").value = BRIEF_VIEW; | |
| 113 } | |
| 114 | |
| 115 // Use cookie to store current expand/hide status. | |
| 116 var lastValue = document.getElementById("expand").value; | |
| 117 document.cookie = "lastValue=" + lastValue; | |
| 118 } | |
| 119 | |
| 120 // Reloading the page causes table to shrink (default original status). | |
| 121 // Cookie remembers last status of table (in terms of expanded or shrunk). | |
| 122 function restoreTable() { | |
| 123 if (document.cookie == "lastValue=Hide Details") { | |
| 124 var headers = document.getElementsByTagName(THTAG); | |
| 125 var cells = document.getElementsByTagName(TDTAG); | |
| 126 | |
| 127 for (var i = 0; i < headers.length; i++) { | |
| 128 if (headers[i].style.display == NONE_DISPLAY) { | |
| 129 headers[i].style.display = CELL_DISPLAY; | |
| 130 } | |
| 131 } | |
| 132 for (i = 0; i < cells.length; i++) { | |
| 133 if (cells[i].style.display == NONE_DISPLAY) { | |
| 134 cells[i].style.display = CELL_DISPLAY; | |
| 135 } | |
| 136 } | |
| 137 document.getElementById("expand").value = FULL_VIEW; | |
| 138 } | |
| 139 } | |
| 140 | |
| 141 // A class to store the data to plot. | |
| 142 function PData() { | |
| 143 this.xAxis = "Iteration(s)"; | |
| 144 this.yAxis = ""; | |
| 145 this.A = []; // Two data sets for comparison. | |
| 146 this.B = []; | |
| 147 this.avgA = []; // Avg value is plotted as a line. | |
| 148 this.avgB = []; | |
| 149 this.maxA = 0; | |
| 150 this.maxB = 0; | |
| 151 this.countA = 0; // Size of the data sets. | |
| 152 this.countB = 0; | |
| 153 | |
| 154 this.setYAxis = function(str) { | |
| 155 this.yAxis = str; | |
| 156 } | |
| 157 | |
| 158 this.setAvg = function(arr, cha) { | |
| 159 if (cha == 'A') { | |
| 160 var avgA = Array.avg(arr); | |
| 161 for (var i = 1; i <= this.countA; i++) { | |
| 162 this.avgA.push([i, avgA]); | |
| 163 } | |
| 164 } else if (cha == 'B') { | |
| 165 var avgB = Array.avg(arr); | |
| 166 for (var i = 1; i <= this.countB; i++) { | |
| 167 this.avgB.push([i, avgB]); | |
| 168 } | |
| 169 } | |
| 170 } | |
| 171 | |
| 172 this.setMax = function(arr, cha) { | |
| 173 if (cha == 'A') { | |
| 174 this.maxA = Array.max(arr); | |
| 175 } else if (cha == 'B') { | |
| 176 this.maxB = Array.max(arr); | |
| 177 } | |
| 178 } | |
| 179 | |
| 180 // Add an entry to the array. | |
| 181 this.addArr = function(val, cha) { | |
| 182 if (cha == 'A') { | |
| 183 this.countA++; | |
| 184 this.A.push([this.countA, val]); | |
| 185 } else if (cha == 'B') { | |
| 186 this.countB++; | |
| 187 this.B.push([this.countB, val]); | |
| 188 } | |
| 189 } | |
| 190 | |
| 191 // Plot the graph at the specified place. | |
| 192 this.plot = function(placeholder) { | |
| 193 $.plot(placeholder, | |
| 194 [// Line A | |
| 195 { | |
| 196 data: this.A, | |
| 197 label: "A's " + this.yAxis + " in " + this.countA + " " + this.xAxis, | |
| 198 points: { | |
| 199 show: true | |
| 200 }, | |
| 201 lines: { | |
| 202 show: true | |
| 203 } | |
| 204 }, | |
| 205 | |
| 206 // Line B | |
| 207 { | |
| 208 data: this.B, | |
| 209 label: "B's " + this.yAxis + " in " + this.countB + " " + this.xAxis, | |
| 210 points: { | |
| 211 show: true | |
| 212 }, | |
| 213 lines: { | |
| 214 show: true | |
| 215 } | |
| 216 }, | |
| 217 | |
| 218 // Line avgA | |
| 219 { | |
| 220 data: this.avgA, | |
| 221 label: "A's avg " + this.yAxis, | |
| 222 dashes: { | |
| 223 show: true | |
| 224 } | |
| 225 }, | |
| 226 | |
| 227 // Line avgB | |
| 228 { | |
| 229 data: this.avgB, | |
| 230 label: "B's avg " + this.yAxis, | |
| 231 dashes: { | |
| 232 show: true | |
| 233 } | |
| 234 }], | |
| 235 | |
| 236 // Axis and legend setup. | |
| 237 { xaxis: { | |
| 238 max: this.countA > this.countB ? this.countA : this.countB, | |
| 239 tickSize: 1, | |
| 240 tickDecimals: 0 | |
| 241 }, | |
| 242 yaxis: { | |
| 243 // Leave some space for legend. | |
| 244 max: this.maxA > this.maxB ? this.maxA * 1.5 : this.maxB * 1.5 | |
| 245 }, | |
| 246 legend: { | |
| 247 backgroundOpacity: 0 | |
| 248 } | |
| 249 }); | |
| 250 } | |
| 251 } | |
| 252 | |
| 253 // Compare the selected metric of the two selected data sets. | |
| 254 function compare() { | |
| 255 var checkboxArr = document.getElementsByName("checkboxArr"); | |
| 256 var radioArr = document.getElementsByName("radioArr"); | |
| 257 | |
| 258 if (checkAmount(checkboxArr) != 2) { | |
| 259 alert("please select two rows to compare"); | |
| 260 return; | |
| 261 } | |
| 262 | |
| 263 var rowIndexArr = getSelectedIndex(checkboxArr); | |
| 264 var colIndexArr = getSelectedIndex(radioArr); | |
| 265 // To this point, it is for sure that rowIndexArr has two elements | |
| 266 // while colIndexArr has one. | |
| 267 var selectedRowA = rowIndexArr[0]; | |
| 268 var selectedRowB = rowIndexArr[1]; | |
| 269 var selectedCol = colIndexArr[0]; | |
| 270 | |
| 271 var extension = chrome.extension.getBackgroundPage(); | |
| 272 var data = extension.results.data; | |
| 273 var selectedA = getSelectedResults(data,selectedRowA,selectedCol); | |
| 274 var selectedB = getSelectedResults(data,selectedRowB,selectedCol); | |
| 275 var yAxis = getMetricName(selectedCol); | |
| 276 | |
| 277 // Indicate A and B on selected rows. | |
| 278 checkboxArr[selectedRowA].parentElement.firstChild.data = "A"; | |
| 279 checkboxArr[selectedRowB].parentElement.firstChild.data = "B"; | |
| 280 | |
| 281 plot(selectedA, selectedB, yAxis); | |
| 282 } | |
| 283 | |
| 284 // Show the comparison graph. | |
| 285 function plot(A, B, axis) { | |
| 286 var plotData = new PData(); | |
| 287 | |
| 288 plotData.setYAxis(axis); | |
| 289 for (var i = 0; i < A.length; i++) { | |
| 290 plotData.addArr(A[i],'A'); | |
| 291 } | |
| 292 for (var i = 0; i < B.length; i++) { | |
| 293 plotData.addArr(B[i],'B'); | |
| 294 } | |
| 295 plotData.setAvg(A,'A'); | |
| 296 plotData.setAvg(B,'B'); | |
| 297 plotData.setMax(A,'A'); | |
| 298 plotData.setMax(B,'B'); | |
| 299 | |
| 300 var placeholder = document.getElementById("placeholder"); | |
| 301 placeholder.style.display = ""; | |
| 302 plotData.plot(placeholder); | |
| 303 } | |
| 304 | |
| 305 var METRIC = {"STARTLOAD": 0, "COMMITLOAD": 1, "DOCLOAD": 2, "PAINT": 3, | |
| 306 "TOTAL": 4, "REQUESTS": 5, "CONNECTS": 6, "READKB": 7, | |
| 307 "WRITEKB": 8, "READKBPS": 9, "WRITEKBPS": 10}; | |
| 308 | |
| 309 // Retrieve the metric name from index. | |
| 310 function getMetricName(index) { | |
| 311 switch (index) { | |
| 312 case METRIC.STARTLOAD: | |
| 313 return "Start Load Time"; | |
| 314 case METRIC.COMMITLOAD: | |
| 315 return "Commit Load Time"; | |
| 316 case METRIC.DOCLOAD: | |
| 317 return "Doc Load Time"; | |
| 318 case METRIC.PAINT: | |
| 319 return "Paint Time"; | |
| 320 case METRIC.TOTAL: | |
| 321 return "Total Load Time"; | |
| 322 case METRIC.REQUESTS: | |
| 323 return "# Requests"; | |
| 324 case METRIC.CONNECTS: | |
| 325 return "# Connects"; | |
| 326 case METRIC.READKB: | |
| 327 return "Read KB"; | |
| 328 case METRIC.WRITEKB: | |
| 329 return "Write KB"; | |
| 330 case METRIC.READKBPS: | |
| 331 return "Read KBps"; | |
| 332 case METRIC.WRITEKBPS: | |
| 333 return "Write KBps"; | |
| 334 default: | |
| 335 return ""; | |
| 336 } | |
| 337 } | |
| 338 | |
| 339 // Get the results with a specific row (data set) and column (metric). | |
| 340 function getSelectedResults(arr, rowIndex, colIndex) { | |
| 341 switch (colIndex) { | |
| 342 case METRIC.STARTLOAD: | |
| 343 return arr[rowIndex].startLoadResults; | |
| 344 case METRIC.COMMITLOAD: | |
| 345 return arr[rowIndex].commitLoadResults; | |
| 346 case METRIC.DOCLOAD: | |
| 347 return arr[rowIndex].docLoadResults; | |
| 348 case METRIC.PAINT: | |
| 349 return arr[rowIndex].paintResults; | |
| 350 case METRIC.TOTAL: | |
| 351 return arr[rowIndex].totalResults; | |
| 352 case METRIC.REQUESTS: | |
| 353 return arr[rowIndex].requests; | |
| 354 case METRIC.CONNECTS: | |
| 355 return arr[rowIndex].connects; | |
| 356 case METRIC.READKB: | |
| 357 return arr[rowIndex].KbytesRead; | |
| 358 case METRIC.WRITEKB: | |
| 359 return arr[rowIndex].KbytesWritten; | |
| 360 case METRIC.READKBPS: | |
| 361 return arr[rowIndex].readbpsResults; | |
| 362 case METRIC.WRITEKBPS: | |
| 363 return arr[rowIndex].writebpsResults; | |
| 364 default: | |
| 365 return undefined; | |
| 366 } | |
| 367 } | |
| 368 | |
| 369 // Ensure only two data sets (rows) are selected. | |
| 370 function checkAmount(arr) { | |
| 371 var amount = 0; | |
| 372 for (var i = 0; i < arr.length; i++) { | |
| 373 if (arr[i].checked) { | |
| 374 amount++; | |
| 375 } | |
| 376 } | |
| 377 return amount; | |
| 378 } | |
| 379 | |
| 380 // Get the index of selected row or column. | |
| 381 function getSelectedIndex(arr) { | |
| 382 var selectedArr = new Array(); | |
| 383 for (var i = 0; i < arr.length; i++) { | |
| 384 if(arr[i].checked) { | |
| 385 selectedArr.push(i); | |
| 386 } | |
| 387 } | |
| 388 return selectedArr; | |
| 389 } | |
| 390 | |
| 391 // Repaint or hide the chart. | |
| 392 function updateChart(caller) { | |
| 393 var placeholder = document.getElementById("placeholder"); | |
| 394 if (caller.type == "radio") { | |
| 395 // Other radio button is clicked. | |
| 396 if (placeholder.style.display == "") { | |
| 397 compare(); | |
| 398 } | |
| 399 } else { | |
| 400 // Other checkbox or clearing results is clicked. | |
| 401 if (placeholder.style.display == "") { | |
| 402 placeholder.style.display = "none"; | |
| 403 } | |
| 404 } | |
| 405 } | |
| 406 | |
| 407 // Clear indicators besides checkbox. | |
| 408 function clearIndicator() { | |
| 409 var checkboxArr = document.getElementsByName("checkboxArr"); | |
| 410 for (var i = 0; i < checkboxArr.length; i++) { | |
| 411 checkboxArr[i].parentElement.firstChild.data = ""; | |
| 412 } | |
| 413 } | |
| 414 | |
| 415 // Enable/Disable buttons according to checkbox change. | |
| 416 function checkSelected() { | |
| 417 var checkboxArr = document.getElementsByName("checkboxArr"); | |
| 418 if (checkAmount(checkboxArr) !=0) { | |
| 419 document.getElementById("clearSelected").disabled = false; | |
| 420 document.getElementById("compare").disabled = false; | |
| 421 } else { | |
| 422 document.getElementById("clearSelected").disabled = true; | |
| 423 document.getElementById("compare").disabled = true; | |
| 424 } | |
| 425 } | |
| 426 | |
| 427 // Object to summarize everything | |
| 428 var totals = {}; | |
| 429 | |
| 430 // Compute the results for a data set. | |
| 431 function computeDisplayResults(data) { | |
| 432 var count = data.data.length; | |
| 433 for (var i = 0; i < count; i++) { | |
| 434 var obj = data.data[i]; | |
| 435 obj.displayTime = setDisplayTime(obj.timestamp); | |
| 436 var resultList = obj.totalResults; | |
| 437 obj.mean = Array.avg(resultList); | |
| 438 obj.stddev = Array.stddev(resultList); | |
| 439 obj.stderr = obj.stddev / Math.sqrt(obj.iterations); | |
| 440 var ci = 1.96 * obj.stderr; | |
| 441 obj.cihigh = obj.mean + ci; | |
| 442 obj.cilow = obj.mean - ci; | |
| 443 obj.min = Array.min(resultList); | |
| 444 obj.max = Array.max(resultList); | |
| 445 obj.readbps = Array.avg(obj.readbpsResults); | |
| 446 obj.writebps = Array.avg(obj.writebpsResults); | |
| 447 obj.readKB = Array.avg(obj.KbytesRead); | |
| 448 obj.writeKB = Array.avg(obj.KbytesWritten); | |
| 449 obj.paintMean = Array.avg(obj.paintResults); | |
| 450 obj.startLoadMean = Array.avg(obj.startLoadResults); | |
| 451 obj.commitLoadMean = Array.avg(obj.commitLoadResults); | |
| 452 obj.docLoadMean = Array.avg(obj.docLoadResults); | |
| 453 | |
| 454 obj.displayRequests = Array.avg(obj.requests); | |
| 455 obj.displayConnects = Array.avg(obj.connects); | |
| 456 obj.displaySpdySessions = Array.avg(obj.spdySessions); | |
| 457 | |
| 458 obj.displayDomNum = obj.domNum; | |
| 459 obj.displayMaxDepth = obj.maxDepth; | |
| 460 obj.displayMinDepth = obj.minDepth; | |
| 461 obj.displayAvgDepth = obj.avgDepth; | |
| 462 } | |
| 463 return count; | |
| 464 } | |
| 465 | |
| 466 // Convert timestamp to readable string. | |
| 467 function setDisplayTime(ts) { | |
| 468 var year = ts.getFullYear(); | |
| 469 var mon = ts.getMonth()+1; | |
| 470 var date = ts.getDate(); | |
| 471 var hrs = ts.getHours(); | |
| 472 var mins = ts.getMinutes(); | |
| 473 var secs = ts.getSeconds(); | |
| 474 | |
| 475 mon = ( mon < 10 ? "0" : "" ) + mon; | |
| 476 date = ( date < 10 ? "0" : "" ) + date; | |
| 477 mins = ( mins < 10 ? "0" : "" ) + mins; | |
| 478 secs = ( secs < 10 ? "0" : "" ) + secs; | |
| 479 | |
| 480 return (year + "/" + mon + "/" + date + " " + hrs + ":" + mins + ":" + secs); | |
| 481 } | |
| 482 | |
| 483 // Subtract the results from two data sets. | |
| 484 // This function could be smarter about what it subtracts, | |
| 485 // for now it just subtracts everything. | |
| 486 // Returns true if it was able to compare the two data sets. | |
| 487 function subtractData(data, baseline) { | |
| 488 var count = data.data.length; | |
| 489 if (baseline.data.length != count) { | |
| 490 return false; | |
| 491 } | |
| 492 for (var i = 0; i < count; i++) { | |
| 493 var obj = data.data[i]; | |
| 494 var obj2 = baseline.data[i]; | |
| 495 | |
| 496 // The data sets are different. | |
| 497 if (obj.url != obj2.url || | |
| 498 obj.iterations != obj2.iterations) { | |
| 499 return false; | |
| 500 } | |
| 501 | |
| 502 obj.mean -= obj2.mean; | |
| 503 obj.stddev -= obj2.stddev; | |
| 504 obj.min -= obj2.min; | |
| 505 obj.max -= obj2.max; | |
| 506 obj.readbps -= obj2.readbps; | |
| 507 obj.writebps -= obj2.writebps; | |
| 508 obj.readKB -= obj2.readKB; | |
| 509 obj.writeKB -= obj2.writeKB; | |
| 510 obj.paintMean -= obj2.paintMean; | |
| 511 obj.startLoadMean -= obj2.startLoadMean; | |
| 512 obj.commitLoadMean -= obj2.commitLoadMean; | |
| 513 obj.docLoadMean -= obj2.docLoadMean; | |
| 514 | |
| 515 obj.displayRequests -= obj2.displayRequests; | |
| 516 obj.displayConnects -= obj2.displayConnects; | |
| 517 obj.displaySpdySessions -= obj2.displaySpdySessions; | |
| 518 } | |
| 519 return true; | |
| 520 } | |
| 521 | |
| 522 // Compute totals based on a data set. | |
| 523 function computeTotals(data) { | |
| 524 var count = data.data.length; | |
| 525 for (var i = 0; i < count; i++) { | |
| 526 var obj = data.data[i]; | |
| 527 totals.mean += obj.mean; | |
| 528 totals.paintMean += obj.paintMean; | |
| 529 totals.startLoadMean += obj.startLoadMean; | |
| 530 totals.commitLoadMean += obj.commitLoadMean; | |
| 531 totals.docLoadMean += obj.docLoadMean; | |
| 532 } | |
| 533 } | |
| 534 | |
| 535 // Compute results for the data with an optional baseline. | |
| 536 // If |baseline| is undefined, will compute the results of this | |
| 537 // run. Otherwise, computes the diff between this data and the baseline. | |
| 538 function computeResults(data, baseline) { | |
| 539 totals = {}; | |
| 540 totals.mean = 0; | |
| 541 totals.paintMean = 0; | |
| 542 totals.startLoadMean = 0; | |
| 543 totals.commitLoadMean = 0; | |
| 544 totals.docLoadMean = 0; | |
| 545 | |
| 546 var count = computeDisplayResults(data); | |
| 547 | |
| 548 if (baseline) { | |
| 549 computeDisplayResults(baseline); | |
| 550 if (!subtractData(data, baseline)) { | |
| 551 alert("These data sets are different"); | |
| 552 document.getElementById("baseline").value = ""; | |
| 553 return; | |
| 554 } | |
| 555 } | |
| 556 | |
| 557 computeTotals(data); | |
| 558 totals.url = "(" + count + " urls)"; | |
| 559 if (count > 0) { | |
| 560 totals.mean /= count; | |
| 561 totals.paintMean /= count; | |
| 562 totals.startLoadMean /= count; | |
| 563 totals.commitLoadMean /= count; | |
| 564 totals.docLoadMean /= count; | |
| 565 } | |
| 566 | |
| 567 // Find the biggest average for our bar graph. | |
| 568 max_sample = 0; | |
| 569 for (var i = 0; i < data.data.length; i++) { | |
| 570 if (data.data[i].max > max_sample) { | |
| 571 max_sample = data.data[i].mean; | |
| 572 } | |
| 573 } | |
| 574 } | |
| 575 | |
| 576 function jsinit() { | |
| 577 var extension = chrome.extension.getBackgroundPage(); | |
| 578 | |
| 579 // Run the template to show results | |
| 580 var data = extension.results; | |
| 581 | |
| 582 // Get the baseline results | |
| 583 var elt = document.getElementById("baseline"); | |
| 584 var baseline_json = document.getElementById("baseline").value; | |
| 585 var baseline; | |
| 586 if (baseline_json) { | |
| 587 try { | |
| 588 baseline = JSON.parse(baseline_json); | |
| 589 } catch (e) { | |
| 590 alert("JSON parse error: " + e); | |
| 591 } | |
| 592 } | |
| 593 | |
| 594 // Compute | |
| 595 computeResults(data, baseline); | |
| 596 | |
| 597 var context = new JsEvalContext(data); | |
| 598 context.setVariable('$width', 0); | |
| 599 context.setVariable('$samples', 0); | |
| 600 var template = document.getElementById("t"); | |
| 601 jstProcess(context, template); | |
| 602 | |
| 603 // Set the options | |
| 604 document.getElementById("iterations").value = extension.iterations; | |
| 605 document.getElementById("clearconns").checked = extension.clearConnections; | |
| 606 document.getElementById("clearcache").checked = extension.clearCache; | |
| 607 document.getElementById("enablespdy").checked = extension.enableSpdy; | |
| 608 setUrl(extension.testUrl); | |
| 609 | |
| 610 if (!baseline) { | |
| 611 var json_data = JSON.stringify(data); | |
| 612 document.getElementById("json").value = json_data; | |
| 613 } | |
| 614 | |
| 615 // Activate loading Urls from local file. | |
| 616 document.getElementById('files').addEventListener('change', | |
| 617 handleFileSelect, false); | |
| 618 } | |
| 619 | |
| 620 function getWidth(mean, obj) { | |
| 621 var kMinWidth = 200; | |
| 622 var max_width = obj.offsetWidth; | |
| 623 if (max_width < kMinWidth) { | |
| 624 max_width = kMinWidth; | |
| 625 } | |
| 626 return Math.floor(max_width * (mean / max_sample)); | |
| 627 } | |
| 628 | |
| 629 // Apply configuration back to our extension | |
| 630 function config() { | |
| 631 var extension = chrome.extension.getBackgroundPage(); | |
| 632 var iterations = parseInt(document.getElementById("iterations").value); | |
| 633 var clearConnections = document.getElementById("clearconns").checked; | |
| 634 var clearCache = document.getElementById("clearcache").checked; | |
| 635 var enableSpdy = document.getElementById("enablespdy").checked; | |
| 636 if (iterations > 0) { | |
| 637 extension.iterations = iterations; | |
| 638 extension.clearConnections = clearConnections; | |
| 639 extension.clearCache = clearCache; | |
| 640 extension.enableSpdy = enableSpdy; | |
| 641 } | |
| 642 } | |
| 643 | |
| 644 // Set the url in the benchmark url box. | |
| 645 function setUrl(url) { | |
| 646 document.getElementById("testurl").value = url; | |
| 647 } | |
| 648 | |
| 649 // Start the benchmark. | |
| 650 function run() { | |
| 651 if (!chrome.benchmarking) { | |
| 652 alert("Warning: Looks like you forgot to run chrome with " + | |
| 653 " --enable-benchmarking set."); | |
| 654 return; | |
| 655 } | |
| 656 var extension = chrome.extension.getBackgroundPage(); | |
| 657 var testUrl = document.getElementById("testurl").value; | |
| 658 extension.testUrl = testUrl; | |
| 659 extension.run(); | |
| 660 } | |
| 661 | |
| 662 function showConfirm() { | |
| 663 var r = confirm("Are you sure to clear results?"); | |
| 664 if (r) { | |
| 665 // Find out the event source element. | |
| 666 var evtSrc = window.event.srcElement; | |
| 667 if (evtSrc.value == "Clear Selected") { | |
| 668 clearSelected(); | |
| 669 } else if (evtSrc.value == "Clear All") { | |
| 670 clearResults(); | |
| 671 } | |
| 672 } | |
| 673 } | |
| 674 | |
| 675 // Clear the selected results | |
| 676 function clearSelected() { | |
| 677 var extension = chrome.extension.getBackgroundPage(); | |
| 678 var checkboxArr = document.getElementsByName("checkboxArr"); | |
| 679 var rowIndexArr = getSelectedIndex(checkboxArr); | |
| 680 var currIndex; | |
| 681 for (var i = 0; i < rowIndexArr.length; i++) { | |
| 682 currIndex = rowIndexArr[i]; | |
| 683 // Update the index of the original row in the modified array. | |
| 684 currIndex -= i; | |
| 685 extension.results.data.splice(currIndex, 1); | |
| 686 document.location.reload(true); | |
| 687 updateChart(this); | |
| 688 jsinit(); | |
| 689 } | |
| 690 } | |
| 691 | |
| 692 // Clear all the results | |
| 693 function clearResults() { | |
| 694 var extension = chrome.extension.getBackgroundPage(); | |
| 695 extension.results = {}; | |
| 696 extension.results.data = new Array(); | |
| 697 document.getElementById("json").value = ""; | |
| 698 document.getElementById("baseline").value = ""; | |
| 699 updateChart(this); | |
| 700 jsinit(); | |
| 701 } | |
| 702 | |
| 703 // Export html table into CSV format. | |
| 704 function exportHtml() { | |
| 705 var checkboxArr = document.getElementsByName("checkboxArr"); | |
| 706 var rowNum = checkboxArr.length + 1; // # of data rows plus total-stats row. | |
| 707 $('#t').table2CSV(rowNum); | |
| 708 } | |
| 709 | |
| 710 // Toggle display of an element | |
| 711 function toggle(id) { | |
| 712 var elt = document.getElementById(id); | |
| 713 if (elt.style.display == "none") { | |
| 714 elt.style.display = "block"; | |
| 715 } else { | |
| 716 elt.style.display = "none"; | |
| 717 } | |
| 718 } | |
| 719 | |
| 720 document.addEventListener("DOMContentLoaded", function() { | |
| 721 jsinit(); | |
| 722 restoreTable(); | |
| 723 | |
| 724 document.querySelector('form').addEventListener('click', function() { | |
| 725 config(); | |
| 726 run(); | |
| 727 }); | |
| 728 $('#expand')[0].addEventListener('click', function() { expand(); }); | |
| 729 $('#clearSelected')[0].addEventListener('click', | |
| 730 function() { showConfirm(); }); | |
| 731 $('#clearAll')[0].addEventListener('click', function() { showConfirm(); }); | |
| 732 $('#exportCsv')[0].addEventListener('click', function() { exportHtml(); }); | |
| 733 var checkboxArrs = document.getElementsByName('checkboxArr'); | |
| 734 for (var i = 0; i < checkboxArrs.length; ++i) { | |
| 735 checkboxArrs[i].addEventListener('click', function() { | |
| 736 updateChart(this); | |
| 737 clearIndicator(); | |
| 738 checkSelected(); | |
| 739 }); | |
| 740 } | |
| 741 var radioArrs = document.getElementsByName('radioArr'); | |
| 742 for (i = 0; i < radioArrs.length; ++i) { | |
| 743 radioArrs[i].addEventListener('click', function() { updateChart(this); }); | |
| 744 } | |
| 745 $('#compare')[0].addEventListener('click', function() { compare(); }); | |
| 746 $('#toggle-json')[0].addEventListener('click', | |
| 747 function() { toggle('json'); }); | |
| 748 $('#toggle-baseline')[0].addEventListener('click', | |
| 749 function() { toggle('baseline'); }); | |
| 750 $('#baseline')[0].addEventListener('change', function() { jsinit(); }); | |
| 751 }); | |
| OLD | NEW |