chrome-devtools-frontend 1.0.1662965 → 1.0.1664496

package/front_end/panels/recorder/RecordingListView.ts

@@ -48,39 +48,6 @@ declare global {
   interface HTMLElementTagNameMap {
     'devtools-recording-list-view': RecordingListView;
   }
-
-  interface HTMLElementEventMap {
-    openrecording: OpenRecordingEvent;
-    deleterecording: DeleteRecordingEvent;
-  }
-}
-
-export class CreateRecordingEvent extends Event {
-  static readonly eventName = 'createrecording';
-  constructor() {
-    super(CreateRecordingEvent.eventName, {composed: true, bubbles: true});
-  }
-}
-
-export class DeleteRecordingEvent extends Event {
-  static readonly eventName = 'deleterecording';
-  constructor(public storageName: string) {
-    super(DeleteRecordingEvent.eventName, {composed: true, bubbles: true});
-  }
-}
-
-export class OpenRecordingEvent extends Event {
-  static readonly eventName = 'openrecording';
-  constructor(public storageName: string) {
-    super(OpenRecordingEvent.eventName, {composed: true, bubbles: true});
-  }
-}
-
-export class PlayRecordingEvent extends Event {
-  static readonly eventName = 'playrecording';
-  constructor(public storageName: string) {
-    super(PlayRecordingEvent.eventName, {composed: true, bubbles: true});
-  }
 }
 
 interface Recording {
@@ -195,6 +162,10 @@ export class RecordingListView extends UI.Widget.Widget {
   #recordings: readonly Recording[] = [];
   #replayAllowed = true;
   #view: typeof DEFAULT_VIEW;
+  onCreateRecording?: () => void;
+  onDeleteRecording?: (storageName: string) => void;
+  onOpenRecording?: (storageName: string) => void;
+  onPlayRecording?: (storageName: string) => void;
 
   constructor(element?: HTMLElement, view?: typeof DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
@@ -212,22 +183,22 @@ export class RecordingListView extends UI.Widget.Widget {
   }
 
   #onCreateClick(): void {
-    this.contentElement.dispatchEvent(new CreateRecordingEvent());
+    this.onCreateRecording?.();
   }
 
   #onDeleteClick(storageName: string, event: Event): void {
     event.stopPropagation();
-    this.contentElement.dispatchEvent(new DeleteRecordingEvent(storageName));
+    this.onDeleteRecording?.(storageName);
   }
 
   #onOpenClick(storageName: string, event: Event): void {
     event.stopPropagation();
-    this.contentElement.dispatchEvent(new OpenRecordingEvent(storageName));
+    this.onOpenRecording?.(storageName);
   }
 
   #onPlayRecordingClick(storageName: string, event: Event): void {
     event.stopPropagation();
-    this.contentElement.dispatchEvent(new PlayRecordingEvent(storageName));
+    this.onPlayRecording?.(storageName);
   }
 
   #onKeyDown(storageName: string, event: Event): void {

package/front_end/panels/recorder/RecordingView.ts

@@ -31,7 +31,7 @@ import * as Actions from './recorder-actions/recorder-actions.js';
 import recordingViewStyles from './recordingView.css.js';
 import {ReplaySection} from './ReplaySection.js';
 import {
-  type CopyStepEvent,
+  type AddStepPosition,
   State,
   StepView,
 } from './StepView.js';
