<html>
<!--
Copyright 2016 the V8 project authors. All rights reserved. Use of this source
code is governed by a BSD-style license that can be found in the LICENSE file.
-->
<head>
<meta charset="UTF-8">
<style>
body {
font-family: arial;
}
table {
display: table;
border-spacing: 0px;
}
tr {
border-spacing: 0px;
padding: 10px;
}
td,
th {
padding: 3px 10px 3px 5px;
}
.inline {
display: inline-block;
vertical-align: top;
}
h2,
h3 {
margin-bottom: 0px;
}
.hidden {
display: none;
}
.view {
display: table;
}
.column {
display: table-cell;
border-right: 1px black dotted;
min-width: 200px;
}
.column .header {
padding: 0 10px 0 10px
}
#column {
display: none;
}
.list {
width: 100%;
}
select {
width: 100%
}
.list tbody {
cursor: pointer;
}
.list tr:nth-child(even) {
background-color: #EFEFEF;
}
.list tr:nth-child(even).selected {
background-color: #DDD;
}
.list tr.child {
display: none;
}
.list tr.child.visible {
display: table-row;
}
.list .child .name {
padding-left: 20px;
}
.list .parent td {
border-top: 1px solid #AAA;
}
.list .total {
font-weight: bold
}
.list tr.parent {
background-color: #FFF;
}
.list tr.parent.selected {
background-color: #DDD;
}
tr.selected {
background-color: #DDD;
}
.codeSearch {
display: block-inline;
float: right;
border-radius: 5px;
background-color: #EEE;
width: 1em;
text-align: center;
}
.list .position {
text-align: right;
display: none;
}
.list div.toggle {
cursor: pointer;
}
#column_0 .position {
display: table-cell;
}
#column_0 .name {
display: table-cell;
}
.list .name {
display: none;
white-space: nowrap;
}
.value {
text-align: right;
}
.selectedVersion {
font-weight: bold;
}
#baseline {
width: auto;
}
.compareSelector {
padding-bottom: 20px;
}
.pageDetailTable tbody {
cursor: pointer
}
.pageDetailTable tfoot td {
border-top: 1px grey solid;
}
#popover {
position: absolute;
transform: translateY(-50%) translateX(40px);
box-shadow: -2px 10px 44px -10px #000;
border-radius: 5px;
z-index: 1;
background-color: #FFF;
display: none;
white-space: nowrap;
}
#popover table {
position: relative;
z-index: 1;
text-align: right;
margin: 10px;
}
#popover td {
padding: 3px 0px 3px 5px;
white-space: nowrap;
}
.popoverArrow {
background-color: #FFF;
position: absolute;
width: 30px;
height: 30px;
transform: translateY(-50%)rotate(45deg);
top: 50%;
left: -10px;
z-index: 0;
}
#popover .name {
padding: 5px;
font-weight: bold;
text-align: center;
}
#popover table .compare {
display: none
}
#popover table.compare .compare {
display: table-cell;
}
#popover .compare .time,
#popover .compare .version {
padding-left: 10px;
}
.graph,
.graph .content {
width: 100%;
}
.diff .hideDiff {
display: none;
}
.noDiff .hideNoDiff {
display: none;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
"use strict"
google.charts.load('current', {packages: ['corechart']});
// Did anybody say monkeypatching?
if (!NodeList.prototype.forEach) {
NodeList.prototype.forEach = function(func) {
for (var i = 0; i < this.length; i++) {
func(this[i]);
}
}
}
var versions;
var pages;
var selectedPage;
var baselineVersion;
var selectedEntry;
function initialize() {
var original = $("column");
var view = document.createElement('div');
view.id = 'view';
var i = 0;
versions.forEach((version) => {
if (!version.enabled) return;
// add column
var column = original.cloneNode(true);
column.id = "column_" + i;
// Fill in all versions
var select = column.querySelector(".version");
select.id = "selectVersion_" + i;
// add all select options
versions.forEach((version) => {
if (!version.enabled) return;
var option = document.createElement("option");
option.textContent = version.name;
option.version = version;
select.appendChild(option);
});
// Fill in all page versions
select = column.querySelector(".pageVersion");
select.id = "select_" + i;
// add all pages
versions.forEach((version) => {
if (!version.enabled) return;
var optgroup = document.createElement("optgroup");
optgroup.label = version.name;
optgroup.version = version;
version.forEachPage((page) => {
var option = document.createElement("option");
option.textContent = page.name;
option.page = page;
optgroup.appendChild(option);
});
select.appendChild(optgroup);
});
view.appendChild(column);
i++;
});
var oldView = $('view');
oldView.parentNode.replaceChild(view, oldView);
var select = $('baseline');
removeAllChildren(select);
select.appendChild(document.createElement('option'));
versions.forEach((version) => {
var option = document.createElement("option");
option.textContent = version.name;
option.version = version;
select.appendChild(option);
});
initializeToggleList(versions.versions, $('versionSelector'));
initializeToggleList(pages.values(), $('pageSelector'));
initializeToggleContentVisibility();
}
function initializeToggleList(items, node) {
var list = node.querySelector('ul');
removeAllChildren(list);
items = Array.from(items);
items.sort(NameComparator);
items.forEach((item) => {
var li = document.createElement('li');
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = item.enabled;
checkbox.item = item;
checkbox.addEventListener('click', handleToggleVersionEnable);
li.appendChild(checkbox);
li.appendChild(document.createTextNode(item.name));
list.appendChild(li);
});
$('results').querySelectorAll('#results > .hidden').forEach((node) => {
toggleCssClass(node, 'hidden', false);
})
}
function initializeToggleContentVisibility() {
var nodes = document.querySelectorAll('.toggleContentVisibility');
nodes.forEach((node) => {
var content = node.querySelector('.content');
var header = node.querySelector('h1,h2,h3');
if (content === undefined || header === undefined) return;
if (header.querySelector('input') != undefined) return;
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = content.className.indexOf('hidden') == -1;
checkbox.contentNode = content;
checkbox.addEventListener('click', handleToggleContentVisibility);
header.insertBefore(checkbox, header.childNodes[0]);
});
}
function showPage(firstPage) {
var changeSelectedEntry = selectedEntry !== undefined
&& selectedEntry.page === selectedPage;
selectedPage = firstPage;
selectedPage.sort();
showPageInColumn(firstPage, 0);
// Show the other versions of this page in the following columns.
var pageVersions = versions.getPageVersions(firstPage);
var index = 1;
pageVersions.forEach((page) => {
if (page !== firstPage) {
showPageInColumn(page, index);
index++;
}
});
if (changeSelectedEntry) {
showEntryDetail(selectedPage.getEntry(selectedEntry));
} else {
showImpactList(selectedPage);
}
}
function showPageInColumn(page, columnIndex) {
page.sort();
var showDiff = (baselineVersion === undefined && columnIndex !== 0) ||
(baselineVersion !== undefined && page.version !== baselineVersion);
var diffStatus = (td, a, b) => {};
if (showDiff) {
if (baselineVersion !== undefined) {
diffStatus = (td, a, b) => {
if (a == 0) return;
td.style.color = a < 0 ? '#FF0000' : '#00BB00';
};
} else {
diffStatus = (td, a, b) => {
if (a == b) return;
var color;
var ratio = a / b;
if (ratio > 1) {
ratio = Math.min(Math.round((ratio - 1) * 255 * 10), 200);
color = '#' + ratio.toString(16) + "0000";
} else {
ratio = Math.min(Math.round((1 - ratio) * 255 * 10), 200);
color = '#00' + ratio.toString(16) + "00";
}
td.style.color = color;
}
}
}
var column = $('column_' + columnIndex);
var select = $('select_' + columnIndex);
// Find the matching option
selectOption(select, (i, option) => {
return option.page == page
});
var table = column.querySelector("table");
var oldTbody = table.querySelector('tbody');
var tbody = document.createElement('tbody');
var referencePage = selectedPage;
page.forEachSorted(selectedPage, (parentEntry, entry, referenceEntry) => {
// Filter out entries that do not exist in the first column for the default
// view.
if (baselineVersion === undefined && referenceEntry &&
referenceEntry.time == 0) {
return;
}
var tr = document.createElement('tr');
tbody.appendChild(tr);
tr.entry = entry;
tr.parentEntry = parentEntry;
tr.className = parentEntry === undefined ? 'parent' : 'child';
// Don't show entries that do not exist on the current page or if we
// compare against the current page
if (entry !== undefined && page.version !== baselineVersion) {
// If we show a diff, use the baselineVersion as the referenceEntry
if (baselineVersion !== undefined) {
var baselineEntry = baselineVersion.getEntry(entry);
if (baselineEntry !== undefined) referenceEntry = baselineEntry
}
if (!parentEntry) {
var node = td(tr, '<div class="toggle">►</div>', 'position');
node.firstChild.addEventListener('click', handleToggleGroup);
} else {
td(tr, entry.position == 0 ? '' : entry.position, 'position');
}
addCodeSearchButton(entry,
td(tr, entry.name, 'name ' + entry.cssClass()));
diffStatus(
td(tr, ms(entry.time), 'value time'),
entry.time, referenceEntry.time);
diffStatus(
td(tr, percent(entry.timePercent), 'value time'),
entry.time, referenceEntry.time);
diffStatus(
td(tr, count(entry.count), 'value count'),
entry.count, referenceEntry.count);
} else if (baselineVersion !== undefined && referenceEntry
&& page.version !== baselineVersion) {
// Show comparison of entry that does not exist on the current page.
tr.entry = new Entry(0, referenceEntry.name);
tr.entry.page = page;
td(tr, '-', 'position');
td(tr, referenceEntry.name, 'name');
diffStatus(
td(tr, ms(-referenceEntry.time), 'value time'),
-referenceEntry.time, 0);
diffStatus(
td(tr, percent(-referenceEntry.timePercent), 'value time'),
-referenceEntry.timePercent, 0);
diffStatus(
td(tr, count(-referenceEntry.count), 'value count'),
-referenceEntry.count, 0);
} else {
// Display empty entry / baseline entry
var showBaselineEntry = entry !== undefined;
if (showBaselineEntry) {
if (!parentEntry) {
var node = td(tr, '<div class="toggle">►</div>', 'position');
node.firstChild.addEventListener('click', handleToggleGroup);
} else {
td(tr, entry.position == 0 ? '' : entry.position, 'position');
}
td(tr, entry.name, 'name');
td(tr, ms(entry.time, false), 'value time');
td(tr, percent(entry.timePercent, false), 'value time');
td(tr, count(entry.count, false), 'value count');
} else {
td(tr, '-', 'position');
td(tr, '-', 'name');
td(tr, '-', 'value time');
td(tr, '-', 'value time');
td(tr, '-', 'value count');
}
}
});
table.replaceChild(tbody, oldTbody);
var versionSelect = column.querySelector('select.version');
selectOption(versionSelect, (index, option) => {
return option.version == page.version
});
}
function selectEntry(entry, updateSelectedPage) {
if (updateSelectedPage) {
entry = selectedPage.version.getEntry(entry);
}
var rowIndex = 0;
var needsPageSwitch = updateSelectedPage && entry.page != selectedPage;
// If clicked in the detail row change the first column to that page.
if (needsPageSwitch) showPage(entry.page);
var childNodes = $('column_0').querySelector('.list tbody').childNodes;
for (var i = 0; i < childNodes.length; i++) {
if (childNodes[i].entry.name == entry.name) {
rowIndex = i;
break;
}
}
var firstEntry = childNodes[rowIndex].entry;
if (rowIndex) {
if (firstEntry.parent) showGroup(firstEntry.parent);
}
// Deselect all
$('view').querySelectorAll('.list tbody tr').forEach((tr) => {
toggleCssClass(tr, 'selected', false);
});
// Select the entry row
$('view').querySelectorAll("tbody").forEach((body) => {
var row = body.childNodes[rowIndex];
if (!row) return;
toggleCssClass(row, 'selected', row.entry && row.entry.name ==
firstEntry.name);
});
if (updateSelectedPage) {
entry = selectedEntry.page.version.getEntry(entry);
}
selectedEntry = entry;
showEntryDetail(entry);
}
function showEntryDetail(entry) {
showVersionDetails(entry);
showPageDetails(entry);
showImpactList(entry.page);
showGraphs(entry.page);
}
function showVersionDetails(entry) {
var table, tbody, entries;
table = $('detailView').querySelector('.versionDetailTable');
tbody = document.createElement('tbody');
if (entry !== undefined) {
$('detailView').querySelector('.versionDetail h3 span').innerHTML =
entry.name + ' in ' + entry.page.name;
entries = versions.getPageVersions(entry.page).map(
(page) => {
return page.get(entry.name)
});
entries.sort((a, b) => {
return a.time - b.time
});
entries.forEach((pageEntry) => {
if (pageEntry === undefined) return;
var tr = document.createElement('tr');
if (pageEntry == entry) tr.className += 'selected';
tr.entry = pageEntry;
var isBaselineEntry = pageEntry.page.version == baselineVersion;
td(tr, pageEntry.page.version.name, 'version');
td(tr, ms(pageEntry.time, !isBaselineEntry), 'value time');
td(tr, percent(pageEntry.timePercent, !isBaselineEntry), 'value time');
td(tr, count(pageEntry.count, !isBaselineEntry), 'value count');
tbody.appendChild(tr);
});
}
table.replaceChild(tbody, table.querySelector('tbody'));
}
function showPageDetails(entry) {
var table, tbody, entries;
table = $('detailView').querySelector('.pageDetailTable');
tbody = document.createElement('tbody');
if (entry === undefined) {
table.replaceChild(tbody, table.querySelector('tbody'));
return;
}
var version = entry.page.version;
var showDiff = version !== baselineVersion;
$('detailView').querySelector('.pageDetail h3 span').innerHTML =
version.name;
entries = version.pages.map((page) => {
if (!page.enabled) return;
return page.get(entry.name)
});
entries.sort((a, b) => {
var cmp = b.timePercent - a.timePercent;
if (cmp.toFixed(1) == 0) return b.time - a.time;
return cmp
});
entries.forEach((pageEntry) => {
if (pageEntry === undefined) return;
var tr = document.createElement('tr');
if (pageEntry === entry) tr.className += 'selected';
tr.entry = pageEntry;
td(tr, pageEntry.page.name, 'name');
td(tr, ms(pageEntry.time, showDiff), 'value time');
td(tr, percent(pageEntry.timePercent, showDiff), 'value time');
td(tr, percent(pageEntry.timePercentPerEntry, showDiff),
'value time hideNoDiff');
td(tr, count(pageEntry.count, showDiff), 'value count');
tbody.appendChild(tr);
});
// show the total for all pages
var tds = table.querySelectorAll('tfoot td');
tds[1].innerHTML = ms(entry.getTimeImpact(), showDiff);
// Only show the percentage total if we are in diff mode:
tds[2].innerHTML = percent(entry.getTimePercentImpact(), showDiff);
tds[3].innerHTML = '';
tds[4].innerHTML = count(entry.getCountImpact(), showDiff);
table.replaceChild(tbody, table.querySelector('tbody'));
}
function showImpactList(page) {
var impactView = $('detailView').querySelector('.impactView');
impactView.querySelector('h3 span').innerHTML = page.version.name;
var table = impactView.querySelector('table');
var tbody = document.createElement('tbody');
var version = page.version;
var entries = version.allEntries();
if (selectedEntry !== undefined && selectedEntry.isGroup) {
impactView.querySelector('h3 span').innerHTML += " " + selectedEntry.name;
entries = entries.filter((entry) => {
return entry.name == selectedEntry.name ||
(entry.parent && entry.parent.name == selectedEntry.name)
});
}
var isCompareView = baselineVersion !== undefined;
entries = entries.filter((entry) => {
if (isCompareView) {
var impact = entry.getTimeImpact();
return impact < -1 || 1 < impact
}
return entry.getTimePercentImpact() > 0.1;
});
entries.sort((a, b) => {
var cmp = b.getTimePercentImpact() - a.getTimePercentImpact();
if (isCompareView || cmp.toFixed(1) == 0) {
return b.getTimeImpact() - a.getTimeImpact();
}
return cmp
});
entries.forEach((entry) => {
var tr = document.createElement('tr');
tr.entry = entry;
td(tr, entry.name, 'name');
td(tr, ms(entry.getTimeImpact()), 'value time');
var percentImpact = entry.getTimePercentImpact();
td(tr, percentImpact > 1000 ? '-' : percent(percentImpact), 'value time');
var topPages = entry.getPagesByPercentImpact().slice(0, 3)
.map((each) => {
return each.name + ' (' + percent(each.getEntry(entry).timePercent) +
')'
});
td(tr, topPages.join(', '), 'name');
tbody.appendChild(tr);
});
table.replaceChild(tbody, table.querySelector('tbody'));
}
function showGraphs(page) {
var groups = page.groups.slice();
// Sort groups by the biggest impact
groups.sort((a, b) => {
return b.getTimeImpact() - a.getTimeImpact();
});
if (selectedGroup == undefined) {
selectedGroup = groups[0];
} else {
groups = groups.filter(each => each.name != selectedGroup.name);
groups.unshift(selectedGroup);
}
showPageGraph(groups, page);
showVersionGraph(groups, page);
showPageVersionGraph(groups, page);
}
function getGraphDataTable(groups) {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Name');
groups.forEach(group => {
var column = dataTable.addColumn('number', group.name.substring(6));
dataTable.setColumnProperty(column, 'group', group);
});
return dataTable;
}
var selectedGroup;
function showPageGraph(groups, page) {
var isDiffView = baselineVersion !== undefined;
var dataTable = getGraphDataTable(groups);
// Calculate the average row
var row = ['Average'];
groups.forEach((group) => {
if (isDiffView) {
row.push(group.isTotal ? 0 : group.getAverageTimeImpact());
} else {
row.push(group.isTotal ? 0 : group.getTimeImpact());
}
});
dataTable.addRow(row);
// Sort the pages by the selected group.
var pages = page.version.pages.filter(page => page.enabled);
function sumDiff(page) {
var sum = 0;
groups.forEach(group => {
var value = group.getTimePercentImpact() -
page.getEntry(group).timePercent;
sum += value * value;
});
return sum;
}
if (isDiffView) {
pages.sort((a, b) => {
return b.getEntry(selectedGroup).time-
a.getEntry(selectedGroup).time;
});
} else {
pages.sort((a, b) => {
return b.getEntry(selectedGroup).timePercent -
a.getEntry(selectedGroup).timePercent;
});
}
// Sort by sum of squared distance to the average.
// pages.sort((a, b) => {
// return a.distanceFromTotalPercent() - b.distanceFromTotalPercent();
// });
// Calculate the entries for the pages
pages.forEach((page) => {
row = [page.name];
groups.forEach((group) => {
row.push(group.isTotal ? 0 : page.getEntry(group).time);
});
var rowIndex = dataTable.addRow(row);
dataTable.setRowProperty(rowIndex, 'page', page);
});
renderGraph('Pages for ' + page.version.name, groups, dataTable,
'pageGraph', isDiffView ? true : 'percent');
}
function showVersionGraph(groups, page) {
var dataTable = getGraphDataTable(groups);
var row;
var vs = versions.versions.filter(version => version.enabled);
vs.sort((a, b) => {
return b.getEntry(selectedGroup).getTimeImpact() -
a.getEntry(selectedGroup).getTimeImpact();
});
// Calculate the entries for the versions
vs.forEach((version) => {
row = [version.name];
groups.forEach((group) => {
row.push(group.isTotal ? 0 : version.getEntry(group).getTimeImpact());
});
var rowIndex = dataTable.addRow(row);
dataTable.setRowProperty(rowIndex, 'page', page);
});
renderGraph('Versions Total Time over all Pages', groups, dataTable,
'versionGraph', true);
}
function showPageVersionGraph(groups, page) {
var dataTable = getGraphDataTable(groups);
var row;
var vs = versions.getPageVersions(page);
vs.sort((a, b) => {
return b.getEntry(selectedGroup).time - a.getEntry(selectedGroup).time;
});
// Calculate the entries for the versions
vs.forEach((page) => {
row = [page.version.name];
groups.forEach((group) => {
row.push(group.isTotal ? 0 : page.getEntry(group).time);
});
var rowIndex = dataTable.addRow(row);
dataTable.setRowProperty(rowIndex, 'page', page);
});
renderGraph('Versions for ' + page.name, groups, dataTable,
'pageVersionGraph', true);
}
function renderGraph(title, groups, dataTable, id, isStacked) {
var isDiffView = baselineVersion !== undefined;
var formatter = new google.visualization.NumberFormat({
suffix: (isDiffView ? 'msΔ' : 'ms'),
negativeColor: 'red',
groupingSymbol: "'"
});
for (var i = 1; i < dataTable.getNumberOfColumns(); i++) {
formatter.format(dataTable, i);
}
var height = 85 + 28 * dataTable.getNumberOfRows();
var options = {
isStacked: isStacked,
height: height,
hAxis: {
minValue: 0,
},
animation:{
duration: 500,
easing: 'out',
},
vAxis: {
},
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
maxZoomIn: 0.01
},
legend: {position:'top', textStyle:{fontSize: '16px'}},
chartArea: {left:200, top:50, width:'98%', height:'80%'},
colors: groups.map(each => each.color)
};
var parentNode = $(id);
parentNode.querySelector('h2>span, h3>span').innerHTML = title;
var graphNode = parentNode.querySelector('.content');
var chart = graphNode.chart;
if (chart === undefined) {
chart = graphNode.chart = new google.visualization.BarChart(graphNode);
} else {
google.visualization.events.removeAllListeners(chart);
}
google.visualization.events.addListener(chart, 'select', selectHandler);
function getChartEntry(selection) {
if (!selection) return undefined;
var column = selection.column;
if (column == undefined) return undefined;
var selectedGroup = dataTable.getColumnProperty(column, 'group');
var row = selection.row;
if (row == null) return selectedGroup;
var page = dataTable.getRowProperty(row, 'page');
if (!page) return selectedGroup;
return page.getEntry(selectedGroup);
}
function selectHandler() {
selectedGroup = getChartEntry(chart.getSelection()[0])
if (!selectedGroup) return;
selectEntry(selectedGroup, true);
}
// Make our global tooltips work
google.visualization.events.addListener(chart, 'onmouseover', mouseOverHandler);
function mouseOverHandler(selection) {
graphNode.entry = getChartEntry(selection);
}
chart.draw(dataTable, options);
}
function showGroup(entry) {
toggleGroup(entry, true);
}
function toggleGroup(group, show) {
$('view').querySelectorAll(".child").forEach((tr) => {
var entry = tr.parentEntry;
if (!entry) return;
if (entry.name !== group.name) return;
toggleCssClass(tr, 'visible', show);
});
}
function showPopover(entry) {
var popover = $('popover');
popover.querySelector('td.name').innerHTML = entry.name;
popover.querySelector('td.page').innerHTML = entry.page.name;
setPopoverDetail(popover, entry, '');
popover.querySelector('table').className = "";
if (baselineVersion !== undefined) {
entry = baselineVersion.getEntry(entry);
setPopoverDetail(popover, entry, '.compare');
popover.querySelector('table').className = "compare";
}
}
function setPopoverDetail(popover, entry, prefix) {
var node = (name) => popover.querySelector(prefix + name);
if (entry == undefined) {
node('.version').innerHTML = baselineVersion.name;
node('.time').innerHTML = '-';
node('.timeVariance').innerHTML = '-';
node('.percent').innerHTML = '-';
node('.percentPerEntry').innerHTML = '-';
node('.percentVariance').innerHTML = '-';
node('.count').innerHTML = '-';
node('.countVariance').innerHTML = '-';
node('.timeImpact').innerHTML = '-';
node('.timePercentImpact').innerHTML = '-';
} else {
node('.version').innerHTML = entry.page.version.name;
node('.time').innerHTML = ms(entry._time, false);
node('.timeVariance').innerHTML
= percent(entry.timeVariancePercent, false);
node('.percent').innerHTML = percent(entry.timePercent, false);
node('.percentPerEntry').innerHTML
= percent(entry.timePercentPerEntry, false);
node('.percentVariance').innerHTML
= percent(entry.timePercentVariancePercent, false);
node('.count').innerHTML = count(entry._count, false);
node('.countVariance').innerHTML
= percent(entry.timeVariancePercent, false);
node('.timeImpact').innerHTML
= ms(entry.getTimeImpact(false), false);
node('.timePercentImpact').innerHTML
= percent(entry.getTimeImpactVariancePercent(false), false);
}
}
</script>
<script type="text/javascript">
"use strict"
// =========================================================================
// Helpers
function $(id) {
return document.getElementById(id)
}
function removeAllChildren(node) {
while (node.firstChild) {
node.removeChild(node.firstChild);
}
}
function selectOption(select, match) {
var options = select.options;
for (var i = 0; i < options.length; i++) {
if (match(i, options[i])) {
select.selectedIndex = i;
return;
}
}
}
function addCodeSearchButton(entry, node) {
if (entry.isGroup) return;
var button = document.createElement("div");
button.innerHTML = '?'
button.className = "codeSearch"
button.addEventListener('click', handleCodeSearch);
node.appendChild(button);
return node;
}
function td(tr, content, className) {
var td = document.createElement("td");
td.innerHTML = content;
td.className = className
tr.appendChild(td);
return td
}
function nodeIndex(node) {
var children = node.parentNode.childNodes,
i = 0;
for (; i < children.length; i++) {
if (children[i] == node) {
return i;
}
}
return -1;
}
function toggleCssClass(node, cssClass, toggleState) {
var index = -1;
var classes;
if (node.className != undefined) {
classes = node.className.split(' ');
index = classes.indexOf(cssClass);
}
if (index == -1) {
if (toggleState === false) return;
node.className += ' ' + cssClass;
return;
}
if (toggleState === true) return;
classes.splice(index, 1);
node.className = classes.join(' ');
}
function NameComparator(a, b) {
if (a.name > b.name) return 1;
if (a.name < b.name) return -1;
return 0
}
function diffSign(value, digits, unit, showDiff) {
if (showDiff === false || baselineVersion == undefined) {
if (value === undefined) return '';
return value.toFixed(digits) + unit;
}
return (value >= 0 ? '+' : '') + value.toFixed(digits) + unit + 'Δ';
}
function ms(value, showDiff) {
return diffSign(value, 1, 'ms', showDiff);
}
function count(value, showDiff) {
return diffSign(value, 0, '#', showDiff);
}
function percent(value, showDiff) {
return diffSign(value, 1, '%', showDiff);
}
</script>
<script type="text/javascript">
"use strict"
// =========================================================================
// EventHandlers
function handleBodyLoad() {
$('uploadInput').focus();
}
function handleLoadFile() {
var files = document.getElementById("uploadInput").files;
var file = files[0];
var reader = new FileReader();
reader.onload = function(evt) {
pages = new Pages();
versions = Versions.fromJSON(JSON.parse(this.result));
initialize()
showPage(versions.versions[0].pages[0]);
}
reader.readAsText(file);
}
function handleToggleGroup(event) {
var group = event.target.parentNode.parentNode.entry;
toggleGroup(selectedPage.get(group.name));
}
function handleSelectPage(select, event) {
var option = select.options[select.selectedIndex];
if (select.id == "select_0") {
showPage(option.page);
} else {
var columnIndex = select.id.split('_')[1];
showPageInColumn(option.page, columnIndex);
}
}
function handleSelectVersion(select, event) {
var option = select.options[select.selectedIndex];
var version = option.version;
if (select.id == "selectVersion_0") {
var page = version.get(selectedPage.name);
showPage(page);
} else {
var columnIndex = select.id.split('_')[1];
var pageSelect = $('select_' + columnIndex);
var page = pageSelect.options[pageSelect.selectedIndex].page;
page = version.get(page.name);
showPageInColumn(page, columnIndex);
}
}
function handleSelectDetailRow(table, event) {
if (event.target.tagName != 'TD') return;
var tr = event.target.parentNode;
if (tr.tagName != 'TR') return;
if (tr.entry === undefined) return;
selectEntry(tr.entry, true);
}
function handleSelectRow(table, event, fromDetail) {
if (event.target.tagName != 'TD') return;
var tr = event.target.parentNode;
if (tr.tagName != 'TR') return;
if (tr.entry === undefined) return;
selectEntry(tr.entry, false);
}
function handleSelectBaseline(select, event) {
var option = select.options[select.selectedIndex];
baselineVersion = option.version;
var showingDiff = baselineVersion !== undefined;
var body = $('body');
toggleCssClass(body, 'diff', showingDiff);
toggleCssClass(body, 'noDiff', !showingDiff);
showPage(selectedPage);
if (selectedEntry === undefined) return;
selectEntry(selectedEntry, true);
}
function findEntry(event) {
var target = event.target;
while (target.entry === undefined) {
target = target.parentNode;
if (!target) return undefined;
}
return target.entry;
}
function handleUpdatePopover(event) {
var popover = $('popover');
popover.style.left = event.pageX + 'px';
popover.style.top = event.pageY + 'px';
popover.style.display = 'none';
popover.style.display = event.shiftKey ? 'block' : 'none';
var entry = findEntry(event);
if (entry === undefined) return;
showPopover(entry);
}
function handleToggleVersionEnable(event) {
var item = this.item ;
if (item === undefined) return;
item .enabled = this.checked;
initialize();
var page = selectedPage;
if (page === undefined || !page.version.enabled) {
page = versions.getEnabledPage(page.name);
}
showPage(page);
}
function handleToggleContentVisibility(event) {
var content = event.target.contentNode;
toggleCssClass(content, 'hidden');
}
function handleCodeSearch(event) {
var entry = findEntry(event);
if (entry === undefined) return;
var url = "https://cs.chromium.org/search/?sq=package:chromium&type=cs&q=";
name = entry.name;
if (name.startsWith("API_")) {
name = name.substring(4);
}
url += encodeURIComponent(name) + "+file:src/v8/src";
window.open(url,'_blank');
}
</script>
<script type="text/javascript">
"use strict"
// =========================================================================
class Versions {
constructor() {
this.versions = [];
}
add(version) {
this.versions.push(version)
}
getPageVersions(page) {
var result = [];
this.versions.forEach((version) => {
if (!version.enabled) return;
var versionPage = version.get(page.name);
if (versionPage !== undefined) result.push(versionPage);
});
return result;
}
get length() {
return this.versions.length
}
get(index) {
return this.versions[index]
};
forEach(f) {
this.versions.forEach(f);
}
sort() {
this.versions.sort(NameComparator);
}
getEnabledPage(name) {
for (var i = 0; i < this.versions.length; i++) {
var version = this.versions[i];
if (!version.enabled) continue;
var page = version.get(name);
if (page !== undefined) return page;
}
}
}
Versions.fromJSON = function(json) {
var versions = new Versions();
for (var version in json) {
versions.add(Version.fromJSON(version, json[version]));
}
versions.sort();
return versions;
}
class Version {
constructor(name) {
this.name = name;
this.enabled = true;
this.pages = [];
}
add(page) {
this.pages.push(page);
}
indexOf(name) {
for (var i = 0; i < this.pages.length; i++) {
if (this.pages[i].name == name) return i;
}
return -1;
}
get(name) {
var index = this.indexOf(name);
if (0 <= index) return this.pages[index];
return undefined
}
get length() {
return this.versions.length
}
getEntry(entry) {
if (entry === undefined) return undefined;
var page = this.get(entry.page.name);
if (page === undefined) return undefined;
return page.get(entry.name);
}
forEachEntry(fun) {
this.forEachPage((page) => {
page.forEach(fun);
});
}
forEachPage(fun) {
this.pages.forEach((page) => {
if (!page.enabled) return;
fun(page);
})
}
allEntries() {
var map = new Map();
this.forEachEntry((group, entry) => {
if (!map.has(entry.name)) map.set(entry.name, entry);
});
return Array.from(map.values());
}
getTotalValue(name, property) {
if (name === undefined) name = this.pages[0].total.name;
var sum = 0;
this.forEachPage((page) => {
var entry = page.get(name);
if (entry !== undefined) sum += entry[property];
});
return sum;
}
getTotalTime(name, showDiff) {
return this.getTotalValue(name, showDiff === false ? '_time' : 'time');
}
getTotalTimePercent(name, showDiff) {
if (baselineVersion === undefined || showDiff === false) {
// Return the overall average percent of the given entry name.
return this.getTotalValue(name, 'time') /
this.getTotalTime('Group-Total') * 100;
}
// Otherwise return the difference to the sum of the baseline version.
var baselineValue = baselineVersion.getTotalTime(name, false);
var total = this.getTotalValue(name, '_time');
return (total / baselineValue - 1) * 100;
}
getTotalTimeVariance(name, showDiff) {
// Calculate the overall error for a given entry name
var sum = 0;
this.forEachPage((page) => {
var entry = page.get(name);
if (entry === undefined) return;
sum += entry.timeVariance * entry.timeVariance;
});
return Math.sqrt(sum);
}
getTotalTimeVariancePercent(name, showDiff) {
return this.getTotalTimeVariance(name, showDiff) /
this.getTotalTime(name, showDiff) * 100;
}
getTotalCount(name, showDiff) {
return this.getTotalValue(name, showDiff === false ? '_count' : 'count');
}
getAverageTimeImpact(name, showDiff) {
return this.getTotalTime(name, showDiff) / this.pages.length;
}
getPagesByPercentImpact(name) {
var sortedPages =
this.pages.filter((each) => {
return each.get(name) !== undefined
});
sortedPages.sort((a, b) => {
return b.get(name).timePercent - a.get(name).timePercent;
});
return sortedPages;
}
sort() {
this.pages.sort(NameComparator)
}
}
Version.fromJSON = function(name, data) {
var version = new Version(name);
for (var pageName in data) {
version.add(PageVersion.fromJSON(version, pageName, data[pageName]));
}
version.sort();
return version;
}
class Pages extends Map {
get(name) {
if (name.indexOf('www.') == 0) {
name = name.substring(4);
}
if (!this.has(name)) {
this.set(name, new Page(name));
}
return super.get(name);
}
}
class Page {
constructor(name) {
this.name = name;
this.enabled = true;
this.versions = [];
}
add(page) {
this.versions.push(page);
}
}
class PageVersion {
constructor(version, page) {
this.page = page;
this.page.add(this);
this.total = new GroupedEntry('Total', /.*Total.*/, '#BBB');
this.total.isTotal = true;
this.unclassified = new UnclassifiedEntry(this, "#000")
this.groups = [
this.total,
new GroupedEntry('IC', /.*IC.*/, "#3366CC"),
new GroupedEntry('Optimize',
/StackGuard|.*Optimize.*|.*Deoptimize.*|Recompile.*/, "#DC3912"),
new GroupedEntry('Compile', /.*Compile.*/, "#FFAA00"),
new GroupedEntry('Parse', /.*Parse.*/, "#FF6600"),
new GroupedEntry('Callback', /.*Callback$/, "#109618"),
new GroupedEntry('API', /.*API.*/, "#990099"),
new GroupedEntry('GC', /GC|AllocateInTargetSpace/, "#0099C6"),
new GroupedEntry('JavaScript', /JS_Execution/, "#DD4477"),
new GroupedEntry('Runtime', /.*/, "#88BB00"),
this.unclassified
];
this.entryDict = new Map();
this.groups.forEach((entry) => {
entry.page = this;
this.entryDict.set(entry.name, entry);
});
this.version = version;
}
add(entry) {
entry.page = this;
this.entryDict.set(entry.name, entry);
var added = false;
this.groups.forEach((group) => {
if (!added) added = group.add(entry);
});
if (added) return;
this.unclassified.push(entry);
}
get(name) {
return this.entryDict.get(name)
}
getEntry(entry) {
if (entry === undefined) return undefined;
return this.get(entry.name);
}
get length() {
return this.versions.length
}
get name() { return this.page.name }
get enabled() { return this.page.enabled }
forEachSorted(referencePage, func) {
// Iterate over all the entries in the order they appear on the
// reference page.
referencePage.forEach((parent, referenceEntry) => {
var entry;
if (parent) parent = this.entryDict.get(parent.name);
if (referenceEntry) entry = this.entryDict.get(referenceEntry.name);
func(parent, entry, referenceEntry);
});
}
forEach(fun) {
this.forEachGroup((group) => {
fun(undefined, group);
group.forEach((entry) => {
fun(group, entry)
});
});
}
forEachGroup(fun) {
this.groups.forEach(fun)
}
sort() {
this.groups.sort((a, b) => {
return b.time - a.time;
});
this.groups.forEach((group) => {
group.sort()
});
}
distanceFromTotalPercent() {
var sum = 0;
this.groups.forEach(group => {
if (group == this.total) return;
var value = group.getTimePercentImpact() -
this.getEntry(group).timePercent;
sum += value * value;
});
return sum;
}
}
PageVersion.fromJSON = function(version, name, data) {
var page = new PageVersion(version, pages.get(name));
for (var i = 0; i < data.length; i++) {
page.add(Entry.fromJSON(i, data[data.length - i - 1]));
}
page.sort();
return page
}
class Entry {
constructor(position, name, time, timeVariance, timeVariancePercent,
count,
countVariance, countVariancePercent) {
this.position = position;
this.name = name;
this._time = time;
this._timeVariance = timeVariance;
this._timeVariancePercent = timeVariancePercent;
this._count = count;
this.countVariance = countVariance;
this.countVariancePercent = countVariancePercent;
this.page = undefined;
this.parent = undefined;
this.isTotal = false;
}
getCompareWithBaseline(value, property) {
if (baselineVersion == undefined) return value;
var baselineEntry = baselineVersion.getEntry(this);
if (!baselineEntry) return value;
if (baselineVersion === this.page.version) return value;
return value - baselineEntry[property];
}
cssClass() {
return ''
}
get time() {
return this.getCompareWithBaseline(this._time, '_time');
}
get count() {
return this.getCompareWithBaseline(this._count, '_count');
}
get timePercent() {
var value = this._time / this.page.total._time * 100;
if (baselineVersion == undefined) return value;
var baselineEntry = baselineVersion.getEntry(this);
if (!baselineEntry) return value;
if (baselineVersion === this.page.version) return value;
return (this._time - baselineEntry._time) / this.page.total._time *
100;
}
get timePercentPerEntry() {
var value = this._time / this.page.total._time * 100;
if (baselineVersion == undefined) return value;
var baselineEntry = baselineVersion.getEntry(this);
if (!baselineEntry) return value;
if (baselineVersion === this.page.version) return value;
return (this._time / baselineEntry._time - 1) * 100;
}
get timePercentVariancePercent() {
// Get the absolute values for the percentages
return this.timeVariance / this.page.total._time * 100;
}
getTimeImpact(showDiff) {
return this.page.version.getTotalTime(this.name, showDiff);
}
getTimeImpactVariancePercent(showDiff) {
return this.page.version.getTotalTimeVariancePercent(this.name, showDiff);
}
getTimePercentImpact(showDiff) {
return this.page.version.getTotalTimePercent(this.name, showDiff);
}
getCountImpact(showDiff) {
return this.page.version.getTotalCount(this.name, showDiff);
}
getAverageTimeImpact(showDiff) {
return this.page.version.getAverageTimeImpact(this.name, showDiff);
}
getPagesByPercentImpact() {
return this.page.version.getPagesByPercentImpact(this.name);
}
get isGroup() {
return false
}
get timeVariance() {
return this._timeVariance
}
get timeVariancePercent() {
return this._timeVariancePercent
}
}
Entry.fromJSON = function(position, data) {
return new Entry(position, ...data);
}
class GroupedEntry extends Entry {
constructor(name, regexp, color) {
super(0, 'Group-' + name, 0, 0, 0, 0, 0, 0);
this.regexp = regexp;
this.color = color;
this.entries = [];
}
add(entry) {
if (!entry.name.match(this.regexp)) return false;
this._time += entry.time;
this._count += entry.count;
// TODO: sum up variance
this.entries.push(entry);
entry.parent = this;
return true;
}
forEach(fun) {
if (baselineVersion === undefined) {
this.entries.forEach(fun);
return;
}
// If we have a baslineVersion to compare against show also all entries
// from the other group.
var tmpEntries = baselineVersion.getEntry(this)
.entries.filter((entry) => {
return this.page.get(entry.name) == undefined
});
// The compared entries are sorted by absolute impact.
tmpEntries = tmpEntries.map((entry) => {
var tmpEntry = new Entry(0, entry.name, 0, 0, 0, 0, 0, 0);
tmpEntry.page = this.page;
return tmpEntry;
});
tmpEntries = tmpEntries.concat(this.entries);
tmpEntries.sort((a, b) => {
return a.time - b.time
});
tmpEntries.forEach(fun);
}
sort() {
this.entries.sort((a, b) => {
return b.time - a.time;
});
}
cssClass() {
if (this.page.total == this) return 'total';
return '';
}
get isGroup() {
return true
}
getVarianceForProperty(property) {
var sum = 0;
this.entries.forEach((entry) => {
sum += entry[property + 'Variance'] * entry[property +
'Variance'];
});
return Math.sqrt(sum);
}
get timeVariancePercent() {
if (this._time == 0) return 0;
return this.getVarianceForProperty('time') / this._time * 100
}
get timeVariance() {
return this.getVarianceForProperty('time')
}
}
class UnclassifiedEntry extends GroupedEntry {
constructor(page, color) {
super('Unclassified', undefined, color);
this.page = page;
this._time = undefined;
this._count = undefined;
}
add(entry) {
this.entries.push(entry);
entry.parent = this;
return true;
}
forEachPageGroup(fun) {
this.page.forEachGroup((group) => {
if (group == this) return;
if (group == this.page.total) return;
fun(group);
});
}
get time() {
if (this._time === undefined) {
this._time = this.page.total._time;
this.forEachPageGroup((group) => {
this._time -= group._time;
});
}
return this.getCompareWithBaseline(this._time, '_time');
}
get count() {
if (this._count === undefined) {
this._count = this.page.total._count;
this.forEachPageGroup((group) => {
this._count -= group._count;
});
}
return this.getCompareWithBaseline(this._count, '_count');
}
}
</script>
</head>
<body id="body" onmousemove="handleUpdatePopover(event)" onload="handleBodyLoad()" class="noDiff">
<h1>Runtime Stats Komparator</h1>
<div id="results">
<div class="inline">
<h2>Data</h2>
<form name="fileForm">
<p>
<input id="uploadInput" type="file" name="files" onchange="handleLoadFile();" accept=".json">
</p>
</form>
</div>
<div class="inline hidden">
<h2>Result</h2>
<div class="compareSelector inline">
Compare against: <select id="baseline" onchange="handleSelectBaseline(this, event)"></select><br/>
<span style="color: #060">Green</span> the selected version above performs
better on this measurement.
</div>
</div>
<div id="versionSelector" class="inline toggleContentVisibility">
<h2>Version Selector</h2>
<div class="content hidden">
<ul></ul>
</div>
</div>
<div id="pageSelector" class="inline toggleContentVisibility">
<h2>Page Selector</h2>
<div class="content hidden">
<ul></ul>
</div>
</div>
<div id="view">
</div>
<div id="detailView" class="hidden">
<div class="versionDetail inline toggleContentVisibility">
<h3><span></span></h3>
<div class="content">
<table class="versionDetailTable" onclick="handleSelectDetailRow(this, event);">
<thead>
<tr>
<th class="version">Version </th>
<th class="position">Pos. </th>
<th class="value time">Time▴ </th>
<th class="value time">Percent </th>
<th class="value count">Count </th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="pageDetail inline toggleContentVisibility">
<h3>Page Comparison for <span></span></h3>
<div class="content">
<table class="pageDetailTable" onclick="handleSelectDetailRow(this, event);">
<thead>
<tr>
<th class="page">Page </th>
<th class="value time">Time </th>
<th class="value time">Percent▾ </th>
<th class="value time hideNoDiff">%/Entry </th>
<th class="value count">Count </th>
</tr>
</thead>
<tfoot>
<tr>
<td class="page">Total:</td>
<td class="value time"></td>
<td class="value time"></td>
<td class="value time hideNoDiff"></td>
<td class="value count"></td>
</tr>
</tfoot>
<tbody></tbody>
</table>
</div>
</div>
<div class="impactView inline toggleContentVisibility">
<h3>Impact list for <span></span></h3>
<div class="content">
<table class="pageDetailTable" onclick="handleSelectDetailRow(this, event);">
<thead>
<tr>
<th class="page">Name </th>
<th class="value time">Time </th>
<th class="value time">Percent▾ </th>
<th class="">Top Pages</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<div id="pageVersionGraph" class="graph hidden toggleContentVisibility">
<h3><span></span></h3>
<div class="content"></div>
</div>
<div id="pageGraph" class="graph hidden toggleContentVisibility">
<h3><span></span></h3>
<div class="content"></div>
</div>
<div id="versionGraph" class="graph hidden toggleContentVisibility">
<h3><span></span></h3>
<div class="content"></div>
</div>
<div id="column" class="column">
<div class="header">
<select class="version" onchange="handleSelectVersion(this, event);"></select>
<select class="pageVersion" onchange="handleSelectPage(this, event);"></select>
</div>
<table class="list" onclick="handleSelectRow(this, event);">
<thead>
<tr>
<th class="position">Pos. </th>
<th class="name">Name </th>
<th class="value time">Time </th>
<th class="value time">Percent </th>
<th class="value count">Count </th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="inline">
<h2>Usage</h2>
<ol>
<li>Install scipy, e.g. <code>sudo aptitude install python-scipy</code>
<li>Build chrome with the <a href="https://codereview.chromium.org/1923893002">extended runtime callstats</a>.</li>
<li>Run <code>callstats.py</code> with a web-page-replay archive:
<pre>$V8_DIR/tools/callstats.py run \
--replay-bin=$CHROME_SRC/third_party/webpagereplay/replay.py \
--replay-wpr=$INPUT_DIR/top25.wpr \
--js-flags="" \
--with-chrome=$CHROME_SRC/out/Release/chrome \
--sites-file=$INPUT_DIR/top25.json</pre>
</li>
<li>Move results file to a subdirectory: <code>mkdir $VERSION_DIR; mv *.txt $VERSION_DIR</code></li>
<li>Repeat from step 1 with a different configuration (e.g. <code>--js-flags="--nolazy"</code>).</li>
<li>Create the final results file: <code>./callstats.py json $VERSION_DIR1 $VERSION_DIR2 > result.json</code></li>
<li>Use <code>results.json</code> on this site.</code>
</ol>
</div>
<div id="popover">
<div class="popoverArrow"></div>
<table>
<tr>
<td class="name" colspan="6"></td>
</tr>
<tr>
<td>Page:</td>
<td class="page name" colspan="6"></td>
</tr>
<tr>
<td>Version:</td>
<td class="version name" colspan="3"></td>
<td class="compare version name" colspan="3"></td>
</tr>
<tr>
<td>Time:</td>
<td class="time"></td><td>±</td><td class="timeVariance"></td>
<td class="compare time"></td><td class="compare"> ± </td><td class="compare timeVariance"></td>
</tr>
<tr>
<td>Percent:</td>
<td class="percent"></td><td>±</td><td class="percentVariance"></td>
<td class="compare percent"></td><td class="compare"> ± </td><td class="compare percentVariance"></td>
</tr>
<tr>
<td>Percent per Entry:</td>
<td class="percentPerEntry"></td><td colspan=2></td>
<td class="compare percentPerEntry"></td><td colspan=2></td>
</tr>
<tr>
<td>Count:</td>
<td class="count"></td><td>±</td><td class="countVariance"></td>
<td class="compare count"></td><td class="compare"> ± </td><td class="compare countVariance"></td>
</tr>
<tr>
<td>Overall Impact:</td>
<td class="timeImpact"></td><td>±</td><td class="timePercentImpact"></td>
<td class="compare timeImpact"></td><td class="compare"> ± </td><td class="compare timePercentImpact"></td>
</tr>
</table>
</div>
</body>
</html>