chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -31,7 +31,14 @@ import {
 import {TimelineFlameChartNetworkDataProvider} from './TimelineFlameChartNetworkDataProvider.js';
 import timelineFlameChartViewStyles from './timelineFlameChartView.css.js';
 import type {TimelineModeViewDelegate} from './TimelinePanel.js';
-import {TimelineSelection} from './TimelineSelection.js';
+import {
+  rangeForSelection,
+  selectionFromEvent,
+  selectionFromRangeMilliSeconds,
+  selectionIsEvent,
+  selectionIsRange,
+  type TimelineSelection,
+} from './TimelineSelection.js';
 import {AggregatedTimelineTreeView} from './TimelineTreeView.js';
 import type {TimelineMarkerStyle} from './TimelineUIUtils.js';
 
@@ -46,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;
@@ -348,6 +353,56 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     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);
@@ -374,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.
@@ -430,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;
     }
 
@@ -550,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));
@@ -751,7 +815,9 @@ 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),
@@ -935,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;
     }
 
@@ -951,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 {
@@ -1018,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;
     }
@@ -1033,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,
       });
     }
 
@@ -1094,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) {
@@ -1130,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;
   }
 
   /**
@@ -1319,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;
 
@@ -1346,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;
     }
@@ -1391,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();
   }
 
@@ -1459,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

@@ -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);

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 => {

package/front_end/panels/timeline/TimelinePanel.ts

@@ -71,7 +71,12 @@ import {TimelineLandingPage} from './TimelineLandingPage.js';
 import {TimelineLoader} from './TimelineLoader.js';
 import {TimelineMiniMap} from './TimelineMiniMap.js';
 import timelinePanelStyles from './timelinePanel.css.js';
-import {TimelineSelection} from './TimelineSelection.js';
+import {
+  rangeForSelection,
+  selectionFromEvent,
+  selectionIsRange,
+  type TimelineSelection,
+} from './TimelineSelection.js';
 import timelineStatusDialogStyles from './timelineStatusDialog.css.js';
 import {TimelineUIUtils} from './TimelineUIUtils.js';
 import {UIDevtoolsController} from './UIDevtoolsController.js';
@@ -279,9 +284,9 @@ const UIStrings = {
    */
   showSidebar: 'Show sidebar',
   /**
-   * @description Tooltip for the the sole sidebar toggle in the Performance panel. Command to close the sidebar.
+   * @description Tooltip for the the sidebar toggle in the Performance panel. Command to close the sidebar.
    */
-  hideSidebar: 'Hide sole sidebar',
+  hideSidebar: 'Hide sidebar',
   /**
    * @description Screen reader announcement when the sidebar is shown in the Performance panel.
    */
@@ -303,6 +308,14 @@ const UIStrings = {
    * @example {Paint} PH1
    */
   eventSelected: 'Event {PH1} selected',
+  /**
+   *@description Text of a hyperlink to documentation.
+   */
+  learnMore: 'Learn more',
+  /**
+   * @description Tooltip text for a button that takes the user back to the default view which shows performance metrics that are live.
+   */
+  backToLiveMetrics: 'Go back to the live metrics page',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelinePanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -379,6 +392,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   private brickBreakerToolbarButtonAdded = false;
   private loadButton!: UI.Toolbar.ToolbarButton;
   private saveButton!: UI.Toolbar.ToolbarButton|UI.Toolbar.ToolbarMenuButton;
+  private homeButton?: UI.Toolbar.ToolbarButton;
   private statusPane!: StatusPane|null;
   private landingPage!: UI.Widget.Widget;
   private loader?: TimelineLoader;
@@ -488,7 +502,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     this.showMemorySetting = Common.Settings.Settings.instance().createSetting('timeline-show-memory', false);
     this.showMemorySetting.setTitle(i18nString(UIStrings.memory));
-    this.showMemorySetting.addChangeListener(this.onModeChanged, this);
+    this.showMemorySetting.addChangeListener(this.onMemoryModeChanged, this);
 
     this.#thirdPartyTracksSetting = TimelinePanel.extensionDataVisibilitySetting();
     this.#thirdPartyTracksSetting.addChangeListener(this.#extensionDataVisibilityChanged, this);
@@ -545,8 +559,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     // is not on the DOM. That only happens when the sidebar tabbed pane component is set to Annotations.
     // In that case, clicking on the insight chip will do nothing.
     this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.InsightActivated.eventName, event => {
-      const {name, insightSetKey, overlays} = event;
-      this.#setActiveInsight({name, insightSetKey, overlays});
+      const {name, insightSetKey, overlays, relatedEvents} = event;
+      this.#setActiveInsight({name, insightSetKey, overlays, relatedEvents});
     });
 
     this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.InsightProvideOverlays.eventName, event => {
@@ -576,12 +590,12 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         });
 
     this.flameChart.element.addEventListener(TimelineInsights.EventRef.EventReferenceClick.eventName, event => {
-      const fromTraceEvent = TimelineSelection.fromTraceEvent(event.event);
+      const fromTraceEvent = selectionFromEvent(event.event);
       this.flameChart.setSelectionAndReveal(fromTraceEvent);
     });
 
     this.#sideBar.contentElement.addEventListener(TimelineInsights.EventRef.EventReferenceClick.eventName, event => {
