Skip to content

V
V8
Commit de72192f authored by Camillo Bruni's avatar Camillo Bruni Committed by Commit Bot
Browse files
Options

[tools] All new shiny maptracer.html 

The new maptracer provides a timeline visualization of the maps logged with
--trace-maps.

Cq-Include-Trybots: master.tryserver.chromium.linux:linux_chromium_rel_ng
Change-Id: I896d677e1d28ceb7b94e29139d25c1476c8ce157
Reviewed-on: https://chromium-review.googlesource.com/664719Reviewed-by: 's avatarMathias Bynens <mathias@chromium.org>
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#50158}
parent ffc4ba74
Show whitespace changes
Inline Side-by-side
Showing with 2045 additions and 0 deletions
tools/map-processor 0 → 100755
View file @ de72192f
#!/bin/sh
# find the name of the log file to process, it must not start with a dash.
log_file="v8.log"
for arg in "$@"
do
if ! expr "X${arg}" : "^X-" > /dev/null; then
log_file=${arg}
fi
done
tools_path=`cd $(dirname "$0");pwd`
if [ ! "$D8_PATH" ]; then
d8_public=`which d8`
if [ -x "$d8_public" ]; then D8_PATH=$(dirname "$d8_public"); fi
fi
[ -n "$D8_PATH" ] || D8_PATH=$tools_path/..
d8_exec=$D8_PATH/d8
if [ ! -x "$d8_exec" ]; then
D8_PATH=`pwd`/out/native
d8_exec=$D8_PATH/d8
fi
if [ ! -x "$d8_exec" ]; then
d8_exec=`grep -m 1 -o '".*/d8"' $log_file | sed 's/"//g'`
fi
if [ ! -x "$d8_exec" ]; then
echo "d8 shell not found in $D8_PATH"
echo "To build, execute 'make native' from the V8 directory"
exit 1
fi
# nm spits out 'no symbols found' messages to stderr.
cat $log_file | $d8_exec $tools_path/splaytree.js $tools_path/codemap.js \
$tools_path/csvparser.js $tools_path/consarray.js \
$tools_path/profile.js $tools_path/profile_view.js \
$tools_path/logreader.js $tools_path/arguments.js \
$tools_path/map-processor.js $tools_path/SourceMap.js \
$tools_path/map-processor-driver.js -- $@ 2>/dev/null
tools/map-processor-driver.js 0 → 100644
View file @ de72192f
// Copyright 2017 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.
function processArguments(args) {
var processor = new ArgumentsProcessor(args);
if (processor.parse()) {
return processor.result();
} else {
processor.printUsageAndExit();
}
}
function initSourceMapSupport() {
// Pull dev tools source maps into our name space.
SourceMap = WebInspector.SourceMap;
// Overwrite the load function to load scripts synchronously.
SourceMap.load = function(sourceMapURL) {
var content = readFile(sourceMapURL);
var sourceMapObject = (JSON.parse(content));
return new SourceMap(sourceMapURL, sourceMapObject);
};
}
var params = processArguments(arguments);
var sourceMap = null;
if (params.sourceMap) {
initSourceMapSupport();
sourceMap = SourceMap.load(params.sourceMap);
}
var mapProcessor = new MapProcessor();
mapProcessor.processLogFile(params.logFileName);
tools/map-processor.html 0 → 100644
View file @ de72192f
<!DOCTYPE html>
<html>
<!--
Copyright 2017 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>
<meta charset="UTF-8">
<style>
html, body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
}
h1, h2, h3, section {
padding-left: 15px;
}
#stats table {
display: inline-block;
padding-right: 50px;
}
#stats .transitionTable {
max-height: 200px;
overflow-y: scroll;
}
#timeline {
position: relative;
height: 300px;
overflow-y: hidden;
overflow-x: scroll;
user-select: none;
}
#timelineChunks {
height: 250px;
position: absolute;
margin-right: 100px;
}
#timelineCanvas {
height: 250px;
position: relative;
overflow: visible;
pointer-events: none;
}
.chunk {
width: 6px;
border: 0px white solid;
border-width: 0 2px 0 2px;
position: absolute;
background-size: 100% 100%;
image-rendering: pixelated;
bottom: 0px;
}
.timestamp {
height: 250px;
width: 100px;
border-left: 1px black dashed;
padding-left: 4px;
position: absolute;
pointer-events: none;
font-size: 10px;
opacity: 0.5;
}
#timelineOverview {
width: 100%;
height: 50px;
position: relative;
margin-top: -50px;
margin-bottom: 10px;
background-size: 100% 100%;
border: 1px black solid;
border-width: 1px 0 1px 0;
overflow: hidden;
}
#timelineOverviewIndicator {
height: 100%;
position: absolute;
box-shadow: 0px 2px 20px -5px black inset;
top: 0px;
cursor: ew-resize;
}
#timelineOverviewIndicator .leftMask,
#timelineOverviewIndicator .rightMask {
background-color: rgba(200, 200, 200, 0.5);
width: 10000px;
height: 100%;
position: absolute;
top: 0px;
}
#timelineOverviewIndicator .leftMask {
right: 100%;
}
#timelineOverviewIndicator .rightMask {
left: 100%;
}
#mapDetails {
font-family: monospace;
white-space: pre;
}
#transitionView {
overflow-x: scroll;
white-space: nowrap;
min-height: 50px;
max-height: 200px;
padding: 50px 0 0 0;
margin-top: -25px;
width: 100%;
}
.map {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
background-color: black;
border: 4px solid white;
font-size: 10px;
text-align: center;
line-height: 18px;
color: white;
vertical-align: top;
margin-top: -13px;
/* raise z-index */
position: relative;
z-index: 2;
cursor: pointer;
}
.map.selected {
border-color: black;
}
.transitions {
display: inline-block;
margin-left: -15px;
}
.transition {
min-height: 55px;
margin: 0 0 -2px 2px;
}
/* gray out deprecated transitions */
.deprecated > .transitionEdge,
.deprecated > .map {
opacity: 0.5;
}
.deprecated > .transition {
border-color: rgba(0, 0, 0, 0.5);
}
/* Show a border for all but the first transition */
.transition:nth-of-type(2),
.transition:nth-last-of-type(n+2) {
border-left: 2px solid;
margin-left: 0px;
}
/* special case for 2 transitions */
.transition:nth-last-of-type(1) {
border-left: none;
}
/* topmost transitions are not related */
#transitionView > .transition {
border-left: none;
}
/* topmost transition edge needs initial offset to be aligned */
#transitionView > .transition > .transitionEdge {
margin-left: 13px;
}
.transitionEdge {
height: 2px;
width: 80px;
display: inline-block;
margin: 0 0 2px 0;
background-color: black;
vertical-align: top;
padding-left: 15px;
}
.transitionLabel {
color: black;
transform: rotate(-15deg);
transform-origin: top left;
margin-top: -10px;
font-size: 10px;
white-space: normal;
word-break: break-all;
background-color: rgba(255,255,255,0.5);
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
color: black;
}
.blue {
background-color: blue;
}
.orange {
background-color: orange;
}
.violet {
background-color: violet;
color: black;
}
.showSubtransitions {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 10px solid black;
cursor: zoom-in;
margin: 4px 0 0 4px;
}
.showSubtransitions.opened {
border-top: none;
border-bottom: 10px solid black;
cursor: zoom-out;
}
#tooltip {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
pointer-events: none;
z-index: 100;
display: none;
}
</style>
<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="./SourceMap.js"></script>
<script src="./arguments.js"></script>
<script src="./map-processor.js"></script>
<script>
"use strict"
// =========================================================================
const kChunkHeight = 250;
const kChunkWidth = 10;
class State {
constructor() {
this._nofChunks = 400;
this._map = undefined;
this._timeline = undefined;
this._chunks = undefined;
this._view = new View(this);
this._navigation = new Navigation(this, this.view);
}
get timeline() { return this._timeline }
set timeline(value) {
this._timeline = value;
this.updateChunks();
this.view.updateTimeline();
this.view.updateStats();
}
get chunks() { return this._chunks }
get nofChunks() { return this._nofChunks }
set nofChunks(count) {
this._nofChunks = count;
this.updateChunks();
this.view.updateTimeline();
}
get view() { return this._view }
get navigation() { return this._navigation }
get map() { return this._map }
set map(value) {
this._map = value;
this._navigation.updateUrl();
this.view.updateMapDetails();
this.view.redraw();
}
updateChunks() {
this._chunks = this._timeline.chunks(this._nofChunks);
}
get entries() {
if (!this.map) return {};
return {
map: this.map.id,
time: this.map.time
}
}
}
// =========================================================================
// DOM Helper
function $(id) {
return document.getElementById(id)
}
function removeAllChildren(node) {
while (node.lastChild) {
node.removeChild(node.lastChild);
}
}
function selectOption(select, match) {
let options = select.options;
for (let i = 0; i < options.length; i++) {
if (match(i, options[i])) {
select.selectedIndex = i;
return;
}
}
}
function div(classes) {
let node = document.createElement('div');
if (classes !== void 0) {
if (typeof classes == "string") {
node.classList.add(classes);
} else {
classes.forEach(cls => node.classList.add(cls));
}
}
return node;
}
function table(className) {
let node = document.createElement("table")
if (className) node.classList.add(className)
return node;
}
function td(text) {
let node = document.createElement("td");
node.innerText = text;
return node;
}
function tr() {
let node = document.createElement("tr");
return node;
}
function define(prototype, name, fn) {
Object.defineProperty(prototype, name, {value:fn, enumerable:false});
}
define(Array.prototype, "max", function(fn) {
if (this.length == 0) return undefined;
if (fn == undefined) fn = (each) => each;
let max = fn(this[0]);
for (let i = 1; i < this.length; i++) {
max = Math.max(max, fn(this[i]));
}
return max;
})
define(Array.prototype, "histogram", function(mapFn) {
let histogram = [];
for (let i = 0; i < this.length; i++) {
let value = this[i];
let index = Math.round(mapFn(value))
let bucket = histogram[index];
if (bucket !== undefined) {
bucket.push(value);
} else {
histogram[index] = [value];
}
}
for (let i = 0; i < histogram.length; i++) {
histogram[i] = histogram[i] || [];
}
return histogram;
});
define(Array.prototype, "first", function() { return this[0] });
define(Array.prototype, "last", function() { return this[this.length - 1] });
// =========================================================================
// EventHandlers
function handleBodyLoad() {
let upload = $('uploadInput');
upload.onclick = (e) => { e.target.value = null };
upload.onchange = (e) => { handleLoadFile(e.target) };
upload.focus();
document.state = new State();
$("transitionView").addEventListener("mousemove", e => {
let tooltip = $("tooltip");
tooltip.style.left = e.pageX + "px";
tooltip.style.top = e.pageY + "px";
let map = e.target.map;
if (map) {
$("tooltipContents").innerText = map.description.join("\n");
}
});
}
function handleLoadFile(upload) {
let files = upload.files;
let file = files[0];
let reader = new FileReader();
reader.onload = function(evt) {
handleLoadText(this.result);
}
reader.readAsText(file);
}
function handleLoadText(text) {
let mapProcessor = new MapProcessor();
document.state.timeline = mapProcessor.processString(text);
}
function handleKeyDown(event) {
let nav = document.state.navigation;
switch(event.key) {
case "ArrowUp":
event.preventDefault();
if (event.shiftKey) {
nav.selectPrevEdge();
} else {
nav.moveInChunk(-1);
}
return false;
case "ArrowDown":
event.preventDefault();
if (event.shiftKey) {
nav.selectNextEdge();
} else {
nav.moveInChunk(1);
}
return false;
case "ArrowLeft":
nav.moveInChunks(false);
break;
case "ArrowRight":
nav.moveInChunks(true);
break;
case "+":
nav.increaseTimelineResolution();
break;
case "-":
nav.decreaseTimelineResolution();
break;
}
};
document.onkeydown = handleKeyDown;
function handleTimelineIndicatorMove(event) {
if (event.buttons == 0) return;
let timelineTotalWidth = $("timelineCanvas").offsetWidth;
let factor = $("timelineOverview").offsetWidth / timelineTotalWidth;
$("timeline").scrollLeft += event.movementX / factor;
}
// =========================================================================
Object.defineProperty(Edge.prototype, 'getColor', { value:function() {
return transitionTypeToColor(this.type);
}});
class Navigation {
constructor(state, view) {
this.state = state;
this.view = view;
}
get map() { return this.state.map }
set map(value) { this.state.map = value }
get chunks() { return this.state.chunks }
increaseTimelineResolution() {
this.state.nofChunks *= 1.5;
}
decreaseTimelineResolution() {
this.state.nofChunks /= 1.5;
}
selectNextEdge() {
if (!this.map) return;
if (this.map.children.length != 1) return;
this.map = this.map.children[0].to;
}
selectPrevEdge() {
if (!this.map) return;
if (!this.map.parent()) return;
this.map = this.map.parent();
}
selectDefaultMap() {
this.map = this.chunks[0].at(0);
}
moveInChunks(next) {
if (!this.map) return this.selectDefaultMap();
let chunkIndex = this.map.chunkIndex(this.chunks);
let chunk = this.chunks[chunkIndex];
let index = chunk.indexOf(this.map);
if (next) {
chunk = chunk.next(this.chunks);
} else {
chunk = chunk.prev(this.chunks);
}
if (!chunk) return;
index = Math.min(index, chunk.size()-1);
this.map = chunk.at(index);
}
moveInChunk(delta) {
if (!this.map) return this.selectDefaultMap();
let chunkIndex = this.map.chunkIndex(this.chunks)
let chunk = this.chunks[chunkIndex];
let index = chunk.indexOf(this.map) + delta;
let map;
if (index < 0) {
map = chunk.prev(this.chunks).last();
} else if (index >= chunk.size()) {
map = chunk.next(this.chunks).first()
} else {
map = chunk.at(index);
}
this.map = map;
}
updateUrl() {
let entries = this.state.entries;
let params = new URLSearchParams(entries);
window.history.pushState(entries, "", "?" + params.toString());
}
}
class View {
constructor(state) {
this.state = state;
setInterval(this.updateOverviewWindow, 50);
this.backgroundCanvas = document.createElement("canvas");
this.transitionView = new TransitionView(state, $("transitionView"));
this.statsView = new StatsView(state, $("stats"));
this.isLocked = false;
}
get chunks() { return this.state.chunks }
get timeline() { return this.state.timeline }
get map() { return this.state.map }
updateStats() {
this.statsView.update();
}
updateMapDetails() {
let details = "";
if (this.map) {
details += "ID: " + this.map.id;
details += "\n" + this.map.description;
}
$("mapDetails").innerText = details;
this.transitionView.showMap(this.map);
}
updateTimeline() {
let chunksNode = $("timelineChunks");
removeAllChildren(chunksNode);
let chunks = this.chunks;
let max = chunks.max(each => each.size());
let start = this.timeline.startTime;
let end = this.timeline.endTime;
let duration = end - start;
const timeToPixel = chunks.length * kChunkWidth / duration;
let addTimestamp = (time, name) => {
let timeNode = div("timestamp");
timeNode.innerText = name;
timeNode.style.left = ((time-start) * timeToPixel) + "px";
chunksNode.appendChild(timeNode);
};
for (let i = 0; i < chunks.length; i++) {
let chunk = chunks[i];
let height = (chunk.size() / max * kChunkHeight);
chunk.height = height;
if (chunk.isEmpty()) continue;
let node = div();
node.className = "chunk";
node.style.left = (i * kChunkWidth) + "px";
node.style.height = height + "px";
node.chunk = chunk;
node.addEventListener("mousemove", e => this.handleChunkMouseMove(e));
node.addEventListener("click", e => this.handleChunkClick(e));
node.addEventListener("dblclick", e => this.handleChunkDoubleClick(e));
this.setTimelineChunkBackground(chunk, node);
chunksNode.appendChild(node);
chunk.markers.forEach(marker => addTimestamp(marker.time, marker.name));
}
// Put a time marker roughly every 20 chunks.
let expected = duration / chunks.length * 20;
let interval = (10 ** Math.floor(Math.log10(expected)));
let correction = Math.log10(expected / interval);
correction = (correction < 0.33) ? 1 : (correction < 0.75) ? 2.5 : 5;
interval *= correction;
let time = start;
while (time < end) {
addTimestamp(time, ((time-start) / 1000) + " ms");
time += interval;
}
this.drawOverview();
this.drawHistograms();
this.redraw();
}
handleChunkMouseMove(event) {
if (this.isLocked) return false;
let chunk = event.target.chunk;
if (!chunk) return;
// topmost map (at chunk.height) == map #0.
let relativeIndex =
Math.round(event.layerY / event.target.offsetHeight * chunk.size());
let map = chunk.at(relativeIndex);
this.state.map = map;
}
handleChunkClick(event) {
this.isLocked = !this.isLocked;
}
handleChunkDoubleClick(event) {
this.isLocked = true;
let chunk = event.target.chunk;
if (!chunk) return;
this.transitionView.showMaps(chunk.getUniqueTransitions());
}
setTimelineChunkBackground(chunk, node) {
// Render the types of transitions as bar charts
const kHeight = chunk.height;
const kWidth = 1;
this.backgroundCanvas.width = kWidth;
this.backgroundCanvas.height = kHeight;
let ctx = this.backgroundCanvas.getContext("2d");
ctx.clearRect(0, 0, kWidth, kHeight);
let y = 0;
let total = chunk.size();
let type, count;
if (true) {
chunk.getTransitionBreakdown().forEach(([type, count]) => {
ctx.fillStyle = transitionTypeToColor(type);
let height = count / total * kHeight;
ctx.fillRect(0, y, kWidth, y + height);
y += height;
});
} else {
chunk.items.forEach(map => {
ctx.fillStyle = transitionTypeToColor(map.getType());
let y = chunk.yOffset(map);
ctx.fillRect(0, y, kWidth, y + 1);
});
}
let imageData = this.backgroundCanvas.toDataURL("image/png");
node.style.backgroundImage = "url(" + imageData + ")";
}
updateOverviewWindow() {
let indicator = $("timelineOverviewIndicator");
let totalIndicatorWidth = $("timelineOverview").offsetWidth;
let div = $("timeline");
let timelineTotalWidth = $("timelineCanvas").offsetWidth;
let factor = $("timelineOverview").offsetWidth / timelineTotalWidth;
let width = div.offsetWidth * factor;
let left = div.scrollLeft * factor;
indicator.style.width = width + "px";
indicator.style.left = left + "px";
}
drawOverview() {
const height = 50;
const kFactor = 2;
let canvas = this.backgroundCanvas;
canvas.height = height;
canvas.width = window.innerWidth;
let ctx = canvas.getContext("2d");
let chunks = this.state.timeline.chunkSizes(canvas.width * kFactor);
let max = chunks.max();
ctx.clearRect(0, 0, canvas.width, height);
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(0,height);
for (let i = 0; i < chunks.length; i++) {
ctx.lineTo(i/kFactor, height - chunks[i]/max * height);
}
ctx.lineTo(chunks.length, height);
ctx.stroke();
ctx.closePath();
ctx.fill();
let imageData = canvas.toDataURL("image/png");
$("timelineOverview").style.backgroundImage = "url(" + imageData + ")";
}
drawHistograms() {
$("mapsDepthHistogram").histogram = this.timeline.depthHistogram();
$("mapsFanOutHistogram").histogram = this.timeline.fanOutHistogram();
}
drawMapsDepthHistogram() {
let canvas = $("mapsDepthCanvas");
let histogram = this.timeline.depthHistogram();
this.drawHistogram(canvas, histogram, true);
}
drawMapsFanOutHistogram() {
let canvas = $("mapsFanOutCanvas");
let histogram = this.timeline.fanOutHistogram();
this.drawHistogram(canvas, histogram, true, true);
}
drawHistogram(canvas, histogram, logScaleX=false, logScaleY=false) {
let ctx = canvas.getContext("2d");
let yMax = histogram.max(each => each.length);
if (logScaleY) yMax = Math.log(yMax);
let xMax = histogram.length;
if (logScaleX) xMax = Math.log(xMax);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(0,canvas.height);
for (let i = 0; i < histogram.length; i++) {
let x = i;
if (logScaleX) x = Math.log(x);
x = x / xMax * canvas.width;
let bucketLength = histogram[i].length;
if (logScaleY) bucketLength = Math.log(bucketLength);
let y = (1 - bucketLength / yMax) * canvas.height;
ctx.lineTo(x, y);
}
ctx.lineTo(canvas.width, canvas.height);
ctx.closePath;
ctx.stroke();
ctx.fill();
}
redraw() {
let canvas= $("timelineCanvas");
canvas.width = (this.chunks.length+1) * kChunkWidth;
canvas.height = kChunkHeight;
let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, kChunkHeight);
if (!this.state.map) return;
this.drawEdges(ctx);
}
setMapStyle(map, ctx) {
ctx.fillStyle = map.edge && map.edge.from ? "black" : "green";
}
setEdgeStyle(edge, ctx) {
let color = edge.getColor();
ctx.strokeStyle = color;
ctx.fillStyle = color;
}
markMap(ctx, map) {
let [x, y] = map.position(this.state.chunks);
ctx.beginPath();
this.setMapStyle(map, ctx);
ctx.arc(x, y, 3, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "white";
ctx.arc(x, y, 2, 0, 2 * Math.PI);
ctx.fill();
}
markSelectedMap(ctx, map) {
let [x, y] = map.position(this.state.chunks);
ctx.beginPath();
this.setMapStyle(map, ctx);
ctx.arc(x, y, 6, 0, 2 * Math.PI);
ctx.stroke();
}
drawEdges(ctx) {
// Draw the trace of maps in reverse order to make sure the outgoing
// transitions of previous maps aren't drawn over.
const kMaxOutgoingEdges = 100;
let nofEdges = 0;
let stack = [];
let current = this.state.map;
while (current && nofEdges < kMaxOutgoingEdges) {
nofEdges += current.children.length;
stack.push(current);
current = current.parent();
}
ctx.save();
this.drawOutgoingEdges(ctx, this.state.map, 3);
ctx.restore();
let labelOffset = 15;
let xPrev = 0;
while (current = stack.pop()) {
if (current.edge) {
this.setEdgeStyle(current.edge, ctx);
let [xTo, yTo] = this.drawEdge(ctx, current.edge, true, labelOffset);
if (xTo == xPrev) {
labelOffset += 8;
} else {
labelOffset = 15
}
xPrev = xTo;
}
this.markMap(ctx, current);
current = current.parent();
ctx.save();
// this.drawOutgoingEdges(ctx, current, 1);
ctx.restore();
}
// Mark selected map
this.markSelectedMap(ctx, this.state.map);
}
drawEdge(ctx, edge, showLabel=true, labelOffset=20) {
if (!edge.from || !edge.to) return [-1, -1];
let [xFrom, yFrom] = edge.from.position(this.chunks);
let [xTo, yTo] = edge.to.position(this.chunks);
let sameChunk = xTo == xFrom;
if (sameChunk) labelOffset += 8;
ctx.beginPath();
ctx.moveTo(xFrom, yFrom);
let offsetX = 20;
let offsetY = 20;
let midX = xFrom + (xTo- xFrom) / 2;
let midY = (yFrom + yTo) / 2 - 100;
if (!sameChunk) {
ctx.quadraticCurveTo(midX, midY, xTo, yTo);
} else {
ctx.lineTo(xTo, yTo);
}
if (!showLabel) {
ctx.stroke();
} else {
let centerX, centerY;
if (!sameChunk) {
centerX = (xFrom/2 + midX + xTo/2)/2;
centerY = (yFrom/2 + midY + yTo/2)/2;
} else {
centerX = xTo;
centerY = yTo;
}
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX + offsetX, centerY - labelOffset);
ctx.stroke();
ctx.textAlign = "left";
ctx.fillText(edge.toString(), centerX + offsetX + 2, centerY - labelOffset)
}
return [xTo, yTo];
}
drawOutgoingEdges(ctx, map, max=10, depth=0) {
if (!map) return;
if (depth >= max) return;
ctx.globalAlpha = 0.5 - depth * (0.3/max);
ctx.strokeStyle = "#666";
const limit = Math.min(map.children.length, 100)
for (let i = 0; i < limit; i++) {
let edge = map.children[i];
this.drawEdge(ctx, edge, true);
this.drawOutgoingEdges(ctx, edge.to, max, depth+1);
}
}
}
class TransitionView {
constructor(state, node) {
this.state = state;
this.container = node;
this.currentNode = node;
this.currentMap = undefined;
}
selectMap(map) {
this.currentMap = map;
this.state.map = map;
}
showMap(map) {
if (this.currentMap === map) return;
this.currentMap = map;
this._showMaps([map]);
}
showMaps(list, name) {
this.state.view.isLocked = true;
this._showMaps(list);
}
_showMaps(list, name) {
// Hide the container to avoid any layouts.
this.container.style.display = "none";
removeAllChildren(this.container);
list.forEach(map => this.addMapAndParentTransitions(map));
this.container.style.display = ""
}
addMapAndParentTransitions(map) {
if (map === void 0) return;
this.currentNode = this.container;
let parents = map.getParents();
if (parents.length > 0) {
this.addTransitionTo(parents.pop());
parents.reverse().forEach(each => this.addTransitionTo(each));
}
let mapNode = this.addSubtransitions(map);
// Mark and show the selected map.
mapNode.classList.add("selected");
if (this.selectedMap == map) {
setTimeout(() => mapNode.scrollIntoView({
behavior: "smooth", block: "nearest", inline: "nearest"
}), 1);
}
}
addMapNode(map) {
let node = div("map");
if (map.edge) node.classList.add(map.edge.getColor());
node.map = map;
node.addEventListener("click", () => this.selectMap(map));
if (map.children.length > 1) {
node.innerText = map.children.length;
let showSubtree = div("showSubtransitions");
showSubtree.addEventListener("click", (e) => this.toggleSubtree(e, node));
node.appendChild(showSubtree);
} else if (map.children.length == 0) {
node.innerHTML = "&#x25CF;"
}
this.currentNode.appendChild(node);
return node;
}
addSubtransitions(map) {
let mapNode = this.addTransitionTo(map);
// Draw outgoing linear transition line.
let current = map;
while (current.children.length == 1) {
current = current.children[0].to;
this.addTransitionTo(current);
}
return mapNode;
}
addTransitionEdge(map) {
let classes = ["transitionEdge", map.edge.getColor()];
let edge = div(classes);
let labelNode = div("transitionLabel");
labelNode.innerText = map.edge.toString();
edge.appendChild(labelNode);
return edge;
}
addTransitionTo(map) {
// transition[ transitions[ transition[...], transition[...], ...]];
let transition = div("transition");
if (map.isDeprecated()) transition.classList.add("deprecated");
if (map.edge) {
transition.appendChild(this.addTransitionEdge(map));
}
let mapNode = this.addMapNode(map);
transition.appendChild(mapNode);
let subtree = div("transitions");
transition.appendChild(subtree);
this.currentNode.appendChild(transition);
this.currentNode = subtree;
return mapNode;
}
toggleSubtree(event, node) {
let map = node.map;
event.target.classList.toggle("opened");
let transitionsNode = node.parentElement.querySelector(".transitions");
let subtransitionNodes = transitionsNode.children;
if (subtransitionNodes.length <= 1) {
// Add subtransitions excepth the one that's already shown.
let visibleTransitionMap = subtransitionNodes.length == 1 ?
transitionsNode.querySelector(".map").map : void 0;
map.children.forEach(edge => {
if (edge.to != visibleTransitionMap) {
this.currentNode = transitionsNode;
this.addSubtransitions(edge.to);
}
});
} else {
// remove all but the first (currently selected) subtransition
for (let i = subtransitionNodes.length-1; i > 0; i--) {
transitionsNode.removeChild(subtransitionNodes[i]);
}
}
}
}
class StatsView {
constructor(state, node) {
this.state = state;
this.node = node;
}
get timeline() { return this.state.timeline }
get transitionView() { return this.state.view.transitionView; }
update() {
removeAllChildren(this.node);
this.updateGeneralStats();
this.updateNamedTransitionsStats();
}
updateGeneralStats() {
let pairs = [
["Maps", e => true],
["Transitions", e => e.edge && e.edge.isTransition()],
["Fast to Slow", e => e.edge && e.edge.isFastToSlow()],
["Slow to Fast", e => e.edge && e.edge.isSlowToFast()],
["Initial Map", e => e.edge && e.edge.isInitial()],
["Replace Descriptors", e => e.edge && e.edge.isReplaceDescriptors()],
["Copy as Prototype", e => e.edge && e.edge.isCopyAsPrototype()],
["Optimize as Prototype", e => e.edge && e.edge.isOptimizeAsPrototype()],
["Deprecated", e => e.isDeprecated()],
];
let text = "";
let tableNode = table();
let name, filter;
let total = this.timeline.size();
pairs.forEach(([name, filter]) => {
let row = tr();
row.maps = this.timeline.filterUniqueTransitions(filter);
row.addEventListener("click",
e => this.transitionView.showMaps(e.target.parentNode.maps));
row.appendChild(td(name));
let count = this.timeline.count(filter);
row.appendChild(td(count));
let percent = Math.round(count / total * 1000) / 10;
row.appendChild(td(percent + "%"));
tableNode.appendChild(row);
});
this.node.appendChild(tableNode);
};
updateNamedTransitionsStats() {
let tableNode = table("transitionTable");
let nameMapPairs = Array.from(this.timeline.transitions.entries());
nameMapPairs
.sort((a,b) => b[1].length - a[1].length)
.forEach(([name, maps]) => {
let row = tr();
row.maps = maps;
row.addEventListener("click",
e => this.transitionView.showMaps(
e.target.parentNode.maps.map(map => map.to)));
row.appendChild(td(name));
row.appendChild(td(maps.length));
tableNode.appendChild(row);
});
this.node.appendChild(tableNode);
}
}
// =========================================================================
function transitionTypeToColor(type) {
switch(type) {
case "new": return "green";
case "Normalize": return "violet";
case "map=SlowToFast": return "orange";
case "InitialMap": return "yellow";
case "Transition": return "black";
case "ReplaceDescriptors": return "red";
}
return "black";
}
// ShadowDom elements =========================================================
customElements.define('x-histogram', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
const t = document.querySelector('#x-histogram-template');
const instance = t.content.cloneNode(true);
shadowRoot.appendChild(instance);
this._histogram = undefined;
this.mouseX = 0;
this.mouseY = 0;
this.canvas.addEventListener('mousemove', event => this.handleCanvasMove(event));
}
setBoolAttribute(name, value) {
if (value) {
this.setAttribute(name, "");
} else {
this.deleteAttribute(name);
}
}
static get observedAttributes() {
return ['title', 'xlog', 'ylog', 'xlabel', 'ylabel'];
}
$(query) { return this.shadowRoot.querySelector(query) }
get h1() { return this.$("h2") }
get canvas() { return this.$("canvas") }
get xLabelDiv() { return this.$("#xLabel") }
get yLabelDiv() { return this.$("#yLabel") }
get histogram() {
return this._histogram;
}
set histogram(array) {
this._histogram = array;
if (this._histogram) {
this.yMax = this._histogram.max(each => each.length);
this.xMax = this._histogram.length;
}
this.draw();
}
get title() { return this.getAttribute("title") }
set title(string) { this.setAttribute("title", string) }
get xLabel() { return this.getAttribute("xlabel") }
set xLabel(string) { this.setAttribute("xlabel", string)}
get yLabel() { return this.getAttribute("ylabel") }
set yLabel(string) { this.setAttribute("ylabel", string)}
get xLog() { return this.hasAttribute("xlog") }
set xLog(value) { this.setBoolAttribute("xlog", value) }
get yLog() { return this.hasAttribute("ylog") }
set yLog(value) { this.setBoolAttribute("ylog", value) }
attributeChangedCallback(name, oldValue, newValue) {
if (name == "title") {
this.h1.innerText = newValue;
return;
}
if (name == "ylabel") {
this.yLabelDiv.innerText = newValue;
return;
}
if (name == "xlabel") {
this.xLabelDiv.innerText = newValue;
return;
}
this.draw();
}
handleCanvasMove(event) {
this.mouseX = event.offsetX;
this.mouseY = event.offsetY;
this.draw();
}
xPosition(i) {
let x = i;
if (this.xLog) x = Math.log(x);
return x / this.xMax * this.canvas.width;
}
yPosition(i) {
let bucketLength = this.histogram[i].length;
if (this.yLog) {
return (1 - Math.log(bucketLength) / Math.log(this.yMax)) * this.drawHeight + 10;
} else {
return (1 - bucketLength / this.yMax) * this.drawHeight + 10;
}
}
get drawHeight() { return this.canvas.height - 10 }
draw() {
if (!this.histogram) return;
let width = this.canvas.width;
let height = this.drawHeight;
let ctx = this.canvas.getContext("2d");
if (this.xLog) yMax = Math.log(yMax);
let xMax = this.histogram.length;
if (this.yLog) xMax = Math.log(xMax);
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
ctx.beginPath();
ctx.moveTo(0, height);
for (let i = 0; i < this.histogram.length; i++) {
ctx.lineTo(this.xPosition(i), this.yPosition(i));
}
ctx.lineTo(width, height);
ctx.closePath;
ctx.stroke();
ctx.fill();
if (!this.mouseX) return;
ctx.beginPath();
let index = Math.round(this.mouseX);
let yBucket = this.histogram[index];
let y = this.yPosition(index);
if (this.yLog) y = Math.log(y);
ctx.moveTo(0, y);
ctx.lineTo(width-40, y);
ctx.moveTo(this.mouseX, 0);
ctx.lineTo(this.mouseX, height);
ctx.stroke();
ctx.textAlign = "left";
ctx.fillText(yBucket.length, width-30, y);
}
});
</script>
</head>
<template id="x-histogram-template">
<style>
#yLabel {
transform: rotate(90deg);
}
canvas, #yLabel, #info { float: left; }
#xLabel { clear: both }
</style>
<h2></h2>
<div id="yLabel"></div>
<canvas height=50></canvas>
<div id="info">
</div>
<div id="xLabel"></div>
</template>
<body onload="handleBodyLoad(event)" onkeypress="handleKeyDown(event)">
<h2>Data</h2>
<section>
<form name="fileForm">
<p>
<input id="uploadInput" type="file" name="files">
</p>
</form>
</section>
<h2>Stats</h2>
<section id="stats"></section>
<h2>Timeline</h2>
<div id="timeline">
<div id=timelineChunks></div>
<canvas id="timelineCanvas" ></canvas>
</div>
<div id="timelineOverview"
onmousemove="handleTimelineIndicatorMove(event)" >
<div id="timelineOverviewIndicator">
<div class="leftMask"></div>
<div class="rightMask"></div>
</div>
</div>
<h2>Transitions</h2>
<section id="transitionView"></section>
<br/>
<h2>Selected Map</h2>
<section id="mapDetails"></section>
<x-histogram id="mapsDepthHistogram"
title="Maps Depth" xlabel="depth" ylabel="nof"></x-histogram>
<x-histogram id="mapsFanOutHistogram" xlabel="fan-out"
title="Maps Fan-out" ylabel="nof"></x-histogram>
<div id="tooltip">
<div id="tooltipContents"></div>
</div>
</body>
</html>
tools/map-processor.js 0 → 100644
View file @ de72192f
// Copyright 2017 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.
// ===========================================================================
class MapProcessor extends LogReader {
constructor() {
super();
this.dispatchTable_ = {
'code-creation': {
parsers: [null, parseInt, parseInt, parseInt, parseInt, null, 'var-args'],
processor: this.processCodeCreation
},
'code-move': {
parsers: [parseInt, parseInt],
'sfi-move': {
parsers: [parseInt, parseInt],
processor: this.processCodeMove
},
'code-delete': {
parsers: [parseInt],
processor: this.processCodeDelete
},
processor: this.processFunctionMove
},
'map-create': {
parsers: [parseInt, parseInt, null],
processor: this.processMapCreate
},
'map': {
parsers: [null, parseInt, parseInt, parseInt, parseInt, parseInt,
null, null, null
],
processor: this.processMap
},
'map-details': {
parsers: [parseInt, parseInt, null],
processor: this.processMapDetails
}
};
this.deserializedEntriesNames_ = [];
this.profile_ = new Profile();
this.timeline_ = new Timeline();
}
printError(str) {
console.error(str);
throw str
}
processString(string) {
let end = string.length;
let current = 0;
let next = 0;
let line;
let i = 0;
let entry;
try {
while (current < end) {
next = string.indexOf("\n", current);
if (next === -1) break;
i++;
line = string.substring(current, next);
current = next + 1;
this.processLogLine(line);
}
} catch(e) {
console.log("Error occurred during parsing, trying to continue: " + e);
}
return this.finalize();
}
processLogFile(fileName) {
this.collectEntries = true
this.lastLogFileName_ = fileName;
let line;
while (line = readline()) {
this.processLogLine(line);
}
return this.finalize();
}
finalize() {
// TODO(cbruni): print stats;
this.timeline_.finalize();
return this.timeline_;
}
addEntry(entry) {
this.entries.push(entry);
}
/**
* Parser for dynamic code optimization state.
*/
parseState(s) {
switch (s) {
case "":
return Profile.CodeState.COMPILED;
case "~":
return Profile.CodeState.OPTIMIZABLE;
case "*":
return Profile.CodeState.OPTIMIZED;
}
throw new Error("unknown code state: " + s);
}
processCodeCreation(
type, kind, timestamp, start, size, name, maybe_func) {
name = this.deserializedEntriesNames_[start] || name;
if (name.startsWith("onComplete")) {
console.log(name);
}
if (maybe_func.length) {
let funcAddr = parseInt(maybe_func[0]);
let state = this.parseState(maybe_func[1]);
this.profile_.addFuncCode(type, name, timestamp, start, size, funcAddr, state);
} else {
this.profile_.addCode(type, name, timestamp, start, size);
}
}
processCodeMove(from, to) {
this.profile_.moveCode(from, to);
}
processCodeDelete(start) {
this.profile_.deleteCode(start);
}
processFunctionMove(from, to) {
this.profile_.moveFunc(from, to);
}
formatPC(pc, line, column) {
let entry = this.profile_.findEntry(pc);
if (!entry) return "<unknown>"
if (entry.type == "Builtin") {
return entry.name;
}
let name = entry.func.getName();
let re = /(.*):[0-9]+:[0-9]+$/;
let array = re.exec(name);
if (!array) {
entry = name;
} else {
entry = entry.getState() + array[1];
}
return entry + ":" + line + ":" + column;
}
processMap(type, time, from, to, pc, line, column, reason, name) {
time = parseInt(time);
if (type == "Deprecate") return this.deprecateMap(type, time, from);
from = this.getExistingMap(from, time);
to = this.getExistingMap(to, time);
let edge = new Edge(type, name, reason, time, from, to);
edge.filePosition = this.formatPC(pc, line, column);
edge.finishSetup();
}
deprecateMap(type, time, id) {
this.getExistingMap(id, time).deprecate();
}
processMapCreate(time, id, string) {
// map-create events might override existing maps if the addresses get
// rcycled. Hence we do not check for existing maps.
let map = this.createMap(id, time);
map.description = string;
}
processMapDetails(time, id, string) {
//TODO(cbruni): fix initial map logging.
let map = this.getExistingMap(id, time);
if (!map.description) {
map.description = string;
}
}
createMap(id, time) {
if (id == 0x1821257d1761) {
console.log(id);
}
let map = new V8Map(id, time);
this.timeline_.push(map);
return map;
}
getExistingMap(id, time) {
if (id === 0) return undefined;
let map = V8Map.get(id);
if (map === undefined) {
console.error("No map details provided: id=" + id);
// Manually patch in a map to continue running.
return this.createMap(id, time);
};
return map;
}
}
// ===========================================================================
class V8Map {
constructor(id, time = -1) {
if (!id) throw "Invalid ID";
this.id = id;
this.time = time;
if (!(time > 0)) throw "Invalid time";
this.description = "";
this.edge = void 0;
this.children = [];
this.depth = 0;
this._isDeprecated = false;
this.deprecationTargets = null;
V8Map.set(id, this);
this.leftId = 0;
this.rightId = 0;
}
finalize(id) {
// Initialize preorder tree traversal Ids for fast subtree inclusion checks
if (id <= 0) throw "invalid id";
let currentId = id;
this.leftId = currentId
this.children.forEach(edge => {
let map = edge.to;
currentId = map.finalize(currentId + 1);
});
this.rightId = currentId + 1;
return currentId + 1;
}
parent() {
if (this.edge === void 0) return void 0;
return this.edge.from;
}
isDeprecated() {
return this._isDeprecated;
}
deprecate() {
this._isDeprecated = true;
}
isRoot() {
return this.edge == void 0 || this.edge.from == void 0;
}
contains(map) {
return this.leftId < map.leftId && map.rightId < this.rightId;
}
addEdge(edge) {
this.children.push(edge);
}
chunkIndex(chunks) {
// Did anybody say O(n)?
for (let i = 0; i < chunks.length; i++) {
let chunk = chunks[i];
if (chunk.isEmpty()) continue;
if (chunk.last().time < this.time) continue;
return i;
}
return -1;
}
position(chunks) {
let index = this.chunkIndex(chunks);
let xFrom = (index + 0.5) * kChunkWidth;
let yFrom = kChunkHeight - chunks[index].yOffset(this);
return [xFrom, yFrom];
}
transitions() {
let transitions = Object.create(null);
let current = this;
while (current) {
let edge = current.edge;
if (edge && edge.isTransition()) {
transitions[edge.name] = edge;
}
current = current.parent()
}
return transitions;
}
getType() {
return this.edge === void 0 ? "new" : this.edge.type;
}
getParents() {
let parents = [];
let current = this.parent();
while (current) {
parents.push(current);
current = current.parent();
}
return parents;
}
static get(id) {
if (!this.cache) return undefined;
return this.cache.get(id);
}
static set(id, map) {
if (!this.cache) this.cache = new Map();
this.cache.set(id, map);
}
}
// ===========================================================================
class Edge {
constructor(type, name, reason, time, from, to) {
this.type = type;
this.name = name;
this.reason = reason;
this.time = time;
this.from = from;
this.to = to;
this.filePosition = "";
}
finishSetup() {
if (this.from) this.from.addEdge(this);
if (this.to) {
this.to.edge = this;
if (this.to === this.from) throw "From and to must be distinct.";
if (this.from) {
if (this.to.time < this.from.time) {
console.error("invalid time order");
}
let newDepth = this.from.depth + 1;
if (this.to.depth > 0 && this.to.depth != newDepth) {
console.error("Depth has already been initialized");
}
this.to.depth = newDepth;
}
}
}
chunkIndex(chunks) {
// Did anybody say O(n)?
for (let i = 0; i < chunks.length; i++) {
let chunk = chunks[i];
if (chunk.isEmpty()) continue;
if (chunk.last().time < this.time) continue;
return i;
}
return -1;
}
parentEdge() {
if (!this.from) return undefined;
return this.from.edge;
}
chainLength() {
let length = 0;
let prev = this;
while (prev) {
prev = this.parent;
length++;
}
return length;
}
isTransition() {
return this.type == "Transition"
}
isFastToSlow() {
return this.type == "Normalize"
}
isSlowToFast() {
return this.type == "SlowToFast"
}
isInitial() {
return this.type == "InitialMap"
}
isReplaceDescriptors() {
return this.type == "ReplaceDescriptors"
}
isCopyAsPrototype() {
return this.reason == "CopyAsPrototype"
}
isOptimizeAsPrototype() {
return this.reason == "OptimizeAsPrototype"
}
symbol() {
if (this.isTransition()) return "+";
if (this.isFastToSlow()) return "⊡";
if (this.isSlowToFast()) return "⊛";
if (this.isReplaceDescriptors()) {
if (this.name) return "+";
return "∥";
}
return "";
}
toString() {
let s = this.symbol();
if (this.isTransition()) return s + this.name;
if (this.isFastToSlow()) return s + this.reason;
if (this.isCopyAsPrototype()) return s + "Copy as Prototype";
if (this.isOptimizeAsPrototype()) {
return s + "Optimize as Prototype";
}
if (this.isReplaceDescriptors() && this.name) {
return this.type + " " + this.symbol() + this.name;
}
return this.type + " " + (this.reason ? this.reason : "") + " " +
(this.name ? this.name : "")
}
}
// ===========================================================================
class Marker {
constructor(time, name) {
this.time = parseInt(time);
this.name = name;
}
}
// ===========================================================================
class Timeline {
constructor() {
this.values = [];
this.transitions = new Map();
this.markers = [];
this.startTime = 0;
this.endTime = 0;
}
push(map) {
let time = map.time;
if (!this.isEmpty() && this.last().time > time) {
// Invalid insertion order, might happen without --single-process,
// finding insertion point.
let insertionPoint = this.find(time);
this.values.splice(insertionPoint, map);
} else {
this.values.push(map);
}
if (time > 0) {
this.endTime = Math.max(this.endTime, time);
if (this.startTime === 0) {
this.startTime = time;
} else {
this.startTime = Math.min(this.startTime, time);
}
}
}
addMarker(time, message) {
this.markers.push(new Marker(time, message));
}
finalize() {
let id = 0;
this.forEach(map => {
if (map.isRoot()) id = map.finalize(id + 1);
if (map.edge && map.edge.name) {
let edge = map.edge;
let list = this.transitions.get(edge.name);
if (list === undefined) {
this.transitions.set(edge.name, [edge]);
} else {
list.push(edge);
}
}
});
this.markers.sort((a, b) => b.time - a.time);
}
at(index) {
return this.values[index]
}
isEmpty() {
return this.size() == 0
}
size() {
return this.values.length
}
first() {
return this.values.first()
}
last() {
return this.values.last()
}
duration() {
return this.last().time - this.first().time
}
forEachChunkSize(count, fn) {
const increment = this.duration() / count;
let currentTime = this.first().time + increment;
let index = 0;
for (let i = 0; i < count; i++) {
let nextIndex = this.find(currentTime, index);
let nextTime = currentTime + increment;
fn(index, nextIndex, currentTime, nextTime);
index = nextIndex
currentTime = nextTime;
}
}
chunkSizes(count) {
let chunks = [];
this.forEachChunkSize(count, (start, end) => chunks.push(end - start));
return chunks;
}
chunks(count) {
let chunks = [];
let emptyMarkers = [];
this.forEachChunkSize(count, (start, end, startTime, endTime) => {
let items = this.values.slice(start, end);
let markers = this.markersAt(startTime, endTime);
chunks.push(new Chunk(chunks.length, startTime, endTime, items, markers));
});
return chunks;
}
range(start, end) {
const first = this.find(start);
if (first < 0) return [];
const last = this.find(end, first);
return this.values.slice(first, last);
}
find(time, offset = 0) {
return this.basicFind(this.values, each => each.time - time, offset);
}
markersAt(startTime, endTime) {
let start = this.basicFind(this.markers, each => each.time - startTime);
let end = this.basicFind(this.markers, each => each.time - endTime, start);
return this.markers.slice(start, end);
}
basicFind(array, cmp, offset = 0) {
let min = offset;
let max = array.length;
while (min < max) {
let mid = min + Math.floor((max - min) / 2);
let result = cmp(array[mid]);
if (result > 0) {
max = mid - 1;
} else {
min = mid + 1;
}
}
return min;
}
count(filter) {
return this.values.reduce((sum, each) => {
return sum + (filter(each) ? 1 : 0);
}, 0);
}
filter(predicate) {
return this.values.filter(predicate);
}
filterUniqueTransitions(filter) {
// Returns a list of Maps whose parent is not in the list.
return this.values.filter(map => {
if (!filter(map)) return false;
let parent = map.parent();
if (!parent) return true;
return !filter(parent);
});
}
depthHistogram() {
return this.values.histogram(each => each.depth);
}
fanOutHistogram() {
return this.values.histogram(each => each.children.length);
}
forEach(fn) {
return this.values.forEach(fn)
}
}
// ===========================================================================
class Chunk {
constructor(index, start, end, items, markers) {
this.index = index;
this.start = start;
this.end = end;
this.items = items;
this.markers = markers
this.height = 0;
}
isEmpty() {
return this.items.length == 0;
}
last() {
return this.at(this.size() - 1);
}
first() {
return this.at(0);
}
at(index) {
return this.items[index];
}
size() {
return this.items.length;
}
yOffset(map) {
// items[0] == oldest map, displayed at the top of the chunk
// items[n-1] == youngest map, displayed at the bottom of the chunk
return (1 - (this.indexOf(map) + 0.5) / this.size()) * this.height;
}
indexOf(map) {
return this.items.indexOf(map);
}
has(map) {
if (this.isEmpty()) return false;
return this.first().time <= map.time && map.time <= this.last().time;
}
next(chunks) {
return this.findChunk(chunks, 1);
}
prev(chunks) {
return this.findChunk(chunks, -1);
}
findChunk(chunks, delta) {
let i = this.index + delta;
let chunk = chunks[i];
while (chunk && chunk.size() == 0) {
i += delta;
chunk = chunks[i]
}
return chunk;
}
getTransitionBreakdown() {
return BreakDown(this.items, map => map.getType())
}
getUniqueTransitions() {
// Filter out all the maps that have parents within the same chunk.
return this.items.filter(map => !map.parent() || !this.has(map.parent()));
}
}
// ===========================================================================
function BreakDown(list, map_fn) {
if (map_fn === void 0) {
map_fn = each => each;
}
let breakdown = {__proto__:null};
list.forEach(each=> {
let type = map_fn(each);
let v = breakdown[type];
breakdown[type] = (v | 0) + 1
});
return Object.entries(breakdown)
.sort((a,b) => a[1] - b[1]);
}
// ===========================================================================
class ArgumentsProcessor extends BaseArgumentsProcessor {
getArgsDispatch() {
return {
'--range': ['range', 'auto,auto',
'Specify the range limit as [start],[end]'
],
'--source-map': ['sourceMap', null,
'Specify the source map that should be used for output'
]
};
}
getDefaultResults() {
return {
logFileName: 'v8.log',
range: 'auto,auto',
};
}
}
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