chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -39,7 +39,7 @@ import {
   selectionIsRange,
   type TimelineSelection,
 } from './TimelineSelection.js';
-import {AggregatedTimelineTreeView} from './TimelineTreeView.js';
+import {AggregatedTimelineTreeView, TimelineTreeView} from './TimelineTreeView.js';
 import type {TimelineMarkerStyle} from './TimelineUIUtils.js';
 
 const UIStrings = {
@@ -53,8 +53,27 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineFlameChartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.FlameChart.FlameChartDelegate,
-                                                                      UI.SearchableView.Searchable {
+/**
+ * This defines the order these markers will be rendered if they are at the
+ * same timestamp. The smaller number will be shown first - e.g. so if NavigationStart, MarkFCP,
+ * MarkLCPCandidate have the same timestamp, visually we
+ * will render [Nav][FCP][DCL][LCP] everytime.
+ */
+export const SORT_ORDER_PAGE_LOAD_MARKERS: Readonly<Record<string, number>> = {
+  [Trace.Types.Events.Name.NAVIGATION_START]: 0,
+  [Trace.Types.Events.Name.MARK_LOAD]: 1,
+  [Trace.Types.Events.Name.MARK_FCP]: 2,
+  [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 3,
+  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 4,
+};
+
+// Threshold to match up overlay markers that are off by a tiny amount so they aren't rendered
+// 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 {
   private readonly delegate: TimelineModeViewDelegate;
   /**
    * Tracks the indexes of matched entries when the user searches the panel.
@@ -112,7 +131,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   #overlaysContainer: HTMLElement = document.createElement('div');
   #overlays: Overlays.Overlays.Overlays;
 
-  // Tracks the in-progress time range annotation when the user shift clicks + drags, or when the user uses the keyboard
+  // Tracks the in-progress time range annotation when the user alt/option clicks + drags, or when the user uses the keyboard
   #timeRangeSelectionAnnotation: Trace.Types.File.TimeRangeAnnotation|null = null;
 
   // Keep track of the link annotation that hasn't been fully selected yet.
@@ -122,6 +141,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
 
   #currentInsightOverlays: Array<Overlays.Overlays.TimelineOverlay> = [];
   #activeInsight: TimelineComponents.Sidebar.ActiveInsight|null = null;
+  #markers: Array<Overlays.Overlays.TimelineOverlay> = [];
 
   #tooltipElement = document.createElement('div');
 
@@ -165,6 +185,10 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.mainDataProvider = new TimelineFlameChartDataProvider();
     this.mainDataProvider.addEventListener(
         TimelineFlameChartDataProviderEvents.DATA_CHANGED, () => this.mainFlameChart.scheduleUpdate());
+    this.mainDataProvider.addEventListener(
+        TimelineFlameChartDataProviderEvents.FLAME_CHART_ITEM_HOVERED,
+        e => this.detailsView.revealEventInTreeView(e.data));
+
     this.mainFlameChart = new PerfUI.FlameChart.FlameChart(this.mainDataProvider, this, {
       groupExpansionSetting: mainViewGroupExpansionSetting,
       // The TimelineOverlays are used for selected elements
@@ -294,23 +318,39 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.detailsSplitWidget.setSidebarWidget(this.detailsView);
     this.detailsSplitWidget.show(this.element);
 
+    // Event listeners for annotations.
     this.onMainAddEntryLabelAnnotation = this.onAddEntryLabelAnnotation.bind(this, this.mainDataProvider);
     this.onNetworkAddEntryLabelAnnotation = this.onAddEntryLabelAnnotation.bind(this, this.networkDataProvider);
     this.#onMainEntriesLinkAnnotationCreated = event =>
         this.onEntriesLinkAnnotationCreate(this.mainDataProvider, event.data.entryFromIndex);
     this.#onNetworkEntriesLinkAnnotationCreated = event =>
         this.onEntriesLinkAnnotationCreate(this.networkDataProvider, event.data.entryFromIndex);
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS)) {
-      this.mainFlameChart.addEventListener(
-          PerfUI.FlameChart.Events.ENTRY_LABEL_ANNOTATION_ADDED, this.onMainAddEntryLabelAnnotation, this);
-      this.networkFlameChart.addEventListener(
-          PerfUI.FlameChart.Events.ENTRY_LABEL_ANNOTATION_ADDED, this.onNetworkAddEntryLabelAnnotation, this);
+    this.mainFlameChart.addEventListener(
+        PerfUI.FlameChart.Events.ENTRY_LABEL_ANNOTATION_ADDED, this.onMainAddEntryLabelAnnotation, this);
+    this.networkFlameChart.addEventListener(
+        PerfUI.FlameChart.Events.ENTRY_LABEL_ANNOTATION_ADDED, this.onNetworkAddEntryLabelAnnotation, this);
+
+    this.mainFlameChart.addEventListener(
+        PerfUI.FlameChart.Events.ENTRIES_LINK_ANNOTATION_CREATED, this.#onMainEntriesLinkAnnotationCreated, this);
+    this.networkFlameChart.addEventListener(
+        PerfUI.FlameChart.Events.ENTRIES_LINK_ANNOTATION_CREATED, this.#onNetworkEntriesLinkAnnotationCreated, this);
+
+    this.mainFlameChart.addEventListener(PerfUI.FlameChart.Events.TRACKS_REORDER_STATE_CHANGED, event => {
+      this.#overlays.toggleAllOverlaysDisplayed(!event.data);
+    });
 
-      this.mainFlameChart.addEventListener(
-          PerfUI.FlameChart.Events.ENTRIES_LINK_ANNOTATION_CREATED, this.#onMainEntriesLinkAnnotationCreated, this);
-      this.networkFlameChart.addEventListener(
-          PerfUI.FlameChart.Events.ENTRIES_LINK_ANNOTATION_CREATED, this.#onNetworkEntriesLinkAnnotationCreated, this);
-    }
+    this.detailsView.addEventListener(TimelineTreeView.Events.TREE_ROW_HOVERED, node => {
+      if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS)) {
+        return;
+      }
+      const events = node?.data?.events;
+      if (events) {
+        this.#dimInsightRelatedEvents(events);
+      } else {
+        this.mainFlameChart.disableDimming();
+        this.networkFlameChart.disableDimming();
+      }
+    });
 
     /**
      * NOTE: ENTRY_SELECTED, ENTRY_INVOKED and ENTRY_HOVERED are not always super obvious:
@@ -336,6 +376,12 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
       this.updateLinkSelectionAnnotationWithToEntry(this.networkDataProvider, event.data);
     }, this);
 
+    this.#overlays.addEventListener(Overlays.Overlays.EventReferenceClick.eventName, event => {
+      const eventRef = (event as Overlays.Overlays.EventReferenceClick);
+      const fromTraceEvent = selectionFromEvent(eventRef.event);
+      this.openSelectionDetailsView(fromTraceEvent);
+    });
+
     this.element.addEventListener('keydown', this.#keydownHandler.bind(this));
     this.element.addEventListener('pointerdown', this.#pointerDownHandler.bind(this));
     this.#boundRefreshAfterIgnoreList = this.#refreshAfterIgnoreList.bind(this);
@@ -353,10 +399,17 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     return this.element;
   }
 
+  dimEvents(events: Trace.Types.Events.Event[]): void {
+    const relatedMainIndices = events.map(event => this.mainDataProvider.indexForEvent(event) ?? -1);
+    const relatedNetworkIndices = events.map(event => this.networkDataProvider.indexForEvent(event) ?? -1);
+    this.mainFlameChart.enableDimming(relatedMainIndices, false /** shouldAddOutlines */);
+    this.networkFlameChart.enableDimming(relatedNetworkIndices, false /** shouldAddOutlines */);
+  }
+
   #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);
+    const relatedMainIndices = relatedEvents.map(event => this.mainDataProvider.indexForEvent(event) ?? -1);
+    const relatedNetworkIndices = 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) {
@@ -382,15 +435,15 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
       if (overlayEvent) {
         if (this.mainDataProvider.indexForEvent(overlayEvent) !== null) {
           provider = this.mainDataProvider;
-          relevantEvents = relevantMainEvents;
+          relevantEvents = relatedMainIndices;
         } else if (this.networkDataProvider.indexForEvent(overlayEvent) !== null) {
           provider = this.networkDataProvider;
-          relevantEvents = relevantNetworkEvents;
+          relevantEvents = relatedNetworkIndices;
         }
       } 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;
+        relevantEvents = relatedMainIndices;
       }
 
       if (!provider || !relevantEvents) {
@@ -399,8 +452,72 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
 
       relevantEvents.push(...provider.search(bounds).map(r => r.index));
     }
