chrome-devtools-frontend 1.0.1660788 → 1.0.1662289

package/front_end/panels/recorder/RecorderController.ts

@@ -22,17 +22,36 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import * as Components from './components/components.js';
-import type {AddBreakpointEvent, RemoveBreakpointEvent} from './components/StepView.js';
 import * as Converters from './converters/converters.js';
+import {CreateRecordingView} from './CreateRecordingView.js';
 import * as Extensions from './extensions/extensions.js';
 import * as Models from './models/models.js';
 import * as Actions from './recorder-actions/recorder-actions.js';
 import recorderControllerStyles from './recorderController.css.js';
 import * as Events from './RecorderEvents.js';
-
-const {html, Decorators, Directives: {ref}, LitElement} = Lit;
-const {customElement, state} = Decorators;
+import {
+  DeleteRecordingEvent,
+  OpenRecordingEvent,
+  PlayRecordingEvent as ListViewPlayRecordingEvent,
+  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 UIStrings = {
   /**
@@ -157,12 +176,6 @@ 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;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-recorder-controller': RecorderController;
-  }
-}
-
 interface StoredRecording {
   storageName: string;
   flow: Models.Schema.UserFlow;
@@ -205,45 +218,209 @@ function verifyFlowSize(flow: Models.Schema.UserFlow): void {
   }
 }
 
-@customElement('devtools-recorder-controller')
-export class RecorderController extends LitElement {
-  @state() declare private currentRecordingSession?: Models.RecordingSession.RecordingSession;
-  @state() declare private currentRecording: StoredRecording|undefined;
-  @state() declare private currentStep?: Models.Schema.Step;
-  @state() declare private recordingError?: Error;
+export class RecorderController extends UI.Widget.VBox<DocumentFragment> {
+  #currentRecordingSession?: Models.RecordingSession.RecordingSession;
+  get currentRecordingSession(): Models.RecordingSession.RecordingSession|undefined {
+    return this.#currentRecordingSession;
+  }
+  set currentRecordingSession(value: Models.RecordingSession.RecordingSession|undefined) {
+    if (this.#currentRecordingSession !== value) {
+      this.#currentRecordingSession = value;
+      this.requestUpdate();
+    }
+  }
+
+  #currentRecording: StoredRecording|undefined;
+  get currentRecording(): StoredRecording|undefined {
+    return this.#currentRecording;
+  }
+  set currentRecording(value: StoredRecording|undefined) {
+    if (this.#currentRecording !== value) {
+      this.#currentRecording = value;
+      this.requestUpdate();
+    }
+  }
+
+  #currentStep?: Models.Schema.Step;
+  get currentStep(): Models.Schema.Step|undefined {
+    return this.#currentStep;
+  }
+  set currentStep(value: Models.Schema.Step|undefined) {
+    if (this.#currentStep !== value) {
+      this.#currentStep = value;
+      this.requestUpdate();
+    }
+  }
+
+  #recordingError?: Error;
+  get recordingError(): Error|undefined {
+    return this.#recordingError;
+  }
+  set recordingError(value: Error|undefined) {
+    if (this.#recordingError !== value) {
+      this.#recordingError = value;
+      this.requestUpdate();
+    }
+  }
 
   #storage = Models.RecordingStorage.RecordingStorage.instance();
   #screenshotStorage = Models.ScreenshotStorage.ScreenshotStorage.instance();
 
-  @state() declare private isRecording: boolean;
-  @state() declare private isToggling: boolean;
+  #isRecording = false;
+  get isRecording(): boolean {
+    return this.#isRecording;
+  }
+  set isRecording(value: boolean) {
+    if (this.#isRecording !== value) {
+      this.#isRecording = value;
+      this.requestUpdate();
+    }
+  }
+
+  #isToggling = false;
+  get isToggling(): boolean {
+    return this.#isToggling;
+  }
+  set isToggling(value: boolean) {
+    if (this.#isToggling !== value) {
+      this.#isToggling = value;
+      this.requestUpdate();
+    }
+  }
 
   // TODO: we keep the functionality to allow/disallow replay but right now it's not used.
   // It can be used to decide if we allow replay on a certain target for example.
   #replayAllowed = true;
-  @state() declare private recordingPlayer?: Models.RecordingPlayer.RecordingPlayer;
-  @state() declare private lastReplayResult?: Models.RecordingPlayer.ReplayResult;
-  readonly #replayState: Components.RecordingView.ReplayState = {isPlaying: false, isPausedOnBreakpoint: false};
 
-  @state() declare private currentPage: Pages;
-  @state() declare private previousPage?: Pages;
+  #recordingPlayer?: Models.RecordingPlayer.RecordingPlayer;
+  get recordingPlayer(): Models.RecordingPlayer.RecordingPlayer|undefined {
+    return this.#recordingPlayer;
+  }
+  set recordingPlayer(value: Models.RecordingPlayer.RecordingPlayer|undefined) {
+    if (this.#recordingPlayer !== value) {
+      this.#recordingPlayer = value;
+      this.requestUpdate();
+    }
+  }
+
+  #lastReplayResult?: Models.RecordingPlayer.ReplayResult;
+  get lastReplayResult(): Models.RecordingPlayer.ReplayResult|undefined {
+    return this.#lastReplayResult;
+  }
+  set lastReplayResult(value: Models.RecordingPlayer.ReplayResult|undefined) {
+    if (this.#lastReplayResult !== value) {
+      this.#lastReplayResult = value;
+      this.requestUpdate();
+    }
+  }
+
+  readonly #replayState: ReplayState = {isPlaying: false, isPausedOnBreakpoint: false};
+
+  #currentPage: Pages = Pages.START_PAGE;
+  get currentPage(): Pages {
+    return this.#currentPage;
+  }
+  set currentPage(value: Pages) {
+    if (this.#currentPage !== value) {
+      this.#currentPage = value;
+      this.requestUpdate();
+    }
+  }
+
+  #previousPage?: Pages;
+  get previousPage(): Pages|undefined {
+    return this.#previousPage;
+  }
+  set previousPage(value: Pages|undefined) {
+    if (this.#previousPage !== value) {
+      this.#previousPage = value;
+      this.requestUpdate();
+    }
+  }
+
   #fileSelector?: HTMLInputElement;
 
-  @state() declare private sections?: Models.Section.Section[];
-  @state() declare private settings?: Models.RecordingSettings.RecordingSettings;
+  #sections?: Models.Section.Section[];
+  get sections(): Models.Section.Section[]|undefined {
+    return this.#sections;
+  }
+  set sections(value: Models.Section.Section[]|undefined) {
+    if (this.#sections !== value) {
+      this.#sections = value;
+      this.requestUpdate();
+    }
+  }
 
-  @state() declare private importError?: Error;
+  #settings?: Models.RecordingSettings.RecordingSettings;
+  get settings(): Models.RecordingSettings.RecordingSettings|undefined {
+    return this.#settings;
+  }
+  set settings(value: Models.RecordingSettings.RecordingSettings|undefined) {
+    if (this.#settings !== value) {
+      this.#settings = value;
+      this.requestUpdate();
+    }
+  }
+
+  #importError?: Error;
+  get importError(): Error|undefined {
+    return this.#importError;
+  }
+  set importError(value: Error|undefined) {
+    if (this.#importError !== value) {
+      this.#importError = value;
+      this.requestUpdate();
+    }
+  }
+
+  #exportMenuExpanded = false;
+  get exportMenuExpanded(): boolean {
+    return this.#exportMenuExpanded;
+  }
+  set exportMenuExpanded(value: boolean) {
+    if (this.#exportMenuExpanded !== value) {
+      this.#exportMenuExpanded = value;
+      this.requestUpdate();
+    }
+  }
 
-  @state() declare private exportMenuExpanded: boolean;
   #exportMenuButton: Buttons.Button.Button|undefined;
 
   #stepBreakpointIndexes = new Set<number>();
 
   #builtInConverters: readonly Converters.Converter.Converter[];
-  @state() declare private extensionConverters: Converters.Converter.Converter[];
-  @state() declare private replayExtensions: Extensions.ExtensionManager.Extension[];
+  #extensionConverters: Converters.Converter.Converter[] = [];
+  get extensionConverters(): Converters.Converter.Converter[] {
+    return this.#extensionConverters;
+  }
+  set extensionConverters(value: Converters.Converter.Converter[]) {
+    if (this.#extensionConverters !== value) {
+      this.#extensionConverters = value;
+      this.requestUpdate();
+    }
+  }
 
-  @state() declare private viewDescriptor?: PublicExtensions.RecorderPluginManager.ViewDescriptor;
+  #replayExtensions: Extensions.ExtensionManager.Extension[] = [];
+  get replayExtensions(): Extensions.ExtensionManager.Extension[] {
+    return this.#replayExtensions;
+  }
+  set replayExtensions(value: Extensions.ExtensionManager.Extension[]) {
+    if (this.#replayExtensions !== value) {
+      this.#replayExtensions = value;
+      this.requestUpdate();
+    }
+  }
+
+  #viewDescriptor?: PublicExtensions.RecorderPluginManager.ViewDescriptor;
+  get viewDescriptor(): PublicExtensions.RecorderPluginManager.ViewDescriptor|undefined {
+    return this.#viewDescriptor;
+  }
+  set viewDescriptor(value: PublicExtensions.RecorderPluginManager.ViewDescriptor|undefined) {
+    if (this.#viewDescriptor !== value) {
+      this.#viewDescriptor = value;
+      this.requestUpdate();
+    }
+  }
   #extensionViewShowRequestedListener?:
       (event: Common.EventTarget.EventTargetEvent<PublicExtensions.RecorderPluginManager.ViewDescriptor>) => void;
 
@@ -255,11 +432,12 @@ export class RecorderController extends LitElement {
   #selfXssWarningDisabledSetting = Common.Settings.Settings.instance().createSetting(
       'disable-self-xss-warning', false, Common.Settings.SettingStorageType.SYNCED);
 
-  #recordingView?: Components.RecordingView.RecordingView;
-  #createRecordingView?: Components.CreateRecordingView.CreateRecordingView;
+  #recordingView?: RecordingView;
+  #createRecordingView?: CreateRecordingView;
 
   constructor() {
-    super();
+    const element = document.createElement('devtools-recorder-controller');
+    super(element, {useShadowDom: 'pure'});
 
     this.isRecording = false;
     this.isToggling = false;
@@ -286,11 +464,12 @@ export class RecorderController extends LitElement {
     });
 
     // used in e2e tests only.
-    this.addEventListener('setrecording', (event: Event) => this.#onSetRecording(event));
+    /* eslint-disable-next-line @devtools/no-imperative-dom-api */
+    this.element.addEventListener('setrecording', (event: Event) => this.#onSetRecording(event));
   }
 
-  override disconnectedCallback(): void {
-    super.disconnectedCallback();
+  override onDetach(): void {
+    super.onDetach();
 
     if (this.currentRecordingSession) {
       void this.currentRecordingSession.stop();
@@ -316,7 +495,7 @@ export class RecorderController extends LitElement {
     this.isRecording = isRecording;
   }
 
-  setRecordingStateForTesting(state: Components.RecordingView.ReplayState): void {
+  setRecordingStateForTesting(state: ReplayState): void {
     this.#replayState.isPlaying = state.isPlaying;
     this.#replayState.isPausedOnBreakpoint = state.isPausedOnBreakpoint;
   }
@@ -348,9 +527,8 @@ export class RecorderController extends LitElement {
 
   async #importFile(file: File): Promise<void> {
     const outputStream = new Common.StringOutputStream.StringOutputStream();
-    const reader = new Bindings.FileUtils.ChunkedFileReader(
-        file,
-        /* chunkSize */ 10000000);
+    const reader = new Bindings.FileUtils.ChunkedFileReader(file,
+                                                            /* chunkSize */ 10000000);
     const success = await reader.read(outputStream);
     if (!success) {
       throw reader.error() ?? new Error('Unknown');
@@ -426,9 +604,8 @@ export class RecorderController extends LitElement {
       }
       if (!settings.networkConditionsSettings && step.type === 'emulateNetworkConditions') {
         settings.networkConditionsSettings = {...step};
-        for (const preset
-                 of [SDK.NetworkManager.OfflineConditions, SDK.NetworkManager.Slow3GConditions,
-                     SDK.NetworkManager.Slow4GConditions, SDK.NetworkManager.Fast4GConditions]) {
+        for (const preset of [SDK.NetworkManager.OfflineConditions, SDK.NetworkManager.Slow3GConditions,
+                              SDK.NetworkManager.Slow4GConditions, SDK.NetworkManager.Fast4GConditions]) {
           // Using i18nTitleKey as a title here because we only want to compare the parameters of the network conditions.
           if (SDK.NetworkManager.networkConditionsEqual(
                   {...preset, title: preset.i18nTitleKey || ''},
@@ -530,7 +707,7 @@ export class RecorderController extends LitElement {
     Host.userMetrics.recordingReplayStarted(Host.UserMetrics.RecordingReplayStarted.REPLAY_VIA_EXTENSION);
   }
 
-  async #onPlayRecording(event: Components.RecordingView.PlayRecordingEvent): Promise<void> {
+  async #onPlayRecording(event: ViewPlayRecordingEvent): Promise<void> {
     if (!this.currentRecording || !this.#replayAllowed) {
       return;
     }
@@ -548,7 +725,7 @@ export class RecorderController extends LitElement {
       return await this.#onPlayViaExtension(event.extension);
     }
     Host.userMetrics.recordingReplayStarted(
-        event.targetPanel !== Components.RecordingView.TargetPanel.DEFAULT ?
+        event.targetPanel !== TargetPanel.DEFAULT ?
             Host.UserMetrics.RecordingReplayStarted.REPLAY_WITH_PERFORMANCE_TRACING :
             Host.UserMetrics.RecordingReplayStarted.REPLAY_ONLY);
     this.#replayState.isPlaying = true;
@@ -563,7 +740,7 @@ export class RecorderController extends LitElement {
     this.recordingPlayer = new Models.RecordingPlayer.RecordingPlayer(
         this.currentRecording.flow, {speed: event.speed, breakpointIndexes: this.#stepBreakpointIndexes});
 
-    const withPerformanceTrace = event.targetPanel === Components.RecordingView.TargetPanel.PERFORMANCE_PANEL;
+    const withPerformanceTrace = event.targetPanel === TargetPanel.PERFORMANCE_PANEL;
     const sectionsWithScreenshot = new Set();
     this.recordingPlayer.addEventListener(Models.RecordingPlayer.Events.STEP, async ({data: {step, resolve}}) => {
       this.currentStep = step;
@@ -605,7 +782,7 @@ export class RecorderController extends LitElement {
         Host.userMetrics.recordingReplayFinished(Host.UserMetrics.RecordingReplayFinished.OTHER_ERROR);
       }
       // Dispatch an event for e2e testing.
-      this.dispatchEvent(new Events.ReplayFinishedEvent());
+      this.element.dispatchEvent(new Events.ReplayFinishedEvent());
     });
 
     this.recordingPlayer.addEventListener(Models.RecordingPlayer.Events.DONE, () => {
@@ -615,7 +792,7 @@ export class RecorderController extends LitElement {
       }
       this.lastReplayResult = Models.RecordingPlayer.ReplayResult.SUCCESS;
       // Dispatch an event for e2e testing.
-      this.dispatchEvent(new Events.ReplayFinishedEvent());
+      this.element.dispatchEvent(new Events.ReplayFinishedEvent());
       Host.userMetrics.recordingReplayFinished(Host.UserMetrics.RecordingReplayFinished.SUCCESS);
     });
 
@@ -633,7 +810,7 @@ export class RecorderController extends LitElement {
 
     let performanceTracing = null;
     switch (event.targetPanel) {
-      case Components.RecordingView.TargetPanel.PERFORMANCE_PANEL:
+      case TargetPanel.PERFORMANCE_PANEL:
         performanceTracing = new Tracing.PerformanceTracing.PerformanceTracing(this.#getMainTarget(), {
           tracingBufferUsage(): void{},
           eventsRetrievalProgress(): void{},
@@ -658,7 +835,7 @@ export class RecorderController extends LitElement {
       this.#replayState.isPlaying = false;
       this.recordingPlayer = undefined;
       await UI.InspectorView.InspectorView.instance().showPanel(event.targetPanel as string);
-      if (event.targetPanel === Components.RecordingView.TargetPanel.PERFORMANCE_PANEL) {
+      if (event.targetPanel === TargetPanel.PERFORMANCE_PANEL) {
         // Note: this is not passing any metadata to the Performance panel.
         const trace = new SDK.TraceObject.TraceObject(events as Trace.Types.Events.Event[]);
         void Common.Revealer.reveal(trace);
@@ -690,7 +867,7 @@ export class RecorderController extends LitElement {
     this.#setCurrentRecording(await this.#storage.upsertRecording(Models.SchemaUtils.parse(json)));
     this.#setCurrentPage(Pages.RECORDING_PAGE);
     this.#clearError();
-    this.dispatchEvent(new Events.SetRecordingFinishedEvent());
+    this.element.dispatchEvent(new Events.SetRecordingFinishedEvent());
   }
 
   // Used by e2e tests to inspect the current recording.
@@ -698,7 +875,7 @@ export class RecorderController extends LitElement {
     return this.currentRecording?.flow;
   }
 
-  async #handleRecordingChanged(event: Components.StepView.StepChanged): Promise<void> {
+  async #handleRecordingChanged(event: StepChanged): Promise<void> {
     if (!this.currentRecording) {
       throw new Error('Current recording expected to be defined.');
     }
@@ -709,15 +886,14 @@ export class RecorderController extends LitElement {
         steps: this.currentRecording.flow.steps.map(step => step === event.currentStep ? event.newStep : step),
       },
     };
-    this.#setCurrentRecording(
-        await this.#storage.upsertRecording(
-            recording.flow,
-            recording.storageName,
-            ),
-        {keepBreakpoints: true, updateSession: true});
+    this.#setCurrentRecording(await this.#storage.upsertRecording(
+                                  recording.flow,
+                                  recording.storageName,
+                                  ),
+                              {keepBreakpoints: true, updateSession: true});
   }
 
-  async #handleStepAdded(event: Components.StepView.AddStep): Promise<void> {
+  async #handleStepAdded(event: AddStep): Promise<void> {
     if (!this.currentRecording) {
       throw new Error('Current recording expected to be defined.');
     }
@@ -730,13 +906,13 @@ export class RecorderController extends LitElement {
       if (sectionIdx === undefined || sectionIdx === -1) {
         throw new Error('There is no section to add a step to');
       }
-      if (event.position === Components.StepView.AddStepPosition.AFTER) {
+      if (event.position === AddStepPosition.AFTER) {
         if (this.sections?.[sectionIdx].steps.length) {
           step = this.sections?.[sectionIdx].steps[0];
-          position = Components.StepView.AddStepPosition.BEFORE;
+          position = AddStepPosition.BEFORE;
         } else {
           step = this.sections?.[sectionIdx].causingStep;
-          position = Components.StepView.AddStepPosition.AFTER;
+          position = AddStepPosition.AFTER;
         }
       } else {
         if (sectionIdx <= 0) {
@@ -744,7 +920,7 @@ export class RecorderController extends LitElement {
         }
         const prevSection = this.sections?.[sectionIdx - 1];
         step = prevSection?.steps[prevSection.steps.length - 1];
-        position = Components.StepView.AddStepPosition.AFTER;
+        position = AddStepPosition.AFTER;
       }
     } else {
       // step
@@ -755,7 +931,7 @@ export class RecorderController extends LitElement {
     }
     const steps = this.currentRecording.flow.steps;
     const currentIndex = steps.indexOf(step);
-    const indexToInsertAt = currentIndex + (position === Components.StepView.AddStepPosition.BEFORE ? 0 : 1);
+    const indexToInsertAt = currentIndex + (position === 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 => {
@@ -765,12 +941,11 @@ export class RecorderController extends LitElement {
 
       return breakpointIndex + 1;
     }));
-    this.#setCurrentRecording(
-        await this.#storage.upsertRecording(
-            recording.flow,
-            recording.storageName,
-            ),
-        {keepBreakpoints: true, updateSession: true});
+    this.#setCurrentRecording(await this.#storage.upsertRecording(
+                                  recording.flow,
+                                  recording.storageName,
+                                  ),
+                              {keepBreakpoints: true, updateSession: true});
   }
 
   async #handleRecordingTitleChanged(title: string): Promise<void> {
@@ -785,7 +960,7 @@ export class RecorderController extends LitElement {
         ));
   }
 
-  async #handleStepRemoved(event: Components.StepView.RemoveStep): Promise<void> {
+  async #handleStepRemoved(event: RemoveStep): Promise<void> {
     if (!this.currentRecording) {
       throw new Error('Current recording expected to be defined.');
     }
@@ -807,12 +982,11 @@ export class RecorderController extends LitElement {
                                                 return breakpointIndex - 1;
                                               })
                                               .filter(index => index >= 0));
-    this.#setCurrentRecording(
-        await this.#storage.upsertRecording(
-            flow,
-            this.currentRecording.storageName,
-            ),
-        {keepBreakpoints: true, updateSession: true});
+    this.#setCurrentRecording(await this.#storage.upsertRecording(
+                                  flow,
+                                  this.currentRecording.storageName,
+                                  ),
+                              {keepBreakpoints: true, updateSession: true});
   }
 
   async #onNetworkConditionsChanged(data?: SDK.NetworkManager.Conditions): Promise<void> {
@@ -867,7 +1041,7 @@ export class RecorderController extends LitElement {
 
   async #onDeleteRecording(event: Event): Promise<void> {
     event.stopPropagation();
-    if (event instanceof Components.RecordingListView.DeleteRecordingEvent) {
+    if (event instanceof DeleteRecordingEvent) {
       await this.#storage.deleteRecording(event.storageName);
       this.#screenshotStorage.deleteScreenshotsForRecording(event.storageName);
       this.requestUpdate();
@@ -931,25 +1105,25 @@ export class RecorderController extends LitElement {
       const screenshot = await screenshotPromise;
       screenshotPromise = undefined;
       currentSection.screenshot = screenshot;
-      Models.ScreenshotStorage.ScreenshotStorage.instance().storeScreenshotForSection(
-          currentRecording.storageName, currentSectionIndex, screenshot);
+      Models.ScreenshotStorage.ScreenshotStorage.instance().storeScreenshotForSection(currentRecording.storageName,
+                                                                                      currentSectionIndex, screenshot);
       previousSectionIndex = currentSectionIndex;
       this.#updateScreenshotsForSections();
     };
 
-    this.currentRecordingSession.addEventListener(
-        Models.RecordingSession.Events.RECORDING_UPDATED, async ({data}: {data: Models.Schema.UserFlow}) => {
-          if (!this.currentRecording) {
-            throw new Error('No current recording found');
-          }
-          this.#setCurrentRecording(await this.#storage.upsertRecording(
-              data,
-              this.currentRecording.storageName,
-              ));
-          this.#recordingView?.scrollToBottom();
+    this.currentRecordingSession.addEventListener(Models.RecordingSession.Events.RECORDING_UPDATED,
+                                                  async ({data}: {data: Models.Schema.UserFlow}) => {
+                                                    if (!this.currentRecording) {
+                                                      throw new Error('No current recording found');
+                                                    }
+                                                    this.#setCurrentRecording(await this.#storage.upsertRecording(
+                                                        data,
+                                                        this.currentRecording.storageName,
+                                                        ));
+                                                    this.#recordingView?.scrollToBottom();
 
-          await takeScreenshot(this.currentRecording);
-        });
+                                                    await takeScreenshot(this.currentRecording);
+                                                  });
 
     this.currentRecordingSession.addEventListener(
         Models.RecordingSession.Events.RECORDING_STOPPED, async ({data}: {data: Models.Schema.UserFlow}) => {
@@ -973,7 +1147,7 @@ export class RecorderController extends LitElement {
     this.#setCurrentPage(Pages.RECORDING_PAGE);
 
     // Dispatch an event for e2e testing.
-    this.dispatchEvent(new Events.RecordingStateChangedEvent((this.currentRecording as StoredRecording).flow));
+    this.element.dispatchEvent(new Events.RecordingStateChangedEvent((this.currentRecording as StoredRecording).flow));
   }
 
   async #onRecordingFinished(): Promise<void> {
@@ -996,7 +1170,7 @@ export class RecorderController extends LitElement {
     this.isRecording = false;
 
     // Dispatch an event for e2e testing.
-    this.dispatchEvent(new Events.RecordingStateChangedEvent(this.currentRecording.flow));
+    this.element.dispatchEvent(new Events.RecordingStateChangedEvent(this.currentRecording.flow));
   }
 
   async onRecordingCancelled(): Promise<void> {
@@ -1006,8 +1180,7 @@ export class RecorderController extends LitElement {
   }
 
   async #onRecordingSelected(event: Event): Promise<void> {
-    const storageName = event instanceof Components.RecordingListView.OpenRecordingEvent ||
-            event instanceof Components.RecordingListView.PlayRecordingEvent ?
+    const storageName = event instanceof OpenRecordingEvent || event instanceof ListViewPlayRecordingEvent ?
         event.storageName :
         ((event as InputEvent).target as HTMLSelectElement)?.value;
     this.#setCurrentRecording(await this.#storage.getRecording(storageName));
@@ -1071,12 +1244,11 @@ export class RecorderController extends LitElement {
     }
     const flow = this.currentRecordingSession.cloneUserFlow();
     flow.steps.push({type: 'waitForElement' as Models.Schema.StepType.WaitForElement, selectors: [['.cls']]});
-    this.#setCurrentRecording(
-        await this.#storage.upsertRecording(
-            flow,
-            this.currentRecording.storageName,
-            ),
-        {keepBreakpoints: true, updateSession: true});
+    this.#setCurrentRecording(await this.#storage.upsertRecording(
+                                  flow,
+                                  this.currentRecording.storageName,
+                                  ),
+                              {keepBreakpoints: true, updateSession: true});
     await this.updateComplete;
     // FIXME: call a method on the recording view widget.
     await this.#recordingView?.updateComplete;
@@ -1124,10 +1296,9 @@ export class RecorderController extends LitElement {
     }
   }
 
-  async #onPlayRecordingByName(event: Components.RecordingListView.PlayRecordingEvent): Promise<void> {
+  async #onPlayRecordingByName(event: ListViewPlayRecordingEvent): Promise<void> {
     await this.#onRecordingSelected(event);
-    await this.#onPlayRecording(
-        {targetPanel: Components.RecordingView.TargetPanel.DEFAULT, speed: this.#recorderSettings.speed});
+    await this.#onPlayRecording({targetPanel: TargetPanel.DEFAULT, speed: this.#recorderSettings.speed});
   }
 
   #onAddBreakpoint = (event: AddBreakpointEvent): void => {
@@ -1178,8 +1349,7 @@ export class RecorderController extends LitElement {
         return;
 
       case Actions.RecorderActions.REPLAY_RECORDING:
-        void this.#onPlayRecording(
-            {targetPanel: Components.RecordingView.TargetPanel.DEFAULT, speed: this.#recorderSettings.speed});
+        void this.#onPlayRecording({targetPanel: TargetPanel.DEFAULT, speed: this.#recorderSettings.speed});
         return;
 
       case Actions.RecorderActions.TOGGLE_CODE_VIEW: {
@@ -1253,17 +1423,17 @@ export class RecorderController extends LitElement {
     // clang-format off
     return html`
       <devtools-widget
-        ${widget(Components.RecordingListView.RecordingListView, {
+        ${widget(RecordingListView, {
           recordings: recordings.map(recording => ({
             storageName: recording.storageName,
             name: recording.flow.title,
           })),
           replayAllowed: this.#replayAllowed,
         })}
-        @createrecording=${this.#onCreateNewRecording}
-        @deleterecording=${this.#onDeleteRecording}
-        @openrecording=${this.#onRecordingSelected}
-        @playrecording=${this.#onPlayRecordingByName}
+        @createrecording=${this.#onCreateNewRecording.bind(this)}
+        @deleterecording=${this.#onDeleteRecording.bind(this)}
+        @openrecording=${this.#onRecordingSelected.bind(this)}
+        @playrecording=${this.#onPlayRecordingByName.bind(this)}
       >
       </devtools-widget>
     `;
@@ -1283,7 +1453,7 @@ export class RecorderController extends LitElement {
             jslogcontext="learn-more"
           >${i18nString(UIStrings.learnMore)}</devtools-link>
         </div>
-        <devtools-button .variant=${Buttons.Button.Variant.TONAL} jslogContext=${Actions.RecorderActions.CREATE_RECORDING} @click=${this.#onCreateNewRecording}>${i18nString(UIStrings.createRecording)}</devtools-button>
+        <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
@@ -1294,7 +1464,7 @@ export class RecorderController extends LitElement {
     return html`
       <devtools-widget
           class="recording-view"
-          ${widget(Components.RecordingView.RecordingView, {
+          ${widget(RecordingView, {
             recording: this.currentRecording?.flow ?? {title: '', steps: []},
             replayState: this.#replayState,
             isRecording: this.isRecording,
@@ -1320,7 +1490,7 @@ export class RecorderController extends LitElement {
             titleChanged: this.#handleRecordingTitleChanged.bind(this),
           })}
           @requestselectorattribute=${(
-            event: Components.SelectorPicker.RequestSelectorAttributeEvent,
+            event: RequestSelectorAttributeEvent,
           ) => {
             event.send(this.currentRecording?.flow.selectorAttribute);
           }}
@@ -1330,7 +1500,7 @@ export class RecorderController extends LitElement {
           @addbreakpoint=${this.#onAddBreakpoint.bind(this)}
           @removebreakpoint=${this.#onRemoveBreakpoint.bind(this)}
           @recorderextensionviewclosed=${this.#onExtensionViewClosed.bind(this)}
-          ${UI.Widget.widgetRef(Components.RecordingView.RecordingView, widget => {this.#recordingView = widget;})}
+          ${UI.Widget.widgetRef(RecordingView, widget => {this.#recordingView = widget;})}
         ></devtools-widget>
     `;
     // clang-format on
@@ -1341,13 +1511,13 @@ export class RecorderController extends LitElement {
     return html`
       <devtools-widget
         class="recording-view"
-        ${widget(Components.CreateRecordingView.CreateRecordingView, {
+        ${widget(CreateRecordingView, {
           recorderSettings: this.#recorderSettings,
           onRecordingStarted: this.#onRecordingStarted.bind(this),
           onRecordingCancelled: this.onRecordingCancelled.bind(this),
         })}
         ${UI.Widget.widgetRef(
-          Components.CreateRecordingView.CreateRecordingView,
+          CreateRecordingView,
           widget => {
             this.#createRecordingView = widget;
           },
@@ -1374,7 +1544,12 @@ export class RecorderController extends LitElement {
     this.exportMenuExpanded = false;
   }
 
-  protected override render(): Lit.TemplateResult {
+  override performUpdate(): void {
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    Lit.render(this.render(), this.contentElement);
+  }
+
+  protected render(): Lit.TemplateResult {
     const recordings = this.#storage.getRecordings();
     const selectValue: string = this.currentRecording ? this.currentRecording.storageName : this.currentPage;
     // clang-format off
@@ -1403,7 +1578,7 @@ export class RecorderController extends LitElement {
         <div class="wrapper">
           <div class="header" jslog=${VisualLogging.toolbar()}>
             <devtools-button
-              @click=${this.#onCreateNewRecording}
+              @click=${this.#onCreateNewRecording.bind(this)}
               .data=${
                 {
                   variant: Buttons.Button.Variant.TOOLBAR,
@@ -1429,7 +1604,7 @@ export class RecorderController extends LitElement {
                 this.isToggling
               }
               @click=${(e: Event) => e.stopPropagation()}
-              @change=${this.#onRecordingSelected}
+              @change=${this.#onRecordingSelected.bind(this)}
               jslog=${VisualLogging.dropDown('recordings').track({change: true})}
             >
               ${Lit.Directives.repeat(
@@ -1442,7 +1617,7 @@ export class RecorderController extends LitElement {
             </select>
             <div class="separator"></div>
             <devtools-button
-              @click=${this.#onImportRecording}
+              @click=${this.#onImportRecording.bind(this)}
               .data=${
                 {
                   variant: Buttons.Button.Variant.TOOLBAR,
@@ -1454,7 +1629,7 @@ export class RecorderController extends LitElement {
             ></devtools-button>
             <devtools-button
               id='origin'
-              @click=${this.#onExportRecording}
+              @click=${this.#onExportRecording.bind(this)}
               ${ref(el => {
                 if (el instanceof HTMLElement) {
                   this.#exportMenuButton = el as Buttons.Button.Button;
@@ -1471,8 +1646,8 @@ export class RecorderController extends LitElement {
               jslog=${VisualLogging.dropDown('export-recording').track({click: true})}
             ></devtools-button>
             <devtools-menu
-              @menucloserequest=${this.#onExportMenuClosed}
-              @menuitemselected=${this.#onExportOptionSelected}
+              @menucloserequest=${this.#onExportMenuClosed.bind(this)}
+              @menuitemselected=${this.#onExportOptionSelected.bind(this)}
               .origin=${this.#getExportMenuButton}
               .showDivider=${false}
               .showSelectedItem=${false}
@@ -1511,7 +1686,7 @@ export class RecorderController extends LitElement {
               </devtools-menu-group>
             </devtools-menu>
             <devtools-button
-              @click=${this.#onDeleteRecording}
+              @click=${this.#onDeleteRecording.bind(this)}
               .data=${
                 {
                   variant: Buttons.Button.Variant.TOOLBAR,