chrome-devtools-frontend 1.0.1681091 → 1.0.1682249

package/front_end/panels/media/playerPropertiesView.css

@@ -20,7 +20,7 @@
   }
 }
 
-.media-property-renderer:nth-child(even):not(:hover) {
+.media-property-renderer:nth-child(even of :not(.media-property-renderer-hidden)):not(:hover) {
   background: var(--sys-color-surface1);
 }
 

package/front_end/panels/network/NetworkLogView.ts

@@ -1059,7 +1059,8 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       resourceTreeModel.removeEventListener(
           SDK.ResourceTreeModel.Events.DOMContentLoaded, this.domContentLoadedEventFired, this);
     }
-    const preserveLog = Common.Settings.Settings.instance().moduleSetting('network-log.preserve-log').get();
+    const preserveLog =
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.preserveNetworkLogSettingDescriptor).get();
     if (!preserveLog) {
       this.reset();
     }
@@ -2196,7 +2197,9 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
         NetworkForward.UIRequestLocation.UIRequestLocation.responseHeaderMatch(request, {name: '', value: ''});
     const networkPersistenceManager = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance();
     if (networkPersistenceManager.project()) {
-      Common.Settings.Settings.instance().moduleSetting('persistence-network-overrides-enabled').set(true);
+      Common.Settings.Settings.instance()
+          .resolve(Persistence.NetworkPersistenceManager.persistenceNetworkOverridesEnabledSettingDescriptor)
+          .set(true);
       await networkPersistenceManager.getOrCreateHeadersUISourceCodeFromUrl(request.url());
       await Common.Revealer.reveal(requestLocation);
     } else {  // If folder for local overrides has not been provided yet

package/front_end/panels/network/NetworkOverview.ts

@@ -156,10 +156,10 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
     }
 
     const context = this.context();
-    const linesByType = new Map<string, number[]>();
+    const linesByType = new Map<NetworkTimeCalculator.RequestTimeRangeNames, number[]>();
     const paddingTop = PADDING;
 
