[tools][system-analyzer] TimelineOverviewIndicator bug fix

This CL deletes the image on the timeline overview which
only reflects the last uploaded timeline-track data
and updates the timelineOverviewIndicator on mousemove and
chunk zoom events.

Bug: v8:10644

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

tools/system-analyzer/timeline-panel-template.html

@@ -13,7 +13,7 @@ found in the LICENSE file. -->
     margin-top: -50px;
     margin-bottom: 10px;
     background-size: 100% 100%;
-    border: 1px var(--surface-color) solid;
+    border: 1px var(--primary-color) solid;
     border-width: 1px 0 1px 0;
     overflow: hidden;
   }
@@ -21,14 +21,14 @@ found in the LICENSE file. -->
   #timelineOverviewIndicator {
     height: 100%;
     position: absolute;
-    box-shadow: 0px 2px 20px -5px var(--surface-color) inset;
+    box-shadow: 0px 2px 20px -5px var(--primary-color) inset;
     top: 0px;
     cursor: ew-resize;
   }
 
   #timelineOverviewIndicator .leftMask,
   #timelineOverviewIndicator .rightMask {
-    background-color: rgba(200, 200, 200, 0.5);
+    background-color: rgba(240, 230, 230, 0.3);
     width: 10000px;
     height: 100%;
     position: absolute;

tools/system-analyzer/timeline-panel.mjs

@@ -13,8 +13,6 @@ defineCustomElement('timeline-panel', (templateText) =>
       super(templateText);
       this.timelineOverview.addEventListener(
         'mousemove', e => this.handleTimelineIndicatorMove(e));
-      this.addEventListener(
-        'overviewupdate', e => this.handleOverviewBackgroundUpdate(e));
       this.addEventListener(
         'scrolltrack', e => this.handleTrackScroll(e));
       this.addEventListener(
@@ -76,6 +74,7 @@ defineCustomElement('timeline-panel', (templateText) =>
       for (const track of this.timelineTracks) {
         track.timelineIndicatorMove(event.movementX / factor);
       }
+      this.updateOverviewWindow();
     }
 
     updateOverviewWindow() {
@@ -91,9 +90,4 @@ defineCustomElement('timeline-panel', (templateText) =>
       indicator.style.left = left + 'px';
     }
 
-    handleOverviewBackgroundUpdate(e) {
-      this.timelineOverview.style.backgroundImage =
-        'url(' + e.detail + ')';
-    }
-
   });

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

@@ -342,7 +342,6 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
         addTimestamp(time, ((time - start) / 1000) + ' ms');
         time += interval;
       }
-      this.drawOverview();
       this.redraw();
     }
 
@@ -369,35 +368,6 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       this.dispatchEvent(new SelectionEvent(maps));
     }
 
-    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.data.chunkSizes(canvas.width * kFactor);
-      let max = chunks.max();
-      ctx.clearRect(0, 0, canvas.width, height);
-      ctx.fillStyle = CSSColor.onBackgroundColor;
-      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.strokeStyle = CSSColor.onBackgroundColor;
-      ctx.stroke();
-      ctx.closePath();
-      ctx.fill();
-      let imageData = canvas.toDataURL('image/webp', 0.2);
-      this.dispatchEvent(new CustomEvent(
-        'overviewupdate', {
-        bubbles: true, composed: true,
-        detail: imageData
-      }));
-    }
-
     redraw() {
       let canvas = this.timelineCanvas;
       canvas.width = (this.chunks.length + 1) * kChunkWidth;