chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/timeline/TimelinePanel.ts

@@ -40,13 +40,14 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
-import * as EmulationModel from '../../models/emulation/emulation.js';
+import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import type * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as ShortcutDialog from '../../ui/components/dialogs/dialogs.js';
+import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
+import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
@@ -69,7 +70,6 @@ import {type Client, TimelineController} from './TimelineController.js';
 import type {TimelineFlameChartDataProvider} from './TimelineFlameChartDataProvider.js';
 import {TimelineFlameChartView} from './TimelineFlameChartView.js';
 import {TimelineHistoryManager} from './TimelineHistoryManager.js';
-import {TimelineLandingPage} from './TimelineLandingPage.js';
 import {TimelineLoader} from './TimelineLoader.js';
 import {TimelineMiniMap} from './TimelineMiniMap.js';
 import timelinePanelStyles from './timelinePanel.css.js';
@@ -257,11 +257,6 @@ const UIStrings = {
    *@description Text of an item that stops the running task
    */
   stop: 'Stop',
-  /**
-   *@description Time text content in Timeline Panel of the Performance panel
-   *@example {2.12} PH1
-   */
-  ssec: '{PH1} sec',
   /**
    *
    * @description Text for exporting basic traces
@@ -279,7 +274,7 @@ const UIStrings = {
   /**
    Label for a checkbox that toggles the visibility of data added by extensions of this panel (Performance).
    */
-  performanceExtension: 'Extension data',
+  showCustomtracks: 'Show custom tracks',
 
   /**
    * @description Tooltip for the the sidebar toggle in the Performance panel. Command to open/show the sidebar.
@@ -334,6 +329,10 @@ const UIStrings = {
    * @description Description of the Timeline right/left panning action that appears in the Performance panel shortcuts dialog.
    */
   timelinePanLeftRight: 'Timeline right/left',
+  /**
+   * @description Title for the Dim 3rd Parties checkbox.
+   */
+  dimThirdParties: 'Dim 3rd Parties',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelinePanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -379,6 +378,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   private readonly timelinePane: UI.Widget.VBox;
   readonly #minimapComponent = new TimelineMiniMap();
   #viewMode: ViewMode = {mode: 'LANDING_PAGE'};
+  readonly #dimThirdPartiesSetting: Common.Settings.Setting<boolean>|null = null;
 
   /**
    * We get given any filters for a new trace when it is recorded/imported.
@@ -416,8 +416,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   private loader?: TimelineLoader;
   private showScreenshotsToolbarCheckbox?: UI.Toolbar.ToolbarItem;
   private showMemoryToolbarCheckbox?: UI.Toolbar.ToolbarItem;
-  private networkThrottlingSelect?: UI.Toolbar.ToolbarComboBox;
-  private cpuThrottlingSelect?: UI.Toolbar.ToolbarComboBox;
+  private networkThrottlingSelect?: MobileThrottling.ThrottlingManager.NetworkThrottlingSelectorWrapper;
+  private cpuThrottlingSelect?: MobileThrottling.ThrottlingManager.CPUThrottlingSelectorWrapper;
   private fileSelectorElement?: HTMLInputElement;
   private selection: TimelineSelection|null = null;
   private traceLoadStart!: Trace.Types.Timing.MilliSeconds|null;
@@ -429,6 +429,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
   #traceEngineModel: Trace.TraceModel.Model;
   #sourceMapsResolver: Utils.SourceMapsResolver.SourceMapsResolver|null = null;
+  #entityMapper: Utils.EntityMapper.EntityMapper|null = null;
   #onSourceMapsNodeNamesResolvedBound = this.#onSourceMapsNodeNamesResolved.bind(this);
   readonly #onChartPlayableStateChangeBound: (event: Common.EventTarget.EventTargetEvent<boolean>) => void;
   #sidebarToggleButton = this.#splitWidget.createShowHideSidebarButton(
@@ -463,7 +464,22 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   #pendingAriaMessage: string|null = null;
 
   #eventToRelatedInsights: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap = new Map();
-  #shortcutsDialog: ShortcutDialog.ShortcutDialog.ShortcutDialog = new ShortcutDialog.ShortcutDialog.ShortcutDialog();
+  #shortcutsDialog: Dialogs.ShortcutDialog.ShortcutDialog = new Dialogs.ShortcutDialog.ShortcutDialog();
+  /**
+   * Track if the user has opened the shortcuts dialog before. We do this so that the
+   * very first time the performance panel is open after the shortcuts dialog ships, we can
+   * automatically pop it open to aid discovery.
+   */
+  #userHadShortcutsDialogOpenedOnce = Common.Settings.Settings.instance().createSetting<boolean>(
+      'timeline.user-had-shortcuts-dialog-opened-once', false);
+  /**
+   * Navigation radio buttons located in the shortcuts dialog.
+   */
+  #navigationRadioButtons = document.createElement('form');
+  #modernNavRadioButton =
+      UI.UIUtils.createRadioButton('flamechart-selected-navigation', 'Modern', 'timeline.select-modern-navigation');
+  #classicNavRadioButton =
+      UI.UIUtils.createRadioButton('flamechart-selected-navigation', 'Classic', 'timeline.select-classic-navigation');
 
   #onMainEntryHovered: (event: Common.EventTarget.EventTargetEvent<number>) => void;
 
