chrome-devtools-frontend 1.0.1662965 → 1.0.1664496

package/front_end/panels/recorder/RecorderPanel.ts

@@ -19,7 +19,7 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import type * as Dialogs from '../../ui/components/dialogs/dialogs.js';
 import type * as Menus from '../../ui/components/menus/menus.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as Lit from '../../ui/lit/lit.js';
+import {Directives, html, type LitTemplate, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as Converters from './converters/converters.js';
@@ -29,29 +29,18 @@ import * as Models from './models/models.js';
 import * as Actions from './recorder-actions/recorder-actions.js';
 import * as Events from './RecorderEvents.js';
 import recorderPanelStyles from './recorderPanel.css.js';
-import {
-  DeleteRecordingEvent,
-  OpenRecordingEvent,
-  PlayRecordingEvent as ListViewPlayRecordingEvent,
-  RecordingListView
-} from './RecordingListView.js';
+import {RecordingListView} from './RecordingListView.js';
 import {
   type PlayRecordingEvent as ViewPlayRecordingEvent,
   RecordingView,
   type ReplayState,
   TargetPanel
 } from './RecordingView.js';
-import type {RequestSelectorAttributeEvent} from './SelectorPicker.js';
 import {
-  type AddBreakpointEvent,
-  type AddStep,
   AddStepPosition,
-  type RemoveBreakpointEvent,
-  type RemoveStep,
-  type StepChanged
 } from './StepView.js';
 
-const {html, Directives: {ref}} = Lit;
+const {ref, repeat} = Directives;
 
 let recorderPanelInstance: RecorderPanel;
 
@@ -178,7 +167,7 @@ const GET_EXTENSIONS_URL = 'https://goo.gle/recorder-extension-list' as Platform
 const RECORDER_EXPLANATION_URL = 'https://developer.chrome.com/docs/devtools/recorder';
 const FEEDBACK_URL = 'https://goo.gle/recorder-feedback' as Platform.DevToolsPath.UrlString;
 
-interface StoredRecording {
+export interface StoredRecording {
   storageName: string;
   flow: Models.Schema.UserFlow;
 }
@@ -220,6 +209,391 @@ function verifyFlowSize(flow: Models.Schema.UserFlow): void {
   }
 }
 
+export interface ViewInput {
+  recordings: StoredRecording[];
+  currentRecording?: StoredRecording;
+  currentPage: Pages;
+  isRecording: boolean;
+  isToggling: boolean;
+  importError?: Error;
+  recordingError?: Error;
+  sections: Models.Section.Section[];
+  settings?: Models.RecordingSettings.RecordingSettings;
+  recorderSettings: Models.RecorderSettings.RecorderSettings;
+  lastReplayResult?: Models.RecordingPlayer.ReplayResult;
+  replayAllowed: boolean;
+  breakpointIndexes: Set<number>;
+  builtInConverters: readonly Converters.Converter.Converter[];
+  extensionConverters: Converters.Converter.Converter[];
+  replayExtensions: Extensions.ExtensionManager.Extension[];
+  extensionDescriptor?: PublicExtensions.RecorderPluginManager.ViewDescriptor;
+  exportMenuExpanded: boolean;
+  replayState: ReplayState;
+  shortcutsInfo: Dialogs.ShortcutDialog.Shortcut[];
+  currentStep?: Models.Schema.Step;
+
+  onCreateNewRecording: (event?: Event) => void;
+  onImportRecording: (event: Event) => void;
+  onExportRecording: (event: Event) => void;
+  onDeleteRecording: (event: Event|string) => void;
+  onRecordingSelected: (event: Event|string) => void;
+  onPlayRecordingByName: (storageName: string) => void;
+  onPlayRecording: (event: ViewPlayRecordingEvent) => void;
+  onAbortReplay: () => void;
+  onNetworkConditionsChanged: (data?: SDK.NetworkManager.Conditions) => void;
+  onTimeoutChanged: (timeout?: number) => void;
+  handleRecordingTitleChanged: (title: string) => void;
+  handleRecordingChanged: (currentStep: Models.Schema.Step, newStep: Models.Schema.Step) => void;
+  handleStepAdded: (stepOrSection: Models.Schema.Step|Models.Section.Section, position: AddStepPosition) => void;
+  handleStepRemoved: (step: Models.Schema.Step) => void;
+  onAddBreakpoint: (index: number) => void;
+  onRemoveBreakpoint: (index: number) => void;
+  onExtensionViewClosed: () => void;
+  onExportMenuClosed: () => void;
+  onExportOptionSelected: (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => void;
+  onRecordingFinished: () => void;
+  handleAddAssertionEvent: () => void;
+  onSetRecording: (event: Event) => void;
+  onContinueReplay: () => void;
+  onStepOverReplay: () => void;
+
+  getExportMenuButton: () => Buttons.Button.Button;
+
+  onRecordingStarted:
+      (data: {name: string, selectorTypesToRecord: Models.Schema.SelectorType[], selectorAttribute?: string}) => void;
+  onRecordingCancelled: () => void;
+}
+
+export interface ViewOutput {
+  exportMenuButton: Buttons.Button.Button;
+  recordingView: RecordingView;
+  createRecordingView: CreateRecordingView;
+}
+
+export type View = (input: ViewInput, output: ViewOutput, target: DocumentFragment) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target): void => {
+  function renderCurrentPage(): LitTemplate {
+    switch (input.currentPage) {
+      case Pages.START_PAGE:
+        return renderStartPage();
+      case Pages.ALL_RECORDINGS_PAGE:
+        return renderAllRecordingsPage();
+      case Pages.RECORDING_PAGE:
+        return renderRecordingPage();
+      case Pages.CREATE_RECORDING_PAGE:
+        return renderCreateRecordingPage();
+    }
+  }
+
+  function renderAllRecordingsPage(): LitTemplate {
+    // clang-format off
+    return html`
+      <devtools-widget
+        ${widget(RecordingListView, {
+          recordings: input.recordings.map(recording => ({
+            storageName: recording.storageName,
+            name: recording.flow.title,
+          })),
+          replayAllowed: input.replayAllowed,
+          onCreateRecording: input.onCreateNewRecording,
+          onDeleteRecording: input.onDeleteRecording,
+          onOpenRecording: input.onRecordingSelected,
+          onPlayRecording: input.onPlayRecordingByName,
+        })}
+      >
+      </devtools-widget>
+    `;
+    // clang-format on
+  }
+
+  function renderStartPage(): LitTemplate {
+    // clang-format off
+    return html`
+      <div class="empty-state" jslog=${VisualLogging.section().context('start-view')}>
+        <div class="empty-state-header">${i18nString(UIStrings.header)}</div>
+        <div class="empty-state-description">
+          <span>${i18nString(UIStrings.recordingDescription)}</span>
+          <devtools-link
+            class="devtools-link"
+            href=${RECORDER_EXPLANATION_URL}
+            jslogcontext="learn-more"
+          >${i18nString(UIStrings.learnMore)}</devtools-link>
+        </div>
+        <devtools-button .variant=${Buttons.Button.Variant.TONAL} jslogContext=${Actions.RecorderActions.CREATE_RECORDING} @click=${input.onCreateNewRecording}>${i18nString(UIStrings.createRecording)}</devtools-button>
+      </div>
+    `;
+    // clang-format on
+  }
+
+  function renderRecordingPage(): LitTemplate {
+    // clang-format off
+    return html`
+      <devtools-widget
+          class="recording-view"
+          ${widget(RecordingView, {
+            recording: input.currentRecording?.flow ?? {title: '', steps: []},
+            replayState: input.replayState,
+            isRecording: input.isRecording,
+            recordingTogglingInProgress: input.isToggling,
+            currentStep: input.currentStep,
+            currentError: input.recordingError,
+            sections: input.sections ?? [],
+            settings: input.settings,
+            recorderSettings: input.recorderSettings,
+            lastReplayResult: input.lastReplayResult,
+            replayAllowed: input.replayAllowed,
+            breakpointIndexes: input.breakpointIndexes,
+            builtInConverters: input.builtInConverters,
+            extensionConverters: input.extensionConverters,
+            replayExtensions: input.replayExtensions,
+            extensionDescriptor: input.extensionDescriptor,
+            onRecordingFinished: input.onRecordingFinished,
+            onAddAssertion: input.handleAddAssertionEvent,
+            onAbortReplay: input.onAbortReplay,
+            onPlayRecording: input.onPlayRecording,
+            onNetworkConditionsChanged: input.onNetworkConditionsChanged,
+            onTimeoutChanged: input.onTimeoutChanged,
+            onTitleChanged: input.handleRecordingTitleChanged,
+            onStepChanged: input.handleRecordingChanged,
+            onAddStep: input.handleStepAdded,
+            onRemoveStep: input.handleStepRemoved,
+            onAddBreakpoint: input.onAddBreakpoint,
+            onRemoveBreakpoint: input.onRemoveBreakpoint,
+            onAttributeRequested: (send: (attribute?: string) => void) => {
+              send(input.currentRecording?.flow.selectorAttribute);
+            },
+          })}
+          @recorderextensionviewclosed=${input.onExtensionViewClosed}
+          ${UI.Widget.widgetRef(RecordingView, widget => {output.recordingView = widget; })}
+        ></devtools-widget>
+    `;
+    // clang-format on
+  }
+
+  function renderCreateRecordingPage(): LitTemplate {
+    // clang-format off
+    return html`
+      <devtools-widget
+        class="recording-view"
+        ${widget(CreateRecordingView, {
+          recorderSettings: input.recorderSettings,
+          onRecordingStarted: input.onRecordingStarted,
+          onRecordingCancelled: input.onRecordingCancelled,
+        })}
+        ${UI.Widget.widgetRef(
+          CreateRecordingView,
+          widget => {
+            output.createRecordingView = widget;
+          },
+        )}
+      ></devtools-widget>
+    `;
+    // clang-format on
+  }
+
+  const selectValue: string = input.currentRecording ? input.currentRecording.storageName : input.currentPage;
+  // clang-format off
+  const values = [
+    input.recordings.length === 0
+      ? {
+          value: Pages.START_PAGE,
+          name: i18nString(UIStrings.noRecordings),
+          selected: selectValue === Pages.START_PAGE,
+        }
+      : {
+          value: Pages.ALL_RECORDINGS_PAGE,
+          name: `${input.recordings.length} ${i18nString(UIStrings.numberOfRecordings)}`,
+          selected: selectValue === Pages.ALL_RECORDINGS_PAGE,
+        },
+    ...input.recordings.map(recording => ({
+      value: recording.storageName,
+      name: recording.flow.title,
+      selected: selectValue === recording.storageName,
+    })),
+  ];
+
+  render(html`
+        <style>${UI.inspectorCommonStyles}</style>
+        <style>${recorderPanelStyles}</style>
+        <div class="wrapper">
+          <div class="header" jslog=${VisualLogging.toolbar()}>
+            <devtools-button
+              @click=${input.onCreateNewRecording}
+              .data=${
+                {
+                  variant: Buttons.Button.Variant.TOOLBAR,
+                  iconName: 'plus',
+                  disabled:
+                    input.replayState.isPlaying ||
+                    input.isRecording ||
+                    input.isToggling,
+                  title: Models.Tooltip.getTooltipForActions(
+                    i18nString(UIStrings.createRecording),
+                    Actions.RecorderActions.CREATE_RECORDING,
+                  ),
+                  jslogContext: Actions.RecorderActions.CREATE_RECORDING,
+                } as Buttons.Button.ButtonData
+             }
+            ></devtools-button>
+            <div class="separator"></div>
+            <select
+              .disabled=${
+                input.recordings.length === 0 ||
+                input.replayState.isPlaying ||
+                input.isRecording ||
+                input.isToggling
+              }
+              @click=${(e: Event) => e.stopPropagation()}
+              @change=${input.onRecordingSelected}
+              jslog=${VisualLogging.dropDown('recordings').track({change: true})}
+            >
+              ${repeat(
+                values,
+                item => item.value,
+                item => {
+                  return html`<option .selected=${item.selected} value=${item.value}>${item.name}</option>`;
+                },
+              )}
+            </select>
+            <div class="separator"></div>
+            <devtools-button
+              @click=${input.onImportRecording}
+              .data=${
+                {
+                  variant: Buttons.Button.Variant.TOOLBAR,
+                  iconName: 'import',
+                  title: i18nString(UIStrings.importRecording),
+                  jslogContext: 'import-recording',
+                } as Buttons.Button.ButtonData
+              }
+            ></devtools-button>
+            <devtools-button
+              id='origin'
+              @click=${input.onExportRecording}
+              ${ref(el => {
+                if (el instanceof HTMLElement) {
+                  output.exportMenuButton = el as Buttons.Button.Button;
+                }
+              })}
+              .data=${
+                {
+                  variant: Buttons.Button.Variant.TOOLBAR,
+                  iconName: 'download',
+                  title: i18nString(UIStrings.exportRecording),
+                  disabled: !input.currentRecording,
+                } as Buttons.Button.ButtonData
+              }
+              jslog=${VisualLogging.dropDown('export-recording').track({click: true})}
+            ></devtools-button>
+            <devtools-menu
+              @menucloserequest=${input.onExportMenuClosed}
+              @menuitemselected=${input.onExportOptionSelected}
+              .origin=${input.getExportMenuButton}
+              .showDivider=${false}
+              .showSelectedItem=${false}
+              .open=${input.exportMenuExpanded}
+            >
+              <devtools-menu-group .name=${i18nString(UIStrings.export)}>
+                ${repeat(
+                  input.builtInConverters,
+                  converter => {
+                    return html`
+                    <devtools-menu-item
+                      .value=${converter.getId()}
+                      jslog=${VisualLogging.item(`converter-${Platform.StringUtilities.toKebabCase(converter.getId())}`).track({click: true})}>
+                      ${converter.getFormatName()}
+                    </devtools-menu-item>
+                  `;
+                  },
+                )}
+              </devtools-menu-group>
+              <devtools-menu-group .name=${i18nString(UIStrings.exportViaExtensions)}>
+                ${repeat(
+                  input.extensionConverters,
+                  converter => {
+                    return html`
+                    <devtools-menu-item
+                     .value=${converter.getId()}
+                      jslog=${VisualLogging.item('converter-extension').track({click: true})}>
+                    ${converter.getFormatName()}
+                    </devtools-menu-item>
+                  `;
+                  },
+                )}
+                <devtools-menu-item .value=${GET_EXTENSIONS_MENU_ITEM}>
+                  ${i18nString(UIStrings.getExtensions)}
+                </devtools-menu-item>
+              </devtools-menu-group>
+            </devtools-menu>
+            <devtools-button
+              @click=${input.onDeleteRecording}
+              .data=${
+                {
+                  variant: Buttons.Button.Variant.TOOLBAR,
+                  iconName: 'bin',
+                  disabled:
+                    !input.currentRecording ||
+                    input.replayState.isPlaying ||
+                    input.isRecording ||
+                    input.isToggling,
+                  title: i18nString(UIStrings.deleteRecording),
+                  jslogContext: 'delete-recording',
+                } as Buttons.Button.ButtonData
+              }
+            ></devtools-button>
+            <div class="separator"></div>
+            <devtools-button
+              @click=${input.onContinueReplay}
+              .data=${
+                {
+                  variant: Buttons.Button.Variant.PRIMARY_TOOLBAR,
+                  iconName: 'resume',
+                  disabled: !input.replayState.isPausedOnBreakpoint,
+                  title: i18nString(UIStrings.continueReplay),
+                  jslogContext: 'continue-replay',
+                } as Buttons.Button.ButtonData
+              }
+            ></devtools-button>
+            <devtools-button
+              @click=${input.onStepOverReplay}
+              .data=${
+                {
+                  variant: Buttons.Button.Variant.TOOLBAR,
+                  iconName: 'step-over',
+                  disabled: !input.replayState.isPausedOnBreakpoint,
+                  title: i18nString(UIStrings.stepOverReplay),
+                  jslogContext: 'step-over',
+                } as Buttons.Button.ButtonData
+              }
+            ></devtools-button>
+            <div class="feedback">
+              <devtools-link class="devtools-link" title=${i18nString(UIStrings.sendFeedback)} href=${
+                FEEDBACK_URL
+              } jslogcontext="feedback">${i18nString(UIStrings.sendFeedback)}</devtools-link>
+            </div>
+            <div class="separator"></div>
+            <devtools-shortcut-dialog
+              .data=${
+                {
+                  shortcuts: input.shortcutsInfo,
+                } as Dialogs.ShortcutDialog.ShortcutDialogData
+              } jslog=${VisualLogging.action('show-shortcuts').track({click: true})}
+            ></devtools-shortcut-dialog>
+          </div>
+          ${
+            input.importError
+              ? html`<div class='error'>Import error: ${
+                  input.importError.message
+                }</div>`
+             : ''
+          }
+          ${renderCurrentPage()}
+        </div>
+    `, target, { container: { listeners: {setrecording: input.onSetRecording}}});
+  // clang-format on
+};
+
 export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
   static panelName = 'chrome-recorder';
 
@@ -449,9 +823,12 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
   #recordingView?: RecordingView;
   #createRecordingView?: CreateRecordingView;
 
-  constructor(element?: HTMLElement) {
+  #view: typeof DEFAULT_VIEW;
+
+  constructor(element?: HTMLElement, view?: typeof DEFAULT_VIEW) {
     const el = element || document.createElement('devtools-recorder-panel');
     super(el, {useShadowDom: 'pure'});
+    this.#view = view || DEFAULT_VIEW;
 
     this.setHideOnDetach();
 
@@ -901,7 +1278,7 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
     return this.currentRecording?.flow;
   }
 
-  async #handleRecordingChanged(event: StepChanged): Promise<void> {
+  async #handleRecordingChanged(currentStep: Models.Schema.Step, newStep: Models.Schema.Step): Promise<void> {
     if (!this.currentRecording) {
       throw new Error('Current recording expected to be defined.');
     }
@@ -909,7 +1286,7 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
       ...this.currentRecording,
       flow: {
         ...this.currentRecording.flow,
-        steps: this.currentRecording.flow.steps.map(step => step === event.currentStep ? event.newStep : step),
+        steps: this.currentRecording.flow.steps.map(step => step === currentStep ? newStep : step),
       },
     };
     this.#setCurrentRecording(await this.#storage.upsertRecording(
@@ -919,26 +1296,26 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
                               {keepBreakpoints: true, updateSession: true});
   }
 
