[tools] improve the ic-explorer
- drilldown lazy and recursive - improve parsing NOTRY=true Review URL: https://codereview.chromium.org/1671883002 Cr-Commit-Position: refs/heads/master@{#33774}
This commit is contained in:
cbruni
Commit bot
parent
da5f4a6ad8
commit
709be02b9f
@ -22,6 +22,10 @@
|
||||
.key {
|
||||
padding-left: 1em;
|
||||
}
|
||||
.drilldown-group-title {
|
||||
font-weight: bold;
|
||||
padding: 0.5em 0 0.2em 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
"use strict"
|
||||
@ -30,7 +34,9 @@ var entries = [];
|
||||
class Entry {
|
||||
constructor(id, line) {
|
||||
this.id = id;
|
||||
this.line = line;
|
||||
var parts = line.split(" ");
|
||||
if (parts.length < 6) return
|
||||
this.isValid = false;
|
||||
if (parts[0][0] !== "[") return;
|
||||
if (parts[1] === "patching") return;
|
||||
@ -44,32 +50,27 @@ class Entry {
|
||||
if (this.type.length == 0) return;
|
||||
if (this.type.indexOf('BinaryOpIC(') === 0) {
|
||||
this.type = "BinaryOpIC";
|
||||
this.isNative = parts[8] == "native"
|
||||
var offset = this.isNative ? 1 : 0;
|
||||
var split = parts[0].split('(');
|
||||
this.state = "(" + split[1] + " => " + parts[2];
|
||||
this.position = parts[6];
|
||||
this.file = parts[8 + offset];
|
||||
var offset = this.parsePositionAndFile(parts, 6);
|
||||
if (offset == -1) return
|
||||
if (this.file === undefined) return
|
||||
this.file = this.file.slice(0,-1);
|
||||
|
||||
} else {
|
||||
this.position = parts[2];
|
||||
this.isNative = parts[4] == "native"
|
||||
var offset = this.isNative ? 1 : 0;
|
||||
this.file = parts[4 + offset];
|
||||
this.state = parts[5 + offset];
|
||||
var offset = this.parsePositionAndFile(parts, 2);
|
||||
if (offset == -1) return
|
||||
this.state = parts[++offset];
|
||||
if (this.type !== "CompareIC") {
|
||||
// if there is no address we have a smi key
|
||||
var address = parts[6 + offset];
|
||||
var address = parts[++offset];
|
||||
if (address !== undefined && address.indexOf("0x") === 0) {
|
||||
this.key = parts.slice(7 + offset).join(" ");
|
||||
this.key = parts.slice(++offset).join(" ");
|
||||
} else {
|
||||
this.key = address;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.filePosition = this.file + " " + this.position;
|
||||
this.isValid = true;
|
||||
if (this.key) {
|
||||
var isStringKey = false
|
||||
if (this.key.indexOf("<String[") === 0) {
|
||||
@ -87,10 +88,27 @@ class Entry {
|
||||
this.key = this.key + "\"";
|
||||
}
|
||||
}
|
||||
this.isValid = true;
|
||||
}
|
||||
|
||||
parsePositionAndFile(parts, start) {
|
||||
// find the position of 'at' in the parts array.
|
||||
var offset = start;
|
||||
for (var 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;
|
||||
}
|
||||
}
|
||||
|
||||
function updateSize() {
|
||||
function loadFile() {
|
||||
var files = document.getElementById("uploadInput").files;
|
||||
|
||||
var file = files[0];
|
||||
@ -126,7 +144,32 @@ function updateSize() {
|
||||
|
||||
var properties = ['type', 'category', 'file', 'filePosition', 'state' , 'key', 'isNative']
|
||||
|
||||
function groupBy(entries, property, subGroup) {
|
||||
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)
|
||||
}
|
||||
|
||||
createSubGroups() {
|
||||
this.groups = {};
|
||||
for (var i=0; i<properties.length; i++) {
|
||||
var subProperty = properties[i];
|
||||
if (this.property == subProperty) continue;
|
||||
this.groups[subProperty] = groupBy(this.entries, subProperty);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function groupBy(entries, property) {
|
||||
var accumulator = {};
|
||||
accumulator.__proto__ = null;
|
||||
var length = entries.length;
|
||||
@ -134,33 +177,23 @@ function groupBy(entries, property, subGroup) {
|
||||
var entry = entries[i];
|
||||
var key = entry[property];
|
||||
if (accumulator[key] == undefined) {
|
||||
accumulator[key] = { key: key, count: 1, entries: [ entry ]};
|
||||
accumulator[key] = new Group(property, key, entry)
|
||||
} else {
|
||||
var record = accumulator[key];
|
||||
if (record.entries == undefined) console.log([record, entry]);
|
||||
record.count ++;
|
||||
record.entries.push(entry)
|
||||
var group = accumulator[key];
|
||||
if (group.entries == undefined) console.log([group, entry]);
|
||||
group.add(entry)
|
||||
}
|
||||
}
|
||||
var result = []
|
||||
for (var key in accumulator) {
|
||||
var record = accumulator[key];
|
||||
record.percentage = Math.round(record.count / length * 100 * 100) / 100;
|
||||
if (subGroup) subGroupBy(record, property);
|
||||
result.push(record);
|
||||
var group = accumulator[key];
|
||||
group.percentage = Math.round(group.count / length * 100 * 100) / 100;
|
||||
result.push(group);
|
||||
}
|
||||
result.sort((a,b) => { return b.count - a.count });
|
||||
return result;
|
||||
}
|
||||
|
||||
function subGroupBy(record, originalProperty) {
|
||||
record.groups = {};
|
||||
for (var i=0; i<properties.length; i++) {
|
||||
var property = properties[i];
|
||||
if (property == originalProperty) continue;
|
||||
record.groups[property] = groupBy(record.entries, property, false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -170,7 +203,8 @@ function updateTable() {
|
||||
console.log(key);
|
||||
var tableBody = document.getElementById("table-body");
|
||||
removeAllChildren(tableBody);
|
||||
display(groupBy(entries, key, true), tableBody, true);
|
||||
var groups = groupBy(entries, key, true);
|
||||
display(groups, tableBody);
|
||||
}
|
||||
|
||||
function selecedOption(node) {
|
||||
@ -183,10 +217,7 @@ function removeAllChildren(node) {
|
||||
}
|
||||
}
|
||||
|
||||
function display(entries, parent, showDetails) {
|
||||
if (showDetails) {
|
||||
console.log(entries)
|
||||
}
|
||||
function display(entries, parent) {
|
||||
var fragment = document.createDocumentFragment();
|
||||
|
||||
function td(tr, content, className) {
|
||||
@ -194,60 +225,67 @@ function display(entries, parent, showDetails) {
|
||||
td.innerHTML = content;
|
||||
td.className = className
|
||||
tr.appendChild(td);
|
||||
return tr
|
||||
return td
|
||||
}
|
||||
|
||||
function drillDown(entry, tr) {
|
||||
tr.id = "details-" + i;
|
||||
tr.className = "entry-details";
|
||||
tr.style.display = "none";
|
||||
|
||||
tr.appendChild(document.createElement("td"));
|
||||
|
||||
var td = document.createElement("td");
|
||||
td.colSpan = 3;
|
||||
for (var key in entry.groups) {
|
||||
td.appendChild(drillDownGroup(entry, key));
|
||||
}
|
||||
tr.appendChild(td);
|
||||
}
|
||||
|
||||
function drillDownGroup(entry, key) {
|
||||
var group = entry.groups[key];
|
||||
var div = document.createElement("div")
|
||||
div.innerHTML = key;
|
||||
var table = document.createElement("table");
|
||||
display(group.slice(0, 20), table, false)
|
||||
div.appendChild(table);
|
||||
return div;
|
||||
}
|
||||
|
||||
for (var i = 0; i<entries.length; i++) {
|
||||
var max = Math.min(1000, entries.length)
|
||||
for (var i = 0; i<max; i++) {
|
||||
var entry = entries[i];
|
||||
var tr = document.createElement("tr");
|
||||
tr.id = "row-" + i;
|
||||
tr.dataset.id = i;
|
||||
if (showDetails) {
|
||||
td(tr, '<span onclick="toggleDetails(this)">details</a>', 'details');
|
||||
}
|
||||
tr.entry = entry;
|
||||
td(tr, '<span onclick="toggleDetails(this)">details</a>', 'details');
|
||||
td(tr, entry.percentage +"%", 'percentage');
|
||||
td(tr, entry.count, 'count');
|
||||
td(tr, entry.key, 'key');
|
||||
fragment.appendChild(tr);
|
||||
|
||||
if (showDetails) {
|
||||
tr = document.createElement("tr");
|
||||
drillDown(entry, tr);
|
||||
fragment.appendChild(tr);
|
||||
}
|
||||
}
|
||||
var omitted = entries.length - max;
|
||||
if (omitted > 0) {
|
||||
var tr = document.createElement("tr");
|
||||
var td = td(tr, 'Omitted ' + omitted + " entries.");
|
||||
td.colSpan = 4;
|
||||
fragment.appendChild(tr);
|
||||
}
|
||||
parent.appendChild(fragment);
|
||||
}
|
||||
|
||||
function displayDrilldown(entry, previousSibling) {
|
||||
var tr = document.createElement('tr');
|
||||
tr.className = "entry-details";
|
||||
tr.style.display = "none";
|
||||
// indent by one td.
|
||||
tr.appendChild(document.createElement("td"));
|
||||
var td = document.createElement("td");
|
||||
td.colSpan = 3;
|
||||
for (var key in entry.groups) {
|
||||
td.appendChild(displayDrilldownGroup(entry, key));
|
||||
}
|
||||
tr.appendChild(td);
|
||||
// Append the new TR after previousSibling.
|
||||
previousSibling.parentNode.insertBefore(tr, previousSibling.nextSibling)
|
||||
}
|
||||
|
||||
function displayDrilldownGroup(entry, key) {
|
||||
var max = 20;
|
||||
var group = entry.groups[key];
|
||||
var div = document.createElement("div")
|
||||
div.className = 'drilldown-group-title'
|
||||
div.innerHTML = key + ' [top ' + max + ']';
|
||||
var table = document.createElement("table");
|
||||
display(group.slice(0, max), table, false)
|
||||
div.appendChild(table);
|
||||
return div;
|
||||
}
|
||||
|
||||
function toggleDetails(node) {
|
||||
var tr = node.parentNode.parentNode;
|
||||
var id = 'details-'+tr.dataset.id;
|
||||
var details = document.getElementById(id);
|
||||
var entry = tr.entry;
|
||||
|
||||
// Create subgroup in-place if the don't exist yet.
|
||||
if (entry.groups === undefined) {
|
||||
entry.createSubGroups();
|
||||
displayDrilldown(entry, tr);
|
||||
}
|
||||
var details = tr.nextSibling;
|
||||
var display = details.style.display;
|
||||
if (display != "none") {
|
||||
display = "none";
|
||||
@ -281,7 +319,7 @@ function initGroupKeySelect() {
|
||||
<h2>Data</h2>
|
||||
<form name="fileForm">
|
||||
<p>
|
||||
<input id="uploadInput" type="file" name="files" onchange="updateSize();" >
|
||||
<input id="uploadInput" type="file" name="files" onchange="loadFile();" >
|
||||
trace entries: <span id="count">0</span>
|
||||
</p>
|
||||
</form>
|
||||
Loading…
Reference in New Issue
Block a user