@@ -502,7 +518,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.toggleRecordAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.toggle-recording');
     this.recordReloadAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.record-reload');
 
-    this.#historyManager = new TimelineHistoryManager(this.#minimapComponent);
+    this.#historyManager = new TimelineHistoryManager(this.#minimapComponent, isNode);
 
     this.traceLoadStart = null;
 
@@ -525,9 +541,16 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.showMemorySetting.setTitle(i18nString(UIStrings.memory));
     this.showMemorySetting.addChangeListener(this.onMemoryModeChanged, this);
 
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_THIRD_PARTY_DEPENDENCIES)) {
+      this.#dimThirdPartiesSetting =
+          Common.Settings.Settings.instance().createSetting('timeline-dim-third-parties', false);
+      this.#dimThirdPartiesSetting.setTitle(i18nString(UIStrings.dimThirdParties));
+      this.#dimThirdPartiesSetting.addChangeListener(this.onDimThirdPartiesChanged, this);
+    }
+
     this.#thirdPartyTracksSetting = TimelinePanel.extensionDataVisibilitySetting();
     this.#thirdPartyTracksSetting.addChangeListener(this.#extensionDataVisibilityChanged, this);
-    this.#thirdPartyTracksSetting.setTitle(i18nString(UIStrings.performanceExtension));
+    this.#thirdPartyTracksSetting.setTitle(i18nString(UIStrings.showCustomtracks));
 
     const timelineToolbarContainer = this.element.createChild('div', 'timeline-toolbar-container');
     timelineToolbarContainer.setAttribute('jslog', `${VisualLogging.toolbar()}`);
@@ -571,6 +594,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     this.searchableViewInternal = new UI.SearchableView.SearchableView(this.flameChart, null);
     this.searchableViewInternal.setMinimumSize(0, 100);
+    this.searchableViewInternal.setMinimalSearchQuerySize(2);  // At 1 it can introduce a bit of jank.
     this.searchableViewInternal.element.classList.add('searchable-view');
     this.searchableViewInternal.show(this.timelinePane.element);
     this.flameChart.show(this.searchableViewInternal.element);
@@ -584,7 +608,10 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     this.flameChart.overlays().addEventListener(Overlays.Overlays.TimeRangeMouseOverEvent.eventName, event => {
       const {overlay} = event as Overlays.Overlays.TimeRangeMouseOverEvent;
-      const overlayBounds = overlay && Overlays.Overlays.traceWindowContainingOverlays([overlay]);
+      const overlayBounds = Overlays.Overlays.traceWindowContainingOverlays([overlay]);
+      if (!overlayBounds) {
+        return;
+      }
       this.#minimapComponent.highlightBounds(overlayBounds, /* withBracket */ false);
     });
 
@@ -606,7 +633,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
       this.flameChart.setOverlays(overlays, options);
 
-      const overlaysBounds = overlays && Overlays.Overlays.traceWindowContainingOverlays(overlays);
+      const overlaysBounds = Overlays.Overlays.traceWindowContainingOverlays(overlays);
       if (overlaysBounds) {
         this.#minimapComponent.highlightBounds(overlaysBounds, /* withBracket */ true);
       } else {
@@ -684,7 +711,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   }
 
   #setActiveInsight(insight: TimelineComponents.Sidebar.ActiveInsight|null): void {
