chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/recorder/components/RecordingView.ts

@@ -1,7 +1,6 @@
 // Copyright 2023 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 import '../../../ui/components/icon_button/icon_button.js';
 import './ExtensionView.js';
@@ -38,7 +37,6 @@ import {
   type StepView,
   type StepViewData,
 } from './StepView.js';
-
 const {html} = Lit;
 
 const UIStrings = {
@@ -161,112 +159,17 @@ export interface ReplayState {
   isPausedOnBreakpoint: boolean;  // Replay is in progress and is in stopped state
 }
 
-export interface RecordingViewData {
-  replayState: ReplayState;
-  isRecording: boolean;
-  recordingTogglingInProgress: boolean;
-  recording: Models.Schema.UserFlow;
-  currentStep?: Models.Schema.Step;
-  currentError?: Error;
-  sections: Models.Section.Section[];
-  settings?: Models.RecordingSettings.RecordingSettings;
-  recorderSettings?: Models.RecorderSettings.RecorderSettings;
-  lastReplayResult?: Models.RecordingPlayer.ReplayResult;
-  replayAllowed: boolean;
-  breakpointIndexes: Set<number>;
-  builtInConverters: Converters.Converter.Converter[];
-  extensionConverters: Converters.Converter.Converter[];
-  replayExtensions: Extensions.ExtensionManager.Extension[];
-  extensionDescriptor?: PublicExtensions.RecorderPluginManager.ViewDescriptor;
-}
-
-export class RecordingFinishedEvent extends Event {
-  static readonly eventName = 'recordingfinished';
-
-  constructor() {
-    super(RecordingFinishedEvent.eventName);
-  }
-}
-
 export const enum TargetPanel {
   PERFORMANCE_PANEL = 'timeline',
   DEFAULT = 'chrome-recorder',
 }
 
-interface PlayRecordingEventData {
+export interface PlayRecordingEvent {
   targetPanel: TargetPanel;
   speed: PlayRecordingSpeed;
   extension?: Extensions.ExtensionManager.Extension;
 }
 
-export class PlayRecordingEvent extends Event {
-  static readonly eventName = 'playrecording';
-  readonly data: PlayRecordingEventData;
-  constructor(
-      data: PlayRecordingEventData = {
-        targetPanel: TargetPanel.DEFAULT,
-        speed: PlayRecordingSpeed.NORMAL,
-      },
-  ) {
-    super(PlayRecordingEvent.eventName);
-    this.data = data;
-  }
-}
-
-export class AbortReplayEvent extends Event {
-  static readonly eventName = 'abortreplay';
-  constructor() {
-    super(AbortReplayEvent.eventName);
-  }
-}
-
-export class RecordingChangedEvent extends Event {
-  static readonly eventName = 'recordingchanged';
-  data: {currentStep: Models.Schema.Step, newStep: Models.Schema.Step};
-  constructor(currentStep: Models.Schema.Step, newStep: Models.Schema.Step) {
-    super(RecordingChangedEvent.eventName);
-    this.data = {currentStep, newStep};
-  }
-}
-
-export class AddAssertionEvent extends Event {
-  static readonly eventName = 'addassertion';
-  constructor() {
-    super(AddAssertionEvent.eventName);
-  }
-}
-
-export class RecordingTitleChangedEvent extends Event {
-  static readonly eventName = 'recordingtitlechanged';
-  title: string;
-
-  constructor(title: string) {
-    super(RecordingTitleChangedEvent.eventName, {});
-    this.title = title;
-  }
-}
-
-export class NetworkConditionsChanged extends Event {
-  static readonly eventName = 'networkconditionschanged';
-  data?: SDK.NetworkManager.Conditions;
-  constructor(data?: SDK.NetworkManager.Conditions) {
-    super(NetworkConditionsChanged.eventName, {
-      composed: true,
-      bubbles: true,
-    });
-    this.data = data;
-  }
-}
-
-export class TimeoutChanged extends Event {
-  static readonly eventName = 'timeoutchanged';
-  data?: number;
-  constructor(data?: number) {
-    super(TimeoutChanged.eventName, {composed: true, bubbles: true});
-    this.data = data;
-  }
-}
-
 const networkConditionPresets = [
   SDK.NetworkManager.NoThrottlingConditions,
   SDK.NetworkManager.OfflineConditions,
@@ -307,230 +210,903 @@ function converterIdToStepMetric(
   }
 }
 
-export class RecordingView extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #replayState: ReplayState = {isPlaying: false, isPausedOnBreakpoint: false};
-  #userFlow: Models.Schema.UserFlow|null = null;
-  #isRecording = false;
-  #recordingTogglingInProgress = false;
-  #isTitleInvalid = false;
-  #currentStep?: Models.Schema.Step;
-  #steps: Models.Schema.Step[] = [];
-  #currentError?: Error;
-  #sections: Models.Section.Section[] = [];
-  #settings?: Models.RecordingSettings.RecordingSettings;
-  #recorderSettings?: Models.RecorderSettings.RecorderSettings;
-  #lastReplayResult?: Models.RecordingPlayer.ReplayResult;
-  #breakpointIndexes = new Set<number>();
-  #selectedStep?: Models.Schema.Step|null;
-
-  #replaySettingsExpanded = false;
-  #replayAllowed = true;
-  #builtInConverters: Converters.Converter.Converter[] = [];
-  #extensionConverters: Converters.Converter.Converter[] = [];
-  #replayExtensions?: Extensions.ExtensionManager.Extension[];
-  #showCodeView = false;
-  #code = '';
-  #converterId = '';
-  #editorState?: CodeMirror.EditorState;
-  #sourceMap: PuppeteerReplay.SourceMap|undefined;
-  #extensionDescriptor?: PublicExtensions.RecorderPluginManager.ViewDescriptor;
-
-  #onCopyBound = this.#onCopy.bind(this);
-
-  set data(data: RecordingViewData) {
-    this.#isRecording = data.isRecording;
-    this.#replayState = data.replayState;
-    this.#recordingTogglingInProgress = data.recordingTogglingInProgress;
-    this.#currentStep = data.currentStep;
-
-    this.#userFlow = data.recording;
-    this.#steps = this.#userFlow.steps;
-    this.#sections = data.sections;
-    this.#settings = data.settings;
-    this.#recorderSettings = data.recorderSettings;
-
-    this.#currentError = data.currentError;
-    this.#lastReplayResult = data.lastReplayResult;
-    this.#replayAllowed = data.replayAllowed;
-    this.#isTitleInvalid = false;
-    this.#breakpointIndexes = data.breakpointIndexes;
-    this.#builtInConverters = data.builtInConverters;
-    this.#extensionConverters = data.extensionConverters;
-    this.#replayExtensions = data.replayExtensions;
-    this.#extensionDescriptor = data.extensionDescriptor;
-
-    this.#converterId = this.#recorderSettings?.preferredCopyFormat ?? data.builtInConverters[0]?.getId();
-    void this.#convertToCode();
-
-    this.#render();
-  }
-
-  connectedCallback(): void {
-    document.addEventListener('copy', this.#onCopyBound);
-    this.#render();
-  }
-
-  disconnectedCallback(): void {
-    document.removeEventListener('copy', this.#onCopyBound);
-  }
-
-  scrollToBottom(): void {
-    const wrapper = this.shadowRoot?.querySelector('.sections');
-    if (!wrapper) {
-      return;
-    }
-    wrapper.scrollTop = wrapper.scrollHeight;
-  }
-
-  #dispatchAddAssertionEvent(): void {
-    this.dispatchEvent(new AddAssertionEvent());
-  }
-
-  #dispatchRecordingFinished(): void {
-    this.dispatchEvent(new RecordingFinishedEvent());
-  }
-
-  #handleAbortReplay(): void {
-    this.dispatchEvent(new AbortReplayEvent());
+function renderSettings({
+  settings,
+  replaySettingsExpanded,
+  onSelectMenuLabelClick,
+  onNetworkConditionsChange,
+  onTimeoutInput,
+  isRecording,
+  replayState,
+  onReplaySettingsKeydown,
+  onToggleReplaySettings
+}: ViewInput): Lit.TemplateResult {
+  if (!settings) {
+    return html``;
   }
-
-  #handleTogglePlaying(event: StartReplayEvent): void {
-    this.dispatchEvent(
-        new PlayRecordingEvent({
-          targetPanel: TargetPanel.DEFAULT,
-          speed: event.speed,
-          extension: event.extension,
-        }),
+  const environmentFragments = [];
+  if (settings.viewportSettings) {
+    // clang-format off
+    environmentFragments.push(
+      html`<div>${
+        settings.viewportSettings.isMobile
+          ? i18nString(UIStrings.mobile)
+          : i18nString(UIStrings.desktop)
+      }</div>`,
+    );
+    environmentFragments.push(html`<div class="separator"></div>`);
+    environmentFragments.push(
+      html`<div>${settings.viewportSettings.width}×${
+        settings.viewportSettings.height
+      } px</div>`,
     );
+    // clang-format on
   }
-
-  #getStepState(step: Models.Schema.Step): State {
-    if (!this.#currentStep) {
-      return State.DEFAULT;
-    }
-    if (step === this.#currentStep) {
-      if (this.#currentError) {
-        return State.ERROR;
-      }
-      if (!this.#replayState.isPlaying) {
-        return State.SUCCESS;
-      }
-
-      if (this.#replayState.isPausedOnBreakpoint) {
-        return State.STOPPED;
+  const replaySettingsFragments = [];
+  if (!replaySettingsExpanded) {
+    if (settings.networkConditionsSettings) {
+      if (settings.networkConditionsSettings.title) {
+        // clang-format off
+        replaySettingsFragments.push(
+          html`<div>${
+            settings.networkConditionsSettings.title
+          }</div>`,
+        );
+        // clang-format on
+      } else {
+        // clang-format off
+        replaySettingsFragments.push(html`<div>
+          ${i18nString(UIStrings.download, {
+            value: i18n.ByteUtilities.bytesToString(
+              settings.networkConditionsSettings.download,
+            ),
+          })},
+          ${i18nString(UIStrings.upload, {
+            value: i18n.ByteUtilities.bytesToString(
+              settings.networkConditionsSettings.upload,
+            ),
+          })},
+          ${i18nString(UIStrings.latency, {
+            value: settings.networkConditionsSettings.latency,
+          })}
+        </div>`);
+        // clang-format on
       }
-
-      return State.CURRENT;
+    } else {
+      // clang-format off
+      replaySettingsFragments.push(
+        html`<div>${
+          SDK.NetworkManager.NoThrottlingConditions.title instanceof Function
+            ? SDK.NetworkManager.NoThrottlingConditions.title()
+            : SDK.NetworkManager.NoThrottlingConditions.title
+        }</div>`,
+      );
+      // clang-format on
     }
-    const currentIndex = this.#steps.indexOf(this.#currentStep);
-    if (currentIndex === -1) {
-      return State.DEFAULT;
+    // clang-format off
+    replaySettingsFragments.push(html`<div class="separator"></div>`);
+    replaySettingsFragments.push(
+      html`<div>${i18nString(UIStrings.timeout, {
+        value: settings.timeout || Models.RecordingPlayer.defaultTimeout,
+      })}</div>`,
+    );
+    // clang-format on
+  } else {
+    // clang-format off
+    const selectedOption =
+      settings.networkConditionsSettings?.i18nTitleKey ||
+      SDK.NetworkManager.NoThrottlingConditions.i18nTitleKey;
+    const selectedOptionTitle = networkConditionPresets.find(
+      preset => preset.i18nTitleKey === selectedOption,
+    );
+    let menuButtonTitle = '';
+    if (selectedOptionTitle) {
+      menuButtonTitle =
+        selectedOptionTitle.title instanceof Function
+          ? selectedOptionTitle.title()
+          : selectedOptionTitle.title;
     }
 
-    const index = this.#steps.indexOf(step);
-    return index < currentIndex ? State.SUCCESS : State.OUTSTANDING;
+    replaySettingsFragments.push(html`<div class="editable-setting">
+      <label class="wrapping-label" @click=${onSelectMenuLabelClick}>
+        ${i18nString(UIStrings.network)}
+        <select
+            title=${menuButtonTitle}
+            jslog=${VisualLogging.dropDown('network-conditions').track({change: true})}
+            @change=${onNetworkConditionsChange}>
+      ${networkConditionPresets.map(condition => html`
+        <option jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(condition.i18nTitleKey || ''))}
+                value=${condition.i18nTitleKey || ''} ?selected=${selectedOption === condition.i18nTitleKey}>
+                ${
+                  condition.title instanceof Function
+                    ? condition.title()
+                    : condition.title
+                }
+        </option>`)}
+    </select>
+      </label>
+    </div>`);
+    replaySettingsFragments.push(html`<div class="editable-setting">
+      <label class="wrapping-label" title=${i18nString(
+        UIStrings.timeoutExplanation,
+      )}>
+        ${i18nString(UIStrings.timeoutLabel)}
+        <input
+          @input=${onTimeoutInput}
+          required
+          min=${Models.SchemaUtils.minTimeout}
+          max=${Models.SchemaUtils.maxTimeout}
+          value=${
+            settings.timeout || Models.RecordingPlayer.defaultTimeout
+          }
+          jslog=${VisualLogging.textField('timeout').track({change: true})}
+          class="devtools-text-input"
+          type="number">
+      </label>
+    </div>`);
+    // clang-format on
   }
+  const isEditable = !isRecording && !replayState.isPlaying;
+  const replaySettingsButtonClassMap = {
+    'settings-title': true,
+    expanded: replaySettingsExpanded,
+  };
+  const replaySettingsClassMap = {
+    expanded: replaySettingsExpanded,
+    settings: true,
+  };
+  // clang-format off
+  return html`
+    <div class="settings-row">
+      <div class="settings-container">
+        <div
+          class=${Lit.Directives.classMap(replaySettingsButtonClassMap)}
+          @keydown=${isEditable && onReplaySettingsKeydown}
+          @click=${isEditable && onToggleReplaySettings}
+          tabindex="0"
+          role="button"
+          jslog=${VisualLogging.action('replay-settings').track({click: true})}
+          aria-label=${i18nString(UIStrings.editReplaySettings)}>
+          <span>${i18nString(UIStrings.replaySettings)}</span>
+          ${
+            isEditable
+              ? html`<devtools-icon
+                  class="chevron"
+                  name="triangle-down">
+                </devtools-icon>`
+              : ''
+          }
+        </div>
+        <div class=${Lit.Directives.classMap(replaySettingsClassMap)}>
+          ${
+            replaySettingsFragments.length
+              ? replaySettingsFragments
+              : html`<div>${i18nString(UIStrings.default)}</div>`
+          }
+        </div>
+      </div>
+      <div class="settings-container">
+        <div class="settings-title">${i18nString(UIStrings.environment)}</div>
+        <div class="settings">
+          ${
+            environmentFragments.length
+              ? environmentFragments
+              : html`<div>${i18nString(UIStrings.default)}</div>`
+          }
+        </div>
+      </div>
+    </div>
+  `;
+  // clang-format on
+}
 
-  #getSectionState(section: Models.Section.Section): State {
-    const currentStep = this.#currentStep;
-    if (!currentStep) {
-      return State.DEFAULT;
-    }
+function renderTimelineArea(input: ViewInput, output: ViewOutput): Lit.LitTemplate {
+  if (input.extensionDescriptor) {
+    // clang-format off
+      return html`
+        <devtools-recorder-extension-view .descriptor=${input.extensionDescriptor}>
+        </devtools-recorder-extension-view>
+      `;
+    // clang-format on
+  }
+  // clang-format off
+    /* eslint-disable rulesdir/no-deprecated-component-usages */
+    return html`
+        <devtools-split-view
+          direction="auto"
+          sidebar-position="second"
+          sidebar-initial-size="300"
+          sidebar-visibility=${input.showCodeView ? '' : 'hidden'}
+        >
+          <div slot="main">
+            ${renderSections(input)}
+          </div>
+          <div slot="sidebar" jslog=${VisualLogging.pane('source-code').track({resize: true})}>
+            ${input.showCodeView ? html`
+            <div class="section-toolbar" jslog=${VisualLogging.toolbar()}>
+              <devtools-select-menu
+                @selectmenuselected=${input.onCodeFormatChange}
+                .showDivider=${true}
+                .showArrow=${true}
+                .sideButton=${false}
+                .showSelectedItem=${true}
+                .position=${Dialogs.Dialog.DialogVerticalPosition.BOTTOM}
+                .buttonTitle=${input.converterName || ''}
+                .jslogContext=${'code-format'}
+              >
+                ${input.builtInConverters.map(converter => {
+                  return html`<devtools-menu-item
+                    .value=${converter.getId()}
+                    .selected=${input.converterId === converter.getId()}
+                    jslog=${VisualLogging.action().track({click: true}).context(`converter-${Platform.StringUtilities.toKebabCase(converter.getId())}`)}
+                  >
+                    ${converter.getFormatName()}
+                  </devtools-menu-item>`;
+                })}
+                ${input.extensionConverters.map(converter => {
+                  return html`<devtools-menu-item
+                    .value=${converter.getId()}
+                    .selected=${input.converterId === converter.getId()}
+                    jslog=${VisualLogging.action().track({click: true}).context('converter-extension')}
+                  >
+                    ${converter.getFormatName()}
+                  </devtools-menu-item>`;
+                })}
+              </devtools-select-menu>
+              <devtools-button
+                title=${Models.Tooltip.getTooltipForActions(
+                  i18nString(UIStrings.hideCode),
+                  Actions.RecorderActions.TOGGLE_CODE_VIEW,
+                )}
+                .data=${
+                  {
+                    variant: Buttons.Button.Variant.ICON,
+                    size: Buttons.Button.Size.SMALL,
+                    iconName: 'cross',
+                  } as Buttons.Button.ButtonData
+                }
+                @click=${input.showCodeToggle}
+                jslog=${VisualLogging.close().track({click: true})}
+              ></devtools-button>
+            </div>
+            ${renderTextEditor(input, output)}`
+            : Lit.nothing}
+          </div>
+        </devtools-split-view>
+      `;
+    /* eslint-enable rulesdir/no-deprecated-component-usages */
+  // clang-format on
+}
 
-    const currentSection = this.#sections.find(
-                               section => section.steps.includes(currentStep),
-                               ) as Models.Section.Section;
+function renderTextEditor(input: ViewInput, output: ViewOutput): Lit.TemplateResult {
+  if (!input.editorState) {
+    throw new Error('Unexpected: trying to render the text editor without editorState');
+  }
 
-    if (!currentSection) {
-      if (this.#currentError) {
-        return State.ERROR;
-      }
-    }
+  // clang-format off
+  return html`
+    <div class="text-editor" jslog=${VisualLogging.textField().track({change: true})}>
+      <devtools-text-editor .state=${input.editorState} ${Lit.Directives.ref((editor: Element | undefined) => {
+        if (!editor || !(editor instanceof TextEditor.TextEditor.TextEditor)) {
+          return;
+        }
+        output.highlightLinesInEditor = (line: number, length: number, scroll = false) => {
+          const cm = editor.editor;
+          let selection = editor.createSelection(
+              {lineNumber: line + length, columnNumber: 0},
+              {lineNumber: line, columnNumber: 0},
+          );
+          const lastLine = editor.state.doc.lineAt(selection.main.anchor);
+          selection = editor.createSelection(
+              {lineNumber: line + length - 1, columnNumber: lastLine.length + 1},
+              {lineNumber: line, columnNumber: 0},
+          );
 
-    if (section === currentSection) {
-      return State.SUCCESS;
-    }
+          cm.dispatch({
+            selection,
+            effects: scroll ?
+                [
+                  CodeMirror.EditorView.scrollIntoView(selection.main, {
+                    y: 'nearest',
+                  }),
+                ] :
+                undefined,
+          });
+        };
+      })}></devtools-text-editor>
+    </div>
+  `;
+  // clang-format on
+}
 
-    const index = this.#sections.indexOf(currentSection);
-    const ownIndex = this.#sections.indexOf(section);
-    return index >= ownIndex ? State.SUCCESS : State.OUTSTANDING;
+function renderScreenshot(
+    section: Models.Section.Section,
+    ): Lit.TemplateResult|null {
+  if (!section.screenshot) {
+    return null;
   }
 
-  #renderStep(
-      section: Models.Section.Section,
-      step: Models.Schema.Step,
-      isLastSection: boolean,
-      ): Lit.TemplateResult {
-    const stepIndex = this.#steps.indexOf(step);
-    // clang-format off
+  // clang-format off
     return html`
-      <devtools-step-view
-      @click=${this.#onStepClick}
-      @mouseover=${this.#onStepHover}
-      @copystep=${this.#onCopyStepEvent}
-      .data=${
-        {
-          step,
-          state: this.#getStepState(step),
-          error: this.#currentStep === step ? this.#currentError : undefined,
-          isFirstSection: false,
-          isLastSection:
-            isLastSection && this.#steps[this.#steps.length - 1] === step,
-          isStartOfGroup: false,
-          isEndOfGroup: section.steps[section.steps.length - 1] === step,
-          stepIndex,
-          hasBreakpoint: this.#breakpointIndexes.has(stepIndex),
-          sectionIndex: -1,
-          isRecording: this.#isRecording,
-          isPlaying: this.#replayState.isPlaying,
-          removable: this.#steps.length > 1,
-          builtInConverters: this.#builtInConverters,
-          extensionConverters: this.#extensionConverters,
-          isSelected: this.#selectedStep === step,
-          recorderSettings: this.#recorderSettings,
-        } as StepViewData
-      }
-      jslog=${VisualLogging.section('step').track({click: true})}
-      ></devtools-step-view>
+      <img class="screenshot" src=${section.screenshot} alt=${i18nString(
+      UIStrings.screenshotForSection,
+    )} />
     `;
-    // clang-format on
-  }
-
-  #onStepHover = (event: MouseEvent): void => {
-    const stepView = event.target as StepView;
-    const step = stepView.step || stepView.section?.causingStep;
-    if (!step || this.#selectedStep) {
-      return;
-    }
-    this.#highlightCodeForStep(step);
-  };
+  // clang-format on
+}
 
-  #onStepClick(event: Event): void {
-    event.stopPropagation();
-    const stepView = event.target as StepView;
-    const selectedStep = stepView.step || stepView.section?.causingStep || null;
-    if (this.#selectedStep === selectedStep) {
-      return;
-    }
-    this.#selectedStep = selectedStep;
-    this.#render();
-    if (selectedStep) {
-      this.#highlightCodeForStep(selectedStep, /* scroll=*/ true);
-    }
+function renderReplayOrAbortButton(input: ViewInput): Lit.LitTemplate {
+  if (input.replayState.isPlaying) {
+    return html`
+        <devtools-button .jslogContext=${'abort-replay'} @click=${input.onAbortReplay} .iconName=${'pause'} .variant=${
+        Buttons.Button.Variant.OUTLINED}>
+          ${i18nString(UIStrings.cancelReplay)}
+        </devtools-button>`;
   }
 
-  #onWrapperClick(): void {
-    if (this.#selectedStep === undefined) {
-      return;
-    }
-    this.#selectedStep = undefined;
-    this.#render();
+  if (!input.recorderSettings) {
+    return Lit.nothing;
   }
 
-  #onReplaySettingsKeydown(event: Event): void {
-    if ((event as KeyboardEvent).key !== 'Enter') {
-      return;
+  // clang-format off
+    return html`<devtools-replay-section
+        .data=${
+          {
+            settings: input.recorderSettings,
+            replayExtensions: input.replayExtensions,
+          } as ReplaySectionData
+        }
+        .disabled=${input.replayState.isPlaying}
+        @startreplay=${input.onTogglePlaying}
+        >
+      </devtools-replay-section>`;
+  // clang-format on
+}
+
+function renderSections(input: ViewInput): Lit.LitTemplate {
+  // clang-format off
+    return html`
+      <div class="sections">
+      ${
+        !input.showCodeView
+          ? html`<div class="section-toolbar">
+        <devtools-button
+          @click=${input.showCodeToggle}
+          class="show-code"
+          .data=${
+            {
+              variant: Buttons.Button.Variant.OUTLINED,
+              title: Models.Tooltip.getTooltipForActions(
+                i18nString(UIStrings.showCode),
+                Actions.RecorderActions.TOGGLE_CODE_VIEW,
+              ),
+            } as Buttons.Button.ButtonData
+          }
+          jslog=${VisualLogging.toggleSubpane(Actions.RecorderActions.TOGGLE_CODE_VIEW).track({click: true})}
+        >
+          ${i18nString(UIStrings.showCode)}
+        </devtools-button>
+      </div>`
+          : ''
+      }
+      ${input.sections.map(
+        (section, i) => html`
+            <div class="section">
+              <div class="screenshot-wrapper">
+                ${renderScreenshot(section)}
+              </div>
+              <div class="content">
+                <div class="steps">
+                  <devtools-step-view
+                    @click=${input.onStepClick}
+                    @mouseover=${input.onStepHover}
+                    .data=${
+                      {
+                        section,
+                        state: input.getSectionState(section),
+                        isStartOfGroup: true,
+                        isEndOfGroup: section.steps.length === 0,
+                        isFirstSection: i === 0,
+                        isLastSection:
+                          i === input.sections.length - 1 &&
+                          section.steps.length === 0,
+                        isSelected:
+                          input.selectedStep === (section.causingStep || null),
+                        sectionIndex: i,
+                        isRecording: input.isRecording,
+                        isPlaying: input.replayState.isPlaying,
+                        error:
+                          input.getSectionState(section) === State.ERROR
+                            ? input.currentError
+                            : undefined,
+                        hasBreakpoint: false,
+                        removable: input.recording.steps.length > 1 && section.causingStep,
+                      } as StepViewData
+                    }
+                  >
+                  </devtools-step-view>
+                  ${section.steps.map(step => {
+                    const stepIndex = input.recording.steps.indexOf(step);
+                    return html`
+                      <devtools-step-view
+                      @click=${input.onStepClick}
+                      @mouseover=${input.onStepHover}
+                      @copystep=${input.onCopyStep}
+                      .data=${
+                        {
+                          step,
+                          state: input.getStepState(step),
+                          error: input.currentStep === step ? input.currentError : undefined,
+                          isFirstSection: false,
+                          isLastSection:
+                            i === input.sections.length - 1 && input.recording.steps[input.recording.steps.length - 1] === step,
+                          isStartOfGroup: false,
+                          isEndOfGroup: section.steps[section.steps.length - 1] === step,
+                          stepIndex,
+                          hasBreakpoint: input.breakpointIndexes.has(stepIndex),
+                          sectionIndex: -1,
+                          isRecording: input.isRecording,
+                          isPlaying: input.replayState.isPlaying,
+                          removable: input.recording.steps.length > 1,
+                          builtInConverters: input.builtInConverters,
+                          extensionConverters: input.extensionConverters,
+                          isSelected: input.selectedStep === step,
+                          recorderSettings: input.recorderSettings,
+                        } as StepViewData
+                      }
+                      jslog=${VisualLogging.section('step').track({click: true})}
+                      ></devtools-step-view>
+                    `;
+                  })}
+                  ${!input.recordingTogglingInProgress && input.isRecording && i === input.sections.length - 1 ? html`<devtools-button
+                    class="step add-assertion-button"
+                    .data=${
+                      {
+                        variant: Buttons.Button.Variant.OUTLINED,
+                        title: i18nString(UIStrings.addAssertion),
+                        jslogContext: 'add-assertion',
+                      } as Buttons.Button.ButtonData
+                    }
+                    @click=${input.onAddAssertion}
+                  >${i18nString(UIStrings.addAssertion)}</devtools-button>` : undefined}
+                  ${
+                    input.isRecording && i === input.sections.length - 1
+                      ? html`<div class="step recording">${i18nString(
+                          UIStrings.recording,
+                        )}</div>`
+                      : null
+                  }
+                </div>
+              </div>
+            </div>
+      `,
+      )}
+      </div>
+    `;
+        // clang-format on
+}
+
+function renderHeader(input: ViewInput): Lit.LitTemplate {
+  if (!input.recording) {
+    return Lit.nothing;
+  }
+  const {title} = input.recording;
+  const isTitleEditable = !input.replayState.isPlaying && !input.isRecording;
+  // clang-format off
+  return html`
+    <div class="header">
+      <div class="header-title-wrapper">
+        <div class="header-title">
+          <input @blur=${input.onTitleBlur}
+                @keydown=${input.onTitleInputKeyDown}
+                id="title-input"
+                jslog=${VisualLogging.value('title').track({change: true})}
+                class=${Lit.Directives.classMap({
+                  'has-error': input.isTitleInvalid,
+                  disabled: !isTitleEditable,
+                })}
+                .value=${Lit.Directives.live(title)}
+                .disabled=${!isTitleEditable}
+                >
+          <div class="title-button-bar">
+            <devtools-button
+              @click=${input.onEditTitleButtonClick}
+              .data=${
+                {
+                  disabled: !isTitleEditable,
+                  variant: Buttons.Button.Variant.TOOLBAR,
+                  iconName: 'edit',
+                  title: i18nString(UIStrings.editTitle),
+                  jslogContext: 'edit-title',
+                } as Buttons.Button.ButtonData
+              }
+            ></devtools-button>
+          </div>
+        </div>
+        ${
+          input.isTitleInvalid
+            ? html`<div class="title-input-error-text">
+          ${
+            i18nString(UIStrings.requiredTitleError)
+          }
+        </div>`
+            : Lit.nothing
+        }
+      </div>
+      ${
+        !input.isRecording && input.replayAllowed
+          ? html`<div class="actions">
+              <devtools-button
+                @click=${input.onMeasurePerformanceClick}
+                .data=${
+                  {
+                    disabled: input.replayState.isPlaying,
+                    variant: Buttons.Button.Variant.OUTLINED,
+                    iconName: 'performance',
+                    title: i18nString(UIStrings.performancePanel),
+                    jslogContext: 'measure-performance',
+                  } as Buttons.Button.ButtonData
+                }
+              >
+                ${i18nString(UIStrings.performancePanel)}
+              </devtools-button>
+              <div class="separator"></div>
+              ${renderReplayOrAbortButton(input)}
+            </div>`
+          : Lit.nothing
+      }
+    </div>`;
+  // clang-format on
+}
+
+interface ViewInput {
+  breakpointIndexes: Set<number>;
+  builtInConverters: readonly Converters.Converter.Converter[];
+  converterId: string;
+  converterName: string|null;
+  currentError: Error|null;
+  currentStep: Models.Schema.Step|null;
+  editorState: CodeMirror.EditorState|null;
+  extensionConverters: readonly Converters.Converter.Converter[];
+  extensionDescriptor?: PublicExtensions.RecorderPluginManager.ViewDescriptor;
+  isRecording: boolean;
+  isTitleInvalid: boolean;
+  lastReplayResult: Models.RecordingPlayer.ReplayResult|null;
+  recorderSettings: Models.RecorderSettings.RecorderSettings|null;
+  recording: Models.Schema.UserFlow;
+  recordingTogglingInProgress: boolean;
+  replayAllowed: boolean;
+  replayExtensions: Extensions.ExtensionManager.Extension[];
+  replaySettingsExpanded: boolean;
+  replayState: ReplayState;
+  sections: Models.Section.Section[];
+  selectedStep: Models.Schema.Step|null;
+  settings: Models.RecordingSettings.RecordingSettings|null;
+  showCodeView: boolean;
+
+  onAddAssertion: () => void;
+  onRecordingFinished: () => void;
+  getSectionState: (section: Models.Section.Section) => State;
+  getStepState: (step: Models.Schema.Step) => State;
+  onAbortReplay: () => void;
+  onMeasurePerformanceClick: (event: Event) => void;
+  onTogglePlaying: (event: StartReplayEvent) => void;
+  onCodeFormatChange: (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => void;
+  onCopyStep: (event: CopyStepEvent) => void;
+  onEditTitleButtonClick: (event: Event) => void;
+  onNetworkConditionsChange: (event: Event) => void;
+  onReplaySettingsKeydown: (event: Event) => void;
+  onSelectMenuLabelClick: (event: Event) => void;
+  onStepClick: (event: Event) => void;
+  onStepHover: (event: MouseEvent) => void;
+  onTimeoutInput: (event: Event) => void;
+  onTitleBlur: (event: Event) => void;
+  onTitleInputKeyDown: (event: KeyboardEvent) => void;
+  onToggleReplaySettings: (event: Event) => void;
+  onWrapperClick: () => void;
+  showCodeToggle: () => void;
+}
+
+export interface ViewOutput {
+  highlightLinesInEditor?: (line: number, length: number, scroll?: boolean) => void;
+}
+
+export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
+  const classNames = {
+    wrapper: true,
+    'is-recording': input.isRecording,
+    'is-playing': input.replayState.isPlaying,
+    'was-successful': input.lastReplayResult === Models.RecordingPlayer.ReplayResult.SUCCESS,
+    'was-failure': input.lastReplayResult === Models.RecordingPlayer.ReplayResult.FAILURE,
+  };
+
+  const footerButtonTitle = input.recordingTogglingInProgress ? i18nString(UIStrings.recordingIsBeingStopped) :
+                                                                i18nString(UIStrings.endRecording);
+  // clang-format off
+  Lit.render(
+    html`
+    <style>${UI.inspectorCommonStyles}</style>
+    <style>${recordingViewStyles}</style>
+    <style>${Input.textInputStyles}</style>
+    <div @click=${input.onWrapperClick} class=${Lit.Directives.classMap(
+      classNames,
+    )}>
+      <div class="recording-view main">
+        ${renderHeader(input)}
+        ${
+          input.extensionDescriptor
+            ? html`
+            <devtools-recorder-extension-view .descriptor=${
+              input.extensionDescriptor
+            }></devtools-recorder-extension-view>` : html`
+          ${renderSettings(input)}
+          ${renderTimelineArea(input, output)}
+        `}
+        ${input.isRecording ? html`<div class="footer">
+          <div class="controls">
+            <devtools-control-button
+              jslog=${VisualLogging.toggle('toggle-recording').track({click: true})}
+              @click=${input.onRecordingFinished}
+              .disabled=${input.recordingTogglingInProgress}
+              .shape=${'square'}
+              .label=${footerButtonTitle}
+              title=${Models.Tooltip.getTooltipForActions(
+                footerButtonTitle,
+                Actions.RecorderActions.START_RECORDING,
+              )}
+            >
+            </devtools-control-button>
+          </div>
+        </div>`: Lit.nothing}
+      </div>
+    </div>
+  `,
+    target,
+  );
+  // clang-format on
+};
+
+export class RecordingView extends UI.Widget.Widget {
+  replayState: ReplayState = {isPlaying: false, isPausedOnBreakpoint: false};
+  isRecording = false;
+  recordingTogglingInProgress = false;
+  recording: Models.Schema.UserFlow = {
+    title: '',
+    steps: [],
+  };
+  currentStep?: Models.Schema.Step;
+  currentError?: Error;
+  sections: Models.Section.Section[] = [];
+  settings?: Models.RecordingSettings.RecordingSettings;
+  lastReplayResult?: Models.RecordingPlayer.ReplayResult;
+  replayAllowed = false;
+  breakpointIndexes = new Set<number>();
+  extensionConverters: readonly Converters.Converter.Converter[] = [];
+  replayExtensions?: Extensions.ExtensionManager.Extension[];
+  extensionDescriptor?: PublicExtensions.RecorderPluginManager.ViewDescriptor;
+
+  addAssertion?: () => void;
+  abortReplay?: () => void;
+  recordingFinished?: () => void;
+  playRecording?: (event: PlayRecordingEvent) => void;
+  networkConditionsChanged?: (data?: SDK.NetworkManager.Conditions) => void;
+  timeoutChanged?: (timeout?: number) => void;
+  titleChanged?: (title: string) => void;
+
+  #recorderSettings?: Models.RecorderSettings.RecorderSettings;
+  get recorderSettings(): Models.RecorderSettings.RecorderSettings|undefined {
+    return this.#recorderSettings;
+  }
+  set recorderSettings(settings: Models.RecorderSettings.RecorderSettings|undefined) {
+    this.#recorderSettings = settings;
+    this.#converterId = this.recorderSettings?.preferredCopyFormat ?? this.#builtInConverters[0]?.getId();
+    void this.#convertToCode();
+  }
+
+  #builtInConverters: readonly Converters.Converter.Converter[] = [];
+  get builtInConverters(): readonly Converters.Converter.Converter[] {
+    return this.#builtInConverters;
+  }
+  set builtInConverters(converters: readonly Converters.Converter.Converter[]) {
+    this.#builtInConverters = converters;
+    this.#converterId = this.recorderSettings?.preferredCopyFormat ?? this.#builtInConverters[0]?.getId();
+    void this.#convertToCode();
+  }
+
+  #isTitleInvalid = false;
+  #selectedStep?: Models.Schema.Step|null;
+  #replaySettingsExpanded = false;
+  #showCodeView = false;
+  #code = '';
+  #converterId = '';
+  #sourceMap: PuppeteerReplay.SourceMap|undefined;
+  #editorState?: CodeMirror.EditorState;
+
+  #onCopyBound = this.#onCopy.bind(this);
+  #view: typeof DEFAULT_VIEW;
+  #viewOutput: ViewOutput = {};
+
+  constructor(element?: HTMLElement, view?: typeof DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view || DEFAULT_VIEW;
+  }
+
+  override performUpdate(): void {
+    const converter =
+        [
+          ...(this.builtInConverters || []),
+          ...(this.extensionConverters || []),
+        ].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.addAssertion?.();
+          },
+          onRecordingFinished: () => {
+            this.recordingFinished?.();
+          },
+          getSectionState: this.#getSectionState.bind(this),
+          getStepState: this.#getStepState.bind(this),
+          onAbortReplay: () => {
+            this.abortReplay?.();
+          },
+          onMeasurePerformanceClick: this.#handleMeasurePerformanceClickEvent.bind(this),
+          onTogglePlaying: (event: StartReplayEvent) => {
+            this.playRecording?.({
+              targetPanel: TargetPanel.DEFAULT,
+              speed: event.speed,
+              extension: event.extension,
+            });
+          },
+          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 {
+    super.wasShown();
+    document.addEventListener('copy', this.#onCopyBound);
+    this.performUpdate();
+  }
+
+  override willHide(): void {
+    super.willHide();
+    document.removeEventListener('copy', this.#onCopyBound);
+  }
+
+  scrollToBottom(): void {
+    const wrapper = this.contentElement?.querySelector('.sections');
+    if (!wrapper) {
+      return;
+    }
+    wrapper.scrollTop = wrapper.scrollHeight;
+  }
+
+  #getStepState(step: Models.Schema.Step): State {
+    if (!this.currentStep) {
+      return State.DEFAULT;
+    }
+    if (step === this.currentStep) {
+      if (this.currentError) {
+        return State.ERROR;
+      }
+      if (!this.replayState?.isPlaying) {
+        return State.SUCCESS;
+      }
+
+      if (this.replayState?.isPausedOnBreakpoint) {
+        return State.STOPPED;
+      }
+
+      return State.CURRENT;
+    }
+    const currentIndex = this.recording.steps.indexOf(this.currentStep);
+    if (currentIndex === -1) {
+      return State.DEFAULT;
+    }
+
+    const index = this.recording.steps.indexOf(step);
+    return index < currentIndex ? State.SUCCESS : State.OUTSTANDING;
+  }
+
+  #getSectionState(section: Models.Section.Section): State {
+    const currentStep = this.currentStep;
+    if (!currentStep) {
+      return State.DEFAULT;
+    }
+
+    const currentSection = this.sections.find(
+                               section => section.steps.includes(currentStep),
+                               ) as Models.Section.Section;
+
+    if (!currentSection) {
+      if (this.currentError) {
+        return State.ERROR;
+      }
+    }
+
+    if (section === currentSection) {
+      return State.SUCCESS;
+    }
+
+    const index = this.sections.indexOf(currentSection);
+    const ownIndex = this.sections.indexOf(section);
+    return index >= ownIndex ? State.SUCCESS : State.OUTSTANDING;
+  }
+
+  #onStepHover = (event: MouseEvent): void => {
+    const stepView = event.target as StepView;
+    const step = stepView.step || stepView.section?.causingStep;
+    if (!step || this.#selectedStep) {
+      return;
+    }
+    this.#highlightCodeForStep(step);
+  };
+
+  #onStepClick(event: Event): void {
+    event.stopPropagation();
+    const stepView = event.target as StepView;
+    const selectedStep = stepView.step || stepView.section?.causingStep || null;
+    if (this.#selectedStep === selectedStep) {
+      return;
+    }
+    this.#selectedStep = selectedStep;
+    this.performUpdate();
+    if (selectedStep) {
+      this.#highlightCodeForStep(selectedStep, /* scroll=*/ true);
+    }
+  }
+
+  #onWrapperClick(): void {
+    if (this.#selectedStep === undefined) {
+      return;
+    }
+    this.#selectedStep = undefined;
+    this.performUpdate();
+  }
+
+  #onReplaySettingsKeydown(event: Event): void {
+    if ((event as KeyboardEvent).key !== 'Enter') {
+      return;
     }
     event.preventDefault();
     this.#onToggleReplaySettings(event);
