chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -19,6 +19,7 @@ import type * as TimelineComponents from './components/components.js';
 import {CountersGraph} from './CountersGraph.js';
 import {SHOULD_SHOW_EASTER_EGG} from './EasterEgg.js';
 import {ModificationsManager} from './ModificationsManager.js';
+import * as OverlayComponents from './overlays/components/components.js';
 import * as Overlays from './overlays/overlays.js';
 import {targetForEvent} from './TargetForEvent.js';
 import {TimelineDetailsView} from './TimelineDetailsView.js';
@@ -29,10 +30,17 @@ import {
 } from './TimelineFlameChartDataProvider.js';
 import {TimelineFlameChartNetworkDataProvider} from './TimelineFlameChartNetworkDataProvider.js';
 import timelineFlameChartViewStyles from './timelineFlameChartView.css.js';
-import {type TimelineModeViewDelegate} from './TimelinePanel.js';
-import {TimelineSelection} from './TimelineSelection.js';
+import type {TimelineModeViewDelegate} from './TimelinePanel.js';
+import {
+  rangeForSelection,
+  selectionFromEvent,
+  selectionFromRangeMilliSeconds,
+  selectionIsEvent,
+  selectionIsRange,
+  type TimelineSelection,
+} from './TimelineSelection.js';
 import {AggregatedTimelineTreeView} from './TimelineTreeView.js';
-import {type TimelineMarkerStyle} from './TimelineUIUtils.js';
+import type {TimelineMarkerStyle} from './TimelineUIUtils.js';
 
 const UIStrings = {
   /**
@@ -45,8 +53,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineFlameChartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const MAX_HIGHLIGHTED_SEARCH_ELEMENTS: number = 200;
-
 export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.FlameChart.FlameChartDelegate,
                                                                       UI.SearchableView.Searchable {
   private readonly delegate: TimelineModeViewDelegate;
@@ -96,7 +102,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   private selectedSearchResult?: PerfUI.FlameChart.DataProviderSearchResult;
   private searchRegex?: RegExp;
   #parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
-  #traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null = null;
+  #traceInsightSets: Trace.Insights.Types.TraceInsightSets|null = null;
+  #eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
   #selectedGroupName: string|null = null;
   #onTraceBoundsChangeBound = this.#onTraceBoundsChange.bind(this);
   #gameKeyMatches = 0;
@@ -171,7 +178,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.mainFlameChart.addEventListener(PerfUI.FlameChart.Events.LATEST_DRAW_DIMENSIONS, dimensions => {
       this.#overlays.updateChartDimensions('main', dimensions.data.chart);
       this.#overlays.updateVisibleWindow(dimensions.data.traceWindow);
-      this.#overlays.update();
+      void this.#overlays.update();
     });
 
     this.networkFlameChartGroupExpansionSetting =
@@ -188,7 +195,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.networkFlameChart.addEventListener(PerfUI.FlameChart.Events.LATEST_DRAW_DIMENSIONS, dimensions => {
       this.#overlays.updateChartDimensions('network', dimensions.data.chart);
       this.#overlays.updateVisibleWindow(dimensions.data.traceWindow);
-      this.#overlays.update();
+      void this.#overlays.update();
 
       // If the height of the network chart has changed, we need to tell the
       // main flame chart because its tooltips are positioned based in part on
@@ -197,11 +204,11 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     });
 
     this.mainFlameChart.addEventListener(PerfUI.FlameChart.Events.MOUSE_MOVE, event => {
-      this.#processFlameChartMouseMoveEvent(event.data);
+      void this.#processFlameChartMouseMoveEvent(event.data);
     });
 
     this.networkFlameChart.addEventListener(PerfUI.FlameChart.Events.MOUSE_MOVE, event => {
-      this.#processFlameChartMouseMoveEvent(event.data);
+      void this.#processFlameChartMouseMoveEvent(event.data);
     });
 
     this.#overlays = new Overlays.Overlays.Overlays({
@@ -243,6 +250,24 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
       }
     });
 
+    this.element.addEventListener(OverlayComponents.EntriesLinkOverlay.EntryLinkStartCreating.eventName, () => {
+      /**
+       * When the user creates an entries link, they click on the arrow icon to
+       * begin creating it. At this point the arrow icon gets deleted. This
+       * causes the focus of the page by default to jump to the entire Timeline
+       * Panel. This is a bit aggressive; and problematic as it means we cannot
+       * use <ESC> to cancel the creation of the entry. So instead we focus the
+       * TimelineFlameChartView instead. This means that the user's <ESC> gets
+       * dealt with in its keydown.
+       * If the user goes ahead and creates the entry, they will end up
+       * focused on whichever target entry they pick, so this only matters for
+       * the case where the user hits <ESC> to cancel.
+       */
+      this.focus();
+    });
+
+    this.element.setAttribute('jslog', `${VisualLogging.section('timeline.flame-chart-view')}`);
+
     this.networkPane = new UI.Widget.VBox();
     this.networkPane.setMinimumSize(23, 23);
     this.networkFlameChart.show(this.networkPane.element);