-    if (insight && this.#panelSidebarEnabled()) {
+    if (insight) {
       this.#splitWidget.showBoth();
     }
     this.#sideBar.setActiveInsight(insight);
@@ -729,11 +756,24 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.registerCSSFiles([timelinePanelStyles]);
     // Record the performance tool load time.
     Host.userMetrics.panelLoaded('timeline', 'DevTools.Launch.Timeline');
+
+    const cruxManager = CrUXManager.CrUXManager.instance();
+    cruxManager.addEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, this.#onFieldDataChanged, this);
+    this.#onFieldDataChanged();
   }
 
   override willHide(): void {
     UI.Context.Context.instance().setFlavor(TimelinePanel, null);
     this.#historyManager.cancelIfShowing();
+
+    const cruxManager = CrUXManager.CrUXManager.instance();
+    cruxManager.removeEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, this.#onFieldDataChanged, this);
+  }
+
+  #onFieldDataChanged(): void {
+    const recs = Utils.Helpers.getThrottlingRecommendations();
+    this.cpuThrottlingSelect?.updateRecommendedRate(recs.cpuRate);
+    this.networkThrottlingSelect?.updateRecommendedConditions(recs.networkConditions);
   }
 
   loadFromEvents(events: Trace.Types.Events.Event[]): void {
@@ -854,6 +894,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         this.#setModelForActiveTrace();
         this.#removeStatusPane();
         this.#showSidebarIfRequired();
+        this.#dimThirdPartiesIfRequired(newMode.traceIndex);
         return;
       }
 
@@ -960,26 +1001,14 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.updateTimelineControls();
   }
 
-  private createSettingCheckbox(setting: Common.Settings.Setting<boolean>, tooltip: string): UI.Toolbar.ToolbarItem {
+  private createSettingCheckbox(setting: Common.Settings.Setting<boolean>, tooltip: Platform.UIString.LocalizedString):
+      UI.Toolbar.ToolbarItem {
     const checkboxItem = new UI.Toolbar.ToolbarSettingCheckbox(setting, tooltip);
     this.recordingOptionUIControls.push(checkboxItem);
     return checkboxItem;
   }
 
-  /**
-   * Users don't explicitly opt in to the sidebar, but if they opt into either
-   * Insights or Annotations, we will show the sidebar.
-   */
-  #panelSidebarEnabled(): boolean {
-    const sidebarEnabled = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS) ||
-        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS);
-    return sidebarEnabled;
-  }
   #addSidebarIconToToolbar(): void {
-    if (!this.#panelSidebarEnabled()) {
-      return;
-    }
-
     if (this.panelToolbar.hasItem(this.#sidebarToggleButton)) {
       return;
     }
@@ -995,14 +1024,18 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.panelToolbar.removeToolbarItem(this.#sidebarToggleButton);
   }
 
-  private populateDownloadMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
+  #populateDownloadMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
     contextMenu.viewSection().appendItem(i18nString(UIStrings.saveTraceWithAnnotationsMenuOption), () => {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.PerfPanelTraceExported);
       void this.saveToFile(/* isEnhancedTraces */ false, /* addModifications */ true);
+    }, {
+      jslogContext: 'timeline.save-to-file-with-annotations',
     });
     contextMenu.viewSection().appendItem(i18nString(UIStrings.saveTraceWithoutAnnotationsMenuOption), () => {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.PerfPanelTraceExported);
       void this.saveToFile();
+    }, {
+      jslogContext: 'timeline.save-to-file-without-annotations',
     });
   }
 
@@ -1022,18 +1055,9 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       this.selectFileToLoad();
     });
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS)) {
-      this.saveButton = new UI.Toolbar.ToolbarMenuButton(
-          this.populateDownloadMenu.bind(this), true, true, 'timeline.save-to-file-more-options', 'download');
-      this.saveButton.setTitle(i18nString(UIStrings.saveProfile));
-    } else {
-      this.saveButton = new UI.Toolbar.ToolbarButton(
-          i18nString(UIStrings.saveProfile), 'download', undefined, 'timeline.save-to-file');
-      this.saveButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, _event => {
-        Host.userMetrics.actionTaken(Host.UserMetrics.Action.PerfPanelTraceExported);
-        void this.saveToFile();
-      });
-    }
+    this.saveButton = new UI.Toolbar.ToolbarMenuButton(
+        this.#populateDownloadMenu.bind(this), true, true, 'timeline.save-to-file-more-options', 'download');
+    this.saveButton.setTitle(i18nString(UIStrings.saveProfile));
 
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ENHANCED_TRACES)) {
       this.saveButton.element.addEventListener('contextmenu', event => {
@@ -1063,7 +1087,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     // History
     this.panelToolbar.appendSeparator();
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS)) {
+    if (!isNode) {
       this.homeButton = new UI.Toolbar.ToolbarButton(
           i18nString(UIStrings.backToLiveMetrics), 'home', undefined, 'timeline.back-to-live-metrics');
       this.homeButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
@@ -1093,9 +1117,21 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     // GC
     this.panelToolbar.appendToolbarItem(UI.Toolbar.Toolbar.createActionButtonForId('components.collect-garbage'));
 
+    // Ignore list setting
+    this.panelToolbar.appendSeparator();
+    const showIgnoreListSetting = new TimelineComponents.IgnoreListSetting.IgnoreListSetting();
+    this.panelToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(showIgnoreListSetting));
+
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_THIRD_PARTY_DEPENDENCIES) &&
+        this.#dimThirdPartiesSetting) {
+      const dimThirdPartiesCheckbox =
+          this.createSettingCheckbox(this.#dimThirdPartiesSetting, i18nString(UIStrings.dimThirdParties));
+      this.panelToolbar.appendToolbarItem(dimThirdPartiesCheckbox);
+    }
+
     // Isolate selector
-    const isolateSelector = new IsolateSelector();
     if (isNode) {
+      const isolateSelector = new IsolateSelector();
       this.panelToolbar.appendSeparator();
       this.panelToolbar.appendToolbarItem(isolateSelector);
     }
@@ -1107,54 +1143,82 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
 
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ALTERNATIVE_NAVIGATION)) {
-      this.#shortcutsDialog.prependElement(this.#getNavigationSetting());
+      this.#setupNavigationSetting();
+      this.#shortcutsDialog.prependElement(this.#navigationRadioButtons);
       const dialogToolbarItem = new UI.Toolbar.ToolbarItem(this.#shortcutsDialog);
+      dialogToolbarItem.element.setAttribute(
+          'jslog', `${VisualLogging.action().track({click: true}).context('timeline.shortcuts-dialog-toggle')}`);
       this.panelRightToolbar.appendToolbarItem(dialogToolbarItem);
+      // The setting could have been changed from the Devtools Settings. Therefore, we
+      // need to update the radio buttons selection when the dialog is open.
+      this.#shortcutsDialog.addEventListener('click', this.#updateNavigationSettingSelection.bind(this));
     }
   }
 
