chrome-devtools-frontend 1.0.1657110 → 1.0.1660788

package/front_end/models/ai_assistance/data_formatters/UnitFormatters.ts

@@ -53,6 +53,18 @@ const byteFormatters = {
     ...defaultByteFormatterOptions,
     unit: 'kilobyte',
   }),
+  kilobytesDecimal: new Intl.NumberFormat('en-US', {
+    ...defaultByteFormatterOptions,
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+    unit: 'kilobyte',
+  }),
+  kilobytesInteger: new Intl.NumberFormat('en-US', {
+    ...defaultByteFormatterOptions,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+    unit: 'kilobyte',
+  }),
   megabytes: new Intl.NumberFormat('en-US', {
     ...defaultByteFormatterOptions,
     unit: 'megabyte',
@@ -119,6 +131,14 @@ export function bytes(x: number): string {
   return formatAndEnsureSpace(byteFormatters.megabytes, megabytes);
 }
 
+export function formatBytesToKb(x: number): string {
+  const kilobytes = x / 1_000;
+  if (kilobytes < 100) {
+    return formatAndEnsureSpace(byteFormatters.kilobytesDecimal, kilobytes);
+  }
+  return formatAndEnsureSpace(byteFormatters.kilobytesInteger, kilobytes);
+}
+
 /**
  * When using 'narrow' unitDisplay, many locales exclude the space between the literal and the unit.
  * We don't like that, so when there is no space literal we inject the provided separator manually.

package/front_end/models/ai_assistance/performance/AICallTree.ts

@@ -5,6 +5,7 @@
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as SourceMapsResolver from '../../../models/trace_source_maps_resolver/trace_source_maps_resolver.js';
+import * as Workspace from '../../../models/workspace/workspace.js';
 
 /** Iterates from a node down through its descendents. If the callback returns true, the loop stops. */
 function depthFirstWalk(
@@ -335,7 +336,8 @@ export class AICallTree {
     const selfTimeStr = roundToTenths(node.selfTime);
 
     // 6. URL Index
-    const location = SourceMapsResolver.SourceMapsResolver.codeLocationForEntry(parsedTrace, event);
+    const location = SourceMapsResolver.SourceMapsResolver.codeLocationForEntry(
+        parsedTrace, event, Workspace.Workspace.WorkspaceImpl.instance());
     const url = location?.url;
     let urlIndexStr = '';
     if (url) {

package/front_end/models/ai_assistance/tools/ListNetworkRequests.ts

@@ -9,6 +9,7 @@ import * as Logs from '../../logs/logs.js';
 import type {FunctionCallHandlerResult} from '../agents/AiAgent.js';
 import {isOpaqueOrigin} from '../AiOrigins.js';
 import {getRequestContextOrigin} from '../contexts/RequestContext.js';
+import {formatBytesToKb, seconds} from '../data_formatters/UnitFormatters.js';
 
 import {
   type BaseToolCapability,
@@ -96,8 +97,8 @@ export class ListNetworkRequestsTool implements
         id: request.requestId(),
         url: request.url(),
         statusCode: request.statusCode,
-        duration: i18n.TimeUtilities.secondsToString(request.duration),
-        transferSize: i18n.ByteUtilities.formatBytesToKb(request.transferSize),
+        duration: seconds(request.duration),
+        transferSize: formatBytesToKb(request.transferSize),
       });
       requestsToShow.push(request);
     }

package/front_end/models/autofill_manager/AutofillManager.ts

@@ -8,6 +8,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 
 export class AutofillManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
+  #targetManager: SDK.TargetManager.TargetManager;
   #address = '';
   #filledFields: Protocol.Autofill.FilledField[] = [];
   #matches: Match[] = [];
@@ -16,6 +17,7 @@ export class AutofillManager extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   constructor(targetManager: SDK.TargetManager.TargetManager, frameManager: SDK.FrameManager.FrameManager) {
     super();
+    this.#targetManager = targetManager;
     this.#frameManager = frameManager;
     targetManager.addModelListener(SDK.AutofillModel.AutofillModel, SDK.AutofillModel.Events.ADDRESS_FORM_FILLED,
                                    this.#addressFormFilled, this, {scoped: true});
@@ -58,7 +60,7 @@ export class AutofillManager extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   clearHighlightedFilledFields(): void {
-    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(this.#targetManager);
   }
 
   #processAddressFormFilledData({addressUi, filledFields}: Protocol.Autofill.AddressFormFilledEvent): void {

package/front_end/models/bindings/CSSWorkspaceBinding.ts

@@ -152,6 +152,7 @@ export interface SourceMapping {
 
 export class ModelInfo {
   readonly #eventListeners: Common.EventTarget.EventDescriptor[];
+  readonly #cssWorkspaceBinding: CSSWorkspaceBinding;
   readonly #resourceMapping: ResourceMapping;
   #stylesSourceMapping: StylesSourceMapping;
   #sassSourceMapping: SASSSourceMapping;
@@ -159,6 +160,7 @@ export class ModelInfo {
   readonly #unboundLocations: Platform.MapUtilities.Multimap<Platform.DevToolsPath.UrlString, LiveLocation>;
   constructor(
       cssModel: SDK.CSSModel.CSSModel, resourceMapping: ResourceMapping, cssWorkspaceBinding: CSSWorkspaceBinding) {
+    this.#cssWorkspaceBinding = cssWorkspaceBinding;
     this.#eventListeners = [
       cssModel.addEventListener(
           SDK.CSSModel.Events.StyleSheetAdded,
@@ -191,7 +193,7 @@ export class ModelInfo {
   async createLiveLocation(
       rawLocation: SDK.CSSModel.CSSLocation, updateDelegate: (arg0: LiveLocationInterface) => Promise<void>,
       locationPool: LiveLocationPool): Promise<LiveLocation> {
-    const location = new LiveLocation(rawLocation, this, updateDelegate, locationPool);
+    const location = new LiveLocation(rawLocation, this, this.#cssWorkspaceBinding, updateDelegate, locationPool);
     const header = rawLocation.header();
     if (header) {
       location.setHeader(header);
@@ -286,15 +288,16 @@ export class LiveLocation extends LiveLocationWithPool {
   readonly #lineNumber: number;
   readonly #columnNumber: number;
   readonly #info: ModelInfo;
+  readonly #cssWorkspaceBinding: CSSWorkspaceBinding;
   #header: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|null;
-  constructor(
-      rawLocation: SDK.CSSModel.CSSLocation, info: ModelInfo,
-      updateDelegate: (arg0: LiveLocationInterface) => Promise<void>, locationPool: LiveLocationPool) {
+  constructor(rawLocation: SDK.CSSModel.CSSLocation, info: ModelInfo, cssWorkspaceBinding: CSSWorkspaceBinding,
+              updateDelegate: (arg0: LiveLocationInterface) => Promise<void>, locationPool: LiveLocationPool) {
     super(updateDelegate, locationPool);
     this.url = rawLocation.url;
     this.#lineNumber = rawLocation.lineNumber;
     this.#columnNumber = rawLocation.columnNumber;
     this.#info = info;
+    this.#cssWorkspaceBinding = cssWorkspaceBinding;
     this.#header = null;
   }
 
@@ -311,7 +314,7 @@ export class LiveLocation extends LiveLocationWithPool {
       return null;
     }
     const rawLocation = new SDK.CSSModel.CSSLocation(this.#header, this.#lineNumber, this.#columnNumber);
-    return CSSWorkspaceBinding.instance().rawLocationToUILocation(rawLocation);
+    return this.#cssWorkspaceBinding.rawLocationToUILocation(rawLocation);
   }
 
   override dispose(): void {

package/front_end/models/bindings/CompilerScriptMapping.ts

@@ -480,7 +480,8 @@ export class CompilerScriptMapping implements DebuggerSourceMapping {
       const contentProvider = content !== null ?
           TextUtils.StaticContentProvider.StaticContentProvider.fromString(url, contentType, content) :
           new SDK.CompilerSourceMappingContentProvider.CompilerSourceMappingContentProvider(
-              url, contentType, script.createPageResourceLoadInitiator());
+              url, contentType, script.createPageResourceLoadInitiator(),
+              target.targetManager().getPageResourceLoader());
       let metadata: Workspace.UISourceCode.UISourceCodeMetadata|null = null;
       if (content !== null) {
         const encoder = new TextEncoder();

package/front_end/models/bindings/DebuggerLanguagePlugins.ts

@@ -404,6 +404,7 @@ export class DebuggerLanguagePluginManager implements
     SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel> {
   readonly #workspace: Workspace.Workspace.WorkspaceImpl;
   readonly #debuggerWorkspaceBinding: DebuggerWorkspaceBinding;
+  readonly #console: Common.Console.Console;
   #plugins: DebuggerLanguagePlugin[];
   readonly #debuggerModelToData: Map<SDK.DebuggerModel.DebuggerModel, ModelData>;
   readonly #rawModuleHandles: Map<string, {
@@ -417,11 +418,11 @@ export class DebuggerLanguagePluginManager implements
   private readonly stopIdByCallFrame = new Map<SDK.DebuggerModel.CallFrame, StopId>();
   private nextStopId: StopId = 0n;
 
-  constructor(
-      targetManager: SDK.TargetManager.TargetManager, workspace: Workspace.Workspace.WorkspaceImpl,
-      debuggerWorkspaceBinding: DebuggerWorkspaceBinding) {
+  constructor(targetManager: SDK.TargetManager.TargetManager, workspace: Workspace.Workspace.WorkspaceImpl,
+              debuggerWorkspaceBinding: DebuggerWorkspaceBinding, console: Common.Console.Console) {
     this.#workspace = workspace;
     this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
+    this.#console = console;
 
     this.#plugins = [];
 
@@ -511,8 +512,8 @@ export class DebuggerLanguagePluginManager implements
       const scripts = rawModuleHandle.scripts.filter(script => script.debuggerModel !== debuggerModel);
       if (scripts.length === 0) {
         rawModuleHandle.plugin.removeRawModule(rawModuleId).catch(error => {
-          Common.Console.Console.instance().error(
-              i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}), /* show=*/ false);
+          this.#console.error(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}),
+                              /* show=*/ false);
         });
         this.#rawModuleHandles.delete(rawModuleId);
       } else {
@@ -633,8 +634,7 @@ export class DebuggerLanguagePluginManager implements
             sourceLocation.lineNumber, sourceLocation.columnNumber >= 0 ? sourceLocation.columnNumber : undefined);
       }
     } catch (error) {
-      Common.Console.Console.instance().error(
-          i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}), /* show=*/ false);
+      this.#console.error(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}), /* show=*/ false);
     }
     return null;
   }
@@ -663,8 +663,7 @@ export class DebuggerLanguagePluginManager implements
     }
 
     return Promise.all(locationPromises).then(locations => locations.flat()).catch(error => {
-      Common.Console.Console.instance().error(
-          i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}), /* show=*/ false);
+      this.#console.error(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}), /* show=*/ false);
       return null;
     });
 
@@ -841,7 +840,7 @@ export class DebuggerLanguagePluginManager implements
       let rawModuleHandle = this.#rawModuleHandles.get(rawModuleId);
       if (!rawModuleHandle) {
         const sourceFileURLsPromise = (async () => {
-          const console = Common.Console.Console.instance();
+          const console = this.#console;
           const url = script.sourceURL;
           const symbolsUrl = (script.debugSymbols?.externalURL) || '';
           if (symbolsUrl) {
@@ -962,8 +961,7 @@ export class DebuggerLanguagePluginManager implements
       }
       return Array.from(scopes.values());
     } catch (error) {
-      Common.Console.Console.instance().error(
-          i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}), /* show=*/ false);
+      this.#console.error(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}), /* show=*/ false);
       return null;
     }
   }
@@ -995,7 +993,7 @@ export class DebuggerLanguagePluginManager implements
       }
       return functionInfo;
     } catch (error) {
-      Common.Console.Console.instance().warn(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}));
+      this.#console.warn(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}));
       return {frames: []};
     }
   }
@@ -1032,7 +1030,7 @@ export class DebuggerLanguagePluginManager implements
                 script.debuggerModel, script.scriptId, 0, Number(m.endOffset) + (script.codeOffset() || 0)),
           }));
     } catch (error) {
-      Common.Console.Console.instance().warn(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}));
+      this.#console.warn(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}));
       return [];
     }
   }