@@ -539,7 +1115,7 @@ export class RecordingView extends HTMLElement {
   #onToggleReplaySettings(event: Event): void {
     event.stopPropagation();
     this.#replaySettingsExpanded = !this.#replaySettingsExpanded;
-    this.#render();
+    this.performUpdate();
   }
 
   #onNetworkConditionsChange(event: Event): void {
@@ -548,10 +1124,8 @@ export class RecordingView extends HTMLElement {
       const preset = networkConditionPresets.find(
           preset => preset.i18nTitleKey === throttlingMenu.value,
       );
-      this.dispatchEvent(
-          new NetworkConditionsChanged(
-              preset?.i18nTitleKey === SDK.NetworkManager.NoThrottlingConditions.i18nTitleKey ? undefined : preset,
-              ),
+      this.networkConditionsChanged?.(
+          preset?.i18nTitleKey === SDK.NetworkManager.NoThrottlingConditions.i18nTitleKey ? undefined : preset,
       );
     }
   }
@@ -562,7 +1136,7 @@ export class RecordingView extends HTMLElement {
       target.reportValidity();
       return;
     }
-    this.dispatchEvent(new TimeoutChanged(Number(target.value)));
+    this.timeoutChanged?.(Number(target.value));
   }
 
   #onTitleBlur = (event: Event): void => {