-  #getNavigationSetting(): HTMLElement {
+  #setupNavigationSetting(): HTMLElement {
     const currentNavSetting = Common.Settings.moduleSetting('flamechart-selected-navigation').get();
-    this.#shortcutsDialog.data = {shortcuts: this.#getShortcutsInfo(currentNavSetting === 'classic')};
+    const hideTheDialogForTests: string|null = localStorage.getItem('hide-shortcuts-dialog-for-test');
+    const userHadShortcutsDialogOpenedOnce = this.#userHadShortcutsDialogOpenedOnce.get();
+
+    this.#shortcutsDialog.data = {
+      shortcuts: this.#getShortcutsInfo(currentNavSetting === 'classic'),
+      open: !userHadShortcutsDialogOpenedOnce && hideTheDialogForTests !== 'true' &&
+          !Host.InspectorFrontendHost.isUnderTest(),
+    };
 
-    const navigationRadioButtons = document.createElement('form');
-    navigationRadioButtons.classList.add('nav-radio-buttons');
-    UI.ARIAUtils.markAsRadioGroup(navigationRadioButtons);
-    const modernNavRadioButton = UI.UIUtils.createRadioLabel(
-        'flamechart-selected-navigation', 'Modern', /* checked */ currentNavSetting === 'modern');
+    this.#navigationRadioButtons.classList.add('nav-radio-buttons');
+    UI.ARIAUtils.markAsRadioGroup(this.#navigationRadioButtons);
     // Change EventListener is only triggered when the radio button is selected
-    modernNavRadioButton.radioElement.addEventListener('change', () => {
+    this.#modernNavRadioButton.radio.addEventListener('change', () => {
       this.#shortcutsDialog.data = {shortcuts: this.#getShortcutsInfo(/* isNavClassic */ false)};
       Common.Settings.moduleSetting('flamechart-selected-navigation').set('modern');
     });
-    const classicNavRadioButton = UI.UIUtils.createRadioLabel(
-        'flamechart-selected-navigation', 'Classic', /* checked */ currentNavSetting === 'classic');
-    classicNavRadioButton.radioElement.addEventListener('change', () => {
+    this.#classicNavRadioButton.radio.addEventListener('change', () => {
       this.#shortcutsDialog.data = {shortcuts: this.#getShortcutsInfo(/* isNavClassic */ true)};
       Common.Settings.moduleSetting('flamechart-selected-navigation').set('classic');
     });
 
-    navigationRadioButtons.appendChild(modernNavRadioButton);
-    navigationRadioButtons.appendChild(classicNavRadioButton);
+    this.#navigationRadioButtons.appendChild(this.#modernNavRadioButton.label);
+    this.#navigationRadioButtons.appendChild(this.#classicNavRadioButton.label);
 
-    return navigationRadioButtons;
+    this.#userHadShortcutsDialogOpenedOnce.set(true);
+    return this.#navigationRadioButtons;
   }
 