-    this.mainFlameChart.enableDimming(relevantMainEvents);
-    this.networkFlameChart.enableDimming(relevantNetworkEvents);
+    this.mainFlameChart.enableDimmingForUnrelatedEntries(relatedMainIndices);
+    this.networkFlameChart.enableDimmingForUnrelatedEntries(relatedNetworkIndices);
+  }
+
+  disableAllDimming(): void {
+    this.mainFlameChart.disableDimming();
+    this.networkFlameChart.disableDimming();
+  }
+
+  #sortMarkersForPreferredVisualOrder(markers: Trace.Types.Events.Event[]): void {
+    markers.sort((m1, m2) => {
+      const m1Index = SORT_ORDER_PAGE_LOAD_MARKERS[m1.name] ?? Infinity;
+      const m2Index = SORT_ORDER_PAGE_LOAD_MARKERS[m2.name] ?? Infinity;
+      return m1Index - m2Index;
+    });
+  }
+
+  setMarkers(parsedTrace: Trace.Handlers.Types.ParsedTrace|null): void {
+    if (!parsedTrace) {
+      return;
+    }
+    // Clear out any markers.
+    this.bulkRemoveOverlays(this.#markers);
+    const markerEvents = parsedTrace.PageLoadMetrics.allMarkerEvents;
+    // Set markers for Navigations, LCP, FCP, DCL, L.
+    const markers = markerEvents.filter(
+        event => event.name === Trace.Types.Events.Name.NAVIGATION_START ||
+            event.name === Trace.Types.Events.Name.MARK_LCP_CANDIDATE ||
+            event.name === Trace.Types.Events.Name.MARK_FCP ||
+            event.name === Trace.Types.Events.Name.MARK_DOM_CONTENT ||
+            event.name === Trace.Types.Events.Name.MARK_LOAD);
+
+    this.#sortMarkersForPreferredVisualOrder(markers);
+    const overlayByTs = new Map<Trace.Types.Timing.MicroSeconds, Overlays.Overlays.TimingsMarker>();
+    markers.forEach(marker => {
+      const adjustedTimestamp = Trace.Helpers.Timing.timeStampForEventAdjustedByClosestNavigation(
+          marker,
+          parsedTrace.Meta.traceBounds,
+          parsedTrace.Meta.navigationsByNavigationId,
+          parsedTrace.Meta.navigationsByFrameId,
+      );
+      // If any of the markers overlap in timing, lets put them on the same marker.
+      let matchingOverlay = false;
+      for (const [ts, overlay] of overlayByTs.entries()) {
+        if (Math.abs(marker.ts - ts) <= TIMESTAMP_THRESHOLD_MS) {
+          overlay.entries.push(marker);
+          matchingOverlay = true;
+          break;
+        }
+      }
+      if (!matchingOverlay) {
+        const overlay = {
+          type: 'TIMINGS_MARKER',
+          entries: [marker],
+          adjustedTimestamp,
+        } as Overlays.Overlays.TimingsMarker;
+        overlayByTs.set(marker.ts, overlay);
+      }
+    });
+    const markerOverlays: Overlays.Overlays.TimingsMarker[] = [...overlayByTs.values()];
+    this.#markers = markerOverlays;
+    if (this.#markers.length === 0) {
+      return;
+    }
+
+    this.bulkAddOverlays(this.#markers);
   }
 
   setOverlays(overlays: Overlays.Overlays.TimelineOverlay[], options: Overlays.Overlays.TimelineOverlaySetOptions):
@@ -432,23 +549,30 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     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);
+      let relatedEventsList = this.#activeInsight?.model.relatedEvents;
+      if (!relatedEventsList) {
+        relatedEventsList = [];
+      } else if (relatedEventsList instanceof Map) {
+        relatedEventsList = Array.from(relatedEventsList.keys());
+      }
+      this.#dimInsightRelatedEvents([...entries, ...relatedEventsList]);
     }
 
     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.
