chrome-devtools-frontend 1.0.1660788 → 1.0.1661063

package/front_end/panels/recorder/{components/RecordingView.ts → RecordingView.ts}

@@ -2,32 +2,32 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/kit/kit.js';
-
-import * as Host from '../../../core/host/host.js';
-import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
-import * as SDK from '../../../core/sdk/sdk.js';
-import type * as PublicExtensions from '../../../models/extensions/extensions.js';
-import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
-import type * as PuppeteerReplay from '../../../third_party/puppeteer-replay/puppeteer-replay.js';
-import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as CodeHighlighter from '../../../ui/components/code_highlighter/code_highlighter.js';
-import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
-import * as Input from '../../../ui/components/input/input.js';
-import type * as Menus from '../../../ui/components/menus/menus.js';
-import * as TextEditor from '../../../ui/components/text_editor/text_editor.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-import type * as Converters from '../converters/converters.js';
-import type * as Extensions from '../extensions/extensions.js';
-import * as Models from '../models/models.js';
-import {PlayRecordingSpeed} from '../models/RecordingPlayer.js';
-import * as Actions from '../recorder-actions/recorder-actions.js';
+import '../../ui/kit/kit.js';
+
+import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as PublicExtensions from '../../models/extensions/extensions.js';
+import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import type * as PuppeteerReplay from '../../third_party/puppeteer-replay/puppeteer-replay.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
+import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
+import * as Input from '../../ui/components/input/input.js';
+import type * as Menus from '../../ui/components/menus/menus.js';
+import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ControlButton} from './ControlButton.js';
+import type * as Converters from './converters/converters.js';
+import type * as Extensions from './extensions/extensions.js';
 import {ExtensionView} from './ExtensionView.js';
+import * as Models from './models/models.js';
+import {PlayRecordingSpeed} from './models/RecordingPlayer.js';
+import * as Actions from './recorder-actions/recorder-actions.js';
 import recordingViewStyles from './recordingView.css.js';
 import {ReplaySection} from './ReplaySection.js';
 import {
@@ -151,7 +151,7 @@ const UIStrings = {
   codeSidebarClosed: 'Code sidebar closed',
 } as const;
 const str_ = i18n.i18n.registerUIStrings(
-    'panels/recorder/components/RecordingView.ts',
+    'panels/recorder/RecordingView.ts',
     UIStrings,
 );
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -648,7 +648,7 @@ function renderSections(input: ViewInput): Lit.LitTemplate {
       )}
       </div>
     `;
-        // clang-format on
+  // clang-format on
 }
 
 function renderHeader(input: ViewInput): Lit.LitTemplate {
@@ -806,8 +806,9 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
               descriptor: input.extensionDescriptor,
               onClose: () => {
                 target.dispatchEvent(new Event('recorderextensionviewclosed', {bubbles: true, composed: true}));
-              }
-            })}></devtools-widget>` : html`
+              },
+            })}>
+            </devtools-widget>` : html`
           ${renderSettings(input)}
           ${renderTimelineArea(input, output)}
         `}
