2019-01-04 12:18:43 +00:00
|
|
|
<!DOCTYPE html>
|
2016-01-22 13:50:28 +00:00
|
|
|
<html>
|
2016-05-06 13:23:51 +00:00
|
|
|
<!--
|
|
|
|
|
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.
|
|
|
|
|
-->
|
2016-01-22 13:50:28 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
<head>
|
2019-01-04 12:18:43 +00:00
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>V8 IC explorer</title>
|
2016-05-06 13:23:51 +00:00
|
|
|
<style>
|
2017-04-11 14:39:25 +00:00
|
|
|
html {
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
}
|
|
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.entry-details {}
|
2017-04-10 17:45:35 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.entry-details TD {}
|
2017-04-10 17:45:35 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.details {
|
2017-04-11 14:39:25 +00:00
|
|
|
width: 0.1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.details span {
|
|
|
|
|
padding: 0 0.4em 0 0.4em;
|
|
|
|
|
background-color: black;
|
|
|
|
|
color: white;
|
|
|
|
|
border-radius: 25px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
cursor: -webkit-zoom-in;
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
2017-04-10 17:45:35 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.count {
|
|
|
|
|
text-align: right;
|
|
|
|
|
width: 5em;
|
|
|
|
|
}
|
2017-04-10 17:45:35 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.percentage {
|
|
|
|
|
text-align: right;
|
|
|
|
|
width: 5em;
|
|
|
|
|
}
|
2017-04-10 17:45:35 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.key {
|
|
|
|
|
padding-left: 1em;
|
2016-01-22 13:50:28 +00:00
|
|
|
}
|
2017-04-10 17:45:35 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
.drilldown-group-title {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
padding: 0.5em 0 0.2em 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2019-01-04 12:18:43 +00:00
|
|
|
<script src="./splaytree.js"></script>
|
|
|
|
|
<script src="./codemap.js"></script>
|
|
|
|
|
<script src="./csvparser.js"></script>
|
|
|
|
|
<script src="./consarray.js"></script>
|
|
|
|
|
<script src="./profile.js"></script>
|
|
|
|
|
<script src="./profile_view.js"></script>
|
|
|
|
|
<script src="./logreader.js"></script>
|
|
|
|
|
<script src="./arguments.js"></script>
|
|
|
|
|
<script src="./ic-processor.js"></script>
|
|
|
|
|
<script src="./SourceMap.js"></script>
|
2017-04-11 14:39:25 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
<script>
|
|
|
|
|
"use strict"
|
2017-04-11 14:39:25 +00:00
|
|
|
let entries = [];
|
|
|
|
|
|
|
|
|
|
let properties = ['type', 'category', 'functionName', 'filePosition',
|
|
|
|
|
'state', 'key', 'map', 'reason', 'file',
|
|
|
|
|
];
|
|
|
|
|
|
2017-08-02 08:23:36 +00:00
|
|
|
// For compatibility with console scripts:
|
2017-04-11 14:39:25 +00:00
|
|
|
print = console.log;
|
|
|
|
|
|
2020-07-14 16:26:35 +00:00
|
|
|
class CustomIcProcessor extends IcProcessor {
|
|
|
|
|
constructor() {
|
|
|
|
|
super();
|
|
|
|
|
this.entries = [];
|
2016-01-22 13:50:28 +00:00
|
|
|
}
|
|
|
|
|
|
2020-07-14 16:26:35 +00:00
|
|
|
functionName(pc) {
|
|
|
|
|
let entry = this.profile_.findEntry(pc);
|
|
|
|
|
return this.formatName(entry);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
processPropertyIC(
|
|
|
|
|
type, pc, time, line, column, old_state, new_state, map, key, modifier,
|
|
|
|
|
slow_reason) {
|
|
|
|
|
let fnName = this.functionName(pc);
|
|
|
|
|
this.entries.push(new Entry(
|
|
|
|
|
type, fnName, time, line, column, key, old_state, new_state, map,
|
|
|
|
|
slow_reason));
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class Entry {
|
|
|
|
|
constructor(
|
|
|
|
|
type, fn_file, time, line, column, key, oldState, newState, map, reason,
|
|
|
|
|
additional) {
|
|
|
|
|
this.time = time;
|
|
|
|
|
this.type = type;
|
|
|
|
|
this.category = 'other';
|
|
|
|
|
if (this.type.indexOf('Store') !== -1) {
|
|
|
|
|
this.category = 'Store';
|
|
|
|
|
} else if (this.type.indexOf('Load') !== -1) {
|
|
|
|
|
this.category = 'Load';
|
|
|
|
|
}
|
|
|
|
|
let parts = fn_file.split(' ');
|
|
|
|
|
this.functionName = parts[0];
|
|
|
|
|
this.file = parts[1];
|
|
|
|
|
let position = line + ':' + column;
|
|
|
|
|
this.filePosition = this.file + ':' + position;
|
|
|
|
|
this.oldState = oldState;
|
|
|
|
|
this.newState = newState;
|
|
|
|
|
this.state = this.oldState + ' → ' + this.newState;
|
|
|
|
|
this.key = key;
|
|
|
|
|
this.map = map.toString(16);
|
|
|
|
|
this.reason = reason;
|
|
|
|
|
this.additional = additional;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
parseMapProperties(parts, offset) {
|
|
|
|
|
let next = parts[++offset];
|
|
|
|
|
if (!next.startsWith('dict')) return offset;
|
|
|
|
|
this.propertiesMode = next.substr(5) == '0' ? 'fast' : 'slow';
|
|
|
|
|
this.numberOfOwnProperties = parts[++offset].substr(4);
|
|
|
|
|
next = parts[++offset];
|
|
|
|
|
this.instanceType = next.substr(5, next.length - 6);
|
|
|
|
|
return offset;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
parsePositionAndFile(parts, start) {
|
|
|
|
|
// find the position of 'at' in the parts array.
|
|
|
|
|
let offset = start;
|
|
|
|
|
for (let i = start + 1; i < parts.length; i++) {
|
|
|
|
|
offset++;
|
|
|
|
|
if (parts[i] == 'at') break;
|
|
|
|
|
}
|
|
|
|
|
if (parts[offset] !== 'at') return -1;
|
|
|
|
|
this.position = parts.slice(start, offset).join(' ');
|
|
|
|
|
offset += 1;
|
|
|
|
|
this.isNative = parts[offset] == 'native'
|
|
|
|
|
offset += this.isNative ? 1 : 0;
|
|
|
|
|
this.file = parts[offset];
|
|
|
|
|
return offset;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function loadFile() {
|
2017-04-11 14:39:25 +00:00
|
|
|
let files = document.getElementById("uploadInput").files;
|
2016-01-22 13:50:28 +00:00
|
|
|
|
2017-04-11 14:39:25 +00:00
|
|
|
let file = files[0];
|
|
|
|
|
let reader = new FileReader();
|
2016-01-22 13:50:28 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
reader.onload = function(evt) {
|
2017-04-11 14:39:25 +00:00
|
|
|
let icProcessor = new CustomIcProcessor();
|
|
|
|
|
icProcessor.processString(this.result);
|
|
|
|
|
entries = icProcessor.entries;
|
2016-05-06 13:23:51 +00:00
|
|
|
|
2017-04-11 14:39:25 +00:00
|
|
|
document.getElementById("count").innerHTML = entries.length;
|
2016-05-06 13:23:51 +00:00
|
|
|
updateTable();
|
|
|
|
|
}
|
|
|
|
|
reader.readAsText(file);
|
|
|
|
|
initGroupKeySelect();
|
2016-01-22 13:50:28 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
class Group {
|
|
|
|
|
constructor(property, key, entry) {
|
|
|
|
|
this.property = property;
|
|
|
|
|
this.key = key;
|
|
|
|
|
this.count = 1;
|
|
|
|
|
this.entries = [entry];
|
|
|
|
|
this.percentage = undefined;
|
|
|
|
|
this.groups = undefined;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
add(entry) {
|
|
|
|
|
this.count++;
|
|
|
|
|
this.entries.push(entry)
|
|
|
|
|
}
|
2016-02-05 13:19:36 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
createSubGroups() {
|
|
|
|
|
this.groups = {};
|
2017-04-11 14:39:25 +00:00
|
|
|
for (let i = 0; i < properties.length; i++) {
|
|
|
|
|
let subProperty = properties[i];
|
2016-05-06 13:23:51 +00:00
|
|
|
if (this.property == subProperty) continue;
|
|
|
|
|
this.groups[subProperty] = groupBy(this.entries, subProperty);
|
|
|
|
|
}
|
|
|
|
|
}
|
2016-01-22 13:50:28 +00:00
|
|
|
}
|
|
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function groupBy(entries, property) {
|
2017-04-11 14:39:25 +00:00
|
|
|
let accumulator = Object.create(null);
|
|
|
|
|
let length = entries.length;
|
|
|
|
|
for (let i = 0; i < length; i++) {
|
|
|
|
|
let entry = entries[i];
|
|
|
|
|
let key = entry[property];
|
2016-05-06 13:23:51 +00:00
|
|
|
if (accumulator[key] == undefined) {
|
|
|
|
|
accumulator[key] = new Group(property, key, entry)
|
|
|
|
|
} else {
|
2017-04-11 14:39:25 +00:00
|
|
|
let group = accumulator[key];
|
2016-05-06 13:23:51 +00:00
|
|
|
if (group.entries == undefined) console.log([group, entry]);
|
|
|
|
|
group.add(entry)
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-04-11 14:39:25 +00:00
|
|
|
let result = []
|
|
|
|
|
for (let key in accumulator) {
|
|
|
|
|
let group = accumulator[key];
|
2016-05-06 13:23:51 +00:00
|
|
|
group.percentage = Math.round(group.count / length * 100 * 100) / 100;
|
|
|
|
|
result.push(group);
|
|
|
|
|
}
|
|
|
|
|
result.sort((a, b) => {
|
|
|
|
|
return b.count - a.count
|
|
|
|
|
});
|
|
|
|
|
return result;
|
|
|
|
|
}
|
2016-01-22 13:50:28 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2016-06-08 11:46:17 +00:00
|
|
|
function escapeHtml(unsafe) {
|
2016-06-16 07:06:48 +00:00
|
|
|
if (!unsafe) return "";
|
2016-06-08 11:46:17 +00:00
|
|
|
return unsafe.toString()
|
2017-04-11 14:39:25 +00:00
|
|
|
.replace(/&/g, "&")
|
|
|
|
|
.replace(/</g, "<")
|
|
|
|
|
.replace(/>/g, ">")
|
|
|
|
|
.replace(/"/g, """)
|
|
|
|
|
.replace(/'/g, "'");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function processValue(unsafe) {
|
|
|
|
|
if (!unsafe) return "";
|
|
|
|
|
if (!unsafe.startsWith("http")) return escapeHtml(unsafe);
|
|
|
|
|
let a = document.createElement("a");
|
|
|
|
|
a.href = unsafe;
|
|
|
|
|
a.textContent = unsafe;
|
|
|
|
|
return a;
|
2016-06-08 11:46:17 +00:00
|
|
|
}
|
2016-01-22 13:50:28 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function updateTable() {
|
2017-04-11 14:39:25 +00:00
|
|
|
let select = document.getElementById("group-key");
|
|
|
|
|
let key = select.options[select.selectedIndex].text;
|
|
|
|
|
let tableBody = document.getElementById("table-body");
|
2016-05-06 13:23:51 +00:00
|
|
|
removeAllChildren(tableBody);
|
2017-04-11 14:39:25 +00:00
|
|
|
let groups = groupBy(entries, key, true);
|
2016-05-06 13:23:51 +00:00
|
|
|
display(groups, tableBody);
|
|
|
|
|
}
|
2016-01-22 13:50:28 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function selecedOption(node) {
|
|
|
|
|
return node.options[node.selectedIndex]
|
|
|
|
|
}
|
2016-01-22 13:50:28 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function removeAllChildren(node) {
|
|
|
|
|
while (node.firstChild) {
|
|
|
|
|
node.removeChild(node.firstChild);
|
|
|
|
|
}
|
|
|
|
|
}
|
2016-01-22 13:50:28 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function display(entries, parent) {
|
2017-04-11 14:39:25 +00:00
|
|
|
let fragment = document.createDocumentFragment();
|
2016-01-22 13:50:28 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function td(tr, content, className) {
|
2017-10-30 10:46:59 +00:00
|
|
|
let node = document.createElement("td");
|
2017-04-11 14:39:25 +00:00
|
|
|
if (typeof content == "object") {
|
2017-10-30 10:46:59 +00:00
|
|
|
node.appendChild(content);
|
2017-04-11 14:39:25 +00:00
|
|
|
} else {
|
2017-10-30 10:46:59 +00:00
|
|
|
node.innerHTML = content;
|
2017-04-11 14:39:25 +00:00
|
|
|
}
|
2017-10-30 10:46:59 +00:00
|
|
|
node.className = className
|
|
|
|
|
tr.appendChild(node);
|
|
|
|
|
return node
|
2016-05-06 13:23:51 +00:00
|
|
|
}
|
2017-10-30 10:46:59 +00:00
|
|
|
|
2017-04-11 14:39:25 +00:00
|
|
|
let max = Math.min(1000, entries.length)
|
|
|
|
|
for (let i = 0; i < max; i++) {
|
|
|
|
|
let entry = entries[i];
|
|
|
|
|
let tr = document.createElement("tr");
|
2016-05-06 13:23:51 +00:00
|
|
|
tr.entry = entry;
|
2017-04-11 14:39:25 +00:00
|
|
|
td(tr, '<span onclick="toggleDetails(this)">ℹ</a>', 'details');
|
2016-05-06 13:23:51 +00:00
|
|
|
td(tr, entry.percentage + "%", 'percentage');
|
|
|
|
|
td(tr, entry.count, 'count');
|
2017-04-11 14:39:25 +00:00
|
|
|
td(tr, processValue(entry.key), 'key');
|
2016-05-06 13:23:51 +00:00
|
|
|
fragment.appendChild(tr);
|
|
|
|
|
}
|
2017-04-11 14:39:25 +00:00
|
|
|
let omitted = entries.length - max;
|
2016-05-06 13:23:51 +00:00
|
|
|
if (omitted > 0) {
|
2017-04-11 14:39:25 +00:00
|
|
|
let tr = document.createElement("tr");
|
2017-10-30 10:46:59 +00:00
|
|
|
let tdNode = td(tr, 'Omitted ' + omitted + " entries.");
|
|
|
|
|
tdNode.colSpan = 4;
|
2016-05-06 13:23:51 +00:00
|
|
|
fragment.appendChild(tr);
|
|
|
|
|
}
|
|
|
|
|
parent.appendChild(fragment);
|
|
|
|
|
}
|
2016-02-05 13:19:36 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function displayDrilldown(entry, previousSibling) {
|
2017-04-11 14:39:25 +00:00
|
|
|
let tr = document.createElement('tr');
|
2016-05-06 13:23:51 +00:00
|
|
|
tr.className = "entry-details";
|
|
|
|
|
tr.style.display = "none";
|
|
|
|
|
// indent by one td.
|
|
|
|
|
tr.appendChild(document.createElement("td"));
|
2017-04-11 14:39:25 +00:00
|
|
|
let td = document.createElement("td");
|
2016-05-06 13:23:51 +00:00
|
|
|
td.colSpan = 3;
|
2017-04-11 14:39:25 +00:00
|
|
|
for (let key in entry.groups) {
|
2016-05-06 13:23:51 +00:00
|
|
|
td.appendChild(displayDrilldownGroup(entry, key));
|
|
|
|
|
}
|
|
|
|
|
tr.appendChild(td);
|
|
|
|
|
// Append the new TR after previousSibling.
|
|
|
|
|
previousSibling.parentNode.insertBefore(tr, previousSibling.nextSibling)
|
|
|
|
|
}
|
2016-02-05 13:19:36 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function displayDrilldownGroup(entry, key) {
|
2017-04-11 14:39:25 +00:00
|
|
|
let max = 20;
|
|
|
|
|
let group = entry.groups[key];
|
|
|
|
|
let div = document.createElement("div")
|
2016-05-06 13:23:51 +00:00
|
|
|
div.className = 'drilldown-group-title'
|
2017-04-11 14:39:25 +00:00
|
|
|
div.textContent = key + ' [top ' + max + ' out of ' + group.length + ']';
|
|
|
|
|
let table = document.createElement("table");
|
2016-05-06 13:23:51 +00:00
|
|
|
display(group.slice(0, max), table, false)
|
|
|
|
|
div.appendChild(table);
|
|
|
|
|
return div;
|
|
|
|
|
}
|
2016-02-05 13:19:36 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function toggleDetails(node) {
|
2017-04-11 14:39:25 +00:00
|
|
|
let tr = node.parentNode.parentNode;
|
|
|
|
|
let entry = tr.entry;
|
2016-01-22 13:50:28 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
// Create subgroup in-place if the don't exist yet.
|
|
|
|
|
if (entry.groups === undefined) {
|
|
|
|
|
entry.createSubGroups();
|
|
|
|
|
displayDrilldown(entry, tr);
|
|
|
|
|
}
|
2017-04-11 14:39:25 +00:00
|
|
|
let details = tr.nextSibling;
|
|
|
|
|
let display = details.style.display;
|
2016-05-06 13:23:51 +00:00
|
|
|
if (display != "none") {
|
|
|
|
|
display = "none";
|
|
|
|
|
} else {
|
|
|
|
|
display = "table-row"
|
|
|
|
|
};
|
|
|
|
|
details.style.display = display;
|
|
|
|
|
}
|
2016-01-22 13:50:28 +00:00
|
|
|
|
2016-05-06 13:23:51 +00:00
|
|
|
function initGroupKeySelect() {
|
2017-04-11 14:39:25 +00:00
|
|
|
let select = document.getElementById("group-key");
|
2020-06-18 11:42:42 +00:00
|
|
|
select.options.length = 0;
|
2017-04-11 14:39:25 +00:00
|
|
|
for (let i in properties) {
|
|
|
|
|
let option = document.createElement("option");
|
2016-05-06 13:23:51 +00:00
|
|
|
option.text = properties[i];
|
|
|
|
|
select.add(option);
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-04-10 17:45:35 +00:00
|
|
|
|
2016-10-27 09:55:31 +00:00
|
|
|
function handleOnLoad() {
|
|
|
|
|
document.querySelector("#uploadInput").focus();
|
|
|
|
|
}
|
2016-01-22 13:50:28 +00:00
|
|
|
</script>
|
2016-05-06 13:23:51 +00:00
|
|
|
</head>
|
|
|
|
|
|
2016-10-27 09:55:31 +00:00
|
|
|
<body onload="handleOnLoad()">
|
2016-05-06 13:23:51 +00:00
|
|
|
<h1>
|
2017-04-11 14:39:25 +00:00
|
|
|
<span style="color: #00FF00">I</span>
|
|
|
|
|
<span style="color: #FF00FF">C</span>
|
|
|
|
|
<span style="color: #00FFFF">E</span>
|
|
|
|
|
</h1> Your IC-Explorer.
|
2016-10-19 12:48:00 +00:00
|
|
|
|
|
|
|
|
<div id="legend" style="padding-right: 200px">
|
|
|
|
|
<div style="float:right; border-style: solid; border-width: 1px; padding:20px">
|
2017-04-11 14:39:25 +00:00
|
|
|
0 uninitialized<br>
|
2019-10-10 04:00:00 +00:00
|
|
|
X no feedback<br>
|
2017-04-11 14:39:25 +00:00
|
|
|
1 monomorphic<br>
|
|
|
|
|
^ recompute handler<br>
|
|
|
|
|
P polymorphic<br>
|
|
|
|
|
N megamorphic<br>
|
|
|
|
|
G generic
|
2016-10-19 12:48:00 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2017-04-11 14:39:25 +00:00
|
|
|
<h2>Usage</h2> Run your script with <code>--trace_ic</code> and upload <code>v8.log</code> on this page:<br/>
|
|
|
|
|
<code>/path/to/d8 --trace_ic your_script.js</code>
|
2016-05-06 13:23:51 +00:00
|
|
|
<h2>Data</h2>
|
|
|
|
|
<form name="fileForm">
|
2016-01-22 13:50:28 +00:00
|
|
|
<p>
|
2017-04-11 14:39:25 +00:00
|
|
|
<input id="uploadInput" type="file" name="files" onchange="loadFile();"> trace entries: <span id="count">0</span>
|
2016-05-06 13:23:51 +00:00
|
|
|
</p>
|
|
|
|
|
</form>
|
|
|
|
|
<h2>Result</h2>
|
|
|
|
|
<p>
|
2016-01-22 13:50:28 +00:00
|
|
|
Group-Key:
|
|
|
|
|
<select id="group-key" onchange="updateTable()"></select>
|
2016-05-06 13:23:51 +00:00
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<table id="table" width="100%">
|
|
|
|
|
<tbody id="table-body">
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</p>
|
|
|
|
|
</body>
|
|
|
|
|
|
2016-01-22 13:50:28 +00:00
|
|
|
</html>
|