-      const expandedBounds =
-          Trace.Helpers.Timing.expandWindowByPercentOrToOneMillisecond(overlaysBounds, traceBounds, 100);
-
-      // Set the timeline visible window and ignore the minimap bounds. This
-      // allows us to pick a visible window even if the overlays are outside of
-      // the current breadcrumb. If this happens, the event listener for
-      // BoundsManager changes in TimelineMiniMap will detect it and activate
-      // the correct breadcrumb for us.
-      TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(
-          expandedBounds, {ignoreMiniMapBounds: true, shouldAnimate: true});
+      if (overlaysBounds) {
+        // Trace window covering all overlays expanded by 100% so that the overlays cover 50% of the visible window.
+        const expandedBounds =
+            Trace.Helpers.Timing.expandWindowByPercentOrToOneMillisecond(overlaysBounds, traceBounds, 100);
+
+        // Set the timeline visible window and ignore the minimap bounds. This
+        // allows us to pick a visible window even if the overlays are outside of
+        // the current breadcrumb. If this happens, the event listener for
+        // BoundsManager changes in TimelineMiniMap will detect it and activate
+        // the correct breadcrumb for us.
+        TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(
+            expandedBounds, {ignoreMiniMapBounds: true, shouldAnimate: true});
+      }
     }
 
     // Reveal entry if we have one.
