chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

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';
@@ -177,10 +182,6 @@ const UIStrings = {
    *@description Text in Timeline Panel of the Performance panel
    */
   NetworkThrottlingIsEnabled: '- Network throttling is enabled',
-  /**
-   *@description Text in Timeline Panel of the Performance panel
-   */
-  HardwareConcurrencyIsEnabled: '- Hardware concurrency override is enabled',
   /**
    *@description Text in Timeline Panel of the Performance panel
    */
@@ -283,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.
    */
@@ -307,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_);
@@ -383,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;
@@ -434,6 +444,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
    */
   #pendingAriaMessage: string|null = null;
 
+  #eventToRelatedInsights: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap = new Map();
+
   constructor() {
     super('timeline');
     const adornerContent = document.createElement('span');
@@ -453,12 +465,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.brickBreakerToolbarButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.fixMe), adorner);
     this.brickBreakerToolbarButton.addEventListener(
         UI.Toolbar.ToolbarButton.Events.CLICK, () => this.#onBrickBreakerEasterEggClick());
-    const config = Trace.Types.Configuration.defaults();
-    config.showAllEvents = Root.Runtime.experiments.isEnabled('timeline-show-all-events');
-    config.includeRuntimeCallStats = Root.Runtime.experiments.isEnabled('timeline-v8-runtime-call-stats');
-    config.debugMode = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE);
 
-    this.#traceEngineModel = Trace.TraceModel.Model.createWithAllHandlers(config);
+    this.#traceEngineModel = this.#instantiateNewModel();
     this.#listenForProcessingProgress();
 
     this.element.addEventListener('contextmenu', this.contextMenu.bind(this), false);
@@ -494,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);
@@ -524,6 +532,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     this.flameChart = new TimelineFlameChartView(this);
     this.#onChartPlayableStateChangeBound = this.#onChartPlayableStateChange.bind(this);
+    this.element.addEventListener(
+        'toggle-popover', event => this.flameChart.togglePopover((event as CustomEvent).detail));
 
     this.flameChart.getMainFlameChart().addEventListener(
         PerfUI.FlameChart.Events.CHART_PLAYABLE_STATE_CHANGED, this.#onChartPlayableStateChangeBound, this);
@@ -545,9 +555,12 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       this.#setActiveInsight(null);
     });
 
+    // TODO(crbug.com/372946179): when clicking on an insight chip, this event never fires if the insight tab
+    // 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 => {
@@ -563,9 +576,26 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       }
     });
 
-    this.#sideBar.contentElement.addEventListener(TimelineInsights.Helpers.EventReferenceClick.eventName, event => {
-      const {metricEvent} = event;
-      this.select(TimelineSelection.fromTraceEvent(metricEvent));
+    this.#sideBar.element.addEventListener(
+        TimelineInsights.SidebarInsight.InsightProvideRelatedEvents.eventName, event => {
+          const relatedInsight = {
+            insightLabel: event.label,
+            activateInsight: event.activateInsight,
+          };
+          for (const traceEvent of event.events) {
+            const relatedInsights = this.#eventToRelatedInsights.get(traceEvent) ?? [];
+            relatedInsights.push(relatedInsight);
+            this.#eventToRelatedInsights.set(traceEvent, relatedInsights);
+          }
+        });
+
+    this.flameChart.element.addEventListener(TimelineInsights.EventRef.EventReferenceClick.eventName, event => {
+      const fromTraceEvent = selectionFromEvent(event.event);
+      this.flameChart.setSelectionAndReveal(fromTraceEvent);
+    });
+
+    this.#sideBar.contentElement.addEventListener(TimelineInsights.EventRef.EventReferenceClick.eventName, event => {
+      this.select(selectionFromEvent(event.event));
     });
 
     this.#sideBar.element.addEventListener(TimelineComponents.Sidebar.RemoveAnnotation.eventName, event => {
@@ -585,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();
@@ -624,6 +659,9 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   }
 
   #setActiveInsight(insight: TimelineComponents.Sidebar.ActiveInsight|null): void {
+    if (insight && this.#panelSidebarEnabled()) {
+      this.#splitWidget.showBoth();
+    }
     this.#sideBar.setActiveInsight(insight);
     this.flameChart.setActiveInsight(insight);
   }
@@ -642,6 +680,15 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     return timelinePanelInstance;
   }
 
