chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/{scripts/eslint_rules/tests/utils/RuleTester.ts → front_end/models/elements/elements.ts}

@@ -2,9 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {RuleTester} from '@typescript-eslint/rule-tester';
+import * as ElementUpdateRecord from './ElementUpdateRecord.js';
 
-// Add the mocha hooks to the rule tester.
-RuleTester.afterAll = after;
-
-export {RuleTester};
+export {
+  ElementUpdateRecord,
+};

package/front_end/models/emulation/DeviceModeModel.ts

@@ -7,7 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as UI from '../../ui/legacy/legacy.js';
+import * as Geometry from '../geometry/geometry.js';
 
 import {
   type EmulatedDevice,
@@ -90,13 +90,12 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     SDK.TargetManager.SDKModelObserver<SDK.EmulationModel.EmulationModel> {
   #screenRectInternal: Rect;
   #visiblePageRectInternal: Rect;
-  #availableSize: UI.Geometry.Size;
-  #preferredSize: UI.Geometry.Size;
+  #availableSize: Geometry.Size;
+  #preferredSize: Geometry.Size;
   #initialized: boolean;
-  #appliedDeviceSizeInternal: UI.Geometry.Size;
+  #appliedDeviceSizeInternal: Geometry.Size;
   #appliedDeviceScaleFactorInternal: number;
   #appliedUserAgentTypeInternal: UA;
-  readonly #webPlatformExperimentalFeaturesEnabledInternal: boolean;
   readonly #scaleSettingInternal: Common.Settings.Setting<number>;
   #scaleInternal: number;
   #widthSetting: Common.Settings.Setting<number>;
@@ -119,14 +118,12 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     super();
     this.#screenRectInternal = new Rect(0, 0, 1, 1);
     this.#visiblePageRectInternal = new Rect(0, 0, 1, 1);
-    this.#availableSize = new UI.Geometry.Size(1, 1);
-    this.#preferredSize = new UI.Geometry.Size(1, 1);
+    this.#availableSize = new Geometry.Size(1, 1);
+    this.#preferredSize = new Geometry.Size(1, 1);
     this.#initialized = false;
-    this.#appliedDeviceSizeInternal = new UI.Geometry.Size(1, 1);
+    this.#appliedDeviceSizeInternal = new Geometry.Size(1, 1);
     this.#appliedDeviceScaleFactorInternal = window.devicePixelRatio;
     this.#appliedUserAgentTypeInternal = UA.DESKTOP;
-    this.#webPlatformExperimentalFeaturesEnabledInternal =
-        window.visualViewport ? 'segments' in window.visualViewport : false;
 
     this.#scaleSettingInternal = Common.Settings.Settings.instance().createSetting('emulation.device-scale', 1);
     // We've used to allow zero before.
@@ -273,7 +270,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.#scaleSettingInternal;
   }
 
-  setAvailableSize(availableSize: UI.Geometry.Size, preferredSize: UI.Geometry.Size): void {
+  setAvailableSize(availableSize: Geometry.Size, preferredSize: Geometry.Size): void {
     this.#availableSize = availableSize;
     this.#preferredSize = preferredSize;
     this.#initialized = true;
@@ -379,7 +376,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.#fitScaleInternal;
   }
 
-  appliedDeviceSize(): UI.Geometry.Size {
+  appliedDeviceSize(): Geometry.Size {
     return this.#appliedDeviceSizeInternal;
   }
 
@@ -563,9 +560,8 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         this.#appliedUserAgentTypeInternal = this.#deviceInternal.touch() ? UA.DESKTOP_TOUCH : UA.DESKTOP;
       }
       this.applyDeviceMetrics(
-          new UI.Geometry.Size(orientation.width, orientation.height), insets, outline,
-          this.#scaleSettingInternal.get(), this.#deviceInternal.deviceScaleFactor, mobile,
-          this.getScreenOrientationType(), resetPageScaleFactor, this.#webPlatformExperimentalFeaturesEnabledInternal);
+          new Geometry.Size(orientation.width, orientation.height), insets, outline, this.#scaleSettingInternal.get(),
+          this.#deviceInternal.deviceScaleFactor, mobile, this.getScreenOrientationType(), resetPageScaleFactor);
       this.applyUserAgent(this.#deviceInternal.userAgent, this.#deviceInternal.userAgentMetadata);
       this.applyTouch(this.#deviceInternal.touch(), mobile);
     } else if (this.#typeInternal === Type.None) {
@@ -589,7 +585,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       this.#fitScaleInternal = this.calculateFitScale(this.#widthSetting.get(), this.#heightSetting.get());
       this.#appliedUserAgentTypeInternal = this.#uaSettingInternal.get();
       this.applyDeviceMetrics(
-          new UI.Geometry.Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), new Insets(0, 0, 0, 0),
+          new Geometry.Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), new Insets(0, 0, 0, 0),
           this.#scaleSettingInternal.get(), this.#deviceScaleFactorSettingInternal.get() || defaultDeviceScaleFactor,
           mobile,
           screenHeight >= screenWidth ? Protocol.Emulation.ScreenOrientationType.PortraitPrimary :
@@ -645,9 +641,9 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private applyDeviceMetrics(
-      screenSize: UI.Geometry.Size, insets: Insets, outline: Insets, scale: number, deviceScaleFactor: number,
-      mobile: boolean, screenOrientation: Protocol.Emulation.ScreenOrientationType|null, resetPageScaleFactor: boolean,
-      forceMetricsOverride: boolean|undefined = false): void {
+      screenSize: Geometry.Size, insets: Insets, outline: Insets, scale: number, deviceScaleFactor: number,
+      mobile: boolean, screenOrientation: Protocol.Emulation.ScreenOrientationType|null,
+      resetPageScaleFactor: boolean): void {
     screenSize.width = Math.max(1, Math.floor(screenSize.width));
     screenSize.height = Math.max(1, Math.floor(screenSize.height));
 
@@ -673,7 +669,8 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         Math.min(pageWidth * scale, this.#availableSize.width - this.#screenRectInternal.left - positionX * scale),
         Math.min(pageHeight * scale, this.#availableSize.height - this.#screenRectInternal.top - positionY * scale));
     this.#scaleInternal = scale;
-    if (!forceMetricsOverride) {
+    const displayFeature = this.getDisplayFeature();
+    if (!displayFeature) {
       // When sending displayFeature, we cannot use the optimization below due to backend restrictions.
       if (scale === 1 && this.#availableSize.width >= screenSize.width &&
           this.#availableSize.height >= screenSize.height) {
@@ -697,8 +694,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (resetPageScaleFactor) {
       void this.#emulationModel.resetPageScaleFactor();
     }
-    if (pageWidth || pageHeight || mobile || deviceScaleFactor || scale !== 1 || screenOrientation ||
-        forceMetricsOverride) {
+    if (pageWidth || pageHeight || mobile || deviceScaleFactor || scale !== 1 || screenOrientation || displayFeature) {
       const metrics: Protocol.Emulation.SetDeviceMetricsOverrideRequest = {
         width: pageWidth,
         height: pageHeight,
@@ -714,7 +710,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         devicePosture: undefined,
         screenOrientation: undefined,
       };
-      const displayFeature = this.getDisplayFeature();
       if (displayFeature) {
         metrics.displayFeature = displayFeature;
         metrics.devicePosture = {type: Protocol.Emulation.DevicePostureType.Folded};
@@ -737,14 +732,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
   }
 
-  webPlatformExperimentalFeaturesEnabled(): boolean {
-    return this.#webPlatformExperimentalFeaturesEnabledInternal;
-  }
-
-  shouldReportDisplayFeature(): boolean {
-    return this.#webPlatformExperimentalFeaturesEnabledInternal;
-  }
-
   async captureScreenshot(fullSize: boolean, clip?: Protocol.Page.Viewport): Promise<string|null> {
     const screenCaptureModel =
         this.#emulationModel ? this.#emulationModel.target().model(SDK.ScreenCaptureModel.ScreenCaptureModel) : null;
@@ -833,10 +820,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private getDisplayFeature(): Protocol.Emulation.DisplayFeature|null {
-    if (!this.shouldReportDisplayFeature()) {
-      return null;
-    }
-
     if (!this.#deviceInternal || !this.#modeInternal ||
         (this.#modeInternal.orientation !== VerticalSpanned && this.#modeInternal.orientation !== HorizontalSpanned)) {
       return null;

package/front_end/models/emulation/EmulatedDevices.ts

@@ -14,15 +14,15 @@ import {Insets, MaxDeviceSize, MinDeviceSize} from './DeviceModeModel.js';
 
 const UIStrings = {
   /**
-   *@description Title of the Laptop with touch device
+   * @description Title of the Laptop with touch device
    */
   laptopWithTouch: 'Laptop with touch',
   /**
-   *@description Title of the Laptop with HiDPI screen device
+   * @description Title of the Laptop with HiDPI screen device
    */
   laptopWithHiDPIScreen: 'Laptop with HiDPI screen',
   /**
-   *@description Title of the Laptop with MDPI screen device
+   * @description Title of the Laptop with MDPI screen device
    */
   laptopWithMDPIScreen: 'Laptop with MDPI screen',
 } as const;
@@ -682,7 +682,7 @@ const emulatedDevices = [
     },
     'capabilities': ['touch', 'mobile'],
     'user-agent':
-        'Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1',
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Mobile/15E148 Safari/604.1',
     'type': 'phone',
   },
   {
@@ -702,7 +702,7 @@ const emulatedDevices = [
     },
     'capabilities': ['touch', 'mobile'],
     'user-agent':
-        'Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1',
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Mobile/15E148 Safari/604.1',
     'type': 'phone',
   },
   {
@@ -722,7 +722,7 @@ const emulatedDevices = [
     },
     'capabilities': ['touch', 'mobile'],
     'user-agent':
-        'Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1',
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Mobile/15E148 Safari/604.1',
     'type': 'phone',
   },
   {
@@ -742,7 +742,7 @@ const emulatedDevices = [
     },
     'capabilities': ['touch', 'mobile'],
     'user-agent':
-        'Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1',
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Mobile/15E148 Safari/604.1',
     'type': 'phone',
   },
   {
@@ -850,7 +850,7 @@ const emulatedDevices = [
     },
     'capabilities': ['touch', 'mobile'],
     'user-agent':
-        'Mozilla/5.0 (iPad; CPU OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1',
+        'Mozilla/5.0 (iPad; CPU OS 18_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Mobile/15E148 Safari/604.1',
     'type': 'tablet',
   },
   {
@@ -868,9 +868,9 @@ const emulatedDevices = [
         'height': 1180,
       },
     },
-    'capabilities': ['touch'],
+    'capabilities': ['touch', 'mobile'],
     'user-agent':
-        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15',
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Safari/605.1.15',
     'type': 'tablet',
   },
   {
@@ -888,9 +888,9 @@ const emulatedDevices = [
         'height': 1366,
       },
     },
-    'capabilities': ['touch'],
+    'capabilities': ['touch', 'mobile'],
     'user-agent':
-        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15',
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Safari/605.1.15',
     'type': 'tablet',
   },
   {

package/front_end/models/extensions/ExtensionAPI.ts

@@ -230,6 +230,7 @@ export namespace PrivateAPI {
   interface SetOpenResourceHandlerRequest {
     command: Commands.SetOpenResourceHandler;
     handlerPresent: boolean;
+    urlScheme?: string;
   }
   interface SetThemeChangeHandlerRequest {
     command: Commands.SetThemeChangeHandler;
@@ -473,7 +474,8 @@ namespace APIImpl {
 
   export interface Panels extends PublicAPI.Chrome.DevTools.Panels {
     get SearchAction(): Record<string, string>;
-    setOpenResourceHandler(callback?: (resource: PublicAPI.Chrome.DevTools.Resource, lineNumber: number) => unknown):
+    setOpenResourceHandler(
+        callback?: (resource: PublicAPI.Chrome.DevTools.Resource, lineNumber: number, columnNumber: number) => unknown):
         void;
     setThemeChangeHandler(callback?: (themeName: string) => unknown): void;
   }
@@ -693,15 +695,17 @@ self.injectedExtensionAPI = function(
     },
 
     setOpenResourceHandler: function(
-        callback: (resource: PublicAPI.Chrome.DevTools.Resource, lineNumber: number) => unknown): void {
+        callback: (resource: PublicAPI.Chrome.DevTools.Resource, lineNumber: number, columnNumber: number) => unknown,
+        urlScheme?: string): void {
       const hadHandler = extensionServer.hasHandler(PrivateAPI.Events.OpenResource);
 
       function callbackWrapper(message: unknown): void {
         // Allow the panel to show itself when handling the event.
         userAction = true;
         try {
-          const {resource, lineNumber} = message as {resource: APIImpl.ResourceData, lineNumber: number};
-          callback.call(null, new (Constructor(Resource))(resource), lineNumber);
+          const {resource, lineNumber, columnNumber} =
+              message as {resource: APIImpl.ResourceData, lineNumber: number, columnNumber: number};
+          callback.call(null, new (Constructor(Resource))(resource), lineNumber, columnNumber);
         } finally {
           userAction = false;
         }
@@ -716,7 +720,7 @@ self.injectedExtensionAPI = function(
       // Only send command if we either removed an existing handler or added handler and had none before.
       if (hadHandler === !callback) {
         extensionServer.sendRequest(
-            {command: PrivateAPI.Commands.SetOpenResourceHandler, handlerPresent: Boolean(callback)});
+            {command: PrivateAPI.Commands.SetOpenResourceHandler, handlerPresent: Boolean(callback), urlScheme});
       }
     },
 

package/front_end/models/extensions/ExtensionPanel.ts

@@ -29,11 +29,15 @@
  */
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import '../../ui/legacy/legacy.js';
 
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as _ProtocolClient from '../../core/protocol_client/protocol_client.js';  // eslint-disable-line @typescript-eslint/no-unused-vars
 import * as SDK from '../../core/sdk/sdk.js';
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ExtensionAPI from './ExtensionAPI.js';
@@ -132,7 +136,10 @@ export class ExtensionSidebarPane extends UI.View.SimpleView {
   private extensionView?: ExtensionView;
   private objectPropertiesView?: ExtensionNotifierView;
   constructor(server: ExtensionServer, panelName: string, title: Platform.UIString.LocalizedString, id: string) {
-    super(title);
+    // For backwards compatibility we use the Kebab case version of the `title`
+    // as `viewId` for sidebar panes created by extensions.
+    const viewId = Platform.StringUtilities.toKebabCase(title);
+    super({title, viewId});
     this.element.classList.add('fill');
     this.panelNameInternal = panelName;
     this.server = server;
@@ -215,16 +222,12 @@ export class ExtensionSidebarPane extends UI.View.SimpleView {
       return;
     }
     objectPropertiesView.element.removeChildren();
-    void UI.UIUtils.Renderer.render(object, {title, editable: false}).then(result => {
+    void UI.UIUtils.Renderer.render(object, {title, editable: false, expand: true}).then(result => {
       if (!result) {
         callback();
         return;
       }
-      const firstChild = result.tree?.firstChild();
-      if (firstChild) {
-        firstChild.expand();
-      }
-      objectPropertiesView.element.appendChild(result.node);
+      objectPropertiesView.element.appendChild(result.element);
       callback();
     });
   }

package/front_end/models/extensions/ExtensionServer.ts

@@ -42,6 +42,8 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import * as Bindings from '../bindings/bindings.js';
@@ -106,6 +108,7 @@ export class HostsPolicy {
 }
 
 class RegisteredExtension {
+  openResourceScheme: null|string = null;
   constructor(readonly name: string, readonly hostsPolicy: HostsPolicy, readonly allowFileAccess: boolean) {
   }
 
@@ -118,6 +121,10 @@ class RegisteredExtension {
       return false;
     }
 
+    if (this.openResourceScheme && inspectedURL.startsWith(this.openResourceScheme)) {
+      return true;
+    }
+
     if (!ExtensionServer.canInspectURL(inspectedURL)) {
       return false;
     }
@@ -458,14 +465,11 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (!scriptUrl || !ranges?.length) {
       return this.status.E_BADARG('command', 'expected valid scriptUrl and non-empty NamedFunctionRanges');
     }
-    if (!this.extensionAllowedOnURL(scriptUrl as Platform.DevToolsPath.UrlString, port)) {
-      return this.status.E_FAILED('Permission denied');
-    }
-    const uiSourceCode =
-        Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(scriptUrl as Platform.DevToolsPath.UrlString);
-    if (!uiSourceCode) {
-      return this.status.E_NOTFOUND(scriptUrl);
+    const resource = this.lookupAllowedUISourceCode(scriptUrl as Platform.DevToolsPath.UrlString, port);
+    if ('error' in resource) {
+      return resource.error;
     }
+    const {uiSourceCode} = resource;
     if (!uiSourceCode.contentType().isScript() || !uiSourceCode.contentType().isFromSourceMap()) {
       return this.status.E_BADARG('command', `expected a source map script resource for url: ${scriptUrl}`);
     }
@@ -817,11 +821,23 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (!extension) {
       throw new Error('Received a message from an unregistered extension');
     }
+    if (message.urlScheme) {
+      extension.openResourceScheme = message.urlScheme;
+    }
+    const extensionOrigin = this.getExtensionOrigin(port);
     const {name} = extension;
+    const registration = {
+      title: name,
+      origin: extensionOrigin,
+      scheme: message.urlScheme,
+      handler: this.handleOpenURL.bind(this, port),
+      shouldHandleOpenResource: (url: Platform.DevToolsPath.UrlString, schemes: Set<string>) =>
+          Components.Linkifier.Linkifier.shouldHandleOpenResource(extension.openResourceScheme, url, schemes),
+    };
     if (message.handlerPresent) {
-      Components.Linkifier.Linkifier.registerLinkHandler(name, this.handleOpenURL.bind(this, port));
+      Components.Linkifier.Linkifier.registerLinkHandler(registration);
     } else {
-      Components.Linkifier.Linkifier.unregisterLinkHandler(name);
+      Components.Linkifier.Linkifier.unregisterLinkHandler(registration);
     }
     return undefined;
   }
@@ -846,10 +862,26 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private handleOpenURL(
-      port: MessagePort, contentProvider: TextUtils.ContentProvider.ContentProvider, lineNumber: number): void {
-    if (this.extensionAllowedOnURL(contentProvider.contentURL(), port)) {
-      port.postMessage(
-          {command: 'open-resource', resource: this.makeResource(contentProvider), lineNumber: lineNumber + 1});
+      port: MessagePort, contentProviderOrUrl: TextUtils.ContentProvider.ContentProvider|string, lineNumber?: number,
+      columnNumber?: number): void {
+    let resource: {url: string, type: string};
+    let isAllowed: boolean;
+    if (typeof contentProviderOrUrl !== 'string') {
+      resource = this.makeResource(contentProviderOrUrl);
+      isAllowed = this.extensionAllowedOnContentProvider(contentProviderOrUrl, port);
+    } else {
+      const url = contentProviderOrUrl as Platform.DevToolsPath.UrlString;
+      resource = {url, type: Common.ResourceType.resourceTypes.Other.name()};
+      isAllowed = this.extensionAllowedOnURL(url, port);
+    }
+
+    if (isAllowed) {
+      port.postMessage({
+        command: 'open-resource',
+        resource,
+        lineNumber: lineNumber ? lineNumber + 1 : undefined,
+        columnNumber: columnNumber ? columnNumber + 1 : undefined,
+      });
     }
   }
 
@@ -859,6 +891,58 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return Boolean(extension?.isAllowedOnTarget(url));
   }
 
+  /**
+   * Slightly more permissive as {@link extensionAllowedOnURL}: This method also permits
+   * UISourceCodes that originate from a {@link SDK.Script.Script} with a sourceURL magic comment as
+   * long as the corresponding target is permitted.
+   */
+  private extensionAllowedOnContentProvider(
+      contentProvider: TextUtils.ContentProvider.ContentProvider, port: MessagePort): boolean {
+    if (!(contentProvider instanceof Workspace.UISourceCode.UISourceCode)) {
+      return this.extensionAllowedOnURL(contentProvider.contentURL(), port);
+    }
+
+    if (contentProvider.contentType() !== Common.ResourceType.resourceTypes.Script) {
+      // We only check sourceURL magic comments for scripts (excluding ones coming from source maps).
+      return this.extensionAllowedOnURL(contentProvider.contentURL(), port);
+    }
+
+    const scripts =
+        Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().scriptsForUISourceCode(contentProvider);
+    if (scripts.length === 0) {
+      return this.extensionAllowedOnURL(contentProvider.contentURL(), port);
+    }
+
+    return scripts.every(script => {
+      if (script.hasSourceURL) {
+        return this.extensionAllowedOnTarget(script.target(), port);
+      }
+      return this.extensionAllowedOnURL(script.contentURL(), port);
+    });
+  }
+
+  /**
+   * This method prefers returning 'Permission denied' errors if restricted resources are not found,
+   * rather then NOTFOUND. This prevents extensions from being able to fish for restricted resources.
+   */
+  private lookupAllowedUISourceCode(url: Platform.DevToolsPath.UrlString, port: MessagePort):
+      {uiSourceCode: Workspace.UISourceCode.UISourceCode}|{
+    error: Record,
+  }
+  {
+    const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url);
+    if (!uiSourceCode && !this.extensionAllowedOnURL(url, port)) {
+      return {error: this.status.E_FAILED('Permission denied')};
+    }
+    if (!uiSourceCode) {
+      return {error: this.status.E_NOTFOUND(url)};
+    }
+    if (!this.extensionAllowedOnContentProvider(uiSourceCode, port)) {
+      return {error: this.status.E_FAILED('Permission denied')};
+    }
+    return {uiSourceCode};
+  }
+
   private extensionAllowedOnTarget(target: SDK.Target.Target, port: MessagePort): boolean {
     return this.extensionAllowedOnURL(target.inspectedURL(), port);
   }
@@ -948,7 +1032,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     function pushResourceData(
         this: ExtensionServer, contentProvider: TextUtils.ContentProvider.ContentProvider): boolean {
       if (!resources.has(contentProvider.contentURL()) &&
-          this.extensionAllowedOnURL(contentProvider.contentURL(), port)) {
+          this.extensionAllowedOnContentProvider(contentProvider, port)) {
         resources.set(contentProvider.contentURL(), this.makeResource(contentProvider));
       }
       return false;
@@ -971,7 +1055,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private async getResourceContent(
       contentProvider: TextUtils.ContentProvider.ContentProvider, message: PrivateAPI.ExtensionServerRequestMessage,
       port: MessagePort): Promise<void> {
-    if (!this.extensionAllowedOnURL(contentProvider.contentURL(), port)) {
+    if (!this.extensionAllowedOnContentProvider(contentProvider, port)) {
       this.dispatchCallback(message.requestId, port, this.status.E_FAILED('Permission denied'));
       return undefined;
     }
@@ -1021,20 +1105,16 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       return this.status.E_FAILED('Expected a source map URL but got null');
     }
 
-    const url = message.contentUrl as Platform.DevToolsPath.UrlString;
-    if (!this.extensionAllowedOnURL(url, port)) {
-      return this.status.E_FAILED('Permission denied');
-    }
-    const contentProvider = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url);
-    if (!contentProvider) {
-      return this.status.E_NOTFOUND(url);
+    const resource = this.lookupAllowedUISourceCode(message.contentUrl as Platform.DevToolsPath.UrlString, port);
+    if ('error' in resource) {
+      return resource.error;
     }
 
     const debuggerBindingsInstance = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
-    const scriptFiles = debuggerBindingsInstance.scriptsForUISourceCode(contentProvider);
+    const scriptFiles = debuggerBindingsInstance.scriptsForUISourceCode(resource.uiSourceCode);
     if (scriptFiles.length > 0) {
       for (const script of scriptFiles) {
-        const resourceFile = debuggerBindingsInstance.scriptFile(contentProvider, script.debuggerModel);
+        const resourceFile = debuggerBindingsInstance.scriptFile(resource.uiSourceCode, script.debuggerModel);
         resourceFile?.addSourceMapURL(message.sourceMapURL as Platform.DevToolsPath.UrlString);
       }
     }
@@ -1052,13 +1132,13 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       const response = error ? this.status.E_FAILED(error) : this.status.OK();
       this.dispatchCallback(requestId, port, response);
     }
-    if (!this.extensionAllowedOnURL(url as Platform.DevToolsPath.UrlString, port)) {
-      return this.status.E_FAILED('Permission denied');
-    }
 
-    const uiSourceCode =
-        Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url as Platform.DevToolsPath.UrlString);
-    if (!uiSourceCode?.contentType().isDocumentOrScriptOrStyleSheet()) {
+    const resource = this.lookupAllowedUISourceCode(url as Platform.DevToolsPath.UrlString, port);
+    if ('error' in resource) {
+      return resource.error;
+    }
+    const {uiSourceCode} = resource;
+    if (!uiSourceCode.contentType().isDocumentOrScriptOrStyleSheet()) {
       const resource = SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(url as Platform.DevToolsPath.UrlString);
       if (!resource) {
         return this.status.E_NOTFOUND(url);
@@ -1545,7 +1625,12 @@ class ExtensionServerPanelView extends UI.View.SimpleView {
   private readonly panel: UI.Panel.Panel;
 
   constructor(name: string, title: Platform.UIString.LocalizedString, panel: UI.Panel.Panel) {
-    super(title);
+    // The `viewId` here is to satisfy the `SimpleView` constructor needs, but isn't actually
+    // used anywhere, since we override the `viewId()` method below.  Ideally we'd pass the
+    // `name` as `viewId` to the constructor, but that doesn't work, since the `name` is not
+    // necessarily in Kebab case.
+    const viewId = Platform.StringUtilities.toKebabCase(title);
+    super({title, viewId});
     this.name = name;
     this.panel = panel;
   }

package/front_end/models/extensions/ExtensionView.ts

@@ -28,7 +28,11 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as UI from '../../ui/legacy/legacy.js';
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as Lit from '../../ui/lit/lit.js';
 
 import type {ExtensionServer} from './ExtensionServer.js';
@@ -51,7 +55,7 @@ const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement)
     ${ref(element => {output.iframe = element as HTMLIFrameElement; })}
     src=${input.src}
     class=${input.className}
-    @load=${input.onLoad}></iframe>`, target, {host: input});
+    @load=${input.onLoad}></iframe>`, target);
   // clang-format on
 };