| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <title>Telemetry Performance Test Results</title> | 4 <title>Telemetry Performance Test Results</title> |
| 5 <style type="text/css"> | 5 <style type="text/css"> |
| 6 | 6 |
| 7 section { | 7 section { |
| 8 background: white; | 8 background: white; |
| 9 padding: 10px; | 9 padding: 10px; |
| 10 position: relative; | 10 position: relative; |
| (...skipping 231 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 242 } | 242 } |
| 243 | 243 |
| 244 .closeAllButton:hover { | 244 .closeAllButton:hover { |
| 245 background: #f04040; | 245 background: #f04040; |
| 246 } | 246 } |
| 247 | 247 |
| 248 </style> | 248 </style> |
| 249 </head> | 249 </head> |
| 250 <body onload="init()"> | 250 <body onload="init()"> |
| 251 <div style="padding: 0 10px; white-space: nowrap;"> | 251 <div style="padding: 0 10px; white-space: nowrap;"> |
| 252 Result <span id="time-memory" class="checkbox"><span class="checked">Time</span>
<span>Memory</span></span> | 252 Result <span id="time-memory" class="checkbox"></span> |
| 253 Reference <span id="reference" class="checkbox"></span> | 253 Reference <span id="reference" class="checkbox"></span> |
| 254 Style <span id="scatter-line" class="checkbox"><span class="checked">Scatter</sp
an><span>Line</span></span> | 254 Style <span id="scatter-line" class="checkbox"><span class="checked">Scatter</sp
an><span>Line</span></span> |
| 255 <span class="checkbox"><span class="checked" id="undelete">Undelete</span></span
><br> | 255 <span class="checkbox"><span class="checked" id="undelete">Undelete</span></span
><br> |
| 256 Run your test with --reset-results to clear all runs | 256 Run your test with --reset-results to clear all runs |
| 257 </div> | 257 </div> |
| 258 <table id="container"></table> | 258 <table id="container"></table> |
| 259 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"><
/script> | 259 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"><
/script> |
| 260 <script> | 260 <script> |
| 261 %plugins% | 261 %plugins% |
| 262 </script> | 262 </script> |
| 263 <script> | 263 <script> |
| 264 | 264 |
| 265 var EXPANDED = true; | 265 var EXPANDED = true; |
| 266 var COLLAPSED = false; | 266 var COLLAPSED = false; |
| 267 var SMALLEST_PERCENT_DISPLAYED = 0.01; | 267 var SMALLEST_PERCENT_DISPLAYED = 0.01; |
| 268 var INVISIBLE = false; | 268 var INVISIBLE = false; |
| 269 var VISIBLE = true; | 269 var VISIBLE = true; |
| 270 var COMPARISON_SUFFIX = '_compare'; | 270 var COMPARISON_SUFFIX = '_compare'; |
| 271 var SORT_DOWN_CLASS = 'sortDown'; | 271 var SORT_DOWN_CLASS = 'sortDown'; |
| 272 var SORT_UP_CLASS = 'sortUp'; | 272 var SORT_UP_CLASS = 'sortUp'; |
| 273 var BETTER_CLASS = 'better'; | 273 var BETTER_CLASS = 'better'; |
| 274 var WORSE_CLASS = 'worse'; | 274 var WORSE_CLASS = 'worse'; |
| 275 var UNKNOWN_CLASS = 'unknown' | 275 var UNKNOWN_CLASS = 'unknown' |
| 276 // px Indentation for graphs | 276 // px Indentation for graphs |
| 277 var GRAPH_INDENT = 64; | 277 var GRAPH_INDENT = 64; |
| 278 var PADDING_UNDER_GRAPH = 5; | 278 var PADDING_UNDER_GRAPH = 5; |
| 279 // px Indentation for nested children left-margins | 279 // px Indentation for nested children left-margins |
| 280 var INDENTATION = 40; | 280 var INDENTATION = 40; |
| 281 // Bit field enums for active test types | |
| 282 var MEMORY_TEST = 1 << 0; | |
| 283 var TIME_TEST = 1 << 1; | |
| 284 var NO_TESTS = 0; | |
| 285 var ALL_TESTS = MEMORY_TEST | TIME_TEST; | |
| 286 | 281 |
| 287 function TestResult(metric, values, associatedRun, std, degreesOfFreedom) { | 282 function TestResult(metric, values, associatedRun, std, degreesOfFreedom) { |
| 288 if (values) { | 283 if (values) { |
| 289 if (values[0] instanceof Array) { | 284 if (values[0] instanceof Array) { |
| 290 var flattenedValues = []; | 285 var flattenedValues = []; |
| 291 for (var i = 0; i < values.length; i++) | 286 for (var i = 0; i < values.length; i++) |
| 292 flattenedValues = flattenedValues.concat(values[i]); | 287 flattenedValues = flattenedValues.concat(values[i]); |
| 293 values = flattenedValues; | 288 values = flattenedValues; |
| 294 } | 289 } |
| 295 | 290 |
| (...skipping 16 matching lines...) Expand all Loading... |
| 312 } | 307 } |
| 313 } | 308 } |
| 314 catch (e) { | 309 catch (e) { |
| 315 console.error(e, e.stack); | 310 console.error(e, e.stack); |
| 316 } | 311 } |
| 317 } | 312 } |
| 318 } else { | 313 } else { |
| 319 values = []; | 314 values = []; |
| 320 } | 315 } |
| 321 | 316 |
| 322 this.test = function () { return metric; } | 317 this.test = function() { return metric; } |
| 323 this.values = function () { return values.map(function (value) { return metr
ic.scalingFactor() * value; }); } | 318 this.values = function() { return values.map(function(value) { return metric
.scalingFactor() * value; }); } |
| 324 this.unscaledMean = function () { return Statistics.sum(values) / values.len
gth; } | 319 this.unscaledMean = function() { return Statistics.sum(values) / values.leng
th; } |
| 325 this.mean = function () { return metric.scalingFactor() * this.unscaledMean(
); } | 320 this.mean = function() { return metric.scalingFactor() * this.unscaledMean()
; } |
| 326 this.min = function () { return metric.scalingFactor() * Statistics.min(valu
es); } | 321 this.min = function() { return metric.scalingFactor() * Statistics.min(value
s); } |
| 327 this.max = function () { return metric.scalingFactor() * Statistics.max(valu
es); } | 322 this.max = function() { return metric.scalingFactor() * Statistics.max(value
s); } |
| 328 this.confidenceIntervalDelta = function () { | 323 this.confidenceIntervalDelta = function() { |
| 329 if (std !== undefined) { | 324 if (std !== undefined) { |
| 330 return metric.scalingFactor() * Statistics.confidenceIntervalDeltaFr
omStd(0.95, values.length, | 325 return metric.scalingFactor() * Statistics.confidenceIntervalDeltaFr
omStd(0.95, values.length, |
| 331 std, degreesOfFreedom); | 326 std, degreesOfFreedom); |
| 332 } | 327 } |
| 333 return metric.scalingFactor() * Statistics.confidenceIntervalDelta(0.95,
values.length, | 328 return metric.scalingFactor() * Statistics.confidenceIntervalDelta(0.95,
values.length, |
| 334 Statistics.sum(values), Statistics.squareSum(values)); | 329 Statistics.sum(values), Statistics.squareSum(values)); |
| 335 } | 330 } |
| 336 this.confidenceIntervalDeltaRatio = function () { return this.confidenceInte
rvalDelta() / this.mean(); } | 331 this.confidenceIntervalDeltaRatio = function() { return this.confidenceInter
valDelta() / this.mean(); } |
| 337 this.percentDifference = function(other) { | 332 this.percentDifference = function(other) { |
| 338 if (other === undefined) { | 333 if (other === undefined) { |
| 339 return undefined; | 334 return undefined; |
| 340 } | 335 } |
| 341 return (other.unscaledMean() - this.unscaledMean()) / this.unscaledMean(
); | 336 return (other.unscaledMean() - this.unscaledMean()) / this.unscaledMean(
); |
| 342 } | 337 } |
| 343 this.isStatisticallySignificant = function (other) { | 338 this.isStatisticallySignificant = function(other) { |
| 344 if (other === undefined) { | 339 if (other === undefined) { |
| 345 return false; | 340 return false; |
| 346 } | 341 } |
| 347 var diff = Math.abs(other.mean() - this.mean()); | 342 var diff = Math.abs(other.mean() - this.mean()); |
| 348 return diff > this.confidenceIntervalDelta() && diff > other.confidenceI
ntervalDelta(); | 343 return diff > this.confidenceIntervalDelta() && diff > other.confidenceI
ntervalDelta(); |
| 349 } | 344 } |
| 350 this.run = function () { return associatedRun; } | 345 this.run = function() { return associatedRun; } |
| 351 } | 346 } |
| 352 | 347 |
| 353 function TestRun(entry) { | 348 function TestRun(entry) { |
| 354 this.id = function() { return entry['buildTime'].replace(/[:.-]/g,''); } | 349 this.id = function() { return entry['buildTime'].replace(/[:.-]/g,''); } |
| 355 this.label = function () { | 350 this.label = function() { |
| 356 if (labelKey in localStorage) | 351 if (labelKey in localStorage) |
| 357 return localStorage[labelKey]; | 352 return localStorage[labelKey]; |
| 358 return entry['label']; | 353 return entry['label']; |
| 359 } | 354 } |
| 360 this.setLabel = function(label) { localStorage[labelKey] = label; } | 355 this.setLabel = function(label) { localStorage[labelKey] = label; } |
| 361 this.isHidden = function() { return localStorage[hiddenKey]; } | 356 this.isHidden = function() { return localStorage[hiddenKey]; } |
| 362 this.hide = function() { localStorage[hiddenKey] = true; } | 357 this.hide = function() { localStorage[hiddenKey] = true; } |
| 363 this.show = function() { localStorage.removeItem(hiddenKey); } | 358 this.show = function() { localStorage.removeItem(hiddenKey); } |
| 364 this.description = function() { | 359 this.description = function() { |
| 365 return new Date(entry['buildTime']).toLocaleString() + '\n' + entry['pla
tform'] + ' ' + this.label(); | 360 return new Date(entry['buildTime']).toLocaleString() + '\n' + entry['pla
tform'] + ' ' + this.label(); |
| (...skipping 22 matching lines...) Expand all Loading... |
| 388 cachedUnit = 'M ' + unit; | 383 cachedUnit = 'M ' + unit; |
| 389 } else if (mean > 10 * kilo) { | 384 } else if (mean > 10 * kilo) { |
| 390 cachedScalingFactor = 1 / kilo; | 385 cachedScalingFactor = 1 / kilo; |
| 391 cachedUnit = unit == 'ms' ? 's' : ('K ' + unit); | 386 cachedUnit = unit == 'ms' ? 's' : ('K ' + unit); |
| 392 } else { | 387 } else { |
| 393 cachedScalingFactor = 1; | 388 cachedScalingFactor = 1; |
| 394 cachedUnit = unit; | 389 cachedUnit = unit; |
| 395 } | 390 } |
| 396 } | 391 } |
| 397 | 392 |
| 398 this.name = function () { return name + ':' + metric; } | 393 this.name = function() { return name + ':' + metric; } |
| 399 this.isImportant = isImportant; | 394 this.isImportant = isImportant; |
| 400 this.isMemoryTest = function () { | 395 this.isMemoryTest = function() { |
| 401 return (unit == 'kb' || | 396 return (unit == 'kb' || |
| 402 unit == 'KB' || | 397 unit == 'KB' || |
| 403 unit == 'MB' || | 398 unit == 'MB' || |
| 404 unit == 'bytes' || | 399 unit == 'bytes' || |
| 405 unit == 'count' || | 400 unit == 'count' || |
| 406 !metric.indexOf('V8.')); | 401 !metric.indexOf('V8.')); |
| 407 } | 402 } |
| 408 this.addResult = function (newResult) { | 403 this.addResult = function(newResult) { |
| 409 testResults.push(newResult); | 404 testResults.push(newResult); |
| 410 cachedUnit = null; | 405 cachedUnit = null; |
| 411 cachedScalingFactor = null; | 406 cachedScalingFactor = null; |
| 412 } | 407 } |
| 413 this.results = function () { return testResults; } | 408 this.results = function() { return testResults; } |
| 414 this.scalingFactor = function() { | 409 this.scalingFactor = function() { |
| 415 computeScalingFactorIfNeeded(); | 410 computeScalingFactorIfNeeded(); |
| 416 return cachedScalingFactor; | 411 return cachedScalingFactor; |
| 417 } | 412 } |
| 418 this.unit = function () { | 413 this.unit = function() { |
| 419 computeScalingFactorIfNeeded(); | 414 computeScalingFactorIfNeeded(); |
| 420 return cachedUnit; | 415 return cachedUnit; |
| 421 } | 416 } |
| 422 this.biggerIsBetter = function () { | 417 this.biggerIsBetter = function() { |
| 423 if (window.unitToBiggerIsBetter == undefined) { | 418 if (window.unitToBiggerIsBetter == undefined) { |
| 424 window.unitToBiggerIsBetter = {}; | 419 window.unitToBiggerIsBetter = {}; |
| 425 var units = JSON.parse(document.getElementById('units-json').textCon
tent); | 420 var units = JSON.parse(document.getElementById('units-json').textCon
tent); |
| 426 for (var u in units) { | 421 for (var u in units) { |
| 427 if (units[u].improvement_direction == 'up') { | 422 if (units[u].improvement_direction == 'up') { |
| 428 window.unitToBiggerIsBetter[u] = true; | 423 window.unitToBiggerIsBetter[u] = true; |
| 429 } | 424 } |
| 430 } | 425 } |
| 431 } | 426 } |
| 432 return window.unitToBiggerIsBetter[unit]; | 427 return window.unitToBiggerIsBetter[unit]; |
| (...skipping 96 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 529 section.children('.plot').css({'width': (100 * test.results().length + 2
5) + 'px', 'height': '300px'}); | 524 section.children('.plot').css({'width': (100 * test.results().length + 2
5) + 'px', 'height': '300px'}); |
| 530 $(container).append(section); | 525 $(container).append(section); |
| 531 | 526 |
| 532 var plotContainer = section.children('.plot'); | 527 var plotContainer = section.children('.plot'); |
| 533 var minIsZero = true; | 528 var minIsZero = true; |
| 534 attachPlot(test, plotContainer, minIsZero); | 529 attachPlot(test, plotContainer, minIsZero); |
| 535 | 530 |
| 536 attachLinePlots(test, section.children('.line-plots'), useLargeLinePlots
); | 531 attachLinePlots(test, section.children('.line-plots'), useLargeLinePlots
); |
| 537 | 532 |
| 538 var tooltip = section.children('.tooltip'); | 533 var tooltip = section.children('.tooltip'); |
| 539 plotContainer.bind('plothover', function (event, position, item) { | 534 plotContainer.bind('plothover', function(event, position, item) { |
| 540 if (item) { | 535 if (item) { |
| 541 var postfix = item.series.id ? ' (' + item.series.id + ')' : ''; | 536 var postfix = item.series.id ? ' (' + item.series.id + ')' : ''; |
| 542 tooltip.html(item.datapoint[1].toPrecision(4) + postfix); | 537 tooltip.html(item.datapoint[1].toPrecision(4) + postfix); |
| 543 var sectionOffset = $(section).offset(); | 538 var sectionOffset = $(section).offset(); |
| 544 tooltip.css({left: item.pageX - sectionOffset.left - tooltip.out
erWidth() / 2, top: item.pageY - sectionOffset.top + 10}); | 539 tooltip.css({left: item.pageX - sectionOffset.left - tooltip.out
erWidth() / 2, top: item.pageY - sectionOffset.top + 10}); |
| 545 tooltip.fadeIn(200); | 540 tooltip.fadeIn(200); |
| 546 } else | 541 } else |
| 547 tooltip.hide(); | 542 tooltip.hide(); |
| 548 }); | 543 }); |
| 549 plotContainer.mouseout(function () { | 544 plotContainer.mouseout(function() { |
| 550 tooltip.hide(); | 545 tooltip.hide(); |
| 551 }); | 546 }); |
| 552 plotContainer.click(function (event) { | 547 plotContainer.click(function(event) { |
| 553 event.preventDefault(); | 548 event.preventDefault(); |
| 554 minIsZero = !minIsZero; | 549 minIsZero = !minIsZero; |
| 555 attachPlot(test, plotContainer, minIsZero); | 550 attachPlot(test, plotContainer, minIsZero); |
| 556 }); | 551 }); |
| 557 } | 552 } |
| 558 return section; | 553 return section; |
| 559 } | 554 } |
| 560 | 555 |
| 561 function attachLinePlots(test, container, useLargeLinePlots) { | 556 function attachLinePlots(test, container, useLargeLinePlots) { |
| 562 var results = test.results(); | 557 var results = test.results(); |
| (...skipping 22 matching lines...) Expand all Loading... |
| 585 var options = $.extend(true, {}, largeLinePlotOptions, | 580 var options = $.extend(true, {}, largeLinePlotOptions, |
| 586 {yaxis: {min: 0.0, max: maximum}, | 581 {yaxis: {min: 0.0, max: maximum}, |
| 587 xaxis: {min: 0.0, max: values.length - 1}, | 582 xaxis: {min: 0.0, max: values.length - 1}, |
| 588 points: {show: (values.length < 2) ? true : fals
e}}); | 583 points: {show: (values.length < 2) ? true : fals
e}}); |
| 589 } else { | 584 } else { |
| 590 var options = $.extend(true, {}, linePlotOptions, | 585 var options = $.extend(true, {}, linePlotOptions, |
| 591 {yaxis: {min: Math.min.apply(Math, values) * 0.9,
max: Math.max.apply(Math, values) * 1.1}, | 586 {yaxis: {min: Math.min.apply(Math, values) * 0.9,
max: Math.max.apply(Math, values) * 1.1}, |
| 592 xaxis: {min: -0.5, max: values.length - 0.5}, | 587 xaxis: {min: -0.5, max: values.length - 0.5}, |
| 593 points: {show: (values.length < 2) ? true : fals
e}}); | 588 points: {show: (values.length < 2) ? true : fals
e}}); |
| 594 } | 589 } |
| 595 $.plot(container.children().last(), [values.map(function (value, index)
{ return [index, value]; })], options); | 590 $.plot(container.children().last(), [values.map(function(value, index) {
return [index, value]; })], options); |
| 596 } | 591 } |
| 597 if (!attachedPlot) | 592 if (!attachedPlot) |
| 598 container.children().remove(); | 593 container.children().remove(); |
| 599 } | 594 } |
| 600 | 595 |
| 601 function attachHistogramPlots(test, container) { | 596 function attachHistogramPlots(test, container) { |
| 602 var results = test.results(); | 597 var results = test.results(); |
| 603 var attachedPlot = false; | 598 var attachedPlot = false; |
| 604 | 599 |
| 605 for (var i = 0; i < results.length; i++) { | 600 for (var i = 0; i < results.length; i++) { |
| (...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 645 var results = test.results(); | 640 var results = test.results(); |
| 646 var attachedPlot = false; | 641 var attachedPlot = false; |
| 647 for (var i = 0; i < results.length; i++) { | 642 for (var i = 0; i < results.length; i++) { |
| 648 container.append('<div>' + results[i].run().label() + '</div>'); | 643 container.append('<div>' + results[i].run().label() + '</div>'); |
| 649 } | 644 } |
| 650 } | 645 } |
| 651 | 646 |
| 652 function attachPlot(test, plotContainer, minIsZero) { | 647 function attachPlot(test, plotContainer, minIsZero) { |
| 653 var results = test.results(); | 648 var results = test.results(); |
| 654 | 649 |
| 655 var values = results.reduce(function (values, result, index) { | 650 var values = results.reduce(function(values, result, index) { |
| 656 var newValues = result.values(); | 651 var newValues = result.values(); |
| 657 return newValues ? values.concat(newValues.map(function (value) { return
[index, value]; })) : values; | 652 return newValues ? values.concat(newValues.map(function(value) { return
[index, value]; })) : values; |
| 658 }, []); | 653 }, []); |
| 659 | 654 |
| 660 var plotData = [$.extend(true, {}, subpointsPlotOptions, {data: values})]; | 655 var plotData = [$.extend(true, {}, subpointsPlotOptions, {data: values})]; |
| 661 plotData.push({id: 'μ', data: results.map(function (result, index) { retu
rn [index, result.mean()]; }), color: plotColor}); | 656 plotData.push({id: 'μ', data: results.map(function(result, index) { retur
n [index, result.mean()]; }), color: plotColor}); |
| 662 | 657 |
| 663 var overallMax = Statistics.max(results.map(function (result, index) { retur
n result.max(); })); | 658 var overallMax = Statistics.max(results.map(function(result, index) { return
result.max(); })); |
| 664 var overallMin = Statistics.min(results.map(function (result, index) { retur
n result.min(); })); | 659 var overallMin = Statistics.min(results.map(function(result, index) { return
result.min(); })); |
| 665 var margin = (overallMax - overallMin) * 0.1; | 660 var margin = (overallMax - overallMin) * 0.1; |
| 666 var currentPlotOptions = $.extend(true, {}, mainPlotOptions, {yaxis: { | 661 var currentPlotOptions = $.extend(true, {}, mainPlotOptions, {yaxis: { |
| 667 min: minIsZero ? 0 : overallMin - margin, | 662 min: minIsZero ? 0 : overallMin - margin, |
| 668 max: minIsZero ? overallMax * 1.1 : overallMax + margin}}); | 663 max: minIsZero ? overallMax * 1.1 : overallMax + margin}}); |
| 669 | 664 |
| 670 currentPlotOptions.xaxis.max = results.length - 0.5; | 665 currentPlotOptions.xaxis.max = results.length - 0.5; |
| 671 currentPlotOptions.xaxis.ticks = results.map(function (result, index) { retu
rn [index, result.run().label()]; }); | 666 currentPlotOptions.xaxis.ticks = results.map(function(result, index) { retur
n [index, result.run().label()]; }); |
| 672 | 667 |
| 673 $.plot(plotContainer, plotData, currentPlotOptions); | 668 $.plot(plotContainer, plotData, currentPlotOptions); |
| 674 } | 669 } |
| 675 | 670 |
| 676 function toFixedWidthPrecision(value) { | 671 function toFixedWidthPrecision(value) { |
| 677 var decimal = value.toFixed(2); | 672 var decimal = value.toFixed(2); |
| 678 return decimal; | 673 return decimal; |
| 679 } | 674 } |
| 680 | 675 |
| 681 function formatPercentage(fraction) { | 676 function formatPercentage(fraction) { |
| 682 var percentage = fraction * 100; | 677 var percentage = fraction * 100; |
| 683 return (fraction * 100).toFixed(2) + '%'; | 678 return (fraction * 100).toFixed(2) + '%'; |
| 684 } | 679 } |
| 685 | 680 |
| 686 function setUpSortClicks(runs) | 681 function setUpSortClicks(runs) |
| 687 { | 682 { |
| 688 $('#nameColumn').click(sortByName); | 683 $('#nameColumn').click(sortByName); |
| 689 | 684 |
| 690 $('#unitColumn').click(sortByUnit); | 685 $('#unitColumn').click(sortByUnit); |
| 691 | 686 |
| 692 runs.forEach(function(run) { | 687 runs.forEach(function(run) { |
| 693 $('#' + run.id()).click(sortByResult); | 688 $('#' + run.id()).click(sortByResult); |
| 694 $('#' + run.id() + COMPARISON_SUFFIX).click(sortByReference); | 689 $('#' + run.id() + COMPARISON_SUFFIX).click(sortByReference); |
| 695 }); | 690 }); |
| 696 } | 691 } |
| 697 | 692 |
| 698 function getTestTypes(tests) { | 693 function TestTypeSelector(tests) { |
| 699 var testTypes = NO_TESTS; | 694 this.recognizers = { |
| 700 for (testName in tests) { | 695 'Time': function(test) { return test.isMemoryTest(); }, |
| 701 if (tests[testName].isMemoryTest()) { | 696 'Memory': function(test) { return !test.isMemoryTest(); } |
| 702 testTypes |= MEMORY_TEST; | 697 }; |
| 703 } else { | 698 this.testTypeNames = this.generateUsedTestTypeNames(tests); |
| 704 testTypes |= TIME_TEST; | 699 // Default to selecting the first test-type name in the list. |
| 705 } | 700 this.testTypeName = this.testTypeNames[0]; |
| 706 if (testTypes === ALL_TESTS) { | |
| 707 // Early out as soon as we've found all the test types. | |
| 708 break; | |
| 709 } | |
| 710 } | |
| 711 return testTypes; | |
| 712 } | |
| 713 | |
| 714 function areMemoryResultsIgnoredForTestTypes(testTypes) { | |
| 715 return testTypes !== MEMORY_TEST; | |
| 716 } | 701 } |
| 717 | 702 |
| 718 function setUpUIForTestTypes(testTypes) { | 703 TestTypeSelector.prototype = { |
| 719 var withFirstTestTypeRemoved = testTypes & (testTypes-1); | 704 set testTypeName(testTypeName) { |
| 720 if (withFirstTestTypeRemoved === NO_TESTS) { | 705 this._testTypeName = testTypeName; |
| 721 // Hide button when there are zero or one test types. | 706 this.shouldShowTest = this.recognizers[testTypeName]; |
| 722 document.getElementById('time-memory').style.display = 'none'; | 707 }, |
| 708 |
| 709 generateUsedTestTypeNames: function(allTests) { |
| 710 var testTypeNames = []; |
| 711 |
| 712 for (var recognizedTestName in this.recognizers) { |
| 713 var recognizes = this.recognizers[recognizedTestName]; |
| 714 for (var testName in allTests) { |
| 715 var test = allTests[testName]; |
| 716 if (recognizes(test)) { |
| 717 testTypeNames.push(recognizedTestName); |
| 718 break; |
| 719 } |
| 720 } |
| 721 } |
| 722 |
| 723 if (testTypeNames.length === 0) { |
| 724 // No test types we recognize, add 'No Results' with a dummy recogni
zer. |
| 725 var noResults = 'No Results'; |
| 726 this.recognizers[noResults] = function() { return false; }; |
| 727 testTypeNames.push(noResults); |
| 728 } else if (testTypeNames.length > 1) { |
| 729 // We have more than one test type, so add 'All' with a recognizer t
hat always succeeds. |
| 730 var allResults = 'All'; |
| 731 this.recognizers[allResults] = function() { return true; }; |
| 732 testTypeNames.push(allResults); |
| 733 } |
| 734 |
| 735 return testTypeNames; |
| 736 }, |
| 737 |
| 738 buildButtonHTMLForUsedTestTypes: function() { |
| 739 var selectedTestTypeName = this._testTypeName; |
| 740 // Build spans for all recognised test names with the selected test high
lighted. |
| 741 return this.testTypeNames.map(function(testTypeName) { |
| 742 var classAttribute = testTypeName === selectedTestTypeName ? ' class
=checked' : ''; |
| 743 return '<span' + classAttribute + '>' + testTypeName + '</span>'; |
| 744 }).join(''); |
| 723 } | 745 } |
| 724 } | 746 }; |
| 725 | 747 |
| 726 var topLevelRows; | 748 var topLevelRows; |
| 727 var allTableRows; | 749 var allTableRows; |
| 728 | 750 |
| 729 function createTable(tests, runs, shouldIgnoreMemory, referenceIndex, useLargeLi
nePlots) { | 751 function displayTable(tests, runs, testTypeSelector, referenceIndex, useLargeLin
ePlots) { |
| 730 var resultHeaders = runs.map(function (run, index) { | 752 var resultHeaders = runs.map(function(run, index) { |
| 731 var header = '<th id="' + run.id() + '" ' + | 753 var header = '<th id="' + run.id() + '" ' + |
| 732 'colspan=2 ' + | 754 'colspan=2 ' + |
| 733 'title="' + run.description() + '">' + | 755 'title="' + run.description() + '">' + |
| 734 '<span class="label" ' + | 756 '<span class="label" ' + |
| 735 'title="Edit run label">' + | 757 'title="Edit run label">' + |
| 736 run.label() + | 758 run.label() + |
| 737 '</span>' + | 759 '</span>' + |
| 738 '<div class="closeButton" ' + | 760 '<div class="closeButton" ' + |
| 739 'title="Delete run">' + | 761 'title="Delete run">' + |
| 740 '×' + | 762 '×' + |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 775 | 797 |
| 776 $('#container').html(htmlString); | 798 $('#container').html(htmlString); |
| 777 | 799 |
| 778 var testNames = []; | 800 var testNames = []; |
| 779 for (testName in tests) | 801 for (testName in tests) |
| 780 testNames.push(testName); | 802 testNames.push(testName); |
| 781 | 803 |
| 782 allTableRows = []; | 804 allTableRows = []; |
| 783 testNames.forEach(function(testName) { | 805 testNames.forEach(function(testName) { |
| 784 var test = tests[testName]; | 806 var test = tests[testName]; |
| 785 if (test.isMemoryTest() === shouldIgnoreMemory) { | 807 if (testTypeSelector.shouldShowTest(test)) { |
| 786 return; | 808 allTableRows.push(new TableRow(runs, test, referenceIndex, useLargeL
inePlots)); |
| 787 } | 809 } |
| 788 allTableRows.push(new TableRow(runs, test, referenceIndex, useLargeLineP
lots)); | |
| 789 }); | 810 }); |
| 790 | 811 |
| 791 // Build a list of top level rows with attached children | 812 // Build a list of top level rows with attached children |
| 792 topLevelRows = []; | 813 topLevelRows = []; |
| 793 allTableRows.forEach(function(row) { | 814 allTableRows.forEach(function(row) { |
| 794 // Add us to top level if we are a top-level row... | 815 // Add us to top level if we are a top-level row... |
| 795 if (row.hasNoURL) { | 816 if (row.hasNoURL) { |
| 796 topLevelRows.push(row); | 817 topLevelRows.push(row); |
| 797 // Add a duplicate child row that holds the graph for the parent | 818 // Add a duplicate child row that holds the graph for the parent |
| 798 var graphHolder = new TableRow(runs, row.test, referenceIndex, useLa
rgeLinePlots); | 819 var graphHolder = new TableRow(runs, row.test, referenceIndex, useLa
rgeLinePlots); |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 854 $('#labelEditor').focusout(function() { | 875 $('#labelEditor').focusout(function() { |
| 855 runs[i].setLabel(this.value); | 876 runs[i].setLabel(this.value); |
| 856 location.reload(); | 877 location.reload(); |
| 857 }); | 878 }); |
| 858 $('#labelEditor').keypress(function(event) { | 879 $('#labelEditor').keypress(function(event) { |
| 859 if (event.which == 13) { | 880 if (event.which == 13) { |
| 860 runs[i].setLabel(this.value); | 881 runs[i].setLabel(this.value); |
| 861 location.reload(); | 882 location.reload(); |
| 862 } | 883 } |
| 863 }); | 884 }); |
| 864 $('#labelEditor').click(function (event) { | 885 $('#labelEditor').click(function(event) { |
| 865 event.stopPropagation(); | 886 event.stopPropagation(); |
| 866 }); | 887 }); |
| 867 $('#labelEditor').mousedown(function (event) { | 888 $('#labelEditor').mousedown(function(event) { |
| 868 event.stopPropagation(); | 889 event.stopPropagation(); |
| 869 }); | 890 }); |
| 870 $('#labelEditor').select(); | 891 $('#labelEditor').select(); |
| 871 break; | 892 break; |
| 872 } | 893 } |
| 873 } | 894 } |
| 874 event.stopPropagation(); | 895 event.stopPropagation(); |
| 875 }); | 896 }); |
| 876 } | 897 } |
| 877 | 898 |
| (...skipping 491 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1369 } else { | 1390 } else { |
| 1370 this.openRow(); | 1391 this.openRow(); |
| 1371 } | 1392 } |
| 1372 return false; | 1393 return false; |
| 1373 } | 1394 } |
| 1374 | 1395 |
| 1375 function init() { | 1396 function init() { |
| 1376 var runs = []; | 1397 var runs = []; |
| 1377 var metrics = {}; | 1398 var metrics = {}; |
| 1378 var deletedRunsById = {}; | 1399 var deletedRunsById = {}; |
| 1379 $.each(JSON.parse(document.getElementById('results-json').textContent), func
tion (index, entry) { | 1400 $.each(JSON.parse(document.getElementById('results-json').textContent), func
tion(index, entry) { |
| 1380 var run = new TestRun(entry); | 1401 var run = new TestRun(entry); |
| 1381 if (run.isHidden()) { | 1402 if (run.isHidden()) { |
| 1382 deletedRunsById[run.id()] = run; | 1403 deletedRunsById[run.id()] = run; |
| 1383 return; | 1404 return; |
| 1384 } | 1405 } |
| 1385 | 1406 |
| 1386 runs.push(run); | 1407 runs.push(run); |
| 1387 | 1408 |
| 1388 function addTests(tests) { | 1409 function addTests(tests) { |
| 1389 for (var testName in tests) { | 1410 for (var testName in tests) { |
| (...skipping 11 matching lines...) Expand all Loading... |
| 1401 new TestResult(metric, rawMetrics[metricName].current, | 1422 new TestResult(metric, rawMetrics[metricName].current, |
| 1402 run, rawMetrics[metricName]['std'], rawMetrics[metri
cName]['degrees_of_freedom'])); | 1423 run, rawMetrics[metricName]['std'], rawMetrics[metri
cName]['degrees_of_freedom'])); |
| 1403 } | 1424 } |
| 1404 } | 1425 } |
| 1405 } | 1426 } |
| 1406 | 1427 |
| 1407 addTests(entry.tests); | 1428 addTests(entry.tests); |
| 1408 }); | 1429 }); |
| 1409 | 1430 |
| 1410 var useLargeLinePlots = false; | 1431 var useLargeLinePlots = false; |
| 1411 | |
| 1412 var testTypes = getTestTypes(metrics); | |
| 1413 | |
| 1414 setUpUIForTestTypes(testTypes); | |
| 1415 var shouldIgnoreMemory = areMemoryResultsIgnoredForTestTypes(testTypes); | |
| 1416 var referenceIndex = 0; | 1432 var referenceIndex = 0; |
| 1417 | 1433 |
| 1418 createTable(metrics, runs, shouldIgnoreMemory, referenceIndex, useLargeLineP
lots); | 1434 var testTypeSelector = new TestTypeSelector(metrics); |
| 1435 var buttonHTML = testTypeSelector.buildButtonHTMLForUsedTestTypes(); |
| 1436 $('#time-memory').append(buttonHTML); |
| 1419 | 1437 |
| 1420 $('#time-memory').bind('change', function (event, checkedElement) { | 1438 $('#scatter-line').bind('change', function(event, checkedElement) { |
| 1421 shouldIgnoreMemory = checkedElement.textContent == 'Time'; | 1439 useLargeLinePlots = checkedElement.textContent == 'Line'; |
| 1422 createTable(metrics, runs, shouldIgnoreMemory, referenceIndex, useLargeL
inePlots); | 1440 displayTable(metrics, runs, testTypeSelector, referenceIndex, useLargeLi
nePlots); |
| 1423 }); | 1441 }); |
| 1424 | 1442 |
| 1425 $('#scatter-line').bind('change', function (event, checkedElement) { | 1443 runs.map(function(run, index) { |
| 1426 useLargeLinePlots = checkedElement.textContent == 'Line'; | |
| 1427 createTable(metrics, runs, shouldIgnoreMemory, referenceIndex, useLargeL
inePlots); | |
| 1428 }); | |
| 1429 | |
| 1430 runs.map(function (run, index) { | |
| 1431 $('#reference').append('<span value="' + index + '"' + (index == referen
ceIndex ? ' class="checked"' : '') + ' title="' + run.description() + '">' + run
.label() + '</span>'); | 1444 $('#reference').append('<span value="' + index + '"' + (index == referen
ceIndex ? ' class="checked"' : '') + ' title="' + run.description() + '">' + run
.label() + '</span>'); |
| 1432 }) | 1445 }) |
| 1433 | 1446 |
| 1434 $('#reference').bind('change', function (event, checkedElement) { | 1447 $('#time-memory').bind('change', function(event, checkedElement) { |
| 1435 referenceIndex = parseInt(checkedElement.getAttribute('value')); | 1448 testTypeSelector.testTypeName = checkedElement.textContent; |
| 1436 createTable(metrics, runs, shouldIgnoreMemory, referenceIndex, useLargeL
inePlots); | 1449 displayTable(metrics, runs, testTypeSelector, referenceIndex, useLargeLi
nePlots); |
| 1437 }); | 1450 }); |
| 1438 | 1451 |
| 1439 $('.checkbox').each(function (index, checkbox) { | 1452 $('#reference').bind('change', function(event, checkedElement) { |
| 1440 $(checkbox).children('span').click(function (event) { | 1453 referenceIndex = parseInt(checkedElement.getAttribute('value')); |
| 1454 displayTable(metrics, runs, testTypeSelector, referenceIndex, useLargeLi
nePlots); |
| 1455 }); |
| 1456 |
| 1457 displayTable(metrics, runs, testTypeSelector, referenceIndex, useLargeLinePl
ots); |
| 1458 |
| 1459 $('.checkbox').each(function(index, checkbox) { |
| 1460 $(checkbox).children('span').click(function(event) { |
| 1441 if ($(this).hasClass('checked')) | 1461 if ($(this).hasClass('checked')) |
| 1442 return; | 1462 return; |
| 1443 $(checkbox).children('span').removeClass('checked'); | 1463 $(checkbox).children('span').removeClass('checked'); |
| 1444 $(this).addClass('checked'); | 1464 $(this).addClass('checked'); |
| 1445 $(checkbox).trigger('change', $(this)); | 1465 $(checkbox).trigger('change', $(this)); |
| 1446 }); | 1466 }); |
| 1447 }); | 1467 }); |
| 1448 | 1468 |
| 1449 runToUndelete = deletedRunsById[undeleteManager.mostRecentlyDeletedId()]; | 1469 runToUndelete = deletedRunsById[undeleteManager.mostRecentlyDeletedId()]; |
| 1450 | 1470 |
| 1451 if (runToUndelete) { | 1471 if (runToUndelete) { |
| 1452 $('#undelete').html('Undelete ' + runToUndelete.label()); | 1472 $('#undelete').html('Undelete ' + runToUndelete.label()); |
| 1453 $('#undelete').attr('title', runToUndelete.description()); | 1473 $('#undelete').attr('title', runToUndelete.description()); |
| 1454 $('#undelete').click(function (event) { | 1474 $('#undelete').click(function(event) { |
| 1455 runToUndelete.show(); | 1475 runToUndelete.show(); |
| 1456 undeleteManager.undeleteMostRecent(); | 1476 undeleteManager.undeleteMostRecent(); |
| 1457 location.reload(); | 1477 location.reload(); |
| 1458 }); | 1478 }); |
| 1459 } else { | 1479 } else { |
| 1460 $('#undelete').hide(); | 1480 $('#undelete').hide(); |
| 1461 } | 1481 } |
| 1462 } | 1482 } |
| 1463 | 1483 |
| 1464 </script> | 1484 </script> |
| 1465 <script id="results-json" type="application/json">%json_results%</script> | 1485 <script id="results-json" type="application/json">%json_results%</script> |
| 1466 <script id="units-json" type="application/json">%json_units%</script> | 1486 <script id="units-json" type="application/json">%json_units%</script> |
| 1467 </body> | 1487 </body> |
| 1468 </html> | 1488 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1523743002:
[Telemetry] 'Time'/'Memory' buttons added to results.html dynamically for available result types. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master