chrome-devtools-frontend 1.0.1386602 → 1.0.1418433

package/front_end/models/persistence/NetworkPersistenceManager.test.ts

@@ -4,7 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import {
@@ -19,6 +19,7 @@ import {createFileSystemUISourceCode} from '../../testing/UISourceCodeHelpers.js
 import * as Persistence from '../persistence/persistence.js';
 import * as Workspace from '../workspace/workspace.js';
 
+const {urlString} = Platform.DevToolsPath;
 const setUpEnvironmentWithUISourceCode =
     (url: string, resourceType: Common.ResourceType.ResourceType, project?: Workspace.Workspace.Project) => {
       const {workspace, networkPersistenceManager} = setUpEnvironment();
@@ -27,8 +28,7 @@ const setUpEnvironmentWithUISourceCode =
         project = {id: () => url, type: () => Workspace.Workspace.projectTypes.Network} as Workspace.Workspace.Project;
       }
 
-      const uiSourceCode =
-          new Workspace.UISourceCode.UISourceCode(project, url as Platform.DevToolsPath.UrlString, resourceType);
+      const uiSourceCode = new Workspace.UISourceCode.UISourceCode(project, urlString`${url}`, resourceType);
 
       project.uiSourceCodes = () => [uiSourceCode];
 
@@ -49,8 +49,7 @@ describeWithMockConnection('NetworkPersistenceManager', () => {
     const resourceType = Common.ResourceType.resourceTypes.Document;
 
     const {uiSourceCode} = setUpEnvironmentWithUISourceCode(url, resourceType);
-    const networkPersistenceManager =
-        await createWorkspaceProject('file:///path/to/overrides' as Platform.DevToolsPath.UrlString, []);
+    const networkPersistenceManager = await createWorkspaceProject(urlString`file:///path/to/overrides`, []);
 
     const saveSpy = sinon.spy(networkPersistenceManager, 'saveUISourceCodeForOverrides');
     const actual = await networkPersistenceManager.setupAndStartLocalOverrides(uiSourceCode);
@@ -68,8 +67,7 @@ describeWithMockConnection('NetworkPersistenceManager', () => {
     const resourceType = Common.ResourceType.resourceTypes.Document;
 
     const {uiSourceCode} = setUpEnvironmentWithUISourceCode(url, resourceType);
-    const networkPersistenceManager =
-        await createWorkspaceProject('file:///path/to/overrides' as Platform.DevToolsPath.UrlString, []);
+    const networkPersistenceManager = await createWorkspaceProject(urlString`file:///path/to/overrides`, []);
 
     const saveSpy = sinon.spy(networkPersistenceManager, 'saveUISourceCodeForOverrides');
     const actual = await networkPersistenceManager.setupAndStartLocalOverrides(uiSourceCode);
@@ -86,14 +84,13 @@ describeWithMockConnection('NetworkPersistenceManager', () => {
     SDK.NetworkManager.MultitargetNetworkManager.dispose();
     const target = createTarget();
 
-    const networkPersistenceManager =
-        await createWorkspaceProject('file:///path/to/overrides' as Platform.DevToolsPath.UrlString, [
-          {name: 'helloWorld.html', path: 'www.example.com/', content: 'Hello World!'},
-          {name: 'forbidden.html', path: 'chromewebstore.google.com/', content: 'Chrome Web Store'},
-          {name: 'flags', path: 'chrome:/', content: 'Chrome Flags'},
-          {name: 'index.html', path: 'chrome.google.com/', content: 'Chrome'},
-          {name: 'allowed.html', path: 'www.google.com/', content: 'Google Search'},
-        ]);
+    const networkPersistenceManager = await createWorkspaceProject(urlString`file:///path/to/overrides`, [
+      {name: 'helloWorld.html', path: 'www.example.com/', content: 'Hello World!'},
+      {name: 'forbidden.html', path: 'chromewebstore.google.com/', content: 'Chrome Web Store'},
+      {name: 'flags', path: 'chrome:/', content: 'Chrome Flags'},
+      {name: 'index.html', path: 'chrome.google.com/', content: 'Chrome'},
+      {name: 'allowed.html', path: 'www.google.com/', content: 'Google Search'},
+    ]);
 
     const stub = sinon.stub(target.fetchAgent(), 'invoke_enable');
     await networkPersistenceManager.updateInterceptionPatternsForTests();
@@ -109,18 +106,18 @@ describeWithMockConnection('NetworkPersistenceManager', () => {
         requestStage: Protocol.Fetch.RequestStage.Response,
       },
     ];
-    assert.deepStrictEqual(patterns, expected);
+    assert.deepEqual(patterns, expected);
   });
 
   it('recognizes forbidden network URLs', () => {
     assert.isTrue(Persistence.NetworkPersistenceManager.NetworkPersistenceManager.isForbiddenNetworkUrl(
-        'chrome://version' as Platform.DevToolsPath.UrlString));
+        urlString`chrome://version`));
     assert.isTrue(Persistence.NetworkPersistenceManager.NetworkPersistenceManager.isForbiddenNetworkUrl(
-        'https://chromewebstore.google.com/index.html' as Platform.DevToolsPath.UrlString));
+        urlString`https://chromewebstore.google.com/index.html`));
     assert.isTrue(Persistence.NetworkPersistenceManager.NetworkPersistenceManager.isForbiddenNetworkUrl(
-        'https://chrome.google.com/script.js' as Platform.DevToolsPath.UrlString));
+        urlString`https://chrome.google.com/script.js`));
     assert.isFalse(Persistence.NetworkPersistenceManager.NetworkPersistenceManager.isForbiddenNetworkUrl(
-        'https://www.example.com/script.js' as Platform.DevToolsPath.UrlString));
+        urlString`https://www.example.com/script.js`));
   });
 });
 