@@ -324,6 +349,60 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     TraceBounds.TraceBounds.onChange(this.#onTraceBoundsChangeBound);
   }
 
+  containingElement(): HTMLElement {
+    return this.element;
+  }
+
+  #dimInsightRelatedEvents(relatedEvents: Trace.Types.Events.Event[]): void {
+    // Dim all events except those related to the active insight.
+    const relevantMainEvents = relatedEvents.map(event => this.mainDataProvider.indexForEvent(event) ?? -1);
+    const relevantNetworkEvents = relatedEvents.map(event => this.networkDataProvider.indexForEvent(event) ?? -1);
+
+    // Further, overlays defining a trace bounds do not dim an event that falls within those bounds.
+    for (const overlay of this.#currentInsightOverlays) {
+      let bounds;
+      if (overlay.type === 'TIMESPAN_BREAKDOWN') {
+        const firstSection = overlay.sections.at(0);
+        const lastSection = overlay.sections.at(-1);
+        if (firstSection && lastSection) {
+          bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(firstSection.bounds.min, lastSection.bounds.max);
+        }
+      } else if (overlay.type === 'TIME_RANGE') {
+        bounds = overlay.bounds;
+      }
+
+      if (!bounds) {
+        continue;
+      }
+
+      let provider, relevantEvents;
+
+      // Using a relevant event for the overlay, determine which provider this overlay is for.
+      const overlayEvent = Overlays.Overlays.entriesForOverlay(overlay).at(0);
+      if (overlayEvent) {
+        if (this.mainDataProvider.indexForEvent(overlayEvent) !== null) {
+          provider = this.mainDataProvider;
+          relevantEvents = relevantMainEvents;
+        } else if (this.networkDataProvider.indexForEvent(overlayEvent) !== null) {
+          provider = this.networkDataProvider;
+          relevantEvents = relevantNetworkEvents;
+        }
+      } else if (overlay.type === 'TIMESPAN_BREAKDOWN') {
+        // For this overlay type, if there is no associated event it is rendered on mainFlameChart.
+        provider = this.mainDataProvider;
+        relevantEvents = relevantMainEvents;
+      }
+
+      if (!provider || !relevantEvents) {
+        continue;
+      }
+
+      relevantEvents.push(...provider.search(bounds).map(r => r.index));
+    }
+    this.mainFlameChart.enableDimming(relevantMainEvents);
+    this.networkFlameChart.enableDimming(relevantNetworkEvents);
+  }
+
   setOverlays(overlays: Overlays.Overlays.TimelineOverlay[], options: Overlays.Overlays.TimelineOverlaySetOptions):
       void {
     this.bulkRemoveOverlays(this.#currentInsightOverlays);
@@ -350,6 +429,13 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
       this.#expandEntryTrack(entry);
     }
 
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS)) {
+      // The insight's `relatedEvents` property likely already includes the events associated with
+      // and overlay, but just in case not, include both arrays. Duplicates are fine.
+      const relatedEvents = [...entries, ...this.#activeInsight?.relatedEvents || []];
+      this.#dimInsightRelatedEvents(relatedEvents);
+    }
+
     if (options.updateTraceWindow) {
       const overlaysBounds = Overlays.Overlays.traceWindowContainingOverlays(this.#currentInsightOverlays);
       // Trace window covering all overlays expanded by 100% so that the overlays cover 50% of the visible window.
@@ -406,6 +492,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.bulkRemoveOverlays(this.#currentInsightOverlays);
 
     if (!this.#activeInsight) {
+      this.mainFlameChart.disableDimming();
+      this.networkFlameChart.disableDimming();
       return;
     }
 
@@ -436,7 +524,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     }
   }
 
-  #processFlameChartMouseMoveEvent(data: PerfUI.FlameChart.EventTypes['MouseMove']): void {
+  async #processFlameChartMouseMoveEvent(data: PerfUI.FlameChart.EventTypes['MouseMove']): Promise<void> {
     const {mouseEvent, timeInMicroSeconds} = data;
     // If the user is no longer holding shift, remove any existing marker.
     if (!mouseEvent.shiftKey) {
@@ -444,7 +532,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
       if (removedCount > 0) {
         // Don't trigger lots of updates on a mouse move if we didn't actually
         // remove any overlays.
-        this.#overlays.update();
+        await this.#overlays.update();
       }
     }
 
@@ -526,7 +614,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
             let startTime = visibleWindow.min;
             // Prefer the start time of the selected event, if there is one.
             if (this.#currentSelection) {
-              startTime = Trace.Helpers.Timing.millisecondsToMicroseconds(this.#currentSelection.startTime);
+              startTime = rangeForSelection(this.#currentSelection).min;
             }
             this.#createNewTimeRangeFromKeyboard(
                 startTime, Trace.Types.Timing.MicroSeconds(startTime + timeRangeIncrementValue));
@@ -607,10 +695,14 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
 
     // `CREATION_NOT_STARTED` is only true in the state when both empty label and button to create connection are
     // created at the same time. If any key is typed in that state, it means that the label is in focus and the key
-    // is typed into the label. In that case, delete the connection.
+    // is typed into the label. This tells us that the user chose to create the
+    // label, not the connection. In that case, delete the connection.
     if (this.#linkSelectionAnnotation &&
         this.#linkSelectionAnnotation.state === Trace.Types.File.EntriesLinkState.CREATION_NOT_STARTED) {
       this.#clearLinkSelectionAnnotation(true);
+      // We have dealt with the keypress as the user is typing into the label, so do not let it propogate up.
+      // This also ensures that if the user uses "Escape" they don't toggle the DevTools drawer.
+      event.stopPropagation();
     }
 
     /**
@@ -620,6 +712,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     if (event.key === 'Escape' && this.#linkSelectionAnnotation) {
       this.#clearLinkSelectionAnnotation(true);
       event.stopPropagation();
+      event.preventDefault();
     }
 
     const eventHandledByKeyboardTimeRange = this.#handleTimeRangeKeyboardCreation(event);
@@ -697,7 +790,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   }
 
   extensionDataVisibilityChanged(): void {
-    this.#reset();
+    this.reset();
+    this.setupWindowTimes();
     this.mainDataProvider.reset(true);
     this.mainDataProvider.timelineData(true);
     this.refreshMainFlameChart();
@@ -721,16 +815,21 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
    * TODO(crbug.com/346312365): update the type definitions in ChartViewport.ts
    */
   updateRangeSelection(startTime: number, endTime: number): void {
-    this.delegate.select(TimelineSelection.fromRange(startTime, endTime));
+    this.delegate.select(selectionFromRangeMilliSeconds(
+        Trace.Types.Timing.MilliSeconds(startTime), Trace.Types.Timing.MilliSeconds(endTime)));
+
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS)) {
       const bounds = Trace.Helpers.Timing.traceWindowFromMilliSeconds(
           Trace.Types.Timing.MilliSeconds(startTime),
           Trace.Types.Timing.MilliSeconds(endTime),
       );
 
-      // If the current time range annotation has a label, the range selection
-      // for it is finished and we need to create a new time range annotations.
-      if (this.#timeRangeSelectionAnnotation && !this.#timeRangeSelectionAnnotation?.label) {
+      // If the current time range annotation exists, the range selection
+      // for it is in progress and we need to update its bounds.
+      //
+      // When the range selection is finished, the current range is set to null.
+      // If the current selection is null, create a new time range annotations.
+      if (this.#timeRangeSelectionAnnotation) {
         this.#timeRangeSelectionAnnotation.bounds = bounds;
         ModificationsManager.activeManager()?.updateAnnotation(this.#timeRangeSelectionAnnotation);
       } else {
@@ -739,6 +838,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
           label: '',
           bounds,
         };
+        // Before creating a new range, make sure to delete the empty ranges.
+        ModificationsManager.activeManager()?.deleteEmptyRangeAnnotations();
         ModificationsManager.activeManager()?.createAnnotation(this.#timeRangeSelectionAnnotation);
       }
     }
@@ -772,19 +873,27 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.#selectedEvents = null;
     this.mainDataProvider.setModel(newParsedTrace, isCpuProfile);
     this.networkDataProvider.setModel(newParsedTrace);
-    this.#reset();
+    this.reset();
+    this.setupWindowTimes();
     this.updateSearchResults(false, false);
     this.refreshMainFlameChart();
     this.#updateFlameCharts();
   }
 
-  setInsights(insights: Trace.Insights.Types.TraceInsightSets|null): void {
-    if (this.#traceInsightsSets !== insights) {
-      this.#traceInsightsSets = insights;
+  setInsights(
+      insights: Trace.Insights.Types.TraceInsightSets|null,
+      eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap): void {
+    if (this.#traceInsightSets === insights) {
+      return;
     }
+
+    this.#traceInsightSets = insights;
+    this.#eventToRelatedInsightsMap = eventToRelatedInsightsMap;
+    // The DetailsView is provided with the InsightSets, so make sure we update it.
+    this.#updateDetailViews();
   }
 
-  #reset(): void {
+  reset(): void {
     if (this.networkDataProvider.isEmpty()) {
       this.mainFlameChart.enableRuler(true);
       this.networkSplitWidget.hideSidebar();
@@ -797,7 +906,10 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.mainFlameChart.reset();
     this.networkFlameChart.reset();
     this.updateSearchResults(false, false);
+  }
 
+  // TODO(paulirish): It's possible this is being called more than necessary. Attempt to clean up the lifecycle.
+  setupWindowTimes(): void {
     const traceBoundsState = TraceBounds.TraceBounds.BoundsManager.instance().state();
     if (!traceBoundsState) {
       throw new Error('TimelineFlameChartView could not set the window bounds.');
@@ -817,7 +929,12 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
 
   #updateDetailViews(): void {
     this.countersView.setModel(this.#parsedTrace, this.#selectedEvents);
-    void this.detailsView.setModel(this.#parsedTrace, this.#selectedEvents, this.#traceInsightsSets);
+    void this.detailsView.setModel({
+      parsedTrace: this.#parsedTrace,
+      selectedEvents: this.#selectedEvents,
+      traceInsightsSets: this.#traceInsightSets,
+      eventToRelatedInsightsMap: this.#eventToRelatedInsightsMap,
+    });
   }
 
   #updateFlameCharts(): void {
@@ -884,7 +1001,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     if (!event || !this.#parsedTrace) {
       return;
     }
-    if (event instanceof Trace.Handlers.ModelHandlers.Frames.TimelineFrame) {
+    if (Trace.Types.Events.isLegacyTimelineFrame(event)) {
       return;
     }
 
@@ -900,8 +1017,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   }
 
   highlightEvent(event: Trace.Types.Events.Event|null): void {
-    const entryIndex =
-        event ? this.mainDataProvider.entryIndexForSelection(TimelineSelection.fromTraceEvent(event)) : -1;
+    const entryIndex = event ? this.mainDataProvider.entryIndexForSelection(selectionFromEvent(event)) : -1;
     if (entryIndex >= 0) {
       this.mainFlameChart.highlightEntry(entryIndex);
     } else {
@@ -935,9 +1051,9 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   revealEvent(event: Trace.Types.Events.Event): void {
     const mainIndex = this.mainDataProvider.indexForEvent(event);
     const networkIndex = this.networkDataProvider.indexForEvent(event);
-    if (mainIndex) {
+    if (mainIndex !== null) {
       this.mainFlameChart.revealEntry(mainIndex);
-    } else if (networkIndex) {
+    } else if (networkIndex !== null) {
       this.networkFlameChart.revealEntry(networkIndex);
     }
   }
@@ -946,9 +1062,9 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   revealEventVertically(event: Trace.Types.Events.Event): void {
     const mainIndex = this.mainDataProvider.indexForEvent(event);
     const networkIndex = this.networkDataProvider.indexForEvent(event);
-    if (mainIndex) {
+    if (mainIndex !== null) {
       this.mainFlameChart.revealEntryVertically(mainIndex);
-    } else if (networkIndex) {
+    } else if (networkIndex !== null) {
       this.networkFlameChart.revealEntryVertically(networkIndex);
     }
   }
@@ -967,8 +1083,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     // AND 2. we have an active time range selection overlay
     // AND 3. The label of the selection is empty
     // then we need to remove it.
-    if ((selection === null || !TimelineSelection.isRangeSelection(selection.object)) &&
-        this.#timeRangeSelectionAnnotation && !this.#timeRangeSelectionAnnotation.label) {
+    if ((selection === null || !selectionIsRange(selection)) && this.#timeRangeSelectionAnnotation &&
+        !this.#timeRangeSelectionAnnotation.label) {
       ModificationsManager.activeManager()?.removeAnnotation(this.#timeRangeSelectionAnnotation);
       this.#timeRangeSelectionAnnotation = null;
     }
@@ -982,14 +1098,11 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
       void this.detailsView.setSelection(selection);
     }
 
-    // Create the entry selected overlay if the selection represents a frame or trace event (either network, or anything else)
-    if (selection &&
-        (TimelineSelection.isTraceEventSelection(selection.object) ||
-         TimelineSelection.isSyntheticNetworkRequestDetailsEventSelection(selection.object) ||
-         TimelineSelection.isLegacyTimelineFrame(selection.object))) {
+    // Create the entry selected overlay if the selection represents a trace event
+    if (selectionIsEvent(selection)) {
       this.addOverlay({
         type: 'ENTRY_SELECTED',
-        entry: selection.object,
+        entry: selection.event,
       });
     }
 
@@ -1006,12 +1119,12 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     for (const overlay of overlays) {
       this.#overlays.add(overlay);
     }
-    this.#overlays.update();
+    void this.#overlays.update();
   }
 
   addOverlay<T extends Overlays.Overlays.TimelineOverlay>(newOverlay: T): T {
     const overlay = this.#overlays.add(newOverlay);
-    this.#overlays.update();
+    void this.#overlays.update();
     return overlay;
   }
 
@@ -1023,16 +1136,16 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     for (const overlay of overlays) {
       this.#overlays.remove(overlay);
     }
-    this.#overlays.update();
+    void this.#overlays.update();
   }
   removeOverlay(removedOverlay: Overlays.Overlays.TimelineOverlay): void {
     this.#overlays.remove(removedOverlay);
-    this.#overlays.update();
+    void this.#overlays.update();
   }
 
   updateExistingOverlay<T extends Overlays.Overlays.TimelineOverlay>(existingOverlay: T, newData: Partial<T>): void {
     this.#overlays.updateExisting(existingOverlay, newData);
-    this.#overlays.update();
+    void this.#overlays.update();
   }
 
   enterLabelEditMode(overlay: Overlays.Overlays.EntryLabel): void {
@@ -1043,14 +1156,11 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
       dataProvider: TimelineFlameChartDataProvider|TimelineFlameChartNetworkDataProvider,
       event: Common.EventTarget.EventTargetEvent<{entryIndex: number, withLinkCreationButton: boolean}>): void {
     const selection = dataProvider.createSelection(event.data.entryIndex);
-    if (selection &&
-        (TimelineSelection.isTraceEventSelection(selection.object) ||
-         TimelineSelection.isSyntheticNetworkRequestDetailsEventSelection(selection.object) ||
-         TimelineSelection.isLegacyTimelineFrame(selection.object))) {
+    if (selectionIsEvent(selection)) {
       this.setSelectionAndReveal(selection);
       ModificationsManager.activeManager()?.createAnnotation({
         type: 'ENTRY_LABEL',
-        entry: selection.object,
+        entry: selection.event,
         label: '',
       });
       if (event.data.withLinkCreationButton) {
@@ -1079,22 +1189,9 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
 
   #selectionIfTraceEvent(
       index: number, dataProvider: TimelineFlameChartDataProvider|TimelineFlameChartNetworkDataProvider):
-      Trace.Types.Events.Event|Trace.Types.Events.SyntheticNetworkRequest|null {
+      Trace.Types.Events.Event|null {
     const selection = dataProvider.createSelection(index);
-    if (!selection) {
-      return null;
-    }
-
-    if (TimelineSelection.isTraceEventSelection(selection.object) ||
-        TimelineSelection.isSyntheticNetworkRequestDetailsEventSelection(selection.object)) {
-      return selection.object;
-    }
-
-    if (TimelineSelection.isLegacyTimelineFrame(selection.object)) {
-      return selection.object as Trace.Types.Events.LegacyTimelineFrame;
-    }
-
-    return null;
+    return selectionIsEvent(selection) ? selection.event : null;
   }
 
   /**
@@ -1268,11 +1365,11 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     const oldSelectedSearchResult = this.selectedSearchResult;
     delete this.selectedSearchResult;
     this.searchResults = [];
-    this.mainFlameChart.removeSearchResultHighlights();
-    this.networkFlameChart.removeSearchResultHighlights();
     if (!this.searchRegex) {
       return;
     }
+    this.mainFlameChart.removeSearchResultHighlights();
+    this.networkFlameChart.removeSearchResultHighlights();
     const regExpFilter = new TimelineRegExp(this.searchRegex);
     const visibleWindow = traceBoundsState.micro.timelineTraceWindow;
 
@@ -1295,13 +1392,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
 
     this.searchableView.updateSearchMatchesCount(this.searchResults.length);
 
-    // To avoid too many highlights when the search regex matches too many entries,
-    // for example, when user only types in "e" as the search query,
-    // We only highlight the search results when the number of matches is less than or equal to 200.
-    if (this.searchResults.length <= MAX_HIGHLIGHTED_SEARCH_ELEMENTS) {
-      this.mainFlameChart.highlightAllEntries(mainMatches.map(m => m.index));
-      this.networkFlameChart.highlightAllEntries(networkMatches.map(m => m.index));
-    }
+    this.mainFlameChart.highlightAllEntries(mainMatches.map(m => m.index));
+    this.networkFlameChart.highlightAllEntries(networkMatches.map(m => m.index));
     if (!shouldJump || !this.searchResults.length) {
       return;
     }
@@ -1340,9 +1432,9 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     delete this.searchResults;
     delete this.selectedSearchResult;
     delete this.searchRegex;
-    this.mainFlameChart.showPopoverForSearchResult(-1);
+    this.mainFlameChart.showPopoverForSearchResult(null);
     this.mainFlameChart.removeSearchResultHighlights();
-    this.networkFlameChart.showPopoverForSearchResult(-1);
+    this.networkFlameChart.showPopoverForSearchResult(null);
     this.networkFlameChart.removeSearchResultHighlights();
   }
 
@@ -1350,6 +1442,16 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.searchRegex = searchConfig.toSearchRegex().regex;
     this.updateSearchResults(shouldJump, jumpBackwards);
   }
+
+  togglePopover({event, show}: {event: Trace.Types.Events.Event, show: boolean}): void {
+    const entryIndex = this.mainDataProvider.indexForEvent(event);
+    if (show && entryIndex) {
+      this.mainFlameChart.setSelectedEntry(entryIndex);
+      this.mainFlameChart.showPopoverForSearchResult(entryIndex);
+    } else {
+      this.mainFlameChart.hideHighlight();
+    }
+  }
 }
 
 export class Selection {
@@ -1398,17 +1500,21 @@ export class TimelineFlameChartMarker implements PerfUI.FlameChart.FlameChartMar
       return;
     }
 
-    context.save();
-    if (this.style.tall) {
-      context.strokeStyle = this.style.color;
-      context.lineWidth = this.style.lineWidth;
-      context.translate(this.style.lineWidth < 1 || (this.style.lineWidth & 1) ? 0.5 : 0, 0.5);
-      context.beginPath();
-      context.moveTo(x, 0);
-      context.setLineDash(this.style.dashStyle);
-      context.lineTo(x, context.canvas.height);
-      context.stroke();
+    if (!this.style.tall) {
+      return;
     }
+
+    context.save();
+
+    context.strokeStyle = this.style.color;
+    context.lineWidth = this.style.lineWidth;
+    context.translate(this.style.lineWidth < 1 || (this.style.lineWidth & 1) ? 0.5 : 0, 0.5);
+    context.beginPath();
+    context.moveTo(x, 0);
+    context.setLineDash(this.style.dashStyle);
+    context.lineTo(x, context.canvas.height);
+    context.stroke();
+
     context.restore();
   }
 }

package/front_end/panels/timeline/TimelineHistoryManager.ts

@@ -19,7 +19,7 @@ import {
   TimelineEventOverviewResponsiveness,
 } from './TimelineEventOverview.js';
 import timelineHistoryManagerStyles from './timelineHistoryManager.css.js';
-import {type TimelineMiniMap} from './TimelineMiniMap.js';
+import type {TimelineMiniMap} from './TimelineMiniMap.js';
 
 /**
  * The dropdown works by returning an index which is the trace index; but we
@@ -322,6 +322,10 @@ export class TimelineHistoryManager {
     return this.recordings[newIndex];
   }
 
+  navigateToLandingPage(): void {
+    this.#setActiveTrace({type: 'LANDING_PAGE'});
+  }
+
   #setActiveTrace(item: RecordingData): void {
     if (item.type === 'TRACE_INDEX') {
       const data = TimelineHistoryManager.dataForTraceIndex(item.parsedTraceIndex);
@@ -389,6 +393,7 @@ export class TimelineHistoryManager {
     const titleWithSequenceNumber = i18nString(UIStrings.sD, {PH1: domain, PH2: sequenceNumber});
     this.nextNumberByDomain.set(domain, sequenceNumber + 1);
     const timeElement = document.createElement('span');
+    timeElement.classList.add('time');
 
     const preview = document.createElement('div');
     preview.classList.add('preview-item');
@@ -438,6 +443,7 @@ export class TimelineHistoryManager {
     if (!lastFrame) {
       return container;
     }
+    // TODO(paulirish): Adopt Util.ImageCache
     void UI.UIUtils.loadImage(lastFrame.screenshotEvent.args.dataUri).then(img => {
       if (img) {
         container.appendChild(img);

package/front_end/panels/timeline/TimelineLoader.ts

@@ -11,7 +11,7 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 
-import {type Client} from './TimelineController.js';
+import type {Client} from './TimelineController.js';
 
 const UIStrings = {
   /**

package/front_end/panels/timeline/TimelineMiniMap.ts

@@ -5,10 +5,8 @@
 import * as Common from '../../core/common/common.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as TimelineComponents from './components/components.js';
 import {ModificationsManager} from './ModificationsManager.js';
@@ -57,12 +55,6 @@ export class TimelineMiniMap extends
     this.#breadcrumbsUI = new TimelineComponents.BreadcrumbsUI.BreadcrumbsUI();
     this.element.prepend(this.#breadcrumbsUI);
 
-    const icon = new IconButton.Icon.Icon();
-    icon.setAttribute('name', 'left-panel-open');
-    icon.setAttribute('jslog', `${VisualLogging.action('timeline.sidebar-open').track({click: true})}`);
-    icon.addEventListener('click', () => {
-      this.dispatchEventToListeners(PerfUI.TimelineOverviewPane.Events.OPEN_SIDEBAR_BUTTON_CLICKED, {});
-    });
     this.#overviewComponent.show(this.element);
 
     this.#overviewComponent.addEventListener(PerfUI.TimelineOverviewPane.Events.OVERVIEW_PANE_WINDOW_CHANGED, event => {