+  #instantiateNewModel(): Trace.TraceModel.Model {
+    const config = Trace.Types.Configuration.defaults();
+    config.showAllEvents = Root.Runtime.experiments.isEnabled('timeline-show-all-events');
+    config.includeRuntimeCallStats = Root.Runtime.experiments.isEnabled('timeline-v8-runtime-call-stats');
+    config.debugMode = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE);
+
+    return Trace.TraceModel.Model.createWithAllHandlers(config);
+  }
+
   static extensionDataVisibilitySetting(): Common.Settings.Setting<boolean> {
     // Calling this multiple times doesn't recreate the setting.
     // Instead, after the second call, the cached setting is returned.
@@ -975,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();
@@ -1019,8 +1078,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         this);
     SDK.CPUThrottlingManager.CPUThrottlingManager.instance().addEventListener(
         SDK.CPUThrottlingManager.Events.RATE_CHANGED, this.updateShowSettingsToolbarButton, this);
-    SDK.CPUThrottlingManager.CPUThrottlingManager.instance().addEventListener(
-        SDK.CPUThrottlingManager.Events.HARDWARE_CONCURRENCY_CHANGED, this.updateShowSettingsToolbarButton, this);
     this.disableCaptureJSProfileSetting.addChangeListener(this.updateShowSettingsToolbarButton, this);
     this.captureLayersAndPicturesSetting.addChangeListener(this.updateShowSettingsToolbarButton, this);
     this.captureSelectorStatsSetting.addChangeListener(this.updateShowSettingsToolbarButton, this);
@@ -1055,25 +1112,16 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.networkThrottlingSelect = this.createNetworkConditionsSelect();
     networkThrottlingToolbar.appendToolbarItem(this.networkThrottlingSelect);
 
-    const hardwareConcurrencyPane = new UI.Widget.VBox();
-    hardwareConcurrencyPane.element.classList.add('flex-auto');
-    hardwareConcurrencyPane.show(this.settingsPane.element);
-
-    const thirdPartyToolbar = new UI.Toolbar.Toolbar('', this.settingsPane.element);
-    thirdPartyToolbar.element.classList.add('flex-auto');
+    const thirdPartyToolbar = new UI.Toolbar.Toolbar('', throttlingPane.element);
     thirdPartyToolbar.makeVertical();
-    thirdPartyToolbar.appendToolbarItem(
-        this.createSettingCheckbox(this.#thirdPartyTracksSetting, i18nString(UIStrings.showDataAddedByExtensions)));
-
-    const {toggle, input, reset, warning} =
-        MobileThrottling.ThrottlingManager.throttlingManager().createHardwareConcurrencySelector();
-    const concurrencyThrottlingToolbar = new UI.Toolbar.Toolbar('', hardwareConcurrencyPane.element);
-    concurrencyThrottlingToolbar.registerCSSFiles([timelinePanelStyles]);
-    input.element.classList.add('timeline-concurrency-input');
-    concurrencyThrottlingToolbar.appendToolbarItem(toggle);
-    concurrencyThrottlingToolbar.appendToolbarItem(input);
-    concurrencyThrottlingToolbar.appendToolbarItem(reset);
-    concurrencyThrottlingToolbar.appendToolbarItem(warning);
+    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();
@@ -1268,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();
@@ -1297,9 +1345,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     if (SDK.CPUThrottlingManager.CPUThrottlingManager.instance().cpuThrottlingRate() !== 1) {
       messages.push(i18nString(UIStrings.CpuThrottlingIsEnabled));
     }
-    if (MobileThrottling.ThrottlingManager.throttlingManager().hardwareConcurrencyOverrideEnabled) {
-      messages.push(i18nString(UIStrings.HardwareConcurrencyIsEnabled));
-    }
     if (SDK.NetworkManager.MultitargetNetworkManager.instance().isThrottling()) {
       messages.push(i18nString(UIStrings.NetworkThrottlingIsEnabled));
     }
@@ -1572,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();
     }
@@ -1598,6 +1644,11 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
   private onClearButton(): void {
     this.#historyManager.clear();
+    this.#traceEngineModel = this.#instantiateNewModel();
+    ModificationsManager.reset();
+    this.#uninstallSourceMapsResolver();
+    this.flameChart.getMainDataProvider().reset(true);
+    this.flameChart.reset();
     this.#changeView({mode: 'LANDING_PAGE'});
   }
 
@@ -1793,11 +1844,10 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     this.#setActiveInsight(null);
 
+    this.#eventToRelatedInsights.clear();
     const traceInsightsSets = this.#traceEngineModel.traceInsights(traceIndex);
-    if (traceInsightsSets) {
-      this.flameChart.setInsights(traceInsightsSets);
-      this.#sideBar.setInsights(traceInsightsSets);
-    }
+    this.flameChart.setInsights(traceInsightsSets, this.#eventToRelatedInsights);
+    this.#sideBar.setInsights(traceInsightsSets);
 
     this.#showSidebarIfRequired();
   }
@@ -1809,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();
@@ -2153,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 {
@@ -2206,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;
   }
 
@@ -2218,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}));
   }
 