@@ -911,67 +912,66 @@ export class RecordingView extends UI.Widget.Widget {
         ].find(converter => converter.getId() === this.#converterId) ??
         this.builtInConverters[0];
 
-    this.#view(
-        {
-          breakpointIndexes: this.breakpointIndexes,
-          builtInConverters: this.builtInConverters,
-          converterId: this.#converterId,
-          converterName: converter?.getFormatName(),
-          currentError: this.currentError ?? null,
-          currentStep: this.currentStep ?? null,
-          editorState: this.#editorState ?? null,
-          extensionConverters: this.extensionConverters,
-          extensionDescriptor: this.extensionDescriptor,
-          isRecording: this.isRecording,
-          isTitleInvalid: this.#isTitleInvalid,
-          lastReplayResult: this.lastReplayResult ?? null,
-          recorderSettings: this.#recorderSettings ?? null,
-          recording: this.recording,
-          recordingTogglingInProgress: this.recordingTogglingInProgress,
-          replayAllowed: this.replayAllowed,
-          replayExtensions: this.replayExtensions ?? [],
-          replaySettingsExpanded: this.#replaySettingsExpanded,
-          replayState: this.replayState,
-          sections: this.sections,
-          selectedStep: this.#selectedStep ?? null,
-          settings: this.settings ?? null,
-          showCodeView: this.#showCodeView,
-
-          onAddAssertion: () => {
-            this.addAssertion?.();
-          },
-          onRecordingFinished: () => {
-            this.recordingFinished?.();
-          },
-          getSectionState: this.#getSectionState.bind(this),
-          getStepState: this.#getStepState.bind(this),
-          onAbortReplay: () => {
-            this.abortReplay?.();
-          },
-          onMeasurePerformanceClick: this.#handleMeasurePerformanceClickEvent.bind(this),
-          onTogglePlaying: (speed: PlayRecordingSpeed, extension?: Extensions.ExtensionManager.Extension) => {
-            this.playRecording?.({
-              targetPanel: TargetPanel.DEFAULT,
-              speed,
-              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);
+    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: (speed: PlayRecordingSpeed, extension?: Extensions.ExtensionManager.Extension) => {
+        this.playRecording?.({
+          targetPanel: TargetPanel.DEFAULT,
+          speed,
+          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 {

package/front_end/panels/recorder/{components/ReplaySection.ts → ReplaySection.ts}

@@ -2,17 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
-import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-import type * as Extensions from '../extensions/extensions.js';
-import * as Models from '../models/models.js';
-import {PlayRecordingSpeed} from '../models/RecordingPlayer.js';
-import * as Actions from '../recorder-actions/recorder-actions.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import type * as Extensions from './extensions/extensions.js';
+import * as Models from './models/models.js';
+import {PlayRecordingSpeed} from './models/RecordingPlayer.js';
+import * as Actions from './recorder-actions/recorder-actions.js';
 import replaySectionStyles from './replaySection.css.js';
 
 const {html, Directives: {ifDefined, repeat}} = Lit;
@@ -65,7 +65,7 @@ const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings(
-    'panels/recorder/components/ReplaySection.ts',
+    'panels/recorder/ReplaySection.ts',
     UIStrings,
 );
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/recorder/{components/SelectorPicker.ts → SelectorPicker.ts}

@@ -2,19 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-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 SDK from '../../../core/sdk/sdk.js';
-import type * as Protocol from '../../../generated/protocol.js';
-import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-import * as Models from '../models/models.js';
-import * as Util from '../util/util.js';
-
+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 SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+
+import * as Models from './models/models.js';
 import selectorPickerStyles from './selectorPicker.css.js';
+import * as Util from './util/util.js';
 
 const {html} = Lit;
 
@@ -39,7 +39,7 @@ const UIStrings = {
    */
   selectorPicker: 'Select an element in the page to update selectors',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('panels/recorder/components/SelectorPicker.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/recorder/SelectorPicker.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface ViewInput {

package/front_end/panels/recorder/{components/StepEditor.ts → StepEditor.ts}

@@ -2,17 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
-import type * as Puppeteer from '../../../third_party/puppeteer/puppeteer.js';
-import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as SuggestionInput from '../../../ui/components/suggestion_input/suggestion_input.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-import * as Models from '../models/models.js';
-import * as Util from '../util/util.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
+import type * as Puppeteer from '../../third_party/puppeteer/puppeteer.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as SuggestionInput from '../../ui/components/suggestion_input/suggestion_input.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import * as Models from './models/models.js';
 import {RequestSelectorAttributeEvent, SelectorPicker} from './SelectorPicker.js';
 import stepEditorStyles from './stepEditor.css.js';
 import {
@@ -27,7 +26,8 @@ import {
   type Keys,
   type OptionalKeys,
   type RequiredKeys,
-} from './util.js';
+  SharedObject,
+} from './util/util.js';
 
 const {html, render, Directives} = Lit;
 const {live} = Directives;
@@ -267,7 +267,7 @@ const UIStrings = {
    */
   unknownActionType: 'Enter a valid action type',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('panels/recorder/components/StepEditor.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/recorder/StepEditor.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class StepEditedEvent extends Event {
@@ -328,9 +328,9 @@ interface Puppeteer {
 }
 
 export class EditorState {
-  static #puppeteer: Util.SharedObject.SharedObject<Puppeteer> = new Util.SharedObject.SharedObject(
-      () => Models.RecordingPlayer.RecordingPlayer.connectPuppeteer(),
-      ({browser}) => Models.RecordingPlayer.RecordingPlayer.disconnectPuppeteer(browser));
+  static #puppeteer: SharedObject.SharedObject<Puppeteer> =
+      new SharedObject.SharedObject(() => Models.RecordingPlayer.RecordingPlayer.connectPuppeteer(),
+                                    ({browser}) => Models.RecordingPlayer.RecordingPlayer.disconnectPuppeteer(browser));
 
   static async default(type: Models.Schema.StepType): Promise<DeepImmutable<EditorState>> {
     const state = {type};

package/front_end/panels/recorder/{components/StepView.ts → StepView.ts}

@@ -2,17 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/kit/kit.js';
+import '../../ui/kit/kit.js';
 
-import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
-import * as Menus from '../../../ui/components/menus/menus.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
-import * 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 * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
+import * as Menus from '../../ui/components/menus/menus.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+import * 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 stepViewStyles from './stepView.css.js';
 import {TimelineSection} from './TimelineSection.js';
@@ -128,7 +128,7 @@ const UIStrings = {
   breakpoints: 'Breakpoints',
 } as const;
 const str_ = i18n.i18n.registerUIStrings(
-    'panels/recorder/components/StepView.ts',
+    'panels/recorder/StepView.ts',
     UIStrings,
 );
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/recorder/{components/TimelineSection.ts → TimelineSection.ts}

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 
 import timelineSectionStyles from './timelineSection.css.js';
 

package/front_end/panels/recorder/recorder.ts

@@ -2,8 +2,30 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as ControlButton from './ControlButton.js';
+import * as CreateRecordingView from './CreateRecordingView.js';
 import * as RecorderController from './RecorderController.js';
 import * as RecorderEvents from './RecorderEvents.js';
 import * as RecorderPanel from './RecorderPanel.js';
+import * as RecordingListView from './RecordingListView.js';
+import * as RecordingView from './RecordingView.js';
+import * as ReplaySection from './ReplaySection.js';
+import * as SelectorPicker from './SelectorPicker.js';
+import * as StepEditor from './StepEditor.js';
+import * as StepView from './StepView.js';
+import * as TimelineSection from './TimelineSection.js';
 
-export {RecorderController, RecorderEvents, RecorderPanel};
+export {
+  ControlButton,
+  CreateRecordingView,
+  RecorderController,
+  RecorderEvents,
+  RecorderPanel,
+  RecordingListView,
+  RecordingView,
+  ReplaySection,
+  SelectorPicker,
+  StepEditor,
+  StepView,
+  TimelineSection,
+};

package/front_end/panels/recorder/util/util.ts

@@ -23,3 +23,116 @@ class InjectedScript {
 }
 
 export {DEVTOOLS_RECORDER_WORLD_NAME, InjectedScript, isDebugBuild, SharedObject};
+
+export const mod = (a: number, n: number): number => {
+  return ((a % n) + n) % n;
+};
+
+export function assert<T>(
+    predicate: T,
+    message = 'Assertion failed!',
+    ): asserts predicate {
+  if (!predicate) {
+    throw new Error(message);
+  }
+}
+
+export type Keys<T> = T extends T ? keyof T : never;
+
+export type RequiredKeys<T> = {
+  [K in keyof T] -?: Record<string|number|symbol, unknown> extends Pick<T, K>? never : K;
+}[keyof T];
+
+export type OptionalKeys<T> = {
+  [K in keyof T] -?: Record<string|number|symbol, unknown> extends Pick<T, K>? K : never;
+}[keyof T];
+
+export type DeepImmutable<T> = {
+  readonly[K in keyof T]: DeepImmutable<T[K]>;
+};
+
+export type DeepMutable<T> = {
+  -readonly[K in keyof T]: DeepMutable<T[K]>;
+};
+
+export type DeepPartial<T> = {
+  [K in keyof T]?: DeepPartial<Exclude<T[K], undefined>>;
+};
+
+export type Mutable<T> = {
+  -readonly[K in keyof T]: T[K];
+};
+
+export const deepFreeze = <T extends object>(object: T): DeepImmutable<T> => {
+  for (const name of Reflect.ownKeys(object)) {
+    const value = object[name as keyof T];
+    if ((value && typeof value === 'object') || typeof value === 'function') {
+      deepFreeze(value);
+    }
+  }
+  return Object.freeze(object);
+};
+
+export class InsertAssignment<T> {
+  value: T;
+  constructor(value: T) {
+    this.value = value;
+  }
+}
+
+export class ArrayAssignments<T> {
+  value: Record<number, T>;
+  constructor(value: Record<number, T>) {
+    this.value = value;
+  }
+}
+
+export type Assignments<T> = T extends Readonly<Array<infer R>>?
+    R[]|ArrayAssignments<Assignments<R>|InsertAssignment<R>>:
+    {[K in keyof T]: Assignments<T[K]>};
+
+export const immutableDeepAssign = <T>(
+    object: DeepImmutable<T>,
+    assignments: DeepImmutable<DeepPartial<Assignments<T>>>,
+    ): DeepImmutable<T> => {
+  if (assignments instanceof ArrayAssignments) {
+    assert(Array.isArray(object), `Expected an array. Got ${typeof object}.`);
+    const updatedObject = [...object] as Mutable<typeof object>;
+    const keys = Object.keys(assignments.value)
+                     .sort(
+                         (a, b) => Number(b) - Number(a),
+                         ) as Array<keyof typeof updatedObject>;
+    for (const key of keys) {
+      const update = assignments.value[Number(key)];
+      if (update === undefined) {
+        updatedObject.splice(Number(key), 1);
+      } else if (update instanceof InsertAssignment) {
+        updatedObject.splice(Number(key), 0, update.value);
+      } else {
+        updatedObject[Number(key)] = immutableDeepAssign(
+            updatedObject[key],
+            update,
+        );
+      }
+    }
+    return Object.freeze(updatedObject);
+  }
+  if (typeof assignments === 'object' && !Array.isArray(assignments)) {
+    assert(!Array.isArray(object), 'Expected an object. Got an array.');
+    const updatedObject = {...object} as Mutable<typeof object>;
+    const keys = Object.keys(assignments) as Array<keyof typeof assignments&keyof typeof updatedObject>;
+    for (const key of keys) {
+      const update = assignments[key];
+      if (update === undefined) {
+        delete updatedObject[key];
+      } else {
+        updatedObject[key] = immutableDeepAssign(
+            updatedObject[key],
+            update as typeof updatedObject[typeof key],
+        );
+      }
+    }
+    return Object.freeze(updatedObject);
+  }
+  return assignments as DeepImmutable<T>;
+};

package/front_end/panels/sources/InplaceFormatterEditorAction.ts

@@ -133,8 +133,8 @@ export class InplaceFormatterEditorAction implements EditorAction {
   private async contentLoaded(
       uiSourceCode: Workspace.UISourceCode.UISourceCode, sourceFrame: UISourceCodeFrame,
       content: string): Promise<void> {
-    const {formattedContent, formattedMapping} =
-        await Formatter.ScriptFormatter.format(uiSourceCode.contentType(), sourceFrame.contentType, content);
+    const {formattedContent, formattedMapping} = await Formatter.ScriptFormatter.format(
+        Common.Settings.Settings.instance(), uiSourceCode.contentType(), sourceFrame.contentType, content);
     if (uiSourceCode.workingCopy() === formattedContent) {
       return;
     }

package/front_end/panels/sources/SourcesNavigator.ts

@@ -11,7 +11,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as Bindings from '../../models/bindings/bindings.js';
+import type * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
@@ -135,8 +135,7 @@ export class NetworkNavigatorView extends NavigatorView {
 
   override acceptProject(project: Workspace.Workspace.Project): boolean {
     return project.type() === Workspace.Workspace.projectTypes.Network &&
-        SDK.TargetManager.TargetManager.instance().isInScope(
-            Bindings.NetworkProject.NetworkProject.getTargetForProject(project));
+        SDK.TargetManager.TargetManager.instance().isInScope(project.target());
   }
 
   onScopeChange(): void {

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -718,7 +718,7 @@ export interface EventTypes {
 const MAX_PREVIOUSLY_VIEWED_FILES_COUNT = 30;
 const MAX_SERIALIZABLE_URL_LENGTH = 4096;
 
-interface SerializedHistoryItem {
+export interface SerializedHistoryItem {
   url: string;
   resourceTypeName: string;
   selectionRange?: TextUtils.TextRange.SerializedTextRange;

package/front_end/panels/timeline/IsolateSelector.ts

@@ -26,10 +26,14 @@ export class IsolateSelector extends UI.Toolbar.ToolbarItem implements SDK.Isola
   options?: Array<{index: number, isolate: SDK.IsolateManager.Isolate}>;
   items?: Menus.Menu.MenuItem[];
   readonly itemByIsolate = new Map<SDK.IsolateManager.Isolate, Menus.Menu.MenuItem>();
+  readonly #targetManager: SDK.TargetManager.TargetManager;
+  readonly #isolateManager: SDK.IsolateManager.IsolateManager;
 
-  constructor() {
+  constructor(targetManager: SDK.TargetManager.TargetManager, isolateManager: SDK.IsolateManager.IsolateManager) {
     const menu = new Menus.SelectMenu.SelectMenu();
     super(menu);
+    this.#targetManager = targetManager;
+    this.#isolateManager = isolateManager;
 
     this.menu = menu;
     menu.buttonTitle = i18nString(UIStrings.selectJavascriptVmInstance);
@@ -38,18 +42,16 @@ export class IsolateSelector extends UI.Toolbar.ToolbarItem implements SDK.Isola
 
     menu.addEventListener('selectmenuselected', this.#onSelectMenuSelected.bind(this));
 
-    SDK.IsolateManager.IsolateManager.instance().observeIsolates(this);
-    SDK.TargetManager.TargetManager.instance().addEventListener(
-        SDK.TargetManager.Events.NAME_CHANGED, this.targetChanged, this);
-    SDK.TargetManager.TargetManager.instance().addEventListener(
-        SDK.TargetManager.Events.INSPECTED_URL_CHANGED, this.targetChanged, this);
+    this.#isolateManager.observeIsolates(this);
+    this.#targetManager.addEventListener(SDK.TargetManager.Events.NAME_CHANGED, this.targetChanged, this);
+    this.#targetManager.addEventListener(SDK.TargetManager.Events.INSPECTED_URL_CHANGED, this.targetChanged, this);
   }
 
   #updateIsolateItem(isolate: SDK.IsolateManager.Isolate, itemForIsolate: Menus.Menu.MenuItem): void {
     const modelCountByName = new Map<string, number>();
     for (const model of isolate.models()) {
       const target = model.target();
-      const name = SDK.TargetManager.TargetManager.instance().rootTarget() !== target ? target.name() : '';
+      const name = this.#targetManager.rootTarget() !== target ? target.name() : '';
       const parsedURL = new Common.ParsedURL.ParsedURL(target.inspectedURL());
       const domain = parsedURL.isValid ? parsedURL.domain() : '';
       const title =
@@ -117,7 +119,7 @@ export class IsolateSelector extends UI.Toolbar.ToolbarItem implements SDK.Isola
     if (!model) {
       return;
     }
-    const isolate = SDK.IsolateManager.IsolateManager.instance().isolateByModel(model);
+    const isolate = this.#isolateManager.isolateByModel(model);
     if (isolate) {
       this.isolateChanged(isolate);
     }