@@ -570,10 +1144,10 @@ export class RecordingView extends HTMLElement {
     const title = target.value.trim();
     if (!title) {
       this.#isTitleInvalid = true;
-      this.#render();
+      this.performUpdate();
       return;
     }
-    this.dispatchEvent(new RecordingTitleChangedEvent(title));
+    this.titleChanged?.(title);
   };
 
   #onTitleInputKeyDown = (event: KeyboardEvent): void => {
@@ -587,7 +1161,10 @@ export class RecordingView extends HTMLElement {
   };
 
   #onEditTitleButtonClick = (): void => {
-    const input = this.#shadow.getElementById('title-input') as HTMLInputElement;
+    const input = this.contentElement.querySelector<HTMLInputElement>('#title-input');
+    if (!input) {
+      throw new Error('Missing #title-input');
+    }
     input.focus();
   };
 
@@ -601,14 +1178,14 @@ export class RecordingView extends HTMLElement {
   async #copyCurrentSelection(step?: Models.Schema.Step|null): Promise<void> {
     let converter =
         [
-          ...this.#builtInConverters,
-          ...this.#extensionConverters,
+          ...this.builtInConverters,
+          ...this.extensionConverters,
         ]
             .find(
-                converter => converter.getId() === this.#recorderSettings?.preferredCopyFormat,
+                converter => converter.getId() === this.recorderSettings?.preferredCopyFormat,
             );
     if (!converter) {
-      converter = this.#builtInConverters[0];
+      converter = this.builtInConverters[0];
     }
     if (!converter) {
       throw new Error('No default converter found');
@@ -617,8 +1194,8 @@ export class RecordingView extends HTMLElement {
     let text = '';
     if (step) {
       text = await converter.stringifyStep(step);
-    } else if (this.#userFlow) {
-      [text] = await converter.stringify(this.#userFlow);
+    } else if (this.recording) {
+      [text] = await converter.stringify(this.recording);
     }
 
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(text);
@@ -641,339 +1218,13 @@ export class RecordingView extends HTMLElement {
     Host.userMetrics.keyboardShortcutFired(Actions.RecorderActions.COPY_RECORDING_OR_STEP);
   }
 
-  #renderSettings(): Lit.TemplateResult {
-    if (!this.#settings) {
-      return html``;
-    }
-    const environmentFragments = [];
-    if (this.#settings.viewportSettings) {
-      // clang-format off
-      environmentFragments.push(
-        html`<div>${
-          this.#settings.viewportSettings.isMobile
-            ? i18nString(UIStrings.mobile)
-            : i18nString(UIStrings.desktop)
-        }</div>`,
-      );
-      environmentFragments.push(html`<div class="separator"></div>`);
-      environmentFragments.push(
-        html`<div>${this.#settings.viewportSettings.width}×${
-          this.#settings.viewportSettings.height
-        } px</div>`,
-      );
-      // clang-format on
-    }
-    const replaySettingsFragments = [];
-    if (!this.#replaySettingsExpanded) {
-      if (this.#settings.networkConditionsSettings) {
-        if (this.#settings.networkConditionsSettings.title) {
-          // clang-format off
-          replaySettingsFragments.push(
-            html`<div>${
-              this.#settings.networkConditionsSettings.title
-            }</div>`,
-          );
-          // clang-format on
-        } else {
-          // clang-format off
-          replaySettingsFragments.push(html`<div>
-            ${i18nString(UIStrings.download, {
-              value: i18n.ByteUtilities.bytesToString(
-                this.#settings.networkConditionsSettings.download,
-              ),
-            })},
-            ${i18nString(UIStrings.upload, {
-              value: i18n.ByteUtilities.bytesToString(
-                this.#settings.networkConditionsSettings.upload,
-              ),
-            })},
-            ${i18nString(UIStrings.latency, {
-              value: this.#settings.networkConditionsSettings.latency,
-            })}
-          </div>`);
-          // clang-format on
-        }
-      } else {
-        // clang-format off
-        replaySettingsFragments.push(
-          html`<div>${
-            SDK.NetworkManager.NoThrottlingConditions.title instanceof Function
-              ? SDK.NetworkManager.NoThrottlingConditions.title()
-              : SDK.NetworkManager.NoThrottlingConditions.title
-          }</div>`,
-        );
-        // clang-format on
-      }
-      // clang-format off
-      replaySettingsFragments.push(html`<div class="separator"></div>`);
-      replaySettingsFragments.push(
-        html`<div>${i18nString(UIStrings.timeout, {
-          value: this.#settings.timeout || Models.RecordingPlayer.defaultTimeout,
-        })}</div>`,
-      );
-      // clang-format on
-    } else {
-      // clang-format off
-      const selectedOption =
-        this.#settings.networkConditionsSettings?.i18nTitleKey ||
-        SDK.NetworkManager.NoThrottlingConditions.i18nTitleKey;
-      const selectedOptionTitle = networkConditionPresets.find(
-        preset => preset.i18nTitleKey === selectedOption,
-      );
-      let menuButtonTitle = '';
-      if (selectedOptionTitle) {
-        menuButtonTitle =
-          selectedOptionTitle.title instanceof Function
-            ? selectedOptionTitle.title()
-            : selectedOptionTitle.title;
-      }
-
-      replaySettingsFragments.push(html`<div class="editable-setting">
-        <label class="wrapping-label" @click=${this.#onSelectMenuLabelClick}>
-          ${i18nString(UIStrings.network)}
-          <select
-              title=${menuButtonTitle}
-              jslog=${VisualLogging.dropDown('network-conditions').track({change: true})}
-              @change=${this.#onNetworkConditionsChange}>
-        ${networkConditionPresets.map(condition => html`
-          <option jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(condition.i18nTitleKey || ''))}
-                  value=${condition.i18nTitleKey || ''} ?selected=${selectedOption === condition.i18nTitleKey}>
-                  ${
-                    condition.title instanceof Function
-                      ? condition.title()
-                      : condition.title
-                  }
-          </option>`)}
-      </select>
-        </label>
-      </div>`);
-      replaySettingsFragments.push(html`<div class="editable-setting">
-        <label class="wrapping-label" title=${i18nString(
-          UIStrings.timeoutExplanation,
-        )}>
-          ${i18nString(UIStrings.timeoutLabel)}
-          <input
-            @input=${this.#onTimeoutInput}
-            required
-            min=${Models.SchemaUtils.minTimeout}
-            max=${Models.SchemaUtils.maxTimeout}
-            value=${
-              this.#settings.timeout || Models.RecordingPlayer.defaultTimeout
-            }
-            jslog=${VisualLogging.textField('timeout').track({change: true})}
-            class="devtools-text-input"
-            type="number">
-        </label>
-      </div>`);
-      // clang-format on
-    }
-    const isEditable = !this.#isRecording && !this.#replayState.isPlaying;
-    const replaySettingsButtonClassMap = {
-      'settings-title': true,
-      expanded: this.#replaySettingsExpanded,
-    };
-    const replaySettingsClassMap = {
-      expanded: this.#replaySettingsExpanded,
-      settings: true,
-    };
-    // clang-format off
-    return html`
-      <div class="settings-row">
-        <div class="settings-container">
-          <div
-            class=${Lit.Directives.classMap(replaySettingsButtonClassMap)}
-            @keydown=${isEditable && this.#onReplaySettingsKeydown}
-            @click=${isEditable && this.#onToggleReplaySettings}
-            tabindex="0"
-            role="button"
-            jslog=${VisualLogging.action('replay-settings').track({click: true})}
-            aria-label=${i18nString(UIStrings.editReplaySettings)}>
-            <span>${i18nString(UIStrings.replaySettings)}</span>
-            ${
-              isEditable
-                ? html`<devtools-icon
-                    class="chevron"
-                    name="triangle-down">
-                  </devtools-icon>`
-                : ''
-            }
-          </div>
-          <div class=${Lit.Directives.classMap(replaySettingsClassMap)}>
-            ${
-              replaySettingsFragments.length
-                ? replaySettingsFragments
-                : html`<div>${i18nString(UIStrings.default)}</div>`
-            }
-          </div>
-        </div>
-        <div class="settings-container">
-          <div class="settings-title">${i18nString(UIStrings.environment)}</div>
-          <div class="settings">
-            ${
-              environmentFragments.length
-                ? environmentFragments
-                : html`<div>${i18nString(UIStrings.default)}</div>`
-            }
-          </div>
-        </div>
-      </div>
-    `;
-    // clang-format on
-  }
-
-  #getCurrentConverter(): Converters.Converter.Converter|undefined {
-    const currentConverter = [
-      ...(this.#builtInConverters || []),
-      ...(this.#extensionConverters || []),
-    ].find(converter => converter.getId() === this.#converterId);
-    if (!currentConverter) {
-      return this.#builtInConverters[0];
-    }
-    return currentConverter;
-  }
-
-  #renderTimelineArea(): Lit.LitTemplate {
-    if (this.#extensionDescriptor) {
-      // clang-format off
-      return html`
-        <devtools-recorder-extension-view .descriptor=${this.#extensionDescriptor}>
-        </devtools-recorder-extension-view>
-      `;
-      // clang-format on
-    }
-    const currentConverter = this.#getCurrentConverter();
-    const converterFormatName = currentConverter?.getFormatName();
-    // clang-format off
-    /* eslint-disable rulesdir/no-deprecated-component-usages */
-    return html`
-        <devtools-split-view
-          direction="auto"
-          sidebar-position="second"
-          sidebar-initial-size="300"
-          sidebar-visibility=${this.#showCodeView ? '' : 'hidden'}
-        >
-          <div slot="main">
-            ${this.#renderSections()}
-          </div>
-          <div slot="sidebar" jslog=${VisualLogging.pane('source-code').track({resize: true})}>
-            ${this.#showCodeView ? html`
-            <div class="section-toolbar" jslog=${VisualLogging.toolbar()}>
-              <devtools-select-menu
-                @selectmenuselected=${this.#onCodeFormatChange}
-                .showDivider=${true}
-                .showArrow=${true}
-                .sideButton=${false}
-                .showSelectedItem=${true}
-                .position=${Dialogs.Dialog.DialogVerticalPosition.BOTTOM}
-                .buttonTitle=${converterFormatName || ''}
-                .jslogContext=${'code-format'}
-              >
-                ${this.#builtInConverters.map(converter => {
-                  return html`<devtools-menu-item
-                    .value=${converter.getId()}
-                    .selected=${this.#converterId === converter.getId()}
-                    jslog=${VisualLogging.action().track({click: true}).context(`converter-${Platform.StringUtilities.toKebabCase(converter.getId())}`)}
-                  >
-                    ${converter.getFormatName()}
-                  </devtools-menu-item>`;
-                })}
-                ${this.#extensionConverters.map(converter => {
-                  return html`<devtools-menu-item
-                    .value=${converter.getId()}
-                    .selected=${this.#converterId === converter.getId()}
-                    jslog=${VisualLogging.action().track({click: true}).context('converter-extension')}
-                  >
-                    ${converter.getFormatName()}
-                  </devtools-menu-item>`;
-                })}
-              </devtools-select-menu>
-              <devtools-button
-                title=${Models.Tooltip.getTooltipForActions(
-                  i18nString(UIStrings.hideCode),
-                  Actions.RecorderActions.TOGGLE_CODE_VIEW,
-                )}
-                .data=${
-                  {
-                    variant: Buttons.Button.Variant.ICON,
-                    size: Buttons.Button.Size.SMALL,
-                    iconName: 'cross',
-                  } as Buttons.Button.ButtonData
-                }
-                @click=${this.showCodeToggle}
-                jslog=${VisualLogging.close().track({click: true})}
-              ></devtools-button>
-            </div>
-            ${this.#renderTextEditor()}`
-            : Lit.nothing}
-          </div>
-        </devtools-split-view>
-      `;
-    /* eslint-enable rulesdir/no-deprecated-component-usages */
-    // clang-format on
-  }
-
-  #renderTextEditor(): Lit.TemplateResult {
-    if (!this.#editorState) {
-      throw new Error('Unexpected: trying to render the text editor without editorState');
-    }
-    // clang-format off
-    return html`
-      <div class="text-editor" jslog=${VisualLogging.textField().track({change: true})}>
-        <devtools-text-editor .state=${this.#editorState}></devtools-text-editor>
-      </div>
-    `;
-    // clang-format on
-  }
-
-  #renderScreenshot(
-      section: Models.Section.Section,
-      ): Lit.TemplateResult|null {
-    if (!section.screenshot) {
-      return null;
-    }
-
-    // clang-format off
-    return html`
-      <img class="screenshot" src=${section.screenshot} alt=${i18nString(
-      UIStrings.screenshotForSection,
-    )} />
-    `;
-    // clang-format on
-  }
-
-  #renderReplayOrAbortButton(): Lit.TemplateResult {
-    if (this.#replayState.isPlaying) {
-      return html`
-        <devtools-button .jslogContext=${'abort-replay'} @click=${
-          this.#handleAbortReplay} .iconName=${'pause'} .variant=${Buttons.Button.Variant.OUTLINED}>
-          ${i18nString(UIStrings.cancelReplay)}
-        </devtools-button>`;
-    }
-
-    // clang-format off
-    return html`<devtools-replay-section
-        .data=${
-          {
-            settings: this.#recorderSettings,
-            replayExtensions: this.#replayExtensions,
-          } as ReplaySectionData
-        }
-        .disabled=${this.#replayState.isPlaying}
-        @startreplay=${this.#handleTogglePlaying}
-        >
-      </devtools-replay-section>`;
-    // clang-format on
-  }
-
   #handleMeasurePerformanceClickEvent(event: Event): void {
     event.stopPropagation();
 
-    this.dispatchEvent(
-        new PlayRecordingEvent({
-          targetPanel: TargetPanel.PERFORMANCE_PANEL,
-          speed: PlayRecordingSpeed.NORMAL,
-        }),
-    );
+    this.playRecording?.({
+      targetPanel: TargetPanel.PERFORMANCE_PANEL,
+      speed: PlayRecordingSpeed.NORMAL,
+    });
   }
 
   showCodeToggle = (): void => {
@@ -986,14 +1237,21 @@ export class RecordingView extends HTMLElement {
   };
 
   #convertToCode = async(): Promise<void> => {
-    if (!this.#userFlow) {
+    if (!this.recording) {
       return;
     }
-    const converter = this.#getCurrentConverter();
+    const converter =
+        [
+          ...(this.builtInConverters || []),
+          ...(this.extensionConverters || []),
+        ].find(converter => converter.getId() === this.#converterId) ??
+        this.builtInConverters[0];
+
     if (!converter) {
       return;
     }
-    const [code, sourceMap] = await converter.stringify(this.#userFlow);
+
+    const [code, sourceMap] = await converter.stringify(this.recording);
     this.#code = code;
     this.#sourceMap = sourceMap;
     this.#sourceMap?.shift();
@@ -1008,9 +1266,9 @@ export class RecordingView extends HTMLElement {
         languageSupport ? languageSupport : [],
       ],
     });
-    this.#render();
+    this.performUpdate();
     // Used by tests.
-    this.dispatchEvent(new Event('code-generated'));
+    this.contentElement.dispatchEvent(new Event('code-generated'));
   };
 
   #highlightCodeForStep = (step: Models.Schema.Step, scroll = false): void => {
@@ -1018,298 +1276,23 @@ export class RecordingView extends HTMLElement {
       return;
     }
 
-    const stepIndex = this.#steps.indexOf(step);
+    const stepIndex = this.recording.steps.indexOf(step);
     if (stepIndex === -1) {
       return;
     }
 
-    const editor = this.#shadow.querySelector('devtools-text-editor') as | TextEditor.TextEditor.TextEditor | undefined;
-    if (!editor) {
-      return;
-    }
-
-    const cm = editor.editor;
-    if (!cm) {
-      return;
-    }
-
     const line = this.#sourceMap[stepIndex * 2];
     const length = this.#sourceMap[stepIndex * 2 + 1];
 
-    let selection = editor.createSelection(
-        {lineNumber: line + length, columnNumber: 0},
-        {lineNumber: line, columnNumber: 0},
-    );
-    const lastLine = editor.state.doc.lineAt(selection.main.anchor);
-    selection = editor.createSelection(
-        {lineNumber: line + length - 1, columnNumber: lastLine.length + 1},
-        {lineNumber: line, columnNumber: 0},
-    );
-
-    cm.dispatch({
-      selection,
-      effects: scroll ?
-          [
-            CodeMirror.EditorView.scrollIntoView(selection.main, {
-              y: 'nearest',
-            }),
-          ] :
-          undefined,
-    });
+    this.#viewOutput.highlightLinesInEditor?.(line, length, scroll);
   };
 
   #onCodeFormatChange = (event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void => {
     this.#converterId = event.itemValue as string;
-    if (this.#recorderSettings) {
-      this.#recorderSettings.preferredCopyFormat = event.itemValue as string;
+    if (this.recorderSettings) {
+      this.recorderSettings.preferredCopyFormat = event.itemValue as string;
     }
 
     void this.#convertToCode();
   };
-
-  #renderSections(): Lit.LitTemplate {
-    // clang-format off
-    return html`
-      <div class="sections">
-      ${
-        !this.#showCodeView
-          ? html`<div class="section-toolbar">
-        <devtools-button
-          @click=${this.showCodeToggle}
-          class="show-code"
-          .data=${
-            {
-              variant: Buttons.Button.Variant.OUTLINED,
-              title: Models.Tooltip.getTooltipForActions(
-                i18nString(UIStrings.showCode),
-                Actions.RecorderActions.TOGGLE_CODE_VIEW,
-              ),
-            } as Buttons.Button.ButtonData
-          }
-          jslog=${VisualLogging.toggleSubpane(Actions.RecorderActions.TOGGLE_CODE_VIEW).track({click: true})}
-        >
-          ${i18nString(UIStrings.showCode)}
-        </devtools-button>
-      </div>`
-          : ''
-      }
-      ${this.#sections.map(
-        (section, i) => html`
-            <div class="section">
-              <div class="screenshot-wrapper">
-                ${this.#renderScreenshot(section)}
-              </div>
-              <div class="content">
-                <div class="steps">
-                  <devtools-step-view
-                    @click=${this.#onStepClick}
-                    @mouseover=${this.#onStepHover}
-                    .data=${
-                      {
-                        section,
-                        state: this.#getSectionState(section),
-                        isStartOfGroup: true,
-                        isEndOfGroup: section.steps.length === 0,
-                        isFirstSection: i === 0,
-                        isLastSection:
-                          i === this.#sections.length - 1 &&
-                          section.steps.length === 0,
-                        isSelected:
-                          this.#selectedStep === (section.causingStep || null),
-                        sectionIndex: i,
-                        isRecording: this.#isRecording,
-                        isPlaying: this.#replayState.isPlaying,
-                        error:
-                          this.#getSectionState(section) === State.ERROR
-                            ? this.#currentError
-                            : undefined,
-                        hasBreakpoint: false,
-                        removable: this.#steps.length > 1 && section.causingStep,
-                      } as StepViewData
-                    }
-                  >
-                  </devtools-step-view>
-                  ${section.steps.map(step =>
-                    this.#renderStep(
-                      section,
-                      step,
-                      i === this.#sections.length - 1,
-                    ),
-                  )}
-                  ${!this.#recordingTogglingInProgress && this.#isRecording && i === this.#sections.length - 1 ? html`<devtools-button
-                    class="step add-assertion-button"
-                    .data=${
-                      {
-                        variant: Buttons.Button.Variant.OUTLINED,
-                        title: i18nString(UIStrings.addAssertion),
-                        jslogContext: 'add-assertion',
-                      } as Buttons.Button.ButtonData
-                    }
-                    @click=${this.#dispatchAddAssertionEvent}
-                  >${i18nString(UIStrings.addAssertion)}</devtools-button>` : undefined}
-                  ${
-                    this.#isRecording && i === this.#sections.length - 1
-                      ? html`<div class="step recording">${i18nString(
-                          UIStrings.recording,
-                        )}</div>`
-                      : null
-                  }
-                </div>
-              </div>
-            </div>
-      `,
-      )}
-      </div>
-    `;
-    // clang-format on
-  }
-
-  #renderHeader(): Lit.LitTemplate|string {
-    if (!this.#userFlow) {
-      return '';
-    }
-    const {title} = this.#userFlow;
-    const isTitleEditable = !this.#replayState.isPlaying && !this.#isRecording;
-    // clang-format off
-    return html`
-      <div class="header">
-        <div class="header-title-wrapper">
-          <div class="header-title">
-            <input @blur=${this.#onTitleBlur}
-                  @keydown=${this.#onTitleInputKeyDown}
-                  id="title-input"
-                  jslog=${VisualLogging.value('title').track({change: true})}
-                  class=${Lit.Directives.classMap({
-                    'has-error': this.#isTitleInvalid,
-                    disabled: !isTitleEditable,
-                  })}
-                  .value=${Lit.Directives.live(title)}
-                  .disabled=${!isTitleEditable}
-                  >
-            <div class="title-button-bar">
-              <devtools-button
-                @click=${this.#onEditTitleButtonClick}
-                .data=${
-                  {
-                    disabled: !isTitleEditable,
-                    variant: Buttons.Button.Variant.TOOLBAR,
-                    iconName: 'edit',
-                    title: i18nString(UIStrings.editTitle),
-                    jslogContext: 'edit-title',
-                  } as Buttons.Button.ButtonData
-                }
-              ></devtools-button>
-            </div>
-          </div>
-          ${
-            this.#isTitleInvalid
-              ? html`<div class="title-input-error-text">
-            ${
-              i18nString(UIStrings.requiredTitleError)
-            }
-          </div>`
-              : ''
-          }
-        </div>
-        ${
-          !this.#isRecording && this.#replayAllowed
-            ? html`<div class="actions">
-                <devtools-button
-                  @click=${this.#handleMeasurePerformanceClickEvent}
-                  .data=${
-                    {
-                      disabled: this.#replayState.isPlaying,
-                      variant: Buttons.Button.Variant.OUTLINED,
-                      iconName: 'performance',
-                      title: i18nString(UIStrings.performancePanel),
-                      jslogContext: 'measure-performance',
-                    } as Buttons.Button.ButtonData
-                  }
-                >
-                  ${i18nString(UIStrings.performancePanel)}
-                </devtools-button>
-                <div class="separator"></div>
-                ${this.#renderReplayOrAbortButton()}
-              </div>`
-            : ''
-        }
-      </div>`;
-    // clang-format on
-  }
-
-  #renderFooter(): Lit.LitTemplate|string {
-    if (!this.#isRecording) {
-      return '';
-    }
-    const translation = this.#recordingTogglingInProgress ? i18nString(UIStrings.recordingIsBeingStopped) :
-                                                            i18nString(UIStrings.endRecording);
-    // clang-format off
-    return html`
-      <div class="footer">
-        <div class="controls">
-          <devtools-control-button
-            jslog=${VisualLogging.toggle('toggle-recording').track({click: true})}
-            @click=${this.#dispatchRecordingFinished}
-            .disabled=${this.#recordingTogglingInProgress}
-            .shape=${'square'}
-            .label=${translation}
-            title=${Models.Tooltip.getTooltipForActions(
-              translation,
-              Actions.RecorderActions.START_RECORDING,
-            )}
-          >
-          </devtools-control-button>
-        </div>
-      </div>
-    `;
-    // clang-format on
-  }
-
-  #render(): void {
-    const classNames = {
-      wrapper: true,
-      'is-recording': this.#isRecording,
-      'is-playing': this.#replayState.isPlaying,
-      'was-successful': this.#lastReplayResult === Models.RecordingPlayer.ReplayResult.SUCCESS,
-      'was-failure': this.#lastReplayResult === Models.RecordingPlayer.ReplayResult.FAILURE,
-    };
-
-    // clang-format off
-    Lit.render(
-      html`
-      <style>${UI.inspectorCommonStyles}</style>
-      <style>${recordingViewStyles}</style>
-      <style>${Input.textInputStyles}</style>
-      <div @click=${this.#onWrapperClick} class=${Lit.Directives.classMap(
-        classNames,
-      )}>
-        <div class="main">
-          ${this.#renderHeader()}
-          ${
-            this.#extensionDescriptor
-              ? html`
-            <devtools-recorder-extension-view .descriptor=${
-                  this.#extensionDescriptor
-                }>
-            </devtools-recorder-extension-view>
-          `
-              : html`
-            ${this.#renderSettings()}
-            ${this.#renderTimelineArea()}
-          `
-          }
-          ${this.#renderFooter()}
-        </div>
-      </div>
-    `,
-      this.#shadow,
-      { host: this },
-    );
-    // clang-format on
-  }
 }
-
-customElements.define(
-    'devtools-recording-view',
-    RecordingView,
-);