chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/models/extensions/ExtensionAPI.ts

@@ -1146,9 +1146,17 @@ self.injectedExtensionAPI = function(
     },
   };
 
+  const protocolGet = Object.getOwnPropertyDescriptor(URL.prototype, 'protocol')?.get;
+  function getProtocol(url: string): string {
+    if (!protocolGet) {
+      throw new Error('URL.protocol is not available');
+    }
+    return protocolGet.call(new URL(url));
+  }
+
   function canAccessResource(resource: APIImpl.ResourceData): boolean {
     try {
-      return extensionInfo.allowFileAccess || (new URL(resource.url)).protocol !== 'file:';
+      return extensionInfo.allowFileAccess || getProtocol(resource.url) !== 'file:';
     } catch (e) {
       return false;
     }

package/front_end/models/extensions/ExtensionServer.test.ts

@@ -704,6 +704,20 @@ describe('ExtensionServer', () => {
       assert.isTrue(Extensions.ExtensionServer.ExtensionServer.canInspectURL(url), url);
     }
   });
+
+  it('cannot inspect non-HTTP URL schemes', () => {
+    const blockedUrls = [
+      'devtools://devtools/bundled/front_end/devtools_app.html',
+      'devtools://devtools/anything',
+      'chrome://extensions',
+      'chrome-untrusted://extensions',
+      'chrome-error://crash',
+      'chrome-search://foo/bar',
+    ];
+    for (const url of blockedUrls as Platform.DevToolsPath.UrlString[]) {
+      assert.isFalse(Extensions.ExtensionServer.ExtensionServer.canInspectURL(url), url);
+    }
+  });
 });
 
 function assertIsStatus<T>(value: T|

package/front_end/models/extensions/ExtensionServer.ts

@@ -56,6 +56,7 @@ import {RecorderExtensionEndpoint} from './RecorderExtensionEndpoint.js';
 import {RecorderPluginManager} from './RecorderPluginManager.js';
 
 const extensionOrigins: WeakMap<MessagePort, Platform.DevToolsPath.UrlString> = new WeakMap();
+const kPermittedSchemes = ['http:', 'https:', 'file:', 'data:', 'chrome-extension:', 'about:'];
 
 declare global {
   interface Window {
@@ -63,8 +64,6 @@ declare global {
   }
 }
 
-const kAllowedOrigins = [].map(url => (new URL(url)).origin);
-
 let extensionServerInstance: ExtensionServer|null;
 
 export class HostsPolicy {
@@ -1406,19 +1405,8 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     } catch (exception) {
       return false;
     }
-    if (kAllowedOrigins.includes(parsedURL.origin)) {
-      return true;
-    }
-    if (parsedURL.protocol === 'chrome:' || parsedURL.protocol === 'devtools:' ||
-        parsedURL.protocol === 'chrome-untrusted:' || parsedURL.protocol === 'chrome-error:' ||
-        parsedURL.protocol === 'chrome-search:') {
-      return false;
-    }
-    if (parsedURL.protocol.startsWith('http') && parsedURL.hostname.match(/^chrome\.google\.com\.?$/) &&
-        parsedURL.pathname.startsWith('/webstore')) {
-      return false;
-    }
-    if (parsedURL.protocol.startsWith('http') && parsedURL.hostname.match(/^chromewebstore\.google\.com\.?$/)) {
+
+    if (!kPermittedSchemes.includes(parsedURL.protocol)) {
       return false;
     }
 
@@ -1428,9 +1416,34 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       return false;
     }
 
+    if (this.#isUrlFromChromeWebStore(parsedURL)) {
+      return false;
+    }
+
     return true;
   }
 
+  /**
+   * Tests whether a given URL is from the Chrome web store to prevent the extension server from
+   * being injected. This is treated as separate from the `getOriginsForbiddenForExtensions` API because
+   * DevTools might not be being run from a native origin and we still want to lock down this specific
+   * origin from DevTools extensions.
+   *
+   * @param parsedURL The URL to check
+   * @returns `true` if the URL corresponds to the Chrome web store; otherwise `false`
+   */
+  static #isUrlFromChromeWebStore(parsedURL: URL): boolean {
+    if (parsedURL.protocol.startsWith('http') && parsedURL.hostname.match(/^chrome\.google\.com\.?$/) &&
+        parsedURL.pathname.startsWith('/webstore')) {
+      return true;
+    }
+    if (parsedURL.protocol.startsWith('http') && parsedURL.hostname.match(/^chromewebstore\.google\.com\.?$/)) {
+      return true;
+    }
+
+    return false;
+  }
+
   private disableExtensions(): void {
     this.extensionsEnabled = false;
   }