-  async #handleStepAdded(event: AddStep): Promise<void> {
+  async #handleStepAdded(stepOrSection: Models.Schema.Step|Models.Section.Section,
+                         position: AddStepPosition): Promise<void> {
     if (!this.currentRecording) {
       throw new Error('Current recording expected to be defined.');
     }
-    const stepOrSection = event.stepOrSection;
     let step;
-    let position = event.position;
+    let actualPosition = position;
     if ('steps' in stepOrSection) {
       // section
       const sectionIdx = this.sections?.indexOf(stepOrSection);
       if (sectionIdx === undefined || sectionIdx === -1) {
         throw new Error('There is no section to add a step to');
       }
-      if (event.position === AddStepPosition.AFTER) {
+      if (position === AddStepPosition.AFTER) {
         if (this.sections?.[sectionIdx].steps.length) {
           step = this.sections?.[sectionIdx].steps[0];
-          position = AddStepPosition.BEFORE;
+          actualPosition = AddStepPosition.BEFORE;
         } else {
           step = this.sections?.[sectionIdx].causingStep;
-          position = AddStepPosition.AFTER;
+          actualPosition = AddStepPosition.AFTER;
         }
       } else {
         if (sectionIdx <= 0) {
@@ -946,7 +1323,7 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
         }
         const prevSection = this.sections?.[sectionIdx - 1];
         step = prevSection?.steps[prevSection.steps.length - 1];
-        position = AddStepPosition.AFTER;
+        actualPosition = AddStepPosition.AFTER;
       }
     } else {
       // step
@@ -957,7 +1334,7 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
     }
     const steps = this.currentRecording.flow.steps;
     const currentIndex = steps.indexOf(step);
-    const indexToInsertAt = currentIndex + (position === AddStepPosition.BEFORE ? 0 : 1);
+    const indexToInsertAt = currentIndex + (actualPosition === AddStepPosition.BEFORE ? 0 : 1);
     steps.splice(indexToInsertAt, 0, {type: Models.Schema.StepType.WaitForElement, selectors: ['body']});
     const recording = {...this.currentRecording, flow: {...this.currentRecording.flow, steps}};
     this.#stepBreakpointIndexes = new Set([...this.#stepBreakpointIndexes.values()].map(breakpointIndex => {
@@ -986,13 +1363,13 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
         ));
   }
 