@@ -1069,7 +1067,7 @@ export class DebuggerLanguagePluginManager implements
                 script.debuggerModel, script.scriptId, 0, Number(m.endOffset) + (script.codeOffset() || 0)),
           }));
     } catch (error) {
-      Common.Console.Console.instance().warn(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}));
+      this.#console.warn(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}));
       return [];
     }
   }
@@ -1128,7 +1126,8 @@ class ModelData {
         this.uiSourceCodeToScripts.set(uiSourceCode, [script]);
 
         const contentProvider = new SDK.CompilerSourceMappingContentProvider.CompilerSourceMappingContentProvider(
-            url, Common.ResourceType.resourceTypes.SourceMapScript, initiator);
+            url, Common.ResourceType.resourceTypes.SourceMapScript, initiator,
+            script.target().targetManager().getPageResourceLoader());
         const mimeType = Common.ResourceType.ResourceType.mimeFromURL(url) || 'text/javascript';
         this.project.addUISourceCodeWithProvider(uiSourceCode, contentProvider, null, mimeType);
       } else {

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -2,7 +2,7 @@
 // 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 type * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -34,6 +34,7 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
   readonly pluginManager: DebuggerLanguagePluginManager;
   readonly ignoreListManager: Workspace.IgnoreListManager.IgnoreListManager;
   readonly workspace: Workspace.Workspace.WorkspaceImpl;
+  readonly #settings: Common.Settings.Settings;
 
   constructor(
       resourceMapping: ResourceMapping, targetManager: SDK.TargetManager.TargetManager,
@@ -42,6 +43,7 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
     this.resourceMapping.debuggerWorkspaceBinding = this;
     this.ignoreListManager = ignoreListManager;
     this.workspace = workspace;
+    this.#settings = targetManager.settings;
 
     this.#debuggerModelToData = new Map();
     targetManager.observeModels(SDK.DebuggerModel.DebuggerModel, this);
@@ -50,7 +52,8 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
 
     this.#liveLocationPromises = new Set();
 
-    this.pluginManager = new DebuggerLanguagePluginManager(targetManager, resourceMapping.workspace, this);
+    this.pluginManager =
+        new DebuggerLanguagePluginManager(targetManager, resourceMapping.workspace, this, targetManager.getConsole());
   }
 
   setFunctionRanges(
@@ -489,8 +492,7 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
     }
     const functionLocation = frame.functionLocation();
     if (!autoSteppingContext || debuggerPausedDetails.reason !== Protocol.Debugger.PausedEventReason.Step ||
-        !functionLocation || !frame.script.isWasm() ||
-        !Common.Settings.Settings.instance().moduleSetting('wasm-auto-stepping').get() ||
+        !functionLocation || !frame.script.isWasm() || !this.#settings.moduleSetting('wasm-auto-stepping').get() ||
         !this.pluginManager.hasPluginForScript(frame.script)) {
       return true;
     }

package/front_end/models/bindings/FileUtils.ts

@@ -170,10 +170,12 @@ export class ChunkedFileReader implements ChunkedReader {
 }
 
 export class FileOutputStream implements Common.StringOutputStream.OutputStream {
+  readonly #fileManager: Workspace.FileManager.FileManager;
   #writeCallbacks: Array<() => void>;
   #fileName!: Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString;
   #closed?: boolean;
-  constructor() {
+  constructor(fileManager: Workspace.FileManager.FileManager) {
+    this.#fileManager = fileManager;
     this.#writeCallbacks = [];
   }
 
@@ -181,11 +183,10 @@ export class FileOutputStream implements Common.StringOutputStream.OutputStream
     this.#closed = false;
     this.#writeCallbacks = [];
     this.#fileName = fileName;
-    const saveResponse = await Workspace.FileManager.FileManager.instance().save(
-        this.#fileName, TextUtils.ContentData.EMPTY_TEXT_CONTENT_DATA, /* forceSaveAs=*/ true);
+    const saveResponse = await this.#fileManager.save(this.#fileName, TextUtils.ContentData.EMPTY_TEXT_CONTENT_DATA,
+                                                      /* forceSaveAs=*/ true);
     if (saveResponse) {
-      Workspace.FileManager.FileManager.instance().addEventListener(
-          Workspace.FileManager.Events.APPENDED_TO_URL, this.onAppendDone, this);
+      this.#fileManager.addEventListener(Workspace.FileManager.Events.APPENDED_TO_URL, this.onAppendDone, this);
     }
     return Boolean(saveResponse);
   }
@@ -193,7 +194,7 @@ export class FileOutputStream implements Common.StringOutputStream.OutputStream
   write(data: string): Promise<void> {
     return new Promise(resolve => {
       this.#writeCallbacks.push(resolve);
-      Workspace.FileManager.FileManager.instance().append(this.#fileName, data);
+      this.#fileManager.append(this.#fileName, data);
     });
   }
 
@@ -202,9 +203,8 @@ export class FileOutputStream implements Common.StringOutputStream.OutputStream
     if (this.#writeCallbacks.length) {
       return;
     }
-    Workspace.FileManager.FileManager.instance().removeEventListener(
-        Workspace.FileManager.Events.APPENDED_TO_URL, this.onAppendDone, this);
-    Workspace.FileManager.FileManager.instance().close(this.#fileName);
+    this.#fileManager.removeEventListener(Workspace.FileManager.Events.APPENDED_TO_URL, this.onAppendDone, this);
+    this.#fileManager.close(this.#fileName);
   }
 
   private onAppendDone(event: Common.EventTarget.EventTargetEvent<string>): void {
@@ -221,8 +221,7 @@ export class FileOutputStream implements Common.StringOutputStream.OutputStream
     if (!this.#closed) {
       return;
     }
-    Workspace.FileManager.FileManager.instance().removeEventListener(
-        Workspace.FileManager.Events.APPENDED_TO_URL, this.onAppendDone, this);
-    Workspace.FileManager.FileManager.instance().close(this.#fileName);
+    this.#fileManager.removeEventListener(Workspace.FileManager.Events.APPENDED_TO_URL, this.onAppendDone, this);
+    this.#fileManager.close(this.#fileName);
   }
 }

package/front_end/models/bindings/NetworkProject.ts

@@ -25,6 +25,10 @@ export class NetworkProjectManager extends Common.ObjectWrapper.ObjectWrapper<Ev
 
     return Root.DevToolsContext.globalInstance().get(NetworkProjectManager);
   }
+
+  static removeInstance(): void {
+    Root.DevToolsContext.globalInstance().delete(NetworkProjectManager);
+  }
 }
 
 export const enum Events {

package/front_end/models/bindings/PresentationConsoleMessageHelper.ts

@@ -67,7 +67,8 @@ export class PresentationConsoleMessageManager {
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.ConsoleModel.ConsoleModel, SDK.ConsoleModel.Events.MessageAdded,
         event => this.consoleMessageAdded(event.data));
-    SDK.ConsoleModel.ConsoleModel.allMessagesUnordered().forEach(this.consoleMessageAdded, this);
+    SDK.ConsoleModel.ConsoleModel.allMessagesUnordered(SDK.TargetManager.TargetManager.instance())
+        .forEach(this.consoleMessageAdded, this);
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.ConsoleModel.ConsoleModel, SDK.ConsoleModel.Events.ConsoleCleared,
         () => this.#sourceFrameMessageManager.clear());

package/front_end/models/bindings/ResourceUtils.ts

@@ -39,7 +39,7 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as Workspace from '../workspace/workspace.js';
 
 export function resourceForURL(url: Platform.DevToolsPath.UrlString): SDK.Resource.Resource|null {
-  return SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(url);
+  return SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(SDK.TargetManager.TargetManager.instance(), url);
 }
 
 export function displayNameForURL(url: Platform.DevToolsPath.UrlString): string {

package/front_end/models/bindings/SASSSourceMapping.ts

@@ -55,7 +55,8 @@ export class SASSSourceMapping implements SourceMapping {
     for (const sourceURL of sourceMap.sourceURLs()) {
       let binding = bindings.get(sourceURL);
       if (!binding) {
-        binding = new Binding(project, sourceURL, header.createPageResourceLoadInitiator());
+        binding = new Binding(project, sourceURL, header.createPageResourceLoadInitiator(),
+                              header.cssModel().target().targetManager().getPageResourceLoader());
         bindings.set(sourceURL, binding);
       }
       binding.addSourceMap(sourceMap, header.frameId);
@@ -151,15 +152,17 @@ class Binding {
   readonly #project: ContentProviderBasedProject;
   readonly #url: Platform.DevToolsPath.UrlString;
   readonly #initiator: SDK.PageResourceLoader.PageResourceLoadInitiator;
+  readonly #pageResourceLoader: SDK.PageResourceLoader.PageResourceLoader;
   referringSourceMaps: SDK.SourceMap.SourceMap[];
   uiSourceCode: Workspace.UISourceCode.UISourceCode|null;
 
-  constructor(
-      project: ContentProviderBasedProject, url: Platform.DevToolsPath.UrlString,
-      initiator: SDK.PageResourceLoader.PageResourceLoadInitiator) {
+  constructor(project: ContentProviderBasedProject, url: Platform.DevToolsPath.UrlString,
+              initiator: SDK.PageResourceLoader.PageResourceLoadInitiator,
+              pageResourceLoader: SDK.PageResourceLoader.PageResourceLoader) {
     this.#project = project;
     this.#url = url;
     this.#initiator = initiator;
+    this.#pageResourceLoader = pageResourceLoader;
 
     this.referringSourceMaps = [];
     this.uiSourceCode = null;
@@ -173,7 +176,7 @@ class Binding {
     const contentProvider = embeddedContent !== null ?
         TextUtils.StaticContentProvider.StaticContentProvider.fromString(this.#url, contentType, embeddedContent) :
         new SDK.CompilerSourceMappingContentProvider.CompilerSourceMappingContentProvider(
-            this.#url, contentType, this.#initiator);
+            this.#url, contentType, this.#initiator, this.#pageResourceLoader);
     const newUISourceCode = this.#project.createUISourceCode(this.#url, contentType);
     uiSourceCodeToBinding.set(newUISourceCode, this);
     const mimeType = Common.ResourceType.ResourceType.mimeFromURL(this.#url) || contentType.canonicalMimeType();

package/front_end/models/emulation/DeviceModeModel.ts

@@ -21,62 +21,62 @@ import {
 
 const UIStrings = {
   /**
-   * @description Error message shown in the Devices settings pane when the user enters an empty
+   * @description Error message shown on the Devices settings tab when the user enters an empty
    * width for a custom device.
    */
-  widthCannotBeEmpty: 'Width cannot be empty.',
+  widthCannotBeEmpty: 'Width can’t be empty.',
   /**
-   * @description Error message shown in the Devices settings pane when the user enters an invalid
+   * @description Error message shown on the Devices settings tab when the user enters an invalid
    * width for a custom device.
    */
   widthMustBeANumber: 'Width must be a number.',
   /**
-   * @description Error message shown in the Devices settings pane when the user has entered a width
+   * @description Error message shown on the Devices settings tab when the user has entered a width
    * for a custom device that is too large.
    * @example {9999} PH1
    */
   widthMustBeLessThanOrEqualToS: 'Width must be less than or equal to {PH1}.',
   /**
-   * @description Error message shown in the Devices settings pane when the user has entered a width
+   * @description Error message shown on the Devices settings tab when the user has entered a width
    * for a custom device that is too small.
    * @example {50} PH1
    */
   widthMustBeGreaterThanOrEqualToS: 'Width must be greater than or equal to {PH1}.',
   /**
-   * @description Error message shown in the Devices settings pane when the user enters an empty
+   * @description Error message shown on the Devices settings tab when the user enters an empty
    * height for a custom device.
    */
-  heightCannotBeEmpty: 'Height cannot be empty.',
+  heightCannotBeEmpty: 'Height can’t be empty.',
   /**
-   * @description Error message shown in the Devices settings pane when the user enters an invalid
+   * @description Error message shown on the Devices settings tab when the user enters an invalid
    * height for a custom device.
    */
   heightMustBeANumber: 'Height must be a number.',
   /**
-   * @description Error message shown in the Devices settings pane when the user has entered a height
+   * @description Error message shown on the Devices settings tab when the user has entered a height
    * for a custom device that is too large.
    * @example {9999} PH1
    */
   heightMustBeLessThanOrEqualToS: 'Height must be less than or equal to {PH1}.',
   /**
-   * @description Error message shown in the Devices settings pane when the user has entered a height
+   * @description Error message shown on the Devices settings tab when the user has entered a height
    * for a custom device that is too small.
    * @example {50} PH1
    */
   heightMustBeGreaterThanOrEqualTo: 'Height must be greater than or equal to {PH1}.',
   /**
-   * @description Error message shown in the Devices settings pane when the user enters an invalid
+   * @description Error message shown on the Devices settings tab when the user enters an invalid
    * device pixel ratio for a custom device.
    */
   devicePixelRatioMustBeANumberOr: 'Device pixel ratio must be a number or blank.',
   /**
-   * @description Error message shown in the Devices settings pane when the user enters a device
+   * @description Error message shown on the Devices settings tab when the user enters a device
    * pixel ratio for a custom device that is too large.
    * @example {10} PH1
    */
   devicePixelRatioMustBeLessThanOr: 'Device pixel ratio must be less than or equal to {PH1}.',
   /**
-   * @description Error message shown in the Devices settings pane when the user enters a device
+   * @description Error message shown on the Devices settings tab when the user enters a device
    * pixel ratio for a custom device that is too small.
    * @example {0} PH1
    */
@@ -166,7 +166,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#deviceScaleFactorSetting = this.#settings.createSetting('emulation.device-scale-factor', 0);
     this.#deviceScaleFactorSetting.addChangeListener(this.deviceScaleFactorSettingChanged, this);
 
-    this.#deviceOutlineSetting = this.#settings.createSetting('emulation.show-device-outline', false);
+    this.#deviceOutlineSetting = this.#settings.moduleSetting('emulation.show-device-outline');
     this.#deviceOutlineSetting.addChangeListener(this.deviceOutlineSettingChanged, this);
 
     this.#toolbarControlsEnabledSetting = this.#settings.createSetting('emulation.toolbar-controls-enabled', true,