RPP: select the event when an annotation label is clicked

With this CL when a user clicks on an annotation label in the timeline
we now will select the associated entry. This is a useful change because
when the event is small it can be hard to select, especially when zoomed
out. But the label is always going to be (relatively) large compared to
the event, so let's allow them to click the label.

Bug: 383120286
Fixed: 388224764
Change-Id: Ia58c2ffd8e075087480e651e31e0fea186039a54
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6148172
Reviewed-by: Alina Varkki <[email protected]>
Commit-Queue: Alina Varkki <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>

Author: jackfranklin

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -71,9 +71,8 @@ export const SORT_ORDER_PAGE_LOAD_MARKERS: Readonly<Record<string, number>> = {
 // on top of each other.
 const TIMESTAMP_THRESHOLD_MS = Trace.Types.Timing.MicroSeconds(10);
 
-export class TimelineFlameChartView extends
-    Common.ObjectWrapper.eventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
-        implements PerfUI.FlameChart.FlameChartDelegate, UI.SearchableView.Searchable {
+export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) implements PerfUI.FlameChart.FlameChartDelegate, UI.SearchableView.Searchable {
   private readonly delegate: TimelineModeViewDelegate;
   /**
    * Tracks the indexes of matched entries when the user searches the panel.
@@ -258,6 +257,16 @@ export class TimelineFlameChartView extends
       },
     });
 
+    this.#overlays.addEventListener(Overlays.Overlays.EntryLabelMouseClick.eventName, event => {
+      const {overlay} = (event as Overlays.Overlays.EntryLabelMouseClick);
+      this.dispatchEventToListeners(
+          Events.ENTRY_LABEL_ANNOTATION_CLICKED,
+          {
+            entry: overlay.entry,
+          },
+      );
+    });
+
     this.#overlays.addEventListener(Overlays.Overlays.AnnotationOverlayActionEvent.eventName, event => {
       const {overlay, action} = (event as Overlays.Overlays.AnnotationOverlayActionEvent);
       if (action === 'Remove') {
@@ -1680,3 +1689,12 @@ export function groupForLevel(groups: PerfUI.FlameChart.Group[], level: number):
   });
   return groupForLevel ?? null;
 }
+
+export const enum Events {
+  ENTRY_LABEL_ANNOTATION_CLICKED = 'EntryLabelAnnotationClicked',
+}
+export type EventTypes = {
+  [Events.ENTRY_LABEL_ANNOTATION_CLICKED]: {
+    entry: Trace.Types.Events.Event,
+  },
+};

front_end/panels/timeline/TimelinePanel.ts

@@ -68,7 +68,7 @@ import * as Overlays from './overlays/overlays.js';
 import {cpuprofileJsonGenerator, traceJsonGenerator} from './SaveFileFormatter.js';
 import {type Client, TimelineController} from './TimelineController.js';
 import type {TimelineFlameChartDataProvider} from './TimelineFlameChartDataProvider.js';
-import {TimelineFlameChartView} from './TimelineFlameChartView.js';
+import {Events as TimelineFlameChartViewEvents, TimelineFlameChartView} from './TimelineFlameChartView.js';
 import {TimelineHistoryManager} from './TimelineHistoryManager.js';
 import {TimelineLoader} from './TimelineLoader.js';
 import {TimelineMiniMap} from './TimelineMiniMap.js';
@@ -592,6 +592,11 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.flameChart.getMainFlameChart().addEventListener(
         PerfUI.FlameChart.Events.ENTRY_HOVERED, this.#onMainEntryHovered);
 
+    this.flameChart.addEventListener(TimelineFlameChartViewEvents.ENTRY_LABEL_ANNOTATION_CLICKED, event => {
+      const selection = selectionFromEvent(event.data.entry);
+      this.select(selection);
+    });
+
     this.searchableViewInternal = new UI.SearchableView.SearchableView(this.flameChart, null);
     this.searchableViewInternal.setMinimumSize(0, 100);
     this.searchableViewInternal.setMinimalSearchQuerySize(2);  // At 1 it can introduce a bit of jank.

front_end/panels/timeline/overlays/OverlaysImpl.test.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Trace from '../../../models/trace/trace.js';
+import {dispatchClickEvent} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {
   makeInstantEvent,
@@ -396,6 +397,40 @@ describeWithEnvironment('Overlays', () => {
       assert.isOk(overlayDOM);
     });
 
+    it('dispatches an event when the entry label overlay is clicked', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
+      const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
+      const event = charts.mainProvider.eventByIndex?.(50);
+      assert.isOk(event);
+
+      overlays.add({
+        type: 'ENTRY_LABEL',
+        entry: event,
+        label: 'entry label',
+      });
+      await overlays.update();
+
+      // Ensure that the overlay was created.
+      const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_LABEL');
+      assert.isOk(overlayDOM);
+
+      const overlayClick = new Promise<Overlays.Overlays.EntryLabel>(resolve => {
+        overlays.addEventListener(Overlays.Overlays.EntryLabelMouseClick.eventName, e => {
+          const event = e as Overlays.Overlays.EntryLabelMouseClick;
+          resolve(event.overlay);
+        }, {once: true});
+      });
+
+      dispatchClickEvent(overlayDOM);
+      const overlayFromEvent = await overlayClick;
+      // Check that the event was dispatched on the right overlay.
+      assert.deepEqual(overlayFromEvent, {
+        type: 'ENTRY_LABEL',
+        entry: event,
+        label: 'entry label',
+      });
+    });
+
     it('toggles overlays container display', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
       const {overlays, container} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);

front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -387,6 +387,13 @@ export class TimeRangeMouseOutEvent extends Event {
   }
 }
 
+export class EntryLabelMouseClick extends Event {
+  static readonly eventName = 'entrylabelmouseclick';
+  constructor(public overlay: EntryLabel) {
+    super(EntryLabelMouseClick.eventName, {composed: true, bubbles: true});
+  }
+}
+
 interface EntriesLinkVisibleEntries {
   entryFrom: Trace.Types.Events.Event;
   entryTo: Trace.Types.Events.Event|undefined;
@@ -1443,12 +1450,12 @@ export class Overlays extends EventTarget {
   }
 
   #createElementForNewOverlay(overlay: TimelineOverlay): HTMLElement {
-    const div = document.createElement('div');
-    div.classList.add('overlay-item', `overlay-type-${overlay.type}`);
+    const overlayElement = document.createElement('div');
+    overlayElement.classList.add('overlay-item', `overlay-type-${overlay.type}`);
 
     const jslogContext = jsLogContext(overlay);
     if (jslogContext) {
-      div.setAttribute('jslog', `${VisualLogging.item(jslogContext)}`);
+      overlayElement.setAttribute('jslog', `${VisualLogging.item(jslogContext)}`);
     }
 
     switch (overlay.type) {
@@ -1463,16 +1470,21 @@ export class Overlays extends EventTarget {
           overlay.label = newLabel;
           this.dispatchEvent(new AnnotationOverlayActionEvent(overlay, 'Update'));
         });
-        div.appendChild(component);
-        return div;
+        overlayElement.appendChild(component);
+        overlayElement.addEventListener('click', event => {
+          event.preventDefault();
+          event.stopPropagation();
+          this.dispatchEvent(new EntryLabelMouseClick(overlay));
+        });
+        return overlayElement;
       }
       case 'ENTRIES_LINK': {
         const entries = this.#calculateFromAndToForEntriesLink(overlay);
         if (entries === null) {
           // For some reason, we don't have two entries we can draw between
           // (can happen if the user has collapsed an icicle in the flame
           // chart, or a track), so just draw an empty div.
-          return div;
+          return overlayElement;
         }
         const entryEndX = this.xPixelForEventEndOnChart(entries.entryFrom) ?? 0;
         const entryStartX = this.xPixelForEventEndOnChart(entries.entryFrom) ?? 0;
@@ -1487,12 +1499,12 @@ export class Overlays extends EventTarget {
           overlay.state = Trace.Types.File.EntriesLinkState.PENDING_TO_EVENT;
           this.dispatchEvent(new AnnotationOverlayActionEvent(overlay, 'Update'));
         });
-        div.appendChild(component);
-        return div;
+        overlayElement.appendChild(component);
+        return overlayElement;
       }
       case 'ENTRY_OUTLINE': {
-        div.classList.add(`outline-reason-${overlay.outlineReason}`);
-        return div;
+        overlayElement.classList.add(`outline-reason-${overlay.outlineReason}`);
+        return overlayElement;
       }
       case 'TIME_RANGE': {
         const component = new Components.TimeRangeOverlay.TimeRangeOverlay(overlay.label);
@@ -1512,26 +1524,26 @@ export class Overlays extends EventTarget {
         component.addEventListener('mouseout', () => {
           this.dispatchEvent(new TimeRangeMouseOutEvent());
         });
-        div.appendChild(component);
-        return div;
+        overlayElement.appendChild(component);
+        return overlayElement;
       }
       case 'TIMESPAN_BREAKDOWN': {
         const component = new Components.TimespanBreakdownOverlay.TimespanBreakdownOverlay();
         component.sections = overlay.sections;
         component.canvasRect = this.#charts.mainChart.canvasBoundingClientRect();
         component.isBelowEntry = overlay.renderLocation === 'BELOW_EVENT';
-        div.appendChild(component);
-        return div;
+        overlayElement.appendChild(component);
+        return overlayElement;
       }
       case 'TIMINGS_MARKER': {
         const {color} = EntryStyles.markerDetailsForEvent(overlay.entries[0]);
         const markersComponent = this.#createTimingsMarkerElement(overlay);
-        div.appendChild(markersComponent);
-        div.style.backgroundColor = color;
-        return div;
+        overlayElement.appendChild(markersComponent);
+        overlayElement.style.backgroundColor = color;
+        return overlayElement;
       }
       default: {
-        return div;
+        return overlayElement;
       }
     }
   }

test/interactions/panels/performance/timeline/BUILD.gn

@@ -7,6 +7,7 @@ import("../../../../../scripts/build/typescript/typescript.gni")
 node_ts_library("timeline") {
   sources = [
     "animations_track_test.ts",
+    "annotations_test.ts",
     "auction_worklets_tracks_test.ts",
     "flamechart_test.ts",
     "gpu_track_test.ts",

test/interactions/panels/performance/timeline/annotations_test.ts

@@ -0,0 +1,22 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import {assert} from 'chai';
+
+import {click, waitFor} from '../../../../shared/helper.js';
+import {loadComponentDocExample} from '../../../helpers/shared.js';
+
+describe('Performance panel annotations', () => {
+  it('allows the user to click on an entry label to select the event', async () => {
+    await loadComponentDocExample('performance_panel/basic.html?trace=web-dev-modifications');
+    await waitFor('.timeline-flamechart');
+    await waitFor<HTMLElement>('.overlay-item.overlay-type-ENTRY_LABEL');
+    await click('.overlay-type-ENTRY_LABEL', {clickOptions: {offset: {x: 10, y: 10}}});
+
+    // Ensure that the right event hsa been selected by inspecting the details.
+    const details = await waitFor('.timeline-details-view-body');
+    const titleElem = await waitFor<HTMLElement>('.timeline-details-chip-title', details);
+    const title = await titleElem.evaluate(e => e.innerText);
+    assert.strictEqual(title, 'initializeApp');
+  });
+});