package/front_end/models/heap_snapshot_model/HeapSnapshotModel.ts

@@ -146,10 +146,12 @@ export class Aggregate {
 }
 
 export class AggregateForDiff {
+  name: string;
   indexes: number[];
   ids: number[];
   selfSizes: number[];
   constructor() {
+    this.name = '';
     this.indexes = [];
     this.ids = [];
     this.selfSizes = [];

package/front_end/models/issues_manager/CookieIssue.ts

@@ -8,6 +8,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as ThirdPartyWeb from '../../third_party/third-party-web/third-party-web.js';
 
 import {Issue, IssueCategory, IssueKind} from './Issue.js';
 import {
@@ -67,6 +68,23 @@ export const enum CookieIssueSubCategory {
   THIRD_PARTY_PHASEOUT_COOKIE = 'ThirdPartyPhaseoutCookie',
 }
 
+// Enum to show cookie status from the security panel's third-party cookie report tool
+export const enum CookieStatus {
+  BLOCKED = 0,
+  ALLOWED = 1,
+  ALLOWED_BY_GRACE_PERIOD = 2,
+  ALLOWED_BY_HEURISTICS = 3,
+}
+
+export interface CookieReportInfo {
+  name: string;
+  domain: string;
+  type?: string;
+  platform?: string;
+  status: CookieStatus;
+  recommendation?: string;
+}
+
 export class CookieIssue extends Issue {
   #issueDetails: Protocol.Audits.CookieIssueDetails;
 
@@ -77,7 +95,7 @@ export class CookieIssue extends Issue {
     this.#issueDetails = issueDetails;
   }
 
-  #cookieId(): string {
+  cookieId(): string {
     if (this.#issueDetails.cookie) {
       const {domain, path, name} = this.#issueDetails.cookie;
       const cookieId = `${domain};${path};${name}`;
@@ -88,7 +106,7 @@ export class CookieIssue extends Issue {
 
   primaryKey(): string {
     const requestId = this.#issueDetails.request ? this.#issueDetails.request.requestId : 'no-request';
-    return `${this.code()}-(${this.#cookieId()})-(${requestId})`;
+    return `${this.code()}-(${this.cookieId()})-(${requestId})`;
   }
 
   /**
@@ -197,6 +215,14 @@ export class CookieIssue extends Issue {
         reason === Protocol.Audits.CookieWarningReason.WarnSameSiteLaxCrossDowngradeStrict) {
       return [Protocol.Audits.InspectorIssueCode.CookieIssue, 'WarnCrossDowngrade', operation, secure].join('::');
     }
+
+    if (reason === Protocol.Audits.CookieExclusionReason.ExcludePortMismatch) {
+      return [Protocol.Audits.InspectorIssueCode.CookieIssue, 'ExcludePortMismatch'].join('::');
+    }
+
+    if (reason === Protocol.Audits.CookieExclusionReason.ExcludeSchemeMismatch) {
+      return [Protocol.Audits.InspectorIssueCode.CookieIssue, 'ExcludeSchemeMismatch'].join('::');
+    }
     return [Protocol.Audits.InspectorIssueCode.CookieIssue, reason, operation].join('::');
   }
 
@@ -245,6 +271,45 @@ export class CookieIssue extends Issue {
     return IssueKind.BREAKING_CHANGE;
   }
 
+  makeCookieReportEntry(): CookieReportInfo|undefined {
+    const status = CookieIssue.getCookieStatus(this.#issueDetails);
+    if (this.#issueDetails.cookie && this.#issueDetails.cookieUrl && status !== undefined) {
+      const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(this.#issueDetails.cookieUrl);
+      return {
+        name: this.#issueDetails.cookie.name,
+        domain: this.#issueDetails.cookie.domain,
+        type: entity?.category,
+        platform: entity?.name,
+        status,
+      };
+    }
+
+    return;
+  }
+
+  static getCookieStatus(cookieIssueDetails: Protocol.Audits.CookieIssueDetails): CookieStatus|undefined {
+    if (cookieIssueDetails.cookieExclusionReasons.includes(
+            Protocol.Audits.CookieExclusionReason.ExcludeThirdPartyPhaseout)) {
+      return CookieStatus.BLOCKED;
+    }
+
+    if (cookieIssueDetails.cookieWarningReasons.includes(
+            Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata)) {
+      return CookieStatus.ALLOWED_BY_GRACE_PERIOD;
+    }
+
+    if (cookieIssueDetails.cookieWarningReasons.includes(
+            Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic)) {
+      return CookieStatus.ALLOWED_BY_HEURISTICS;
+    }
+
+    if (cookieIssueDetails.cookieWarningReasons.includes(Protocol.Audits.CookieWarningReason.WarnThirdPartyPhaseout)) {
+      return CookieStatus.ALLOWED;
+    }
+
+    return;
+  }
+
   static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):
       CookieIssue[] {
     const cookieIssueDetails = inspectorIssue.details.cookieIssueDetails;
@@ -542,6 +607,16 @@ const cookieCrossSiteRedirectDowngrade: LazyMarkdownIssueDescription = {
   }],
 };
 
+const ExcludePortMismatch: LazyMarkdownIssueDescription = {
+  file: 'cookieExcludePortMismatch.md',
+  links: [],
+};
+
+const ExcludeSchemeMismatch: LazyMarkdownIssueDescription = {
+  file: 'cookieExcludeSchemeMismatch.md',
+  links: [],
+};
+
 // This description will be used by cookie issues that need to be added to the
 // issueManager, but aren't intended to be surfaced in the issues pane. This
 // is why they are using a placeholder description
@@ -600,4 +675,6 @@ const issueDescriptions: Map<string, LazyMarkdownIssueDescription> = new Map([
   ['CookieIssue::ExcludeThirdPartyPhaseout::ReadCookie', cookieExcludeThirdPartyPhaseoutRead],
   ['CookieIssue::ExcludeThirdPartyPhaseout::SetCookie', cookieExcludeThirdPartyPhaseoutSet],
   ['CookieIssue::CrossSiteRedirectDowngradeChangesInclusion', cookieCrossSiteRedirectDowngrade],
+  ['CookieIssue::ExcludePortMismatch', ExcludePortMismatch],
+  ['CookieIssue::ExcludeSchemeMismatch', ExcludeSchemeMismatch],
 ]);

package/front_end/models/issues_manager/IssuesManager.ts

@@ -129,7 +129,7 @@ const issueCodeHandlers = new Map<
  * Each issue reported by the backend can result in multiple `Issue` instances.
  * Handlers are simple functions hard-coded into a map.
  */
-function createIssuesFromProtocolIssue(
+export function createIssuesFromProtocolIssue(
     issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue): Issue[] {
   const handler = issueCodeHandlers.get(inspectorIssue.code);
   if (handler) {

package/front_end/models/issues_manager/descriptions/cookieExcludePortMismatch.md

@@ -0,0 +1,8 @@
+# Cookie was not sent due to port mismatch
+
+Cookies can only be accessed by origins that share the same port as the origin
+that initially set the cookie.
+
+If this cookie is required for the request, the cookie will need to be set by an
+origin with the same port as the request. Alternatively, you can utilize the
+Domain attribute, which allows access to a cookie with a mismatched port.

package/front_end/models/issues_manager/descriptions/cookieExcludeSchemeMismatch.md

@@ -0,0 +1,7 @@
+# Cookie was not sent due to scheme mismatch
+
+The cookie can only be accessed by origins that share the same scheme as
+the origin that initially set it.
+
+If this cookie is required for the request, the cookie will need to be set
+by an origin with the same scheme as the request.

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -322,6 +322,11 @@ export const NativeFunctions = [
     signatures: [["thisArg","...args"]],
     receivers: ["CallableFunction","NewableFunction"]
   },
+  {
+    name: "bind",
+    signatures: [["innerFunction","?thisArg","...args"]],
+    receivers: ["Performance"]
+  },
   {
     name: "charAt",
     signatures: [["pos"]]
@@ -812,6 +817,11 @@ export const NativeFunctions = [
     name: "push",
     signatures: [["...items"]]
   },
+  {
+    name: "reverse",
+    signatures: [["input","?options"]],
+    receivers: ["MLGraphBuilder"]
+  },
   {
     name: "sort",
     signatures: [["?compareFn"]],
@@ -1889,13 +1899,7 @@ export const NativeFunctions = [
   },
   {
     name: "deleteData",
-    signatures: [["offset","count"]],
-    receivers: ["CharacterData"]
-  },
-  {
-    name: "deleteData",
-    signatures: [["key"]],
-    receivers: ["LockScreenData"]
+    signatures: [["offset","count"]]
   },
   {
     name: "insertData",
@@ -2228,23 +2232,11 @@ export const NativeFunctions = [
   },
   {
     name: "getData",
-    signatures: [["format"]],
-    receivers: ["DataTransfer"]
-  },
-  {
-    name: "getData",
-    signatures: [["key"]],
-    receivers: ["LockScreenData"]
-  },
-  {
-    name: "setData",
-    signatures: [["format","data"]],
-    receivers: ["DataTransfer"]
+    signatures: [["format"]]
   },
   {
     name: "setData",
-    signatures: [["key","data"]],
-    receivers: ["LockScreenData"]
+    signatures: [["format","data"]]
   },
   {
     name: "setDragImage",
@@ -6524,10 +6516,6 @@ export const NativeFunctions = [
     name: "setHTML",
     signatures: [["html","?options"]]
   },
-  {
-    name: "getInnerHTML",
-    signatures: [["?options"]]
-  },
   {
     name: "scrollIntoViewIfNeeded",
     signatures: [["?centerIfNeeded"]]
@@ -6920,6 +6908,11 @@ export const NativeFunctions = [
     name: "CloseWatcher",
     signatures: [["?options"]]
   },
+  {
+    name: "requestClose",
+    signatures: [["?returnValue"]],
+    receivers: ["HTMLDialogElement"]
+  },
   {
     name: "reportEvent",
     signatures: [["event"]]
@@ -7740,6 +7733,10 @@ export const NativeFunctions = [
     name: "takePhoto",
     signatures: [["?photoSettings"]]
   },
+  {
+    name: "getAllRecords",
+    signatures: [["?options"]]
+  },
   {
     name: "only",
     signatures: [["value"]]

package/front_end/models/live-metrics/web-vitals-injected/{rollup.config.js → rollup.config.mjs}

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-const {terser} = require('../../../../node_modules/rollup-plugin-terser/rollup-plugin-terser.js');
+import terser from '@rollup/plugin-terser';
 
 /**
  * Checks if an env variable is true.

package/front_end/models/persistence/EditFileSystemView.ts

@@ -38,14 +38,18 @@ import {Events, IsolatedFileSystemManager} from './IsolatedFileSystemManager.js'
 import type {PlatformFileSystem} from './PlatformFileSystem.js';
 
 const UIStrings = {
+  /**
+   *@description Text in Edit File System View of the Workspace settings in Settings to indicate that the following string is a folder URL
+   */
+  url: 'URL',
   /**
    *@description Text in Edit File System View of the Workspace settings in Settings
    */
-  excludedFolders: 'Excluded folders',
+  excludedFolders: 'Excluded sub-folders',
   /**
    *@description Text to add something
    */
-  add: 'Add',
+  add: 'Add folder',
   /**
    * @description Placeholder text for an area of the UI that shows which folders have been excluded
    * from being show in DevTools. When the user has not yet chosen any folders to exclude, this text
@@ -91,13 +95,13 @@ export class EditFileSystemView extends UI.Widget.VBox implements UI.ListWidget.
       IsolatedFileSystemManager.instance().addEventListener(Events.ExcludedFolderRemoved, this.update, this),
     ];
 
-    const excludedFoldersHeader = this.contentElement.createChild('div', 'file-system-header');
-    excludedFoldersHeader.createChild('div', 'file-system-header-text').textContent =
-        i18nString(UIStrings.excludedFolders);
-    const addButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.add), this.addExcludedFolderButtonClicked.bind(this),
-        {className: 'add-button', jslogContext: 'settings.add-excluded-folder'});
-    excludedFoldersHeader.appendChild(addButton);
+    const excludedFoldersHeader = this.contentElement.createChild('div', 'excluded-folder-header');
+    excludedFoldersHeader.createChild('span', 'url-header').textContent = i18nString(UIStrings.url);
+    excludedFoldersHeader.createChild('span', 'excluded-folder-url').textContent = fileSystemPath;
+
+    const excludeSubFoldersText = this.contentElement.createChild('span', 'exclude-subfolders-text');
+    excludeSubFoldersText.textContent = i18nString(UIStrings.excludedFolders);
+
     this.excludedFoldersList = new UI.ListWidget.ListWidget(this);
     this.excludedFoldersList.element.classList.add('file-system-list');
 
@@ -107,6 +111,12 @@ export class EditFileSystemView extends UI.Widget.VBox implements UI.ListWidget.
     this.excludedFoldersList.setEmptyPlaceholder(excludedFoldersPlaceholder);
     this.excludedFoldersList.show(this.contentElement);
 
+    const addButton = UI.UIUtils.createTextButton(
+        i18nString(UIStrings.add), this.addExcludedFolderButtonClicked.bind(this),
+        {className: 'add-button', jslogContext: 'settings.add-excluded-folder'});
+
+    this.contentElement.appendChild(addButton);
+
     this.update();
   }
 
@@ -118,7 +128,7 @@ export class EditFileSystemView extends UI.Widget.VBox implements UI.ListWidget.
     return IsolatedFileSystemManager.instance().fileSystem(this.fileSystemPath) as PlatformFileSystem;
   }
 
-  private update(): void {
+  override update(): void {
     if (this.muteUpdate) {
       return;
     }

package/front_end/models/persistence/WorkspaceSettingsTab.ts

@@ -4,6 +4,7 @@
 
 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 UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -27,11 +28,11 @@ const UIStrings = {
   /**
    *@description Text of the add button in Workspace Settings Tab of the Workspace settings in Settings
    */
-  addFolder: 'Add folder…',
+  addFolder: 'Add folder',
   /**
    *@description Label element text content in Workspace Settings Tab of the Workspace settings in Settings
    */
-  folderExcludePattern: 'Folder exclude pattern',
+  folderExcludePattern: 'Exclude from workspace',
   /**
    *@description Label for an item to remove something
    */
@@ -42,7 +43,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class WorkspaceSettingsTab extends UI.Widget.VBox {
   containerElement: HTMLElement;
-  private readonly fileSystemsListContainer: HTMLElement;
+  #addButtonContainer: HTMLElement;
   private readonly elementByPath: Map<Platform.DevToolsPath.UrlString, Element>;
   private readonly mappingViewByPath: Map<Platform.DevToolsPath.UrlString, EditFileSystemView>;
 
@@ -51,12 +52,9 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('workspace')}`);
 
-    this.element.classList.add('workspace-settings-tab');
-    const header = this.element.createChild('header');
-    UI.UIUtils.createTextChild(header.createChild('h1'), i18nString(UIStrings.workspace));
-
-    this.containerElement = this.element.createChild('div', 'settings-container-wrapper')
-                                .createChild('div', 'settings-tab settings-content settings-container');
+    this.containerElement =
+        this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
+    this.containerElement.classList.add('settings-card-container');
 
     IsolatedFileSystemManager.instance().addEventListener(
         Events.FileSystemAdded, event => this.fileSystemAdded(event.data), this);
@@ -65,27 +63,31 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
 
     const folderExcludePatternInput = this.createFolderExcludePatternInput();
     folderExcludePatternInput.classList.add('folder-exclude-pattern');
-    this.containerElement.appendChild(folderExcludePatternInput);
-
-    const div = this.containerElement.createChild('div', 'settings-info-message');
-    UI.UIUtils.createTextChild(div, i18nString(UIStrings.mappingsAreInferredAutomatically));
+    const mappingsAreInferredInfo = document.createElement('div');
+    mappingsAreInferredInfo.classList.add('mappings-info');
+    UI.UIUtils.createTextChild(mappingsAreInferredInfo, i18nString(UIStrings.mappingsAreInferredAutomatically));
 
-    this.fileSystemsListContainer = this.containerElement.createChild('div', '');
-
-    const addButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.addFolder), this.addFileSystemClicked.bind(this),
-        {jslogContext: 'sources.add-folder-to-workspace'});
-    this.containerElement.appendChild(addButton);
-    this.setDefaultFocusedElement(addButton);
+    const card = new Cards.Card.Card();
+    this.containerElement.appendChild(card);
+    card.data = {
+      heading: i18nString(UIStrings.workspace),
+      content: [folderExcludePatternInput, mappingsAreInferredInfo],
+    };
 
     this.elementByPath = new Map();
-
     this.mappingViewByPath = new Map();
 
     const fileSystems = IsolatedFileSystemManager.instance().fileSystems();
     for (let i = 0; i < fileSystems.length; ++i) {
       this.addItem(fileSystems[i]);
     }
+
+    this.#addButtonContainer = this.containerElement.createChild('div', 'add-button-container');
+    const addButton = UI.UIUtils.createTextButton(
+        i18nString(UIStrings.addFolder), this.addFileSystemClicked.bind(this),
+        {jslogContext: 'sources.add-folder-to-workspace'});
+    addButton.classList.add('add-folder');
+    this.#addButtonContainer.appendChild(addButton);
   }
 
   override wasShown(): void {
@@ -93,19 +95,20 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
     this.registerCSSFiles([workspaceSettingsTabStyles]);
   }
 
-  private createFolderExcludePatternInput(): Element {
-    const p = document.createElement('p');
-    const labelElement = p.createChild('label');
+  private createFolderExcludePatternInput(): HTMLElement {
+    const excludePatternElement = document.createElement('div');
+    excludePatternElement.classList.add('folder-exclude-pattern');
+    const labelElement = excludePatternElement.createChild('label');
     labelElement.textContent = i18nString(UIStrings.folderExcludePattern);
     const folderExcludeSetting = IsolatedFileSystemManager.instance().workspaceFolderExcludePatternSetting();
     const inputElement = UI.UIUtils.createInput('', 'text', folderExcludeSetting.name);
     UI.ARIAUtils.bindLabelToControl(labelElement, inputElement);
-    p.appendChild(inputElement);
+    excludePatternElement.appendChild(inputElement);
     const setValue =
         UI.UIUtils.bindInput(inputElement, folderExcludeSetting.set.bind(folderExcludeSetting), regexValidator, false);
     folderExcludeSetting.addChangeListener(() => setValue.call(null, folderExcludeSetting.get()));
     setValue(folderExcludeSetting.get());
-    return p;
+    return excludePatternElement;
 
     function regexValidator(value: string): {valid: boolean, errorMessage: (string|undefined)} {
       let regex;
@@ -129,41 +132,34 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
             fileSystem) {
       return;
     }
-    const element = this.renderFileSystem(fileSystem);
-    this.elementByPath.set(fileSystem.path(), element);
-
-    this.fileSystemsListContainer.appendChild(element);
-
+    const filename = this.getFilename(fileSystem);
+    const removeButton = UI.UIUtils.createTextButton(
+        i18nString(UIStrings.remove), this.removeFileSystemClicked.bind(this, fileSystem),
+        {jslogContext: 'settings.remove-file-system'});
+
+    const mappingViewContainer = document.createElement('div');
+    mappingViewContainer.classList.add('mapping-view-container');
+    const fileSystemExcludeCard = new Cards.Card.Card();
+    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');
-    mappingView.show(element);
+
+    mappingView.show(mappingViewContainer);
+
+    this.elementByPath.set(fileSystem.path(), fileSystemExcludeCard);
   }
 
-  private renderFileSystem(fileSystem: PlatformFileSystem): Element {
+  private getFilename(fileSystem: PlatformFileSystem): string {
     const fileSystemPath = fileSystem.path();
     const lastIndexOfSlash = fileSystemPath.lastIndexOf('/');
-    const folderName = fileSystemPath.substr(lastIndexOfSlash + 1);
-
-    const element = document.createElement('div');
-    element.classList.add('file-system-container');
-    const header = element.createChild('div', 'file-system-header');
-
-    const nameElement = header.createChild('div', 'file-system-name');
-    nameElement.textContent = folderName;
-    UI.ARIAUtils.markAsHeading(nameElement, 2);
-    const path = header.createChild('div', 'file-system-path');
-    path.textContent = fileSystemPath;
-    UI.Tooltip.Tooltip.install(path, fileSystemPath);
-
-    const toolbar = new UI.Toolbar.Toolbar('');
-    const button =
-        new UI.Toolbar.ToolbarButton(i18nString(UIStrings.remove), 'cross', undefined, 'settings.remove-file-system');
-    button.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.removeFileSystemClicked.bind(this, fileSystem));
-    toolbar.appendToolbarItem(button);
-    header.appendChild(toolbar.element);
-
-    return element;
+    return fileSystemPath.substr(lastIndexOfSlash + 1);
   }
 
   private removeFileSystemClicked(fileSystem: PlatformFileSystem): void {