-  async #handleStepRemoved(event: RemoveStep): Promise<void> {
+  async #handleStepRemoved(step: Models.Schema.Step): Promise<void> {
     if (!this.currentRecording) {
       throw new Error('Current recording expected to be defined.');
     }
 
     const steps = this.currentRecording.flow.steps;
-    const currentIndex = steps.indexOf(event.step);
+    const currentIndex = steps.indexOf(step);
     steps.splice(currentIndex, 1);
     const flow = {...this.currentRecording.flow, steps};
     this.#stepBreakpointIndexes = new Set([...this.#stepBreakpointIndexes.values()]
@@ -1065,19 +1442,22 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
         ));
   }
 
-  async #onDeleteRecording(event: Event): Promise<void> {
-    event.stopPropagation();
-    if (event instanceof DeleteRecordingEvent) {
-      await this.#storage.deleteRecording(event.storageName);
-      this.#screenshotStorage.deleteScreenshotsForRecording(event.storageName);
-      this.requestUpdate();
+  async #onDeleteRecording(storageNameOrEvent: string|Event): Promise<void> {
+    let storageName: string;
+    if (typeof storageNameOrEvent === 'string') {
+      storageName = storageNameOrEvent;
     } else {
+      storageNameOrEvent.stopPropagation();
       if (!this.currentRecording) {
         return;
       }
-      await this.#storage.deleteRecording(this.currentRecording.storageName);
-      this.#screenshotStorage.deleteScreenshotsForRecording(this.currentRecording.storageName);
+      storageName = this.currentRecording.storageName;
     }
+
+    await this.#storage.deleteRecording(storageName);
+    this.#screenshotStorage.deleteScreenshotsForRecording(storageName);
+    this.requestUpdate();
+
     UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.recordingDeleted));
     if ((await this.#storage.getRecordings()).length) {
       this.#setCurrentPage(Pages.ALL_RECORDINGS_PAGE);
@@ -1205,10 +1585,13 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
     }
   }
 