-  #getShortcutsInfo(isNavClassic: boolean): ShortcutDialog.ShortcutDialog.Shortcut[] {
+  #updateNavigationSettingSelection(): void {
+    const currentNavSetting = Common.Settings.moduleSetting('flamechart-selected-navigation').get();
+    if (currentNavSetting === 'classic') {
+      this.#classicNavRadioButton.radio.checked = true;
+      Host.userMetrics.navigationSettingAtFirstTimelineLoad(
+          Host.UserMetrics.TimelineNavigationSetting.SWITCHED_TO_CLASSIC);
+    } else if (currentNavSetting === 'modern') {
+      this.#modernNavRadioButton.radio.checked = true;
+      Host.userMetrics.navigationSettingAtFirstTimelineLoad(
+          Host.UserMetrics.TimelineNavigationSetting.SWITCHED_TO_MODERN);
+    }
+  }
+
+  #getShortcutsInfo(isNavClassic: boolean): Dialogs.ShortcutDialog.Shortcut[] {
     if (isNavClassic) {
       return [
-        {title: i18nString(UIStrings.timelineScrollUpDown), bindings: ['Shift Scroll']},
-        {title: i18nString(UIStrings.timelineZoomInOut), bindings: ['Scroll', 'W/S']},
-        {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: ['Shift W/S']},
-        {title: i18nString(UIStrings.timelinePanLeftRight), bindings: ['A/D']},
+        {title: i18nString(UIStrings.timelineScrollUpDown), bindings: [['Shift', 'Scroll'], ['Shift', '↑/↓']]},
+        {title: i18nString(UIStrings.timelineZoomInOut), bindings: [['Scroll'], ['W/S'], ['+/-']]},
+        {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: [['Shift', 'W/S'], ['Shift', '+/-']]},
+        {title: i18nString(UIStrings.timelinePanLeftRight), bindings: [['Shift', '←/→'], ['A/D']]},
       ];
     }
 
     return [
-      {title: i18nString(UIStrings.timelineScrollUpDown), bindings: ['Scroll', 'Shift up/down']},
-      {title: i18nString(UIStrings.timelineZoomInOut), bindings: ['Cmd Scroll', 'W/S', '+/-']},
-      {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: ['Shift W/S', 'Shift +/-']},
-      {title: i18nString(UIStrings.timelinePanLeftRight), bindings: ['A/D', 'Shift Scroll', 'Shift left/right']},
+      {title: i18nString(UIStrings.timelineScrollUpDown), bindings: [['Scroll'], ['Shift', '↑/↓']]},
+      {
+        title: i18nString(UIStrings.timelineZoomInOut),
+        bindings: [[Host.Platform.isMac() ? '⌘' : 'Ctrl', 'Scroll'], ['W/S'], ['+/-']],
+      },
+      {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: [['Shift', 'W/S'], ['Shift', '+/-']]},
+      {
+        title: i18nString(UIStrings.timelinePanLeftRight),
+        bindings: [['Shift', 'Scroll'], ['Shift', '←/→'], ['A/D']],
+      },
     ];
   }
 
@@ -1196,12 +1260,13 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     const cpuThrottlingToolbar = new UI.Toolbar.Toolbar('', throttlingPane.element);
     cpuThrottlingToolbar.appendText(i18nString(UIStrings.cpu));
     this.cpuThrottlingSelect = MobileThrottling.ThrottlingManager.throttlingManager().createCPUThrottlingSelector();
-    cpuThrottlingToolbar.appendToolbarItem(this.cpuThrottlingSelect);
+    this.cpuThrottlingSelect.control.setMinWidth(200);
+    this.cpuThrottlingSelect.control.setMaxWidth(200);
+    cpuThrottlingToolbar.appendToolbarItem(this.cpuThrottlingSelect.control);
 
     const networkThrottlingToolbar = new UI.Toolbar.Toolbar('', throttlingPane.element);
     networkThrottlingToolbar.appendText(i18nString(UIStrings.network));
-    this.networkThrottlingSelect = this.createNetworkConditionsSelect();
-    networkThrottlingToolbar.appendToolbarItem(this.networkThrottlingSelect);
+    networkThrottlingToolbar.appendToolbarItem(this.createNetworkConditionsSelectToolbarItem());
 
     const thirdPartyToolbar = new UI.Toolbar.Toolbar('', throttlingPane.element);
     thirdPartyToolbar.makeVertical();
@@ -1218,11 +1283,13 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.updateSettingsPaneVisibility();
   }
 