@@ -2258,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;
       }
     }
@@ -2523,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);

package/front_end/panels/timeline/TimelineSelection.test.ts

@@ -4,54 +4,109 @@
 
 import * as Trace from '../../models/trace/trace.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import {microseconds, milliseconds} from '../../testing/TraceHelpers.js';
 import {TraceLoader} from '../../testing/TraceLoader.js';
 
 import * as Timeline from './timeline.js';
 
 describeWithEnvironment('TimelineSelection', function() {
-  it('can be created with a frame', function() {
-    const frame = new Trace.Handlers.ModelHandlers.Frames.TimelineFrame(
-        /* seqId */ 1, /* startTime */ Trace.Types.Timing.MicroSeconds(1000),
-        /* start offset */ Trace.Types.Timing.MicroSeconds(0));
-    const selection = Timeline.TimelineSelection.TimelineSelection.fromFrame(frame);
-    assert.strictEqual(selection.object, frame);
-    assert.strictEqual(selection.startTime, Trace.Helpers.Timing.microSecondsToMilliseconds(frame.startTime));
-    assert.strictEqual(selection.endTime, Trace.Helpers.Timing.microSecondsToMilliseconds(frame.endTime));
-    assert.isTrue(Timeline.TimelineSelection.TimelineSelection.isLegacyTimelineFrame(selection.object));
+  const {TimelineSelection} = Timeline;
+  it('can be created with a frame', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const frame = parsedTrace.Frames.frames.at(0);
+    assert.isOk(frame);
+    const selection = TimelineSelection.selectionFromEvent(frame);
+    assert.strictEqual(selection.event, frame);
+    const timings = TimelineSelection.rangeForSelection(selection);
+    assert.strictEqual(timings.min, frame.startTime);
+    assert.strictEqual(timings.max, frame.endTime);
+
+    assert.isTrue(TimelineSelection.selectionIsEvent(selection));
+    assert.isFalse(TimelineSelection.selectionIsRange(selection));
   });
 
   it('can be created with a network request', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
-    const request = parsedTrace.NetworkRequests.byTime[0];
-    const selection = Timeline.TimelineSelection.TimelineSelection.fromTraceEvent(request);
-    assert.strictEqual(selection.object, request);
-    assert.strictEqual(selection.startTime, Trace.Helpers.Timing.microSecondsToMilliseconds(request.ts));
-    assert.strictEqual(
-        selection.endTime,
-        Trace.Helpers.Timing.microSecondsToMilliseconds((request.ts + request.dur) as Trace.Types.Timing.MicroSeconds));
-    assert.isTrue(
-        Timeline.TimelineSelection.TimelineSelection.isSyntheticNetworkRequestDetailsEventSelection(selection.object));
-  });
-
-  it('can be created with a Trace event', async function() {
+    const request = parsedTrace.NetworkRequests.byTime.at(0);
+    assert.isOk(request);
+    const selection = TimelineSelection.selectionFromEvent(request);
+    assert.strictEqual(selection.event, request);
+    const timings = TimelineSelection.rangeForSelection(selection);
+    assert.strictEqual(timings.min, request.ts);
+    assert.strictEqual(timings.max, (request.ts + request.dur as Trace.Types.Timing.MicroSeconds));
+    assert.isTrue(TimelineSelection.selectionIsEvent(selection));
+    assert.isFalse(TimelineSelection.selectionIsRange(selection));
+  });
+
+  it('can be created with a random trace event', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
     const firstLCPEvent = parsedTrace.PageLoadMetrics.allMarkerEvents.find(event => {
       return event.name === 'largestContentfulPaint::Candidate';
     });
-    if (!firstLCPEvent) {
-      throw new Error('Could not find LCP event');
-    }
-    const selection = Timeline.TimelineSelection.TimelineSelection.fromTraceEvent(firstLCPEvent);
-    assert.strictEqual(selection.object, firstLCPEvent);
-    assert.strictEqual(selection.startTime, Trace.Helpers.Timing.eventTimingsMilliSeconds(firstLCPEvent).startTime);
-    assert.strictEqual(selection.endTime, Trace.Helpers.Timing.eventTimingsMilliSeconds(firstLCPEvent).endTime);
-    assert.isTrue(Timeline.TimelineSelection.TimelineSelection.isTraceEventSelection(selection.object));
-  });
-
-  it('can be created with a range', async function() {
-    const selection = Timeline.TimelineSelection.TimelineSelection.fromRange(0, 10);
-    assert.strictEqual(selection.startTime, 0);
-    assert.strictEqual(selection.endTime, 10);
-    assert.isTrue(Timeline.TimelineSelection.TimelineSelection.isRangeSelection(selection.object));
+    assert.isOk(firstLCPEvent);
+    const selection = TimelineSelection.selectionFromEvent(firstLCPEvent);
+    assert.strictEqual(selection.event, firstLCPEvent);
+    const timings = TimelineSelection.rangeForSelection(selection);
+    assert.strictEqual(timings.min, Trace.Helpers.Timing.eventTimingsMicroSeconds(firstLCPEvent).startTime);
+    assert.strictEqual(timings.max, Trace.Helpers.Timing.eventTimingsMicroSeconds(firstLCPEvent).endTime);
+    assert.isTrue(TimelineSelection.selectionIsEvent(selection));
+    assert.isFalse(TimelineSelection.selectionIsRange(selection));
+  });
+
+  it('can be created with a range', function() {
+    const selection = TimelineSelection.selectionFromRangeMicroSeconds(microseconds(0), microseconds(10));
+    assert.deepEqual(selection.bounds, {
+      min: 0,
+      max: 10,
+      range: 10,
+    });
+    assert.isTrue(TimelineSelection.selectionIsRange(selection));
+    assert.isFalse(TimelineSelection.selectionIsEvent(selection));
+  });
+
+  it('can be created with a millisecond range', async () => {
+    const selection = TimelineSelection.selectionFromRangeMilliSeconds(milliseconds(1), milliseconds(10));
+    assert.deepEqual(selection.bounds, {
+      min: 1_000,
+      max: 10_000,
+      range: 9_000,
+    });
+    assert.isTrue(TimelineSelection.selectionIsRange(selection));
+    assert.isFalse(TimelineSelection.selectionIsEvent(selection));
+  });
+
+  it('knows if two event selections are equal if they have the same event', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const firstLCPEvent = parsedTrace.PageLoadMetrics.allMarkerEvents.find(event => {
+      return event.name === 'largestContentfulPaint::Candidate';
+    });
+    assert.isOk(firstLCPEvent);
+    const selection1 = TimelineSelection.selectionFromEvent(firstLCPEvent);
+    const selection2 = TimelineSelection.selectionFromEvent(firstLCPEvent);
+    assert.isTrue(TimelineSelection.selectionsEqual(selection1, selection2));
+
+    const networkEvent = parsedTrace.NetworkRequests.byTime.at(0);
+    assert.isOk(networkEvent);
+    const selection3 = TimelineSelection.selectionFromEvent(networkEvent);
+    assert.isFalse(TimelineSelection.selectionsEqual(selection1, selection3));
+  });
+
+  it('knows if two range selections are equal if they have the same range', async () => {
+    const selection1 = TimelineSelection.selectionFromRangeMicroSeconds(microseconds(0), microseconds(10));
+    const selection2 = TimelineSelection.selectionFromRangeMicroSeconds(microseconds(0), microseconds(10));
+    const selection3 = TimelineSelection.selectionFromRangeMicroSeconds(microseconds(20), microseconds(40));
+    assert.isTrue(TimelineSelection.selectionsEqual(selection1, selection2));
+    assert.isFalse(TimelineSelection.selectionsEqual(selection1, selection3));
+  });
+
+  it('knows selections of different types are not equal', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const firstLCPEvent = parsedTrace.PageLoadMetrics.allMarkerEvents.find(event => {
+      return event.name === 'largestContentfulPaint::Candidate';
+    });
+    assert.isOk(firstLCPEvent);
+    const selection1 = TimelineSelection.selectionFromEvent(firstLCPEvent);
+    const selection2 = TimelineSelection.selectionFromRangeMicroSeconds(microseconds(0), microseconds(10));
+    assert.isFalse(TimelineSelection.selectionsEqual(selection1, selection2));
   });
 });