@@ -84,7 +84,7 @@ const UIStrings = {
    */
   screenshotForSection: 'Screenshot for this section',
   /**
-   * @description The title of the button that edits the current recording’s title.
+   * @description The title of the button that edits the current recording's title.
    */
   editTitle: 'Edit title',
   /**
@@ -591,12 +591,18 @@ function renderSections(input: ViewInput): Lit.LitTemplate {
                     removable: input.recording.steps.length > 1 && Boolean(section.causingStep),
                     onStepClick: input.onStepClick,
                     onStepHover: input.onStepHover,
+                    onStepChanged: input.onStepChanged,
+                    onAddStep: input.onAddStep,
+                    onRemoveStep: input.onRemoveStep,
+                    onAddBreakpoint: input.onAddBreakpoint,
+                    onRemoveBreakpoint: input.onRemoveBreakpoint,
+                    onAttributeRequested: input.onAttributeRequested,
+                    onCopyStep: input.onCopyStep,
                   })}
                   ${section.steps.map(step => {
                     const stepIndex = input.recording.steps.indexOf(step);
                     return html`
                       <devtools-widget
-                      @copystep=${input.onCopyStep}
                       ${widget(StepView, {
                         step,
                         state: input.getStepState(step),
@@ -618,6 +624,13 @@ function renderSections(input: ViewInput): Lit.LitTemplate {
                         recorderSettings: input.recorderSettings ?? undefined,
                         onStepClick: input.onStepClick,
                         onStepHover: input.onStepHover,
+                        onCopyStep: input.onCopyStep,
+                        onStepChanged: input.onStepChanged,
+                        onAddStep: input.onAddStep,
+                        onRemoveStep: input.onRemoveStep,
+                        onAddBreakpoint: input.onAddBreakpoint,
+                        onRemoveBreakpoint: input.onRemoveBreakpoint,
+                        onAttributeRequested: input.onAttributeRequested,
                       })}
                       jslog=${VisualLogging.section('step').track({click: true})}
                       ></devtools-widget>
@@ -648,7 +661,7 @@ function renderSections(input: ViewInput): Lit.LitTemplate {
       )}
       </div>
     `;
-  // clang-format on
+    // clang-format on
 }
 
 function renderHeader(input: ViewInput): Lit.LitTemplate {
@@ -758,7 +771,7 @@ interface ViewInput {
   onMeasurePerformanceClick: (event: Event) => void;
   onTogglePlaying: (speed: PlayRecordingSpeed, extension?: Extensions.ExtensionManager.Extension) => void;
   onCodeFormatChange: (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => void;
-  onCopyStep: (event: CopyStepEvent) => void;
+  onCopyStep: (step: Models.Schema.Step) => void;
   onEditTitleButtonClick: (event: Event) => void;
   onNetworkConditionsChange: (event: Event) => void;
   onReplaySettingsKeydown: (event: Event) => void;
@@ -768,6 +781,12 @@ interface ViewInput {
   onTimeoutInput: (event: Event) => void;
   onTitleBlur: (event: Event) => void;
   onTitleInputKeyDown: (event: KeyboardEvent) => void;
+  onStepChanged?: (currentStep: Models.Schema.Step, newStep: Models.Schema.Step) => void;
+  onAddStep?: (stepOrSection: Models.Schema.Step|Models.Section.Section, position: AddStepPosition) => void;
+  onRemoveStep?: (step: Models.Schema.Step) => void;
+  onAddBreakpoint?: (index: number) => void;
+  onRemoveBreakpoint?: (index: number) => void;
+  onAttributeRequested?: (send: (attribute?: string) => void) => void;
   onToggleReplaySettings: (event: Event) => void;
   onWrapperClick: () => void;
   showCodeToggle: () => void;
@@ -857,15 +876,19 @@ export class RecordingView extends UI.Widget.Widget {
   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;
-
+  onPlayRecording?: (detail: PlayRecordingEvent) => void;
+  onNetworkConditionsChanged?: (conditions: SDK.NetworkManager.Conditions|undefined) => void;
+  onTimeoutChanged?: (timeout: number) => void;
+  onTitleChanged?: (title: string) => void;
+  onAddAssertion?: () => void;
+  onRecordingFinished?: () => void;
+  onAbortReplay?: () => void;
+  onStepChanged?: (currentStep: Models.Schema.Step, newStep: Models.Schema.Step) => void;
+  onAddStep?: (stepOrSection: Models.Schema.Step|Models.Section.Section, position: AddStepPosition) => void;
+  onRemoveStep?: (step: Models.Schema.Step) => void;
+  onAddBreakpoint?: (index: number) => void;
+  onRemoveBreakpoint?: (index: number) => void;
+  onAttributeRequested?: (send: (attribute?: string) => void) => void;
   #recorderSettings?: Models.RecorderSettings.RecorderSettings;
   get recorderSettings(): Models.RecorderSettings.RecorderSettings|undefined {
     return this.#recorderSettings;
@@ -938,24 +961,30 @@ export class RecordingView extends UI.Widget.Widget {
       showCodeView: this.#showCodeView,
 
       onAddAssertion: () => {
-        this.addAssertion?.();
+        this.onAddAssertion?.();
       },
       onRecordingFinished: () => {
-        this.recordingFinished?.();
+        this.onRecordingFinished?.();
       },
       getSectionState: this.#getSectionState.bind(this),
       getStepState: this.#getStepState.bind(this),
       onAbortReplay: () => {
-        this.abortReplay?.();
+        this.onAbortReplay?.();
       },
       onMeasurePerformanceClick: this.#handleMeasurePerformanceClickEvent.bind(this),
       onTogglePlaying: (speed: PlayRecordingSpeed, extension?: Extensions.ExtensionManager.Extension) => {
-        this.playRecording?.({
+        this.onPlayRecording?.({
           targetPanel: TargetPanel.DEFAULT,
           speed,
           extension,
         });
       },
+      onStepChanged: (currentStep, newStep) => this.onStepChanged?.(currentStep, newStep),
+      onAddStep: (stepOrSection, position) => this.onAddStep?.(stepOrSection, position),
+      onRemoveStep: step => this.onRemoveStep?.(step),
+      onAddBreakpoint: index => this.onAddBreakpoint?.(index),
+      onRemoveBreakpoint: index => this.onRemoveBreakpoint?.(index),
+      onAttributeRequested: send => this.onAttributeRequested?.(send),
       onCodeFormatChange: this.#onCodeFormatChange.bind(this),
       onCopyStep: this.#onCopyStepEvent.bind(this),
       onEditTitleButtonClick: this.#onEditTitleButtonClick.bind(this),
@@ -1093,9 +1122,8 @@ export class RecordingView extends UI.Widget.Widget {
       const preset = networkConditionPresets.find(
           preset => preset.i18nTitleKey === throttlingMenu.value,
       );
-      this.networkConditionsChanged?.(
-          preset?.i18nTitleKey === SDK.NetworkManager.NoThrottlingConditions.i18nTitleKey ? undefined : preset,
-      );
+      this.onNetworkConditionsChanged?.(
+          preset?.i18nTitleKey === SDK.NetworkManager.NoThrottlingConditions.i18nTitleKey ? undefined : preset);
     }
   }
 
@@ -1105,7 +1133,7 @@ export class RecordingView extends UI.Widget.Widget {
       target.reportValidity();
       return;
     }
-    this.timeoutChanged?.(Number(target.value));
+    this.onTimeoutChanged?.(Number(target.value));
   }
 
   #onTitleBlur = (event: Event): void => {
@@ -1116,7 +1144,7 @@ export class RecordingView extends UI.Widget.Widget {
       this.performUpdate();
       return;
     }
-    this.titleChanged?.(title);
+    this.onTitleChanged?.(title);
   };
 
   #onTitleInputKeyDown = (event: KeyboardEvent): void => {
@@ -1170,9 +1198,8 @@ export class RecordingView extends UI.Widget.Widget {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(text);
   }
 
-  #onCopyStepEvent(event: CopyStepEvent): void {
-    event.stopPropagation();
-    void this.#copyCurrentSelection(event.step);
+  #onCopyStepEvent(step: Models.Schema.Step): void {
+    void this.#copyCurrentSelection(step);
   }
 
   async #onCopy(event: ClipboardEvent): Promise<void> {
@@ -1188,7 +1215,7 @@ export class RecordingView extends UI.Widget.Widget {
   #handleMeasurePerformanceClickEvent(event: Event): void {
     event.stopPropagation();
 
-    this.playRecording?.({
+    this.onPlayRecording?.({
       targetPanel: TargetPanel.PERFORMANCE_PANEL,
       speed: PlayRecordingSpeed.NORMAL,
     });

package/front_end/panels/recorder/SelectorPicker.ts

@@ -20,19 +20,6 @@ const {html} = Lit;
 
 const BINDING_NAME = 'captureSelectors';
 
-export class RequestSelectorAttributeEvent extends Event {
-  static readonly eventName = 'requestselectorattribute';
-  send: (attribute?: string) => void;
-
-  constructor(send: (attribute?: string) => void) {
-    super(RequestSelectorAttributeEvent.eventName, {
-      bubbles: true,
-      composed: true,
-    });
-    this.send = send;
-  }
-}
-
 const UIStrings = {
   /**
    * @description The title of a button that allows you to select an element on the page and update CSS/ARIA selectors.

package/front_end/panels/recorder/StepEditor.ts

@@ -12,7 +12,7 @@ import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as Models from './models/models.js';
-import {RequestSelectorAttributeEvent, SelectorPicker} from './SelectorPicker.js';
+import {SelectorPicker} from './SelectorPicker.js';
 import stepEditorStyles from './stepEditor.css.js';
 import {
   ArrayAssignments,
@@ -239,7 +239,7 @@ const UIStrings = {
    */
   deleteRow: 'Delete row',
   /**
-   * @description The title of a button that adds a new input field for the entry of the frame index. Frame index is the number of the frame within the page’s frame tree.
+   * @description The title of a button that adds a new input field for the entry of the frame index. Frame index is the number of the frame within the page's frame tree.
    */
   addFrameIndex: 'Add frame index within the frame tree',
   /**
@@ -270,16 +270,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/recorder/StepEditor.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class StepEditedEvent extends Event {
-  static readonly eventName = 'stepedited';
-  data: Models.Schema.Step;
-
-  constructor(step: Models.Schema.Step) {
-    super(StepEditedEvent.eventName, {bubbles: true, composed: true});
-    this.data = step;
-  }
-}
-
 export interface EditorState {
   type: Models.Schema.StepType;
   target?: string;
@@ -1005,6 +995,8 @@ export class StepEditor extends UI.Widget.Widget {
   #isTypeEditable = true;
   #disabled = false;
   #view: View;
+  onStepEdited?: (step: Models.Schema.Step) => void;
+  onAttributeRequested?: (send: (attribute?: string) => void) => void;
 
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
@@ -1048,7 +1040,7 @@ export class StepEditor extends UI.Widget.Widget {
 
   #commit(updatedState: DeepImmutable<EditorState>): void {
     try {
-      this.element.dispatchEvent(new StepEditedEvent(EditorState.toStep(updatedState)));
+      this.onStepEdited?.(EditorState.toStep(updatedState));
       // Note we don't need to update this variable since it will come from up
       // the tree, but processing up the tree is asynchronous implying we cannot
       // reliably know when the state will come back down. Since we need to
@@ -1073,7 +1065,7 @@ export class StepEditor extends UI.Widget.Widget {
       };
 
   #handleAttributeRequested = (send: (attribute?: string) => void): void => {
-    this.element.dispatchEvent(new RequestSelectorAttributeEvent(send));
+    this.onAttributeRequested?.(send);
   };
 
   #handleAddOrRemoveClick = (assignments: DeepImmutable<DeepPartial<Assignments<EditorState>>>,

package/front_end/panels/recorder/StepView.ts

@@ -13,7 +13,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import type * as Converters from './converters/converters.js';
 import * as Models from './models/models.js';
-import {type StepEditedEvent, StepEditor} from './StepEditor.js';
+import {StepEditor} from './StepEditor.js';
 import stepViewStyles from './stepView.css.js';
 import {TimelineSection} from './TimelineSection.js';
 
@@ -58,7 +58,7 @@ const UIStrings = {
    */
   scrollStepTitle: 'Scroll',
   /**
-   * @description Title for the key up step type. `up` refers to the state of the keyboard key: it’s released, i.e., up. It does not refer to the down arrow key specifically.
+   * @description Title for the key up step type. `up` refers to the state of the keyboard key: it's released, i.e., up. It does not refer to the down arrow key specifically.
    */
   keyUpStepTitle: 'Key up',
   /**
@@ -66,7 +66,7 @@ const UIStrings = {
    */
   navigateStepTitle: 'Navigate',
   /**
-   * @description Title for the key down step type. `down` refers to the state of the keyboard key: it’s pressed, i.e., down. It does not refer to the down arrow key specifically.
+   * @description Title for the key down step type. `down` refers to the state of the keyboard key: it's pressed, i.e., down. It does not refer to the down arrow key specifically.
    */
   keyDownStepTitle: 'Key down',
   /**
@@ -90,27 +90,27 @@ const UIStrings = {
    */
   elementRoleFallback: 'Element',
   /**
-   * @description The title of the button in the step’s context menu that adds a new step before the current one.
+   * @description The title of the button in the step's context menu that adds a new step before the current one.
    */
   addStepBefore: 'Add step before',
   /**
-   * @description The title of the button in the step’s context menu that adds a new step after the current one.
+   * @description The title of the button in the step's context menu that adds a new step after the current one.
    */
   addStepAfter: 'Add step after',
   /**
-   * @description The title of the button in the step’s context menu that removes the step.
+   * @description The title of the button in the step's context menu that removes the step.
    */
   removeStep: 'Remove step',
   /**
-   * @description The title of the button that opens the step’s context menu.
+   * @description The title of the button that opens the step's context menu.
    */
   openStepActions: 'Open step actions',
   /**
-   * @description The title of the button in the step’s context menu that adds a breakpoint.
+   * @description The title of the button in the step's context menu that adds a breakpoint.
    */
   addBreakpoint: 'Add breakpoint',
   /**
-   * @description The title of the button in the step’s context menu that removes a breakpoint.
+   * @description The title of the button in the step's context menu that removes a breakpoint.
    */
   removeBreakpoint: 'Remove breakpoint',
   /**
@@ -142,89 +142,10 @@ export const enum State {
   STOPPED = 'stopped',
 }
 
-export class CaptureSelectorsEvent extends Event {
-  static readonly eventName = 'captureselectors';
-  data: Models.Schema.StepWithSelectors&Partial<Models.Schema.ClickAttributes>;
-
-  constructor(
-      step: Models.Schema.StepWithSelectors&Partial<Models.Schema.ClickAttributes>,
-  ) {
-    super(CaptureSelectorsEvent.eventName, {bubbles: true, composed: true});
-    this.data = step;
-  }
-}
-
-export class CopyStepEvent extends Event {
-  static readonly eventName = 'copystep';
-  step: Models.Schema.Step;
-  constructor(step: Models.Schema.Step) {
-    super(CopyStepEvent.eventName, {bubbles: true, composed: true});
-    this.step = step;
-  }
-}
-
-export class StepChanged extends Event {
-  static readonly eventName = 'stepchanged';
-  currentStep: Models.Schema.Step;
-  newStep: Models.Schema.Step;
-
-  constructor(currentStep: Models.Schema.Step, newStep: Models.Schema.Step) {
-    super(StepChanged.eventName, {bubbles: true, composed: true});
-    this.currentStep = currentStep;
-    this.newStep = newStep;
-  }
-}
-
 export const enum AddStepPosition {
   BEFORE = 'before',
   AFTER = 'after',
 }
-
-export class AddStep extends Event {
-  static readonly eventName = 'addstep';
-  position: AddStepPosition;
-  stepOrSection: Models.Schema.Step|Models.Section.Section;
-
-  constructor(
-      stepOrSection: Models.Schema.Step|Models.Section.Section,
-      position: AddStepPosition,
-  ) {
-    super(AddStep.eventName, {bubbles: true, composed: true});
-    this.stepOrSection = stepOrSection;
-    this.position = position;
-  }
-}
-
-export class RemoveStep extends Event {
-  static readonly eventName = 'removestep';
-  step: Models.Schema.Step;
-
-  constructor(step: Models.Schema.Step) {
-    super(RemoveStep.eventName, {bubbles: true, composed: true});
-    this.step = step;
-  }
-}
-
-export class AddBreakpointEvent extends Event {
-  static readonly eventName = 'addbreakpoint';
-  index: number;
-
-  constructor(index: number) {
-    super(AddBreakpointEvent.eventName, {bubbles: true, composed: true});
-    this.index = index;
-  }
-}
-
-export class RemoveBreakpointEvent extends Event {
-  static readonly eventName = 'removebreakpoint';
-  index: number;
-
-  constructor(index: number) {
-    super(RemoveBreakpointEvent.eventName, {bubbles: true, composed: true});
-    this.index = index;
-  }
-}
-
 const COPY_ACTION_PREFIX = 'copy-step-as-';
 
 interface Action {
@@ -258,7 +179,8 @@ export interface ViewInput {
   recorderSettings?: Models.RecorderSettings.RecorderSettings;
   actions: Action[];
 
-  stepEdited: (event: StepEditedEvent) => void;
+  stepEdited: (newStep: Models.Schema.Step) => void;
+  onAttributeRequested?: (send: (attribute?: string) => void) => void;
   onBreakpointClick: () => void;
   handleStepAction: (event: Menus.Menu.MenuItemSelectedEvent) => void;
   toggleShowDetails: () => void;
@@ -466,9 +388,10 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
             html`<devtools-widget ${widget(StepEditor, {
               step: input.step,
               disabled: input.isPlaying,
+              onStepEdited: input.stepEdited,
+              onAttributeRequested: input.onAttributeRequested,
             })}
-            class=${input.isSelected ? 'is-selected' : ''}
-            @stepedited=${input.stepEdited}></devtools-widget>`
+            class=${input.isSelected ? 'is-selected' : ''}></devtools-widget>`
           }
           ${
             input.section?.causingStep &&
@@ -476,8 +399,10 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
               step: input.section.causingStep,
               isTypeEditable: false,
               disabled: input.isPlaying,
-            })}
-            @stepedited=${input.stepEdited}></devtools-widget>`
+              onStepEdited: input.stepEdited,
+              onAttributeRequested: input.onAttributeRequested,
+            })}></devtools-widget>`
+          }
           }
         </div>
         ${
@@ -500,6 +425,13 @@ export class StepView extends UI.Widget.Widget<ShadowRoot> {
   #observer: IntersectionObserver = new IntersectionObserver(result => {
     this.#viewInput.isVisible = result[0].isIntersecting;
   });
+  onStepChanged?: (currentStep: Models.Schema.Step, newStep: Models.Schema.Step) => void;
+  onAddStep?: (stepOrSection: Models.Schema.Step|Models.Section.Section, position: AddStepPosition) => void;
+  onRemoveStep?: (step: Models.Schema.Step) => void;
+  onAddBreakpoint?: (index: number) => void;
+  onRemoveBreakpoint?: (index: number) => void;
+  onCopyStep?: (step: Models.Schema.Step) => void;
+  onAttributeRequested?: (send: (attribute?: string) => void) => void;
   #viewInput: ViewInput = {
     state: State.DEFAULT,
     showDetails: false,
@@ -520,6 +452,7 @@ export class StepView extends UI.Widget.Widget<ShadowRoot> {
     actions: [],
 
     stepEdited: this.#stepEdited.bind(this),
+    onAttributeRequested: send => this.onAttributeRequested?.(send),
     onBreakpointClick: this.#onBreakpointClick.bind(this),
     handleStepAction: this.#handleStepAction.bind(this),
     toggleShowDetails: this.#toggleShowDetails.bind(this),
@@ -672,12 +605,12 @@ export class StepView extends UI.Widget.Widget<ShadowRoot> {
     }
   }
 
-  #stepEdited(event: StepEditedEvent): void {
+  #stepEdited(newStep: Models.Schema.Step): void {
     const step = this.#viewInput.step || this.#viewInput.section?.causingStep;
     if (!step) {
       throw new Error('Expected step.');
     }
-    this.contentElement.dispatchEvent(new StepChanged(step, event.data));
+    this.onStepChanged?.(step, newStep);
   }
 
   #handleStepAction(event: Menus.Menu.MenuItemSelectedEvent): void {
@@ -687,7 +620,7 @@ export class StepView extends UI.Widget.Widget<ShadowRoot> {
         if (!stepOrSection) {
           throw new Error('Expected step or section.');
         }
-        this.contentElement.dispatchEvent(new AddStep(stepOrSection, AddStepPosition.BEFORE));
+        this.onAddStep?.(stepOrSection, AddStepPosition.BEFORE);
         break;
       }
       case 'add-step-after': {
@@ -695,7 +628,7 @@ export class StepView extends UI.Widget.Widget<ShadowRoot> {
         if (!stepOrSection) {
           throw new Error('Expected step or section.');
         }
-        this.contentElement.dispatchEvent(new AddStep(stepOrSection, AddStepPosition.AFTER));
+        this.onAddStep?.(stepOrSection, AddStepPosition.AFTER);
         break;
       }
       case 'remove-step': {
@@ -703,23 +636,21 @@ export class StepView extends UI.Widget.Widget<ShadowRoot> {
         if (!this.#viewInput.step && !causingStep) {
           throw new Error('Expected step.');
         }
-        this.contentElement.dispatchEvent(
-            new RemoveStep(this.#viewInput.step || (causingStep as Models.Schema.Step)),
-        );
+        this.onRemoveStep?.(this.#viewInput.step || (causingStep as Models.Schema.Step));
         break;
       }
       case 'add-breakpoint': {
         if (!this.#viewInput.step) {
           throw new Error('Expected step');
         }
-        this.contentElement.dispatchEvent(new AddBreakpointEvent(this.#viewInput.stepIndex));
+        this.onAddBreakpoint?.(this.#viewInput.stepIndex);
         break;
       }
       case 'remove-breakpoint': {
         if (!this.#viewInput.step) {
           throw new Error('Expected step');
         }
-        this.contentElement.dispatchEvent(new RemoveBreakpointEvent(this.#viewInput.stepIndex));
+        this.onRemoveBreakpoint?.(this.#viewInput.stepIndex);
         break;
       }
       default: {
@@ -738,16 +669,16 @@ export class StepView extends UI.Widget.Widget<ShadowRoot> {
           this.#viewInput.recorderSettings.preferredCopyFormat = converterId;
         }
 
-        this.contentElement.dispatchEvent(new CopyStepEvent(structuredClone(copyStep)));
+        this.onCopyStep?.(structuredClone(copyStep));
       }
     }
   }
 
   #onBreakpointClick(): void {
     if (this.#viewInput.hasBreakpoint) {
-      this.contentElement.dispatchEvent(new RemoveBreakpointEvent(this.#viewInput.stepIndex));
+      this.onRemoveBreakpoint?.(this.#viewInput.stepIndex);
     } else {
-      this.contentElement.dispatchEvent(new AddBreakpointEvent(this.#viewInput.stepIndex));
+      this.onAddBreakpoint?.(this.#viewInput.stepIndex);
     }
     this.requestUpdate();
   }

package/front_end/panels/search/SearchResultsPane.ts

@@ -4,7 +4,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render, type TemplateResult} from '../../ui/lit/lit.js';

package/front_end/panels/security/SecurityPanel.ts

@@ -120,7 +120,7 @@ const UIStrings = {
    */
   insecureSha: 'insecure (SHA-1)',
   /**
-   * @description Description of the security explanation when the site’s certificate chain contains a certificate signed using SHA-1.
+   * @description Description of the security explanation when the site's certificate chain contains a certificate signed using SHA-1.
    */
   theCertificateChainForThisSite: 'The certificate chain for this site contains a certificate signed using SHA-1.',
   /**
@@ -128,7 +128,7 @@ const UIStrings = {
    */
   subjectAlternativeNameMissing: '`Subject Alternative Name` missing',
   /**
-   * @description Description of the security explanation when the site’s certificate is missing a Subject Alternative Name extension.
+   * @description Description of the security explanation when the site's certificate is missing a Subject Alternative Name extension.
    */
   theCertificateForThisSiteDoesNot:
       'The certificate for this site doesn’t contain a `Subject Alternative Name` extension containing a domain name or IP address.',
@@ -274,7 +274,7 @@ const UIStrings = {
    */
   reloadThePageToRecordRequestsFor: 'Reload the page to record requests for HTTP resources.',
   /**
-   * @description Link text in the Security panel. Clicking the link navigates the user to the Network panel. Requests refers to network requests. Each request is a piece of data transmitted from the current user’s browser to a remote server.
+   * @description Link text in the Security panel. Clicking the link navigates the user to the Network panel. Requests refers to network requests. Each request is a piece of data transmitted from the current user's browser to a remote server.
    */
   viewDRequestsInNetworkPanel:
       '{n, plural, =1 {View # request in Network panel} other {View # requests in Network panel}}',