-    function drawLines(type: string): void {
+    function drawLines(type: NetworkTimeCalculator.RequestTimeRangeNames): void {
       const lines = linesByType.get(type);
       if (!lines) {
         return;
@@ -183,7 +183,7 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
       }
     }
 
-    function addLine(type: string, y: number, start: number, end: number): void {
+    function addLine(type: NetworkTimeCalculator.RequestTimeRangeNames, y: number, start: number, end: number): void {
       let lines = linesByType.get(type);
       if (!lines) {
         lines = [];
@@ -217,6 +217,8 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
     drawLines(NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER);
     drawLines(NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_PREPARATION);
     drawLines(NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_RESPOND_WITH);
+    drawLines(NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_ROUTER_EVALUATION);
+    drawLines(NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_CACHE_LOOKUP);
     drawLines(NetworkTimeCalculator.RequestTimeRangeNames.PUSH);
     drawLines(NetworkTimeCalculator.RequestTimeRangeNames.PROXY);
     drawLines(NetworkTimeCalculator.RequestTimeRangeNames.DNS);
@@ -224,6 +226,7 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
     drawLines(NetworkTimeCalculator.RequestTimeRangeNames.SENDING);
     drawLines(NetworkTimeCalculator.RequestTimeRangeNames.WAITING);
     drawLines(NetworkTimeCalculator.RequestTimeRangeNames.RECEIVING);
+    drawLines(NetworkTimeCalculator.RequestTimeRangeNames.RECEIVING_PUSH);
 
     if (this.highlightedRequest) {
       const size = 5;
@@ -297,7 +300,7 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
   }
 }
 
-export const RequestTimeRangeNameToColor = {
+export const RequestTimeRangeNameToColor: Record<NetworkTimeCalculator.RequestTimeRangeNames, string> = {
   [NetworkTimeCalculator.RequestTimeRangeNames.TOTAL]: '--network-overview-total',
   [NetworkTimeCalculator.RequestTimeRangeNames.BLOCKING]: '--network-overview-blocking',
   [NetworkTimeCalculator.RequestTimeRangeNames.CONNECTING]: '--network-overview-connecting',
@@ -305,6 +308,8 @@ export const RequestTimeRangeNameToColor = {
   [NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_PREPARATION]: '--network-overview-service-worker',
   [NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_RESPOND_WITH]:
       '--network-overview-service-worker-respond-with',
+  [NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_ROUTER_EVALUATION]: '--network-overview-service-worker',
+  [NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_CACHE_LOOKUP]: '--network-overview-service-worker',
   [NetworkTimeCalculator.RequestTimeRangeNames.PUSH]: '--network-overview-push',
   [NetworkTimeCalculator.RequestTimeRangeNames.PROXY]: '--override-network-overview-proxy',
   [NetworkTimeCalculator.RequestTimeRangeNames.DNS]: '--network-overview-dns',
@@ -312,8 +317,9 @@ export const RequestTimeRangeNameToColor = {
   [NetworkTimeCalculator.RequestTimeRangeNames.SENDING]: '--override-network-overview-sending',
   [NetworkTimeCalculator.RequestTimeRangeNames.WAITING]: '--network-overview-waiting',
   [NetworkTimeCalculator.RequestTimeRangeNames.RECEIVING]: '--network-overview-receiving',
+  [NetworkTimeCalculator.RequestTimeRangeNames.RECEIVING_PUSH]: '--network-overview-receiving',
   [NetworkTimeCalculator.RequestTimeRangeNames.QUEUEING]: '--network-overview-queueing',
-} as Record<string, string>;
+};
 
 const BAND_HEIGHT = 3;
 const PADDING = 5;

package/front_end/panels/network/NetworkPanel.ts

@@ -354,8 +354,10 @@ export class NetworkPanel extends UI.Panel.Panel implements
     this.networkLogLargeRowsSetting.addChangeListener(this.toggleLargerRequests, this);
     this.networkRecordFilmStripSetting.addChangeListener(this.toggleRecordFilmStrip, this);
 
-    this.preserveLogSetting = Common.Settings.Settings.instance().moduleSetting('network-log.preserve-log');
-    this.recordLogSetting = Common.Settings.Settings.instance().moduleSetting('network-log.record-log');
+    this.preserveLogSetting =
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.preserveNetworkLogSettingDescriptor);
+    this.recordLogSetting =
+        Common.Settings.Settings.instance().resolve(Logs.NetworkLog.recordNetworkLogSettingDescriptor);
     this.recordLogSetting.addChangeListener(({data}) => this.toggleRecord(data));
 
     this.throttlingSelect = this.createThrottlingConditionsSelect();

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -98,7 +98,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     this.textLayers = [];
   }
 
-  private static buildRequestTimeRangeStyle(): Map<NetworkTimeCalculator.RequestTimeRangeNames, LayerStyle> {
+  static buildRequestTimeRangeStyle(): Map<NetworkTimeCalculator.RequestTimeRangeNames, LayerStyle> {
     const styleMap = new Map<NetworkTimeCalculator.RequestTimeRangeNames, LayerStyle>();
     styleMap.set(
         NetworkTimeCalculator.RequestTimeRangeNames.CONNECTING,
@@ -142,6 +142,13 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     styleMap.set(NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_RESPOND_WITH, {
       fillStyle: RequestTimeRangeNameToColor[NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_RESPOND_WITH],
     });
+    styleMap.set(NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_ROUTER_EVALUATION, {
+      fillStyle:
+          RequestTimeRangeNameToColor[NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_ROUTER_EVALUATION],
+    });
+    styleMap.set(NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_CACHE_LOOKUP, {
+      fillStyle: RequestTimeRangeNameToColor[NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_CACHE_LOOKUP],
+    });
     return styleMap;
   }
 
@@ -610,8 +617,14 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
         continue;
       }
 
-      const style = (this.styleForTimeRangeName.get(range.name) as LayerStyle);
-      const path = (this.pathForStyle.get(style) as Path2D);
+      const style = this.styleForTimeRangeName.get(range.name);
+      if (!style) {
+        continue;
+      }
+      const path = this.pathForStyle.get(style);
+      if (!path) {
+        continue;
+      }
       const lineWidth = style.lineWidth || 0;
       const height = this.getBarHeight(range.name);
       const middleBarY = y + Math.floor(this.rowHeight / 2 - height / 2) + lineWidth / 2;

package/front_end/panels/network/RequestHeadersView.ts

@@ -290,7 +290,7 @@ export class RequestHeadersView extends UI.Widget.Widget {
     this.#workspace.addEventListener(
         Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
     Common.Settings.Settings.instance()
-        .moduleSetting('persistence-network-overrides-enabled')
+        .resolve(Persistence.NetworkPersistenceManager.persistenceNetworkOverridesEnabledSettingDescriptor)
         .addChangeListener(this.requestUpdate, this);
   }
 
@@ -319,7 +319,7 @@ export class RequestHeadersView extends UI.Widget.Widget {
     this.#workspace.removeEventListener(
         Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
     Common.Settings.Settings.instance()
-        .moduleSetting('persistence-network-overrides-enabled')
+        .resolve(Persistence.NetworkPersistenceManager.persistenceNetworkOverridesEnabledSettingDescriptor)
         .removeChangeListener(this.requestUpdate, this);
   }
 
@@ -395,8 +395,8 @@ function renderHeaderOverridesLink(input: ViewInput): Lit.LitTemplate {
     event.preventDefault();
     input.revealHeadersFile?.();
   };
-  const overridesSetting: Common.Settings.Setting<boolean> =
-      Common.Settings.Settings.instance().moduleSetting('persistence-network-overrides-enabled');
+  const overridesSetting: Common.Settings.Setting<boolean> = Common.Settings.Settings.instance().resolve(
+      Persistence.NetworkPersistenceManager.persistenceNetworkOverridesEnabledSettingDescriptor);
   // Disabled until https://crbug.com/1079231 is fixed.
   // clang-format off
     const fileIcon = html`

package/front_end/panels/network/components/ResponseHeaderSection.ts

@@ -7,7 +7,6 @@ import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
-import type {NameValue} from '../../../core/sdk/NetworkRequest.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as TextUtils from '../../../core/text_utils/text_utils.js';
 import * as Protocol from '../../../generated/protocol.js';
@@ -91,7 +90,7 @@ class ResponseHeaderSectionBase extends HTMLElement {
   protected readonly shadow = this.attachShadow({mode: 'open'});
   protected headerDetails: HeaderDetailsDescriptor[] = [];
 
-  protected setHeaders(headers: NameValue[]): void {
+  protected setHeaders(headers: SDK.NetworkRequest.NameValue[]): void {
     headers.sort(function(a, b) {
       return Platform.StringUtilities.compare(a.name.toLowerCase(), b.name.toLowerCase());
     });
@@ -281,7 +280,9 @@ export class ResponseHeaderSection extends ResponseHeaderSectionBase {
       if (!this.#overrides.every(Persistence.NetworkPersistenceManager.isHeaderOverride)) {
         throw new Error('Type mismatch after parsing');
       }
-      if (Common.Settings.Settings.instance().moduleSetting('persistence-network-overrides-enabled').get() &&
+      if (Common.Settings.Settings.instance()
+              .resolve(Persistence.NetworkPersistenceManager.persistenceNetworkOverridesEnabledSettingDescriptor)
+              .get() &&
           this.#isEditingAllowed === EditingAllowedStatus.DISABLED) {
         this.#isEditingAllowed = EditingAllowedStatus.ENABLED;
       }
@@ -566,7 +567,9 @@ export class ResponseHeaderSection extends ResponseHeaderSectionBase {
     const requestUrl = this.#request.url();
     const networkPersistenceManager = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance();
     if (networkPersistenceManager.project()) {
-      Common.Settings.Settings.instance().moduleSetting('persistence-network-overrides-enabled').set(true);
+      Common.Settings.Settings.instance()
+          .resolve(Persistence.NetworkPersistenceManager.persistenceNetworkOverridesEnabledSettingDescriptor)
+          .set(true);
       await networkPersistenceManager.getOrCreateHeadersUISourceCodeFromUrl(requestUrl);
     } else {  // If folder for local overrides has not been provided yet
       UI.InspectorView.InspectorView.instance().displaySelectOverrideFolderInfobar(async () => {

package/front_end/panels/network/network-meta.ts

@@ -7,6 +7,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Logs from '../../models/logs/logs.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -16,6 +17,42 @@ import * as NetworkForward from './forward/forward.js';
 import type * as Network from './network.js';
 
 const UIStrings = {
+  /**
+   * @description Text to keep the log after refreshing.
+   */
+  keepLog: 'Keep log',
+  /**
+   * @description A term that can be used to search in the command menu, and will find the search
+   * result 'Keep log on page reload / navigation'. This is an additional search term to help
+   * the user find the setting even when they don't know the exact name of it.
+   */
+  keep: 'keep',
+  /**
+   * @description A term that can be used to search in the command menu, and will find the search
+   * result 'Keep log on page reload / navigation'. This is an additional search term to help
+   * the user find the setting even when they don't know the exact name of it.
+   */
+  preserve: 'preserve',
+  /**
+   * @description A term that can be used to search in the command menu, and will find the search
+   * result 'Keep log on page reload / navigation'. This is an additional search term to help
+   * the user find the setting even when they don't know the exact name of it.
+   */
+  clearTag: 'clear',
+  /**
+   * @description A term that can be used to search in the command menu, and will find the search
+   * result 'Keep log on page reload / navigation'. This is an additional search term to help
+   * the user find the setting even when they don't know the exact name of it.
+   */
+  reset: 'reset',
+  /**
+   * @description Title of a setting under the Network category that can be invoked through the Command Menu.
+   */
+  keepLogOnPageReload: 'Keep log on page reload / navigation',
+  /**
+   * @description Title of a setting under the Network category that can be invoked through the Command Menu.
+   */
+  doNotKeepLogOnPageReload: 'Don’t keep log on page reload / navigation',
   /**
    * @description Title of a setting under the Network category that can be invoked through the Command Menu.
    */
@@ -488,6 +525,32 @@ SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.cacheDisabledSettingDe
   },
 });
 
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.preserveNetworkLogSettingDescriptor, {
+  category: Common.Settings.SettingCategory.NETWORK,
+  title: i18nLazyString(UIStrings.keepLog),
+  tags: [
+    i18nLazyString(UIStrings.keep),
+    i18nLazyString(UIStrings.preserve),
+    i18nLazyString(UIStrings.clearTag),
+    i18nLazyString(UIStrings.reset),
+  ],
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.keepLogOnPageReload),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.doNotKeepLogOnPageReload),
+    },
+  ],
+});
+
+SettingsUI.SettingUIRegistration.register(Logs.NetworkLog.recordNetworkLogSettingDescriptor, {
+  category: Common.Settings.SettingCategory.NETWORK,
+  title: i18nLazyString(UIStrings.recordNetworkLog),
+});
+
 UI.ViewManager.registerLocationResolver({
   name: UI.ViewManager.ViewLocationValues.NETWORK_SIDEBAR,
   category: UI.ViewManager.ViewLocationCategory.NETWORK,

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -86,8 +86,9 @@ const DEFAULT_VIEW: PerformanceMonitorView = (input, output, target) => {
       chartsInfo: input.chartsInfo,
       metrics: input.metrics,
     })} class=${classMap({suspended: input.suspended})}></devtools-widget>
-    <div class="perfmon-chart-container ${classMap({suspended: input.suspended})}">
+    <div class="perfmon-chart-container ${classMap({suspended: input.suspended})}" jslog=${VisualLogging.section('perfmon-chart')}>
       <canvas tabindex="-1" aria-label=${i18nString(UIStrings.graphsDisplayingARealtimeViewOf)}
+          jslog=${VisualLogging.canvas('perfmon-canvas')}
           .width=${Math.round(input.width * window.devicePixelRatio)} .height=${input.height}
           style="height:${input.height / window.devicePixelRatio}px" ${ref(e => {
             if (e) {

package/front_end/panels/recorder/RecordingView.ts

@@ -26,7 +26,6 @@ import type * as Converters from './converters/converters.js';
 import type * as Extensions from './extensions/extensions.js';
 import {ExtensionView} from './ExtensionView.js';
 import * as Models from './models/models.js';
-import {PlayRecordingSpeed} from './models/RecordingPlayer.js';
 import * as Actions from './recorder-actions/recorder-actions.js';
 import recordingViewStyles from './recordingView.css.js';
 import {ReplaySection} from './ReplaySection.js';
@@ -174,7 +173,7 @@ export const enum TargetPanel {
 
 export interface PlayRecordingEvent {
   targetPanel: TargetPanel;
-  speed: PlayRecordingSpeed;
+  speed: Models.RecordingPlayer.PlayRecordingSpeed;
   extension?: Extensions.ExtensionManager.Extension;
 }
 
@@ -769,8 +768,13 @@ interface ViewInput {
   getStepState: (step: Models.Schema.Step) => State;
   onAbortReplay: () => void;
   onMeasurePerformanceClick: (event: Event) => void;
-  onTogglePlaying: (speed: PlayRecordingSpeed, extension?: Extensions.ExtensionManager.Extension) => void;
-  onCodeFormatChange: (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => void;
+  onTogglePlaying: (
+      speed: Models.RecordingPlayer.PlayRecordingSpeed,
+      extension?: Extensions.ExtensionManager.Extension,
+      ) => void;
+  onCodeFormatChange: (
+      event: Menus.SelectMenu.SelectMenuItemSelectedEvent,
+      ) => void;
   onCopyStep: (step: Models.Schema.Step) => void;
   onEditTitleButtonClick: (event: Event) => void;
   onNetworkConditionsChange: (event: Event) => void;
@@ -781,8 +785,14 @@ interface ViewInput {
   onTimeoutInput: (event: Event) => void;
   onTitleBlur: (event: Event) => void;
   onTitleInputKeyDown: (event: KeyboardEvent) => void;
-  onStepChanged?: (currentStep: Models.Schema.Step, newStep: Models.Schema.Step) => void;
-  onAddStep?: (stepOrSection: Models.Schema.Step|Models.Section.Section, position: AddStepPosition) => void;
+  onStepChanged?: (
+      currentStep: Models.Schema.Step,
+      newStep: Models.Schema.Step,
+      ) => void;
+  onAddStep?: (
+      stepOrSection: Models.Schema.Step|Models.Section.Section,
+      position: AddStepPosition,
+      ) => void;
   onRemoveStep?: (step: Models.Schema.Step) => void;
   onAddBreakpoint?: (index: number) => void;
   onRemoveBreakpoint?: (index: number) => void;
@@ -935,72 +945,78 @@ export class RecordingView extends UI.Widget.Widget {
         ].find(converter => converter.getId() === this.#converterId) ??
         this.builtInConverters[0];
 
-    this.#view({
-      breakpointIndexes: this.breakpointIndexes,
-      builtInConverters: this.builtInConverters,
-      converterId: this.#converterId,
-      converterName: converter?.getFormatName(),
-      currentError: this.currentError ?? null,
-      currentStep: this.currentStep ?? null,
-      editorState: this.#editorState ?? null,
-      extensionConverters: this.extensionConverters,
-      extensionDescriptor: this.extensionDescriptor,
-      isRecording: this.isRecording,
-      isTitleInvalid: this.#isTitleInvalid,
-      lastReplayResult: this.lastReplayResult ?? null,
-      recorderSettings: this.#recorderSettings ?? null,
-      recording: this.recording,
-      recordingTogglingInProgress: this.recordingTogglingInProgress,
-      replayAllowed: this.replayAllowed,
-      replayExtensions: this.replayExtensions ?? [],
-      replaySettingsExpanded: this.#replaySettingsExpanded,
-      replayState: this.replayState,
-      sections: this.sections,
-      selectedStep: this.#selectedStep ?? null,
-      settings: this.settings ?? null,
-      showCodeView: this.#showCodeView,
-
-      onAddAssertion: () => {
-        this.onAddAssertion?.();
-      },
-      onRecordingFinished: () => {
-        this.onRecordingFinished?.();
-      },
-      getSectionState: this.#getSectionState.bind(this),
-      getStepState: this.#getStepState.bind(this),
-      onAbortReplay: () => {
-        this.onAbortReplay?.();
-      },
-      onMeasurePerformanceClick: this.#handleMeasurePerformanceClickEvent.bind(this),
-      onTogglePlaying: (speed: PlayRecordingSpeed, extension?: Extensions.ExtensionManager.Extension) => {
-        this.onPlayRecording?.({
-          targetPanel: TargetPanel.DEFAULT,
-          speed,
-          extension,
-        });
-      },
-      onStepChanged: (currentStep, newStep) => this.onStepChanged?.(currentStep, newStep),
-      onAddStep: (stepOrSection, position) => this.onAddStep?.(stepOrSection, position),
-      onRemoveStep: step => this.onRemoveStep?.(step),
-      onAddBreakpoint: index => this.onAddBreakpoint?.(index),
-      onRemoveBreakpoint: index => this.onRemoveBreakpoint?.(index),
-      onAttributeRequested: send => this.onAttributeRequested?.(send),
-      onCodeFormatChange: this.#onCodeFormatChange.bind(this),
-      onCopyStep: this.#onCopyStepEvent.bind(this),
-      onEditTitleButtonClick: this.#onEditTitleButtonClick.bind(this),
-      onNetworkConditionsChange: this.#onNetworkConditionsChange.bind(this),
-      onReplaySettingsKeydown: this.#onReplaySettingsKeydown.bind(this),
-      onSelectMenuLabelClick: this.#onSelectMenuLabelClick.bind(this),
-      onStepClick: this.#onStepClick.bind(this),
-      onStepHover: this.#onStepHover.bind(this),
-      onTimeoutInput: this.#onTimeoutInput.bind(this),
-      onTitleBlur: this.#onTitleBlur.bind(this),
-      onTitleInputKeyDown: this.#onTitleInputKeyDown.bind(this),
-      onToggleReplaySettings: this.#onToggleReplaySettings.bind(this),
-      onWrapperClick: this.#onWrapperClick.bind(this),
-      showCodeToggle: this.showCodeToggle.bind(this),
-    },
-               this.#viewOutput, this.contentElement);
+    this.#view(
+        {
+          breakpointIndexes: this.breakpointIndexes,
+          builtInConverters: this.builtInConverters,
+          converterId: this.#converterId,
+          converterName: converter?.getFormatName(),
+          currentError: this.currentError ?? null,
+          currentStep: this.currentStep ?? null,
+          editorState: this.#editorState ?? null,
+          extensionConverters: this.extensionConverters,
+          extensionDescriptor: this.extensionDescriptor,
+          isRecording: this.isRecording,
+          isTitleInvalid: this.#isTitleInvalid,
+          lastReplayResult: this.lastReplayResult ?? null,
+          recorderSettings: this.#recorderSettings ?? null,
+          recording: this.recording,
+          recordingTogglingInProgress: this.recordingTogglingInProgress,
+          replayAllowed: this.replayAllowed,
+          replayExtensions: this.replayExtensions ?? [],
+          replaySettingsExpanded: this.#replaySettingsExpanded,
+          replayState: this.replayState,
+          sections: this.sections,
+          selectedStep: this.#selectedStep ?? null,
+          settings: this.settings ?? null,
+          showCodeView: this.#showCodeView,
+
+          onAddAssertion: () => {
+            this.onAddAssertion?.();
+          },
+          onRecordingFinished: () => {
+            this.onRecordingFinished?.();
+          },
+          getSectionState: this.#getSectionState.bind(this),
+          getStepState: this.#getStepState.bind(this),
+          onAbortReplay: () => {
+            this.onAbortReplay?.();
+          },
+          onMeasurePerformanceClick: this.#handleMeasurePerformanceClickEvent.bind(this),
+          onTogglePlaying: (
+              speed: Models.RecordingPlayer.PlayRecordingSpeed,
+              extension?: Extensions.ExtensionManager.Extension,
+              ) => {
+            this.onPlayRecording?.({
+              targetPanel: TargetPanel.DEFAULT,
+              speed,
+              extension,
+            });
+          },
+          onStepChanged: (currentStep, newStep) => this.onStepChanged?.(currentStep, newStep),
+          onAddStep: (stepOrSection, position) => this.onAddStep?.(stepOrSection, position),
+          onRemoveStep: step => this.onRemoveStep?.(step),
+          onAddBreakpoint: index => this.onAddBreakpoint?.(index),
+          onRemoveBreakpoint: index => this.onRemoveBreakpoint?.(index),
+          onAttributeRequested: send => this.onAttributeRequested?.(send),
+          onCodeFormatChange: this.#onCodeFormatChange.bind(this),
+          onCopyStep: this.#onCopyStepEvent.bind(this),
+          onEditTitleButtonClick: this.#onEditTitleButtonClick.bind(this),
+          onNetworkConditionsChange: this.#onNetworkConditionsChange.bind(this),
+          onReplaySettingsKeydown: this.#onReplaySettingsKeydown.bind(this),
+          onSelectMenuLabelClick: this.#onSelectMenuLabelClick.bind(this),
+          onStepClick: this.#onStepClick.bind(this),
+          onStepHover: this.#onStepHover.bind(this),
+          onTimeoutInput: this.#onTimeoutInput.bind(this),
+          onTitleBlur: this.#onTitleBlur.bind(this),
+          onTitleInputKeyDown: this.#onTitleInputKeyDown.bind(this),
+          onToggleReplaySettings: this.#onToggleReplaySettings.bind(this),
+          onWrapperClick: this.#onWrapperClick.bind(this),
+          showCodeToggle: this.showCodeToggle.bind(this),
+        },
+        this.#viewOutput,
+        this.contentElement,
+    );
   }
 
   override wasShown(): void {
@@ -1217,7 +1233,7 @@ export class RecordingView extends UI.Widget.Widget {
 
     this.onPlayRecording?.({
       targetPanel: TargetPanel.PERFORMANCE_PANEL,
-      speed: PlayRecordingSpeed.NORMAL,
+      speed: Models.RecordingPlayer.PlayRecordingSpeed.NORMAL,
     });
   }