chrome-devtools-frontend 1.0.1674545 → 1.0.1675430

package/front_end/models/emulation/DeviceModeModel.ts

@@ -124,21 +124,23 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   #touchMobile: boolean;
   #emulationModel: SDK.EmulationModel.EmulationModel|null;
   #onModelAvailable: (() => void)|null;
-  #outlineRect?: Rect;
   #screenOrientationLocked: boolean;
   readonly #targetManager: SDK.TargetManager.TargetManager;
   readonly #settings: Common.Settings.Settings;
   readonly #multitargetNetworkManager: SDK.NetworkManager.MultitargetNetworkManager;
+  readonly #fileManager: Workspace.FileManager.FileManager;
 
   constructor(
       targetManager: SDK.TargetManager.TargetManager,
       settings: Common.Settings.Settings,
       multitargetNetworkManager: SDK.NetworkManager.MultitargetNetworkManager,
+      fileManager: Workspace.FileManager.FileManager,
   ) {
     super();
     this.#targetManager = targetManager;
     this.#settings = settings;
     this.#multitargetNetworkManager = multitargetNetworkManager;
+    this.#fileManager = fileManager;
     this.#screenRect = new Rect(0, 0, 1, 1);
     this.#visiblePageRect = new Rect(0, 0, 1, 1);
     this.#availableSize = new Geometry.Size(1, 1);
@@ -207,6 +209,8 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
               Common.Settings.Settings.instance(),
               // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
               SDK.NetworkManager.MultitargetNetworkManager.instance(),
+              // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+              Workspace.FileManager.FileManager.instance(),
               ));
     }
 
@@ -313,8 +317,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   #updateFitScale(): void {
     if (this.#type === Type.Device && this.#device && this.#mode) {
       const orientation = this.#device.orientationByName(this.#mode.orientation);
-      this.#scaleSetting.set(
-          this.calculateFitScale(orientation.width, orientation.height, this.currentOutline(), this.currentInsets()));
+      this.#scaleSetting.set(this.calculateFitScale(orientation.width, orientation.height, this.currentInsets()));
     }
   }
 
@@ -401,18 +404,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.#type;
   }
 