@@ -131,12 +128,11 @@ describeWithMockConnection('NetworkPersistenceManager', () => {
     SDK.NetworkManager.MultitargetNetworkManager.dispose();
     setMockResourceTree(false);
     const target = createTarget();
-    networkPersistenceManager =
-        await createWorkspaceProject('file:///path/to/overrides' as Platform.DevToolsPath.UrlString, [
-          {
-            name: '.headers',
-            path: 'www.example.com/',
-            content: `[
+    networkPersistenceManager = await createWorkspaceProject(urlString`file:///path/to/overrides`, [
+      {
+        name: '.headers',
+        path: 'www.example.com/',
+        content: `[
             {
               "applyTo": "index.html",
               "headers": [{
@@ -172,11 +168,11 @@ describeWithMockConnection('NetworkPersistenceManager', () => {
               ]
             }
           ]`,
-          },
-          {
-            name: '.headers',
-            path: '',
-            content: `[
+      },
+      {
+        name: '.headers',
+        path: '',
+        content: `[
             {
               "applyTo": "*",
               "headers": [{
@@ -185,9 +181,9 @@ describeWithMockConnection('NetworkPersistenceManager', () => {
               }]
             }
           ]`,
-          },
-          {name: 'helloWorld.html', path: 'www.example.com/', content: 'Hello World!'},
-        ]);
+      },
+      {name: 'helloWorld.html', path: 'www.example.com/', content: 'Hello World!'},
+    ]);
     sinon.stub(target.fetchAgent(), 'invoke_enable');
     await networkPersistenceManager.updateInterceptionPatternsForTests();
   });
@@ -645,12 +641,9 @@ describeWithMockConnection('NetworkPersistenceManager', () => {
       ];
     }
     toTest.forEach(testStrings => {
+      assert.deepEqual(networkPersistenceManager.rawPathFromUrl(urlString`${testStrings.url}`), testStrings.raw);
       assert.deepEqual(
-          networkPersistenceManager.rawPathFromUrl(testStrings.url as Platform.DevToolsPath.UrlString),
-          testStrings.raw);
-      assert.deepEqual(
-          networkPersistenceManager.encodedPathFromUrl(testStrings.url as Platform.DevToolsPath.UrlString),
-          testStrings.encoded);
+          networkPersistenceManager.encodedPathFromUrl(urlString`${testStrings.url}`), testStrings.encoded);
     });
   });
 
@@ -690,7 +683,7 @@ describeWithMockConnection('NetworkPersistenceManager', () => {
     workspace.dispatchEventToListeners(Workspace.Workspace.Events.ProjectRemoved, project);
 
     setTimeout(() => {
-      assert.deepStrictEqual(
+      assert.deepEqual(
           eventURLs, ['file:///path/to/overrides/.headers', 'file:///path/to/overrides/www.example.com/.headers']);
       assert.isFalse(networkPersistenceManager.hasMatchingNetworkUISourceCodeForHeaderOverridesFile({
         url: () => 'file:///path/to/overrides/www.example.com/.headers',
@@ -716,8 +709,7 @@ describeWithMockConnection('NetworkPersistenceManager', () => {
 
   it('updates active state when target detach and attach', async () => {
     const {networkPersistenceManager} = setUpEnvironment();
-    const {project} =
-        createFileSystemUISourceCode({url: 'file:///tmp' as Platform.DevToolsPath.UrlString, mimeType: 'text/plain'});
+    const {project} = createFileSystemUISourceCode({url: urlString`file:///tmp`, mimeType: 'text/plain'});
     await networkPersistenceManager.setProject(project);
     const targetManager = SDK.TargetManager.TargetManager.instance();
     assert.isNull(targetManager.rootTarget());
@@ -853,7 +845,7 @@ describe('NetworkPersistenceManager', () => {
     ]`;
 
     const {uiSourceCode} = createFileSystemUISourceCode({
-      url: 'file:///path/to/overrides/www.example.com/.headers' as Platform.DevToolsPath.UrlString,
+      url: urlString`file:///path/to/overrides/www.example.com/.headers`,
       content: headers,
       mimeType: 'text/plain',
       fileSystemPath: 'file:///path/to/overrides',
@@ -915,7 +907,7 @@ describe('NetworkPersistenceManager', () => {
     ]`;
 
     const {uiSourceCode} = createFileSystemUISourceCode({
-      url: 'file:///path/to/overrides/.headers' as Platform.DevToolsPath.UrlString,
+      url: urlString`file:///path/to/overrides/.headers`,
       content: headers,
       mimeType: 'text/plain',
       fileSystemPath: 'file:///path/to/overrides',
@@ -938,7 +930,7 @@ describe('NetworkPersistenceManager', () => {
     ]`;
 
     const {uiSourceCode} = createFileSystemUISourceCode({
-      url: 'file:///path/to/overrides/www.longurls.com/longurls/.headers' as Platform.DevToolsPath.UrlString,
+      url: urlString`file:///path/to/overrides/www.longurls.com/longurls/.headers`,
       content: headers,
       mimeType: 'text/plain',
       fileSystemPath: 'file:///path/to/overrides',
@@ -974,7 +966,7 @@ describe('NetworkPersistenceManager', () => {
     ]`;
 
     const {uiSourceCode} = createFileSystemUISourceCode({
-      url: 'file:///path/to/overrides/www.example.com/.headers' as Platform.DevToolsPath.UrlString,
+      url: urlString`file:///path/to/overrides/www.example.com/.headers`,
       content: headers,
       mimeType: 'text/plain',
       fileSystemPath: 'file:///path/to/overrides',

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -554,7 +554,7 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
       if (!headerOverrides.every(isHeaderOverride)) {
         throw 'Type mismatch after parsing';
       }
-    } catch (e) {
+    } catch {
       console.error('Failed to parse', uiSourceCode.url(), 'for locally overriding headers.');
       return [];
     }
@@ -995,11 +995,11 @@ export const enum Events {
   LOCAL_OVERRIDES_PROJECT_UPDATED = 'LocalOverridesProjectUpdated',
 }
 
-export type EventTypes = {
-  [Events.PROJECT_CHANGED]: Workspace.Workspace.Project|null,
-  [Events.REQUEST_FOR_HEADER_OVERRIDES_FILE_CHANGED]: Workspace.UISourceCode.UISourceCode,
-  [Events.LOCAL_OVERRIDES_PROJECT_UPDATED]: boolean,
-};
+export interface EventTypes {
+  [Events.PROJECT_CHANGED]: Workspace.Workspace.Project|null;
+  [Events.REQUEST_FOR_HEADER_OVERRIDES_FILE_CHANGED]: Workspace.UISourceCode.UISourceCode;
+  [Events.LOCAL_OVERRIDES_PROJECT_UPDATED]: boolean;
+}
 
 export interface HeaderOverride {
   applyTo: string;

package/front_end/models/persistence/PersistenceAction.test.ts

@@ -4,7 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import {describeWithLocale} from '../../testing/EnvironmentHelpers.js';
 import {expectCall} from '../../testing/ExpectStubCall.js';
@@ -15,6 +15,8 @@ import * as Workspace from '../workspace/workspace.js';
 
 import * as Persistence from './persistence.js';
 
+const {urlString} = Platform.DevToolsPath;
+
 describeWithLocale('ContextMenuProvider', () => {
   beforeEach(() => {
     // Rather then setting up a whole Workspace/BreakpointManager/TargetManager/... chain. Let's stub out the NetworkPersistenceManager.
@@ -31,7 +33,7 @@ describeWithLocale('ContextMenuProvider', () => {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     const menuProvider = new Persistence.PersistenceActions.ContextMenuProvider();
     const contentProvider: TextUtils.ContentProvider.ContentProvider = {
-      contentURL: () => 'https://example.com/sample.webp' as Platform.DevToolsPath.UrlString,
+      contentURL: () => urlString`https://example.com/sample.webp`,
       contentType: () => Common.ResourceType.resourceTypes
                              .Document,  // Navigating a tab to an image will result in a document type for images.
       requestContent: () => Promise.resolve({isEncoded: true, content: 'AGFzbQEAAAA='}),
@@ -49,8 +51,7 @@ describeWithLocale('ContextMenuProvider', () => {
     contextMenu.invokeHandler(saveItem.id());
 
     assert.deepEqual(await expectCall(saveStub), [
-      'https://example.com/sample.webp' as Platform.DevToolsPath.UrlString, 'AGFzbQEAAAA=', true /* forceSaveAs */,
-      true, /* isBase64 */
+      urlString`https://example.com/sample.webp`, 'AGFzbQEAAAA=', true /* forceSaveAs */, true, /* isBase64 */
     ]);
   });
 
@@ -60,7 +61,7 @@ describeWithLocale('ContextMenuProvider', () => {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     const menuProvider = new Persistence.PersistenceActions.ContextMenuProvider();
     const uiSourceCode = sinon.createStubInstance(Workspace.UISourceCode.UISourceCode, {
-      contentURL: 'https://example.com/sample.wasm' as Platform.DevToolsPath.UrlString,
+      contentURL: urlString`https://example.com/sample.wasm`,
       contentType: Common.ResourceType.resourceTypes.Script,
     });
     const stubProject = sinon.createStubInstance(
@@ -69,8 +70,10 @@ describeWithLocale('ContextMenuProvider', () => {
     uiSourceCode.project.returns(stubProject);
     const stubWorkspaceBinding = sinon.createStubInstance(Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding);
     sinon.stub(Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding, 'instance').returns(stubWorkspaceBinding);
-    const stubWasmScript = sinon.createStubInstance(
-        SDK.Script.Script, {getWasmBytecode: Promise.resolve(new Uint8Array([1, 2, 3, 4])), isWasm: true});
+    const stubWasmScript = sinon.createStubInstance(SDK.Script.Script, {
+      getWasmBytecode: Promise.resolve(new Uint8Array([1, 2, 3, 4]).buffer),
+      isWasm: true,
+    });
     stubWorkspaceBinding.scriptsForUISourceCode.returns([stubWasmScript]);
 
     menuProvider.appendApplicableItems(event, contextMenu, uiSourceCode);
@@ -81,8 +84,7 @@ describeWithLocale('ContextMenuProvider', () => {
     contextMenu.invokeHandler(saveItem.id());
 
     assert.deepEqual(await expectCall(saveStub), [
-      'https://example.com/sample.wasm' as Platform.DevToolsPath.UrlString, 'AQIDBA==', true /* forceSaveAs */,
-      true, /* isBase64 */
+      urlString`https://example.com/sample.wasm`, 'AQIDBA==', true /* forceSaveAs */, true, /* isBase64 */
     ]);
   });
 });

package/front_end/models/persistence/PersistenceImpl.test.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 type * as Platform from '../../core/platform/platform.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 {createTarget} from '../../testing/EnvironmentHelpers.js';
@@ -20,6 +20,8 @@ import * as Breakpoints from '../breakpoints/breakpoints.js';
 import * as Persistence from '../persistence/persistence.js';
 import * as Workspace from '../workspace/workspace.js';
 
+const {urlString} = Platform.DevToolsPath;
+
 describeWithMockConnection('PersistenceImpl', () => {
   const FILE_SYSTEM_BREAK_ID = 'BREAK_ID' as Protocol.Debugger.BreakpointId;
   const FILE_SYSTEM_SCRIPT_ID = 'FILE_SYSTEM_SCRIPT' as Protocol.Runtime.ScriptId;
@@ -39,7 +41,7 @@ describeWithMockConnection('PersistenceImpl', () => {
           ];
 
   const SCRIPT_DESCRIPTION = {
-    url: 'http://www.google.com/script.js' as Platform.DevToolsPath.UrlString,
+    url: urlString`http://www.google.com/script.js`,
     content: 'console.log(1);\nconsole.log(2);\n',
     startLine: 0,
     startColumn: 0,
@@ -110,8 +112,8 @@ describeWithMockConnection('PersistenceImpl', () => {
   }
 
   it('moves breakpoint from file system uiSourceCode to the network uiSourceCode when binding is created', async () => {
-    const fileSystemPath = 'file://path/to/filesystem' as Platform.DevToolsPath.UrlString;
-    const fileSystemFileUrl = fileSystemPath + '/script.js' as Platform.DevToolsPath.UrlString;
+    const fileSystemPath = urlString`file://path/to/filesystem`;
+    const fileSystemFileUrl = urlString`${fileSystemPath + '/script.js'}`;
     const {uiSourceCode: fileSystemUiSourceCode, project} = createFileSystemFileForPersistenceTests(
         {fileSystemPath, fileSystemFileUrl, type: ''}, SCRIPT_DESCRIPTION.url, SCRIPT_DESCRIPTION.content, target);
     const breakpointLine = 0;
@@ -135,8 +137,8 @@ describeWithMockConnection('PersistenceImpl', () => {
 
   it('copies breakpoint from network uiSourceCode to the file system uiSourceCode when binding is removed ',
      async () => {
-       const fileSystemPath = 'file://path/to/filesystem' as Platform.DevToolsPath.UrlString;
-       const fileSystemFileUrl = fileSystemPath + '/script.js' as Platform.DevToolsPath.UrlString;
+       const fileSystemPath = urlString`file://path/to/filesystem`;
+       const fileSystemFileUrl = urlString`${fileSystemPath + '/script.js'}`;
        const {uiSourceCode: fileSystemUiSourceCode, project} = createFileSystemFileForPersistenceTests(
            {fileSystemPath, fileSystemFileUrl, type: ''}, SCRIPT_DESCRIPTION.url, SCRIPT_DESCRIPTION.content, target);
        const breakpointLine = 0;
@@ -181,7 +183,7 @@ describeWithMockConnection('PersistenceImpl', () => {
   // Replaces web test: http/tests/devtools/persistence/automapping-bind-committed-network-sourcecode.js
   it('it marks the filesystem UISourceCode dirty when the network UISourceCode was committed before the binding was established',
      async () => {
-       const url = 'https://example.com/script.js' as Platform.DevToolsPath.UrlString;
+       const url = urlString`https://example.com/script.js`;
        const origContent = 'window.foo = () => "foo";\n';
        const {uiSourceCode: networkUISourceCode} = createContentProviderUISourceCode({
          url,
@@ -198,7 +200,7 @@ describeWithMockConnection('PersistenceImpl', () => {
        // Add a filesystem version of 'script.js' with the original content.
        const mappingPromise =
            Persistence.Persistence.PersistenceImpl.instance().once(Persistence.Persistence.Events.BindingCreated);
-       const localUrl = 'file:///var/www/script.js' as Platform.DevToolsPath.UrlString;
+       const localUrl = urlString`file:///var/www/script.js`;
        const {uiSourceCode} = createFileSystemUISourceCode({
          url: localUrl,
          mimeType: 'text/javascript',

package/front_end/models/persistence/PersistenceImpl.ts

@@ -385,10 +385,10 @@ export enum Events {
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
-export type EventTypes = {
-  [Events.BindingCreated]: PersistenceBinding,
-  [Events.BindingRemoved]: PersistenceBinding,
-};
+export interface EventTypes {
+  [Events.BindingCreated]: PersistenceBinding;
+  [Events.BindingRemoved]: PersistenceBinding;
+}
 
 export class PersistenceBinding {
   network: Workspace.UISourceCode.UISourceCode;

package/front_end/models/persistence/PersistenceUtils.ts

@@ -51,7 +51,7 @@ export class PersistenceUtils {
         return null;
       }
       const icon = new IconButton.Icon.Icon();
-      icon.data = {iconName: 'document', color: 'var(--icon-default)', width: '16px', height: '16px'};
+      icon.data = {iconName: 'document', color: 'var(--icon-default)', width: '14px', height: '14px'};
       UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(binding.network));
       if (NetworkPersistenceManager.instance().project() === binding.fileSystem.project()) {
         icon.classList.add('dot', 'purple');
@@ -68,13 +68,13 @@ export class PersistenceUtils {
 
     if (NetworkPersistenceManager.instance().isActiveHeaderOverrides(uiSourceCode)) {
       const icon = new IconButton.Icon.Icon();
-      icon.data = {iconName: 'document', color: 'var(--icon-default)', width: '16px', height: '16px'};
+      icon.data = {iconName: 'document', color: 'var(--icon-default)', width: '14px', height: '14px'};
       icon.classList.add('dot', 'purple');
       return icon;
     }
 
     const icon = new IconButton.Icon.Icon();
-    icon.data = {iconName: 'document', color: 'var(--icon-default)', width: '16px', height: '16px'};
+    icon.data = {iconName: 'document', color: 'var(--icon-default)', width: '14px', height: '14px'};
     UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(uiSourceCode));
     return icon;
   }

package/front_end/models/persistence/PlatformFileSystem.test.ts

@@ -2,13 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as Persistence from '../persistence/persistence.js';
 
+const {urlString} = Platform.DevToolsPath;
+
 describe('PlatformFileSystem', () => {
   it('can be instantiated successfully', () => {
-    const platformFileSystem = new Persistence.PlatformFileSystem.PlatformFileSystem(
-        'Test Path' as Platform.DevToolsPath.UrlString, 'Test Type');
+    const platformFileSystem = new Persistence.PlatformFileSystem.PlatformFileSystem(urlString`Test Path`, 'Test Type');
     assert.strictEqual(platformFileSystem.path(), 'Test Path', 'path was not set or retrieved correctly');
     assert.strictEqual(platformFileSystem.type(), 'Test Type', 'Type was not set or retrieved correctly');
   });

package/front_end/models/persistence/PlatformFileSystem.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import type * as Common from '../../core/common/common.js';
-import type * as Platform from '../../core/platform/platform.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import type * as TextUtils from '../text_utils/text_utils.js';
 
 const UIStrings = {

package/front_end/models/persistence/WorkspaceSettingsTab.ts

@@ -2,9 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/components/cards/cards.js';
+
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as Cards from '../../ui/components/cards/cards.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -49,6 +51,7 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
 
   constructor() {
     super();
+    this.registerRequiredCSS(workspaceSettingsTabStyles);
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('workspace')}`);
 
@@ -67,12 +70,9 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
     mappingsAreInferredInfo.classList.add('mappings-info');
     UI.UIUtils.createTextChild(mappingsAreInferredInfo, i18nString(UIStrings.mappingsAreInferredAutomatically));
 
-    const card = new Cards.Card.Card();
-    this.containerElement.appendChild(card);
-    card.data = {
-      heading: i18nString(UIStrings.workspace),
-      content: [folderExcludePatternInput, mappingsAreInferredInfo],
-    };
+    const card = this.containerElement.createChild('devtools-card');
+    card.heading = i18nString(UIStrings.workspace);
+    card.append(folderExcludePatternInput, mappingsAreInferredInfo);
 
     this.elementByPath = new Map();
     this.mappingViewByPath = new Map();
@@ -90,11 +90,6 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
     this.#addButtonContainer.appendChild(addButton);
   }
 
-  override wasShown(): void {
-    super.wasShown();
-    this.registerCSSFiles([workspaceSettingsTabStyles]);
-  }
-
   private createFolderExcludePatternInput(): HTMLElement {
     const excludePatternElement = document.createElement('div');
     excludePatternElement.classList.add('folder-exclude-pattern');
@@ -114,7 +109,7 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
       let regex;
       try {
         regex = new RegExp(value);
-      } catch (e) {
+      } catch {
       }
       const valid = Boolean(regex);
       return {valid, errorMessage: undefined};
@@ -136,17 +131,16 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
     const removeButton = UI.UIUtils.createTextButton(
         i18nString(UIStrings.remove), this.removeFileSystemClicked.bind(this, fileSystem),
         {jslogContext: 'settings.remove-file-system'});
+    removeButton.slot = 'heading-suffix';
+    const folderIcon = IconButton.Icon.create('folder');
+    folderIcon.slot = 'heading-prefix';
 
     const mappingViewContainer = document.createElement('div');
     mappingViewContainer.classList.add('mapping-view-container');
-    const fileSystemExcludeCard = new Cards.Card.Card();
+    const fileSystemExcludeCard = document.createElement('devtools-card');
+    fileSystemExcludeCard.heading = filename;
+    fileSystemExcludeCard.append(folderIcon, removeButton, mappingViewContainer);
     this.containerElement.insertBefore(fileSystemExcludeCard, this.#addButtonContainer);
-    fileSystemExcludeCard.data = {
-      heading: filename,
-      headingIconName: 'folder',
-      headingSuffix: removeButton,
-      content: [mappingViewContainer],
-    };
     const mappingView = new EditFileSystemView(fileSystem.path());
     this.mappingViewByPath.set(fileSystem.path(), mappingView);
     mappingView.element.classList.add('file-system-mapping-view');
@@ -159,7 +153,8 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
   private getFilename(fileSystem: PlatformFileSystem): string {
     const fileSystemPath = fileSystem.path();
     const lastIndexOfSlash = fileSystemPath.lastIndexOf('/');
-    return fileSystemPath.substr(lastIndexOfSlash + 1);
+    const lastPathComponent = fileSystemPath.substr(lastIndexOfSlash + 1);
+    return decodeURIComponent(lastPathComponent);
   }
 
   private removeFileSystemClicked(fileSystem: PlatformFileSystem): void {

package/front_end/models/persistence/editFileSystemView.css

@@ -8,12 +8,9 @@
   display: flex;
   flex-direction: column;
   min-height: var(--sys-size-16);
-  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
-  padding: var(--sys-size-5) var(--sys-size-6);
-
-  & > .url-header {
-    height: var(--sys-size-9);
-  }
+  border-bottom: var(--sys-size-1) solid var(--app-color-card-divider);
+  padding: var(--sys-size-4) var(--sys-size-6);
+  gap: var(--sys-size-4);
 
   & > .excluded-folder-url {
     color: var(--sys-color-on-surface-subtle);
@@ -58,11 +55,19 @@
 }
 
 .list {
-  border: none;
+  &:has(div) {
+    border: none;
+  }
 }
 
 .list-item {
-  padding: 0 var(--sys-size-6);
+  padding-left: var(--sys-size-11);
+
+  &:not(:last-child) {
+    .file-system-list-item {
+      border-bottom: var(--sys-size-1) solid var(--app-color-card-divider);
+    }
+  }
 }
 
 .editor-buttons {