Index: tools/callstats.html |
diff --git a/tools/callstats.html b/tools/callstats.html |
index 81d0459ad7e66539733dc7f24042ce5baee62a6c..da85494f14c1bcd48e8b4f27bbc16fd76ded1914 100644 |
--- a/tools/callstats.html |
+++ b/tools/callstats.html |
@@ -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> |