-  screenImage(): string {
-    return (this.#device && this.#mode) ? this.#device.modeImage(this.#mode) : '';
-  }
-
-  canShowDeviceFrame(): boolean {
-    return Boolean(this.#device && this.#mode && this.#device.outlineImage(this.#mode));
-  }
-
-  outlineRect(): Rect|null {
-    return this.#outlineRect || null;
-  }
-
   screenRect(): Rect {
     return this.#screenRect;
   }
@@ -604,10 +595,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return Math.floor(this.#preferredSize.height / (this.#scaleSetting.get() || 1));
   }
 
-  private currentOutline(): Insets {
-    return new Insets(0, 0, 0, 0);
-  }
-
   private currentInsets(): Insets {
     if (this.#type !== Type.Device || !this.#mode) {
       return new Insets(0, 0, 0, 0);
@@ -660,25 +647,22 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
     if (this.#type === Type.Device && this.#device && this.#mode) {
       const orientation = this.#device.orientationByName(this.#mode.orientation);
-      const outline = this.currentOutline();
       const insets = this.currentInsets();
-      this.#fitScale = this.calculateFitScale(orientation.width, orientation.height, outline, insets);
+      this.#fitScale = this.calculateFitScale(orientation.width, orientation.height, insets);
       if (mobile) {
         this.#appliedUserAgentType = this.#device.touch() ? UA.MOBILE : UA.MOBILE_NO_TOUCH;
       } else {
         this.#appliedUserAgentType = this.#device.touch() ? UA.DESKTOP_TOUCH : UA.DESKTOP;
       }
-      this.applyDeviceMetrics(
-          new Geometry.Size(orientation.width, orientation.height), insets, outline, this.#scaleSetting.get(),
-          this.#device.deviceScaleFactor, mobile, this.getScreenOrientationType(), resetPageScaleFactor);
+      this.applyDeviceMetrics(new Geometry.Size(orientation.width, orientation.height), insets,
+                              this.#scaleSetting.get(), this.#device.deviceScaleFactor, mobile,
+                              this.getScreenOrientationType(), resetPageScaleFactor);
       this.applyUserAgent(this.#device.userAgent, this.#device.userAgentMetadata);
       this.applyTouch(this.#device.touch(), mobile);
     } else if (this.#type === Type.None) {
       this.#fitScale = this.calculateFitScale(this.#availableSize.width, this.#availableSize.height);
       this.#appliedUserAgentType = UA.DESKTOP;
-      this.applyDeviceMetrics(
-          this.#availableSize, new Insets(0, 0, 0, 0), new Insets(0, 0, 0, 0), 1, 0, mobile, null,
-          resetPageScaleFactor);
+      this.applyDeviceMetrics(this.#availableSize, new Insets(0, 0, 0, 0), 1, 0, mobile, null, resetPageScaleFactor);
       this.applyUserAgent('', null);
       this.applyTouch(false, false);
     } else if (this.#type === Type.Responsive) {
@@ -693,12 +677,12 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       const defaultDeviceScaleFactor = mobile ? defaultMobileScaleFactor : 0;
       this.#fitScale = this.calculateFitScale(this.#widthSetting.get(), this.#heightSetting.get());
       this.#appliedUserAgentType = this.#uaSetting.get();
-      this.applyDeviceMetrics(
-          new Geometry.Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), new Insets(0, 0, 0, 0),
-          this.#scaleSetting.get(), this.#deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile,
-          screenHeight >= screenWidth ? Protocol.Emulation.ScreenOrientationType.PortraitPrimary :
-                                        Protocol.Emulation.ScreenOrientationType.LandscapePrimary,
-          resetPageScaleFactor);
+      this.applyDeviceMetrics(new Geometry.Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0),
+                              this.#scaleSetting.get(),
+                              this.#deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile,
+                              screenHeight >= screenWidth ? Protocol.Emulation.ScreenOrientationType.PortraitPrimary :
+                                                            Protocol.Emulation.ScreenOrientationType.LandscapePrimary,
+                              resetPageScaleFactor);
       this.applyUserAgent(
           mobile ? DeviceModeModel.defaultMobileUserAgent() : '',
           mobile ? DeviceModeModel.defaultMobileUserAgentMetadata() : null);
@@ -714,14 +698,11 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.dispatchEventToListeners(Events.UPDATED);
   }
 
-  private calculateFitScale(screenWidth: number, screenHeight: number, outline?: Insets, insets?: Insets): number {
-    const outlineWidth = outline ? outline.left + outline.right : 0;
-    const outlineHeight = outline ? outline.top + outline.bottom : 0;
+  private calculateFitScale(screenWidth: number, screenHeight: number, insets?: Insets): number {
     const insetsWidth = insets ? insets.left + insets.right : 0;
     const insetsHeight = insets ? insets.top + insets.bottom : 0;
-    let scale = Math.min(
-        screenWidth ? this.#preferredSize.width / (screenWidth + outlineWidth) : 1,
-        screenHeight ? this.#preferredSize.height / (screenHeight + outlineHeight) : 1);
+    let scale = Math.min(screenWidth ? this.#preferredSize.width / screenWidth : 1,
+                         screenHeight ? this.#preferredSize.height / screenHeight : 1);
     scale = Math.min(Math.floor(scale * 100), 100);
 
     let sharpScale = scale;
@@ -754,10 +735,9 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#multitargetNetworkManager.setUserAgentOverride(userAgent, userAgent ? userAgentMetadata : null);
   }
 
-  private applyDeviceMetrics(
-      screenSize: Geometry.Size, insets: Insets, outline: Insets, scale: number, deviceScaleFactor: number,
-      mobile: boolean, screenOrientation: Protocol.Emulation.ScreenOrientationType|null,
-      resetPageScaleFactor: boolean): void {
+  private applyDeviceMetrics(screenSize: Geometry.Size, insets: 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));
 
@@ -771,12 +751,8 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     this.#appliedDeviceSize = screenSize;
     this.#appliedDeviceScaleFactor = deviceScaleFactor || window.devicePixelRatio;
-    this.#screenRect = new Rect(
-        Math.max(0, (this.#availableSize.width - screenSize.width * scale) / 2), outline.top * scale,
-        screenSize.width * scale, screenSize.height * scale);
-    this.#outlineRect = new Rect(
-        this.#screenRect.left - outline.left * scale, 0, (outline.left + screenSize.width + outline.right) * scale,
-        (outline.top + screenSize.height + outline.bottom) * scale);
+    this.#screenRect = new Rect(Math.max(0, (this.#availableSize.width - screenSize.width * scale) / 2), 0,
+                                screenSize.width * scale, screenSize.height * scale);
     this.#visiblePageRect = new Rect(
         positionX * scale, positionY * scale,
         Math.min(pageWidth * scale, this.#availableSize.width - this.#screenRect.left - positionX * scale),
@@ -898,29 +874,21 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     pageImage.src = 'data:image/png;base64,' + screenshot;
     pageImage.onload = async () => {
       const scale = pageImage.naturalWidth / this.screenRect().width;
-      const outlineRectFromModel = this.outlineRect();
-      if (!outlineRectFromModel) {
-        throw new Error('Unable to take screenshot: no outlineRect available.');
-      }
-      const outlineRect = outlineRectFromModel.scale(scale);
       const screenRect = this.screenRect().scale(scale);
       const visiblePageRect = this.visiblePageRect().scale(scale);
-      const contentLeft = screenRect.left + visiblePageRect.left - outlineRect.left;
-      const contentTop = screenRect.top + visiblePageRect.top - outlineRect.top;
+      const contentLeft = visiblePageRect.left;
+      const contentTop = visiblePageRect.top;
 
-      const canvas = new OffscreenCanvas(Math.floor(outlineRect.width),
+      const canvas = new OffscreenCanvas(Math.floor(screenRect.width),
                                          // Cap the height to not hit the GPU limit.
                                          // https://crbug.com/1260828
-                                         Math.min((1 << 14), Math.floor(outlineRect.height)));
+                                         Math.min((1 << 14), Math.floor(screenRect.height)));
       const ctx = canvas.getContext('2d', {willReadFrequently: true});
       if (!ctx) {
         throw new Error('Could not get 2d context from canvas.');
       }
       ctx.imageSmoothingEnabled = false;
 
-      if (this.screenImage()) {
-        await this.paintImage(ctx, this.screenImage(), screenRect.relativeTo(outlineRect));
-      }
       ctx.drawImage(pageImage, Math.floor(contentLeft), Math.floor(contentTop));
       void this.saveScreenshot(canvas);
     };
@@ -976,17 +944,41 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   private async saveScreenshot(canvas: OffscreenCanvas): Promise<void> {
     const url = this.inspectedURL();
-    let fileName = '';
+    let baseName = '';
     if (url) {
-      const withoutFragment = Platform.StringUtilities.removeURLFragment(url);
-      fileName = Platform.StringUtilities.trimURL(withoutFragment);
+      const parsedURL = Common.ParsedURL.ParsedURL.fromString(url);
+      if (parsedURL) {
+        const host = parsedURL.host;
+        const path = parsedURL.path.replace(/^\/+/, '').replace(/\/+$/, '');
+        baseName = host;
+        if (path) {
+          baseName += '-' + path.replaceAll('/', '-');
+        }
+        baseName = baseName.replace(/[^a-z0-9._-]/gi, '_');
+      }
     }
 
+    if (!baseName) {
+      baseName = 'screenshot';
+    }
+
+    let suffix = '';
     const device = this.device();
     if (device && this.type() === Type.Device) {
-      fileName += `(${device.title})`;
+      suffix += `(${device.title})`;
+    }
+    suffix += '.png';
+
+    // The Windows save dialog / Chrome wrapper limits the suggested filename
+    // to 63 characters (due to a 64-byte null-terminated buffer).
+    // Capping the total filename length at 63 avoids truncation of the extension.
+    const maxBaseNameLength = Math.max(0, 63 - suffix.length);
+    baseName = Platform.StringUtilities.truncateToCodeUnitLength(baseName, maxBaseNameLength);
+
+    let fileName = baseName + suffix;
+    if (fileName.length > 63) {
+      fileName = Platform.StringUtilities.truncateToCodeUnitLength(fileName, 59) + '.png';
     }
-    fileName += '.png';
     const blob = await canvas.convertToBlob({type: 'image/png'});
     const dataUrl = await new Promise<string>((resolve, reject) => {
       const reader = new FileReader();
@@ -996,11 +988,8 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     });
     const base64 = dataUrl.slice(dataUrl.indexOf(',') + 1);
     const contentData = new TextUtils.ContentData.ContentData(base64, /* isBase64=*/ true, 'image/png');
-    // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
-    await Workspace.FileManager.FileManager.instance().save(fileName as Platform.DevToolsPath.RawPathString,
-                                                            contentData, /* forceSaveAs=*/ true);
-    // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
-    Workspace.FileManager.FileManager.instance().close(fileName as Platform.DevToolsPath.RawPathString);
+    await this.#fileManager.save(fileName as Platform.DevToolsPath.RawPathString, contentData, /* forceSaveAs=*/ true);
+    this.#fileManager.close(fileName as Platform.DevToolsPath.RawPathString);
   }
 
   private applyTouch(touchEnabled: boolean, mobile: boolean): void {

package/front_end/models/emulation/EmulatedDevices.ts

@@ -48,12 +48,6 @@ const str_ = i18n.i18n.registerUIStrings('models/emulation/EmulatedDevices.ts',
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export function computeRelativeImageURL(cssURLValue: string): string {
-  return cssURLValue.replace(/@url\(([^\)]*?)\)/g, (_match: string, url: string) => {
-    return new URL(`../../emulated_devices/${url}`, import.meta.url).toString();
-  });
-}
-
 export class EmulatedDevice {
   title: string;
   type: Type;
@@ -75,8 +69,8 @@ export class EmulatedDevice {
   constructor() {
     this.title = '';
     this.type = Type.Unknown;
-    this.vertical = {width: 0, height: 0, outlineInsets: null, outlineImage: null, hinge: null};
-    this.horizontal = {width: 0, height: 0, outlineInsets: null, outlineImage: null, hinge: null};
+    this.vertical = {width: 0, height: 0, hinge: null};
+    this.horizontal = {width: 0, height: 0, hinge: null};
     this.deviceScaleFactor = 1;
     this.capabilities = [Capability.TOUCH, Capability.MOBILE];
     this.userAgent = '';
@@ -85,8 +79,8 @@ export class EmulatedDevice {
 
     this.isDualScreen = false;
     this.isFoldableScreen = false;
-    this.verticalSpanned = {width: 0, height: 0, outlineInsets: null, outlineImage: null, hinge: null};
-    this.horizontalSpanned = {width: 0, height: 0, outlineInsets: null, outlineImage: null, hinge: null};
+    this.verticalSpanned = {width: 0, height: 0, hinge: null};
+    this.horizontalSpanned = {width: 0, height: 0, hinge: null};
 
     this.#show = Show.Default;
     this.#showByDefault = true;
@@ -202,15 +196,6 @@ export class EmulatedDevice {
           throw new Error('Emulated device has wrong height: ' + result.height);
         }
 
-        const outlineInsets = parseValue(json['outline'], 'insets', 'object', null);
-        if (outlineInsets) {
-          result.outlineInsets = parseInsets(outlineInsets);
-          if (result.outlineInsets.left < 0 || result.outlineInsets.top < 0) {
-            throw new Error('Emulated device has wrong outline insets');
-          }
-          result.outlineImage = (parseValue(json['outline'], 'image', 'string') as string);
-        }
-
         if (json['hinge']) {
           result.hinge = parseHinge(parseValue(json, 'hinge', 'object', undefined));
         }
@@ -282,9 +267,10 @@ export class EmulatedDevice {
         if (mode.insets.top < 0 || mode.insets.left < 0 || mode.insets.right < 0 || mode.insets.bottom < 0 ||
             mode.insets.top + mode.insets.bottom > orientation.height ||
             mode.insets.left + mode.insets.right > orientation.width) {
-          throw new Error('Emulated device mode \'' + mode.title + '\'has wrong mode insets');
+          throw new Error(
+              'Emulated device mode \'' + mode.title + '\'has wrong mode insets',
+          );
         }
-        mode.image = (parseValue(modes[i], 'image', 'string', null) as string);
         const safeAreaInsets = parseValue(modes[i], 'safe-area-insets', 'object', null);
         if (safeAreaInsets) {
           mode.safeAreaInsets = parseInsets(safeAreaInsets);
@@ -419,7 +405,6 @@ export class EmulatedDevice {
           right: this.modes[i].insets.right,
           bottom: this.modes[i].insets.bottom,
         },
-        image: this.modes[i].image || undefined,
       };
       const safeAreaInsets = this.modes[i].safeAreaInsets;
       if (safeAreaInsets) {
@@ -469,17 +454,7 @@ export class EmulatedDevice {
     const json = {} as any;
     json['width'] = orientation.width;
     json['height'] = orientation.height;
-    if (orientation.outlineInsets) {
-      json.outline = {
-        insets: {
-          left: orientation.outlineInsets.left,
-          top: orientation.outlineInsets.top,
-          right: orientation.outlineInsets.right,
-          bottom: orientation.outlineInsets.bottom,
-        },
-        image: orientation.outlineImage,
-      } as {image: string | null, insets: {left: number, right: number, top: number, bottom: number}};
-    }
+
     if (orientation.hinge) {
       json.hinge = {
         width: orientation.hinge.width,
@@ -515,21 +490,6 @@ export class EmulatedDevice {
     return json;
   }
 
-  modeImage(mode: Mode): string {
-    if (!mode.image) {
-      return '';
-    }
-    return computeRelativeImageURL(mode.image);
-  }
-
-  outlineImage(mode: Mode): string {
-    const orientation = this.orientationByName(mode.orientation);
-    if (!orientation.outlineImage) {
-      return '';
-    }
-    return computeRelativeImageURL(orientation.outlineImage);
-  }
-
   orientationByName(name: string): Orientation {
     switch (name) {
       case VerticalSpanned:
@@ -688,8 +648,16 @@ export class EmulatedDevicesList extends Common.ObjectWrapper.ObjectWrapper<Even
       if (device) {
         result.add(device);
         if (!device.modes.length) {
-          device.modes.push({title: '', orientation: Horizontal, insets: new Insets(0, 0, 0, 0), image: null});
-          device.modes.push({title: '', orientation: Vertical, insets: new Insets(0, 0, 0, 0), image: null});
+          device.modes.push({
+            title: '',
+            orientation: Horizontal,
+            insets: new Insets(0, 0, 0, 0),
+          });
+          device.modes.push({
+            title: '',
+            orientation: Vertical,
+            insets: new Insets(0, 0, 0, 0),
+          });
         }
       } else {
         success = false;
@@ -769,7 +737,6 @@ export interface Mode {
   title: string;
   orientation: string;
   insets: Insets;
-  image: string|null;
   safeAreaInsets?: Insets;
   cutout?: Cutout;
 }
@@ -791,14 +758,11 @@ export type Cutout = BaseCutout&({shape: CutoutShape.RECTANGLE}|{shape: CutoutSh
 export interface Orientation {
   width: number;
   height: number;
-  outlineInsets: Insets|null;
-  outlineImage: string|null;
   hinge: SDK.OverlayModel.Hinge|null;
 }
 export interface JSONMode {
   title: string;
   orientation: string;
-  image?: string;
   insets: {
     left: number,
     right: number,
@@ -2136,10 +2100,6 @@ const emulatedDevices = [
     'title': 'Nest Hub Max',
     'screen': {
       'horizontal': {
-        'outline': {
-          'image': '@url(optimized/google-nest-hub-max-horizontal.avif)',
-          'insets': {'left': 92, 'top': 96, 'right': 91, 'bottom': 248},
-        },
         'width': 1280,
         'height': 800,
       },
@@ -2249,19 +2209,11 @@ const emulatedDevices = [
     'title': 'Moto G4',
     'screen': {
       'horizontal': {
-        'outline': {
-          'image': '@url(optimized/MotoG4-landscape.avif)',
-          'insets': {'left': 91, 'top': 30, 'right': 74, 'bottom': 30},
-        },
         'width': 640,
         'height': 360,
       },
       'device-pixel-ratio': 3,
       'vertical': {
-        'outline': {
-          'image': '@url(optimized/MotoG4-portrait.avif)',
-          'insets': {'left': 30, 'top': 91, 'right': 30, 'bottom': 74},
-        },
         'width': 360,
         'height': 640,
       },

package/front_end/models/persistence/AutomaticFileSystemManager.ts

@@ -113,12 +113,12 @@ export class AutomaticFileSystemManager extends Common.ObjectWrapper.ObjectWrapp
    */
   static removeInstance(): void {
     if (Root.DevToolsContext.globalInstance().has(AutomaticFileSystemManager)) {
-      Root.DevToolsContext.globalInstance().get(AutomaticFileSystemManager).#dispose();
+      Root.DevToolsContext.globalInstance().get(AutomaticFileSystemManager).dispose();
       Root.DevToolsContext.globalInstance().delete(AutomaticFileSystemManager);
     }
   }
 
-  #dispose(): void {
+  dispose(): void {
     this.#inspectorFrontendHost.events.removeEventListener(
         Host.InspectorFrontendHostAPI.Events.FileSystemRemoved, this.#fileSystemRemoved, this);
     this.#projectSettingsModel.removeEventListener(

package/front_end/models/persistence/IsolatedFileSystemManager.ts

@@ -35,6 +35,7 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
   private readonly fileSystemsLoadedPromise: Promise<IsolatedFileSystem[]>;
   readonly #settings: Common.Settings.Settings;
   readonly #console: Common.Console.Console;
+  readonly #eventDescriptors: Common.EventTarget.EventDescriptor[];
   constructor(settings: Common.Settings.Settings, console: Common.Console.Console) {
     super();
     this.#settings = settings;
@@ -44,20 +45,22 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
     this.callbacks = new Map();
     this.progresses = new Map();
 
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.FileSystemRemoved, this.onFileSystemRemoved, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.FileSystemAdded, this.onFileSystemAdded, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.FileSystemFilesChangedAddedRemoved, this.onFileSystemFilesChanged, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.IndexingTotalWorkCalculated, this.onIndexingTotalWorkCalculated, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.IndexingWorked, this.onIndexingWorked, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.IndexingDone, this.onIndexingDone, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.SearchCompleted, this.onSearchCompleted, this);
+    this.#eventDescriptors = [
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.FileSystemRemoved, this.onFileSystemRemoved, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.FileSystemAdded, this.onFileSystemAdded, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.FileSystemFilesChangedAddedRemoved, this.onFileSystemFilesChanged, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.IndexingTotalWorkCalculated, this.onIndexingTotalWorkCalculated, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.IndexingWorked, this.onIndexingWorked, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.IndexingDone, this.onIndexingDone, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.SearchCompleted, this.onSearchCompleted, this),
+    ];
 
     // Initialize exclude pattern settings
     const defaultCommonExcludedFolders = [
@@ -101,20 +104,7 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
 
   // TODO(crbug.com/542394587): Should be `Symbol.dispsoe`
   dispose(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.FileSystemRemoved, this.onFileSystemRemoved, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.FileSystemAdded, this.onFileSystemAdded, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.FileSystemFilesChangedAddedRemoved, this.onFileSystemFilesChanged, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.IndexingTotalWorkCalculated, this.onIndexingTotalWorkCalculated, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.IndexingWorked, this.onIndexingWorked, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.IndexingDone, this.onIndexingDone, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.SearchCompleted, this.onSearchCompleted, this);
+    Common.EventTarget.removeEventListeners(this.#eventDescriptors);
   }
 
   static instance(opts: {
@@ -141,8 +131,9 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
 
   private requestFileSystems(): Promise<IsolatedFileSystem[]> {
     const {resolve, promise} = Promise.withResolvers<IsolatedFileSystem[]>();
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+    const descriptor = Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
         Host.InspectorFrontendHostAPI.Events.FileSystemsLoaded, onFileSystemsLoaded, this);
+    this.#eventDescriptors.push(descriptor);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.requestFileSystems();
     return promise;
 

package/front_end/models/workspace/FileManager.ts

@@ -15,14 +15,21 @@ export interface SaveCallbackParam {
 export class FileManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly #saveCallbacks = new Map<
       Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString, (arg0: SaveCallbackParam|null) => void>();
+  readonly #eventDescriptors: Common.EventTarget.EventDescriptor[];
   constructor() {
     super();
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.SavedURL, this.savedURL, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.CanceledSaveURL, this.#canceledSavedURL, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.AppendedToURL, this.appendedToURL, this);
+    this.#eventDescriptors = [
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.SavedURL, this.savedURL, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.CanceledSaveURL, this.#canceledSavedURL, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.AppendedToURL, this.appendedToURL, this),
+    ];
+  }
+
+  dispose(): void {
+    Common.EventTarget.removeEventListeners(this.#eventDescriptors);
   }
 
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): FileManager {

package/front_end/panels/application/WebMCPView.ts

@@ -198,6 +198,14 @@ const UIStrings = {
    * @description Label for a list of tool flags or attributes
    */
   flags: 'Flags',
+  /**
+   * @description Text for the label of the tool description
+   */
+  description: 'Description',
+  /**
+   * @description Text for the label of the tool origin
+   */
+  origin: 'Origin',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/WebMCPView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -714,7 +722,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                     } as ProtocolMonitor.JSONEditor.Command,
                   });
                 }
-              }}>Run tool</devtools-button>
+              }}>${i18nString(UIStrings.runTool)}</devtools-button>
           ` : nothing}
         </div>
       </devtools-split-view>
@@ -1124,9 +1132,9 @@ const TOOL_DETAILS_VIEW = (input: ToolDetailsViewInput, output: undefined, targe
   render(html`
     <style>${webMCPViewStyles}</style>
     <div class="tool-details-grid">
-      <div class="label">Name</div>
+      <div class="label">${i18nString(UIStrings.name)}</div>
       <div class="value source-code">${tool.name}</div>
-      <div class="label">Description</div>
+      <div class="label">${i18nString(UIStrings.description)}</div>
       <div class="value">${tool.description}</div>
       ${flags.length > 0 ? html`
       <div class="label">${i18nString(UIStrings.flags)}</div>
@@ -1137,7 +1145,7 @@ const TOOL_DETAILS_VIEW = (input: ToolDetailsViewInput, output: undefined, targe
       <div class="value">${Components.Linkifier.Linkifier.linkifyRevealable(tool.frame, tool.frame.displayName())}</div>
       ` : nothing}
       ${origin instanceof SDK.DOMModel.DOMNode ? html`
-      <div class="label">Origin</div>
+      <div class="label">${i18nString(UIStrings.origin)}</div>
       <div class="value tool-origin-container">
         <span
             class="node-text-container source-code tool-origin-node"
@@ -1161,7 +1169,7 @@ const TOOL_DETAILS_VIEW = (input: ToolDetailsViewInput, output: undefined, targe
            @click=${() => input.revealNode(origin)}
            ></devtools-button>
       </div>` : origin ? html`
-      <div class="label">Origin</div>
+      <div class="label">${i18nString(UIStrings.origin)}</div>
       <div class="value stack-trace">
         ${widget(Components.JSPresentationUtils.StackTracePreviewContent,
                  {stackTrace: origin, options: { expandable: true}})}