[RPP] Continue updating vertical timestamp marker when mouse down

The vertical timestamp line that aligns the mouse cursor over the
minimap with a position in the flame chart was not updating when the
mouse was held down. This made it difficult to select an exact end
position relative to something visible in the chart.

The fix was to not use mousemove, which doesn't fire during drag, and
instead use pointermove.

Also, capture the pointer during this interaction and hide the overview
info pane until the interaction ends.

Fixed: 393411231
Change-Id: I1218213a706593e06f36726ab7089c0ce86cfd6e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6217297
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Connor Clark <[email protected]>
Auto-Submit: Connor Clark <[email protected]>

Author: Connor Clark

front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts

@@ -56,6 +56,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   private windowStartTime = Trace.Types.Timing.Milli(0);
   private windowEndTime = Trace.Types.Timing.Milli(Infinity);
   private muteOnWindowChanged = false;
+  private hasPointer = false;
   #dimHighlightSVG: Element;
   readonly #boundOnThemeChanged = this.#onThemeChanged.bind(this);
 
@@ -70,8 +71,11 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.element.appendChild(this.overviewGrid.element);
     this.cursorArea = this.overviewGrid.element.createChild('div', 'overview-grid-cursor-area');
     this.cursorElement = this.overviewGrid.element.createChild('div', 'overview-grid-cursor-position');
-    this.cursorArea.addEventListener('mousemove', this.onMouseMove.bind(this), true);
-    this.cursorArea.addEventListener('mouseleave', this.hideCursor.bind(this), true);
+    this.cursorArea.addEventListener('pointerdown', this.onMouseDown.bind(this), true);
+    this.cursorArea.addEventListener('pointerup', this.onMouseCancel.bind(this), true);
+    this.cursorArea.addEventListener('pointercancel', this.onMouseCancel.bind(this), true);
+    this.cursorArea.addEventListener('pointermove', this.onMouseMove.bind(this), true);
+    this.cursorArea.addEventListener('pointerleave', this.hideCursor.bind(this), true);
 
     this.overviewGrid.setResizeEnabled(false);
     this.overviewGrid.addEventListener(OverviewGridEvents.WINDOW_CHANGED_WITH_POSITION, this.onWindowChanged, this);
@@ -86,8 +90,31 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
 
   enableCreateBreadcrumbsButton(): void {
     const breadcrumbsElement = this.overviewGrid.enableCreateBreadcrumbsButton();
-    breadcrumbsElement.addEventListener('mousemove', this.onMouseMove.bind(this), true);
-    breadcrumbsElement.addEventListener('mouseleave', this.hideCursor.bind(this), true);
+    breadcrumbsElement.addEventListener('pointerdown', this.onMouseDown.bind(this), true);
+    breadcrumbsElement.addEventListener('pointerup', this.onMouseCancel.bind(this), true);
+    breadcrumbsElement.addEventListener('pointercancel', this.onMouseCancel.bind(this), true);
+    breadcrumbsElement.addEventListener('pointermove', this.onMouseMove.bind(this), true);
+    breadcrumbsElement.addEventListener('pointerleave', this.hideCursor.bind(this), true);
+  }
+
+  private onMouseDown(event: PointerEvent): void {
+    if (!(event.target instanceof HTMLElement)) {
+      return;
+    }
+
+    event.target.setPointerCapture(event.pointerId);
+    this.overviewInfo.hide();
+    this.hasPointer = true;
+  }
+
+  private onMouseCancel(event: PointerEvent): void {
+    if (!(event.target instanceof HTMLElement)) {
+      return;
+    }
+
+    event.target.releasePointerCapture(event.pointerId);
+    this.overviewInfo.show();
+    this.hasPointer = false;
   }
 
   private onMouseMove(event: Event): void {
@@ -114,7 +141,9 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
       this.dispatchEventToListeners(Events.OVERVIEW_PANE_MOUSE_LEAVE);
     }
 
-    void this.overviewInfo.setContent(this.buildOverviewInfo());
+    if (!this.hasPointer) {
+      void this.overviewInfo.setContent(this.buildOverviewInfo());
+    }
   }
 
   private async buildOverviewInfo(): Promise<DocumentFragment> {
@@ -564,4 +593,9 @@ export class OverviewInfo {
     this.visible = false;
     this.glassPane.hide();
   }
+
+  show(): void {
+    this.visible = true;
+    this.glassPane.show(window.document);
+  }
 }