@@ -494,10 +618,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     if (!this.#activeInsight) {
       this.mainFlameChart.disableDimming();
       this.networkFlameChart.disableDimming();
-      return;
     }
-
-    this.setOverlays(this.#activeInsight.overlays, {updateTraceWindow: true});
   }
 
   /**
@@ -615,10 +736,10 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
 
     switch (event.key) {
       // ArrowLeft + ArrowRight adjusts the right hand bound (the max) of the time range
-      // Shift + ArrowRight also starts a range if there isn't one already
+      // alt/option + ArrowRight also starts a range if there isn't one already
       case 'ArrowRight': {
         if (!this.#timeRangeSelectionAnnotation) {
-          if (event.shiftKey) {
+          if (event.altKey) {
             let startTime = visibleWindow.min;
             // Prefer the start time of the selected event, if there is one.
             if (this.#currentSelection) {
@@ -800,7 +921,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   extensionDataVisibilityChanged(): void {
     this.reset();
     this.setupWindowTimes();
-    this.mainDataProvider.reset(true);
+    this.mainDataProvider.reset();
     this.mainDataProvider.timelineData(true);
     this.refreshMainFlameChart();
   }
@@ -826,30 +947,30 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     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),
-      );
+    // We need to check if the user is updating the range because they are
+    // creating a time range annotation.
+    const bounds = Trace.Helpers.Timing.traceWindowFromMilliSeconds(
+        Trace.Types.Timing.MilliSeconds(startTime),
+        Trace.Types.Timing.MilliSeconds(endTime),
+    );
 
-      // 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 {
-        this.#timeRangeSelectionAnnotation = {
-          type: 'TIME_RANGE',
-          label: '',
-          bounds,
-        };
-        // Before creating a new range, make sure to delete the empty ranges.
-        ModificationsManager.activeManager()?.deleteEmptyRangeAnnotations();
-        ModificationsManager.activeManager()?.createAnnotation(this.#timeRangeSelectionAnnotation);
-      }
+    // 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 {
+      this.#timeRangeSelectionAnnotation = {
+        type: 'TIME_RANGE',
+        label: '',
+        bounds,
+      };
+      // Before creating a new range, make sure to delete the empty ranges.
+      ModificationsManager.activeManager()?.deleteEmptyRangeAnnotations();
+      ModificationsManager.activeManager()?.createAnnotation(this.#timeRangeSelectionAnnotation);
     }
   }
 
@@ -871,7 +992,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.#updateDetailViews();
   }
 
-  setModel(newParsedTrace: Trace.Handlers.Types.ParsedTrace|null, isCpuProfile = false): void {
+  setModel(newParsedTrace: Trace.Handlers.Types.ParsedTrace, isCpuProfile = false): void {
     if (newParsedTrace === this.#parsedTrace) {
       return;
     }
@@ -886,6 +1007,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.updateSearchResults(false, false);
     this.refreshMainFlameChart();
     this.#updateFlameCharts();
+    this.setMarkers(newParsedTrace);
   }
 
   setInsights(
@@ -1120,6 +1242,15 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     }
   }
 
+  // Only opens the details view of a selection. This is used for Timing Markers. Timing markers replace
+  // their entry with a new UI. Becuase of that, thier entries can no longer be "selected" in the timings track,
+  // so if clicked, we only open their details view.
+  openSelectionDetailsView(selection: TimelineSelection|null): void {
+    if (this.detailsView) {
+      void this.detailsView.setSelection(selection);
+    }
+  }
+
   /**
    * Used to create multiple overlays at once without triggering a redraw for each one.
    */