-  private createNetworkConditionsSelect(): UI.Toolbar.ToolbarComboBox {
+  private createNetworkConditionsSelectToolbarItem(): UI.Toolbar.ToolbarComboBox {
     const toolbarItem = new UI.Toolbar.ToolbarComboBox(null, i18nString(UIStrings.networkConditions));
-    toolbarItem.setMaxWidth(140);
-    MobileThrottling.ThrottlingManager.throttlingManager().decorateSelectWithNetworkThrottling(
-        toolbarItem.selectElement());
+    toolbarItem.setMinWidth(200);
+    toolbarItem.setMaxWidth(200);
+    this.networkThrottlingSelect =
+        MobileThrottling.ThrottlingManager.throttlingManager().createNetworkThrottlingSelector(
+            toolbarItem.selectElement());
     return toolbarItem;
   }
 
@@ -1261,9 +1328,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
     const traceEvents = this.#traceEngineModel.rawTraceEvents(this.#viewMode.traceIndex);
     const metadata = this.#traceEngineModel.metadata(this.#viewMode.traceIndex);
-    // Save modifications into the metadata if modifications experiment is on
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS) && metadata &&
-        addModifications) {
+
+    if (metadata && addModifications) {
       metadata.modifications = ModificationsManager.activeManager()?.toJSON();
     } else if (metadata) {
       delete metadata.modifications;
@@ -1372,11 +1438,44 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     if (this.state !== State.IDLE) {
       return;
     }
-    this.prepareToLoadTimeline();
-    this.loader = await TimelineLoader.loadFromFile(file, this);
+    const maximumTraceFileLengthToDetermineEnhancedTraces = 5000;
+    // We are expecting to locate the enhanced traces version within the first 5000
+    // characters of the trace file if the given trace file is enhanced traces.
+    // Doing so can avoid serializing the whole trace while needing to serialize
+    // it again in rehydrated session for enhanced traces.
+    const blob = file.slice(0, maximumTraceFileLengthToDetermineEnhancedTraces);
+    const content = await blob.text();
+    if (content.includes('enhancedTraceVersion')) {
+      await window.scheduler?.postTask(() => {
+        this.#launchRehydratedSession(file);
+      }, {priority: 'background'});
+    } else {
+      this.loader = await TimelineLoader.loadFromFile(file, this);
+      this.prepareToLoadTimeline();
+    }
     this.createFileSelector();
   }
 
+  #launchRehydratedSession(file: File): void {
+    let rehydratingWindow: Window|null = null;
+    let pathToLaunch: string|null = null;
+    const url = new URL(window.location.href);
+    const pathToEntrypoint = url.pathname.slice(0, url.pathname.lastIndexOf('/'));
+    url.pathname = `${pathToEntrypoint}/rehydrated_devtools_app.html`;
+    pathToLaunch = url.toString();
+
+    // Clarifying the window the code is referring to
+    const hostWindow = window;
+    function onMessageHandler(ev: MessageEvent): void {
+      if (url && ev.data && ev.data.type === 'REHYDRATING_WINDOW_READY') {
+        rehydratingWindow?.postMessage({type: 'REHYDRATING_TRACE_FILE', traceFile: file}, url.origin);
+      }
+      hostWindow.removeEventListener('message', onMessageHandler);
+    }
+    hostWindow.addEventListener('message', onMessageHandler);
+    rehydratingWindow = hostWindow.open(pathToLaunch, /* target: */ undefined, 'noopener=false,popup=true');
+  }
+
   async loadFromURL(url: Platform.DevToolsPath.UrlString): Promise<void> {
     if (this.state !== State.IDLE) {
       return;
@@ -1414,6 +1513,13 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.select(null);
   }
 
+  private onDimThirdPartiesChanged(): void {
+    if (this.#viewMode.mode !== 'VIEWING_TRACE') {
+      return;
+    }
+    this.#dimThirdPartiesIfRequired(this.#viewMode.traceIndex);
+  }
+
   #extensionDataVisibilityChanged(): void {
     this.flameChart.extensionDataVisibilityChanged();
   }
@@ -1666,8 +1772,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
           await this.loadingComplete(
               /* no collectedEvents */[],
               /* exclusiveFilter= */ null,
-              /* isCpuProfile= */ false,
-              /* recordingStartTime= */ null,
               /* metadata= */ null);
         });
     this.statusPane.showPane(this.statusPaneContainer);
@@ -1738,7 +1842,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.#traceEngineModel = this.#instantiateNewModel();
     ModificationsManager.reset();
     this.#uninstallSourceMapsResolver();
-    this.flameChart.getMainDataProvider().reset(true);
+    this.flameChart.getMainDataProvider().reset();
+    this.flameChart.getNetworkDataProvider().reset();
     this.flameChart.reset();
     this.#changeView({mode: 'LANDING_PAGE'});
   }
@@ -1920,13 +2025,20 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       }
     }
 
+    // Initialize EntityMapper
+    this.#entityMapper = new Utils.EntityMapper.EntityMapper(parsedTrace);
+
     // Set up SourceMapsResolver to ensure we resolve any function names in
     // profile calls.