-  async #onRecordingSelected(event: Event): Promise<void> {
-    const storageName = event instanceof OpenRecordingEvent || event instanceof ListViewPlayRecordingEvent ?
-        event.storageName :
-        ((event as InputEvent).target as HTMLSelectElement)?.value;
+  async #onRecordingSelected(storageNameOrEvent: string|Event): Promise<void> {
+    let storageName: string;
+    if (typeof storageNameOrEvent === 'string') {
+      storageName = storageNameOrEvent;
+    } else {
+      storageName = ((storageNameOrEvent as InputEvent).target as HTMLSelectElement)?.value;
+    }
     this.#setCurrentRecording(await this.#storage.getRecording(storageName));
     if (this.currentRecording) {
       this.#setCurrentPage(Pages.RECORDING_PAGE);
@@ -1322,21 +1705,21 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
     }
   }
 
-  async #onPlayRecordingByName(event: ListViewPlayRecordingEvent): Promise<void> {
-    await this.#onRecordingSelected(event);
+  async #onPlayRecordingByName(storageName: string): Promise<void> {
+    await this.#onRecordingSelected(storageName);
     await this.#onPlayRecording({targetPanel: TargetPanel.DEFAULT, speed: this.#recorderSettings.speed});
   }
 
-  #onAddBreakpoint = (event: AddBreakpointEvent): void => {
+  #onAddBreakpoint = (index: number): void => {
     this.#stepBreakpointIndexes = structuredClone(this.#stepBreakpointIndexes);
