[tools] Make sure system analyzer works in FF and Safari
- Avoid private fields (using _xyz instead of #xyz) - Avoid static fields on classes These are temporary changes that eventually will be reverted once FireFox and Safari support it. Bug: v8:10644 Change-Id: I3d757251eaedef92751970d866882c3d912c7e3e Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2464924 Commit-Queue: Camillo Bruni <cbruni@chromium.org> Reviewed-by: Sathya Gunasekaran <gsathya@chromium.org> Cr-Commit-Position: refs/heads/master@{#70607}
This commit is contained in:
Camillo Bruni
Commit Bot
parent
aaeca0dc53
commit
4029804155
@ -56,13 +56,13 @@ export class Script {
|
||||
let sourcePosition = this.lineToColumn.get(line)?.get(column);
|
||||
if (sourcePosition === undefined) {
|
||||
sourcePosition = new SourcePosition(this, line, column, )
|
||||
this.#addSourcePosition(line, column, sourcePosition);
|
||||
this._addSourcePosition(line, column, sourcePosition);
|
||||
}
|
||||
sourcePosition.addEntry(entry);
|
||||
return sourcePosition;
|
||||
}
|
||||
|
||||
#addSourcePosition(line, column, sourcePosition) {
|
||||
_addSourcePosition(line, column, sourcePosition) {
|
||||
let columnToSourcePosition;
|
||||
if (this.lineToColumn.has(line)) {
|
||||
columnToSourcePosition = this.lineToColumn.get(line);
|
||||
|
||||
@ -3,100 +3,100 @@
|
||||
// found in the LICENSE file.
|
||||
|
||||
class State {
|
||||
#timeSelection = { start: 0, end: Infinity };
|
||||
#map;
|
||||
#ic;
|
||||
#selectedMapLogEntries;
|
||||
#selectedIcLogEntries;
|
||||
#selectedSourcePositions;
|
||||
#nofChunks;
|
||||
#chunks;
|
||||
#icTimeline;
|
||||
#mapTimeline;
|
||||
#minStartTime = Number.POSITIVE_INFINITY;
|
||||
#maxEndTime = Number.NEGATIVE_INFINITY;
|
||||
_timeSelection = { start: 0, end: Infinity };
|
||||
_map;
|
||||
_ic;
|
||||
_selectedMapLogEntries;
|
||||
_selectedIcLogEntries;
|
||||
_selectedSourcePositions;
|
||||
_nofChunks;
|
||||
_chunks;
|
||||
_icTimeline;
|
||||
_mapTimeline;
|
||||
_minStartTime = Number.POSITIVE_INFINITY;
|
||||
_maxEndTime = Number.NEGATIVE_INFINITY;
|
||||
get minStartTime() {
|
||||
return this.#minStartTime;
|
||||
return this._minStartTime;
|
||||
}
|
||||
get maxEndTime() {
|
||||
return this.#maxEndTime;
|
||||
return this._maxEndTime;
|
||||
}
|
||||
#updateTimeRange(timeline) {
|
||||
this.#minStartTime = Math.min(this.#minStartTime, timeline.startTime);
|
||||
this.#maxEndTime = Math.max(this.#maxEndTime, timeline.endTime);
|
||||
_updateTimeRange(timeline) {
|
||||
this._minStartTime = Math.min(this._minStartTime, timeline.startTime);
|
||||
this._maxEndTime = Math.max(this._maxEndTime, timeline.endTime);
|
||||
}
|
||||
get mapTimeline() {
|
||||
return this.#mapTimeline;
|
||||
return this._mapTimeline;
|
||||
}
|
||||
set mapTimeline(timeline) {
|
||||
this.#updateTimeRange(timeline);
|
||||
timeline.startTime = this.#minStartTime;
|
||||
timeline.endTime = this.#maxEndTime;
|
||||
this.#mapTimeline = timeline;
|
||||
this._updateTimeRange(timeline);
|
||||
timeline.startTime = this._minStartTime;
|
||||
timeline.endTime = this._maxEndTime;
|
||||
this._mapTimeline = timeline;
|
||||
}
|
||||
set icTimeline(timeline) {
|
||||
this.#updateTimeRange(timeline);
|
||||
timeline.startTime = this.#minStartTime;
|
||||
timeline.endTime = this.#maxEndTime;
|
||||
this.#icTimeline = timeline;
|
||||
this._updateTimeRange(timeline);
|
||||
timeline.startTime = this._minStartTime;
|
||||
timeline.endTime = this._maxEndTime;
|
||||
this._icTimeline = timeline;
|
||||
}
|
||||
get icTimeline() {
|
||||
return this.#icTimeline;
|
||||
return this._icTimeline;
|
||||
}
|
||||
set chunks(value) {
|
||||
//TODO(zcankara) split up between maps and ics, and every timeline track
|
||||
this.#chunks = value;
|
||||
this._chunks = value;
|
||||
}
|
||||
get chunks() {
|
||||
//TODO(zcankara) split up between maps and ics, and every timeline track
|
||||
return this.#chunks;
|
||||
return this._chunks;
|
||||
}
|
||||
get nofChunks() {
|
||||
return this.#nofChunks;
|
||||
return this._nofChunks;
|
||||
}
|
||||
set nofChunks(count) {
|
||||
this.#nofChunks = count;
|
||||
this._nofChunks = count;
|
||||
}
|
||||
get map() {
|
||||
//TODO(zcankara) rename as selectedMapEvents, array of selected events
|
||||
return this.#map;
|
||||
return this._map;
|
||||
}
|
||||
set map(value) {
|
||||
//TODO(zcankara) rename as selectedMapEvents, array of selected events
|
||||
if (!value) return;
|
||||
this.#map = value;
|
||||
this._map = value;
|
||||
}
|
||||
get ic() {
|
||||
//TODO(zcankara) rename selectedICEvents, array of selected events
|
||||
return this.#ic;
|
||||
return this._ic;
|
||||
}
|
||||
set ic(value) {
|
||||
//TODO(zcankara) rename selectedIcEvents, array of selected events
|
||||
if (!value) return;
|
||||
this.#ic = value;
|
||||
this._ic = value;
|
||||
}
|
||||
get selectedMapLogEntries() {
|
||||
return this.#selectedMapLogEntries;
|
||||
return this._selectedMapLogEntries;
|
||||
}
|
||||
set selectedMapLogEntries(value) {
|
||||
if (!value) return;
|
||||
this.#selectedMapLogEntries = value;
|
||||
this._selectedMapLogEntries = value;
|
||||
}
|
||||
get selectedSourcePositions() {
|
||||
return this.#selectedSourcePositions;
|
||||
return this._selectedSourcePositions;
|
||||
}
|
||||
set selectedSourcePositions(value) {
|
||||
this.#selectedSourcePositions = value;
|
||||
this._selectedSourcePositions = value;
|
||||
}
|
||||
get selectedIcLogEntries() {
|
||||
return this.#selectedIcLogEntries;
|
||||
return this._selectedIcLogEntries;
|
||||
}
|
||||
set selectedIcLogEntries(value) {
|
||||
if (!value) return;
|
||||
this.#selectedIcLogEntries = value;
|
||||
this._selectedIcLogEntries = value;
|
||||
}
|
||||
get timeSelection() {
|
||||
return this.#timeSelection;
|
||||
return this._timeSelection;
|
||||
}
|
||||
get entries() {
|
||||
if (!this.map) return {};
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
// found in the LICENSE file.
|
||||
|
||||
class SelectionEvent extends CustomEvent {
|
||||
static name = "showentries";
|
||||
// TODO: turn into static class fields once Safari supports it.
|
||||
static get name() { return "showentries"; }
|
||||
constructor(entries) {
|
||||
super(SelectionEvent.name, { bubbles: true, composed: true });
|
||||
if (!Array.isArray(entries) || entries.length == 0) {
|
||||
@ -14,7 +15,7 @@ class SelectionEvent extends CustomEvent {
|
||||
}
|
||||
|
||||
class FocusEvent extends CustomEvent {
|
||||
static name = "showentrydetail";
|
||||
static get name() { return "showentrydetail"; }
|
||||
constructor(entry) {
|
||||
super(FocusEvent.name, { bubbles: true, composed: true });
|
||||
this.entry = entry;
|
||||
@ -22,7 +23,7 @@ class FocusEvent extends CustomEvent {
|
||||
}
|
||||
|
||||
class SelectTimeEvent extends CustomEvent {
|
||||
static name = 'timerangeselect';
|
||||
static get name() { return 'timerangeselect'; }
|
||||
constructor(start, end) {
|
||||
super(SelectTimeEvent.name, { bubbles: true, composed: true });
|
||||
this.start = start;
|
||||
@ -31,7 +32,7 @@ class SelectTimeEvent extends CustomEvent {
|
||||
}
|
||||
|
||||
class SynchronizeSelectionEvent extends CustomEvent {
|
||||
static name = 'syncselection';
|
||||
static get name() { return 'syncselection'; }
|
||||
constructor(start, end) {
|
||||
super(SynchronizeSelectionEvent.name, { bubbles: true, composed: true });
|
||||
this.start = start;
|
||||
|
||||
@ -10,8 +10,8 @@ import { IcLogEntry } from './log/ic.mjs';
|
||||
|
||||
defineCustomElement('ic-panel', (templateText) =>
|
||||
class ICPanel extends V8CustomElement {
|
||||
#selectedLogEntries;
|
||||
#timeline;
|
||||
_selectedLogEntries;
|
||||
_timeline;
|
||||
constructor() {
|
||||
super(templateText);
|
||||
this.initGroupKeySelect();
|
||||
@ -22,8 +22,8 @@ defineCustomElement('ic-panel', (templateText) =>
|
||||
}
|
||||
set timeline(value) {
|
||||
console.assert(value !== undefined, "timeline undefined!");
|
||||
this.#timeline = value;
|
||||
this.selectedLogEntries = this.#timeline.all;
|
||||
this._timeline = value;
|
||||
this.selectedLogEntries = this._timeline.all;
|
||||
this.updateCount();
|
||||
}
|
||||
get groupKey() {
|
||||
@ -47,13 +47,13 @@ defineCustomElement('ic-panel', (templateText) =>
|
||||
}
|
||||
|
||||
set selectedLogEntries(value) {
|
||||
this.#selectedLogEntries = value;
|
||||
this._selectedLogEntries = value;
|
||||
this.updateCount();
|
||||
this.updateTable();
|
||||
}
|
||||
|
||||
updateCount() {
|
||||
this.count.innerHTML = this.#selectedLogEntries.length;
|
||||
this.count.innerHTML = this._selectedLogEntries.length;
|
||||
}
|
||||
|
||||
updateTable(event) {
|
||||
@ -61,7 +61,7 @@ defineCustomElement('ic-panel', (templateText) =>
|
||||
let key = select.options[select.selectedIndex].text;
|
||||
let tableBody = this.tableBody;
|
||||
this.removeAllChildren(tableBody);
|
||||
let groups = Group.groupBy(this.#selectedLogEntries, key, true);
|
||||
let groups = Group.groupBy(this._selectedLogEntries, key, true);
|
||||
this.render(groups, tableBody);
|
||||
}
|
||||
|
||||
|
||||
@ -10,7 +10,6 @@ found in the LICENSE file. -->
|
||||
<title>Indicium</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
|
||||
<!-- <link rel="icon" type="image/png" href="/images/favicon.png"/> -->
|
||||
<script type="module" src="index.mjs"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./index.css">
|
||||
<style>
|
||||
.theme-switch-wrapper {
|
||||
@ -80,8 +79,8 @@ found in the LICENSE file. -->
|
||||
import { App } from './index.mjs';
|
||||
|
||||
globalThis.app = new App("#log-file-reader", "#map-panel",
|
||||
"#timeline-panel", "#ic-panel", "#map-track", "#ic-track",
|
||||
"#source-panel");
|
||||
"#timeline-panel", "#ic-panel", "#map-track", "#ic-track",
|
||||
"#source-panel");
|
||||
</script>
|
||||
</head>
|
||||
|
||||
|
||||
@ -18,12 +18,12 @@ import "./source-panel.mjs";
|
||||
|
||||
|
||||
class App {
|
||||
#state;
|
||||
#view;
|
||||
#navigation;
|
||||
_state;
|
||||
_view;
|
||||
_navigation;
|
||||
constructor(fileReaderId, mapPanelId, timelinePanelId,
|
||||
icPanelId, mapTrackId, icTrackId, sourcePanelId) {
|
||||
this.#view = {
|
||||
this._view = {
|
||||
logFileReader: $(fileReaderId),
|
||||
icPanel: $(icPanelId),
|
||||
mapPanel: $(mapPanelId),
|
||||
@ -32,19 +32,19 @@ class App {
|
||||
icTrack: $(icTrackId),
|
||||
sourcePanel: $(sourcePanelId)
|
||||
};
|
||||
this.#state = new State();
|
||||
this.#navigation = new Navigation(this.#state, this.#view);
|
||||
this._state = new State();
|
||||
this._navigation = new Navigation(this._state, this._view);
|
||||
document.addEventListener('keydown',
|
||||
e => this.#navigation.handleKeyDown(e));
|
||||
e => this._navigation.handleKeyDown(e));
|
||||
this.toggleSwitch = $('.theme-switch input[type="checkbox"]');
|
||||
this.toggleSwitch.addEventListener("change", (e) => this.switchTheme(e));
|
||||
this.#view.logFileReader.addEventListener("fileuploadstart", (e) =>
|
||||
this._view.logFileReader.addEventListener("fileuploadstart", (e) =>
|
||||
this.handleFileUpload(e)
|
||||
);
|
||||
this.#view.logFileReader.addEventListener("fileuploadend", (e) =>
|
||||
this._view.logFileReader.addEventListener("fileuploadend", (e) =>
|
||||
this.handleDataUpload(e)
|
||||
);
|
||||
Object.entries(this.#view).forEach(([_, panel]) => {
|
||||
Object.entries(this._view).forEach(([_, panel]) => {
|
||||
panel.addEventListener(SelectionEvent.name,
|
||||
e => this.handleShowEntries(e));
|
||||
panel.addEventListener(FocusEvent.name,
|
||||
@ -65,16 +65,16 @@ class App {
|
||||
}
|
||||
}
|
||||
showMapEntries(entries) {
|
||||
this.#state.selectedMapLogEntries = entries;
|
||||
this.#view.mapPanel.selectedMapLogEntries = this.#state.selectedMapLogEntries;
|
||||
this._state.selectedMapLogEntries = entries;
|
||||
this._view.mapPanel.selectedMapLogEntries = this.#state.selectedMapLogEntries;
|
||||
}
|
||||
showIcEntries(entries) {
|
||||
this.#state.selectedIcLogEntries = entries;
|
||||
this.#view.icPanel.selectedLogEntries = this.#state.selectedIcLogEntries;
|
||||
this._state.selectedIcLogEntries = entries;
|
||||
this._view.icPanel.selectedLogEntries = this.#state.selectedIcLogEntries;
|
||||
}
|
||||
showSourcePositionEntries(entries) {
|
||||
//TODO(zcankara) Handle multiple source position selection events
|
||||
this.#view.sourcePanel.selectedSourcePositions = entries;
|
||||
this._view.sourcePanel.selectedSourcePositions = entries;
|
||||
}
|
||||
|
||||
handleTimeRangeSelect(e) {
|
||||
@ -92,6 +92,15 @@ class App {
|
||||
}
|
||||
}
|
||||
selectTimeRange(start, end) {
|
||||
<<<<<<< HEAD
|
||||
this._state.timeSelection.start = start;
|
||||
this._state.timeSelection.end = end;
|
||||
this._state.icTimeline.selectTimeRange(start, end);
|
||||
this._state.mapTimeline.selectTimeRange(start, end);
|
||||
this._view.mapPanel.selectedMapLogEntrys =
|
||||
this._state.mapTimeline.selection;
|
||||
this._view.icPanel.selectedLogEntrys = this._state.icTimeline.selection;
|
||||
=======
|
||||
this.#state.timeSelection.start = start;
|
||||
this.#state.timeSelection.end = end;
|
||||
this.#state.icTimeline.selectTimeRange(start, end);
|
||||
@ -99,19 +108,25 @@ class App {
|
||||
this.#view.mapPanel.selectedMapLogEntries =
|
||||
this.#state.mapTimeline.selection;
|
||||
this.#view.icPanel.selectedLogEntries = this.#state.icTimeline.selection;
|
||||
>>>>>>> af96ca3c188229645eb0675363ae34180de206b3
|
||||
}
|
||||
selectMapLogEntry(entry) {
|
||||
this.#state.map = entry;
|
||||
this.#view.mapTrack.selectedEntry = entry;
|
||||
this.#view.mapPanel.map = entry;
|
||||
this._state.map = entry;
|
||||
this._view.mapTrack.selectedEntry = entry;
|
||||
this._view.mapPanel.map = entry;
|
||||
}
|
||||
selectICLogEntry(entry) {
|
||||
<<<<<<< HEAD
|
||||
this._state.ic = entry;
|
||||
this._view.icPanel.selectedLogEntrys = [entry];
|
||||
=======
|
||||
this.#state.ic = entry;
|
||||
this.#view.icPanel.selectedLogEntries = [entry];
|
||||
>>>>>>> af96ca3c188229645eb0675363ae34180de206b3
|
||||
}
|
||||
selectSourcePosition(sourcePositions) {
|
||||
if (!sourcePositions.script) return;
|
||||
this.#view.sourcePanel.selectedSourcePositions = [sourcePositions];
|
||||
this._view.sourcePanel.selectedSourcePositions = [sourcePositions];
|
||||
}
|
||||
|
||||
handleFileUpload(e) {
|
||||
@ -120,8 +135,8 @@ class App {
|
||||
}
|
||||
|
||||
restartApp() {
|
||||
this.#state = new State();
|
||||
this.#navigation = new Navigation(this.#state, this.#view);
|
||||
this._state = new State();
|
||||
this._navigation = new Navigation(this._state, this._view);
|
||||
}
|
||||
|
||||
// Event log processing
|
||||
@ -142,23 +157,23 @@ class App {
|
||||
const icTimeline = processor.icTimeline;
|
||||
//TODO(zcankara) Make sure only one instance of src event map ic id match
|
||||
// Load map log events timeline.
|
||||
this.#state.mapTimeline = mapTimeline;
|
||||
this._state.mapTimeline = mapTimeline;
|
||||
// Transitions must be set before timeline for stats panel.
|
||||
this.#view.mapPanel.transitions = this.#state.mapTimeline.transitions;
|
||||
this.#view.mapTrack.data = mapTimeline;
|
||||
this.#state.chunks = this.#view.mapTrack.chunks;
|
||||
this.#view.mapPanel.timeline = mapTimeline;
|
||||
this._view.mapPanel.transitions = this._state.mapTimeline.transitions;
|
||||
this._view.mapTrack.data = mapTimeline;
|
||||
this._state.chunks = this._view.mapTrack.chunks;
|
||||
this._view.mapPanel.timeline = mapTimeline;
|
||||
// Load ic log events timeline.
|
||||
this.#state.icTimeline = icTimeline;
|
||||
this.#view.icPanel.timeline = icTimeline;
|
||||
this.#view.icTrack.data = icTimeline;
|
||||
this.#view.sourcePanel.data = processor.scripts
|
||||
this._state.icTimeline = icTimeline;
|
||||
this._view.icPanel.timeline = icTimeline;
|
||||
this._view.icTrack.data = icTimeline;
|
||||
this._view.sourcePanel.data = processor.scripts
|
||||
this.fileLoaded = true;
|
||||
}
|
||||
|
||||
refreshTimelineTrackView() {
|
||||
this.#view.mapTrack.data = this.#state.mapTimeline;
|
||||
this.#view.icTrack.data = this.#state.icTimeline;
|
||||
this._view.mapTrack.data = this._state.mapTimeline;
|
||||
this._view.icTrack.data = this._state.icTimeline;
|
||||
}
|
||||
|
||||
switchTheme(event) {
|
||||
@ -172,10 +187,10 @@ class App {
|
||||
}
|
||||
|
||||
class Navigation {
|
||||
#view;
|
||||
_view;
|
||||
constructor(state, view) {
|
||||
this.state = state;
|
||||
this.#view = view;
|
||||
this._view = view;
|
||||
}
|
||||
get map() {
|
||||
return this.state.map
|
||||
@ -187,34 +202,34 @@ class Navigation {
|
||||
return this.state.chunks
|
||||
}
|
||||
increaseTimelineResolution() {
|
||||
this.#view.timelinePanel.nofChunks *= 1.5;
|
||||
this._view.timelinePanel.nofChunks *= 1.5;
|
||||
this.state.nofChunks *= 1.5;
|
||||
}
|
||||
decreaseTimelineResolution() {
|
||||
this.#view.timelinePanel.nofChunks /= 1.5;
|
||||
this._view.timelinePanel.nofChunks /= 1.5;
|
||||
this.state.nofChunks /= 1.5;
|
||||
}
|
||||
selectNextEdge() {
|
||||
if (!this.map) return;
|
||||
if (this.map.children.length != 1) return;
|
||||
this.map = this.map.children[0].to;
|
||||
this.#view.mapTrack.selectedEntry = this.map;
|
||||
this._view.mapTrack.selectedEntry = this.map;
|
||||
this.updateUrl();
|
||||
this.#view.mapPanel.map = this.map;
|
||||
this._view.mapPanel.map = this.map;
|
||||
}
|
||||
selectPrevEdge() {
|
||||
if (!this.map) return;
|
||||
if (!this.map.parent()) return;
|
||||
this.map = this.map.parent();
|
||||
this.#view.mapTrack.selectedEntry = this.map;
|
||||
this._view.mapTrack.selectedEntry = this.map;
|
||||
this.updateUrl();
|
||||
this.#view.mapPanel.map = this.map;
|
||||
this._view.mapPanel.map = this.map;
|
||||
}
|
||||
selectDefaultMap() {
|
||||
this.map = this.chunks[0].at(0);
|
||||
this.#view.mapTrack.selectedEntry = this.map;
|
||||
this._view.mapTrack.selectedEntry = this.map;
|
||||
this.updateUrl();
|
||||
this.#view.mapPanel.map = this.map;
|
||||
this._view.mapPanel.map = this.map;
|
||||
}
|
||||
moveInChunks(next) {
|
||||
if (!this.map) return this.selectDefaultMap();
|
||||
@ -229,9 +244,9 @@ class Navigation {
|
||||
if (!chunk) return;
|
||||
index = Math.min(index, chunk.size() - 1);
|
||||
this.map = chunk.at(index);
|
||||
this.#view.mapTrack.selectedEntry = this.map;
|
||||
this._view.mapTrack.selectedEntry = this.map;
|
||||
this.updateUrl();
|
||||
this.#view.mapPanel.map = this.map;
|
||||
this._view.mapPanel.map = this.map;
|
||||
}
|
||||
moveInChunk(delta) {
|
||||
if (!this.map) return this.selectDefaultMap();
|
||||
@ -247,9 +262,9 @@ class Navigation {
|
||||
map = chunk.at(index);
|
||||
}
|
||||
this.map = map;
|
||||
this.#view.mapTrack.selectedEntry = this.map;
|
||||
this._view.mapTrack.selectedEntry = this.map;
|
||||
this.updateUrl();
|
||||
this.#view.mapPanel.map = this.map;
|
||||
this._view.mapPanel.map = this.map;
|
||||
}
|
||||
updateUrl() {
|
||||
let entries = this.state.entries;
|
||||
|
||||
@ -54,18 +54,18 @@ export class IcLogEntry extends LogEntry {
|
||||
this.file = parts[offset];
|
||||
return offset;
|
||||
}
|
||||
|
||||
static get propertyNames() {
|
||||
return [
|
||||
'type',
|
||||
'category',
|
||||
'functionName',
|
||||
'filePosition',
|
||||
'state',
|
||||
'key',
|
||||
'map',
|
||||
'reason',
|
||||
'file'
|
||||
];
|
||||
}
|
||||
|
||||
static get propertyNames() {
|
||||
return [
|
||||
'type',
|
||||
'category',
|
||||
'functionName',
|
||||
'filePosition',
|
||||
'state',
|
||||
'key',
|
||||
'map',
|
||||
'reason',
|
||||
'file'
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,18 +3,18 @@
|
||||
// found in the LICENSE file.
|
||||
|
||||
export class LogEntry {
|
||||
#time;
|
||||
#type;
|
||||
_time;
|
||||
_type;
|
||||
constructor(type, time) {
|
||||
//TODO(zcankara) remove type and add empty getters to override
|
||||
this.#time = time;
|
||||
this.#type = type;
|
||||
this._time = time;
|
||||
this._type = type;
|
||||
}
|
||||
get time() {
|
||||
return this.#time;
|
||||
return this._time;
|
||||
}
|
||||
get type() {
|
||||
return this.#type;
|
||||
return this._type;
|
||||
}
|
||||
// Returns an Array of all possible #type values.
|
||||
static get allTypes() {
|
||||
|
||||
@ -38,7 +38,7 @@ class MapLogEntry extends LogEntry {
|
||||
edge = void 0;
|
||||
children = [];
|
||||
depth = 0;
|
||||
#isDeprecated = false;
|
||||
_isDeprecated = false;
|
||||
deprecatedTargets = null;
|
||||
leftId = 0;
|
||||
rightId = 0;
|
||||
@ -81,11 +81,11 @@ class MapLogEntry extends LogEntry {
|
||||
}
|
||||
|
||||
isDeprecated() {
|
||||
return this.#isDeprecated;
|
||||
return this._isDeprecated;
|
||||
}
|
||||
|
||||
deprecate() {
|
||||
this.#isDeprecated = true;
|
||||
this._isDeprecated = true;
|
||||
}
|
||||
|
||||
isRoot() {
|
||||
|
||||
@ -10,7 +10,7 @@ import { defineCustomElement, V8CustomElement } from './helper.mjs';
|
||||
|
||||
defineCustomElement('map-panel', (templateText) =>
|
||||
class MapPanel extends V8CustomElement {
|
||||
#map;
|
||||
_map;
|
||||
constructor() {
|
||||
super(templateText);
|
||||
this.searchBarBtn.addEventListener(
|
||||
@ -63,8 +63,8 @@ defineCustomElement('map-panel', (templateText) =>
|
||||
}
|
||||
|
||||
set map(value) {
|
||||
this.#map = value;
|
||||
this.mapTransitionsPanel.map = this.#map;
|
||||
this._map = value;
|
||||
this.mapTransitionsPanel.map = this._map;
|
||||
}
|
||||
|
||||
handleSearchBar(e) {
|
||||
|
||||
@ -10,7 +10,7 @@ defineCustomElement(
|
||||
class MapDetails extends V8CustomElement {
|
||||
constructor() {
|
||||
super(templateText);
|
||||
this.#filePositionNode.addEventListener("click", e =>
|
||||
this._filePositionNode.addEventListener("click", e =>
|
||||
this.handleFilePositionClick(e)
|
||||
);
|
||||
this.selectedMap = undefined;
|
||||
@ -19,7 +19,7 @@ defineCustomElement(
|
||||
return this.$("#mapDetails");
|
||||
}
|
||||
|
||||
get #filePositionNode() {
|
||||
get _filePositionNode() {
|
||||
return this.$("#filePositionNode");
|
||||
}
|
||||
|
||||
@ -36,8 +36,8 @@ defineCustomElement(
|
||||
details += "\n" + map.description;
|
||||
this.setSelectedMap(map);
|
||||
}
|
||||
this.#filePositionNode.innerText = clickableDetails;
|
||||
this.#filePositionNode.classList.add("clickable");
|
||||
this._filePositionNode.innerText = clickableDetails;
|
||||
this._filePositionNode.classList.add("clickable");
|
||||
this.mapDetails.innerText = details;
|
||||
}
|
||||
|
||||
|
||||
@ -8,8 +8,8 @@ defineCustomElement(
|
||||
"./map-panel/map-transitions",
|
||||
(templateText) =>
|
||||
class MapTransitions extends V8CustomElement {
|
||||
#map;
|
||||
#selectedMapLogEntries;
|
||||
_map;
|
||||
_selectedMapLogEntries;
|
||||
constructor() {
|
||||
super(templateText);
|
||||
this.transitionView.addEventListener("mousemove", (e) =>
|
||||
@ -32,7 +32,7 @@ defineCustomElement(
|
||||
}
|
||||
|
||||
set map(value) {
|
||||
this.#map = value;
|
||||
this._map = value;
|
||||
this.showMap();
|
||||
}
|
||||
|
||||
@ -57,10 +57,10 @@ defineCustomElement(
|
||||
|
||||
showMap() {
|
||||
// Called when a map selected
|
||||
if (this.currentMap === this.#map) return;
|
||||
this.currentMap = this.#map;
|
||||
this.selectedMapLogEntries = [this.#map];
|
||||
this.dispatchEvent(new FocusEvent(this.#map));
|
||||
if (this.currentMap === this._map) return;
|
||||
this.currentMap = this._map;
|
||||
this.selectedMapLogEntries = [this._map];
|
||||
this.dispatchEvent(new FocusEvent(this._map));
|
||||
}
|
||||
|
||||
showMaps() {
|
||||
@ -73,12 +73,12 @@ defineCustomElement(
|
||||
}
|
||||
|
||||
set selectedMapLogEntries(list) {
|
||||
this.#selectedMapLogEntries = list;
|
||||
this._selectedMapLogEntries = list;
|
||||
this.showMaps();
|
||||
}
|
||||
|
||||
get selectedMapLogEntries() {
|
||||
return this.#selectedMapLogEntries;
|
||||
return this._selectedMapLogEntries;
|
||||
}
|
||||
|
||||
addMapAndParentTransitions(map) {
|
||||
|
||||
@ -11,10 +11,10 @@ import { Profile } from "../profile.mjs";
|
||||
// ===========================================================================
|
||||
|
||||
export class Processor extends LogReader {
|
||||
#profile = new Profile();
|
||||
#mapTimeline = new Timeline();
|
||||
#icTimeline = new Timeline();
|
||||
#formatPCRegexp = /(.*):[0-9]+:[0-9]+$/;
|
||||
_profile = new Profile();
|
||||
_mapTimeline = new Timeline();
|
||||
_icTimeline = new Timeline();
|
||||
_formatPCRegexp = /(.*):[0-9]+:[0-9]+$/;
|
||||
MAJOR_VERSION = 7;
|
||||
MINOR_VERSION = 6;
|
||||
constructor() {
|
||||
@ -138,15 +138,15 @@ export class Processor extends LogReader {
|
||||
|
||||
finalize() {
|
||||
// TODO(cbruni): print stats;
|
||||
this.#mapTimeline.transitions = new Map();
|
||||
this._mapTimeline.transitions = new Map();
|
||||
let id = 0;
|
||||
this.#mapTimeline.forEach(map => {
|
||||
this._mapTimeline.forEach(map => {
|
||||
if (map.isRoot()) id = map.finalizeRootMap(id + 1);
|
||||
if (map.edge && map.edge.name) {
|
||||
let edge = map.edge;
|
||||
let list = this.#mapTimeline.transitions.get(edge.name);
|
||||
let list = this._mapTimeline.transitions.get(edge.name);
|
||||
if (list === undefined) {
|
||||
this.#mapTimeline.transitions.set(edge.name, [edge]);
|
||||
this._mapTimeline.transitions.set(edge.name, [edge]);
|
||||
} else {
|
||||
list.push(edge);
|
||||
}
|
||||
@ -173,10 +173,10 @@ export class Processor extends LogReader {
|
||||
if (maybe_func.length) {
|
||||
let funcAddr = parseInt(maybe_func[0]);
|
||||
let state = this.parseState(maybe_func[1]);
|
||||
this.#profile.addFuncCode(
|
||||
this._profile.addFuncCode(
|
||||
type, name, timestamp, start, size, funcAddr, state);
|
||||
} else {
|
||||
this.#profile.addCode(type, name, timestamp, start, size);
|
||||
this._profile.addCode(type, name, timestamp, start, size);
|
||||
}
|
||||
}
|
||||
|
||||
@ -192,19 +192,19 @@ export class Processor extends LogReader {
|
||||
}
|
||||
|
||||
processScriptSource(scriptId, url, source) {
|
||||
this.#profile.addScriptSource(scriptId, url, source);
|
||||
this._profile.addScriptSource(scriptId, url, source);
|
||||
}
|
||||
|
||||
processCodeMove(from, to) {
|
||||
this.#profile.moveCode(from, to);
|
||||
this._profile.moveCode(from, to);
|
||||
}
|
||||
|
||||
processCodeDelete(start) {
|
||||
this.#profile.deleteCode(start);
|
||||
this._profile.deleteCode(start);
|
||||
}
|
||||
|
||||
processFunctionMove(from, to) {
|
||||
this.#profile.moveFunc(from, to);
|
||||
this._profile.moveFunc(from, to);
|
||||
}
|
||||
|
||||
formatName(entry) {
|
||||
@ -230,21 +230,21 @@ export class Processor extends LogReader {
|
||||
if (script) {
|
||||
entry.sourcePosition = script.addSourcePosition(line, column, entry);
|
||||
}
|
||||
this.#icTimeline.push(entry);
|
||||
this._icTimeline.push(entry);
|
||||
}
|
||||
|
||||
functionName(pc) {
|
||||
let entry = this.#profile.findEntry(pc);
|
||||
let entry = this._profile.findEntry(pc);
|
||||
return this.formatName(entry);
|
||||
}
|
||||
formatPC(pc, line, column) {
|
||||
let entry = this.#profile.findEntry(pc);
|
||||
let entry = this._profile.findEntry(pc);
|
||||
if (!entry) return '<unknown>'
|
||||
if (entry.type === 'Builtin') {
|
||||
return entry.name;
|
||||
}
|
||||
let name = entry.func.getName();
|
||||
let array = this.#formatPCRegexp.exec(name);
|
||||
let array = this._formatPCRegexp.exec(name);
|
||||
if (array === null) {
|
||||
entry = name;
|
||||
} else {
|
||||
@ -297,7 +297,7 @@ export class Processor extends LogReader {
|
||||
|
||||
createMapEntry(id, time) {
|
||||
let map = new MapLogEntry(id, time);
|
||||
this.#mapTimeline.push(map);
|
||||
this._mapTimeline.push(map);
|
||||
return map;
|
||||
}
|
||||
|
||||
@ -313,7 +313,7 @@ export class Processor extends LogReader {
|
||||
}
|
||||
|
||||
getScript(url) {
|
||||
const script = this.#profile.getScript(url);
|
||||
const script = this._profile.getScript(url);
|
||||
// TODO create placeholder script for empty urls.
|
||||
if (script === undefined) {
|
||||
console.error(`Could not find script for url: '${url}'`)
|
||||
@ -322,14 +322,14 @@ export class Processor extends LogReader {
|
||||
}
|
||||
|
||||
get icTimeline() {
|
||||
return this.#icTimeline;
|
||||
return this._icTimeline;
|
||||
}
|
||||
|
||||
get mapTimeline() {
|
||||
return this.#mapTimeline;
|
||||
return this._mapTimeline;
|
||||
}
|
||||
|
||||
get scripts() {
|
||||
return this.#profile.scripts_.filter(script => script !== undefined);
|
||||
return this._profile.scripts_.filter(script => script !== undefined);
|
||||
}
|
||||
}
|
||||
@ -10,9 +10,9 @@ defineCustomElement(
|
||||
"source-panel",
|
||||
(templateText) =>
|
||||
class SourcePanel extends V8CustomElement {
|
||||
#selectedSourcePositions;
|
||||
#scripts = [];
|
||||
#script;
|
||||
_selectedSourcePositions;
|
||||
_scripts = [];
|
||||
_script;
|
||||
constructor() {
|
||||
super(templateText);
|
||||
this.scriptDropdown.addEventListener(
|
||||
@ -25,29 +25,29 @@ defineCustomElement(
|
||||
return this.$('.scriptNode');
|
||||
}
|
||||
set script(script) {
|
||||
this.#script = script;
|
||||
this._script = script;
|
||||
// TODO: fix undefined scripts
|
||||
if (script !== undefined) this.renderSourcePanel();
|
||||
}
|
||||
set selectedSourcePositions(sourcePositions) {
|
||||
this.#selectedSourcePositions = sourcePositions;
|
||||
this._selectedSourcePositions = sourcePositions;
|
||||
}
|
||||
get selectedSourcePositions() {
|
||||
return this.#selectedSourcePositions;
|
||||
return this._selectedSourcePositions;
|
||||
}
|
||||
set data(value) {
|
||||
this.#scripts = value;
|
||||
this._scripts = value;
|
||||
this.initializeScriptDropdown();
|
||||
this.script = this.#scripts[0];
|
||||
this.script = this._scripts[0];
|
||||
}
|
||||
get scriptDropdown() {
|
||||
return this.$("#script-dropdown");
|
||||
}
|
||||
initializeScriptDropdown() {
|
||||
this.#scripts.sort((a, b) => a.name.localeCompare(b.name));
|
||||
this._scripts.sort((a, b) => a.name.localeCompare(b.name));
|
||||
let select = this.scriptDropdown;
|
||||
select.options.length = 0;
|
||||
for (const script of this.#scripts) {
|
||||
for (const script of this._scripts) {
|
||||
const option = document.createElement("option");
|
||||
option.text = `${script.name} (id=${script.id})`;
|
||||
option.script = script;
|
||||
@ -56,7 +56,7 @@ defineCustomElement(
|
||||
}
|
||||
|
||||
renderSourcePanel() {
|
||||
const builder = new LineBuilder(this, this.#script);
|
||||
const builder = new LineBuilder(this, this._script);
|
||||
const scriptNode = builder.createScriptNode();
|
||||
const oldScriptNode = this.script.childNodes[1];
|
||||
this.script.replaceChild(scriptNode, oldScriptNode);
|
||||
@ -92,29 +92,29 @@ defineCustomElement(
|
||||
|
||||
|
||||
class SourcePositionIterator {
|
||||
#entries;
|
||||
#index = 0;
|
||||
_entries;
|
||||
_index = 0;
|
||||
constructor(sourcePositions) {
|
||||
this.#entries = sourcePositions;
|
||||
this._entries = sourcePositions;
|
||||
}
|
||||
|
||||
*forLine(lineIndex) {
|
||||
while(!this.#done() && this.#current().line === lineIndex) {
|
||||
yield this.#current();
|
||||
this.#next();
|
||||
while(!this._done() && this._current().line === lineIndex) {
|
||||
yield this._current();
|
||||
this._next();
|
||||
}
|
||||
}
|
||||
|
||||
#current() {
|
||||
return this.#entries[this.#index];
|
||||
_current() {
|
||||
return this._entries[this._index];
|
||||
}
|
||||
|
||||
#done() {
|
||||
return this.#index + 1 >= this.#entries.length;
|
||||
_done() {
|
||||
return this._index + 1 >= this._entries.length;
|
||||
}
|
||||
|
||||
#next() {
|
||||
this.#index++;
|
||||
_next() {
|
||||
this._index++;
|
||||
}
|
||||
}
|
||||
|
||||
@ -132,19 +132,19 @@ function * lineIterator(source) {
|
||||
}
|
||||
|
||||
class LineBuilder {
|
||||
#script
|
||||
#clickHandler
|
||||
#sourcePositions
|
||||
_script
|
||||
_clickHandler
|
||||
_sourcePositions
|
||||
|
||||
constructor(panel, script) {
|
||||
this.#script = script;
|
||||
this.#clickHandler = panel.handleSourcePositionClick.bind(panel);
|
||||
this._script = script;
|
||||
this._clickHandler = panel.handleSourcePositionClick.bind(panel);
|
||||
// TODO: sort on script finalization.
|
||||
script.sourcePositions.sort((a, b) => {
|
||||
if (a.line === b.line) return a.column - b.column;
|
||||
return a.line - b.line;
|
||||
})
|
||||
this.#sourcePositions
|
||||
this._sourcePositions
|
||||
= new SourcePositionIterator(script.sourcePositions);
|
||||
|
||||
}
|
||||
@ -152,16 +152,16 @@ class LineBuilder {
|
||||
createScriptNode() {
|
||||
const scriptNode = document.createElement("pre");
|
||||
scriptNode.classList.add('scriptNode');
|
||||
for (let [lineIndex, line] of lineIterator(this.#script.source)) {
|
||||
scriptNode.appendChild(this.#createLineNode(lineIndex, line));
|
||||
for (let [lineIndex, line] of lineIterator(this._script.source)) {
|
||||
scriptNode.appendChild(this._createLineNode(lineIndex, line));
|
||||
}
|
||||
return scriptNode;
|
||||
}
|
||||
|
||||
#createLineNode(lineIndex, line) {
|
||||
_createLineNode(lineIndex, line) {
|
||||
const lineNode = document.createElement("span");
|
||||
let columnIndex = 0;
|
||||
for (const sourcePosition of this.#sourcePositions.forLine(lineIndex)) {
|
||||
for (const sourcePosition of this._sourcePositions.forLine(lineIndex)) {
|
||||
const nextColumnIndex = sourcePosition.column - 1;
|
||||
lineNode.appendChild(
|
||||
document.createTextNode(
|
||||
@ -169,7 +169,7 @@ class LineBuilder {
|
||||
columnIndex = nextColumnIndex;
|
||||
|
||||
lineNode.appendChild(
|
||||
this.#createMarkerNode(line[columnIndex], sourcePosition));
|
||||
this._createMarkerNode(line[columnIndex], sourcePosition));
|
||||
columnIndex++;
|
||||
}
|
||||
lineNode.appendChild(
|
||||
@ -177,14 +177,12 @@ class LineBuilder {
|
||||
return lineNode;
|
||||
}
|
||||
|
||||
#createMarkerNode(text, sourcePosition) {
|
||||
_createMarkerNode(text, sourcePosition) {
|
||||
const marker = document.createElement("mark");
|
||||
marker.classList.add('marked');
|
||||
marker.textContent = text;
|
||||
marker.sourcePosition = sourcePosition;
|
||||
marker.onclick = this.#clickHandler;
|
||||
marker.onclick = this._clickHandler;
|
||||
return marker;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -8,8 +8,8 @@ defineCustomElement(
|
||||
"stats-panel",
|
||||
(templateText) =>
|
||||
class StatsPanel extends V8CustomElement {
|
||||
#timeline;
|
||||
#transitions;
|
||||
_timeline;
|
||||
_transitions;
|
||||
constructor() {
|
||||
super(templateText);
|
||||
}
|
||||
@ -20,19 +20,19 @@ defineCustomElement(
|
||||
|
||||
set timeline(value) {
|
||||
//TODO(zcankara) Trigger update
|
||||
this.#timeline = value;
|
||||
this._timeline = value;
|
||||
}
|
||||
|
||||
get timeline() {
|
||||
return this.#timeline;
|
||||
return this._timeline;
|
||||
}
|
||||
|
||||
set transitions(value) {
|
||||
this.#transitions = value;
|
||||
this._transitions = value;
|
||||
}
|
||||
|
||||
get transitions() {
|
||||
return this.#transitions;
|
||||
return this._transitions;
|
||||
}
|
||||
|
||||
filterUniqueTransitions(filter) {
|
||||
@ -52,7 +52,7 @@ defineCustomElement(
|
||||
}
|
||||
|
||||
updateGeneralStats() {
|
||||
console.assert(this.#timeline !== undefined, "Timeline not set yet!");
|
||||
console.assert(this._timeline !== undefined, "Timeline not set yet!");
|
||||
let pairs = [
|
||||
["Total", null, (e) => true],
|
||||
["Transitions", "primary", (e) => e.edge && e.edge.isTransition()],
|
||||
|
||||
@ -4,38 +4,38 @@
|
||||
|
||||
class Timeline {
|
||||
// Class:
|
||||
#model;
|
||||
_model;
|
||||
// Array of #model instances:
|
||||
#values;
|
||||
_values;
|
||||
// Current selection, subset of #values:
|
||||
#selection;
|
||||
#uniqueTypes;
|
||||
_selection;
|
||||
_uniqueTypes;
|
||||
|
||||
constructor(model) {
|
||||
this.#model = model;
|
||||
this.#values = [];
|
||||
this._model = model;
|
||||
this._values = [];
|
||||
this.startTime = 0;
|
||||
this.endTime = 0;
|
||||
}
|
||||
|
||||
get model() {
|
||||
return this.#model;
|
||||
return this._model;
|
||||
}
|
||||
|
||||
get all() {
|
||||
return this.#values;
|
||||
return this._values;
|
||||
}
|
||||
|
||||
get selection() {
|
||||
return this.#selection;
|
||||
return this._selection;
|
||||
}
|
||||
|
||||
set selection(value) {
|
||||
this.#selection = value;
|
||||
this._selection = value;
|
||||
}
|
||||
|
||||
selectTimeRange(start, end) {
|
||||
this.#selection = this.filter(
|
||||
this._selection = this.filter(
|
||||
e => e.time >= start && e.time <= end);
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@ class Timeline {
|
||||
|
||||
get values() {
|
||||
//TODO(zcankara) Not to break something delete later
|
||||
return this.#values;
|
||||
return this._values;
|
||||
}
|
||||
|
||||
count(filter) {
|
||||
@ -65,9 +65,9 @@ class Timeline {
|
||||
// Invalid insertion order, might happen without --single-process,
|
||||
// finding insertion point.
|
||||
let insertionPoint = this.find(time);
|
||||
this.#values.splice(insertionPoint, event);
|
||||
this._values.splice(insertionPoint, event);
|
||||
} else {
|
||||
this.#values.push(event);
|
||||
this._values.push(event);
|
||||
}
|
||||
if (time > 0) {
|
||||
this.endTime = Math.max(this.endTime, time);
|
||||
@ -80,7 +80,7 @@ class Timeline {
|
||||
}
|
||||
|
||||
at(index) {
|
||||
return this.#values[index];
|
||||
return this._values[index];
|
||||
}
|
||||
|
||||
isEmpty() {
|
||||
@ -88,15 +88,15 @@ class Timeline {
|
||||
}
|
||||
|
||||
size() {
|
||||
return this.#values.length;
|
||||
return this._values.length;
|
||||
}
|
||||
|
||||
first() {
|
||||
return this.#values[0];
|
||||
return this._values[0];
|
||||
}
|
||||
|
||||
last() {
|
||||
return this.#values[this.#values.length - 1];
|
||||
return this._values[this._values.length - 1];
|
||||
}
|
||||
|
||||
duration() {
|
||||
@ -125,7 +125,7 @@ class Timeline {
|
||||
chunks(count) {
|
||||
let chunks = [];
|
||||
this.forEachChunkSize(count, (start, end, startTime, endTime) => {
|
||||
let items = this.#values.slice(start, end);
|
||||
let items = this._values.slice(start, end);
|
||||
chunks.push(new Chunk(chunks.length, startTime, endTime, items));
|
||||
});
|
||||
return chunks;
|
||||
@ -135,14 +135,14 @@ class Timeline {
|
||||
const first = this.find(start);
|
||||
if (first < 0) return [];
|
||||
const last = this.find(end, first);
|
||||
return this.#values.slice(first, last);
|
||||
return this._values.slice(first, last);
|
||||
}
|
||||
|
||||
find(time, offset = 0) {
|
||||
return this.#find(this.#values, each => each.time - time, offset);
|
||||
return this._find(this._values, each => each.time - time, offset);
|
||||
}
|
||||
|
||||
#find(array, cmp, offset = 0) {
|
||||
_find(array, cmp, offset = 0) {
|
||||
let min = offset;
|
||||
let max = array.length;
|
||||
while (min < max) {
|
||||
@ -162,24 +162,23 @@ class Timeline {
|
||||
for (const entry of this.all) {
|
||||
types.get(entry.type)?.push(entry) ?? types.set(entry.type, [entry])
|
||||
}
|
||||
this.#uniqueTypes = types;
|
||||
return types;
|
||||
return this._uniqueTypes = types;
|
||||
}
|
||||
|
||||
get uniqueTypes() {
|
||||
return this.#uniqueTypes ?? this.initializeTypes();
|
||||
return this._uniqueTypes ?? this.initializeTypes();
|
||||
}
|
||||
|
||||
depthHistogram() {
|
||||
return this.#values.histogram(each => each.depth);
|
||||
return this._values.histogram(each => each.depth);
|
||||
}
|
||||
|
||||
fanOutHistogram() {
|
||||
return this.#values.histogram(each => each.children.length);
|
||||
return this._values.histogram(each => each.children.length);
|
||||
}
|
||||
|
||||
forEach(fn) {
|
||||
return this.#values.forEach(fn);
|
||||
return this._values.forEach(fn);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -14,16 +14,17 @@ import {
|
||||
|
||||
defineCustomElement('./timeline/timeline-track', (templateText) =>
|
||||
class TimelineTrack extends V8CustomElement {
|
||||
static SELECTION_OFFSET = 20;
|
||||
#timeline;
|
||||
#nofChunks = 400;
|
||||
#chunks;
|
||||
#selectedEntry;
|
||||
#timeToPixel;
|
||||
#timeSelection = { start: 0, end: Infinity };
|
||||
#isSelected = false;
|
||||
#timeStartOffset;
|
||||
#mouseDownTime;
|
||||
// TODO turn into static field once Safari supports it.
|
||||
static get SELECTION_OFFSET() { return 20 };
|
||||
_timeline;
|
||||
_nofChunks = 400;
|
||||
_chunks;
|
||||
_selectedEntry;
|
||||
_timeToPixel;
|
||||
_timeSelection = { start: 0, end: Infinity };
|
||||
_isSelected = false;
|
||||
_timeStartOffset;
|
||||
_mouseDownTime;
|
||||
constructor() {
|
||||
super(templateText);
|
||||
this.timeline.addEventListener("scroll",
|
||||
@ -40,13 +41,13 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
|
||||
|
||||
handleTimeSelectionMouseDown(e) {
|
||||
if (e.target.className === "chunk") return;
|
||||
this.#isSelected = true;
|
||||
this.#mouseDownTime = this.positionToTime(e.clientX);
|
||||
this._isSelected = true;
|
||||
this._mouseDownTime = this.positionToTime(e.clientX);
|
||||
}
|
||||
handleTimeSelectionMouseMove(e) {
|
||||
if (!this.#isSelected) return;
|
||||
if (!this._isSelected) return;
|
||||
let mouseMoveTime = this.positionToTime(e.clientX);
|
||||
let startTime = this.#mouseDownTime;
|
||||
let startTime = this._mouseDownTime;
|
||||
let endTime = mouseMoveTime;
|
||||
if (this.isOnLeftHandle(e.clientX)) {
|
||||
startTime = mouseMoveTime;
|
||||
@ -60,9 +61,9 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
|
||||
Math.max(startTime, endTime)));
|
||||
}
|
||||
handleTimeSelectionMouseUp(e) {
|
||||
this.#isSelected = false;
|
||||
this.dispatchEvent(new SelectTimeEvent(this.#timeSelection.start,
|
||||
this.#timeSelection.end));
|
||||
this._isSelected = false;
|
||||
this.dispatchEvent(new SelectTimeEvent(this._timeSelection.start,
|
||||
this._timeSelection.end));
|
||||
}
|
||||
isOnLeftHandle(posX) {
|
||||
return (Math.abs(this.leftHandlePosX - posX)
|
||||
@ -76,22 +77,22 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
|
||||
|
||||
set startTime(value) {
|
||||
console.assert(
|
||||
value <= this.#timeSelection.end,
|
||||
value <= this._timeSelection.end,
|
||||
"Selection start time greater than end time!");
|
||||
this.#timeSelection.start = value;
|
||||
this._timeSelection.start = value;
|
||||
this.updateSelection();
|
||||
}
|
||||
set endTime(value) {
|
||||
console.assert(
|
||||
value > this.#timeSelection.start,
|
||||
value > this._timeSelection.start,
|
||||
"Selection end time smaller than start time!");
|
||||
this.#timeSelection.end = value;
|
||||
this._timeSelection.end = value;
|
||||
this.updateSelection();
|
||||
}
|
||||
|
||||
updateSelection() {
|
||||
let startTimePos = this.timeToPosition(this.#timeSelection.start);
|
||||
let endTimePos = this.timeToPosition(this.#timeSelection.end);
|
||||
let startTimePos = this.timeToPosition(this._timeSelection.start);
|
||||
let endTimePos = this.timeToPosition(this._timeSelection.end);
|
||||
this.leftHandle.style.left = startTimePos + "px";
|
||||
this.selection.style.left = startTimePos + "px";
|
||||
this.rightHandle.style.left = endTimePos + "px";
|
||||
@ -116,13 +117,13 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
|
||||
}
|
||||
|
||||
positionToTime(posX) {
|
||||
let posTimelineX = this.positionOnTimeline(posX) + this.#timeStartOffset;
|
||||
return posTimelineX / this.#timeToPixel;
|
||||
let posTimelineX = this.positionOnTimeline(posX) + this._timeStartOffset;
|
||||
return posTimelineX / this._timeToPixel;
|
||||
}
|
||||
|
||||
timeToPosition(time) {
|
||||
let posX = time * this.#timeToPixel;
|
||||
posX -= this.#timeStartOffset
|
||||
let posX = time * this._timeToPixel;
|
||||
posX -= this._timeStartOffset
|
||||
return posX;
|
||||
}
|
||||
|
||||
@ -156,36 +157,36 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
|
||||
return this.$('#legendContent');
|
||||
}
|
||||
set data(value) {
|
||||
this.#timeline = value;
|
||||
this._timeline = value;
|
||||
this.updateChunks();
|
||||
this.updateTimeline();
|
||||
this.renderLegend();
|
||||
}
|
||||
|
||||
get data() {
|
||||
return this.#timeline;
|
||||
return this._timeline;
|
||||
}
|
||||
|
||||
set nofChunks(count) {
|
||||
this.#nofChunks = count;
|
||||
this._nofChunks = count;
|
||||
this.updateChunks();
|
||||
this.updateTimeline();
|
||||
}
|
||||
get nofChunks() {
|
||||
return this.#nofChunks;
|
||||
return this._nofChunks;
|
||||
}
|
||||
updateChunks() {
|
||||
this.#chunks = this.data.chunks(this.nofChunks);
|
||||
this._chunks = this.data.chunks(this.nofChunks);
|
||||
}
|
||||
get chunks() {
|
||||
return this.#chunks;
|
||||
return this._chunks;
|
||||
}
|
||||
set selectedEntry(value) {
|
||||
this.#selectedEntry = value;
|
||||
this._selectedEntry = value;
|
||||
if (value.edge) this.redraw();
|
||||
}
|
||||
get selectedEntry() {
|
||||
return this.#selectedEntry;
|
||||
return this._selectedEntry;
|
||||
}
|
||||
|
||||
set scrollLeft(offset) {
|
||||
@ -197,7 +198,7 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
|
||||
let timelineLegendContent = this.timelineLegendContent;
|
||||
this.removeAllChildren(timelineLegendContent);
|
||||
let colorIterator = 0;
|
||||
this.#timeline.uniqueTypes.forEach((entries, type) => {
|
||||
this._timeline.uniqueTypes.forEach((entries, type) => {
|
||||
let row = this.tr();
|
||||
row.entries = entries;
|
||||
row.classList.add('clickable');
|
||||
@ -298,12 +299,12 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
|
||||
let start = this.data.startTime;
|
||||
let end = this.data.endTime;
|
||||
let duration = end - start;
|
||||
this.#timeToPixel = chunks.length * kChunkWidth / duration;
|
||||
this.#timeStartOffset = start * this.#timeToPixel;
|
||||
this._timeToPixel = chunks.length * kChunkWidth / duration;
|
||||
this._timeStartOffset = start * this._timeToPixel;
|
||||
let addTimestamp = (time, name) => {
|
||||
let timeNode = this.div('timestamp');
|
||||
timeNode.innerText = name;
|
||||
timeNode.style.left = ((time - start) * this.#timeToPixel) + 'px';
|
||||
timeNode.style.left = ((time - start) * this._timeToPixel) + 'px';
|
||||
chunksNode.appendChild(timeNode);
|
||||
};
|
||||
let backgroundTodo = [];
|
||||
@ -315,7 +316,7 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
|
||||
let node = this.div();
|
||||
node.className = 'chunk';
|
||||
node.style.left =
|
||||
((chunks[i].start - start) * this.#timeToPixel) + 'px';
|
||||
((chunks[i].start - start) * this._timeToPixel) + 'px';
|
||||
node.style.height = height + 'px';
|
||||
node.chunk = chunk;
|
||||
node.addEventListener('mousemove', e => this.handleChunkMouseMove(e));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user