@@ -1461,6 +1592,10 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
       this.mainFlameChart.hideHighlight();
     }
   }
+
+  overlays(): Overlays.Overlays.Overlays {
+    return this.#overlays;
+  }
 }
 
 export class Selection {

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

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Root from '../../core/root/root.js';
 import {
   describeWithEnvironment,
   registerNoopActions,
@@ -21,12 +20,12 @@ describeWithEnvironment('TimelineHistoryManager', function() {
 
   afterEach(() => {
     UI.ActionRegistry.ActionRegistry.reset();
-    Root.Runtime.experiments.disableForTest(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS);
   });
 
-  it('shows the dropdown including a landing page link if the observations experiment is enabled', async function() {
-    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS);
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+  it('shows the dropdown including a landing page link', async function() {
+    assert.strictEqual(historyManager.button().element.innerText!, 'Live metrics');
+
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     historyManager.addRecording(
         {
           data: {
@@ -35,10 +34,12 @@ describeWithEnvironment('TimelineHistoryManager', function() {
           },
           filmStripForPreview: null,
           parsedTrace,
-          startTime: null,
+          metadata,
         },
     );
 
+    assert.strictEqual(historyManager.button().element.innerText!, 'web.dev #1');
+
     const showPromise = historyManager.showHistoryDropDown();
     const glassPane = document.querySelector('div[data-devtools-glass-pane]');
     const dropdown =
@@ -48,7 +49,7 @@ describeWithEnvironment('TimelineHistoryManager', function() {
     const menuItemText = Array.from(dropdown.querySelectorAll<HTMLDivElement>('[role="menuitem"]'), elem => {
       return elem.innerText.replaceAll('\n', '');
     });
-    assert.deepEqual(menuItemText, ['Live metrics', 'web.dev5.39 s']);
+    assert.deepEqual(menuItemText, ['Live metrics', 'web.dev1× slowdown, No throttling']);
 
     // Cancel the dropdown, which also resolves the show() promise, meaning we
     // don't leak it into other tests.
@@ -56,30 +57,11 @@ describeWithEnvironment('TimelineHistoryManager', function() {
     await showPromise;
   });
 
-  it('does not show if observations experiment is disabled + the user has not imported 2 traces', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
-    historyManager.addRecording(
-        {
-          data: {
-            parsedTraceIndex: 1,
-            type: 'TRACE_INDEX',
-          },
-          filmStripForPreview: null,
-          parsedTrace,
-          startTime: null,
-        },
-    );
-
-    const promise = historyManager.showHistoryDropDown();
-    const glassPane = document.querySelector('div[data-devtools-glass-pane]');
-    assert.isNull(glassPane);  // check that no DOM for the dropdown got created
-    // check the result of calling showHistoryDropDown which should be `null` if it didn't show
-    const result = await promise;
-    assert.isNull(result);
-  });
+  it('uses Node specific landing page title', async function() {
+    historyManager = new Timeline.TimelineHistoryManager.TimelineHistoryManager(undefined, true);
+    assert.strictEqual(historyManager.button().element.innerText!, 'New recording');
 
-  it('does not show the landing page link if the observations experiment is disabled', async function() {
-    const {parsedTrace: parsedTrace1} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     historyManager.addRecording(
         {
           data: {
@@ -87,20 +69,8 @@ describeWithEnvironment('TimelineHistoryManager', function() {
             type: 'TRACE_INDEX',
           },
           filmStripForPreview: null,
-          parsedTrace: parsedTrace1,
-          startTime: null,
-        },
-    );
-    const {parsedTrace: parsedTrace2} = await TraceLoader.traceEngine(this, 'timings-track.json.gz');
-    historyManager.addRecording(
-        {
-          data: {
-            parsedTraceIndex: 2,
-            type: 'TRACE_INDEX',
-          },
-          filmStripForPreview: null,
-          parsedTrace: parsedTrace2,
-          startTime: null,
+          parsedTrace,
+          metadata,
         },
     );
 
@@ -113,10 +83,7 @@ describeWithEnvironment('TimelineHistoryManager', function() {
     const menuItemText = Array.from(dropdown.querySelectorAll<HTMLDivElement>('[role="menuitem"]'), elem => {
       return elem.innerText.replaceAll('\n', '');
     });
-    assert.deepEqual(menuItemText, [
-      'localhost3.16 s',
-      'web.dev5.39 s',
-    ]);
+    assert.deepEqual(menuItemText, ['New recording', 'web.dev1× slowdown, No throttling']);
 
     // Cancel the dropdown, which also resolves the show() promise, meaning we
     // don't leak it into other tests.
@@ -126,7 +93,8 @@ describeWithEnvironment('TimelineHistoryManager', function() {
 
   it('can select from multiple parsed data objects', async function() {
     // Add two parsed data objects to the history manager.
-    const {parsedTrace: trace1Data} = await TraceLoader.traceEngine(this, 'slow-interaction-button-click.json.gz');
+    const {parsedTrace: trace1Data, metadata: metadata1} =
+        await TraceLoader.traceEngine(this, 'slow-interaction-button-click.json.gz');
     historyManager.addRecording(
         {
           data: {
@@ -135,11 +103,12 @@ describeWithEnvironment('TimelineHistoryManager', function() {
           },
           filmStripForPreview: null,
           parsedTrace: trace1Data,
-          startTime: null,
+          metadata: metadata1,
         },
     );
 
-    const {parsedTrace: trace2Data} = await TraceLoader.traceEngine(this, 'slow-interaction-keydown.json.gz');
+    const {parsedTrace: trace2Data, metadata: metadata2} =
+        await TraceLoader.traceEngine(this, 'slow-interaction-keydown.json.gz');
     historyManager.addRecording({
       data: {
         parsedTraceIndex: 2,
@@ -147,7 +116,7 @@ describeWithEnvironment('TimelineHistoryManager', function() {
       },
       filmStripForPreview: null,
       parsedTrace: trace2Data,
-      startTime: null,
+      metadata: metadata2,
     });
 
     // Make sure the correct model is returned when