-    this.#stepBreakpointIndexes.add(event.index);
+    this.#stepBreakpointIndexes.add(index);
     this.recordingPlayer?.updateBreakpointIndexes(this.#stepBreakpointIndexes);
     this.requestUpdate();
   };
 
-  #onRemoveBreakpoint = (event: RemoveBreakpointEvent): void => {
+  #onRemoveBreakpoint = (index: number): void => {
     this.#stepBreakpointIndexes = structuredClone(this.#stepBreakpointIndexes);
-    this.#stepBreakpointIndexes.delete(event.index);
+    this.#stepBreakpointIndexes.delete(index);
     this.recordingPlayer?.updateBreakpointIndexes(this.#stepBreakpointIndexes);
     this.requestUpdate();
   };
@@ -1431,128 +1814,6 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
     ];
   }
 
-  #renderCurrentPage(): Lit.TemplateResult {
-    switch (this.currentPage) {
-      case Pages.START_PAGE:
-        return this.#renderStartPage();
-      case Pages.ALL_RECORDINGS_PAGE:
-        return this.#renderAllRecordingsPage();
-      case Pages.RECORDING_PAGE:
-        return this.#renderRecordingPage();
-      case Pages.CREATE_RECORDING_PAGE:
-        return this.#renderCreateRecordingPage();
-    }
-  }
-
-  #renderAllRecordingsPage(): Lit.TemplateResult {
-    const recordings = this.#storage.getRecordings();
-    // clang-format off
-    return html`
-      <devtools-widget
-        ${widget(RecordingListView, {
-          recordings: recordings.map(recording => ({
-            storageName: recording.storageName,
-            name: recording.flow.title,
-          })),
-          replayAllowed: this.#replayAllowed,
-        })}
-        @createrecording=${this.#onCreateNewRecording.bind(this)}
-        @deleterecording=${this.#onDeleteRecording.bind(this)}
-        @openrecording=${this.#onRecordingSelected.bind(this)}
-        @playrecording=${this.#onPlayRecordingByName.bind(this)}
-      >
-      </devtools-widget>
-    `;
-    // clang-format on
-  }
-
-  #renderStartPage(): Lit.TemplateResult {
-    // clang-format off
-    return html`
-      <div class="empty-state" jslog=${VisualLogging.section().context('start-view')}>
-        <div class="empty-state-header">${i18nString(UIStrings.header)}</div>
-        <div class="empty-state-description">
-          <span>${i18nString(UIStrings.recordingDescription)}</span>
-          <devtools-link
-            class="devtools-link"
-            href=${RECORDER_EXPLANATION_URL}
-            jslogcontext="learn-more"
-          >${i18nString(UIStrings.learnMore)}</devtools-link>
-        </div>
-        <devtools-button .variant=${Buttons.Button.Variant.TONAL} jslogContext=${Actions.RecorderActions.CREATE_RECORDING} @click=${this.#onCreateNewRecording.bind(this)}>${i18nString(UIStrings.createRecording)}</devtools-button>
-      </div>
-    `;
-    // clang-format on
-  }
-
-  #renderRecordingPage(): Lit.TemplateResult {
-    // clang-format off
-    return html`
-      <devtools-widget
-          class="recording-view"
-          ${widget(RecordingView, {
-            recording: this.currentRecording?.flow ?? {title: '', steps: []},
-            replayState: this.#replayState,
-            isRecording: this.isRecording,
-            recordingTogglingInProgress: this.isToggling,
-            currentStep: this.currentStep,
-            currentError: this.recordingError,
-            sections: this.sections ?? [],
-            settings: this.settings,
-            recorderSettings: this.#recorderSettings,
-            lastReplayResult: this.lastReplayResult,
-            replayAllowed: this.#replayAllowed,
-            breakpointIndexes: this.#stepBreakpointIndexes,
-            builtInConverters: this.#builtInConverters,
-            extensionConverters: this.extensionConverters,
-            replayExtensions: this.replayExtensions,
-            extensionDescriptor: this.viewDescriptor,
-            recordingFinished: this.#onRecordingFinished.bind(this),
-            addAssertion: this.#handleAddAssertionEvent.bind(this),
-            abortReplay: this.#onAbortReplay.bind(this),
-            playRecording: this.#onPlayRecording.bind(this),
-            networkConditionsChanged: this.#onNetworkConditionsChanged.bind(this),
-            timeoutChanged: this.#onTimeoutChanged.bind(this),
-            titleChanged: this.#handleRecordingTitleChanged.bind(this),
-          })}
-          @requestselectorattribute=${(
-            event: RequestSelectorAttributeEvent,
-          ) => {
-            event.send(this.currentRecording?.flow.selectorAttribute);
-          }}
-          @stepchanged=${this.#handleRecordingChanged.bind(this)}
-          @addstep=${this.#handleStepAdded.bind(this)}
-          @removestep=${this.#handleStepRemoved.bind(this)}
-          @addbreakpoint=${this.#onAddBreakpoint.bind(this)}
-          @removebreakpoint=${this.#onRemoveBreakpoint.bind(this)}
-          @recorderextensionviewclosed=${this.#onExtensionViewClosed.bind(this)}
-          ${UI.Widget.widgetRef(RecordingView, widget => {this.#recordingView = widget;})}
-        ></devtools-widget>
-    `;
-    // clang-format on
-  }
-
-  #renderCreateRecordingPage(): Lit.TemplateResult {
-    // clang-format off
-    return html`
-      <devtools-widget
-        class="recording-view"
-        ${widget(CreateRecordingView, {
-          recorderSettings: this.#recorderSettings,
-          onRecordingStarted: this.#onRecordingStarted.bind(this),
-          onRecordingCancelled: this.onRecordingCancelled.bind(this),
-        })}
-        ${UI.Widget.widgetRef(
-          CreateRecordingView,
-          widget => {
-            this.#createRecordingView = widget;
-          },
-        )}
-      ></devtools-widget>
-    `;
-    // clang-format on
-  }
-
   #getExportMenuButton = (): Buttons.Button.Button => {
     if (!this.#exportMenuButton) {
       throw new Error('#exportMenuButton not found');
@@ -1571,220 +1832,71 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
   }
 
   override performUpdate(): void {
-    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-    Lit.render(this.render(), this.contentElement, {
-      container: {
-        listeners: {setrecording: this.#onSetRecording.bind(this)},
-      }
-    });
-  }
-
-  protected render(): Lit.TemplateResult {
     const recordings = this.#storage.getRecordings();
-    const selectValue: string = this.currentRecording ? this.currentRecording.storageName : this.currentPage;
-    // clang-format off
-    const values = [
-      recordings.length === 0
-        ? {
-            value: Pages.START_PAGE,
-            name: i18nString(UIStrings.noRecordings),
-            selected: selectValue === Pages.START_PAGE,
-          }
-        : {
-            value: Pages.ALL_RECORDINGS_PAGE,
-            name: `${recordings.length} ${i18nString(UIStrings.numberOfRecordings)}`,
-            selected: selectValue === Pages.ALL_RECORDINGS_PAGE,
-          },
-      ...recordings.map(recording => ({
-        value: recording.storageName,
-        name: recording.flow.title,
-        selected: selectValue === recording.storageName,
-      })),
-    ];
-
-    return html`
-        <style>${UI.inspectorCommonStyles}</style>
-        <style>${recorderPanelStyles}</style>
-        <div class="wrapper">
-          <div class="header" jslog=${VisualLogging.toolbar()}>
-            <devtools-button
-              @click=${this.#onCreateNewRecording.bind(this)}
-              .data=${
-                {
-                  variant: Buttons.Button.Variant.TOOLBAR,
-                  iconName: 'plus',
-                  disabled:
-                    this.#replayState.isPlaying ||
-                    this.isRecording ||
-                    this.isToggling,
-                  title: Models.Tooltip.getTooltipForActions(
-                    i18nString(UIStrings.createRecording),
-                    Actions.RecorderActions.CREATE_RECORDING,
-                  ),
-                  jslogContext: Actions.RecorderActions.CREATE_RECORDING,
-                } as Buttons.Button.ButtonData
-              }
-            ></devtools-button>
-            <div class="separator"></div>
-            <select
-              .disabled=${
-                recordings.length === 0 ||
-                this.#replayState.isPlaying ||
-                this.isRecording ||
-                this.isToggling
-              }
-              @click=${(e: Event) => e.stopPropagation()}
-              @change=${this.#onRecordingSelected.bind(this)}
-              jslog=${VisualLogging.dropDown('recordings').track({change: true})}
-            >
-              ${Lit.Directives.repeat(
-                values,
-                item => item.value,
-                item => {
-                  return html`<option .selected=${item.selected} value=${item.value}>${item.name}</option>`;
-                },
-              )}
-            </select>
-            <div class="separator"></div>
-            <devtools-button
-              @click=${this.#onImportRecording.bind(this)}
-              .data=${
-                {
-                  variant: Buttons.Button.Variant.TOOLBAR,
-                  iconName: 'import',
-                  title: i18nString(UIStrings.importRecording),
-                  jslogContext: 'import-recording',
-                } as Buttons.Button.ButtonData
-              }
-            ></devtools-button>
-            <devtools-button
-              id='origin'
-              @click=${this.#onExportRecording.bind(this)}
-              ${ref(el => {
-                if (el instanceof HTMLElement) {
-                  this.#exportMenuButton = el as Buttons.Button.Button;
-                }
-              })}
-              .data=${
-                {
-                  variant: Buttons.Button.Variant.TOOLBAR,
-                  iconName: 'download',
-                  title: i18nString(UIStrings.exportRecording),
-                  disabled: !this.currentRecording,
-                } as Buttons.Button.ButtonData
-              }
-              jslog=${VisualLogging.dropDown('export-recording').track({click: true})}
-            ></devtools-button>
-            <devtools-menu
-              @menucloserequest=${this.#onExportMenuClosed.bind(this)}
-              @menuitemselected=${this.#onExportOptionSelected.bind(this)}
-              .origin=${this.#getExportMenuButton}
-              .showDivider=${false}
-              .showSelectedItem=${false}
-              .open=${this.exportMenuExpanded}
-            >
-              <devtools-menu-group .name=${i18nString(UIStrings.export)}>
-                ${Lit.Directives.repeat(
-                  this.#builtInConverters,
-                  converter => {
-                    return html`
-                    <devtools-menu-item
-                      .value=${converter.getId()}
-                      jslog=${VisualLogging.item(`converter-${Platform.StringUtilities.toKebabCase(converter.getId())}`).track({click: true})}>
-                      ${converter.getFormatName()}
-                    </devtools-menu-item>
-                  `;
-                  },
-                )}
-              </devtools-menu-group>
-              <devtools-menu-group .name=${i18nString(UIStrings.exportViaExtensions)}>
-                ${Lit.Directives.repeat(
-                  this.extensionConverters,
-                  converter => {
-                    return html`
-                    <devtools-menu-item
-                     .value=${converter.getId()}
-                      jslog=${VisualLogging.item('converter-extension').track({click: true})}>
-                    ${converter.getFormatName()}
-                    </devtools-menu-item>
-                  `;
-                  },
-                )}
-                <devtools-menu-item .value=${GET_EXTENSIONS_MENU_ITEM}>
-                  ${i18nString(UIStrings.getExtensions)}
-                </devtools-menu-item>
-              </devtools-menu-group>
-            </devtools-menu>
-            <devtools-button
-              @click=${this.#onDeleteRecording.bind(this)}
-              .data=${
-                {
-                  variant: Buttons.Button.Variant.TOOLBAR,
-                  iconName: 'bin',
-                  disabled:
-                    !this.currentRecording ||
-                    this.#replayState.isPlaying ||
-                    this.isRecording ||
-                    this.isToggling,
-                  title: i18nString(UIStrings.deleteRecording),
-                  jslogContext: 'delete-recording',
-                } as Buttons.Button.ButtonData
-              }
-            ></devtools-button>
-            <div class="separator"></div>
-            <devtools-button
-              @click=${() => this.recordingPlayer?.continue()}
-              .data=${
-                {
-                  variant: Buttons.Button.Variant.PRIMARY_TOOLBAR,
-                  iconName: 'resume',
-                  disabled:
-                    !this.recordingPlayer ||
-                    !this.#replayState.isPausedOnBreakpoint,
-                  title: i18nString(UIStrings.continueReplay),
-                  jslogContext: 'continue-replay',
-                } as Buttons.Button.ButtonData
-              }
-            ></devtools-button>
-            <devtools-button
-              @click=${() => this.recordingPlayer?.stepOver()}
-              .data=${
-                {
-                  variant: Buttons.Button.Variant.TOOLBAR,
-                  iconName: 'step-over',
-                  disabled:
-                    !this.recordingPlayer ||
-                    !this.#replayState.isPausedOnBreakpoint,
-                  title: i18nString(UIStrings.stepOverReplay),
-                  jslogContext: 'step-over',
-                } as Buttons.Button.ButtonData
-              }
-            ></devtools-button>
-            <div class="feedback">
-              <devtools-link class="devtools-link" title=${i18nString(UIStrings.sendFeedback)} href=${
-                FEEDBACK_URL
-              } jslogcontext="feedback">${i18nString(UIStrings.sendFeedback)}</devtools-link>
-            </div>
-            <div class="separator"></div>
-            <devtools-shortcut-dialog
-              .data=${
-                {
-                  shortcuts: this.#getShortcutsInfo(),
-                } as Dialogs.ShortcutDialog.ShortcutDialogData
-              } jslog=${VisualLogging.action('show-shortcuts').track({click: true})}
-            ></devtools-shortcut-dialog>
-          </div>
-          ${
-            this.importError
-              ? html`<div class='error'>Import error: ${
-                  this.importError.message
-                }</div>`
-              : ''
-          }
-          ${this.#renderCurrentPage()}
-        </div>
-      `;
-    // clang-format on
+    const that = this;
+    const output = {
+      set exportMenuButton(el: Buttons.Button.Button) {
+        that.#exportMenuButton = el;
+      },
+      set recordingView(widget: RecordingView) {
+        that.#recordingView = widget;
+      },
+      set createRecordingView(widget: CreateRecordingView) {
+        that.#createRecordingView = widget;
+      }
+    };
+    this.#view({
+      recordings,
+      currentRecording: this.currentRecording,
+      currentPage: this.currentPage,
+      isRecording: this.isRecording,
+      isToggling: this.isToggling,
+      importError: this.importError,
+      recordingError: this.recordingError,
+      sections: this.sections ?? [],
+      settings: this.settings,
+      recorderSettings: this.#recorderSettings,
+      lastReplayResult: this.lastReplayResult,
+      replayAllowed: this.#replayAllowed,
+      breakpointIndexes: this.#stepBreakpointIndexes,
+      builtInConverters: this.#builtInConverters,
+      extensionConverters: this.extensionConverters,
+      replayExtensions: this.replayExtensions,
+      extensionDescriptor: this.viewDescriptor,
+      exportMenuExpanded: this.exportMenuExpanded,
+      replayState: this.#replayState,
+      shortcutsInfo: this.#getShortcutsInfo(),
+      currentStep: this.currentStep,
+
+      onCreateNewRecording: this.#onCreateNewRecording.bind(this),
+      onImportRecording: this.#onImportRecording.bind(this),
+      onExportRecording: this.#onExportRecording.bind(this),
+      onDeleteRecording: this.#onDeleteRecording.bind(this),
+      onRecordingSelected: this.#onRecordingSelected.bind(this),
+      onPlayRecordingByName: this.#onPlayRecordingByName.bind(this),
+      onPlayRecording: this.#onPlayRecording.bind(this),
+      onAbortReplay: this.#onAbortReplay.bind(this),
+      onNetworkConditionsChanged: this.#onNetworkConditionsChanged.bind(this),
+      onTimeoutChanged: this.#onTimeoutChanged.bind(this),
+      handleRecordingTitleChanged: this.#handleRecordingTitleChanged.bind(this),
+      handleRecordingChanged: this.#handleRecordingChanged.bind(this),
+      handleStepAdded: this.#handleStepAdded.bind(this),
+      handleStepRemoved: this.#handleStepRemoved.bind(this),
+      onAddBreakpoint: this.#onAddBreakpoint.bind(this),
+      onRemoveBreakpoint: this.#onRemoveBreakpoint.bind(this),
+      onExtensionViewClosed: this.#onExtensionViewClosed.bind(this),
+      onExportMenuClosed: this.#onExportMenuClosed.bind(this),
+      onExportOptionSelected: this.#onExportOptionSelected.bind(this),
+      onRecordingFinished: this.#onRecordingFinished.bind(this),
+      handleAddAssertionEvent: this.#handleAddAssertionEvent.bind(this),
+      onSetRecording: this.#onSetRecording.bind(this),
+      onContinueReplay: () => this.recordingPlayer?.continue(),
+      onStepOverReplay: () => this.recordingPlayer?.stepOver(),
+      getExportMenuButton: this.#getExportMenuButton.bind(this),
+      onRecordingStarted: this.#onRecordingStarted.bind(this),
+      onRecordingCancelled: this.onRecordingCancelled.bind(this),
+    },
+               output, this.contentElement);
   }
 }