Html程序
|
1489行
|
46.46 KB
<!DOCTYPE html>
<html>
<head>
<title>Telemetry Performance Test Results</title>
<style type="text/css">
section {
background: white;
padding: 10px;
position: relative;
}
.collapsed:before {
color: #ccc;
content: '\25B8\00A0';
}
.expanded:before {
color: #eee;
content: '\25BE\00A0';
}
.line-plots {
padding-left: 25px;
}
.line-plots > div {
display: inline-block;
width: 90px;
height: 40px;
margin-right: 10px;
}
.lage-line-plots {
padding-left: 25px;
}
.large-line-plots > div, .histogram-plots > div {
display: inline-block;
width: 400px;
height: 200px;
margin-right: 10px;
}
.large-line-plot-labels > div, .histogram-plot-labels > div {
display: inline-block;
width: 400px;
height: 11px;
margin-right: 10px;
color: #545454;
text-align: center;
font-size: 11px;
}
.closeButton {
display: inline-block;
background: #eee;
background: linear-gradient(rgb(220, 220, 220), rgb(255, 255, 255));
border: inset 1px #ddd;
border-radius: 4px;
float: right;
font-size: small;
-webkit-user-select: none;
font-weight: bold;
padding: 1px 4px;
}
.closeButton:hover {
background: #F09C9C;
}
.label {
cursor: text;
}
.label:hover {
background: #ffcc66;
}
section h1 {
text-align: center;
font-size: 1em;
}
section .tooltip {
position: absolute;
text-align: center;
background: #ffcc66;
border-radius: 5px;
padding: 0px 5px;
}
body {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
table {
background: white;
width: 100%;
}
table, td, th {
border-collapse: collapse;
padding: 5px;
white-space: nowrap;
}
.highlight:hover {
color: #202020;
background: #e0e0e0;
}
.nestedRow {
background: #f8f8f8;
}
.importantNestedRow {
background: #e0e0e0;
font-weight: bold;
}
table td {
position: relative;
}
th, td {
cursor: pointer;
cursor: hand;
}
th {
background: #e6eeee;
background: linear-gradient(rgb(244, 244, 244), rgb(217, 217, 217));
border: 1px solid #ccc;
}
th.sortUp:after {
content: ' \25BE';
}
th.sortDown:after {
content: ' \25B4';
}
td.comparison, td.result {
text-align: right;
}
td.better {
color: #6c6;
}
td.fadeOut {
opacity: 0.5;
}
td.unknown {
color: #ccc;
}
td.worse {
color: #c66;
}
td.reference {
font-style: italic;
font-weight: bold;
color: #444;
}
td.missing {
color: #ccc;
text-align: center;
}
td.missingReference {
color: #ccc;
text-align: center;
font-style: italic;
}
.checkbox {
display: inline-block;
background: #eee;
background: linear-gradient(rgb(220, 220, 220), rgb(200, 200, 200));
border: inset 1px #ddd;
border-radius: 5px;
margin: 10px;
font-size: small;
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
font-weight: bold;
}
.checkbox span {
display: inline-block;
line-height: 100%;
padding: 5px 8px;
border: outset 1px transparent;
}
.checkbox .checked {
background: #e6eeee;
background: linear-gradient(rgb(255, 255, 255), rgb(235, 235, 235));
border: outset 1px #eee;
border-radius: 5px;
}
.openAllButton {
display: inline-block;
colour: #6c6
background: #eee;
background: linear-gradient(rgb(220, 220, 220), rgb(255, 255, 255));
border: inset 1px #ddd;
border-radius: 5px;
float: left;
font-size: small;
-webkit-user-select: none;
font-weight: bold;
padding: 1px 4px;
}
.openAllButton:hover {
background: #60f060;
}
.closeAllButton {
display: inline-block;
colour: #c66
background: #eee;
background: linear-gradient(rgb(220, 220, 220),rgb(255, 255, 255));
border: inset 1px #ddd;
border-radius: 5px;
float: left;
font-size: small;
-webkit-user-select: none;
font-weight: bold;
padding: 1px 4px;
}
.closeAllButton:hover {
background: #f04040;
}
</style>
</head>
<body onload="init()">
<div style="padding: 0 10px; white-space: nowrap;">
Result <span id="time-memory" class="checkbox"></span>
Reference <span id="reference" class="checkbox"></span>
Style <span id="scatter-line" class="checkbox"><span class="checked">Scatter</span><span>Line</span></span>
<span class="checkbox"><span class="checked" id="undelete">Undelete</span></span><br>
Run your test with --reset-results to clear all runs
</div>
<table id="container"></table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
%plugins%
</script>
<script>
var EXPANDED = true;
var COLLAPSED = false;
var SMALLEST_PERCENT_DISPLAYED = 0.01;
var INVISIBLE = false;
var VISIBLE = true;
var COMPARISON_SUFFIX = '_compare';
var SORT_DOWN_CLASS = 'sortDown';
var SORT_UP_CLASS = 'sortUp';
var BETTER_CLASS = 'better';
var WORSE_CLASS = 'worse';
var UNKNOWN_CLASS = 'unknown'
// px Indentation for graphs
var GRAPH_INDENT = 64;
var PADDING_UNDER_GRAPH = 5;
// px Indentation for nested children left-margins
var INDENTATION = 40;
function TestResult(metric, values, associatedRun, std, degreesOfFreedom) {
if (values) {
if (values[0] instanceof Array) {
var flattenedValues = [];
for (var i = 0; i < values.length; i++)
flattenedValues = flattenedValues.concat(values[i]);
values = flattenedValues;
}
if (jQuery.type(values[0]) === 'string') {
try {
var current = JSON.parse(values[0]);
if (current.params.type === 'HISTOGRAM') {
this.histogramValues = current;
// Histogram results have no values (per se). Instead we calculate
// the values from the histogram bins.
var values = [];
var buckets = current.buckets
for (var i = 0; i < buckets.length; i++) {
var bucket = buckets[i];
var bucket_mean = (bucket.high + bucket.low) / 2;
for (var b = 0; b < bucket.count; b++) {
values.push(bucket_mean);
}
}
}
}
catch (e) {
console.error(e, e.stack);
}
}
} else {
values = [];
}
this.test = function() { return metric; }
this.values = function() { return values.map(function(value) { return metric.scalingFactor() * value; }); }
this.unscaledMean = function() { return Statistics.sum(values) / values.length; }
this.mean = function() { return metric.scalingFactor() * this.unscaledMean(); }
this.min = function() { return metric.scalingFactor() * Statistics.min(values); }
this.max = function() { return metric.scalingFactor() * Statistics.max(values); }
this.confidenceIntervalDelta = function() {
if (std !== undefined) {
return metric.scalingFactor() * Statistics.confidenceIntervalDeltaFromStd(0.95, values.length,
std, degreesOfFreedom);
}
return metric.scalingFactor() * Statistics.confidenceIntervalDelta(0.95, values.length,
Statistics.sum(values), Statistics.squareSum(values));
}
this.confidenceIntervalDeltaRatio = function() { return this.confidenceIntervalDelta() / this.mean(); }
this.percentDifference = function(other) {
if (other === undefined) {
return undefined;
}
return (other.unscaledMean() - this.unscaledMean()) / this.unscaledMean();
}
this.isStatisticallySignificant = function(other) {
if (other === undefined) {
return false;
}
var diff = Math.abs(other.mean() - this.mean());
return diff > this.confidenceIntervalDelta() && diff > other.confidenceIntervalDelta();
}
this.run = function() { return associatedRun; }
}
function TestRun(entry) {
this.id = function() { return entry['buildTime'].replace(/[:.-]/g,''); }
this.label = function() {
if (labelKey in localStorage)
return localStorage[labelKey];
return entry['label'];
}
this.setLabel = function(label) { localStorage[labelKey] = label; }
this.isHidden = function() { return localStorage[hiddenKey]; }
this.hide = function() { localStorage[hiddenKey] = true; }
this.show = function() { localStorage.removeItem(hiddenKey); }
this.description = function() {
return new Date(entry['buildTime']).toLocaleString() + '\n' + entry['platform'] + ' ' + this.label();
}
var labelKey = 'telemetry_label_' + this.id();
var hiddenKey = 'telemetry_hide_' + this.id();
}
function PerfTestMetric(name, metric, unit, isImportant) {
var testResults = [];
var cachedUnit = null;
var cachedScalingFactor = null;
// We can't do this in TestResult because all results for each test need to share the same unit and the same scaling factor.
function computeScalingFactorIfNeeded() {
// FIXME: We shouldn't be adjusting units on every test result.
// We can only do this on the first test.
if (!testResults.length || cachedUnit)
return;
var mean = testResults[0].unscaledMean(); // FIXME: We should look at all values.
var kilo = unit == 'bytes' ? 1024 : 1000;
if (mean > 10 * kilo * kilo && unit != 'ms') {
cachedScalingFactor = 1 / kilo / kilo;
cachedUnit = 'M ' + unit;
} else if (mean > 10 * kilo) {
cachedScalingFactor = 1 / kilo;
cachedUnit = unit == 'ms' ? 's' : ('K ' + unit);
} else {
cachedScalingFactor = 1;
cachedUnit = unit;
}
}
this.name = function() { return name + ':' + metric; }
this.isImportant = isImportant;
this.isMemoryTest = function() {
return (unit == 'kb' ||
unit == 'KB' ||
unit == 'MB' ||
unit == 'bytes' ||
unit == 'count' ||
!metric.indexOf('V8.'));
}
this.addResult = function(newResult) {
testResults.push(newResult);
cachedUnit = null;
cachedScalingFactor = null;
}
this.results = function() { return testResults; }
this.scalingFactor = function() {
computeScalingFactorIfNeeded();
return cachedScalingFactor;
}
this.unit = function() {
computeScalingFactorIfNeeded();
return cachedUnit;
}
this.biggerIsBetter = function() {
if (window.unitToBiggerIsBetter == undefined) {
window.unitToBiggerIsBetter = {};
var units = JSON.parse(document.getElementById('units-json').textContent);
for (var u in units) {
if (units[u].improvement_direction == 'up') {
window.unitToBiggerIsBetter[u] = true;
}
}
}
return window.unitToBiggerIsBetter[unit];
}
}
function UndeleteManager() {
var key = 'telemetry_undeleteIds'
var undeleteIds = localStorage[key];
if (undeleteIds) {
undeleteIds = JSON.parse(undeleteIds);
} else {
undeleteIds = [];
}
this.ondelete = function(id) {
undeleteIds.push(id);
localStorage[key] = JSON.stringify(undeleteIds);
}
this.undeleteMostRecent = function() {
if (!this.mostRecentlyDeletedId())
return;
undeleteIds.pop();
localStorage[key] = JSON.stringify(undeleteIds);
}
this.mostRecentlyDeletedId = function() {
if (!undeleteIds.length)
return undefined;
return undeleteIds[undeleteIds.length-1];
}
}
var undeleteManager = new UndeleteManager();
var plotColor = 'rgb(230,50,50)';
var subpointsPlotOptions = {
lines: {show:true, lineWidth: 0},
color: plotColor,
points: {show: true, radius: 1},
bars: {show: false}};
var mainPlotOptions = {
xaxis: {
min: -0.5,
tickSize: 1,
},
crosshair: { mode: 'y' },
series: { shadowSize: 0 },
bars: {show: true, align: 'center', barWidth: 0.5},
lines: { show: false },
points: { show: true },
grid: {
borderWidth: 1,
borderColor: '#ccc',
backgroundColor: '#fff',
hoverable: true,
autoHighlight: false,
}
};
var linePlotOptions = {
yaxis: { show: false },
xaxis: { show: false },
lines: { show: true },
grid: { borderWidth: 1, borderColor: '#ccc' },
colors: [ plotColor ]
};
var largeLinePlotOptions = {
xaxis: {
show: true,
tickDecimals: 0,
},
lines: { show: true },
grid: { borderWidth: 1, borderColor: '#ccc' },
colors: [ plotColor ]
};
var histogramPlotOptions = {
bars: {show: true, fill: 1}
};
function createPlot(container, test, useLargeLinePlots) {
if (test.results()[0].histogramValues) {
var section = $('<section><div class="histogram-plots"></div>'
+ '<div class="histogram-plot-labels"></div>'
+ '<span class="tooltip"></span></section>');
$(container).append(section);
attachHistogramPlots(test, section.children('.histogram-plots'));
}
else if (useLargeLinePlots) {
var section = $('<section><div class="large-line-plots"></div>'
+ '<div class="large-line-plot-labels"></div>'
+ '<span class="tooltip"></span></section>');
$(container).append(section);
attachLinePlots(test, section.children('.large-line-plots'), useLargeLinePlots);
attachLinePlotLabels(test, section.children('.large-line-plot-labels'));
} else {
var section = $('<section><div class="plot"></div><div class="line-plots"></div>'
+ '<span class="tooltip"></span></section>');
section.children('.plot').css({'width': (100 * test.results().length + 25) + 'px', 'height': '300px'});
$(container).append(section);
var plotContainer = section.children('.plot');
var minIsZero = true;
attachPlot(test, plotContainer, minIsZero);
attachLinePlots(test, section.children('.line-plots'), useLargeLinePlots);
var tooltip = section.children('.tooltip');
plotContainer.bind('plothover', function(event, position, item) {
if (item) {
var postfix = item.series.id ? ' (' + item.series.id + ')' : '';
tooltip.html(item.datapoint[1].toPrecision(4) + postfix);
var sectionOffset = $(section).offset();
tooltip.css({left: item.pageX - sectionOffset.left - tooltip.outerWidth() / 2, top: item.pageY - sectionOffset.top + 10});
tooltip.fadeIn(200);
} else
tooltip.hide();
});
plotContainer.mouseout(function() {
tooltip.hide();
});
plotContainer.click(function(event) {
event.preventDefault();
minIsZero = !minIsZero;
attachPlot(test, plotContainer, minIsZero);
});
}
return section;
}
function attachLinePlots(test, container, useLargeLinePlots) {
var results = test.results();
var attachedPlot = false;
if (useLargeLinePlots) {
var maximum = 0;
for (var i = 0; i < results.length; i++) {
var values = results[i].values();
if (!values)
continue;
var local_max = Math.max.apply(Math, values);
if (local_max > maximum)
maximum = local_max;
}
}
for (var i = 0; i < results.length; i++) {
container.append('<div></div>');
var values = results[i].values();
if (!values)
continue;
attachedPlot = true;
if (useLargeLinePlots) {
var options = $.extend(true, {}, largeLinePlotOptions,
{yaxis: {min: 0.0, max: maximum},
xaxis: {min: 0.0, max: values.length - 1},
points: {show: (values.length < 2) ? true : false}});
} else {
var options = $.extend(true, {}, linePlotOptions,
{yaxis: {min: Math.min.apply(Math, values) * 0.9, max: Math.max.apply(Math, values) * 1.1},
xaxis: {min: -0.5, max: values.length - 0.5},
points: {show: (values.length < 2) ? true : false}});
}
$.plot(container.children().last(), [values.map(function(value, index) { return [index, value]; })], options);
}
if (!attachedPlot)
container.children().remove();
}
function attachHistogramPlots(test, container) {
var results = test.results();
var attachedPlot = false;
for (var i = 0; i < results.length; i++) {
container.append('<div></div>');
var histogram = results[i].histogramValues
if (!histogram)
continue;
attachedPlot = true;
var buckets = histogram.buckets
var bucket;
var max_count = 0;
for (var j = 0; j < buckets.length; j++) {
bucket = buckets[j];
max_count = Math.max(max_count, bucket.count);
}
var xmax = bucket.high * 1.1;
var ymax = max_count * 1.1;
var options = $.extend(true, {}, histogramPlotOptions,
{yaxis: {min: 0.0, max: ymax},
xaxis: {min: histogram.params.min, max: xmax}});
var plot = $.plot(container.children().last(), [[]], options);
// Flot only supports fixed with bars and our histogram's buckets are
// variable width, so we need to do our own bar drawing.
var ctx = plot.getCanvas().getContext("2d");
ctx.lineWidth="1";
ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
ctx.strokeStyle="red";
for (var j = 0; j < buckets.length; j++) {
bucket = buckets[j];
var bl = plot.pointOffset({ x: bucket.low, y: 0});
var tr = plot.pointOffset({ x: bucket.high, y: bucket.count});
ctx.fillRect(bl.left, bl.top, tr.left - bl.left, tr.top - bl.top);
ctx.strokeRect(bl.left, bl.top, tr.left - bl.left, tr.top - bl.top);
}
}
if (!attachedPlot)
container.children().remove();
}
function attachLinePlotLabels(test, container) {
var results = test.results();
var attachedPlot = false;
for (var i = 0; i < results.length; i++) {
container.append('<div>' + results[i].run().label() + '</div>');
}
}
function attachPlot(test, plotContainer, minIsZero) {
var results = test.results();
var values = results.reduce(function(values, result, index) {
var newValues = result.values();
return newValues ? values.concat(newValues.map(function(value) { return [index, value]; })) : values;
}, []);
var plotData = [$.extend(true, {}, subpointsPlotOptions, {data: values})];
plotData.push({id: 'μ', data: results.map(function(result, index) { return [index, result.mean()]; }), color: plotColor});
var overallMax = Statistics.max(results.map(function(result, index) { return result.max(); }));
var overallMin = Statistics.min(results.map(function(result, index) { return result.min(); }));
var margin = (overallMax - overallMin) * 0.1;
var currentPlotOptions = $.extend(true, {}, mainPlotOptions, {yaxis: {
min: minIsZero ? 0 : overallMin - margin,
max: minIsZero ? overallMax * 1.1 : overallMax + margin}});
currentPlotOptions.xaxis.max = results.length - 0.5;
currentPlotOptions.xaxis.ticks = results.map(function(result, index) { return [index, result.run().label()]; });
$.plot(plotContainer, plotData, currentPlotOptions);
}
function toFixedWidthPrecision(value) {
var decimal = value.toFixed(2);
return decimal;
}
function formatPercentage(fraction) {
var percentage = fraction * 100;
return (fraction * 100).toFixed(2) + '%';
}
function setUpSortClicks(runs)
{
$('#nameColumn').click(sortByName);
$('#unitColumn').click(sortByUnit);
runs.forEach(function(run) {
$('#' + run.id()).click(sortByResult);
$('#' + run.id() + COMPARISON_SUFFIX).click(sortByReference);
});
}
function TestTypeSelector(tests) {
this.recognizers = {
'Time': function(test) { return !test.isMemoryTest(); },
'Memory': function(test) { return test.isMemoryTest(); }
};
this.testTypeNames = this.generateUsedTestTypeNames(tests);
// Default to selecting the first test-type name in the list.
this.testTypeName = this.testTypeNames[0];
}
TestTypeSelector.prototype = {
set testTypeName(testTypeName) {
this._testTypeName = testTypeName;
this.shouldShowTest = this.recognizers[testTypeName];
},
generateUsedTestTypeNames: function(allTests) {
var testTypeNames = [];
for (var recognizedTestName in this.recognizers) {
var recognizes = this.recognizers[recognizedTestName];
for (var testName in allTests) {
var test = allTests[testName];
if (recognizes(test)) {
testTypeNames.push(recognizedTestName);
break;
}
}
}
if (testTypeNames.length === 0) {
// No test types we recognize, add 'No Results' with a dummy recognizer.
var noResults = 'No Results';
this.recognizers[noResults] = function() { return false; };
testTypeNames.push(noResults);
} else if (testTypeNames.length > 1) {
// We have more than one test type, so add 'All' with a recognizer that always succeeds.
var allResults = 'All';
this.recognizers[allResults] = function() { return true; };
testTypeNames.push(allResults);
}
return testTypeNames;
},
buildButtonHTMLForUsedTestTypes: function() {
var selectedTestTypeName = this._testTypeName;
// Build spans for all recognised test names with the selected test highlighted.
return this.testTypeNames.map(function(testTypeName) {
var classAttribute = testTypeName === selectedTestTypeName ? ' class=checked' : '';
return '<span' + classAttribute + '>' + testTypeName + '</span>';
}).join('');
}
};
var topLevelRows;
var allTableRows;
function displayTable(tests, runs, testTypeSelector, referenceIndex, useLargeLinePlots) {
var resultHeaders = runs.map(function(run, index) {
var header = '<th id="' + run.id() + '" ' +
'colspan=2 ' +
'title="' + run.description() + '">' +
'<span class="label" ' +
'title="Edit run label">' +
run.label() +
'</span>' +
'<div class="closeButton" ' +
'title="Delete run">' +
'×' +
'</div>' +
'</th>';
if (index !== referenceIndex) {
header += '<th id="' + run.id() + COMPARISON_SUFFIX + '" ' +
'title="Sort by better/worse">' +
'Δ' +
'</th>';
}
return header;
});
resultHeaders = resultHeaders.join('');
htmlString = '<thead>' +
'<tr>' +
'<th id="nameColumn">' +
'<div class="openAllButton" ' +
'title="Open all rows or graphs">' +
'Open All' +
'</div>' +
'<div class="closeAllButton" ' +
'title="Close all rows">' +
'Close All' +
'</div>' +
'Test' +
'</th>' +
'<th id="unitColumn">' +
'Unit' +
'</th>' +
resultHeaders +
'</tr>' +
'</head>' +
'<tbody>' +
'</tbody>';
$('#container').html(htmlString);
var testNames = [];
for (testName in tests)
testNames.push(testName);
allTableRows = [];
testNames.forEach(function(testName) {
var test = tests[testName];
if (testTypeSelector.shouldShowTest(test)) {
allTableRows.push(new TableRow(runs, test, referenceIndex, useLargeLinePlots));
}
});
// Build a list of top level rows with attached children
topLevelRows = [];
allTableRows.forEach(function(row) {
// Add us to top level if we are a top-level row...
if (row.hasNoURL) {
topLevelRows.push(row);
// Add a duplicate child row that holds the graph for the parent
var graphHolder = new TableRow(runs, row.test, referenceIndex, useLargeLinePlots);
graphHolder.isImportant = true;
graphHolder.URL = 'Summary';
graphHolder.hideRowData();
allTableRows.push(graphHolder);
row.addNestedChild(graphHolder);
return;
}
// ...or add us to our parent if we have one ...
for (var i = 0; i < allTableRows.length; i++) {
if (allTableRows[i].isParentOf(row)) {
allTableRows[i].addNestedChild(row);
return;
}
}
// ...otherwise this result is orphaned, display it at top level with a graph
row.hasGraph = true;
topLevelRows.push(row);
});
buildTable(topLevelRows);
$('.closeButton').click(function(event) {
for (var i = 0; i < runs.length; i++) {
if (runs[i].id() == event.target.parentNode.id) {
runs[i].hide();
undeleteManager.ondelete(runs[i].id());
location.reload();
break;
}
}
event.stopPropagation();
});
$('.closeAllButton').click(function(event) {
for (var i = 0; i < allTableRows.length; i++) {
allTableRows[i].closeRow();
}
event.stopPropagation();
});
$('.openAllButton').click(function(event) {
for (var i = 0; i < topLevelRows.length; i++) {
topLevelRows[i].openRow();
}
event.stopPropagation();
});
setUpSortClicks(runs);
$('.label').click(function(event) {
for (var i = 0; i < runs.length; i++) {
if (runs[i].id() == event.target.parentNode.id) {
$(event.target).replaceWith('<input id="labelEditor" type="text" value="' + runs[i].label() + '">');
$('#labelEditor').focusout(function() {
runs[i].setLabel(this.value);
location.reload();
});
$('#labelEditor').keypress(function(event) {
if (event.which == 13) {
runs[i].setLabel(this.value);
location.reload();
}
});
$('#labelEditor').click(function(event) {
event.stopPropagation();
});
$('#labelEditor').mousedown(function(event) {
event.stopPropagation();
});
$('#labelEditor').select();
break;
}
}
event.stopPropagation();
});
}
function validForSorting(row) {
return ($.type(row.sortValue) === 'string') || !isNaN(row.sortValue);
}
var sortDirection = 1;
function sortRows(rows) {
rows.sort(
function(rowA,rowB) {
if (validForSorting(rowA) !== validForSorting(rowB)) {
// Sort valid values upwards when compared to invalid
if (validForSorting(rowA)) {
return -1;
}
if (validForSorting(rowB)) {
return 1;
}
}
// Some rows always sort to the top
if (rowA.isImportant) {
return -1;
}
if (rowB.isImportant) {
return 1;
}
if (rowA.sortValue === rowB.sortValue) {
// Sort identical values by name to keep the sort stable,
// always keep name alphabetical (even if a & b sort values
// are invalid)
return rowA.test.name() > rowB.test.name() ? 1 : -1;
}
return rowA.sortValue > rowB.sortValue ? sortDirection : -sortDirection;
} );
// Sort the rows' children
rows.forEach(function(row) {
sortRows(row.children);
});
}
function buildTable(rows) {
rows.forEach(function(row) {
row.removeFromPage();
});
sortRows(rows);
rows.forEach(function(row) {
row.addToPage();
});
}
var activeSortHeaderElement = undefined;
var columnSortDirection = {};
function determineColumnSortDirection(element) {
columnDirection = columnSortDirection[element.id];
if (columnDirection === undefined) {
// First time we've sorted this row, default to down
columnSortDirection[element.id] = SORT_DOWN_CLASS;
} else if (element === activeSortHeaderElement) {
// Clicking on same header again, swap direction
columnSortDirection[element.id] = (columnDirection === SORT_UP_CLASS) ? SORT_DOWN_CLASS : SORT_UP_CLASS;
}
}
function updateSortDirection(element) {
// Remove old header's sort arrow
if (activeSortHeaderElement !== undefined) {
activeSortHeaderElement.classList.remove(columnSortDirection[activeSortHeaderElement.id]);
}
determineColumnSortDirection(element);
sortDirection = (columnSortDirection[element.id] === SORT_UP_CLASS) ? 1 : -1;
// Add new header's sort arrow
element.classList.add(columnSortDirection[element.id]);
activeSortHeaderElement = element;
}
function sortByName(event) {
updateSortDirection(event.toElement);
allTableRows.forEach(function(row) {
row.prepareToSortByName();
});
buildTable(topLevelRows);
}
function sortByUnit(event) {
updateSortDirection(event.toElement);
allTableRows.forEach(function(row) {
row.prepareToSortByUnit();
});
buildTable(topLevelRows);
}
function sortByResult(event) {
updateSortDirection(event.toElement);
var runId = event.target.id;
allTableRows.forEach(function(row) {
row.prepareToSortByTestResults(runId);
});
buildTable(topLevelRows);
}
function sortByReference(event) {
updateSortDirection(event.toElement);
// The element ID has _compare appended to allow us to set up a click event
// remove the _compare to return a useful Id
var runIdWithCompare = event.target.id;
var runId = runIdWithCompare.split('_')[0];
allTableRows.forEach(function(row) {
row.prepareToSortRelativeToReference(runId);
});
buildTable(topLevelRows);
}
function linearRegression(points) {
// Implement http://www.easycalculation.com/statistics/learn-correlation.php.
// x = magnitude
// y = iterations
var sumX = 0;
var sumY = 0;
var sumXSquared = 0;
var sumYSquared = 0;
var sumXTimesY = 0;
for (var i = 0; i < points.length; i++) {
var x = i;
var y = points[i];
sumX += x;
sumY += y;
sumXSquared += x * x;
sumYSquared += y * y;
sumXTimesY += x * y;
}
var r = (points.length * sumXTimesY - sumX * sumY) /
Math.sqrt((points.length * sumXSquared - sumX * sumX) *
(points.length * sumYSquared - sumY * sumY));
if (isNaN(r) || r == Math.Infinity)
r = 0;
var slope = (points.length * sumXTimesY - sumX * sumY) / (points.length * sumXSquared - sumX * sumX);
var intercept = sumY / points.length - slope * sumX / points.length;
return {slope: slope, intercept: intercept, rSquared: r * r};
}
var warningSign = '<svg viewBox="0 0 100 100" style="width: 18px; height: 18px; vertical-align: bottom;" version="1.1">'
+ '<polygon fill="red" points="50,10 90,80 10,80 50,10" stroke="red" stroke-width="10" stroke-linejoin="round" />'
+ '<polygon fill="white" points="47,30 48,29, 50, 28.7, 52,29 53,30 50,60" stroke="white" stroke-width="10" stroke-linejoin="round" />'
+ '<circle cx="50" cy="73" r="6" fill="white" />'
+ '</svg>';
function TableRow(runs, test, referenceIndex, useLargeLinePlots) {
this.runs = runs;
this.test = test;
this.referenceIndex = referenceIndex;
this.useLargeLinePlots = useLargeLinePlots;
this.children = [];
this.tableRow = $('<tr class="highlight">' +
'<td class="test collapsed" >' +
this.test.name() +
'</td>' +
'<td class="unit">' +
this.test.unit() +
'</td>' +
'</tr>');
var runIndex = 0;
var results = this.test.results();
var referenceResult = undefined;
this.resultIndexMap = {};
for (var i = 0; i < results.length; i++) {
while (this.runs[runIndex] !== results[i].run())
runIndex++;
if (runIndex === this.referenceIndex)
referenceResult = results[i];
this.resultIndexMap[runIndex] = i;
}
for (var i = 0; i < this.runs.length; i++) {
var resultIndex = this.resultIndexMap[i];
if (resultIndex === undefined)
this.tableRow.append(this.markupForMissingRun(i == this.referenceIndex));
else
this.tableRow.append(this.markupForRun(results[resultIndex], referenceResult));
}
// Use the test name (without URL) to bind parents and their children
var nameAndURL = this.test.name().split('.');
var benchmarkName = nameAndURL.shift();
this.testName = nameAndURL.shift();
this.hasNoURL = (nameAndURL.length === 0);
if (!this.hasNoURL) {
// Re-join the URL
this.URL = nameAndURL.join('.');
}
this.isImportant = false;
this.hasGraph = false;
this.currentIndentationClass = ''
this.indentLevel = 0;
this.setRowNestedState(COLLAPSED);
this.setVisibility(VISIBLE);
this.prepareToSortByName();
}
TableRow.prototype.hideRowData = function() {
data = this.tableRow.children('td');
for (index in data) {
if (index > 0) {
// Blank out everything except the test name
data[index].innerHTML = '';
}
}
}
TableRow.prototype.prepareToSortByTestResults = function(runId) {
var testResults = this.test.results();
// Find the column in this row that matches the runId and prepare to
// sort by the mean of that test.
for (index in testResults) {
sourceId = testResults[index].run().id();
if (runId === sourceId) {
this.sortValue = testResults[index].mean();
return;
}
}
// This row doesn't have any results for the passed runId
this.sortValue = undefined;
}
TableRow.prototype.prepareToSortRelativeToReference = function(runId) {
var testResults = this.test.results();
// Get index of test results that correspond to the reference column.
var remappedReferenceIndex = this.resultIndexMap[this.referenceIndex];
if (remappedReferenceIndex === undefined) {
// This test has no results in the reference run.
this.sortValue = undefined;
return;
}
otherResults = testResults[remappedReferenceIndex];
// Find the column in this row that matches the runId and prepare to
// sort by the difference from the reference.
for (index in testResults) {
sourceId = testResults[index].run().id();
if (runId === sourceId) {
this.sortValue = testResults[index].percentDifference(otherResults);
if (this.test.biggerIsBetter()) {
// For this test bigger is not better
this.sortValue = -this.sortValue;
}
return;
}
}
// This row doesn't have any results for the passed runId
this.sortValue = undefined;
}
TableRow.prototype.prepareToSortByUnit = function() {
this.sortValue = this.test.unit().toLowerCase();
}
TableRow.prototype.prepareToSortByName = function() {
this.sortValue = this.test.name().toLowerCase();
}
TableRow.prototype.isParentOf = function(row) {
return this.hasNoURL && (this.testName === row.testName);
}
TableRow.prototype.addNestedChild = function(child) {
this.children.push(child);
// Indent child one step in from parent
child.indentLevel = this.indentLevel + INDENTATION;
child.hasGraph = true;
// Start child off as hidden (i.e. collapsed inside parent)
child.setVisibility(INVISIBLE);
child.updateIndentation();
// Show URL in the title column
child.tableRow.children()[0].innerHTML = child.URL;
// Set up class to change background colour of nested rows
if (child.isImportant) {
child.tableRow.addClass('importantNestedRow');
} else {
child.tableRow.addClass('nestedRow');
}
}
TableRow.prototype.setVisibility = function(visibility) {
this.visibility = visibility;
this.tableRow[0].style.display = (visibility === INVISIBLE) ? 'none' : '';
}
TableRow.prototype.setRowNestedState = function(newState) {
this.rowState = newState;
this.updateIndentation();
}
TableRow.prototype.updateIndentation = function() {
var element = this.tableRow.children('td').first();
element.removeClass(this.currentIndentationClass);
this.currentIndentationClass = (this.rowState === COLLAPSED) ? 'collapsed' : 'expanded';
element[0].style.marginLeft = this.indentLevel.toString() + 'px';
element[0].style.float = 'left';
element.addClass(this.currentIndentationClass);
}
TableRow.prototype.addToPage = function() {
$('#container').children('tbody').last().append(this.tableRow);
// Set up click callback
var owningObject = this;
this.tableRow.click(function(event) {
event.preventDefault();
owningObject.toggle();
});
// Add children to the page too
this.children.forEach(function(child) {
child.addToPage();
});
}
TableRow.prototype.removeFromPage = function() {
// Remove children
this.children.forEach(function(child) {
child.removeFromPage();
});
// Remove us
this.tableRow.remove();
}
TableRow.prototype.markupForRun = function(result, referenceResult) {
var comparisonCell = '';
var shouldCompare = result !== referenceResult;
if (shouldCompare) {
var comparisonText = '';
var className = '';
if (referenceResult) {
var percentDifference = referenceResult.percentDifference(result);
if (isNaN(percentDifference)) {
comparisonText = 'Unknown';
className = UNKNOWN_CLASS;
} else if (Math.abs(percentDifference) < SMALLEST_PERCENT_DISPLAYED) {
comparisonText = 'Equal';
// Show equal values in green
className = BETTER_CLASS;
} else {
var better = this.test.biggerIsBetter() ? percentDifference > 0 : percentDifference < 0;
comparisonText = formatPercentage(Math.abs(percentDifference)) + (better ? ' Better' : ' Worse');
className = better ? BETTER_CLASS : WORSE_CLASS;
}
if (!referenceResult.isStatisticallySignificant(result)) {
// Put result in brackets and fade if not statistically significant
className += ' fadeOut';
comparisonText = '(' + comparisonText + ')';
}
}
comparisonCell = '<td class="comparison ' + className + '">' + comparisonText + '</td>';
}
var values = result.values();
var warning = '';
var regressionAnalysis = '';
if (result.histogramValues) {
// Don't calculate regression result for histograms.
} else if (values && values.length > 3) {
regressionResult = linearRegression(values);
regressionAnalysis = 'slope=' + toFixedWidthPrecision(regressionResult.slope)
+ ', R^2=' + toFixedWidthPrecision(regressionResult.rSquared);
if (regressionResult.rSquared > 0.6 && Math.abs(regressionResult.slope) > 0.01) {
warning = ' <span class="regression-warning" title="Detected a time dependency with ' + regressionAnalysis + '">' + warningSign + ' </span>';
}
}
var referenceClass = shouldCompare ? '' : 'reference';
var statistics = 'σ=' + toFixedWidthPrecision(result.confidenceIntervalDelta()) + ', min=' + toFixedWidthPrecision(result.min())
+ ', max=' + toFixedWidthPrecision(result.max()) + '\n' + regressionAnalysis;
var confidence;
if (isNaN(result.confidenceIntervalDeltaRatio())) {
// Don't bother showing +- Nan as it is meaningless
confidence = '';
} else {
confidence = '± ' + formatPercentage(result.confidenceIntervalDeltaRatio());
}
return '<td class="result ' + referenceClass + '" title="' + statistics + '">' + toFixedWidthPrecision(result.mean())
+ '</td><td class="confidenceIntervalDelta ' + referenceClass + '" title="' + statistics + '">' + confidence + warning + '</td>' + comparisonCell;
}
TableRow.prototype.markupForMissingRun = function(isReference) {
if (isReference) {
return '<td colspan=2 class="missingReference">Missing</td>';
}
return '<td colspan=3 class="missing">Missing</td>';
}
TableRow.prototype.openRow = function() {
if (this.rowState === EXPANDED) {
// If we're already expanded, open our children instead
this.children.forEach(function(child) {
child.openRow();
});
return;
}
this.setRowNestedState(EXPANDED);
if (this.hasGraph) {
var firstCell = this.tableRow.children('td').first();
var plot = createPlot(firstCell, this.test, this.useLargeLinePlots);
plot.css({'position': 'absolute', 'z-index': 2});
var offset = this.tableRow.offset();
offset.left += GRAPH_INDENT;
offset.top += this.tableRow.outerHeight();
plot.offset(offset);
this.tableRow.children('td').css({'padding-bottom': plot.outerHeight() + PADDING_UNDER_GRAPH});
}
this.children.forEach(function(child) {
child.setVisibility(VISIBLE);
});
if (this.children.length === 1) {
// If we only have a single child...
var child = this.children[0];
if (child.isImportant) {
// ... and it is important (i.e. the summary row) just open it when
// parent is opened to save needless clicking
child.openRow();
}
}
}
TableRow.prototype.closeRow = function() {
if (this.rowState === COLLAPSED) {
return;
}
this.setRowNestedState(COLLAPSED);
if (this.hasGraph) {
var firstCell = this.tableRow.children('td').first();
firstCell.children('section').remove();
this.tableRow.children('td').css({'padding-bottom': ''});
}
this.children.forEach(function(child) {
// Make children invisible, but leave their collapsed status alone
child.setVisibility(INVISIBLE);
});
}
TableRow.prototype.toggle = function() {
if (this.rowState === EXPANDED) {
this.closeRow();
} else {
this.openRow();
}
return false;
}
function init() {
var runs = [];
var metrics = {};
var deletedRunsById = {};
$.each(JSON.parse(document.getElementById('results-json').textContent), function(index, entry) {
var run = new TestRun(entry);
if (run.isHidden()) {
deletedRunsById[run.id()] = run;
return;
}
runs.push(run);
function addTests(tests) {
for (var testName in tests) {
var rawMetrics = tests[testName].metrics;
for (var metricName in rawMetrics) {
var fullMetricName = testName + ':' + metricName;
var metric = metrics[fullMetricName];
if (!metric) {
metric = new PerfTestMetric(testName, metricName, rawMetrics[metricName].units, rawMetrics[metricName].important);
metrics[fullMetricName] = metric;
}
// std & degrees_of_freedom could be undefined
metric.addResult(
new TestResult(metric, rawMetrics[metricName].current,
run, rawMetrics[metricName]['std'], rawMetrics[metricName]['degrees_of_freedom']));
}
}
}
addTests(entry.tests);
});
var useLargeLinePlots = false;
var referenceIndex = 0;
var testTypeSelector = new TestTypeSelector(metrics);
var buttonHTML = testTypeSelector.buildButtonHTMLForUsedTestTypes();
$('#time-memory').append(buttonHTML);
$('#scatter-line').bind('change', function(event, checkedElement) {
useLargeLinePlots = checkedElement.textContent == 'Line';
displayTable(metrics, runs, testTypeSelector, referenceIndex, useLargeLinePlots);
});
runs.map(function(run, index) {
$('#reference').append('<span value="' + index + '"' + (index == referenceIndex ? ' class="checked"' : '') + ' title="' + run.description() + '">' + run.label() + '</span>');
})
$('#time-memory').bind('change', function(event, checkedElement) {
testTypeSelector.testTypeName = checkedElement.textContent;
displayTable(metrics, runs, testTypeSelector, referenceIndex, useLargeLinePlots);
});
$('#reference').bind('change', function(event, checkedElement) {
referenceIndex = parseInt(checkedElement.getAttribute('value'));
displayTable(metrics, runs, testTypeSelector, referenceIndex, useLargeLinePlots);
});
displayTable(metrics, runs, testTypeSelector, referenceIndex, useLargeLinePlots);
$('.checkbox').each(function(index, checkbox) {
$(checkbox).children('span').click(function(event) {
if ($(this).hasClass('checked'))
return;
$(checkbox).children('span').removeClass('checked');
$(this).addClass('checked');
$(checkbox).trigger('change', $(this));
});
});
runToUndelete = deletedRunsById[undeleteManager.mostRecentlyDeletedId()];
if (runToUndelete) {
$('#undelete').html('Undelete ' + runToUndelete.label());
$('#undelete').attr('title', runToUndelete.description());
$('#undelete').click(function(event) {
runToUndelete.show();
undeleteManager.undeleteMostRecent();
location.reload();
});
} else {
$('#undelete').hide();
}
}
</script>
<script id="results-json" type="application/json">%json_results%</script>
<script id="units-json" type="application/json">%json_units%</script>
</body>
</html>