Commit 6593b74a authored by Camillo Bruni's avatar Camillo Bruni Committed by Commit Bot

[tools] Update ic-explorer.html

- support new v8.log-based source
- fix function name resolution from v8.log
- simplify displaying and add direct links to source files

Change-Id: Ice1acdd9ebaefb27387fecc5446b973bf323dbcc
NOTRY=true

Change-Id: Ice1acdd9ebaefb27387fecc5446b973bf323dbcc
Reviewed-on: https://chromium-review.googlesource.com/474824
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Reviewed-by: 's avatarIgor Sheludko <ishell@chromium.org>
Cr-Commit-Position: refs/heads/master@{#44579}
parent 88732c88
...@@ -6,25 +6,35 @@ code is governed by a BSD-style license that can be found in the LICENSE file. ...@@ -6,25 +6,35 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
<head> <head>
<style> <style>
html {
font-family: monospace;
}
.entry-details {} .entry-details {}
.entry-details TD {} .entry-details TD {}
.details { .details {
width: 2em; width: 0.1em;
border: 1px black dotted; }
.details span {
padding: 0 0.4em 0 0.4em;
background-color: black;
color: white;
border-radius: 25px;
text-align: center;
cursor: -webkit-zoom-in;
} }
.count { .count {
text-align: right; text-align: right;
width: 5em; width: 5em;
font-family: monospace;
} }
.percentage { .percentage {
text-align: right; text-align: right;
width: 5em; width: 5em;
font-family: monospace;
} }
.key { .key {
...@@ -36,110 +46,112 @@ code is governed by a BSD-style license that can be found in the LICENSE file. ...@@ -36,110 +46,112 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
padding: 0.5em 0 0.2em 0; padding: 0.5em 0 0.2em 0;
} }
</style> </style>
<script src="./splaytree.js" type="text/javascript"></script>
<script src="./codemap.js" type="text/javascript"></script>
<script src="./csvparser.js" type="text/javascript"></script>
<script src="./consarray.js" type="text/javascript"></script>
<script src="./profile.js" type="text/javascript"></script>
<script src="./profile_view.js" type="text/javascript"></script>
<script src="./logreader.js" type="text/javascript"></script>
<script src="./ic-processor.js" type="text/javascript"></script>
<script src="./SourceMap.js" type="text/javascript"></script>
<script> <script>
"use strict" "use strict"
var entries = []; let entries = [];
let properties = ['type', 'category', 'functionName', 'filePosition',
'state', 'key', 'map', 'reason', 'file',
];
// For compatiblity with console scripts:
print = console.log;
class CustomIcProcessor extends IcProcessor {
constructor() {
super();
this.entries = [];
}
functionName(pc) {
let entry = this.profile_.findEntry(pc);
return this.formatName(entry);
}
processPropertyIC(type, pc, line, column, old_state, new_state, map, key,
modifier, slow_reason) {
let fnName = this.functionName(pc);
this.entries.push(new Entry(type, fnName, line, column, key,
old_state, new_state, map, slow_reason));
}
processCompareIC(pc, line, column, stub, op, old_left, old_right,
old_state, new_left, new_right, new_state) {
let fnName = this.functionName(pc);
this.entries.push(new Entry("CompareIC", fnName, line, column, name,
old_state, new_state));
}
processBinaryOpIC(pc, line, column, stub, old_state, new_state,
allocation_site) {
let fnName = this.functionName(pc);
this.entries.push(new Entry("BinaryOpIc", fnName, line, column, name,
old_state, new_state));
}
processToBooleanICfunction(pc, line, column, stub, old_state, new_state) {
let fnName = this.functionName(pc);
this.entries.push(new Entry("ToBooleanIC", fnName, line, column, name,
old_state, new_state));
}
processPatchIC(pc, test, delta) {
}
};
var properties = ['type', 'category', 'file', 'filePosition', 'state',
'key', 'isNative', 'map', 'propertiesMode', 'numberOfOwnProperties',
'instanceType'
]
class Entry { class Entry {
constructor(id, line) { constructor(type, fn_file, line, column, key, oldState, newState,
this.id = id; map, reason, additional) {
this.line = line; this.type = type;
var parts = line.split(" "); this.category = "other";
if (parts.length < 6) return
this.isValid = false;
if (parts[0][0] !== "[") return;
if (parts[1] === "patching") return;
this.type = parts[0].substr(1);
this.category = "unknown";
this.map = "unknown";
this.propertiesMode = "unknown";
this.numberOfOwnProperties = 0;
this.instanceType = "unknown";
if (this.type.indexOf("Store") !== -1) { if (this.type.indexOf("Store") !== -1) {
this.category = "Store"; this.category = "Store";
} else if (this.type.indexOf("Load") !== -1) { } else if (this.type.indexOf("Load") !== -1) {
this.category = "Load"; this.category = "Load";
} }
if (this.type.length == 0) return; let parts = fn_file.split(" ");
if (this.type.indexOf('BinaryOpIC(') === 0) { this.functionName = parts[0];
this.type = "BinaryOpIC"; this.file = parts[1];
var split = parts[0].split('('); let position = line + ":" + column;
this.state = "(" + split[1] + " => " + parts[2]; this.filePosition = this.file + ":" + position;
var offset = this.parsePositionAndFile(parts, 6); this.oldState = oldState;
if (offset == -1) return this.newState = newState;
if (this.file === undefined) return this.state = this.oldState + " → " + this.newState;
this.file = this.file.slice(0, -1); this.key = key;
} else { this.map = map.toString(16);
var offset = this.parsePositionAndFile(parts, 2); this.reason = reason;
if (offset == -1) return this.additional = additional;
this.state = parts[++offset];
var mapPart = parts[offset + 1];
if (mapPart !== undefined && mapPart.startsWith("map=")) {
if (mapPart[4] == "(") {
if (mapPart.endsWith(")")) {
this.map = mapPart.substr(5, mapPart.length-6);
} else {
this.map = mapPart.substr(5);
}
offset++;
offset = this.parseMapProperties(parts, offset);
} else {
this.map = mapPart.substr(4);
offset++;
}
if (this.map == "(nil)") this.map = "unknown";
}
if (this.type !== "CompareIC") {
// if there is no address we have a smi key
var address = parts[++offset];
if (address !== undefined && address.indexOf("0x") === 0) {
this.key = parts.slice(++offset).join(" ");
} else {
this.key = address;
}
}
}
this.filePosition = this.file + " " + this.position;
if (this.key) {
var isStringKey = false
if (this.key.indexOf("<String[") === 0) {
isStringKey = true;
this.key = "\"" + this.key.slice(this.key.indexOf(']') + 3);
} else if (this.key.indexOf("<") === 0) {
this.key = this.key.slice(1);
}
if (this.key.endsWith(">]")) {
this.key = this.key.slice(0, -2);
} else if (this.key.endsWith("]")) {
this.key = this.key.slice(0, -1);
}
if (isStringKey) {
this.key = this.key + "\"";
}
}
this.isValid = true;
} }
parseMapProperties(parts, offset) { parseMapProperties(parts, offset) {
var next = parts[++offset]; let next = parts[++offset];
if (!next.startsWith('dict')) return offset; if (!next.startsWith('dict')) return offset;
this.propertiesMode = this.propertiesMode =
next.substr(5) == "0" ? "fast" : "slow"; next.substr(5) == "0" ? "fast" : "slow";
this.numberOfOwnProperties = parts[++offset].substr(4); this.numberOfOwnProperties = parts[++offset].substr(4);
next = parts[++offset]; next = parts[++offset];
this.instanceType = next.substr(5, next.length-6); this.instanceType = next.substr(5, next.length - 6);
return offset; return offset;
} }
parsePositionAndFile(parts, start) { parsePositionAndFile(parts, start) {
// find the position of 'at' in the parts array. // find the position of 'at' in the parts array.
var offset = start; let offset = start;
for (var i = start + 1; i < parts.length; i++) { for (let i = start + 1; i < parts.length; i++) {
offset++; offset++;
if (parts[i] == 'at') break; if (parts[i] == 'at') break;
} }
...@@ -154,30 +166,17 @@ code is governed by a BSD-style license that can be found in the LICENSE file. ...@@ -154,30 +166,17 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
} }
function loadFile() { function loadFile() {
var files = document.getElementById("uploadInput").files; let files = document.getElementById("uploadInput").files;
var file = files[0]; let file = files[0];
var reader = new FileReader(); let reader = new FileReader();
reader.onload = function(evt) { reader.onload = function(evt) {
entries = []; let icProcessor = new CustomIcProcessor();
var end = this.result.length; icProcessor.processString(this.result);
var current = 0; entries = icProcessor.entries;
var next = 0;
var line;
var i = 0;
var entry;
while (current < end) {
next = this.result.indexOf("\n", current);
if (next === -1) break;
i++;
line = this.result.substring(current, next);
current = next + 1;
entry = new Entry(i, line);
if (entry.isValid) entries.push(entry);
}
document.getElementById("count").innerHTML = i; document.getElementById("count").innerHTML = entries.length;
updateTable(); updateTable();
} }
reader.readAsText(file); reader.readAsText(file);
...@@ -202,8 +201,8 @@ code is governed by a BSD-style license that can be found in the LICENSE file. ...@@ -202,8 +201,8 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
createSubGroups() { createSubGroups() {
this.groups = {}; this.groups = {};
for (var i = 0; i < properties.length; i++) { for (let i = 0; i < properties.length; i++) {
var subProperty = properties[i]; let subProperty = properties[i];
if (this.property == subProperty) continue; if (this.property == subProperty) continue;
this.groups[subProperty] = groupBy(this.entries, subProperty); this.groups[subProperty] = groupBy(this.entries, subProperty);
} }
...@@ -211,23 +210,22 @@ code is governed by a BSD-style license that can be found in the LICENSE file. ...@@ -211,23 +210,22 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
} }
function groupBy(entries, property) { function groupBy(entries, property) {
var accumulator = {}; let accumulator = Object.create(null);
accumulator.__proto__ = null; let length = entries.length;
var length = entries.length; for (let i = 0; i < length; i++) {
for (var i = 0; i < length; i++) { let entry = entries[i];
var entry = entries[i]; let key = entry[property];
var key = entry[property];
if (accumulator[key] == undefined) { if (accumulator[key] == undefined) {
accumulator[key] = new Group(property, key, entry) accumulator[key] = new Group(property, key, entry)
} else { } else {
var group = accumulator[key]; let group = accumulator[key];
if (group.entries == undefined) console.log([group, entry]); if (group.entries == undefined) console.log([group, entry]);
group.add(entry) group.add(entry)
} }
} }
var result = [] let result = []
for (var key in accumulator) { for (let key in accumulator) {
var group = accumulator[key]; let group = accumulator[key];
group.percentage = Math.round(group.count / length * 100 * 100) / 100; group.percentage = Math.round(group.count / length * 100 * 100) / 100;
result.push(group); result.push(group);
} }
...@@ -242,20 +240,28 @@ code is governed by a BSD-style license that can be found in the LICENSE file. ...@@ -242,20 +240,28 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
function escapeHtml(unsafe) { function escapeHtml(unsafe) {
if (!unsafe) return ""; if (!unsafe) return "";
return unsafe.toString() return unsafe.toString()
.replace(/&/g, "&amp;") .replace(/&/g, "&amp;")
.replace(/</g, "&lt;") .replace(/</g, "&lt;")
.replace(/>/g, "&gt;") .replace(/>/g, "&gt;")
.replace(/"/g, "&quot;") .replace(/"/g, "&quot;")
.replace(/'/g, "&#039;"); .replace(/'/g, "&#039;");
}
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;
} }
function updateTable() { function updateTable() {
var select = document.getElementById("group-key"); let select = document.getElementById("group-key");
var key = select.options[select.selectedIndex].text; let key = select.options[select.selectedIndex].text;
console.log(key); let tableBody = document.getElementById("table-body");
var tableBody = document.getElementById("table-body");
removeAllChildren(tableBody); removeAllChildren(tableBody);
var groups = groupBy(entries, key, true); let groups = groupBy(entries, key, true);
display(groups, tableBody); display(groups, tableBody);
} }
...@@ -270,30 +276,34 @@ code is governed by a BSD-style license that can be found in the LICENSE file. ...@@ -270,30 +276,34 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
} }
function display(entries, parent) { function display(entries, parent) {
var fragment = document.createDocumentFragment(); let fragment = document.createDocumentFragment();
function td(tr, content, className) { function td(tr, content, className) {
var td = document.createElement("td"); let td = document.createElement("td");
td.innerHTML = content; if (typeof content == "object") {
td.appendChild(content);
} else {
td.innerHTML = content;
}
td.className = className td.className = className
tr.appendChild(td); tr.appendChild(td);
return td return td
} }
var max = Math.min(1000, entries.length) let max = Math.min(1000, entries.length)
for (var i = 0; i < max; i++) { for (let i = 0; i < max; i++) {
var entry = entries[i]; let entry = entries[i];
var tr = document.createElement("tr"); let tr = document.createElement("tr");
tr.entry = entry; tr.entry = entry;
td(tr, '<span onclick="toggleDetails(this)">details</a>', 'details'); td(tr, '<span onclick="toggleDetails(this)">&#8505;</a>', 'details');
td(tr, entry.percentage + "%", 'percentage'); td(tr, entry.percentage + "%", 'percentage');
td(tr, entry.count, 'count'); td(tr, entry.count, 'count');
td(tr, escapeHtml(entry.key), 'key'); td(tr, processValue(entry.key), 'key');
fragment.appendChild(tr); fragment.appendChild(tr);
} }
var omitted = entries.length - max; let omitted = entries.length - max;
if (omitted > 0) { if (omitted > 0) {
var tr = document.createElement("tr"); let tr = document.createElement("tr");
var td = td(tr, 'Omitted ' + omitted + " entries."); let td = td(tr, 'Omitted ' + omitted + " entries.");
td.colSpan = 4; td.colSpan = 4;
fragment.appendChild(tr); fragment.appendChild(tr);
} }
...@@ -301,14 +311,14 @@ code is governed by a BSD-style license that can be found in the LICENSE file. ...@@ -301,14 +311,14 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
} }
function displayDrilldown(entry, previousSibling) { function displayDrilldown(entry, previousSibling) {
var tr = document.createElement('tr'); let tr = document.createElement('tr');
tr.className = "entry-details"; tr.className = "entry-details";
tr.style.display = "none"; tr.style.display = "none";
// indent by one td. // indent by one td.
tr.appendChild(document.createElement("td")); tr.appendChild(document.createElement("td"));
var td = document.createElement("td"); let td = document.createElement("td");
td.colSpan = 3; td.colSpan = 3;
for (var key in entry.groups) { for (let key in entry.groups) {
td.appendChild(displayDrilldownGroup(entry, key)); td.appendChild(displayDrilldownGroup(entry, key));
} }
tr.appendChild(td); tr.appendChild(td);
...@@ -317,28 +327,28 @@ code is governed by a BSD-style license that can be found in the LICENSE file. ...@@ -317,28 +327,28 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
} }
function displayDrilldownGroup(entry, key) { function displayDrilldownGroup(entry, key) {
var max = 20; let max = 20;
var group = entry.groups[key]; let group = entry.groups[key];
var div = document.createElement("div") let div = document.createElement("div")
div.className = 'drilldown-group-title' div.className = 'drilldown-group-title'
div.innerHTML = key + ' [top ' + max + ' out of ' + group.length + ']'; div.textContent = key + ' [top ' + max + ' out of ' + group.length + ']';
var table = document.createElement("table"); let table = document.createElement("table");
display(group.slice(0, max), table, false) display(group.slice(0, max), table, false)
div.appendChild(table); div.appendChild(table);
return div; return div;
} }
function toggleDetails(node) { function toggleDetails(node) {
var tr = node.parentNode.parentNode; let tr = node.parentNode.parentNode;
var entry = tr.entry; let entry = tr.entry;
// Create subgroup in-place if the don't exist yet. // Create subgroup in-place if the don't exist yet.
if (entry.groups === undefined) { if (entry.groups === undefined) {
entry.createSubGroups(); entry.createSubGroups();
displayDrilldown(entry, tr); displayDrilldown(entry, tr);
} }
var details = tr.nextSibling; let details = tr.nextSibling;
var display = details.style.display; let display = details.style.display;
if (display != "none") { if (display != "none") {
display = "none"; display = "none";
} else { } else {
...@@ -348,9 +358,9 @@ code is governed by a BSD-style license that can be found in the LICENSE file. ...@@ -348,9 +358,9 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
} }
function initGroupKeySelect() { function initGroupKeySelect() {
var select = document.getElementById("group-key"); let select = document.getElementById("group-key");
for (var i in properties) { for (let i in properties) {
var option = document.createElement("option"); let option = document.createElement("option");
option.text = properties[i]; option.text = properties[i];
select.add(option); select.add(option);
} }
...@@ -364,30 +374,29 @@ code is governed by a BSD-style license that can be found in the LICENSE file. ...@@ -364,30 +374,29 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
<body onload="handleOnLoad()"> <body onload="handleOnLoad()">
<h1> <h1>
<span style="color: #00FF00">I</span> <span style="color: #00FF00">I</span>
<span style="color: #FF00FF">C</span> <span style="color: #FF00FF">C</span>
<span style="color: #00FFFF">E</span> <span style="color: #00FFFF">E</span>
</h1> Your IC-Explorer. </h1> Your IC-Explorer.
<div id="legend" style="padding-right: 200px"> <div id="legend" style="padding-right: 200px">
<div style="float:right; border-style: solid; border-width: 1px; padding:20px"> <div style="float:right; border-style: solid; border-width: 1px; padding:20px">
0 uninitialized<br> 0 uninitialized<br>
. premonomorphic<br> . premonomorphic<br>
1 monomorphic<br> 1 monomorphic<br>
^ recompute handler<br> ^ recompute handler<br>
P polymorphic<br> P polymorphic<br>
N megamorphic<br> N megamorphic<br>
G generic G generic
</div> </div>
</div> </div>
<h2>Usage</h2> Run your script with <code>--trace_ic</code> and upload on this page:<br/> <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 > trace.txt</code> <code>/path/to/d8 --trace_ic your_script.js</code>
<h2>Data</h2> <h2>Data</h2>
<form name="fileForm"> <form name="fileForm">
<p> <p>
<input id="uploadInput" type="file" name="files" onchange="loadFile();"> trace <input id="uploadInput" type="file" name="files" onchange="loadFile();"> trace entries: <span id="count">0</span>
entries: <span id="count">0</span>
</p> </p>
</form> </form>
<h2>Result</h2> <h2>Result</h2>
......
...@@ -36,7 +36,7 @@ function IcProcessor() { ...@@ -36,7 +36,7 @@ function IcProcessor() {
null, null, null]; null, null, null];
LogReader.call(this, { LogReader.call(this, {
'code-creation': { 'code-creation': {
parsers: [null, parseInt, parseInt, parseInt, null, 'var-args'], parsers: [null, parseInt, parseInt, parseInt, parseInt, null, 'var-args'],
processor: this.processCodeCreation }, processor: this.processCodeCreation },
'code-move': { parsers: [parseInt, parseInt], 'code-move': { parsers: [parseInt, parseInt],
processor: this.processCodeMove }, processor: this.processCodeMove },
...@@ -92,8 +92,25 @@ IcProcessor.prototype.printError = function(str) { ...@@ -92,8 +92,25 @@ IcProcessor.prototype.printError = function(str) {
print(str); print(str);
}; };
IcProcessor.prototype.processString = function(string) {
var end = string.length;
var current = 0;
var next = 0;
var line;
var i = 0;
var entry;
while (current < end) {
next = string.indexOf("\n", current);
if (next === -1) break;
i++;
line = string.substring(current, next);
current = next + 1;
this.processLogLine(line);
}
}
IcProcessor.prototype.processLogFile = function(fileName) { IcProcessor.prototype.processLogFile = function(fileName) {
this.collectEntries = true
this.lastLogFileName_ = fileName; this.lastLogFileName_ = fileName;
var line; var line;
while (line = readline()) { while (line = readline()) {
...@@ -111,16 +128,22 @@ IcProcessor.prototype.processLogFile = function(fileName) { ...@@ -111,16 +128,22 @@ IcProcessor.prototype.processLogFile = function(fileName) {
print("PatchIC: " + this.PatchIC); print("PatchIC: " + this.PatchIC);
}; };
IcProcessor.prototype.addEntry = function(entry) {
this.entries.push(entry);
}
IcProcessor.prototype.processCodeCreation = function( IcProcessor.prototype.processCodeCreation = function(
type, kind, start, size, name, maybe_func) { type, kind, timestamp, start, size, name, maybe_func) {
name = this.deserializedEntriesNames_[start] || name; name = this.deserializedEntriesNames_[start] || name;
if (name.startsWith("onComplete")) {
console.log(name);
}
if (maybe_func.length) { if (maybe_func.length) {
var funcAddr = parseInt(maybe_func[0]); var funcAddr = parseInt(maybe_func[0]);
var state = parseState(maybe_func[1]); var state = parseState(maybe_func[1]);
this.profile_.addFuncCode(type, name, start, size, funcAddr, state); this.profile_.addFuncCode(type, name, timestamp, start, size, funcAddr, state);
} else { } else {
this.profile_.addCode(type, name, start, size); this.profile_.addCode(type, name, timestamp, start, size);
} }
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment