diff --git a/tools/system-analyzer/index.mjs b/tools/system-analyzer/index.mjs
index e339bc1d13..4ead408cfa 100644
--- a/tools/system-analyzer/index.mjs
+++ b/tools/system-analyzer/index.mjs
@@ -8,17 +8,19 @@ import { IcLogEvent } from "./ic-processor.mjs";
import { State } from "./app-model.mjs";
import { MapProcessor, MapLogEvent } from "./map-processor.mjs";
import { SelectTimeEvent } from "./events.mjs";
+import { SourcePositionLogEvent } from "./event.mjs";
import { $ } from "./helper.mjs";
import "./ic-panel.mjs";
import "./timeline-panel.mjs";
import "./map-panel.mjs";
import "./log-file-reader.mjs";
+import "./source-panel.mjs";
class App {
#state;
#view;
#navigation;
constructor(fileReaderId, mapPanelId, timelinePanelId,
- icPanelId, mapTrackId, icTrackId) {
+ icPanelId, mapTrackId, icTrackId, sourcePanelId) {
this.#view = {
logFileReader: $(fileReaderId),
icPanel: $(icPanelId),
@@ -26,6 +28,7 @@ class App {
timelinePanel: $(timelinePanelId),
mapTrack: $(mapTrackId),
icTrack: $(icTrackId),
+ sourcePanel: $(sourcePanelId)
};
this.#state = new State();
this.#navigation = new Navigation(this.#state, this.#view);
@@ -53,6 +56,8 @@ class App {
this.showMapEntries(e.entries);
} else if (e.entries[0] instanceof IcLogEvent) {
this.showIcEntries(e.entries);
+ } else if (e.entries[0] instanceof SourcePositionLogEvent) {
+ this.showSourcePositionEntries(e.entries);
} else {
console.error("Undefined selection!");
}
@@ -65,6 +70,10 @@ class App {
this.#state.selectedIcLogEvents = entries;
this.#view.icPanel.selectedLogEvents = this.#state.selectedIcLogEvents;
}
+ showSourcePositionEntries(entries) {
+ //TODO(zcankara) Handle multiple source position selection events
+ this.#view.sourcePanel.selectedSourcePositions = entries;
+ }
handleTimeRangeSelect(e) {
this.selectTimeRange(e.start, e.end);
@@ -74,16 +83,12 @@ class App {
this.selectMapLogEvent(e.entry);
} else if (e.entry instanceof IcLogEvent) {
this.selectICLogEvent(e.entry);
- } else if (typeof e.entry === 'string') {
+ } else if (e.entry instanceof SourcePositionLogEvent) {
this.selectSourcePositionEvent(e.entry);
} else {
console.log("undefined");
}
}
- handleClickSourcePositions(e) {
- //TODO(zcankara) Handle source position
- console.log("Entry containing source position: ", e.entries);
- }
selectTimeRange(start, end) {
this.#state.timeSelection.start = start;
this.#state.timeSelection.end = end;
@@ -103,8 +108,11 @@ class App {
this.#view.icPanel.selectedLogEvents = [entry];
}
selectSourcePositionEvent(sourcePositions) {
+ if (!sourcePositions.script) return;
console.log("source positions: ", sourcePositions);
+ this.#view.sourcePanel.selectedSourcePositions = [sourcePositions];
}
+
handleFileUpload(e) {
this.restartApp();
$("#container").className = "initial";
diff --git a/tools/system-analyzer/map-panel/map-details-template.html b/tools/system-analyzer/map-panel/map-details-template.html
index b4b1541fd8..6d1b268c5d 100644
--- a/tools/system-analyzer/map-panel/map-details-template.html
+++ b/tools/system-analyzer/map-panel/map-details-template.html
@@ -6,7 +6,8 @@ found in the LICENSE file. -->
Map Details
+
diff --git a/tools/system-analyzer/map-panel/map-details.mjs b/tools/system-analyzer/map-panel/map-details.mjs
index dddccf7d8b..35a3443d67 100644
--- a/tools/system-analyzer/map-panel/map-details.mjs
+++ b/tools/system-analyzer/map-panel/map-details.mjs
@@ -3,6 +3,7 @@
// found in the LICENSE file.
import { V8CustomElement, defineCustomElement } from "../helper.mjs";
import { FocusEvent } from "../events.mjs";
+import { SourcePositionLogEvent } from '../event.mjs';
defineCustomElement(
"./map-panel/map-details",
@@ -10,8 +11,8 @@ defineCustomElement(
class MapDetails extends V8CustomElement {
constructor() {
super(templateText);
- this.mapDetails.addEventListener("click", () =>
- this.handleClickSourcePositions()
+ this.#filePositionNode.addEventListener("click", e =>
+ this.handleFilePositionClick(e)
);
this.selectedMap = undefined;
}
@@ -19,23 +20,44 @@ defineCustomElement(
return this.$("#mapDetails");
}
+ get #filePositionNode() {
+ return this.$("#filePositionNode");
+ }
+
setSelectedMap(value) {
this.selectedMap = value;
}
set mapDetails(map) {
let details = "";
+ let clickableDetails = "";
if (map) {
- details += "ID: " + map.id;
- details += "\nSource location: " + map.filePosition;
+ clickableDetails += "ID: " + map.id;
+ clickableDetails += "\nSource location: " + map.filePosition;
details += "\n" + map.description;
this.setSelectedMap(map);
}
+ this.#filePositionNode.innerText = clickableDetails;
+ this.#filePositionNode.classList.add("clickable");
this.mapDetails.innerText = details;
}
- handleClickSourcePositions() {
- this.dispatchEvent(new FocusEvent(this.selectedMap.filePosition));
+ handleFilePositionClick() {
+ let filePosition =
+ this.createSourcePositionLogEvent(
+ this.selectedMap.type, this.selectedMap.time,
+ this.selectedMap.filePosition, this.selectedMap.script);
+ this.dispatchEvent(new FocusEvent(filePosition));
+ }
+
+ createSourcePositionLogEvent(type, time, filePositionLine, script) {
+ // remove token
+ if (!(/\s/.test(filePositionLine))) return;
+ filePositionLine = filePositionLine.split(' ');
+ let [file, line, col] = filePositionLine[1].split(':');
+ let filePosition = new SourcePositionLogEvent(type, time,
+ file, line, col, script);
+ return filePosition
}
}
);
diff --git a/tools/system-analyzer/map-processor.mjs b/tools/system-analyzer/map-processor.mjs
index 17a4b01112..04a47e4680 100644
--- a/tools/system-analyzer/map-processor.mjs
+++ b/tools/system-analyzer/map-processor.mjs
@@ -54,6 +54,10 @@ class MapProcessor extends LogReader {
],
processor: this.processV8Version
},
+ 'script-source': {
+ parsers: [parseInt, parseString, parseString],
+ processor: this.processScriptSource
+ },
'code-move': {
parsers: [parseInt, parseInt],
'sfi-move':
@@ -184,6 +188,10 @@ class MapProcessor extends LogReader {
}
}
+ processScriptSource(scriptId, url, source) {
+ this.#profile.addScriptSource(scriptId, url, source);
+ }
+
processCodeMove(from, to) {
this.#profile.moveCode(from, to);
}
@@ -211,6 +219,12 @@ class MapProcessor extends LogReader {
}
return entry + ':' + line + ':' + column;
}
+ processFileName(filePositionLine) {
+ if (!(/\s/.test(filePositionLine))) return;
+ filePositionLine = filePositionLine.split(' ');
+ let file = filePositionLine[1].split(':')[0];
+ return file;
+ }
processMap(type, time, from, to, pc, line, column, reason, name) {
let time_ = parseInt(time);
@@ -219,6 +233,8 @@ class MapProcessor extends LogReader {
let to_ = this.getExistingMap(to, time_);
let edge = new Edge(type, name, reason, time, from_, to_);
to_.filePosition = this.formatPC(pc, line, column);
+ let fileName = this.processFileName(to_.filePosition);
+ to_.script = this.getScript(fileName);
edge.finishSetup();
}
@@ -254,6 +270,10 @@ class MapProcessor extends LogReader {
};
return map;
}
+
+ getScript(url) {
+ return this.#profile.getScript(url);
+ }
}
// ===========================================================================
@@ -268,6 +288,7 @@ class MapLogEvent extends Event {
leftId = 0;
rightId = 0;
filePosition = '';
+ script = '';
id = -1;
constructor(id, time) {
if (!time) throw new Error('Invalid time');
diff --git a/tools/system-analyzer/source-panel-template.html b/tools/system-analyzer/source-panel-template.html
new file mode 100644
index 0000000000..d3b77b27bc
--- /dev/null
+++ b/tools/system-analyzer/source-panel-template.html
@@ -0,0 +1,34 @@
+
+
+
+
diff --git a/tools/system-analyzer/source-panel.mjs b/tools/system-analyzer/source-panel.mjs
new file mode 100644
index 0000000000..be0fa266eb
--- /dev/null
+++ b/tools/system-analyzer/source-panel.mjs
@@ -0,0 +1,72 @@
+// Copyright 2020 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.
+import { V8CustomElement, defineCustomElement } from "./helper.mjs";
+
+defineCustomElement(
+ "source-panel",
+ (templateText) =>
+ class SourcePanel extends V8CustomElement {
+ #selectedSourcePositions;
+ constructor() {
+ super(templateText);
+ }
+ get script() {
+ return this.$('#script');
+ }
+ get scriptNode() {
+ return this.$('.scriptNode');
+ }
+ set script(script) {
+ this.renderSourcePanel(script);
+ }
+ set selectedSourcePositions(sourcePositions) {
+ this.#selectedSourcePositions = sourcePositions;
+ this.renderSourcePanelSelectedHighlight();
+ }
+ get selectedSourcePositions() {
+ return this.#selectedSourcePositions;
+ }
+ highlightSourcePosition(line, col, script) {
+ //TODO(zcankara) change setting source to support multiple files
+ this.script = script;
+ let codeNodes = this.scriptNode.children;
+ for (let index = 1; index <= codeNodes.length; index++) {
+ if (index != line) continue;
+ let lineText = codeNodes[index - 1].innerHTML;
+ for (let char = 1; char <= lineText.length; char++) {
+ if (char != col) continue;
+ let target = char - 1;
+ codeNodes[line - 1].innerHTML = lineText.slice(0, target) +
+ "
" +
+ lineText.slice(target, lineText.length);
+ }
+ }
+ }
+ createScriptNode() {
+ let scriptNode = document.createElement("pre");
+ scriptNode.classList.add('scriptNode');
+ return scriptNode;
+ }
+ renderSourcePanel(source) {
+ let scriptNode = this.createScriptNode();
+ let sourceLines = source.split("\n");
+ for (let line = 1; line <= sourceLines.length; line++) {
+ let codeNode = document.createElement("code");
+ codeNode.classList.add("line" + line);
+ codeNode.innerHTML = sourceLines[line - 1] + "\n";
+ scriptNode.appendChild(codeNode);
+ }
+ let oldScriptNode = this.script.childNodes[1];
+ this.script.replaceChild(scriptNode, oldScriptNode);
+ }
+ renderSourcePanelSelectedHighlight() {
+ for (const sourcePosition of this.selectedSourcePositions) {
+ let line = sourcePosition.line;
+ let col = sourcePosition.col;
+ let script = sourcePosition.script;
+ this.highlightSourcePosition(line, col, script);
+ }
+ }
+ }
+);