diff --git a/tools/system-analyzer/timeline-panel-template.html b/tools/system-analyzer/timeline-panel-template.html
index 9b9dbd2439..2641c71441 100644
--- a/tools/system-analyzer/timeline-panel-template.html
+++ b/tools/system-analyzer/timeline-panel-template.html
@@ -5,53 +5,9 @@ found in the LICENSE file. -->
-
diff --git a/tools/system-analyzer/timeline-panel.mjs b/tools/system-analyzer/timeline-panel.mjs
index afe05c24bd..d6f9cd1a00 100644
--- a/tools/system-analyzer/timeline-panel.mjs
+++ b/tools/system-analyzer/timeline-panel.mjs
@@ -8,47 +8,29 @@ import './timeline/timeline-track.mjs';
defineCustomElement('timeline-panel', (templateText) =>
class TimelinePanel extends V8CustomElement {
- #timeSelection = { start: 0, end: Infinity };
constructor() {
super(templateText);
- this.timelineOverview.addEventListener(
- 'mousemove', e => this.handleTimelineIndicatorMove(e));
this.addEventListener(
'scrolltrack', e => this.handleTrackScroll(e));
this.addEventListener(
SynchronizeSelectionEvent.name, e => this.handleMouseMoveSelection(e));
- this.backgroundCanvas = document.createElement('canvas');
- this.isLocked = false;
}
- get timelineOverview() {
- return this.$('#timelineOverview');
- }
-
- get timelineOverviewIndicator() {
- return this.$('#timelineOverviewIndicator');
- }
-
- //TODO(zcankara) Remove dependency to timelineCanvas here
- get timelineCanvas() {
- return this.timelineTracks[0].timelineCanvas;
- }
- //TODO(zcankara) Remove dependency to timeline here
- get timeline() {
- return this.timelineTracks[0].timeline;
- }
set nofChunks(count) {
for (const track of this.timelineTracks) {
track.nofChunks = count;
}
}
+
get nofChunks() {
return this.timelineTracks[0].nofChunks;
}
+
get timelineTracks() {
return this.$("slot").assignedNodes().filter(
- track => track.nodeType === Node.ELEMENT_NODE);
+ node => node.nodeType === Node.ELEMENT_NODE);
}
+
handleTrackScroll(event) {
//TODO(zcankara) add forEachTrack helper method
for (const track of this.timelineTracks) {
@@ -57,37 +39,13 @@ defineCustomElement('timeline-panel', (templateText) =>
}
handleMouseMoveSelection(event) {
- this.selectionMouseMove(event.start, event.end);
+ this.selectTimeRange(event.start, event.end);
}
- selectionMouseMove(start, end) {
+ selectTimeRange(start, end) {
for (const track of this.timelineTracks) {
track.startTime = start;
track.endTime = end;
}
}
-
- handleTimelineIndicatorMove(event) {
- if (event.buttons == 0) return;
- let timelineTotalWidth = this.timelineCanvas.offsetWidth;
- let factor = this.timelineOverview.offsetWidth / timelineTotalWidth;
- for (const track of this.timelineTracks) {
- track.timelineIndicatorMove(event.movementX / factor);
- }
- this.updateOverviewWindow();
- }
-
- updateOverviewWindow() {
- let indicator = this.timelineOverviewIndicator;
- let totalIndicatorWidth =
- this.timelineOverview.offsetWidth;
- let div = this.timeline;
- let timelineTotalWidth = this.timelineCanvas.offsetWidth;
- let factor = totalIndicatorWidth / timelineTotalWidth;
- let width = div.offsetWidth * factor;
- let left = div.scrollLeft * factor;
- indicator.style.width = width + 'px';
- indicator.style.left = left + 'px';
- }
-
});