chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -53,6 +53,24 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineFlameChartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+/**
+ * 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 {
@@ -113,7 +131,7 @@ export class TimelineFlameChartView extends
   #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.
@@ -123,6 +141,7 @@ export class TimelineFlameChartView extends
 
   #currentInsightOverlays: Array<Overlays.Overlays.TimelineOverlay> = [];
   #activeInsight: TimelineComponents.Sidebar.ActiveInsight|null = null;
+  #markers: Array<Overlays.Overlays.TimelineOverlay> = [];
 
   #tooltipElement = document.createElement('div');
 
@@ -299,23 +318,26 @@ export class TimelineFlameChartView extends
     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.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.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.detailsView.addEventListener(TimelineTreeView.Events.TREE_ROW_HOVERED, node => {
       if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS)) {
@@ -354,6 +376,12 @@ export class TimelineFlameChartView extends
       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);
@@ -371,6 +399,13 @@ export class TimelineFlameChartView extends
     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 relatedMainIndices = relatedEvents.map(event => this.mainDataProvider.indexForEvent(event) ?? -1);
@@ -417,8 +452,72 @@ export class TimelineFlameChartView extends
 
       relevantEvents.push(...provider.search(bounds).map(r => r.index));
     }
-    this.mainFlameChart.enableDimming(relatedMainIndices);
-    this.networkFlameChart.enableDimming(relatedNetworkIndices);
+    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):
@@ -450,23 +549,30 @@ export class TimelineFlameChartView extends
     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?.model.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.
@@ -630,10 +736,10 @@ export class TimelineFlameChartView extends
 
     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) {
@@ -815,7 +921,7 @@ export class TimelineFlameChartView extends
   extensionDataVisibilityChanged(): void {
     this.reset();
     this.setupWindowTimes();
-    this.mainDataProvider.reset(true);
+    this.mainDataProvider.reset();
     this.mainDataProvider.timelineData(true);
     this.refreshMainFlameChart();
   }
@@ -841,30 +947,30 @@ export class TimelineFlameChartView extends
     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);
     }
   }
 
@@ -886,7 +992,7 @@ export class TimelineFlameChartView extends
     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;
     }
@@ -901,6 +1007,7 @@ export class TimelineFlameChartView extends
     this.updateSearchResults(false, false);
     this.refreshMainFlameChart();
     this.#updateFlameCharts();
+    this.setMarkers(newParsedTrace);
   }
 
   setInsights(
@@ -1135,6 +1242,15 @@ export class TimelineFlameChartView extends
     }
   }
 
+  // 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.
    */

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,11 @@ describeWithEnvironment('TimelineHistoryManager', function() {
 
   afterEach(() => {
     UI.ActionRegistry.ActionRegistry.reset();
-    Root.Runtime.experiments.disableForTest(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS);
-    historyManager.cancelIfShowing();
   });
 
-  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);
+  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(
         {
@@ -40,6 +38,8 @@ describeWithEnvironment('TimelineHistoryManager', function() {
         },
     );
 
+    assert.strictEqual(historyManager.button().element.innerText!, 'web.dev #1');
+
     const showPromise = historyManager.showHistoryDropDown();
     const glassPane = document.querySelector('div[data-devtools-glass-pane]');
     const dropdown =
@@ -57,7 +57,10 @@ describeWithEnvironment('TimelineHistoryManager', function() {
     await showPromise;
   });
 
-  it('does not show if observations experiment is disabled + the user has not imported 2 traces', async function() {
+  it('uses Node specific landing page title', async function() {
+    historyManager = new Timeline.TimelineHistoryManager.TimelineHistoryManager(undefined, true);
+    assert.strictEqual(historyManager.button().element.innerText!, 'New recording');
+
     const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     historyManager.addRecording(
         {
@@ -71,42 +74,6 @@ describeWithEnvironment('TimelineHistoryManager', function() {
         },
     );
 
-    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('does not show the landing page link if the observations experiment is disabled', async function() {
-    const {parsedTrace: parsedTrace1, metadata: metadata1} =
-        await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
-    historyManager.addRecording(
-        {
-          data: {
-            parsedTraceIndex: 1,
-            type: 'TRACE_INDEX',
-          },
-          filmStripForPreview: null,
-          parsedTrace: parsedTrace1,
-          metadata: metadata1,
-        },
-    );
-    const {parsedTrace: parsedTrace2, metadata: metadata2} =
-        await TraceLoader.traceEngine(this, 'timings-track.json.gz');
-    historyManager.addRecording(
-        {
-          data: {
-            parsedTraceIndex: 2,
-            type: 'TRACE_INDEX',
-          },
-          filmStripForPreview: null,
-          parsedTrace: parsedTrace2,
-          metadata: metadata2,
-        },
-    );
-
     const showPromise = historyManager.showHistoryDropDown();
     const glassPane = document.querySelector('div[data-devtools-glass-pane]');
     const dropdown =
@@ -116,10 +83,7 @@ describeWithEnvironment('TimelineHistoryManager', function() {
     const menuItemText = Array.from(dropdown.querySelectorAll<HTMLDivElement>('[role="menuitem"]'), elem => {
       return elem.innerText.replaceAll('\n', '');
     });
-    assert.deepEqual(menuItemText, [
-      'localhost',
-      'web.dev1× slowdown, No throttling',
-    ]);
+    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.

package/front_end/panels/timeline/TimelineHistoryManager.ts

@@ -5,8 +5,6 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
-import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
 import type * as Trace from '../../models/trace/trace.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -41,9 +39,9 @@ const UIStrings = {
    */
   landingPageTitle: 'Live metrics',
   /**
-   *@description Text that shows there is no recording
+   * @description the title shown when the user is viewing the landing page which can be used to make a new performance recording.
    */
-  noRecordings: '(no recordings)',
+  nodeLandingPageTitle: 'New recording',
   /**
    *@description Text in Timeline History Manager of the Performance panel
    *@example {example.com} PH1
@@ -117,13 +115,18 @@ export class TimelineHistoryManager {
   private enabled: boolean;
   private lastActiveTrace: RecordingData|null = null;
   #minimapComponent?: TimelineMiniMap;
-  constructor(minimapComponent?: TimelineMiniMap) {
+  #landingPageTitle: Common.UIString.LocalizedString;
+
+  constructor(minimapComponent?: TimelineMiniMap, isNode?: boolean) {
     this.recordings = [];
     this.#minimapComponent = minimapComponent;
     this.action = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.show-history');
     this.nextNumberByDomain = new Map();
     this.buttonInternal = new ToolbarButton(this.action);
 
+    this.#landingPageTitle =
+        isNode ? i18nString(UIStrings.nodeLandingPageTitle) : i18nString(UIStrings.landingPageTitle);
+
     UI.ARIAUtils.markAsMenuButton(this.buttonInternal.element);
     this.clear();
 
@@ -165,25 +168,6 @@ export class TimelineHistoryManager {
     ];
     this.totalHeight = this.allOverviews.reduce((acc, entry) => acc + entry.height, 0);
     this.enabled = true;
-
-    CrUXManager.CrUXManager.instance().addEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, () => {
-      this.#updateLandingPageTitleIfActive();
-    });
-  }
-
-  /**
-   * If the user changes the CrUX consent status, the title shown in the
-   * dropdown could be outdated, as we show "Local" or "Local and field"
-   * depending on if the user has consented.
-   * This method will be called whenever the CrUXManager detects a change, and
-   * we use it as a chance to re-evaluate if the title needs changing or not.
-   */
-  #updateLandingPageTitleIfActive(): void {
-    if (this.lastActiveTrace?.type === 'LANDING_PAGE') {
-      const title = this.title(this.lastActiveTrace);
-      this.buttonInternal.setTitle(title);
-      this.buttonInternal.setText(title);
-    }
   }
 
   addRecording(newInput: NewHistoryRecordingData): void {
@@ -230,28 +214,10 @@ export class TimelineHistoryManager {
     this.recordings = [];
     this.lastActiveTrace = null;
     this.updateState();
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS)) {
-      this.buttonInternal.setText(i18nString(UIStrings.landingPageTitle));
-    } else {
-      this.buttonInternal.setText(i18nString(UIStrings.noRecordings));
-    }
+    this.buttonInternal.setText(this.#landingPageTitle);
     this.nextNumberByDomain.clear();
   }
 
-  /**
-   * If the observations landing page experiment is enabled, we show the
-   * dropdown when there is 1 or more traces active, as even with 1 trace we
-   * need to give the user a way to get back to the index page. However, if that
-   * experiment is disabled, there is no need to show the dropdown until there
-   * are 2+ traces.
-   */
-  #minimumRequiredRecordings(): number {
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS)) {
-      return 1;
-    }
-    return 2;
-  }
-
   #getActiveTraceIndexForListControl(): number {
     if (!this.lastActiveTrace) {
       return -1;
@@ -263,14 +229,14 @@ export class TimelineHistoryManager {
   }
 
   async showHistoryDropDown(): Promise<RecordingData|null> {
-    if (this.recordings.length < this.#minimumRequiredRecordings() || !this.enabled) {
+    if (this.recordings.length < 1 || !this.enabled) {
       return null;
     }
 
     // DropDown.show() function finishes when the dropdown menu is closed via selection or losing focus
     const activeTraceIndex = await DropDown.show(
         this.recordings.map(recording => recording.parsedTraceIndex), this.#getActiveTraceIndexForListControl(),
-        this.buttonInternal.element);
+        this.buttonInternal.element, this.#landingPageTitle);
 
     if (activeTraceIndex === null) {
       return null;
@@ -346,7 +312,7 @@ export class TimelineHistoryManager {
   }
 
   private updateState(): void {
-    this.action.setEnabled(this.recordings.length >= this.#minimumRequiredRecordings() && this.enabled);
+    this.action.setEnabled(this.recordings.length >= 1 && this.enabled);
   }
 
   static previewElement(parsedTraceIndex: number): Element {
@@ -359,7 +325,7 @@ export class TimelineHistoryManager {
 
   private title(item: RecordingData): string {
     if (item.type === 'LANDING_PAGE') {
-      return i18nString(UIStrings.landingPageTitle);
+      return this.#landingPageTitle;
     }
 
     const data = TimelineHistoryManager.dataForTraceIndex(item.parsedTraceIndex);
@@ -445,7 +411,7 @@ export class TimelineHistoryManager {
     const dPR = window.devicePixelRatio;
     container.style.width = previewWidth + 'px';
     container.style.height = this.totalHeight + 'px';
-    const canvas = (container.createChild('canvas') as HTMLCanvasElement);
+    const canvas = container.createChild('canvas');
     canvas.width = dPR * previewWidth;
     canvas.height = dPR * this.totalHeight;
 
@@ -486,8 +452,11 @@ export class DropDown implements UI.ListControl.ListDelegate<number> {
   private readonly listControl: UI.ListControl.ListControl<number>;
   private readonly focusRestorer: UI.UIUtils.ElementFocusRestorer;
   private selectionDone: ((arg0: number|null) => void)|null;
+  #landingPageTitle: Common.UIString.LocalizedString;
+
+  constructor(availableparsedTraceIndexes: number[], landingPageTitle: Common.UIString.LocalizedString) {
+    this.#landingPageTitle = landingPageTitle;
 
-  constructor(availableparsedTraceIndexes: number[]) {
     this.glassPane = new UI.GlassPane.GlassPane();
     this.glassPane.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
     this.glassPane.setOutsideClickCallback(() => this.close(null));
@@ -495,10 +464,8 @@ export class DropDown implements UI.ListControl.ListDelegate<number> {
     this.glassPane.setAnchorBehavior(UI.GlassPane.AnchorBehavior.PREFER_BOTTOM);
     this.glassPane.element.addEventListener('blur', () => this.close(null));
 
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(this.glassPane.contentElement, {
-      cssFile: [timelineHistoryManagerStyles],
-      delegatesFocus: undefined,
-    });
+    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(
+        this.glassPane.contentElement, {cssFile: [timelineHistoryManagerStyles]});
     const contentElement = shadowRoot.createChild('div', 'drop-down');
 
     const listModel = new UI.ListModel.ListModel<number>();
@@ -516,16 +483,16 @@ export class DropDown implements UI.ListControl.ListDelegate<number> {
     this.selectionDone = null;
   }
 
-  static show(availableparsedTraceIndexes: number[], activeparsedTraceIndex: number, anchor: Element):
+  static show(
+      availableparsedTraceIndexes: number[], activeparsedTraceIndex: number, anchor: Element,
+      landingPageTitle: Common.UIString.LocalizedString = i18nString(UIStrings.landingPageTitle)):
       Promise<number|null> {
     if (DropDown.instance) {
       return Promise.resolve(null);
     }
     const availableDropdownChoices = [...availableparsedTraceIndexes];
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS)) {
-      availableDropdownChoices.unshift(LANDING_PAGE_INDEX_DROPDOWN_CHOICE);
-    }
-    const instance = new DropDown(availableDropdownChoices);
+    availableDropdownChoices.unshift(LANDING_PAGE_INDEX_DROPDOWN_CHOICE);
+    const instance = new DropDown(availableDropdownChoices, landingPageTitle);
     return instance.show(anchor, activeparsedTraceIndex);
   }
 
@@ -613,7 +580,7 @@ export class DropDown implements UI.ListControl.ListDelegate<number> {
     div.appendChild(icon);
 
     const text = document.createElement('span');
-    text.innerText = i18nString(UIStrings.landingPageTitle);
+    text.innerText = this.#landingPageTitle;
     div.appendChild(text);
     return div;
   }