-    this.#sourceMapsResolver = new Utils.SourceMapsResolver.SourceMapsResolver(parsedTrace);
+    // Pass in the entity mapper.
+    this.#sourceMapsResolver = new Utils.SourceMapsResolver.SourceMapsResolver(parsedTrace, this.#entityMapper);
     this.#sourceMapsResolver.addEventListener(
         Utils.SourceMapsResolver.SourceMappingsUpdated.eventName, this.#onSourceMapsNodeNamesResolvedBound);
     void this.#sourceMapsResolver.install();
 
+    // Initialize EntityMapper
+    this.#entityMapper = new Utils.EntityMapper.EntityMapper(parsedTrace);
+
     this.statusPane?.updateProgressBar(i18nString(UIStrings.processed), 80);
     this.updateMiniMap();
     this.statusPane?.updateProgressBar(i18nString(UIStrings.processed), 90);
@@ -1934,7 +2046,19 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     this.#setActiveInsight(null);
 
-    const traceInsightsSets = this.#traceEngineModel.traceInsights(traceIndex);
+    let traceInsightsSets = this.#traceEngineModel.traceInsights(traceIndex);
+    if (traceInsightsSets) {
+      // Omit insight sets that don't have anything of interest to show to the user.
+      const filteredTraceInsightsSets = new Map();
+      for (const [key, insightSet] of traceInsightsSets) {
+        if (Object.values(insightSet.model).some(model => model.shouldShow)) {
+          filteredTraceInsightsSets.set(key, insightSet);
+        }
+      }
+
+      traceInsightsSets = filteredTraceInsightsSets.size ? filteredTraceInsightsSets : null;
+    }
+
     this.flameChart.setInsights(traceInsightsSets, this.#eventToRelatedInsights);
     this.#sideBar.setInsights(traceInsightsSets);
 
@@ -1942,11 +2066,19 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     if (traceInsightsSets) {
       for (const [insightSetKey, insightSet] of traceInsightsSets) {
         for (const model of Object.values(insightSet.model)) {
-          for (const event of model.relatedEvents ?? []) {
+          let relatedEvents = model.relatedEvents;
+          if (!relatedEvents) {
+            relatedEvents = new Map();
+          } else if (Array.isArray(relatedEvents)) {
+            relatedEvents = new Map(relatedEvents.map(e => [e, []]));
+          }
+
+          for (const [event, messages] of relatedEvents.entries()) {
             const relatedInsights = this.#eventToRelatedInsights.get(event) ?? [];
             this.#eventToRelatedInsights.set(event, relatedInsights);
             relatedInsights.push({
               insightLabel: model.title,
+              messages,
               activateInsight: () => {
                 this.#setActiveInsight({model, insightSetKey});
               },
@@ -1957,13 +2089,24 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
 
     this.#showSidebarIfRequired();
+
+    // When the timeline is loaded for the first time, log what navigation setting is selected.
+    // This will allow us to get an estimate number of people using each option.
+    if (this.#traceEngineModel.size() === 1) {
+      if (Common.Settings.moduleSetting('flamechart-selected-navigation').get() === 'classic') {
+        Host.userMetrics.navigationSettingAtFirstTimelineLoad(
+            Host.UserMetrics.TimelineNavigationSetting.CLASSIC_AT_SESSION_FIRST_TRACE);
+      } else {
+        Host.userMetrics.navigationSettingAtFirstTimelineLoad(
+            Host.UserMetrics.TimelineNavigationSetting.MODERN_AT_SESSION_FIRST_TRACE);
+      }
+    }
   }
 
   /**
    * We automatically show the sidebar in only 2 scenarios:
    * 1. The user has never seen it before, so we show it once to aid discovery
    * 2. The user had it open, and we hid it (for example, during recording), so now we need to bring it back.
-   * 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) {
@@ -1972,14 +2115,27 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
     const needToRestore = this.#restoreSidebarVisibilityOnTraceLoad;
     const userHasSeenSidebar = this.#sideBar.userHasOpenedSidebarOnce();
-    const experimentsEnabled = this.#panelSidebarEnabled();
 
-    if (experimentsEnabled && (!userHasSeenSidebar || needToRestore)) {
+    if (!userHasSeenSidebar || needToRestore) {
       this.#splitWidget.showBoth();
     }
     this.#restoreSidebarVisibilityOnTraceLoad = false;
   }
 
+  #dimThirdPartiesIfRequired(traceIndex: number): void {
+    const parsedTrace = this.#traceEngineModel.parsedTrace(traceIndex);
+    if (!parsedTrace) {
+      return;
+    }
+    const thirdPartyEvents = this.#entityMapper?.thirdPartyEvents() ?? [];
+    if (this.#dimThirdPartiesSetting?.get() && thirdPartyEvents.length) {
+      this.flameChart.dimEvents(thirdPartyEvents);
+    } else {
+      // Ensure dimming stores are cleared, and there is no dimming.
+      this.flameChart.disableAllDimming();
+    }
+  }
+
   // Build a map mapping annotated entries to the colours that are used to display them in the FlameChart.
   // We need this map to display the entries in the sidebar with the same colours.
   private buildColorsAnnotationsMap(annotations: Trace.Types.File.Annotation[]): Map<Trace.Types.Events.Event, string> {
@@ -2075,7 +2231,11 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       return;
     }
 
-    this.landingPage = new TimelineLandingPage(this.toggleRecordAction, {isNode});
+    const liveMetrics = new TimelineComponents.LiveMetricsView.LiveMetricsView();
+    liveMetrics.isNode = isNode;
+    this.landingPage = LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.Widget, liveMetrics);
+    this.landingPage.element.classList.add('timeline-landing-page', 'fill');
+    this.landingPage.contentElement.classList.add('fill');
     this.landingPage.show(this.statusPaneContainer);
   }
 
@@ -2148,20 +2308,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.flameChart.getMainFlameChart().update();
   }
 
-  #deviceModeModel(): EmulationModel.DeviceModeModel.DeviceModeModel|null {
-    // This is wrapped in a try/catch because in some DevTools entry points
-    // (such as worker_app.ts) the Emulation panel is not included and as such
-    // the below code fails; it tries to instantiate the model which requires
-    // reading the value of a setting which has not been registered.
-    // In this case, we fallback to 'ALL'. See crbug.com/361515458 for an
-    // example bug that this resolves.
-    try {
-      return EmulationModel.DeviceModeModel.DeviceModeModel.instance();
-    } catch {
-      return null;
-    }
-  }
-
   /**
    * This is called with we are done loading a trace from a file, or after we
    * have recorded a fresh trace.
@@ -2173,7 +2319,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
    **/
   async loadingComplete(
       collectedEvents: Trace.Types.Events.Event[], exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null = null,
-      isCpuProfile: boolean, recordingStartTime: number|null, metadata: Trace.Types.File.MetaData|null): Promise<void> {
+      metadata: Trace.Types.File.MetaData|null): Promise<void> {
     this.#traceEngineModel.resetProcessor();
 
     delete this.loader;
@@ -2202,18 +2348,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       return;
     }
 
-    if (!metadata) {
-      const deviceModeModel = this.#deviceModeModel();
-      let emulatedDeviceTitle;
-      if (deviceModeModel?.type() === EmulationModel.DeviceModeModel.Type.Device) {
-        emulatedDeviceTitle = deviceModeModel.device()?.title ?? undefined;
-      } else if (deviceModeModel?.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
-        emulatedDeviceTitle = 'Responsive';
-      }
-      metadata = await Trace.Extras.Metadata.forNewRecording(
-          isCpuProfile, recordingStartTime ?? undefined, emulatedDeviceTitle);
-    }
-
     try {
       await this.#executeNewTrace(collectedEvents, recordingIsFresh, metadata);
       const traceIndex = this.#traceEngineModel.lastTraceIndex();
@@ -2279,11 +2413,11 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
   async #executeNewTrace(
       collectedEvents: Trace.Types.Events.Event[], isFreshRecording: boolean,
-      metadata: Trace.Types.File.MetaData): Promise<void> {
+      metadata: Trace.Types.File.MetaData|null): Promise<void> {
     return this.#traceEngineModel.parse(
         collectedEvents,
         {
-          metadata,
+          metadata: metadata ?? undefined,
           isFreshRecording,
         },
     );
@@ -2641,7 +2775,7 @@ export class StatusPane extends UI.Widget.VBox {
 
   startTimer(): void {
     this.startTime = Date.now();
-    this.timeUpdateTimer = window.setInterval(this.updateTimer.bind(this), 1000);
+    this.timeUpdateTimer = window.setInterval(this.updateTimer.bind(this), 100);
     this.updateTimer();
   }
 
@@ -2659,8 +2793,9 @@ export class StatusPane extends UI.Widget.VBox {
     if (!this.timeUpdateTimer || !this.time) {
       return;
     }
-    const elapsed = (Date.now() - this.startTime) / 1000;
-    this.time.textContent = i18nString(UIStrings.ssec, {PH1: Math.round(elapsed)});
+
+    const seconds = (Date.now() - this.startTime) / 1000;
+    this.time.textContent = i18n.TimeUtilities.preciseSecondsToString(seconds, 1);
   }
 
   private arrangeDialog(parent: Element): void {