-      this.select(TimelineSelection.fromTraceEvent(event.event));
+      this.select(selectionFromEvent(event.event));
     });
 
     this.#sideBar.element.addEventListener(TimelineComponents.Sidebar.RemoveAnnotation.eventName, event => {
@@ -601,7 +615,12 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       }
     });
 
-    this.onModeChanged();
+    this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.InsightSetZoom.eventName, event => {
+      TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(
+          event.bounds, {ignoreMiniMapBounds: true, shouldAnimate: true});
+    });
+
+    this.onMemoryModeChanged();
     this.populateToolbar();
     // The viewMode is set by default to the landing page, so we don't call
     // `#changeView` here and can instead directly call showLandingPage();
@@ -1003,6 +1022,18 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     // History
     this.panelToolbar.appendSeparator();
+
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS)) {
+      this.homeButton = new UI.Toolbar.ToolbarButton(
+          i18nString(UIStrings.backToLiveMetrics), 'home', undefined, 'timeline.back-to-live-metrics');
+      this.homeButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
+        this.#changeView({mode: 'LANDING_PAGE'});
+        this.#historyManager.navigateToLandingPage();
+      });
+      this.panelToolbar.appendToolbarItem(this.homeButton);
+      this.panelToolbar.appendSeparator();
+    }
+
     this.panelToolbar.appendToolbarItem(this.#historyManager.button());
     this.panelToolbar.registerCSSFiles([historyToolbarButtonStyles]);
     this.panelToolbar.appendSeparator();
@@ -1083,8 +1114,14 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     const thirdPartyToolbar = new UI.Toolbar.Toolbar('', throttlingPane.element);
     thirdPartyToolbar.makeVertical();
-    thirdPartyToolbar.appendToolbarItem(
-        this.createSettingCheckbox(this.#thirdPartyTracksSetting, i18nString(UIStrings.showDataAddedByExtensions)));
+    const thirdPartyCheckbox =
+        this.createSettingCheckbox(this.#thirdPartyTracksSetting, i18nString(UIStrings.showDataAddedByExtensions));
+
+    const localLink = UI.XLink.XLink.create(
+        'https://developer.chrome.com/docs/devtools/performance/extension', i18nString(UIStrings.learnMore));
+    localLink.style.paddingLeft = '5px';
+    thirdPartyCheckbox.element.shadowRoot?.appendChild(localLink);
+    thirdPartyToolbar.appendToolbarItem(thirdPartyCheckbox);
 
     this.showSettingsPaneSetting.addChangeListener(this.updateSettingsPaneVisibility.bind(this));
     this.updateSettingsPaneVisibility();
@@ -1279,7 +1316,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     });
   }
 
-  private onModeChanged(): void {
+  private onMemoryModeChanged(): void {
     this.flameChart.updateCountersGraphToggle(this.showMemorySetting.get());
     this.updateMiniMap();
     this.doResize();
@@ -1580,6 +1617,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.dropTarget.setEnabled(this.state === State.IDLE);
     this.loadButton.setEnabled(this.state === State.IDLE);
     this.saveButton.setEnabled(this.state === State.IDLE && this.#hasActiveTrace());
+    this.homeButton?.setEnabled(this.state === State.IDLE && this.#hasActiveTrace());
     if (this.#viewMode.mode === 'VIEWING_TRACE') {
       this.#addSidebarIconToToolbar();
     }
@@ -1821,6 +1859,10 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
    * We also check that the experiments are enabled, else we reveal an entirely empty sidebar.
    */
   #showSidebarIfRequired(): void {
+    if (Root.Runtime.Runtime.queryParam('disable-auto-performance-sidebar-reveal') !== null) {
+      // Used in interaction tests & screenshot tests.
+      return;
+    }
     const needToRestore = this.#restoreSidebarVisibilityOnTraceLoad;
     const userHasSeenSidebar = this.#sideBar.userHasOpenedSidebarOnce();
     const experimentsEnabled = this.#panelSidebarEnabled();
@@ -2165,38 +2207,33 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     void this.stopRecording();
   }
 
-  private frameForSelection(selection: TimelineSelection): Trace.Handlers.ModelHandlers.Frames.TimelineFrame|null {
+  private frameForSelection(selection: TimelineSelection): Trace.Types.Events.LegacyTimelineFrame|null {
     if (this.#viewMode.mode !== 'VIEWING_TRACE') {
       return null;
     }
-    if (TimelineSelection.isLegacyTimelineFrame(selection.object) &&
-        selection.object instanceof Trace.Handlers.ModelHandlers.Frames.TimelineFrame) {
-      return selection.object;
+    if (selectionIsRange(selection)) {
+      return null;
     }
-    if (TimelineSelection.isRangeSelection(selection.object) ||
-        TimelineSelection.isSyntheticNetworkRequestDetailsEventSelection(selection.object)) {
+    if (Trace.Types.Events.isSyntheticNetworkRequest(selection.event)) {
       return null;
     }
-    if (TimelineSelection.isTraceEventSelection(selection.object)) {
-      const parsedTrace = this.#traceEngineModel.parsedTrace(this.#viewMode.traceIndex);
-      if (!parsedTrace) {
-        return null;
-      }
-      // If the user has selected a time range, the frame we want is the last
-      // frame in that time window, hence why the window we look for is the
-      // endTime to the endTime.
-      const endTimeMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(selection.endTime);
-      const lastFrameInSelection = Trace.Handlers.ModelHandlers.Frames
-                                       .framesWithinWindow(
-                                           parsedTrace.Frames.frames,
-                                           endTimeMicro,
-                                           endTimeMicro,
-                                           )
-                                       .at(0);
-      return lastFrameInSelection || null;
-    }
-    console.assert(false, 'Should never be reached');
-    return null;
+
+    // If the user has selected a random trace event, the frame we want is the last
+    // frame in that time window, hence why the window we look for is the
+    // endTime to the endTime.
+    const parsedTrace = this.#traceEngineModel.parsedTrace(this.#viewMode.traceIndex);
+    if (!parsedTrace) {
+      return null;
+    }
+    const endTime = rangeForSelection(selection).max;
+    const lastFrameInSelection = Trace.Handlers.ModelHandlers.Frames
+                                     .framesWithinWindow(
+                                         parsedTrace.Frames.frames,
+                                         endTime,
+                                         endTime,
+                                         )
+                                     .at(0);
+    return lastFrameInSelection || null;
   }
 
   jumpToFrame(offset: number): true|undefined {
@@ -2218,7 +2255,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.#revealTimeRange(
         Trace.Helpers.Timing.microSecondsToMilliseconds(frame.startTime),
         Trace.Helpers.Timing.microSecondsToMilliseconds(frame.endTime));
-    this.select(TimelineSelection.fromFrame(frame));
+    this.select(selectionFromEvent(frame));
     return true;
   }
 
@@ -2230,18 +2267,19 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       return;
     }
 
-    if (TimelineSelection.isRangeSelection(newSelection.object)) {
+    if (selectionIsRange(newSelection)) {
       // We don't announce here; within the annotations code we announce when
       // the user creates a new time range selection. So if we also announce
       // here we will duplicate and overwhelm rather than be useful.
       return;
     }
-    if (TimelineSelection.isLegacyTimelineFrame(newSelection.object)) {
+
+    // Announce the type of event that was selected (special casing frames.)
+    if (Trace.Types.Events.isLegacyTimelineFrame(newSelection.event)) {
       UI.ARIAUtils.alert(i18nString(UIStrings.frameSelected));
       return;
     }
-    // At this point we know the object is a trace event
-    const name = TimelineComponents.EntryName.nameForEntry(newSelection.object);
+    const name = Utils.EntryName.nameForEntry(newSelection.event);
     UI.ARIAUtils.alert(i18nString(UIStrings.eventSelected, {PH1: name}));
   }
 
@@ -2270,7 +2308,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         break;
       }
       if (ActiveFilters.instance().isVisible(event) && endTime >= time) {
-        this.select(TimelineSelection.fromTraceEvent(event));
+        this.select(selectionFromEvent(event));
         return;
       }
     }
@@ -2535,6 +2573,13 @@ export class TraceRevealer implements Common.Revealer.Revealer<SDK.TraceObject.T
   }
 }
 
+export class EventRevealer implements Common.Revealer.Revealer<SDK.TraceObject.RevealableEvent> {
+  async reveal(rEvent: SDK.TraceObject.RevealableEvent): Promise<void> {
+    await UI.ViewManager.ViewManager.instance().showView('timeline');
+    TimelinePanel.instance().select(selectionFromEvent(rEvent.event));
+  }
+}
+
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(context: UI.Context.Context, actionId: string): boolean {
     const panel = context.flavor(TimelinePanel);