[tools][system-analyzer] Sync Timeline Track Scrolling

This CL sync the timeline-tracks positions
upon receiving a horizontal scrolling event.

Bug: v8:10644

Change-Id: I69bc1066a3f5da6ddc978ad71fe77820df8066bd
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2336806
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#69263}

tools/system-analyzer/timeline-panel.mjs

@@ -10,9 +10,11 @@ defineCustomElement('timeline-panel', (templateText) =>
   constructor() {
     super(templateText);
     this.timelineOverview.addEventListener(
-        'mousemove', e => this.handleTimelineIndicatorMove(e));
+      'mousemove', e => this.handleTimelineIndicatorMove(e));
     this.addEventListener(
       'overviewupdate', e => this.handleOverviewBackgroundUpdate(e));
+    this.addEventListener(
+      'scrolltrack', e => this.handleTrackScroll(e));
     this.backgroundCanvas = document.createElement('canvas');
     this.isLocked = false;
   }
@@ -44,13 +46,18 @@ defineCustomElement('timeline-panel', (templateText) =>
     return this.$("slot").assignedNodes().filter(
       track => track.nodeType === Node.ELEMENT_NODE);
   }
-
+  handleTrackScroll(event){
+    //TODO(zcankara) add forEachTrack  helper method
+    for (const track of this.timelineTracks) {
+      track.scrollLeft = event.detail;
+    }
+  }
   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.handleTimelineIndicatorMove(event.movementX / factor);
+      track.timelineIndicatorMove(event.movementX / factor);
     }
   }
 

tools/system-analyzer/timeline/timeline-track.mjs

@@ -14,6 +14,8 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
     #selectedEntry;
     constructor() {
       super(templateText);
+      this.timeline.addEventListener("scroll",
+        e => this.handleTimelineScroll(e));
       this.backgroundCanvas = document.createElement('canvas');
       this.isLocked = false;
     }
@@ -67,6 +69,10 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       return this.#selectedEntry;
     }
 
+    set scrollLeft(offset){
+      this.timeline.scrollLeft = offset;
+    }
+
     updateStats(){
       let unique = new Map();
       for (const entry of this.data.all) {
@@ -109,11 +115,17 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
          detail: selectedEvent}));
     }
 
-    // TODO(zcankara) Emit event and handle data in timeline track
-    handleTimelineIndicatorMove(offset) {
+    timelineIndicatorMove(offset) {
       this.timeline.scrollLeft += offset;
     }
 
+    handleTimelineScroll(e){
+      let horizontal = e.currentTarget.scrollLeft;
+      this.dispatchEvent(new CustomEvent(
+        'scrolltrack', {bubbles: true, composed: true,
+          detail: horizontal}));
+    }
+
     asyncSetTimelineChunkBackground(backgroundTodo) {
       const kIncrement = 100;
       let start = 0;