[tools] improving callstats.html istructions and making callstats.py executable
BUG= Review-Url: https://codereview.chromium.org/1964453002 Cr-Commit-Position: refs/heads/master@{#36173}
This commit is contained in:
cbruni
Commit bot
parent
5fa1c61ee0
commit
c4af1ba7e4
@ -152,6 +152,10 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.pageDetailTable tfoot td {
|
||||
border-top: 1px grey solid;
|
||||
}
|
||||
|
||||
#popover {
|
||||
position: absolute;
|
||||
transform: translateY(-50%) translateX(40px);
|
||||
@ -198,9 +202,16 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
#popover table.compare .compare {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
#popover .compare .time,
|
||||
#popover .compare .version {
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
<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) {
|
||||
@ -218,7 +229,11 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
|
||||
function initialize() {
|
||||
var original = $("column");
|
||||
for (var i = 0; i < versions.length || i < 2; i++) {
|
||||
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;
|
||||
@ -227,6 +242,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
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;
|
||||
@ -235,8 +251,9 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
// Fill in all page versions
|
||||
select = column.querySelector(".pageVersion");
|
||||
select.id = "select_" + i;
|
||||
// add all select options
|
||||
// add all pages
|
||||
versions.forEach((version) => {
|
||||
if (!version.enabled) return;
|
||||
var optgroup = document.createElement("optgroup");
|
||||
optgroup.label = version.name;
|
||||
optgroup.version = version;
|
||||
@ -248,8 +265,12 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
});
|
||||
select.appendChild(optgroup);
|
||||
});
|
||||
$("view").appendChild(column);
|
||||
}
|
||||
view.appendChild(column);
|
||||
i++;
|
||||
});
|
||||
var oldView = $('view');
|
||||
oldView.parentNode.replaceChild(view, oldView);
|
||||
|
||||
var select = $('baseline');
|
||||
removeAllChildren(select);
|
||||
select.appendChild(document.createElement('option'));
|
||||
@ -259,12 +280,28 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
option.version = version;
|
||||
select.appendChild(option);
|
||||
});
|
||||
|
||||
var versionSelectorList = $('results').querySelector('.versionSelector ul');
|
||||
removeAllChildren(versionSelectorList);
|
||||
versions.forEach((version) => {
|
||||
var li = document.createElement('li');
|
||||
var checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.checked = version.enabled;
|
||||
checkbox.version = version;
|
||||
checkbox.addEventListener('click', handleToggleVersionEnable);
|
||||
li.appendChild(checkbox);
|
||||
li.appendChild(document.createTextNode(version.name));
|
||||
versionSelectorList.appendChild(li);
|
||||
});
|
||||
$('results').querySelectorAll('#results > .hidden').forEach((node) => {
|
||||
toggleCssClass(node, 'hidden', false);
|
||||
});
|
||||
}
|
||||
|
||||
function showPage(firstPage) {
|
||||
var changeSelectedEntry = selectedEntry !== undefined
|
||||
&& selectedEntry.page === selectedPage;
|
||||
selectedPage = firstPage;
|
||||
selectedPage.sort();
|
||||
showPageInColumn(firstPage, 0);
|
||||
@ -277,7 +314,11 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
index++;
|
||||
}
|
||||
});
|
||||
showImpactList(selectedPage);
|
||||
if (changeSelectedEntry) {
|
||||
showEntryDetail(selectedPage.getEntry(selectedEntry));
|
||||
} else {
|
||||
showImpactList(selectedPage);
|
||||
}
|
||||
}
|
||||
|
||||
function showPageInColumn(page, columnIndex) {
|
||||
@ -318,10 +359,9 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
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.
|
||||
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;
|
||||
@ -330,11 +370,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
tbody.appendChild(tr);
|
||||
tr.entry = entry;
|
||||
tr.parentEntry = parentEntry;
|
||||
if (!parentEntry) {
|
||||
tr.className = 'parent'
|
||||
} else {
|
||||
tr.className = 'child'
|
||||
}
|
||||
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) {
|
||||
@ -359,7 +395,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
diffStatus(
|
||||
td(tr, count(entry.count), 'value count'),
|
||||
entry.count, referenceEntry.count);
|
||||
} else if (baselineVersion !== undefined && referenceEntry
|
||||
} else if (baselineVersion !== undefined && referenceEntry
|
||||
&& page.version !== baselineVersion) {
|
||||
// Show comparison of entry that does not exist on the current page.
|
||||
tr.entry = referenceEntry;
|
||||
@ -376,7 +412,8 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
referenceEntry.count, 0);
|
||||
} else {
|
||||
// Display empty entry / baseline entry
|
||||
if (entry !== undefined) {
|
||||
var showBaselineEntry = entry !== undefined;
|
||||
if (showBaselineEntry) {
|
||||
if (!parentEntry) {
|
||||
var node = td(tr, '<div class="toggle">►</div>', 'position');
|
||||
node.firstChild.addEventListener('click', handleToggleGroup);
|
||||
@ -384,13 +421,16 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
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');
|
||||
}
|
||||
td(tr, '-', 'value time');
|
||||
td(tr, '-', 'value time');
|
||||
td(tr, '-', 'value count');
|
||||
}
|
||||
});
|
||||
table.replaceChild(tbody, oldTbody);
|
||||
@ -427,8 +467,8 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
$('view').querySelectorAll("tbody").forEach((body) => {
|
||||
var row = body.childNodes[rowIndex];
|
||||
if (!row) return;
|
||||
toggleCssClass(row, 'selected',
|
||||
row.entry && row.entry.name == firstEntry.name);
|
||||
toggleCssClass(row, 'selected', row.entry && row.entry.name ==
|
||||
firstEntry.name);
|
||||
});
|
||||
if (updateSelectedPage) {
|
||||
entry = selectedEntry.page.version.getEntry(entry);
|
||||
@ -442,8 +482,8 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
table = $('detailView').querySelector('.versionDetailTable');
|
||||
tbody = document.createElement('tbody');
|
||||
if (entry !== undefined) {
|
||||
$('detailView').querySelector('.versionDetail h3 span').innerHTML
|
||||
= entry.name;
|
||||
$('detailView').querySelector('.versionDetail h3 span').innerHTML =
|
||||
entry.name;
|
||||
entries = versions.pageVersions(entry.page.name).map(
|
||||
(page) => {
|
||||
return page.get(entry.name)
|
||||
@ -470,14 +510,16 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
tbody = document.createElement('tbody');
|
||||
if (entry !== undefined) {
|
||||
var version = entry.page.version;
|
||||
$('detailView').querySelector('.pageDetail h3 span').innerHTML
|
||||
= version.name;
|
||||
$('detailView').querySelector('.pageDetail h3 span').innerHTML =
|
||||
version.name;
|
||||
entries = version.pages.map(
|
||||
(page) => {
|
||||
return page.get(entry.name)
|
||||
});
|
||||
entries.sort((a, b) => {
|
||||
return b.timePercent - a.timePercent
|
||||
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;
|
||||
@ -495,15 +537,12 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
var tds = table.querySelectorAll('tfoot td');
|
||||
tds[2].innerHTML = ms(entry.getTimeImpact());
|
||||
// Only show the percentage total if we are in diff mode:
|
||||
if (baselineVersion !== undefined) {
|
||||
tds[3].innerHTML = percent(entry.getTimePercentImpact());
|
||||
} else {
|
||||
tds[3].innerHTML = ''
|
||||
}
|
||||
tds[3].innerHTML = percent(entry.getTimePercentImpact());
|
||||
tds[4].innerHTML = count(entry.getCountImpact());
|
||||
}
|
||||
table.replaceChild(tbody, table.querySelector('tbody'));
|
||||
showImpactList(entry.page);
|
||||
showPageGraphs(entry.page);
|
||||
}
|
||||
|
||||
function showImpactList(page) {
|
||||
@ -515,32 +554,102 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
var version = page.version;
|
||||
var entries = version.allEntries();
|
||||
if (selectedEntry !== undefined && selectedEntry.isGroup) {
|
||||
impactView.querySelector('h3 span').innerHTML
|
||||
+= " " + selectedEntry.name;
|
||||
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) => {
|
||||
return b.getTimePercentImpact() - a.getTimePercentImpact();
|
||||
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');
|
||||
td(tr, percent(entry.getTimePercentImpact()), 'value time');
|
||||
var topPages = entry.getPagesByPercentImpact().slice(0, 2)
|
||||
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) + ')'
|
||||
return each.name + ' (' + percent(each.getEntry(entry).timePercent) +
|
||||
')'
|
||||
});
|
||||
td(tr, topPages.join(', '), 'name');
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
table.replaceChild(tbody, table.querySelector('tbody'));
|
||||
}
|
||||
|
||||
var selectedGroup;
|
||||
function showPageGraphs(page) {
|
||||
var groups = page.groups.filter(each => each.name != page.total.name);
|
||||
if (selectedGroup == undefined) {
|
||||
selectedGroup = groups[0];
|
||||
} else {
|
||||
groups = groups.filter(each => each.name != selectedGroup.name);
|
||||
groups.unshift(selectedGroup);
|
||||
}
|
||||
var dataTable = new google.visualization.DataTable();
|
||||
dataTable.addColumn('string', 'Name');
|
||||
groups.forEach(group => {
|
||||
var column = dataTable.addColumn('number', group.name);
|
||||
dataTable.setColumnProperty(column, 'group', group);
|
||||
});
|
||||
// Calculate the average row
|
||||
var row = ['Average'];
|
||||
groups.forEach((group) => {
|
||||
row.push(group.getTimeImpact());
|
||||
});
|
||||
dataTable.addRow(row);
|
||||
// Sort the pages by the selected group.
|
||||
var pages = page.version.pages.slice();
|
||||
pages.sort((a, b) => {
|
||||
return b.getEntry(selectedGroup).timePercent - a.getEntry(selectedGroup).timePercent;
|
||||
});
|
||||
// Calculate the entries for the pages
|
||||
pages.forEach((page) => {
|
||||
row = [page.name];
|
||||
groups.forEach((group) => {
|
||||
row.push(page.getEntry(group).time);
|
||||
});
|
||||
dataTable.addRow(row);
|
||||
});
|
||||
|
||||
var height = 1000/27*page.version.pages.length;
|
||||
var options = {
|
||||
title: 'Page Comparison for Version ' + page.version.name,
|
||||
isStacked: 'percent',
|
||||
height: height ,
|
||||
hAxis: {
|
||||
title: '% Time',
|
||||
minValue: 0,
|
||||
},
|
||||
vAxis: {
|
||||
}
|
||||
};
|
||||
var chart = new google.visualization.BarChart($('pageGraphs'));
|
||||
chart.draw(dataTable, options);
|
||||
google.visualization.events.addListener(chart, 'select', selectHandler);
|
||||
function selectHandler() {
|
||||
var column = chart.getSelection()[0].column;
|
||||
if (column === undefined) return;
|
||||
selectedGroup = dataTable.getColumnProperty(column, 'group');
|
||||
showPageGraphs(selectedEntry.page);
|
||||
}
|
||||
}
|
||||
|
||||
function showGroup(entry) {
|
||||
toggleGroup(entry, true);
|
||||
@ -563,34 +672,42 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
popover.querySelector('table').className = "";
|
||||
if (baselineVersion !== undefined) {
|
||||
entry = baselineVersion.getEntry(entry);
|
||||
if (entry === undefined) return;
|
||||
setPopoverDetail(popover, entry, '.compare');
|
||||
popover.querySelector('table').className = "compare";
|
||||
}
|
||||
}
|
||||
|
||||
function setPopoverDetail(popover, entry, prefix) {
|
||||
popover.querySelector(prefix + '.version').innerHTML
|
||||
= entry.page.version.name;
|
||||
popover.querySelector(prefix + '.time').innerHTML
|
||||
= ms(entry._time, false);
|
||||
popover.querySelector(prefix + '.timeVariance').innerHTML
|
||||
= percent(entry.timeVariancePercent, false);
|
||||
popover.querySelector(prefix + '.percent').innerHTML
|
||||
= percent(entry.timePercent, false);
|
||||
popover.querySelector(prefix + '.percentVariance').innerHTML
|
||||
= percent(entry.timePercentVariancePercent, false);
|
||||
popover.querySelector(prefix + '.count').innerHTML
|
||||
= count(entry._count, false);
|
||||
popover.querySelector(prefix + '.countVariance').innerHTML
|
||||
= percent(entry.timeVariancePercent, false);
|
||||
popover.querySelector(prefix + '.timeImpact').innerHTML
|
||||
= ms(entry.getTimeImpact(false), false);
|
||||
popover.querySelector(prefix + '.timePercentImpact').innerHTML
|
||||
= percent(entry.getTimeImpactVariancePercent(false), false);
|
||||
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('.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('.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);
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// ===========================================================================
|
||||
// Helpers
|
||||
function $(id) {
|
||||
return document.getElementById(id)
|
||||
@ -648,25 +765,31 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
node.className = classes.join(' ');
|
||||
}
|
||||
|
||||
function diffSign(value, showDiff) {
|
||||
if (value <= 0 || showDiff === false) return '';
|
||||
if (baselineVersion == undefined) return '';
|
||||
return '+';
|
||||
function diffSign(value, digits, unit, showDiff) {
|
||||
if (showDiff === false || baselineVersion == undefined) {
|
||||
return value.toFixed(digits) + unit;
|
||||
}
|
||||
return (value >= 0 ? '+' : '') + value.toFixed(digits) + unit + 'Δ';
|
||||
}
|
||||
|
||||
function ms(time, showDiff) {
|
||||
return diffSign(time, showDiff) + time.toFixed(1) + 'ms';
|
||||
function ms(value, showDiff) {
|
||||
return diffSign(value, 1, 'ms', showDiff);
|
||||
}
|
||||
|
||||
function count(time, showDiff) {
|
||||
return diffSign(time, showDiff) + time.toFixed(0) + '#';
|
||||
function count(value, showDiff) {
|
||||
return diffSign(value, 0, '#', showDiff);
|
||||
}
|
||||
|
||||
function percent(time, showDiff) {
|
||||
return diffSign(time, showDiff) + time.toFixed(1) + '%';
|
||||
function percent(value, showDiff) {
|
||||
return diffSign(value, 1, '%', showDiff);
|
||||
}
|
||||
// ========================================================================
|
||||
|
||||
// =========================================================================
|
||||
// EventHandlers
|
||||
function handleBodyLoad() {
|
||||
$('uploadInput').focus();
|
||||
}
|
||||
|
||||
function handleLoadFile() {
|
||||
var files = document.getElementById("uploadInput").files;
|
||||
var file = files[0];
|
||||
@ -747,7 +870,19 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
showPopover(target.entry);
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
function handleToggleVersionEnable(event) {
|
||||
var version = this.version;
|
||||
if (version === undefined) return;
|
||||
version.enabled = this.checked;
|
||||
initialize();
|
||||
var page = selectedPage;
|
||||
if (page === undefined || !page.version.enabled) {
|
||||
page = versions.getEnabledPage(page.name);
|
||||
}
|
||||
showPage(page);
|
||||
}
|
||||
|
||||
// ===========================================================================
|
||||
|
||||
class Versions {
|
||||
constructor() {
|
||||
@ -759,6 +894,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
pageVersions(name) {
|
||||
var result = [];
|
||||
this.versions.forEach((version) => {
|
||||
if (!version.enabled) return;
|
||||
var page = version.get(name);
|
||||
if (page !== undefined) result.push(page);
|
||||
});
|
||||
@ -780,6 +916,14 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
return 0
|
||||
})
|
||||
}
|
||||
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();
|
||||
@ -793,7 +937,8 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
class Version {
|
||||
constructor(name) {
|
||||
this.name = name;
|
||||
this.pages = []
|
||||
this.enabled = true;
|
||||
this.pages = [];
|
||||
}
|
||||
add(page) {
|
||||
this.pages.push(page);
|
||||
@ -844,10 +989,13 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
}
|
||||
getTotalTimePercent(name, showDiff) {
|
||||
if (baselineVersion === undefined) {
|
||||
return this.getTotalValue(name, 'timePercent');
|
||||
// Return the overall average percent of the given entry name.
|
||||
return this.getTotalValue(name, 'time') /
|
||||
this.getTotalTime('Group-Total') * 100;
|
||||
}
|
||||
var baselineValue = baselineVersion.getTotalTime(name);
|
||||
return this.getTotalValue(name, 'time') / baselineValue * 100;
|
||||
// Otherwise return the difference to the sum of the baseline version.
|
||||
var baselineValue = baselineVersion.getTotalTime(name, false);
|
||||
return this.getTotalValue(name, '_time') / baselineValue * 100;
|
||||
}
|
||||
getTotalTimeVariance(name, showDiff) {
|
||||
// Calculate the overall error for a given entry name
|
||||
@ -864,8 +1012,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
this.getTotalTime(name, showDiff) * 100;
|
||||
}
|
||||
getTotalCount(name, showDiff) {
|
||||
var property = showDiff === false ? '_count' : 'count';
|
||||
return this.getTotalValue(name, property);
|
||||
return this.getTotalValue(name, showDiff === false ? '_count' : 'count');
|
||||
}
|
||||
getPagesByPercentImpact(name) {
|
||||
var sortedPages =
|
||||
@ -877,12 +1024,20 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
});
|
||||
return sortedPages;
|
||||
}
|
||||
sort() {
|
||||
this.pages.sort((a, b) => {
|
||||
if (a.name > b.name) return 1;
|
||||
if (a.name < b.name) return -1;
|
||||
return 0
|
||||
})
|
||||
}
|
||||
}
|
||||
Version.fromJSON = function(name, data) {
|
||||
var version = new Version(name);
|
||||
for (var page in data) {
|
||||
version.add(Page.fromJSON(version, page, data[page]));
|
||||
}
|
||||
version.sort();
|
||||
return version;
|
||||
}
|
||||
|
||||
@ -932,8 +1087,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
return this.versions.length
|
||||
}
|
||||
forEachSorted(referencePage, func) {
|
||||
// Iterate over all the entries in the order they appear on the
|
||||
// reference page.
|
||||
// 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);
|
||||
@ -962,6 +1116,9 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
}
|
||||
}
|
||||
Page.fromJSON = function(version, name, data) {
|
||||
if (name.indexOf('www.') == 0) {
|
||||
name = name.substring(4);
|
||||
}
|
||||
var page = new Page(version, name);
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
page.add(Entry.fromJSON(i, data[data.length - i - 1]));
|
||||
@ -1007,8 +1164,9 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
if (baselineVersion == undefined) return value;
|
||||
var baselineEntry = baselineVersion.getEntry(this);
|
||||
if (!baselineEntry) return value;
|
||||
return (this._time - baselineEntry._time) /
|
||||
this.page.total._time * 100;
|
||||
if (baselineVersion === this.page.version) return value;
|
||||
return (this._time - baselineEntry._time) / this.page.total._time *
|
||||
100;
|
||||
}
|
||||
get timePercentVariancePercent() {
|
||||
// Get the absolute values for the percentages
|
||||
@ -1018,8 +1176,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
return this.page.version.getTotalTime(this.name, showDiff);
|
||||
}
|
||||
getTimeImpactVariancePercent(showDiff) {
|
||||
return this.page.version
|
||||
.getTotalTimeVariancePercent(this.name, showDiff);
|
||||
return this.page.version.getTotalTimeVariancePercent(this.name, showDiff);
|
||||
}
|
||||
getTimePercentImpact(showDiff) {
|
||||
return this.page.version.getTotalTimePercent(this.name, showDiff);
|
||||
@ -1065,8 +1222,8 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
this.entries.forEach(fun);
|
||||
return;
|
||||
}
|
||||
// If we have a baslineVersion to compare against show also all entries
|
||||
// from the other group.
|
||||
// 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
|
||||
@ -1115,7 +1272,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
|
||||
class UnclassifiedEntry extends GroupedEntry {
|
||||
constructor(page) {
|
||||
super('Unclassified');
|
||||
super('Runtime');
|
||||
this.page = page;
|
||||
this._time = undefined;
|
||||
this._count = undefined;
|
||||
@ -1154,7 +1311,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onmousemove="handleUpdatePopover(event)">
|
||||
<body onmousemove="handleUpdatePopover(event)" onload="handleBodyLoad()">
|
||||
<h1>Runtime Stats Komparator</h1>
|
||||
|
||||
<div id="results">
|
||||
@ -1162,17 +1319,22 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
<h2>Data</h2>
|
||||
<form name="fileForm">
|
||||
<p>
|
||||
<input id="uploadInput" type="file" name="files" onchange="handleLoadFile();">
|
||||
<input id="uploadInput" type="file" name="files" onchange="handleLoadFile();" accept=".json">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="inline hidden">
|
||||
<h2>Result</h2>
|
||||
<div class="compareSelector">
|
||||
<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 class="versionSelector inline">
|
||||
Select Versions:
|
||||
<ul></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="view">
|
||||
</div>
|
||||
@ -1180,7 +1342,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
<div id="detailView" class="hidden">
|
||||
<h2></h2>
|
||||
<div class="versionDetail inline">
|
||||
<h3><span></span></h3>
|
||||
<h3>Version Comparison for <span></span></h3>
|
||||
<table class="versionDetailTable" onclick="handleSelectDetailRow(this, event);">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1195,7 +1357,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
</table>
|
||||
</div>
|
||||
<div class="pageDetail inline">
|
||||
<h3><span></span></h3>
|
||||
<h3>Page Comparison for <span></span></h3>
|
||||
<table class="pageDetailTable" onclick="handleSelectDetailRow(this, event);">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1233,6 +1395,8 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pageGraphs" class="hidden">
|
||||
</div>
|
||||
|
||||
<div id="column" class="column">
|
||||
<div class="header">
|
||||
@ -1257,18 +1421,19 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
|
||||
<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 callstats.py with a web-page-replay archive:
|
||||
<pre>./callstats.py run \
|
||||
<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=top25.wpr \
|
||||
--replay-wpr=$INPUT_DIR/top25.wpr \
|
||||
--js-flags="" \
|
||||
--with-chrome=$CHROME_SRC/out/Release/chrome \
|
||||
--sites-file=top25.json</pre>
|
||||
--sites-file=$INPUT_DIR/top25.json</pre>
|
||||
</li>
|
||||
<li>Move results file to a subdirectory: <code>mkdir $VERSION; mv *.txt $VERSION</code></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 $VERSION1 $VERSION2 > result.json</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user