2019-01-04 12:18:43 +00:00
|
|
|
<!DOCTYPE html>
|
2016-05-06 13:23:51 +00:00
|
|
|
<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>
|
2019-01-04 12:18:43 +00:00
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>V8 Runtime Stats Komparator</title>
|
2016-05-06 13:23:51 +00:00
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: arial;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
table {
|
|
|
|
|
display: table;
|
|
|
|
|
border-spacing: 0px;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
tr {
|
|
|
|
|
border-spacing: 0px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
td,
|
|
|
|
|
th {
|
|
|
|
|
padding: 3px 10px 3px 5px;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.inline {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
h2,
|
|
|
|
|
h3 {
|
|
|
|
|
margin-bottom: 0px;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.hidden {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.view {
|
|
|
|
|
display: table;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.column {
|
|
|
|
|
display: table-cell;
|
|
|
|
|
border-right: 1px black dotted;
|
|
|
|
|
min-width: 200px;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.column .header {
|
|
|
|
|
padding: 0 10px 0 10px
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
#column {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.list {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
select {
|
|
|
|
|
width: 100%
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.list tbody {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.list tr:nth-child(even) {
|
|
|
|
|
background-color: #EFEFEF;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.list tr:nth-child(even).selected {
|
|
|
|
|
background-color: #DDD;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.list tr.child {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.list tr.child.visible {
|
|
|
|
|
display: table-row;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.list .child .name {
|
|
|
|
|
padding-left: 20px;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.list .parent td {
|
|
|
|
|
border-top: 1px solid #AAA;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.list .total {
|
|
|
|
|
font-weight: bold
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.list tr.parent {
|
|
|
|
|
background-color: #FFF;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.list tr.parent.selected {
|
|
|
|
|
background-color: #DDD;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
tr.selected {
|
|
|
|
|
background-color: #DDD;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
.codeSearch {
|
|
|
|
|
display: block-inline;
|
|
|
|
|
float: right;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background-color: #EEE;
|
|
|
|
|
width: 1em;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.list .position {
|
|
|
|
|
text-align: right;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.list div.toggle {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
#column_0 .position {
|
|
|
|
|
display: table-cell;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
#column_0 .name {
|
|
|
|
|
display: table-cell;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.list .name {
|
|
|
|
|
display: none;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.value {
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.selectedVersion {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
#baseline {
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.compareSelector {
|
|
|
|
|
padding-bottom: 20px;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.pageDetailTable tbody {
|
|
|
|
|
cursor: pointer
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-11 12:32:27 +00:00
|
|
|
.pageDetailTable tfoot td {
|
|
|
|
|
border-top: 1px grey solid;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
#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;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
#popover table {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
text-align: right;
|
|
|
|
|
margin: 10px;
|
|
|
|
|
}
|
|
|
|
|
#popover td {
|
|
|
|
|
padding: 3px 0px 3px 5px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.popoverArrow {
|
|
|
|
|
background-color: #FFF;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
transform: translateY(-50%)rotate(45deg);
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: -10px;
|
|
|
|
|
z-index: 0;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
#popover .name {
|
|
|
|
|
padding: 5px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
#popover table .compare {
|
|
|
|
|
display: none
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
#popover table.compare .compare {
|
|
|
|
|
display: table-cell;
|
|
|
|
|
}
|
2016-05-11 12:32:27 +00:00
|
|
|
|
|
|
|
|
#popover .compare .time,
|
|
|
|
|
#popover .compare .version {
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
}
|
2016-06-06 13:07:20 +00:00
|
|
|
.graph,
|
|
|
|
|
.graph .content {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.diff .hideDiff {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.noDiff .hideNoDiff {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
</style>
|
2019-01-04 12:18:43 +00:00
|
|
|
<script src="https://www.gstatic.com/charts/loader.js"></script>
|
|
|
|
|
<script>
|
2016-05-06 13:23:51 +00:00
|
|
|
"use strict"
|
2016-05-11 12:32:27 +00:00
|
|
|
google.charts.load('current', {packages: ['corechart']});
|
2016-05-06 13:23:51 +00:00
|
|
|
|
|
|
|
|
// Did anybody say monkeypatching?
|
|
|
|
|
if (!NodeList.prototype.forEach) {
|
|
|
|
|
NodeList.prototype.forEach = function(func) {
|
2020-06-30 08:24:58 +00:00
|
|
|
for (let i = 0; i < this.length; i++) {
|
2016-05-06 13:23:51 +00:00
|
|
|
func(this[i]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-30 08:24:58 +00:00
|
|
|
let versions;
|
|
|
|
|
let pages;
|
|
|
|
|
let selectedPage;
|
|
|
|
|
let baselineVersion;
|
|
|
|
|
let selectedEntry;
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-09-29 13:31:12 +00:00
|
|
|
// Marker to programatically replace the defaultData.
|
2020-06-30 08:24:58 +00:00
|
|
|
let defaultData = /*default-data-start*/undefined/*default-data-end*/;
|
2016-05-06 13:23:51 +00:00
|
|
|
|
|
|
|
|
function initialize() {
|
2016-09-28 07:49:45 +00:00
|
|
|
// Initialize the stats table and toggle lists.
|
2020-06-30 08:24:58 +00:00
|
|
|
let original = $("column");
|
|
|
|
|
let view = document.createElement('div');
|
2016-05-11 12:32:27 +00:00
|
|
|
view.id = 'view';
|
2020-06-30 08:24:58 +00:00
|
|
|
let i = 0;
|
2016-05-11 12:32:27 +00:00
|
|
|
versions.forEach((version) => {
|
|
|
|
|
if (!version.enabled) return;
|
2016-05-06 13:23:51 +00:00
|
|
|
// add column
|
2020-06-30 08:24:58 +00:00
|
|
|
let column = original.cloneNode(true);
|
2016-05-06 13:23:51 +00:00
|
|
|
column.id = "column_" + i;
|
|
|
|
|
// Fill in all versions
|
2020-06-30 08:24:58 +00:00
|
|
|
let select = column.querySelector(".version");
|
2016-05-06 13:23:51 +00:00
|
|
|
select.id = "selectVersion_" + i;
|
|
|
|
|
// add all select options
|
|
|
|
|
versions.forEach((version) => {
|
2016-05-11 12:32:27 +00:00
|
|
|
if (!version.enabled) return;
|
2020-06-30 08:24:58 +00:00
|
|
|
let option = document.createElement("option");
|
2016-05-06 13:23:51 +00:00
|
|
|
option.textContent = version.name;
|
|
|
|
|
option.version = version;
|
|
|
|
|
select.appendChild(option);
|
|
|
|
|
});
|
|
|
|
|
// Fill in all page versions
|
|
|
|
|
select = column.querySelector(".pageVersion");
|
|
|
|
|
select.id = "select_" + i;
|
2016-05-11 12:32:27 +00:00
|
|
|
// add all pages
|
2016-05-06 13:23:51 +00:00
|
|
|
versions.forEach((version) => {
|
2016-05-11 12:32:27 +00:00
|
|
|
if (!version.enabled) return;
|
2020-06-30 08:24:58 +00:00
|
|
|
let optgroup = document.createElement("optgroup");
|
2016-05-06 13:23:51 +00:00
|
|
|
optgroup.label = version.name;
|
|
|
|
|
optgroup.version = version;
|
2016-06-06 13:07:20 +00:00
|
|
|
version.forEachPage((page) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let option = document.createElement("option");
|
2016-05-06 13:23:51 +00:00
|
|
|
option.textContent = page.name;
|
|
|
|
|
option.page = page;
|
|
|
|
|
optgroup.appendChild(option);
|
|
|
|
|
});
|
|
|
|
|
select.appendChild(optgroup);
|
|
|
|
|
});
|
2016-05-11 12:32:27 +00:00
|
|
|
view.appendChild(column);
|
|
|
|
|
i++;
|
|
|
|
|
});
|
2020-06-30 08:24:58 +00:00
|
|
|
let oldView = $('view');
|
2016-05-11 12:32:27 +00:00
|
|
|
oldView.parentNode.replaceChild(view, oldView);
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2020-06-30 08:24:58 +00:00
|
|
|
let select = $('baseline');
|
2016-05-06 13:23:51 +00:00
|
|
|
removeAllChildren(select);
|
|
|
|
|
select.appendChild(document.createElement('option'));
|
|
|
|
|
versions.forEach((version) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let option = document.createElement("option");
|
2016-05-06 13:23:51 +00:00
|
|
|
option.textContent = version.name;
|
|
|
|
|
option.version = version;
|
|
|
|
|
select.appendChild(option);
|
|
|
|
|
});
|
2016-06-06 13:07:20 +00:00
|
|
|
initializeToggleList(versions.versions, $('versionSelector'));
|
|
|
|
|
initializeToggleList(pages.values(), $('pageSelector'));
|
2016-09-28 07:49:45 +00:00
|
|
|
initializeToggleList(Group.groups.values(), $('groupSelector'));
|
2016-06-06 13:07:20 +00:00
|
|
|
initializeToggleContentVisibility();
|
|
|
|
|
}
|
2016-05-11 12:32:27 +00:00
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
function initializeToggleList(items, node) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let list = node.querySelector('ul');
|
2016-06-06 13:07:20 +00:00
|
|
|
removeAllChildren(list);
|
|
|
|
|
items = Array.from(items);
|
|
|
|
|
items.sort(NameComparator);
|
|
|
|
|
items.forEach((item) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let li = document.createElement('li');
|
|
|
|
|
let checkbox = document.createElement('input');
|
2016-05-11 12:32:27 +00:00
|
|
|
checkbox.type = 'checkbox';
|
2016-06-06 13:07:20 +00:00
|
|
|
checkbox.checked = item.enabled;
|
|
|
|
|
checkbox.item = item;
|
2016-09-28 07:49:45 +00:00
|
|
|
checkbox.addEventListener('click', handleToggleVersionOrPageEnable);
|
2016-05-11 12:32:27 +00:00
|
|
|
li.appendChild(checkbox);
|
2016-06-06 13:07:20 +00:00
|
|
|
li.appendChild(document.createTextNode(item.name));
|
|
|
|
|
list.appendChild(li);
|
2016-05-11 12:32:27 +00:00
|
|
|
});
|
2016-05-06 13:23:51 +00:00
|
|
|
$('results').querySelectorAll('#results > .hidden').forEach((node) => {
|
|
|
|
|
toggleCssClass(node, 'hidden', false);
|
2016-06-06 13:07:20 +00:00
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function initializeToggleContentVisibility() {
|
2020-06-30 08:24:58 +00:00
|
|
|
let nodes = document.querySelectorAll('.toggleContentVisibility');
|
2016-06-06 13:07:20 +00:00
|
|
|
nodes.forEach((node) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let content = node.querySelector('.content');
|
|
|
|
|
let header = node.querySelector('h1,h2,h3');
|
2016-06-06 13:07:20 +00:00
|
|
|
if (content === undefined || header === undefined) return;
|
|
|
|
|
if (header.querySelector('input') != undefined) return;
|
2020-06-30 08:24:58 +00:00
|
|
|
let checkbox = document.createElement('input');
|
2016-06-06 13:07:20 +00:00
|
|
|
checkbox.type = 'checkbox';
|
|
|
|
|
checkbox.checked = content.className.indexOf('hidden') == -1;
|
|
|
|
|
checkbox.contentNode = content;
|
|
|
|
|
checkbox.addEventListener('click', handleToggleContentVisibility);
|
|
|
|
|
header.insertBefore(checkbox, header.childNodes[0]);
|
2016-05-06 13:23:51 +00:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2016-11-22 10:12:53 +00:00
|
|
|
window.addEventListener('popstate', (event) => {
|
|
|
|
|
popHistoryState(event.state);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function popHistoryState(state) {
|
|
|
|
|
if (!state.version) return false;
|
|
|
|
|
if (!versions) return false;
|
2020-06-30 08:24:58 +00:00
|
|
|
let version = versions.getByName(state.version);
|
2016-11-22 10:12:53 +00:00
|
|
|
if (!version) return false;
|
2020-06-30 08:24:58 +00:00
|
|
|
let page = version.get(state.page);
|
2016-11-22 10:12:53 +00:00
|
|
|
if (!page) return false;
|
|
|
|
|
if (!state.entry) {
|
2017-03-01 13:28:06 +00:00
|
|
|
showEntry(page.total);
|
2016-11-22 10:12:53 +00:00
|
|
|
} else {
|
2020-06-30 08:24:58 +00:00
|
|
|
let entry = page.get(state.entry);
|
2016-11-22 10:12:53 +00:00
|
|
|
if (!entry) {
|
2017-03-01 13:28:06 +00:00
|
|
|
showEntry(page.total);
|
2016-11-22 10:12:53 +00:00
|
|
|
} else {
|
|
|
|
|
showEntry(entry);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function pushHistoryState() {
|
2020-06-30 08:24:58 +00:00
|
|
|
let selection = selectedEntry ? selectedEntry : selectedPage;
|
2016-11-22 10:12:53 +00:00
|
|
|
if (!selection) return;
|
2020-06-30 08:24:58 +00:00
|
|
|
let state = selection.urlParams();
|
2016-11-22 10:12:53 +00:00
|
|
|
// Don't push a history state if it didn't change.
|
|
|
|
|
if (JSON.stringify(window.history.state) === JSON.stringify(state)) return;
|
2020-06-30 08:24:58 +00:00
|
|
|
let params = "?";
|
|
|
|
|
for (let pairs of Object.entries(state)) {
|
2016-11-22 10:12:53 +00:00
|
|
|
params += encodeURIComponent(pairs[0]) + "="
|
|
|
|
|
+ encodeURIComponent(pairs[1]) + "&";
|
|
|
|
|
}
|
|
|
|
|
window.history.pushState(state, selection.toString(), params);
|
|
|
|
|
}
|
|
|
|
|
|
2017-03-01 13:28:06 +00:00
|
|
|
function showSelectedEntryInPage(page) {
|
|
|
|
|
if (!selectedEntry) return showPage(page);
|
2020-06-30 08:24:58 +00:00
|
|
|
let entry = page.get(selectedEntry.name);
|
2017-03-01 13:28:06 +00:00
|
|
|
if (!entry) return showPage(page);
|
|
|
|
|
selectEntry(entry);
|
|
|
|
|
}
|
|
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function showPage(firstPage) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let changeSelectedEntry = selectedEntry !== undefined
|
2016-05-11 12:32:27 +00:00
|
|
|
&& selectedEntry.page === selectedPage;
|
2016-05-06 13:23:51 +00:00
|
|
|
selectedPage = firstPage;
|
|
|
|
|
selectedPage.sort();
|
|
|
|
|
showPageInColumn(firstPage, 0);
|
|
|
|
|
// Show the other versions of this page in the following columns.
|
2020-06-30 08:24:58 +00:00
|
|
|
let pageVersions = versions.getPageVersions(firstPage);
|
|
|
|
|
let index = 1;
|
2016-05-06 13:23:51 +00:00
|
|
|
pageVersions.forEach((page) => {
|
|
|
|
|
if (page !== firstPage) {
|
|
|
|
|
showPageInColumn(page, index);
|
|
|
|
|
index++;
|
|
|
|
|
}
|
|
|
|
|
});
|
2016-05-11 12:32:27 +00:00
|
|
|
if (changeSelectedEntry) {
|
|
|
|
|
showEntryDetail(selectedPage.getEntry(selectedEntry));
|
|
|
|
|
}
|
2016-09-28 07:49:45 +00:00
|
|
|
showImpactList(selectedPage);
|
2016-11-22 10:12:53 +00:00
|
|
|
pushHistoryState();
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showPageInColumn(page, columnIndex) {
|
|
|
|
|
page.sort();
|
2020-06-30 08:24:58 +00:00
|
|
|
let showDiff = (baselineVersion === undefined && columnIndex !== 0) ||
|
2016-05-06 13:23:51 +00:00
|
|
|
(baselineVersion !== undefined && page.version !== baselineVersion);
|
2020-06-30 08:24:58 +00:00
|
|
|
let diffStatus = (td, a, b) => {};
|
2016-05-06 13:23:51 +00:00
|
|
|
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;
|
2020-06-30 08:24:58 +00:00
|
|
|
let color;
|
|
|
|
|
let ratio = a / b;
|
2016-05-06 13:23:51 +00:00
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-30 08:24:58 +00:00
|
|
|
let column = $('column_' + columnIndex);
|
|
|
|
|
let select = $('select_' + columnIndex);
|
2016-05-06 13:23:51 +00:00
|
|
|
// Find the matching option
|
|
|
|
|
selectOption(select, (i, option) => {
|
|
|
|
|
return option.page == page
|
|
|
|
|
});
|
2020-06-30 08:24:58 +00:00
|
|
|
let table = column.querySelector("table");
|
|
|
|
|
let oldTbody = table.querySelector('tbody');
|
|
|
|
|
let tbody = document.createElement('tbody');
|
|
|
|
|
let referencePage = selectedPage;
|
2016-05-11 12:32:27 +00:00
|
|
|
page.forEachSorted(selectedPage, (parentEntry, entry, referenceEntry) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let tr = document.createElement('tr');
|
2016-05-06 13:23:51 +00:00
|
|
|
tbody.appendChild(tr);
|
|
|
|
|
tr.entry = entry;
|
|
|
|
|
tr.parentEntry = parentEntry;
|
2016-05-11 12:32:27 +00:00
|
|
|
tr.className = parentEntry === undefined ? 'parent' : 'child';
|
2016-05-06 13:23:51 +00:00
|
|
|
// 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) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let baselineEntry = baselineVersion.getEntry(entry);
|
2016-05-06 13:23:51 +00:00
|
|
|
if (baselineEntry !== undefined) referenceEntry = baselineEntry
|
|
|
|
|
}
|
|
|
|
|
if (!parentEntry) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let node = td(tr, '<div class="toggle">►</div>', 'position');
|
2016-05-06 13:23:51 +00:00
|
|
|
node.firstChild.addEventListener('click', handleToggleGroup);
|
|
|
|
|
} else {
|
|
|
|
|
td(tr, entry.position == 0 ? '' : entry.position, 'position');
|
|
|
|
|
}
|
2016-06-06 13:07:20 +00:00
|
|
|
addCodeSearchButton(entry,
|
|
|
|
|
td(tr, entry.name, 'name ' + entry.cssClass()));
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
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);
|
2017-02-08 17:29:56 +00:00
|
|
|
} else if (baselineVersion !== undefined && referenceEntry
|
2016-05-06 13:23:51 +00:00
|
|
|
&& page.version !== baselineVersion) {
|
|
|
|
|
// Show comparison of entry that does not exist on the current page.
|
2016-06-06 13:07:20 +00:00
|
|
|
tr.entry = new Entry(0, referenceEntry.name);
|
|
|
|
|
tr.entry.page = page;
|
2016-05-06 13:23:51 +00:00
|
|
|
td(tr, '-', 'position');
|
|
|
|
|
td(tr, referenceEntry.name, 'name');
|
|
|
|
|
diffStatus(
|
2017-03-01 13:28:06 +00:00
|
|
|
td(tr, ms(referenceEntry.time), 'value time'),
|
|
|
|
|
referenceEntry.time, 0);
|
2016-05-06 13:23:51 +00:00
|
|
|
diffStatus(
|
2017-03-01 13:28:06 +00:00
|
|
|
td(tr, percent(referenceEntry.timePercent), 'value time'),
|
|
|
|
|
referenceEntry.timePercent, 0);
|
2016-05-06 13:23:51 +00:00
|
|
|
diffStatus(
|
2017-03-01 13:28:06 +00:00
|
|
|
td(tr, count(referenceEntry.count), 'value count'),
|
|
|
|
|
referenceEntry.count, 0);
|
2016-05-06 13:23:51 +00:00
|
|
|
} else {
|
|
|
|
|
// Display empty entry / baseline entry
|
2020-06-30 08:24:58 +00:00
|
|
|
let showBaselineEntry = entry !== undefined;
|
2016-05-11 12:32:27 +00:00
|
|
|
if (showBaselineEntry) {
|
2016-05-06 13:23:51 +00:00
|
|
|
if (!parentEntry) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let node = td(tr, '<div class="toggle">►</div>', 'position');
|
2016-05-06 13:23:51 +00:00
|
|
|
node.firstChild.addEventListener('click', handleToggleGroup);
|
|
|
|
|
} else {
|
|
|
|
|
td(tr, entry.position == 0 ? '' : entry.position, 'position');
|
|
|
|
|
}
|
|
|
|
|
td(tr, entry.name, 'name');
|
2016-05-11 12:32:27 +00:00
|
|
|
td(tr, ms(entry.time, false), 'value time');
|
|
|
|
|
td(tr, percent(entry.timePercent, false), 'value time');
|
|
|
|
|
td(tr, count(entry.count, false), 'value count');
|
2016-05-06 13:23:51 +00:00
|
|
|
} else {
|
|
|
|
|
td(tr, '-', 'position');
|
2017-02-08 17:29:56 +00:00
|
|
|
td(tr, referenceEntry.name, 'name');
|
2016-05-11 12:32:27 +00:00
|
|
|
td(tr, '-', 'value time');
|
|
|
|
|
td(tr, '-', 'value time');
|
|
|
|
|
td(tr, '-', 'value count');
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
table.replaceChild(tbody, oldTbody);
|
2020-06-30 08:24:58 +00:00
|
|
|
let versionSelect = column.querySelector('select.version');
|
2016-05-06 13:23:51 +00:00
|
|
|
selectOption(versionSelect, (index, option) => {
|
|
|
|
|
return option.version == page.version
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2016-11-22 10:12:53 +00:00
|
|
|
function showEntry(entry) {
|
|
|
|
|
selectEntry(entry, true);
|
|
|
|
|
}
|
|
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function selectEntry(entry, updateSelectedPage) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let needsPageSwitch = true;
|
2017-03-01 13:28:06 +00:00
|
|
|
if (updateSelectedPage && selectedPage) {
|
2016-05-06 13:23:51 +00:00
|
|
|
entry = selectedPage.version.getEntry(entry);
|
2017-03-01 13:28:06 +00:00
|
|
|
needsPageSwitch = updateSelectedPage && entry.page != selectedPage;
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
2020-06-30 08:24:58 +00:00
|
|
|
let rowIndex = 0;
|
2016-05-06 13:23:51 +00:00
|
|
|
// If clicked in the detail row change the first column to that page.
|
|
|
|
|
if (needsPageSwitch) showPage(entry.page);
|
2020-06-30 08:24:58 +00:00
|
|
|
let childNodes = $('column_0').querySelector('.list tbody').childNodes;
|
|
|
|
|
for (let i = 0; i < childNodes.length; i++) {
|
2017-02-08 17:29:56 +00:00
|
|
|
if (childNodes[i].entry !== undefined &&
|
|
|
|
|
childNodes[i].entry.name == entry.name) {
|
2016-05-06 13:23:51 +00:00
|
|
|
rowIndex = i;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-06-30 08:24:58 +00:00
|
|
|
let firstEntry = childNodes[rowIndex].entry;
|
2016-05-06 13:23:51 +00:00
|
|
|
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) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let row = body.childNodes[rowIndex];
|
2016-05-06 13:23:51 +00:00
|
|
|
if (!row) return;
|
2016-05-11 12:32:27 +00:00
|
|
|
toggleCssClass(row, 'selected', row.entry && row.entry.name ==
|
|
|
|
|
firstEntry.name);
|
2016-05-06 13:23:51 +00:00
|
|
|
});
|
2017-03-01 13:28:06 +00:00
|
|
|
if (updateSelectedPage && selectedEntry) {
|
2016-05-06 13:23:51 +00:00
|
|
|
entry = selectedEntry.page.version.getEntry(entry);
|
|
|
|
|
}
|
2017-03-01 13:28:06 +00:00
|
|
|
if (entry !== selectedEntry) {
|
|
|
|
|
selectedEntry = entry;
|
|
|
|
|
showEntryDetail(entry);
|
|
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showEntryDetail(entry) {
|
2016-06-06 13:07:20 +00:00
|
|
|
showVersionDetails(entry);
|
|
|
|
|
showPageDetails(entry);
|
|
|
|
|
showImpactList(entry.page);
|
|
|
|
|
showGraphs(entry.page);
|
2016-11-22 10:12:53 +00:00
|
|
|
pushHistoryState();
|
2016-06-06 13:07:20 +00:00
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
function showVersionDetails(entry) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let table, tbody, entries;
|
2016-05-06 13:23:51 +00:00
|
|
|
table = $('detailView').querySelector('.versionDetailTable');
|
|
|
|
|
tbody = document.createElement('tbody');
|
|
|
|
|
if (entry !== undefined) {
|
2016-09-22 20:58:11 +00:00
|
|
|
$('detailView').querySelector('.versionDetail h3 span').textContent =
|
2016-06-06 13:07:20 +00:00
|
|
|
entry.name + ' in ' + entry.page.name;
|
|
|
|
|
entries = versions.getPageVersions(entry.page).map(
|
2016-05-06 13:23:51 +00:00
|
|
|
(page) => {
|
|
|
|
|
return page.get(entry.name)
|
|
|
|
|
});
|
|
|
|
|
entries.sort((a, b) => {
|
|
|
|
|
return a.time - b.time
|
|
|
|
|
});
|
|
|
|
|
entries.forEach((pageEntry) => {
|
|
|
|
|
if (pageEntry === undefined) return;
|
2020-06-30 08:24:58 +00:00
|
|
|
let tr = document.createElement('tr');
|
2016-05-06 13:23:51 +00:00
|
|
|
if (pageEntry == entry) tr.className += 'selected';
|
|
|
|
|
tr.entry = pageEntry;
|
2020-06-30 08:24:58 +00:00
|
|
|
let isBaselineEntry = pageEntry.page.version == baselineVersion;
|
2016-05-06 13:23:51 +00:00
|
|
|
td(tr, pageEntry.page.version.name, 'version');
|
2016-06-06 13:07:20 +00:00
|
|
|
td(tr, ms(pageEntry.time, !isBaselineEntry), 'value time');
|
|
|
|
|
td(tr, percent(pageEntry.timePercent, !isBaselineEntry), 'value time');
|
|
|
|
|
td(tr, count(pageEntry.count, !isBaselineEntry), 'value count');
|
2016-05-06 13:23:51 +00:00
|
|
|
tbody.appendChild(tr);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
table.replaceChild(tbody, table.querySelector('tbody'));
|
2016-06-06 13:07:20 +00:00
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
function showPageDetails(entry) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let table, tbody, entries;
|
2016-05-06 13:23:51 +00:00
|
|
|
table = $('detailView').querySelector('.pageDetailTable');
|
|
|
|
|
tbody = document.createElement('tbody');
|
2016-06-06 13:07:20 +00:00
|
|
|
if (entry === undefined) {
|
|
|
|
|
table.replaceChild(tbody, table.querySelector('tbody'));
|
|
|
|
|
return;
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
2020-06-30 08:24:58 +00:00
|
|
|
let version = entry.page.version;
|
|
|
|
|
let showDiff = version !== baselineVersion;
|
2016-09-22 20:58:11 +00:00
|
|
|
$('detailView').querySelector('.pageDetail h3 span').textContent =
|
2016-06-06 13:07:20 +00:00
|
|
|
version.name;
|
|
|
|
|
entries = version.pages.map((page) => {
|
|
|
|
|
if (!page.enabled) return;
|
|
|
|
|
return page.get(entry.name)
|
|
|
|
|
});
|
|
|
|
|
entries.sort((a, b) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let cmp = b.timePercent - a.timePercent;
|
2016-06-06 13:07:20 +00:00
|
|
|
if (cmp.toFixed(1) == 0) return b.time - a.time;
|
|
|
|
|
return cmp
|
|
|
|
|
});
|
|
|
|
|
entries.forEach((pageEntry) => {
|
|
|
|
|
if (pageEntry === undefined) return;
|
2020-06-30 08:24:58 +00:00
|
|
|
let tr = document.createElement('tr');
|
2016-06-06 13:07:20 +00:00
|
|
|
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
|
2020-06-30 08:24:58 +00:00
|
|
|
let tds = table.querySelectorAll('tfoot td');
|
2016-09-22 20:58:11 +00:00
|
|
|
tds[1].textContent = ms(entry.getTimeImpact(), showDiff);
|
2016-06-06 13:07:20 +00:00
|
|
|
// Only show the percentage total if we are in diff mode:
|
2016-09-22 20:58:11 +00:00
|
|
|
tds[2].textContent = percent(entry.getTimePercentImpact(), showDiff);
|
|
|
|
|
tds[3].textContent = '';
|
|
|
|
|
tds[4].textContent = count(entry.getCountImpact(), showDiff);
|
2016-05-06 13:23:51 +00:00
|
|
|
table.replaceChild(tbody, table.querySelector('tbody'));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showImpactList(page) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let impactView = $('detailView').querySelector('.impactView');
|
2016-09-22 20:58:11 +00:00
|
|
|
impactView.querySelector('h3 span').textContent = page.version.name;
|
2016-05-06 13:23:51 +00:00
|
|
|
|
2020-06-30 08:24:58 +00:00
|
|
|
let table = impactView.querySelector('table');
|
|
|
|
|
let tbody = document.createElement('tbody');
|
|
|
|
|
let version = page.version;
|
|
|
|
|
let entries = version.allEntries();
|
2016-05-06 13:23:51 +00:00
|
|
|
if (selectedEntry !== undefined && selectedEntry.isGroup) {
|
2016-09-22 20:58:11 +00:00
|
|
|
impactView.querySelector('h3 span').textContent += " " + selectedEntry.name;
|
2016-05-06 13:23:51 +00:00
|
|
|
entries = entries.filter((entry) => {
|
|
|
|
|
return entry.name == selectedEntry.name ||
|
|
|
|
|
(entry.parent && entry.parent.name == selectedEntry.name)
|
|
|
|
|
});
|
|
|
|
|
}
|
2020-06-30 08:24:58 +00:00
|
|
|
let isCompareView = baselineVersion !== undefined;
|
2016-05-11 12:32:27 +00:00
|
|
|
entries = entries.filter((entry) => {
|
|
|
|
|
if (isCompareView) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let impact = entry.getTimeImpact();
|
2016-05-11 12:32:27 +00:00
|
|
|
return impact < -1 || 1 < impact
|
|
|
|
|
}
|
2017-03-09 09:53:34 +00:00
|
|
|
return entry.getTimePercentImpact() > 0.01;
|
2016-05-11 12:32:27 +00:00
|
|
|
});
|
2017-03-09 09:53:34 +00:00
|
|
|
entries = entries.slice(0, 50);
|
2016-05-06 13:23:51 +00:00
|
|
|
entries.sort((a, b) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let cmp = b.getTimePercentImpact() - a.getTimePercentImpact();
|
2016-05-11 12:32:27 +00:00
|
|
|
if (isCompareView || cmp.toFixed(1) == 0) {
|
|
|
|
|
return b.getTimeImpact() - a.getTimeImpact();
|
|
|
|
|
}
|
|
|
|
|
return cmp
|
2016-05-06 13:23:51 +00:00
|
|
|
});
|
|
|
|
|
entries.forEach((entry) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let tr = document.createElement('tr');
|
2016-05-06 13:23:51 +00:00
|
|
|
tr.entry = entry;
|
|
|
|
|
td(tr, entry.name, 'name');
|
|
|
|
|
td(tr, ms(entry.getTimeImpact()), 'value time');
|
2020-06-30 08:24:58 +00:00
|
|
|
let percentImpact = entry.getTimePercentImpact();
|
2016-05-11 12:32:27 +00:00
|
|
|
td(tr, percentImpact > 1000 ? '-' : percent(percentImpact), 'value time');
|
2020-06-30 08:24:58 +00:00
|
|
|
let topPages = entry.getPagesByPercentImpact().slice(0, 3)
|
2016-05-06 13:23:51 +00:00
|
|
|
.map((each) => {
|
2016-05-11 12:32:27 +00:00
|
|
|
return each.name + ' (' + percent(each.getEntry(entry).timePercent) +
|
|
|
|
|
')'
|
2016-05-06 13:23:51 +00:00
|
|
|
});
|
|
|
|
|
td(tr, topPages.join(', '), 'name');
|
|
|
|
|
tbody.appendChild(tr);
|
|
|
|
|
});
|
|
|
|
|
table.replaceChild(tbody, table.querySelector('tbody'));
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
function showGraphs(page) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let groups = page.groups.filter(each => each.enabled);
|
2016-06-06 13:07:20 +00:00
|
|
|
// Sort groups by the biggest impact
|
|
|
|
|
groups.sort((a, b) => {
|
|
|
|
|
return b.getTimeImpact() - a.getTimeImpact();
|
|
|
|
|
});
|
2016-05-11 12:32:27 +00:00
|
|
|
if (selectedGroup == undefined) {
|
|
|
|
|
selectedGroup = groups[0];
|
|
|
|
|
} else {
|
2017-03-09 09:53:34 +00:00
|
|
|
groups = groups.filter(each => each.name != selectedGroup.name);
|
2016-05-11 12:32:27 +00:00
|
|
|
groups.unshift(selectedGroup);
|
|
|
|
|
}
|
2016-06-06 13:07:20 +00:00
|
|
|
showPageGraph(groups, page);
|
|
|
|
|
showVersionGraph(groups, page);
|
|
|
|
|
showPageVersionGraph(groups, page);
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
function getGraphDataTable(groups) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let dataTable = new google.visualization.DataTable();
|
2016-05-11 12:32:27 +00:00
|
|
|
dataTable.addColumn('string', 'Name');
|
|
|
|
|
groups.forEach(group => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let column = dataTable.addColumn('number', group.name.substring(6));
|
2016-05-11 12:32:27 +00:00
|
|
|
dataTable.setColumnProperty(column, 'group', group);
|
|
|
|
|
});
|
2016-06-06 13:07:20 +00:00
|
|
|
return dataTable;
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-30 08:24:58 +00:00
|
|
|
let selectedGroup;
|
2016-06-06 13:07:20 +00:00
|
|
|
function showPageGraph(groups, page) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let isDiffView = baselineVersion !== undefined;
|
|
|
|
|
let dataTable = getGraphDataTable(groups);
|
2016-05-11 12:32:27 +00:00
|
|
|
// Calculate the average row
|
2020-06-30 08:24:58 +00:00
|
|
|
let row = ['Average'];
|
2016-05-11 12:32:27 +00:00
|
|
|
groups.forEach((group) => {
|
2016-06-06 13:07:20 +00:00
|
|
|
if (isDiffView) {
|
|
|
|
|
row.push(group.isTotal ? 0 : group.getAverageTimeImpact());
|
|
|
|
|
} else {
|
|
|
|
|
row.push(group.isTotal ? 0 : group.getTimeImpact());
|
|
|
|
|
}
|
2016-05-11 12:32:27 +00:00
|
|
|
});
|
|
|
|
|
dataTable.addRow(row);
|
|
|
|
|
// Sort the pages by the selected group.
|
2020-06-30 08:24:58 +00:00
|
|
|
let pages = page.version.pages.filter(page => page.enabled);
|
2016-06-06 13:07:20 +00:00
|
|
|
function sumDiff(page) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let sum = 0;
|
2016-06-06 13:07:20 +00:00
|
|
|
groups.forEach(group => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let value = group.getTimePercentImpact() -
|
2016-06-06 13:07:20 +00:00
|
|
|
page.getEntry(group).timePercent;
|
|
|
|
|
sum += value * value;
|
|
|
|
|
});
|
|
|
|
|
return sum;
|
|
|
|
|
}
|
|
|
|
|
if (isDiffView) {
|
|
|
|
|
pages.sort((a, b) => {
|
|
|
|
|
return b.getEntry(selectedGroup).time-
|
2017-02-08 17:29:56 +00:00
|
|
|
a.getEntry(selectedGroup).time;
|
2016-06-06 13:07:20 +00:00
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
pages.sort((a, b) => {
|
|
|
|
|
return b.getEntry(selectedGroup).timePercent -
|
2017-02-08 17:29:56 +00:00
|
|
|
a.getEntry(selectedGroup).timePercent;
|
2016-06-06 13:07:20 +00:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// Sort by sum of squared distance to the average.
|
|
|
|
|
// pages.sort((a, b) => {
|
2017-02-08 17:29:56 +00:00
|
|
|
// return a.distanceFromTotalPercent() - b.distanceFromTotalPercent();
|
2016-06-06 13:07:20 +00:00
|
|
|
// });
|
2016-05-11 12:32:27 +00:00
|
|
|
// Calculate the entries for the pages
|
2017-02-08 17:29:56 +00:00
|
|
|
pages.forEach((page) => {
|
2016-05-11 12:32:27 +00:00
|
|
|
row = [page.name];
|
|
|
|
|
groups.forEach((group) => {
|
2016-06-06 13:07:20 +00:00
|
|
|
row.push(group.isTotal ? 0 : page.getEntry(group).time);
|
2016-05-11 12:32:27 +00:00
|
|
|
});
|
2020-06-30 08:24:58 +00:00
|
|
|
let rowIndex = dataTable.addRow(row);
|
2016-06-06 13:07:20 +00:00
|
|
|
dataTable.setRowProperty(rowIndex, 'page', page);
|
2016-05-11 12:32:27 +00:00
|
|
|
});
|
2016-06-06 13:07:20 +00:00
|
|
|
renderGraph('Pages for ' + page.version.name, groups, dataTable,
|
|
|
|
|
'pageGraph', isDiffView ? true : 'percent');
|
|
|
|
|
}
|
2016-05-11 12:32:27 +00:00
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
function showVersionGraph(groups, page) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let dataTable = getGraphDataTable(groups);
|
|
|
|
|
let row;
|
|
|
|
|
let vs = versions.versions.filter(version => version.enabled);
|
2016-06-06 13:07:20 +00:00
|
|
|
vs.sort((a, b) => {
|
|
|
|
|
return b.getEntry(selectedGroup).getTimeImpact() -
|
2017-02-08 17:29:56 +00:00
|
|
|
a.getEntry(selectedGroup).getTimeImpact();
|
2016-06-06 13:07:20 +00:00
|
|
|
});
|
2017-02-08 17:29:56 +00:00
|
|
|
// Calculate the entries for the versions
|
|
|
|
|
vs.forEach((version) => {
|
2016-06-06 13:07:20 +00:00
|
|
|
row = [version.name];
|
|
|
|
|
groups.forEach((group) => {
|
|
|
|
|
row.push(group.isTotal ? 0 : version.getEntry(group).getTimeImpact());
|
|
|
|
|
});
|
2020-06-30 08:24:58 +00:00
|
|
|
let rowIndex = dataTable.addRow(row);
|
2016-06-06 13:07:20 +00:00
|
|
|
dataTable.setRowProperty(rowIndex, 'page', page);
|
|
|
|
|
});
|
|
|
|
|
renderGraph('Versions Total Time over all Pages', groups, dataTable,
|
|
|
|
|
'versionGraph', true);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showPageVersionGraph(groups, page) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let dataTable = getGraphDataTable(groups);
|
|
|
|
|
let row;
|
|
|
|
|
let vs = versions.getPageVersions(page);
|
2016-06-06 13:07:20 +00:00
|
|
|
vs.sort((a, b) => {
|
2017-02-08 17:29:56 +00:00
|
|
|
return b.getEntry(selectedGroup).time - a.getEntry(selectedGroup).time;
|
2016-06-06 13:07:20 +00:00
|
|
|
});
|
2017-02-08 17:29:56 +00:00
|
|
|
// Calculate the entries for the versions
|
|
|
|
|
vs.forEach((page) => {
|
2016-06-06 13:07:20 +00:00
|
|
|
row = [page.version.name];
|
|
|
|
|
groups.forEach((group) => {
|
|
|
|
|
row.push(group.isTotal ? 0 : page.getEntry(group).time);
|
|
|
|
|
});
|
2020-06-30 08:24:58 +00:00
|
|
|
let rowIndex = dataTable.addRow(row);
|
2016-06-06 13:07:20 +00:00
|
|
|
dataTable.setRowProperty(rowIndex, 'page', page);
|
|
|
|
|
});
|
|
|
|
|
renderGraph('Versions for ' + page.name, groups, dataTable,
|
|
|
|
|
'pageVersionGraph', true);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function renderGraph(title, groups, dataTable, id, isStacked) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let isDiffView = baselineVersion !== undefined;
|
|
|
|
|
let formatter = new google.visualization.NumberFormat({
|
2017-02-08 17:29:56 +00:00
|
|
|
suffix: (isDiffView ? 'msΔ' : 'ms'),
|
|
|
|
|
negativeColor: 'red',
|
2016-06-06 13:07:20 +00:00
|
|
|
groupingSymbol: "'"
|
|
|
|
|
});
|
2020-06-30 08:24:58 +00:00
|
|
|
for (let i = 1; i < dataTable.getNumberOfColumns(); i++) {
|
2016-06-06 13:07:20 +00:00
|
|
|
formatter.format(dataTable, i);
|
|
|
|
|
}
|
2020-06-30 08:24:58 +00:00
|
|
|
let height = 85 + 28 * dataTable.getNumberOfRows();
|
|
|
|
|
let options = {
|
2016-06-06 13:07:20 +00:00
|
|
|
isStacked: isStacked,
|
|
|
|
|
height: height,
|
2016-05-11 12:32:27 +00:00
|
|
|
hAxis: {
|
|
|
|
|
minValue: 0,
|
2017-03-09 09:53:34 +00:00
|
|
|
textStyle: { fontSize: 14 }
|
2016-05-11 12:32:27 +00:00
|
|
|
},
|
2016-06-06 13:07:20 +00:00
|
|
|
animation:{
|
2017-03-09 09:53:34 +00:00
|
|
|
duration: dataTable.getNumberOfRows() > 50 ? 0 : 500 ,
|
2016-06-06 13:07:20 +00:00
|
|
|
easing: 'out',
|
|
|
|
|
},
|
2016-05-11 12:32:27 +00:00
|
|
|
vAxis: {
|
2017-03-09 09:53:34 +00:00
|
|
|
textStyle: { fontSize: 14 }
|
2016-06-06 13:07:20 +00:00
|
|
|
},
|
2017-03-09 09:53:34 +00:00
|
|
|
tooltip: { textStyle: { fontSize: 14 }},
|
2016-06-06 13:07:20 +00:00
|
|
|
explorer: {
|
|
|
|
|
actions: ['dragToZoom', 'rightClickToReset'],
|
|
|
|
|
maxZoomIn: 0.01
|
|
|
|
|
},
|
2017-03-09 09:53:34 +00:00
|
|
|
legend: {position:'top', maxLines: 1, textStyle: { fontSize: 14 }},
|
2016-06-06 13:07:20 +00:00
|
|
|
chartArea: {left:200, top:50, width:'98%', height:'80%'},
|
|
|
|
|
colors: groups.map(each => each.color)
|
2016-05-11 12:32:27 +00:00
|
|
|
};
|
2020-06-30 08:24:58 +00:00
|
|
|
let parentNode = $(id);
|
2016-09-22 20:58:11 +00:00
|
|
|
parentNode.querySelector('h2>span, h3>span').textContent = title;
|
2020-06-30 08:24:58 +00:00
|
|
|
let graphNode = parentNode.querySelector('.content');
|
2016-06-06 13:07:20 +00:00
|
|
|
|
2020-06-30 08:24:58 +00:00
|
|
|
let chart = graphNode.chart;
|
2016-06-06 13:07:20 +00:00
|
|
|
if (chart === undefined) {
|
|
|
|
|
chart = graphNode.chart = new google.visualization.BarChart(graphNode);
|
|
|
|
|
} else {
|
|
|
|
|
google.visualization.events.removeAllListeners(chart);
|
|
|
|
|
}
|
2016-05-11 12:32:27 +00:00
|
|
|
google.visualization.events.addListener(chart, 'select', selectHandler);
|
2016-06-06 13:07:20 +00:00
|
|
|
function getChartEntry(selection) {
|
|
|
|
|
if (!selection) return undefined;
|
2020-06-30 08:24:58 +00:00
|
|
|
let column = selection.column;
|
2016-06-06 13:07:20 +00:00
|
|
|
if (column == undefined) return undefined;
|
2020-06-30 08:24:58 +00:00
|
|
|
let selectedGroup = dataTable.getColumnProperty(column, 'group');
|
|
|
|
|
let row = selection.row;
|
2016-06-06 13:07:20 +00:00
|
|
|
if (row == null) return selectedGroup;
|
2020-06-30 08:24:58 +00:00
|
|
|
let page = dataTable.getRowProperty(row, 'page');
|
2016-06-06 13:07:20 +00:00
|
|
|
if (!page) return selectedGroup;
|
|
|
|
|
return page.getEntry(selectedGroup);
|
|
|
|
|
}
|
2016-05-11 12:32:27 +00:00
|
|
|
function selectHandler() {
|
2016-06-06 13:07:20 +00:00
|
|
|
selectedGroup = getChartEntry(chart.getSelection()[0])
|
|
|
|
|
if (!selectedGroup) return;
|
|
|
|
|
selectEntry(selectedGroup, true);
|
2016-05-11 12:32:27 +00:00
|
|
|
}
|
2016-06-06 13:07:20 +00:00
|
|
|
|
|
|
|
|
// Make our global tooltips work
|
|
|
|
|
google.visualization.events.addListener(chart, 'onmouseover', mouseOverHandler);
|
|
|
|
|
function mouseOverHandler(selection) {
|
|
|
|
|
graphNode.entry = getChartEntry(selection);
|
|
|
|
|
}
|
|
|
|
|
chart.draw(dataTable, options);
|
2016-05-11 12:32:27 +00:00
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
|
|
|
|
|
function showGroup(entry) {
|
|
|
|
|
toggleGroup(entry, true);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function toggleGroup(group, show) {
|
|
|
|
|
$('view').querySelectorAll(".child").forEach((tr) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let entry = tr.parentEntry;
|
2016-05-06 13:23:51 +00:00
|
|
|
if (!entry) return;
|
|
|
|
|
if (entry.name !== group.name) return;
|
|
|
|
|
toggleCssClass(tr, 'visible', show);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showPopover(entry) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let popover = $('popover');
|
2016-09-22 20:58:11 +00:00
|
|
|
popover.querySelector('td.name').textContent = entry.name;
|
|
|
|
|
popover.querySelector('td.page').textContent = entry.page.name;
|
2016-05-06 13:23:51 +00:00
|
|
|
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) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let node = (name) => popover.querySelector(prefix + name);
|
2016-05-11 12:32:27 +00:00
|
|
|
if (entry == undefined) {
|
2016-09-22 20:58:11 +00:00
|
|
|
node('.version').textContent = baselineVersion.name;
|
|
|
|
|
node('.time').textContent = '-';
|
|
|
|
|
node('.timeVariance').textContent = '-';
|
|
|
|
|
node('.percent').textContent = '-';
|
|
|
|
|
node('.percentPerEntry').textContent = '-';
|
|
|
|
|
node('.percentVariance').textContent = '-';
|
|
|
|
|
node('.count').textContent = '-';
|
|
|
|
|
node('.countVariance').textContent = '-';
|
|
|
|
|
node('.timeImpact').textContent = '-';
|
|
|
|
|
node('.timePercentImpact').textContent = '-';
|
2016-05-11 12:32:27 +00:00
|
|
|
} else {
|
2016-09-22 20:58:11 +00:00
|
|
|
node('.version').textContent = entry.page.version.name;
|
|
|
|
|
node('.time').textContent = ms(entry._time, false);
|
|
|
|
|
node('.timeVariance').textContent
|
2016-05-11 12:32:27 +00:00
|
|
|
= percent(entry.timeVariancePercent, false);
|
2016-09-22 20:58:11 +00:00
|
|
|
node('.percent').textContent = percent(entry.timePercent, false);
|
|
|
|
|
node('.percentPerEntry').textContent
|
2016-06-06 13:07:20 +00:00
|
|
|
= percent(entry.timePercentPerEntry, false);
|
2017-02-08 17:29:56 +00:00
|
|
|
node('.percentVariance').textContent
|
2016-05-11 12:32:27 +00:00
|
|
|
= percent(entry.timePercentVariancePercent, false);
|
2016-09-22 20:58:11 +00:00
|
|
|
node('.count').textContent = count(entry._count, false);
|
|
|
|
|
node('.countVariance').textContent
|
2016-05-11 12:32:27 +00:00
|
|
|
= percent(entry.timeVariancePercent, false);
|
2016-09-22 20:58:11 +00:00
|
|
|
node('.timeImpact').textContent
|
2016-05-11 12:32:27 +00:00
|
|
|
= ms(entry.getTimeImpact(false), false);
|
2016-09-22 20:58:11 +00:00
|
|
|
node('.timePercentImpact').textContent
|
2016-05-11 12:32:27 +00:00
|
|
|
= percent(entry.getTimeImpactVariancePercent(false), false);
|
|
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
2016-06-06 13:07:20 +00:00
|
|
|
</script>
|
2019-01-04 12:18:43 +00:00
|
|
|
<script>
|
2016-06-06 13:07:20 +00:00
|
|
|
"use strict"
|
|
|
|
|
// =========================================================================
|
2016-05-06 13:23:51 +00:00
|
|
|
// Helpers
|
|
|
|
|
function $(id) {
|
|
|
|
|
return document.getElementById(id)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function removeAllChildren(node) {
|
|
|
|
|
while (node.firstChild) {
|
|
|
|
|
node.removeChild(node.firstChild);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function selectOption(select, match) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let options = select.options;
|
|
|
|
|
for (let i = 0; i < options.length; i++) {
|
2016-05-06 13:23:51 +00:00
|
|
|
if (match(i, options[i])) {
|
|
|
|
|
select.selectedIndex = i;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
function addCodeSearchButton(entry, node) {
|
|
|
|
|
if (entry.isGroup) return;
|
2020-06-30 08:24:58 +00:00
|
|
|
let button = document.createElement("div");
|
2016-09-22 20:58:11 +00:00
|
|
|
button.textContent = '?'
|
2016-06-06 13:07:20 +00:00
|
|
|
button.className = "codeSearch"
|
|
|
|
|
button.addEventListener('click', handleCodeSearch);
|
|
|
|
|
node.appendChild(button);
|
|
|
|
|
return node;
|
|
|
|
|
}
|
|
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function td(tr, content, className) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let td = document.createElement("td");
|
2016-09-22 20:58:11 +00:00
|
|
|
if (content[0] == '<') {
|
|
|
|
|
td.innerHTML = content;
|
|
|
|
|
} else {
|
|
|
|
|
td.textContent = content;
|
|
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
td.className = className
|
|
|
|
|
tr.appendChild(td);
|
|
|
|
|
return td
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function nodeIndex(node) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let children = node.parentNode.childNodes,
|
2016-05-06 13:23:51 +00:00
|
|
|
i = 0;
|
|
|
|
|
for (; i < children.length; i++) {
|
|
|
|
|
if (children[i] == node) {
|
|
|
|
|
return i;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return -1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function toggleCssClass(node, cssClass, toggleState) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let index = -1;
|
|
|
|
|
let classes;
|
2016-05-06 13:23:51 +00:00
|
|
|
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(' ');
|
|
|
|
|
}
|
|
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
function NameComparator(a, b) {
|
|
|
|
|
if (a.name > b.name) return 1;
|
|
|
|
|
if (a.name < b.name) return -1;
|
|
|
|
|
return 0
|
|
|
|
|
}
|
|
|
|
|
|
2016-05-11 12:32:27 +00:00
|
|
|
function diffSign(value, digits, unit, showDiff) {
|
|
|
|
|
if (showDiff === false || baselineVersion == undefined) {
|
2016-06-06 13:07:20 +00:00
|
|
|
if (value === undefined) return '';
|
2016-05-11 12:32:27 +00:00
|
|
|
return value.toFixed(digits) + unit;
|
|
|
|
|
}
|
|
|
|
|
return (value >= 0 ? '+' : '') + value.toFixed(digits) + unit + 'Δ';
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
|
2016-05-11 12:32:27 +00:00
|
|
|
function ms(value, showDiff) {
|
|
|
|
|
return diffSign(value, 1, 'ms', showDiff);
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
|
2016-05-11 12:32:27 +00:00
|
|
|
function count(value, showDiff) {
|
|
|
|
|
return diffSign(value, 0, '#', showDiff);
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
|
2016-05-11 12:32:27 +00:00
|
|
|
function percent(value, showDiff) {
|
|
|
|
|
return diffSign(value, 1, '%', showDiff);
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
2016-05-11 12:32:27 +00:00
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
</script>
|
2019-01-04 12:18:43 +00:00
|
|
|
<script>
|
2016-06-06 13:07:20 +00:00
|
|
|
"use strict"
|
2016-05-11 12:32:27 +00:00
|
|
|
// =========================================================================
|
2016-05-06 13:23:51 +00:00
|
|
|
// EventHandlers
|
2016-05-11 12:32:27 +00:00
|
|
|
function handleBodyLoad() {
|
2016-09-22 20:58:11 +00:00
|
|
|
$('uploadInput').focus();
|
2016-09-29 13:31:12 +00:00
|
|
|
if (defaultData) {
|
|
|
|
|
handleLoadJSON(defaultData);
|
|
|
|
|
} else if (window.location.protocol !== 'file:') {
|
|
|
|
|
tryLoadDefaultResults();
|
|
|
|
|
}
|
2016-09-22 20:58:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function tryLoadDefaultResults() {
|
2016-09-29 13:31:12 +00:00
|
|
|
// Try to load a results.json file adjacent to this day.
|
2020-06-30 08:24:58 +00:00
|
|
|
let xhr = new XMLHttpRequest();
|
2016-09-29 13:31:12 +00:00
|
|
|
// The markers on the following line can be used to replace the url easily
|
|
|
|
|
// with scripts.
|
|
|
|
|
xhr.open('GET', /*results-url-start*/'results.json'/*results-url-end*/, true);
|
2016-09-22 20:58:11 +00:00
|
|
|
xhr.onreadystatechange = function(e) {
|
2016-09-29 13:31:12 +00:00
|
|
|
if(this.readyState !== XMLHttpRequest.DONE || this.status !== 200) return;
|
2016-09-22 20:58:11 +00:00
|
|
|
handleLoadText(this.responseText);
|
|
|
|
|
};
|
|
|
|
|
xhr.send();
|
2016-05-11 12:32:27 +00:00
|
|
|
}
|
|
|
|
|
|
2017-03-09 09:53:34 +00:00
|
|
|
function handleAppendFile() {
|
2020-06-30 08:24:58 +00:00
|
|
|
let files = document.getElementById("appendInput").files;
|
2017-03-09 09:53:34 +00:00
|
|
|
loadFiles(files, true);
|
|
|
|
|
}
|
|
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function handleLoadFile() {
|
2020-06-30 08:24:58 +00:00
|
|
|
let files = document.getElementById("uploadInput").files;
|
2017-03-09 09:53:34 +00:00
|
|
|
loadFiles(files, false)
|
|
|
|
|
}
|
2017-04-10 17:45:35 +00:00
|
|
|
|
2017-03-09 09:53:34 +00:00
|
|
|
function loadFiles(files, append) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let file = files[0];
|
|
|
|
|
let reader = new FileReader();
|
2016-05-06 13:23:51 +00:00
|
|
|
|
|
|
|
|
reader.onload = function(evt) {
|
2020-02-19 16:42:44 +00:00
|
|
|
handleLoadText(this.result, append, file.name);
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
reader.readAsText(file);
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-19 16:42:44 +00:00
|
|
|
function handleLoadText(text, append, fileName) {
|
2020-04-28 10:38:25 +00:00
|
|
|
try {
|
|
|
|
|
handleLoadJSON(JSON.parse(text), append, fileName);
|
|
|
|
|
} catch(e) {
|
|
|
|
|
if (!fileName.endsWith('.txt')) {
|
|
|
|
|
alert(`Error parsing "${fileName}"`);
|
|
|
|
|
console.error(e);
|
|
|
|
|
}
|
|
|
|
|
handleLoadTXT(text, append, fileName);
|
|
|
|
|
}
|
2016-09-29 13:31:12 +00:00
|
|
|
}
|
|
|
|
|
|
2016-11-22 10:12:53 +00:00
|
|
|
function getStateFromParams() {
|
2020-06-30 08:24:58 +00:00
|
|
|
let query = window.location.search.substr(1);
|
|
|
|
|
let result = {};
|
2016-11-22 10:12:53 +00:00
|
|
|
query.split("&").forEach((part) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let item = part.split("=");
|
|
|
|
|
let key = decodeURIComponent(item[0])
|
2016-11-22 10:12:53 +00:00
|
|
|
result[key] = decodeURIComponent(item[1]);
|
|
|
|
|
});
|
|
|
|
|
return result;
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-19 16:42:44 +00:00
|
|
|
function handleLoadJSON(json, append, fileName) {
|
2017-03-09 09:53:34 +00:00
|
|
|
let isFirstLoad = pages === undefined;
|
|
|
|
|
json = fixClusterTelemetryResults(json);
|
2020-06-30 08:24:58 +00:00
|
|
|
json = fixTraceImportJSON(json);
|
|
|
|
|
json = fixSingleVersionJSON(json, fileName);
|
2017-03-09 09:53:34 +00:00
|
|
|
if (append && !isFirstLoad) {
|
|
|
|
|
json = createUniqueVersions(json)
|
|
|
|
|
}
|
|
|
|
|
if (!append || isFirstLoad) {
|
|
|
|
|
pages = new Pages();
|
|
|
|
|
versions = Versions.fromJSON(json);
|
|
|
|
|
} else {
|
|
|
|
|
Versions.fromJSON(json).forEach(e => versions.add(e))
|
|
|
|
|
}
|
2020-04-28 10:38:25 +00:00
|
|
|
displayResultsAfterLoading(isFirstLoad)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleLoadTXT(txt, append, fileName) {
|
|
|
|
|
let isFirstLoad = pages === undefined;
|
|
|
|
|
// Load raw RCS output which contains a single page
|
|
|
|
|
if (!append || isFirstLoad) {
|
|
|
|
|
pages = new Pages();
|
|
|
|
|
versions = new Versions()
|
|
|
|
|
}
|
|
|
|
|
versions.add(Version.fromTXT(fileName, txt))
|
|
|
|
|
displayResultsAfterLoading()
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function displayResultsAfterLoading(isFirstLoad) {
|
|
|
|
|
let state = getStateFromParams();
|
2017-03-09 09:53:34 +00:00
|
|
|
initialize()
|
2020-06-30 08:24:58 +00:00
|
|
|
if (isFirstLoad && !popHistoryState(state) && selectedPage) {
|
2017-03-09 09:53:34 +00:00
|
|
|
showEntry(selectedPage.total);
|
2020-04-28 10:38:25 +00:00
|
|
|
return;
|
2017-03-09 09:53:34 +00:00
|
|
|
}
|
2020-04-28 10:38:25 +00:00
|
|
|
selectedPage = versions.versions[0].pages[0]
|
|
|
|
|
if (selectedPage == undefined) return;
|
|
|
|
|
showPage(selectedPage);
|
2017-03-09 09:53:34 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function fixClusterTelemetryResults(json) {
|
|
|
|
|
// Convert CT results to callstats compatible JSON
|
|
|
|
|
// Input:
|
2020-02-19 16:42:44 +00:00
|
|
|
// { VERSION_NAME: { PAGE: { METRIC: { "count": {XX}, "duration": {XX} }.. }}.. }
|
2017-03-09 09:53:34 +00:00
|
|
|
let firstEntry;
|
|
|
|
|
for (let key in json) {
|
|
|
|
|
firstEntry = json[key];
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
// Return the original JSON if it is not a CT result.
|
|
|
|
|
if (firstEntry.pairs === undefined) return json;
|
|
|
|
|
// The results include already the group totals, remove them by filtering.
|
|
|
|
|
let groupNames = new Set(Array.from(Group.groups.values()).map(e => e.name));
|
|
|
|
|
let result = Object.create(null);
|
|
|
|
|
for (let file_name in json) {
|
|
|
|
|
let entries = [];
|
|
|
|
|
let file_data = json[file_name].pairs;
|
|
|
|
|
for (let name in file_data) {
|
|
|
|
|
if(name != "Total" && groupNames.has(name)) continue;
|
|
|
|
|
let entry = file_data[name];
|
|
|
|
|
let count = entry.count;
|
|
|
|
|
let time = entry.time;
|
|
|
|
|
entries.push([name, time, 0, 0, count, 0, 0]);
|
2020-06-30 08:24:58 +00:00
|
|
|
}
|
2017-03-09 09:53:34 +00:00
|
|
|
let domain = file_name.split("/").slice(-1)[0];
|
|
|
|
|
result[domain] = entries;
|
|
|
|
|
}
|
|
|
|
|
return {__proto__:null, ClusterTelemetry: result};
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-30 08:24:58 +00:00
|
|
|
function fixTraceImportJSON(json) {
|
|
|
|
|
// Fix json file that was created by converting a trace json output
|
|
|
|
|
if (!('telemetry-results' in json)) return json;
|
|
|
|
|
// { telemetry-results: { PAGE:[ { METRIC: [ COUNT TIME ], ... }, ... ]}}
|
|
|
|
|
let version_data = {__proto__:null};
|
|
|
|
|
json = json["telemetry-results"];
|
|
|
|
|
for (let page_name in json) {
|
|
|
|
|
if (page_name == "placeholder") continue;
|
|
|
|
|
let page_data = {
|
|
|
|
|
__proto__:null,
|
|
|
|
|
Total: {
|
|
|
|
|
duration: {average: 0, stddev: 0},
|
|
|
|
|
count: {average:0, stddev: 0}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
let page = json[page_name];
|
|
|
|
|
for (let slice of page ) {
|
|
|
|
|
for (let metric_name in slice) {
|
|
|
|
|
if (metric_name == "Blink_V8") continue;
|
|
|
|
|
// sum up entries
|
|
|
|
|
if (!(metric_name in page_data)) {
|
|
|
|
|
page_data[metric_name] = {
|
|
|
|
|
duration: {average: 0, stddev: 0},
|
|
|
|
|
count: {average:0, stddev: 0}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
let [metric_count, metric_duration] = slice[metric_name]
|
|
|
|
|
let metric = page_data[metric_name];
|
|
|
|
|
const kMicroToMilli = 1/1000;
|
|
|
|
|
metric.duration.average += metric_duration * kMicroToMilli;
|
|
|
|
|
metric.count.average += metric_count;
|
|
|
|
|
|
|
|
|
|
if (metric_name.startsWith('Blink_')) continue;
|
|
|
|
|
let total = page_data['Total'];
|
|
|
|
|
total.duration.average += metric_duration * kMicroToMilli;
|
|
|
|
|
total.count.average += metric_count;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
version_data[page_name] = page_data;
|
|
|
|
|
}
|
|
|
|
|
return version_data;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function fixSingleVersionJSON(json, name) {
|
2016-12-08 11:35:06 +00:00
|
|
|
// Try to detect the single-version case, where we're missing the toplevel
|
|
|
|
|
// version object. The incoming JSON is of the form:
|
2020-02-19 16:42:44 +00:00
|
|
|
// { PAGE: ... , PAGE_2: }
|
2016-12-08 11:35:06 +00:00
|
|
|
// Instead of the default multi-page JSON:
|
|
|
|
|
// {"Version 1": { "Page 1": ..., ...}, "Version 2": {...}, ...}
|
|
|
|
|
// In this case insert a single "Default" version as top-level entry.
|
2020-02-19 16:42:44 +00:00
|
|
|
let firstProperty = (object) => {
|
|
|
|
|
for (let key in object) return object[key];
|
2016-12-08 11:35:06 +00:00
|
|
|
};
|
2020-02-19 16:42:44 +00:00
|
|
|
let maybePage = firstProperty(json);
|
|
|
|
|
let maybeMetrics = firstProperty(maybePage);
|
|
|
|
|
let tempName = name ? name : new Date().toISOString();
|
2020-06-30 08:24:58 +00:00
|
|
|
tempName = window.prompt('Enter a name for the loaded file:', tempName);
|
2020-02-19 16:42:44 +00:00
|
|
|
if ('count' in maybeMetrics && 'duration' in maybeMetrics) {
|
|
|
|
|
return {[tempName]: json}
|
|
|
|
|
}
|
|
|
|
|
// Legacy fallback where the metrics are encoded as arrays:
|
|
|
|
|
// { PAGE: [[metric_name, ...], [...], ]}
|
|
|
|
|
if (Array.isArray(maybeMetrics)) {
|
|
|
|
|
return {[tempName]: json}
|
|
|
|
|
}
|
|
|
|
|
return json
|
2016-12-08 11:35:06 +00:00
|
|
|
}
|
|
|
|
|
|
2020-06-30 08:24:58 +00:00
|
|
|
let appendIndex = 0;
|
2017-03-09 09:53:34 +00:00
|
|
|
function createUniqueVersions(json) {
|
2020-06-30 08:24:58 +00:00
|
|
|
// Make sure all toplevel entries are unique names and added properly
|
2017-03-09 09:53:34 +00:00
|
|
|
appendIndex++;
|
|
|
|
|
let result = {__proto__:null}
|
|
|
|
|
for (let key in json) {
|
|
|
|
|
result[key+"_"+appendIndex] = json[key];
|
2016-11-22 10:12:53 +00:00
|
|
|
}
|
2017-03-09 09:53:34 +00:00
|
|
|
return result
|
2016-09-22 20:58:11 +00:00
|
|
|
}
|
|
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function handleToggleGroup(event) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let group = event.target.parentNode.parentNode.entry;
|
2016-05-06 13:23:51 +00:00
|
|
|
toggleGroup(selectedPage.get(group.name));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleSelectPage(select, event) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let option = select.options[select.selectedIndex];
|
2016-05-06 13:23:51 +00:00
|
|
|
if (select.id == "select_0") {
|
2017-03-01 13:28:06 +00:00
|
|
|
showSelectedEntryInPage(option.page);
|
2016-05-06 13:23:51 +00:00
|
|
|
} else {
|
2020-06-30 08:24:58 +00:00
|
|
|
let columnIndex = select.id.split('_')[1];
|
2016-05-06 13:23:51 +00:00
|
|
|
showPageInColumn(option.page, columnIndex);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleSelectVersion(select, event) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let option = select.options[select.selectedIndex];
|
|
|
|
|
let version = option.version;
|
2016-05-06 13:23:51 +00:00
|
|
|
if (select.id == "selectVersion_0") {
|
2020-06-30 08:24:58 +00:00
|
|
|
let page = version.get(selectedPage.name);
|
2017-03-01 13:28:06 +00:00
|
|
|
showSelectedEntryInPage(page);
|
2016-05-06 13:23:51 +00:00
|
|
|
} else {
|
2020-06-30 08:24:58 +00:00
|
|
|
let columnIndex = select.id.split('_')[1];
|
|
|
|
|
let pageSelect = $('select_' + columnIndex);
|
|
|
|
|
let page = pageSelect.options[pageSelect.selectedIndex].page;
|
2016-05-06 13:23:51 +00:00
|
|
|
page = version.get(page.name);
|
|
|
|
|
showPageInColumn(page, columnIndex);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleSelectDetailRow(table, event) {
|
|
|
|
|
if (event.target.tagName != 'TD') return;
|
2020-06-30 08:24:58 +00:00
|
|
|
let tr = event.target.parentNode;
|
2016-05-06 13:23:51 +00:00
|
|
|
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;
|
2020-06-30 08:24:58 +00:00
|
|
|
let tr = event.target.parentNode;
|
2016-05-06 13:23:51 +00:00
|
|
|
if (tr.tagName != 'TR') return;
|
|
|
|
|
if (tr.entry === undefined) return;
|
|
|
|
|
selectEntry(tr.entry, false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleSelectBaseline(select, event) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let option = select.options[select.selectedIndex];
|
2016-06-06 13:07:20 +00:00
|
|
|
baselineVersion = option.version;
|
2020-06-30 08:24:58 +00:00
|
|
|
let showingDiff = baselineVersion !== undefined;
|
|
|
|
|
let body = $('body');
|
2016-06-06 13:07:20 +00:00
|
|
|
toggleCssClass(body, 'diff', showingDiff);
|
|
|
|
|
toggleCssClass(body, 'noDiff', !showingDiff);
|
2016-05-06 13:23:51 +00:00
|
|
|
showPage(selectedPage);
|
|
|
|
|
if (selectedEntry === undefined) return;
|
|
|
|
|
selectEntry(selectedEntry, true);
|
|
|
|
|
}
|
|
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
function findEntry(event) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let target = event.target;
|
2016-06-06 13:07:20 +00:00
|
|
|
while (target.entry === undefined) {
|
|
|
|
|
target = target.parentNode;
|
|
|
|
|
if (!target) return undefined;
|
|
|
|
|
}
|
|
|
|
|
return target.entry;
|
|
|
|
|
}
|
|
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function handleUpdatePopover(event) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let popover = $('popover');
|
2016-05-06 13:23:51 +00:00
|
|
|
popover.style.left = event.pageX + 'px';
|
|
|
|
|
popover.style.top = event.pageY + 'px';
|
2016-06-06 13:07:20 +00:00
|
|
|
popover.style.display = 'none';
|
2016-05-06 13:23:51 +00:00
|
|
|
popover.style.display = event.shiftKey ? 'block' : 'none';
|
2020-06-30 08:24:58 +00:00
|
|
|
let entry = findEntry(event);
|
2016-06-06 13:07:20 +00:00
|
|
|
if (entry === undefined) return;
|
|
|
|
|
showPopover(entry);
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
|
2016-09-28 07:49:45 +00:00
|
|
|
function handleToggleVersionOrPageEnable(event) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let item = this.item ;
|
2016-06-06 13:07:20 +00:00
|
|
|
if (item === undefined) return;
|
|
|
|
|
item .enabled = this.checked;
|
2016-05-11 12:32:27 +00:00
|
|
|
initialize();
|
2020-06-30 08:24:58 +00:00
|
|
|
let page = selectedPage;
|
2016-05-11 12:32:27 +00:00
|
|
|
if (page === undefined || !page.version.enabled) {
|
|
|
|
|
page = versions.getEnabledPage(page.name);
|
|
|
|
|
}
|
2016-09-28 07:49:45 +00:00
|
|
|
if (!page.enabled) {
|
|
|
|
|
page = page.getNextPage();
|
|
|
|
|
}
|
2016-05-11 12:32:27 +00:00
|
|
|
showPage(page);
|
|
|
|
|
}
|
|
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
function handleToggleContentVisibility(event) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let content = event.target.contentNode;
|
2016-06-06 13:07:20 +00:00
|
|
|
toggleCssClass(content, 'hidden');
|
|
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
function handleCodeSearch(event) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let entry = findEntry(event);
|
2016-06-06 13:07:20 +00:00
|
|
|
if (entry === undefined) return;
|
2020-06-30 08:24:58 +00:00
|
|
|
let url = "https://cs.chromium.org/search/?sq=package:chromium&type=cs&q=";
|
2016-06-06 13:07:20 +00:00
|
|
|
name = entry.name;
|
|
|
|
|
if (name.startsWith("API_")) {
|
|
|
|
|
name = name.substring(4);
|
|
|
|
|
}
|
|
|
|
|
url += encodeURIComponent(name) + "+file:src/v8/src";
|
|
|
|
|
window.open(url,'_blank');
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2019-01-04 12:18:43 +00:00
|
|
|
<script>
|
2016-06-06 13:07:20 +00:00
|
|
|
"use strict"
|
|
|
|
|
// =========================================================================
|
2016-05-06 13:23:51 +00:00
|
|
|
class Versions {
|
|
|
|
|
constructor() {
|
|
|
|
|
this.versions = [];
|
|
|
|
|
}
|
|
|
|
|
add(version) {
|
|
|
|
|
this.versions.push(version)
|
|
|
|
|
}
|
2016-06-06 13:07:20 +00:00
|
|
|
getPageVersions(page) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let result = [];
|
2016-05-06 13:23:51 +00:00
|
|
|
this.versions.forEach((version) => {
|
2016-05-11 12:32:27 +00:00
|
|
|
if (!version.enabled) return;
|
2020-06-30 08:24:58 +00:00
|
|
|
let versionPage = version.get(page.name);
|
2016-06-06 13:07:20 +00:00
|
|
|
if (versionPage !== undefined) result.push(versionPage);
|
2016-05-06 13:23:51 +00:00
|
|
|
});
|
|
|
|
|
return result;
|
|
|
|
|
}
|
|
|
|
|
get length() {
|
|
|
|
|
return this.versions.length
|
|
|
|
|
}
|
|
|
|
|
get(index) {
|
|
|
|
|
return this.versions[index]
|
2016-11-22 10:12:53 +00:00
|
|
|
}
|
|
|
|
|
getByName(name) {
|
|
|
|
|
return this.versions.find((each) => each.name == name);
|
|
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
forEach(f) {
|
|
|
|
|
this.versions.forEach(f);
|
|
|
|
|
}
|
|
|
|
|
sort() {
|
2016-06-06 13:07:20 +00:00
|
|
|
this.versions.sort(NameComparator);
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
2016-05-11 12:32:27 +00:00
|
|
|
getEnabledPage(name) {
|
2020-06-30 08:24:58 +00:00
|
|
|
for (let i = 0; i < this.versions.length; i++) {
|
|
|
|
|
let version = this.versions[i];
|
2016-05-11 12:32:27 +00:00
|
|
|
if (!version.enabled) continue;
|
2020-06-30 08:24:58 +00:00
|
|
|
let page = version.get(name);
|
2016-05-11 12:32:27 +00:00
|
|
|
if (page !== undefined) return page;
|
2016-06-06 13:07:20 +00:00
|
|
|
}
|
2016-05-11 12:32:27 +00:00
|
|
|
}
|
2020-04-28 10:38:25 +00:00
|
|
|
|
|
|
|
|
static fromJSON(json) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let versions = new Versions();
|
|
|
|
|
for (let version in json) {
|
2020-04-28 10:38:25 +00:00
|
|
|
versions.add(Version.fromJSON(version, json[version]));
|
|
|
|
|
}
|
|
|
|
|
versions.sort();
|
|
|
|
|
return versions;
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
class Version {
|
|
|
|
|
constructor(name) {
|
|
|
|
|
this.name = name;
|
2016-05-11 12:32:27 +00:00
|
|
|
this.enabled = true;
|
|
|
|
|
this.pages = [];
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
add(page) {
|
|
|
|
|
this.pages.push(page);
|
|
|
|
|
}
|
|
|
|
|
indexOf(name) {
|
2020-06-30 08:24:58 +00:00
|
|
|
for (let i = 0; i < this.pages.length; i++) {
|
2016-05-06 13:23:51 +00:00
|
|
|
if (this.pages[i].name == name) return i;
|
|
|
|
|
}
|
|
|
|
|
return -1;
|
|
|
|
|
}
|
2016-09-28 07:49:45 +00:00
|
|
|
getNextPage(page) {
|
|
|
|
|
if (this.length == 0) return undefined;
|
|
|
|
|
return this.pages[(this.indexOf(page.name) + 1) % this.length];
|
|
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
get(name) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let index = this.indexOf(name);
|
2016-05-06 13:23:51 +00:00
|
|
|
if (0 <= index) return this.pages[index];
|
|
|
|
|
return undefined
|
|
|
|
|
}
|
|
|
|
|
get length() {
|
2016-09-28 07:49:45 +00:00
|
|
|
return this.pages.length
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
getEntry(entry) {
|
|
|
|
|
if (entry === undefined) return undefined;
|
2020-06-30 08:24:58 +00:00
|
|
|
let page = this.get(entry.page.name);
|
2016-05-06 13:23:51 +00:00
|
|
|
if (page === undefined) return undefined;
|
|
|
|
|
return page.get(entry.name);
|
|
|
|
|
}
|
|
|
|
|
forEachEntry(fun) {
|
2016-06-06 13:07:20 +00:00
|
|
|
this.forEachPage((page) => {
|
2016-05-06 13:23:51 +00:00
|
|
|
page.forEach(fun);
|
|
|
|
|
});
|
|
|
|
|
}
|
2016-06-06 13:07:20 +00:00
|
|
|
forEachPage(fun) {
|
|
|
|
|
this.pages.forEach((page) => {
|
|
|
|
|
if (!page.enabled) return;
|
|
|
|
|
fun(page);
|
|
|
|
|
})
|
|
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
allEntries() {
|
2020-06-30 08:24:58 +00:00
|
|
|
let map = new Map();
|
2016-05-06 13:23:51 +00:00
|
|
|
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;
|
2020-06-30 08:24:58 +00:00
|
|
|
let sum = 0;
|
2016-06-06 13:07:20 +00:00
|
|
|
this.forEachPage((page) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let entry = page.get(name);
|
2016-05-06 13:23:51 +00:00
|
|
|
if (entry !== undefined) sum += entry[property];
|
|
|
|
|
});
|
|
|
|
|
return sum;
|
|
|
|
|
}
|
|
|
|
|
getTotalTime(name, showDiff) {
|
|
|
|
|
return this.getTotalValue(name, showDiff === false ? '_time' : 'time');
|
|
|
|
|
}
|
|
|
|
|
getTotalTimePercent(name, showDiff) {
|
2016-06-06 13:07:20 +00:00
|
|
|
if (baselineVersion === undefined || showDiff === false) {
|
2016-05-11 12:32:27 +00:00
|
|
|
// Return the overall average percent of the given entry name.
|
|
|
|
|
return this.getTotalValue(name, 'time') /
|
|
|
|
|
this.getTotalTime('Group-Total') * 100;
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
2016-05-11 12:32:27 +00:00
|
|
|
// Otherwise return the difference to the sum of the baseline version.
|
2020-06-30 08:24:58 +00:00
|
|
|
let baselineValue = baselineVersion.getTotalTime(name, false);
|
|
|
|
|
let total = this.getTotalValue(name, '_time');
|
2016-06-06 13:07:20 +00:00
|
|
|
return (total / baselineValue - 1) * 100;
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
getTotalTimeVariance(name, showDiff) {
|
|
|
|
|
// Calculate the overall error for a given entry name
|
2020-06-30 08:24:58 +00:00
|
|
|
let sum = 0;
|
2016-06-06 13:07:20 +00:00
|
|
|
this.forEachPage((page) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let entry = page.get(name);
|
2016-05-06 13:23:51 +00:00
|
|
|
if (entry === undefined) return;
|
|
|
|
|
sum += entry.timeVariance * entry.timeVariance;
|
|
|
|
|
});
|
|
|
|
|
return Math.sqrt(sum);
|
|
|
|
|
}
|
|
|
|
|
getTotalTimeVariancePercent(name, showDiff) {
|
2017-02-08 17:29:56 +00:00
|
|
|
return this.getTotalTimeVariance(name, showDiff) /
|
2016-05-06 13:23:51 +00:00
|
|
|
this.getTotalTime(name, showDiff) * 100;
|
|
|
|
|
}
|
|
|
|
|
getTotalCount(name, showDiff) {
|
2016-05-11 12:32:27 +00:00
|
|
|
return this.getTotalValue(name, showDiff === false ? '_count' : 'count');
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
2016-06-06 13:07:20 +00:00
|
|
|
getAverageTimeImpact(name, showDiff) {
|
|
|
|
|
return this.getTotalTime(name, showDiff) / this.pages.length;
|
|
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
getPagesByPercentImpact(name) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let sortedPages =
|
2016-05-06 13:23:51 +00:00
|
|
|
this.pages.filter((each) => {
|
|
|
|
|
return each.get(name) !== undefined
|
|
|
|
|
});
|
|
|
|
|
sortedPages.sort((a, b) => {
|
|
|
|
|
return b.get(name).timePercent - a.get(name).timePercent;
|
|
|
|
|
});
|
|
|
|
|
return sortedPages;
|
|
|
|
|
}
|
2016-05-11 12:32:27 +00:00
|
|
|
sort() {
|
2016-06-06 13:07:20 +00:00
|
|
|
this.pages.sort(NameComparator)
|
2016-05-11 12:32:27 +00:00
|
|
|
}
|
2020-04-28 10:38:25 +00:00
|
|
|
|
|
|
|
|
static fromJSON(name, data) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let version = new Version(name);
|
|
|
|
|
for (let pageName in data) {
|
2020-04-28 10:38:25 +00:00
|
|
|
version.add(PageVersion.fromJSON(version, pageName, data[pageName]));
|
|
|
|
|
}
|
|
|
|
|
version.sort();
|
|
|
|
|
return version;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
static fromTXT(name, txt) {
|
|
|
|
|
let version = new Version(name);
|
|
|
|
|
let pageName = "RAW DATA";
|
|
|
|
|
version.add(PageVersion.fromTXT(version, pageName, txt));
|
|
|
|
|
return version;
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
|
|
|
|
|
class Page {
|
2016-06-06 13:07:20 +00:00
|
|
|
constructor(name) {
|
2016-05-06 13:23:51 +00:00
|
|
|
this.name = name;
|
2016-06-06 13:07:20 +00:00
|
|
|
this.enabled = true;
|
|
|
|
|
this.versions = [];
|
|
|
|
|
}
|
|
|
|
|
add(page) {
|
|
|
|
|
this.versions.push(page);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
class PageVersion {
|
|
|
|
|
constructor(version, page) {
|
|
|
|
|
this.page = page;
|
|
|
|
|
this.page.add(this);
|
2016-09-28 07:49:45 +00:00
|
|
|
this.total = Group.groups.get('total').entry();
|
2016-06-06 13:07:20 +00:00
|
|
|
this.total.isTotal = true;
|
2016-09-28 07:49:45 +00:00
|
|
|
this.unclassified = new UnclassifiedEntry(this)
|
2016-05-06 13:23:51 +00:00
|
|
|
this.groups = [
|
|
|
|
|
this.total,
|
2016-09-28 07:49:45 +00:00
|
|
|
Group.groups.get('ic').entry(),
|
2018-09-06 14:23:36 +00:00
|
|
|
Group.groups.get('optimize-background').entry(),
|
2016-09-28 07:49:45 +00:00
|
|
|
Group.groups.get('optimize').entry(),
|
2017-01-03 18:11:58 +00:00
|
|
|
Group.groups.get('compile-background').entry(),
|
2016-09-28 07:49:45 +00:00
|
|
|
Group.groups.get('compile').entry(),
|
2016-11-16 18:51:32 +00:00
|
|
|
Group.groups.get('parse-background').entry(),
|
2016-09-28 07:49:45 +00:00
|
|
|
Group.groups.get('parse').entry(),
|
2020-06-30 08:24:58 +00:00
|
|
|
Group.groups.get('blink').entry(),
|
2016-09-28 07:49:45 +00:00
|
|
|
Group.groups.get('callback').entry(),
|
|
|
|
|
Group.groups.get('api').entry(),
|
|
|
|
|
Group.groups.get('gc').entry(),
|
|
|
|
|
Group.groups.get('javascript').entry(),
|
|
|
|
|
Group.groups.get('runtime').entry(),
|
2016-05-06 13:23:51 +00:00
|
|
|
this.unclassified
|
|
|
|
|
];
|
|
|
|
|
this.entryDict = new Map();
|
|
|
|
|
this.groups.forEach((entry) => {
|
|
|
|
|
entry.page = this;
|
|
|
|
|
this.entryDict.set(entry.name, entry);
|
|
|
|
|
});
|
|
|
|
|
this.version = version;
|
|
|
|
|
}
|
2016-11-22 10:12:53 +00:00
|
|
|
toString() {
|
|
|
|
|
return this.version.name + ": " + this.name;
|
|
|
|
|
}
|
|
|
|
|
urlParams() {
|
|
|
|
|
return { version: this.version.name, page: this.name};
|
|
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
add(entry) {
|
2016-10-26 12:20:03 +00:00
|
|
|
// Ignore accidentally added Group entries.
|
|
|
|
|
if (entry.name.startsWith(GroupedEntry.prefix)) return;
|
2016-05-06 13:23:51 +00:00
|
|
|
entry.page = this;
|
|
|
|
|
this.entryDict.set(entry.name, entry);
|
2020-06-30 08:24:58 +00:00
|
|
|
for (let group of this.groups) {
|
|
|
|
|
if (group.add(entry)) return;
|
|
|
|
|
}
|
|
|
|
|
console.error("Sould not get here", entry);
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
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
|
|
|
|
|
}
|
2016-06-06 13:07:20 +00:00
|
|
|
get name() { return this.page.name }
|
|
|
|
|
get enabled() { return this.page.enabled }
|
2016-05-06 13:23:51 +00:00
|
|
|
forEachSorted(referencePage, func) {
|
2016-06-06 13:07:20 +00:00
|
|
|
// Iterate over all the entries in the order they appear on the
|
|
|
|
|
// reference page.
|
2016-05-06 13:23:51 +00:00
|
|
|
referencePage.forEach((parent, referenceEntry) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let entry;
|
2016-05-06 13:23:51 +00:00
|
|
|
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()
|
|
|
|
|
});
|
|
|
|
|
}
|
2016-06-06 13:07:20 +00:00
|
|
|
distanceFromTotalPercent() {
|
2020-06-30 08:24:58 +00:00
|
|
|
let sum = 0;
|
2016-06-06 13:07:20 +00:00
|
|
|
this.groups.forEach(group => {
|
|
|
|
|
if (group == this.total) return;
|
2020-06-30 08:24:58 +00:00
|
|
|
let value = group.getTimePercentImpact() -
|
2016-06-06 13:07:20 +00:00
|
|
|
this.getEntry(group).timePercent;
|
|
|
|
|
sum += value * value;
|
|
|
|
|
});
|
|
|
|
|
return sum;
|
2016-05-11 12:32:27 +00:00
|
|
|
}
|
2016-09-28 07:49:45 +00:00
|
|
|
getNextPage() {
|
|
|
|
|
return this.version.getNextPage(this);
|
|
|
|
|
}
|
2020-04-28 10:38:25 +00:00
|
|
|
|
|
|
|
|
static fromJSON(version, name, data) {
|
|
|
|
|
let page = new PageVersion(version, pages.get(name));
|
|
|
|
|
// Distinguish between the legacy format which just uses Arrays,
|
|
|
|
|
// or the new object style.
|
|
|
|
|
if (Array.isArray(data)) {
|
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
|
|
page.add(Entry.fromLegacyJSON(i, data[data.length - i - 1]));
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
let position = 0;
|
|
|
|
|
for (let metric_name in data) {
|
|
|
|
|
page.add(Entry.fromJSON(position, metric_name, data[metric_name]));
|
|
|
|
|
position++;
|
|
|
|
|
}
|
2020-02-19 16:42:44 +00:00
|
|
|
}
|
2020-04-28 10:38:25 +00:00
|
|
|
page.sort();
|
|
|
|
|
return page
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
static fromTXT(version, name, txt) {
|
|
|
|
|
let pageVersion = new PageVersion(version, pages.get(name));
|
|
|
|
|
let lines = txt.split('\n');
|
|
|
|
|
let split = / +/g
|
|
|
|
|
// Skip the first two lines (HEADER and SEPARATOR)
|
|
|
|
|
for (let i = 2; i < lines.length; i++) {
|
|
|
|
|
let line = lines[i].trim().split(split)
|
|
|
|
|
if (line.length != 5) continue;
|
|
|
|
|
let position = i-2;
|
|
|
|
|
pageVersion.add(Entry.fromTXT(position, line));
|
2020-02-19 16:42:44 +00:00
|
|
|
}
|
2020-04-28 10:38:25 +00:00
|
|
|
return pageVersion;
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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;
|
2016-06-06 13:07:20 +00:00
|
|
|
this.isTotal = false;
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
2016-11-22 10:12:53 +00:00
|
|
|
urlParams() {
|
2020-06-30 08:24:58 +00:00
|
|
|
let params = this.page.urlParams();
|
2016-11-22 10:12:53 +00:00
|
|
|
params.entry = this.name;
|
|
|
|
|
return params;
|
|
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
getCompareWithBaseline(value, property) {
|
|
|
|
|
if (baselineVersion == undefined) return value;
|
2020-06-30 08:24:58 +00:00
|
|
|
let baselineEntry = baselineVersion.getEntry(this);
|
2016-05-06 13:23:51 +00:00
|
|
|
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() {
|
2020-06-30 08:24:58 +00:00
|
|
|
let value = this._time / this.page.total._time * 100;
|
2016-05-06 13:23:51 +00:00
|
|
|
if (baselineVersion == undefined) return value;
|
2020-06-30 08:24:58 +00:00
|
|
|
let baselineEntry = baselineVersion.getEntry(this);
|
2016-05-06 13:23:51 +00:00
|
|
|
if (!baselineEntry) return value;
|
2016-05-11 12:32:27 +00:00
|
|
|
if (baselineVersion === this.page.version) return value;
|
|
|
|
|
return (this._time - baselineEntry._time) / this.page.total._time *
|
|
|
|
|
100;
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
2016-06-06 13:07:20 +00:00
|
|
|
get timePercentPerEntry() {
|
2020-06-30 08:24:58 +00:00
|
|
|
let value = this._time / this.page.total._time * 100;
|
2016-06-06 13:07:20 +00:00
|
|
|
if (baselineVersion == undefined) return value;
|
2020-06-30 08:24:58 +00:00
|
|
|
let baselineEntry = baselineVersion.getEntry(this);
|
2016-06-06 13:07:20 +00:00
|
|
|
if (!baselineEntry) return value;
|
|
|
|
|
if (baselineVersion === this.page.version) return value;
|
|
|
|
|
return (this._time / baselineEntry._time - 1) * 100;
|
|
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
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) {
|
2016-05-11 12:32:27 +00:00
|
|
|
return this.page.version.getTotalTimeVariancePercent(this.name, showDiff);
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
|
|
|
|
getTimePercentImpact(showDiff) {
|
|
|
|
|
return this.page.version.getTotalTimePercent(this.name, showDiff);
|
|
|
|
|
}
|
|
|
|
|
getCountImpact(showDiff) {
|
|
|
|
|
return this.page.version.getTotalCount(this.name, showDiff);
|
|
|
|
|
}
|
2016-06-06 13:07:20 +00:00
|
|
|
getAverageTimeImpact(showDiff) {
|
|
|
|
|
return this.page.version.getAverageTimeImpact(this.name, showDiff);
|
|
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
getPagesByPercentImpact() {
|
|
|
|
|
return this.page.version.getPagesByPercentImpact(this.name);
|
|
|
|
|
}
|
|
|
|
|
get isGroup() {
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
get timeVariance() {
|
|
|
|
|
return this._timeVariance
|
|
|
|
|
}
|
|
|
|
|
get timeVariancePercent() {
|
|
|
|
|
return this._timeVariancePercent
|
|
|
|
|
}
|
2020-04-28 10:38:25 +00:00
|
|
|
|
|
|
|
|
static fromLegacyJSON(position, data) {
|
|
|
|
|
return new Entry(position, ...data);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
static fromJSON(position, name, data) {
|
|
|
|
|
let time = data.duration;
|
|
|
|
|
let count = data.count;
|
|
|
|
|
return new Entry(position, name, time.average, time.stddev, 0,
|
|
|
|
|
count.average, count.stddev, 0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
static fromTXT(position, splitLine) {
|
|
|
|
|
let [name, time, timePercent, count, countPercent] = splitLine;
|
|
|
|
|
time = time.split('ms')
|
|
|
|
|
let timeDeviation = 0, countDeviation = 0;
|
|
|
|
|
let timeDeviationPercent = 0, countDeviationPercent = 0
|
|
|
|
|
return new Entry(position, name,
|
|
|
|
|
Number.parseFloat(time), timeDeviation, timeDeviationPercent,
|
|
|
|
|
Number.parseInt(count), countDeviation, countDeviationPercent)
|
|
|
|
|
}
|
2020-02-19 16:42:44 +00:00
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
|
2017-02-08 17:29:56 +00:00
|
|
|
class Group {
|
2020-06-30 08:24:58 +00:00
|
|
|
constructor(name, regexp, color, enabled=true, addsToTotal=true) {
|
2016-09-28 07:49:45 +00:00
|
|
|
this.name = name;
|
2016-05-06 13:23:51 +00:00
|
|
|
this.regexp = regexp;
|
2016-06-06 13:07:20 +00:00
|
|
|
this.color = color;
|
2020-06-30 08:24:58 +00:00
|
|
|
this.enabled = enabled;
|
|
|
|
|
this.addsToTotal = addsToTotal;
|
2016-09-28 07:49:45 +00:00
|
|
|
}
|
|
|
|
|
entry() { return new GroupedEntry(this) };
|
|
|
|
|
}
|
|
|
|
|
Group.groups = new Map();
|
|
|
|
|
Group.add = function(name, group) {
|
|
|
|
|
this.groups.set(name, group);
|
2016-11-16 18:51:32 +00:00
|
|
|
return group;
|
2016-09-28 07:49:45 +00:00
|
|
|
}
|
2020-06-30 08:24:58 +00:00
|
|
|
Group.add('total', new Group('Total', /.*Total.*/, '#BBB', true, false));
|
2016-12-08 11:35:06 +00:00
|
|
|
Group.add('ic', new Group('IC', /.*IC_.*/, "#3366CC"));
|
2018-09-06 14:23:36 +00:00
|
|
|
Group.add('optimize-background', new Group('Optimize-Background',
|
2019-12-02 16:47:57 +00:00
|
|
|
/(.*OptimizeBackground.*)/, "#702000"));
|
2016-09-28 07:49:45 +00:00
|
|
|
Group.add('optimize', new Group('Optimize',
|
|
|
|
|
/StackGuard|.*Optimize.*|.*Deoptimize.*|Recompile.*/, "#DC3912"));
|
2017-01-03 18:11:58 +00:00
|
|
|
Group.add('compile-background', new Group('Compile-Background',
|
2018-09-06 14:23:36 +00:00
|
|
|
/(.*CompileBackground.*)/, "#b08000"));
|
2016-12-08 11:35:06 +00:00
|
|
|
Group.add('compile', new Group('Compile',
|
|
|
|
|
/(^Compile.*)|(.*_Compile.*)/, "#FFAA00"));
|
2016-11-16 18:51:32 +00:00
|
|
|
Group.add('parse-background',
|
2018-09-06 14:23:36 +00:00
|
|
|
new Group('Parse-Background', /.*ParseBackground.*/, "#c05000"));
|
2016-09-28 07:49:45 +00:00
|
|
|
Group.add('parse', new Group('Parse', /.*Parse.*/, "#FF6600"));
|
2020-06-30 08:24:58 +00:00
|
|
|
Group.add('callback', new Group('Blink C++', /.*Callback*/, "#109618"));
|
2016-09-28 07:49:45 +00:00
|
|
|
Group.add('api', new Group('API', /.*API.*/, "#990099"));
|
2017-08-01 13:28:52 +00:00
|
|
|
Group.add('gc-custom', new Group('GC-Custom', /GC_Custom_.*/, "#0099C6"));
|
2017-12-04 14:51:04 +00:00
|
|
|
Group.add('gc-background',
|
|
|
|
|
new Group('GC-Background', /.*GC.*BACKGROUND.*/, "#00597c"));
|
2017-08-01 13:28:52 +00:00
|
|
|
Group.add('gc', new Group('GC', /GC_.*|AllocateInTargetSpace/, "#00799c"));
|
2016-09-28 07:49:45 +00:00
|
|
|
Group.add('javascript', new Group('JavaScript', /JS_Execution/, "#DD4477"));
|
2016-12-22 14:08:54 +00:00
|
|
|
Group.add('runtime', new Group('V8 C++', /.*/, "#88BB00"));
|
2020-06-30 08:24:58 +00:00
|
|
|
Group.add('blink', new Group('Blink RCS', /.*Blink_.*/, "#006600", false, false));
|
|
|
|
|
Group.add('unclassified', new Group('Unclassified', /.*/, "#000", false));
|
2016-09-28 07:49:45 +00:00
|
|
|
|
|
|
|
|
class GroupedEntry extends Entry {
|
|
|
|
|
constructor(group) {
|
2016-10-26 12:20:03 +00:00
|
|
|
super(0, GroupedEntry.prefix + group.name, 0, 0, 0, 0, 0, 0);
|
2016-09-28 07:49:45 +00:00
|
|
|
this.group = group;
|
2016-05-06 13:23:51 +00:00
|
|
|
this.entries = [];
|
2017-03-01 13:28:06 +00:00
|
|
|
this.missingEntries = null;
|
2020-06-30 08:24:58 +00:00
|
|
|
this.addsToTotal = group.addsToTotal;
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
2016-09-28 07:49:45 +00:00
|
|
|
get regexp() { return this.group.regexp }
|
|
|
|
|
get color() { return this.group.color }
|
|
|
|
|
get enabled() { return this.group.enabled }
|
2016-05-06 13:23:51 +00:00
|
|
|
add(entry) {
|
2016-09-22 20:58:11 +00:00
|
|
|
if (!this.regexp.test(entry.name)) return false;
|
2016-05-06 13:23:51 +00:00
|
|
|
this._time += entry.time;
|
|
|
|
|
this._count += entry.count;
|
|
|
|
|
// TODO: sum up variance
|
|
|
|
|
this.entries.push(entry);
|
|
|
|
|
entry.parent = this;
|
|
|
|
|
return true;
|
|
|
|
|
}
|
2017-03-01 13:28:06 +00:00
|
|
|
_initializeMissingEntries() {
|
2020-06-30 08:24:58 +00:00
|
|
|
let dummyEntryNames = new Set();
|
2017-02-08 17:29:56 +00:00
|
|
|
versions.forEach((version) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
let groupEntry = version.getEntry(this);
|
2017-02-08 17:29:56 +00:00
|
|
|
if (groupEntry != this) {
|
2020-06-30 08:24:58 +00:00
|
|
|
for (let entry of groupEntry.entries) {
|
2017-02-08 17:29:56 +00:00
|
|
|
if (this.page.get(entry.name) == undefined) {
|
|
|
|
|
dummyEntryNames.add(entry.name);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2016-05-06 13:23:51 +00:00
|
|
|
});
|
2017-03-01 13:28:06 +00:00
|
|
|
this.missingEntries = [];
|
2020-06-30 08:24:58 +00:00
|
|
|
for (let name of dummyEntryNames) {
|
|
|
|
|
let tmpEntry = new Entry(0, name, 0, 0, 0, 0, 0, 0);
|
2017-02-08 17:29:56 +00:00
|
|
|
tmpEntry.page = this.page;
|
2017-03-01 13:28:06 +00:00
|
|
|
this.missingEntries.push(tmpEntry);
|
2017-02-08 17:29:56 +00:00
|
|
|
};
|
2017-03-01 13:28:06 +00:00
|
|
|
}
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2017-03-01 13:28:06 +00:00
|
|
|
forEach(fun) {
|
|
|
|
|
// Show also all entries which are in at least one version.
|
2017-02-08 17:29:56 +00:00
|
|
|
// Concatenate our real entries.
|
2017-03-01 13:28:06 +00:00
|
|
|
if (this.missingEntries == null) {
|
|
|
|
|
this._initializeMissingEntries();
|
|
|
|
|
}
|
2020-06-30 08:24:58 +00:00
|
|
|
let tmpEntries = this.missingEntries.concat(this.entries);
|
2017-02-08 17:29:56 +00:00
|
|
|
|
|
|
|
|
// The compared entries are sorted by absolute impact.
|
2016-05-06 13:23:51 +00:00
|
|
|
tmpEntries.sort((a, b) => {
|
2017-03-01 13:28:06 +00:00
|
|
|
return b.time - a.time
|
2016-05-06 13:23:51 +00:00
|
|
|
});
|
|
|
|
|
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) {
|
2020-06-30 08:24:58 +00:00
|
|
|
let sum = 0;
|
2016-05-06 13:23:51 +00:00
|
|
|
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')
|
|
|
|
|
}
|
|
|
|
|
}
|
2016-10-26 12:20:03 +00:00
|
|
|
GroupedEntry.prefix = 'Group-';
|
2016-05-06 13:23:51 +00:00
|
|
|
|
|
|
|
|
class UnclassifiedEntry extends GroupedEntry {
|
2016-09-28 07:49:45 +00:00
|
|
|
constructor(page) {
|
|
|
|
|
super(Group.groups.get('unclassified'));
|
2016-05-06 13:23:51 +00:00
|
|
|
this.page = page;
|
|
|
|
|
this._time = undefined;
|
|
|
|
|
this._count = undefined;
|
|
|
|
|
}
|
|
|
|
|
add(entry) {
|
2020-06-30 08:24:58 +00:00
|
|
|
console.log("Adding unclassified:", entry);
|
2016-05-06 13:23:51 +00:00
|
|
|
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) => {
|
2020-06-30 08:24:58 +00:00
|
|
|
if (group.addsToTotal) this._time -= group._time;
|
2016-05-06 13:23:51 +00:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
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>
|
|
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
<body id="body" onmousemove="handleUpdatePopover(event)" onload="handleBodyLoad()" class="noDiff">
|
2016-05-06 13:23:51 +00:00
|
|
|
<h1>Runtime Stats Komparator</h1>
|
|
|
|
|
|
|
|
|
|
<div id="results">
|
|
|
|
|
<div class="inline">
|
|
|
|
|
<h2>Data</h2>
|
|
|
|
|
<form name="fileForm">
|
|
|
|
|
<p>
|
2017-03-09 09:53:34 +00:00
|
|
|
<label for="uploadInput">Load File:</label>
|
2020-04-28 10:38:25 +00:00
|
|
|
<input id="uploadInput" type="file" name="files" onchange="handleLoadFile();" accept=".json,.txt">
|
2016-05-06 13:23:51 +00:00
|
|
|
</p>
|
2017-03-09 09:53:34 +00:00
|
|
|
<p>
|
|
|
|
|
<label for="appendInput">Append File:</label>
|
2020-04-28 10:38:25 +00:00
|
|
|
<input id="appendInput" type="file" name="files" onchange="handleAppendFile();" accept=".json,.txt">
|
2017-03-09 09:53:34 +00:00
|
|
|
</p>
|
2016-05-06 13:23:51 +00:00
|
|
|
</form>
|
|
|
|
|
</div>
|
2016-05-11 12:32:27 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
<div class="inline hidden">
|
|
|
|
|
<h2>Result</h2>
|
2016-05-11 12:32:27 +00:00
|
|
|
<div class="compareSelector inline">
|
2016-05-06 13:23:51 +00:00
|
|
|
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>
|
2016-06-06 13:07:20 +00:00
|
|
|
</div>
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
<div id="versionSelector" class="inline toggleContentVisibility">
|
2016-09-28 07:49:45 +00:00
|
|
|
<h2>Versions</h2>
|
2016-06-06 13:07:20 +00:00
|
|
|
<div class="content hidden">
|
2016-05-11 12:32:27 +00:00
|
|
|
<ul></ul>
|
|
|
|
|
</div>
|
2016-05-06 13:23:51 +00:00
|
|
|
</div>
|
2017-02-08 17:29:56 +00:00
|
|
|
|
2016-06-06 13:07:20 +00:00
|
|
|
<div id="pageSelector" class="inline toggleContentVisibility">
|
2016-09-28 07:49:45 +00:00
|
|
|
<h2>Pages</h2>
|
|
|
|
|
<div class="content hidden">
|
|
|
|
|
<ul></ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="groupSelector" class="inline toggleContentVisibility">
|
|
|
|
|
<h2>Groups</h2>
|
2016-06-06 13:07:20 +00:00
|
|
|
<div class="content hidden">
|
|
|
|
|
<ul></ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
<div id="view">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="detailView" class="hidden">
|
2016-06-06 13:07:20 +00:00
|
|
|
<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>
|
2016-05-06 13:23:51 +00:00
|
|
|
</div>
|
2016-06-06 13:07:20 +00:00
|
|
|
<div class="pageDetail inline toggleContentVisibility">
|
2016-05-11 12:32:27 +00:00
|
|
|
<h3>Page Comparison for <span></span></h3>
|
2016-06-06 13:07:20 +00:00
|
|
|
<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>
|
2016-05-06 13:23:51 +00:00
|
|
|
</div>
|
2016-06-06 13:07:20 +00:00
|
|
|
<div class="impactView inline toggleContentVisibility">
|
2016-05-06 13:23:51 +00:00
|
|
|
<h3>Impact list for <span></span></h3>
|
2016-06-06 13:07:20 +00:00
|
|
|
<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>
|
2016-05-06 13:23:51 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2016-06-06 13:07:20 +00:00
|
|
|
<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>
|
2016-05-11 12:32:27 +00:00
|
|
|
</div>
|
2016-05-06 13:23:51 +00:00
|
|
|
|
|
|
|
|
<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>
|
2016-07-05 14:58:28 +00:00
|
|
|
<li>Build chrome.</li>
|
2020-06-30 12:17:52 +00:00
|
|
|
</ol>
|
|
|
|
|
<h3>Telemetry benchmark</h3>
|
|
|
|
|
<ol>
|
|
|
|
|
<li>Run <code>v8.browsing</code> benchmarks:
|
|
|
|
|
<pre>$CHROMIUM_DIR/tools/perf/run_benchmark run v8.browsing_desktop \
|
|
|
|
|
--browser=exact --browser-executable=$CHROMIUM_DIR/out/release/chrome \
|
|
|
|
|
--story-filter='.*2020 ' \
|
|
|
|
|
--also-run-disabled-tests
|
|
|
|
|
</pre>
|
|
|
|
|
</li>
|
|
|
|
|
<li>Install <a href="https://stedolan.github.io/jq/">jq</a>.</li>
|
|
|
|
|
<li>Convert the telemetry JSON files to callstats JSON file:
|
|
|
|
|
<pre>
|
|
|
|
|
$V8_DIR/tools/callstats-from-telemetry.sh $CHROMIUM_DIR/tools/perf/artifacts/run_XXXX
|
|
|
|
|
</pre>
|
|
|
|
|
</li>
|
|
|
|
|
<li>Load the generated <code>out.json</code></li>
|
|
|
|
|
</ol>
|
|
|
|
|
<h3>Raw approach</h3>
|
|
|
|
|
<ol>
|
|
|
|
|
<li>Install scipy, e.g. <code>sudo aptitude install python-scipy</code>
|
2016-07-05 14:58:28 +00:00
|
|
|
<li>Check out a known working version of webpagereply:
|
|
|
|
|
<pre>git -C $CHROME_DIR/third_party/webpagereplay checkout 7dbd94752d1cde5536ffc623a9e10a51721eff1d</pre>
|
|
|
|
|
</li>
|
2016-05-11 12:32:27 +00:00
|
|
|
<li>Run <code>callstats.py</code> with a web-page-replay archive:
|
|
|
|
|
<pre>$V8_DIR/tools/callstats.py run \
|
2016-05-06 13:23:51 +00:00
|
|
|
--replay-bin=$CHROME_SRC/third_party/webpagereplay/replay.py \
|
2016-05-11 12:32:27 +00:00
|
|
|
--replay-wpr=$INPUT_DIR/top25.wpr \
|
2016-05-06 13:23:51 +00:00
|
|
|
--js-flags="" \
|
|
|
|
|
--with-chrome=$CHROME_SRC/out/Release/chrome \
|
2016-05-11 12:32:27 +00:00
|
|
|
--sites-file=$INPUT_DIR/top25.json</pre>
|
2016-05-06 13:23:51 +00:00
|
|
|
</li>
|
2016-05-11 12:32:27 +00:00
|
|
|
<li>Move results file to a subdirectory: <code>mkdir $VERSION_DIR; mv *.txt $VERSION_DIR</code></li>
|
2016-05-06 13:23:51 +00:00
|
|
|
<li>Repeat from step 1 with a different configuration (e.g. <code>--js-flags="--nolazy"</code>).</li>
|
2016-05-11 12:32:27 +00:00
|
|
|
<li>Create the final results file: <code>./callstats.py json $VERSION_DIR1 $VERSION_DIR2 > result.json</code></li>
|
2016-05-06 13:23:51 +00:00
|
|
|
<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>
|
2016-06-06 13:07:20 +00:00
|
|
|
<tr>
|
|
|
|
|
<td>Percent per Entry:</td>
|
|
|
|
|
<td class="percentPerEntry"></td><td colspan=2></td>
|
|
|
|
|
<td class="compare percentPerEntry"></td><td colspan=2></td>
|
|
|
|
|
</tr>
|
2016-05-06 13:23:51 +00:00
|
|
|
<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>
|
