chrome-devtools-frontend 1.0.1681498 → 1.0.1682249

package/front_end/panels/security/SecurityPanelSidebar.ts

@@ -1,24 +1,22 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Platform from '../../core/platform/platform.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
 import type {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 
 import lockIconStyles from './lockIcon.css.js';
-import {OriginTreeElement} from './OriginTreeElement.js';
 import {
   createHighlightedUrl,
   getSecurityStateIconForDetailedView,
   getSecurityStateIconForOverview,
   OriginGroup,
 } from './SecurityPanel.js';
-import type {SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
 import sidebarStyles from './sidebar.css.js';
 
 const UIStrings = {
@@ -55,247 +53,289 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/security/SecurityPanelSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class SecurityPanelSidebar extends UI.Widget.VBox {
-  readonly #securitySidebarLastItemSetting: Common.Settings.Setting<string>;
-  readonly sidebarTree: UI.TreeOutline.TreeOutlineInShadow;
-  readonly #originGroupTitles: Map<OriginGroup, {title: string, icon?: Icon}>;
-  #originGroups: Map<OriginGroup, UI.TreeOutline.TreeElement>;
-  securityOverviewElement: OriginTreeElement;
-  readonly #elementsByOrigin: Map<string, OriginTreeElement>;
-  readonly #mainViewReloadMessage: UI.TreeOutline.TreeElement;
-  #mainOrigin: string|null;
-
-  constructor(element?: HTMLElement) {
-    super(element);
-
-    this.#securitySidebarLastItemSetting =
-        Common.Settings.Settings.instance().createSetting('security-last-selected-element-path', '');
-    this.#mainOrigin = null;
-
-    this.sidebarTree = new UI.TreeOutline.TreeOutlineInShadow(UI.TreeOutline.TreeVariant.NAVIGATION_TREE);
-    this.sidebarTree.registerRequiredCSS(lockIconStyles, sidebarStyles);
-    this.sidebarTree.element.classList.add('security-sidebar');
-    this.contentElement.appendChild(this.sidebarTree.element);
-
-    const securitySectionTitle = i18nString(UIStrings.security);
-    const securityTreeSection = this.#addSidebarSection(securitySectionTitle, 'security');
-
-    this.securityOverviewElement =
-        new OriginTreeElement('security-main-view-sidebar-tree-item', this.#renderTreeElement);
-    this.securityOverviewElement.tooltip = i18nString(UIStrings.overview);
-    securityTreeSection.appendChild(this.securityOverviewElement);
-
-    this.#originGroupTitles = new Map([
-      [OriginGroup.MainOrigin, {title: i18nString(UIStrings.mainOrigin)}],
-      [
-        OriginGroup.NonSecure,
-        {
-          title: i18nString(UIStrings.nonsecureOrigins),
-          icon: getSecurityStateIconForDetailedView(
-              Protocol.Security.SecurityState.Insecure,
-              `lock-icon lock-icon-${Protocol.Security.SecurityState.Insecure}`),
-        },
-      ],
-      [
-        OriginGroup.Secure,
-        {
-          title: i18nString(UIStrings.secureOrigins),
-          icon: getSecurityStateIconForDetailedView(
-              Protocol.Security.SecurityState.Secure, `lock-icon lock-icon-${Protocol.Security.SecurityState.Secure}`),
-        },
-      ],
-      [
-        OriginGroup.Unknown,
-        {
-          title: i18nString(UIStrings.unknownCanceled),
-          icon: getSecurityStateIconForDetailedView(
-              Protocol.Security.SecurityState.Unknown,
-              `lock-icon lock-icon-${Protocol.Security.SecurityState.Unknown}`),
-        },
-      ],
-    ]);
-
-    this.#originGroups = new Map();
-    for (const group of Object.values(OriginGroup)) {
-      const element = this.#createOriginGroupElement(
-          this.#originGroupTitles.get(group)?.title as string, this.#originGroupTitles.get(group)?.icon);
-      this.#originGroups.set(group, element);
-      securityTreeSection.appendChild(element);
-    }
-
-    this.#mainViewReloadMessage = new UI.TreeOutline.TreeElement(i18nString(UIStrings.reloadToViewDetails));
-    this.#mainViewReloadMessage.selectable = false;
-    this.#mainViewReloadMessage.listItemElement.classList.add('security-main-view-reload-message');
-    const treeElement = this.#originGroups.get(OriginGroup.MainOrigin);
-    (treeElement as UI.TreeOutline.TreeElement).appendChild(this.#mainViewReloadMessage);
+export interface ViewInput {
+  mainOrigin: string|null;
+  origins: Map<Platform.DevToolsPath.UrlString, Protocol.Security.SecurityState>;
+  originsHidden: boolean;
+  showOriginsUnconditionally: boolean;
+  overviewSecurityState: Protocol.Security.SecurityState;
+  selectedElementId: string;
+}
 
-    this.#clearOriginGroups();
+export interface ViewOutput {
+  onElementSelected: (id: string) => void;
+  onShowOrigin: (origin: Platform.DevToolsPath.UrlString|null) => void;
+}
 
-    this.#elementsByOrigin = new Map();
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const renderIcon = (icon: Icon): TemplateResult => html`${icon}`;
+
+  const renderOrigin =
+      (origin: Platform.DevToolsPath.UrlString, state: Protocol.Security.SecurityState): TemplateResult => {
+        const icon = getSecurityStateIconForDetailedView(state, `security-property security-property-${state}`);
+        const selected = input.selectedElementId === origin;
+        // clang-format off
+        return html`
+          <li role="treeitem"
+              class="security-sidebar-tree-item"
+              title=${origin}
+              ?selected=${selected}
+              @click=${() => {
+                output.onElementSelected(origin);
+                output.onShowOrigin(origin);
+              }}>
+            ${renderIcon(icon)}
+            ${createHighlightedUrl(origin, state)}
+          </li>
+        `;
+        // clang-format on
+      };
+
+  const getGroupTitle = (group: OriginGroup): string => {
+    switch (group) {
+      case OriginGroup.MainOrigin:
+        return i18nString(UIStrings.mainOrigin);
+      case OriginGroup.NonSecure:
+        return i18nString(UIStrings.nonsecureOrigins);
+      case OriginGroup.Secure:
+        return i18nString(UIStrings.secureOrigins);
+      case OriginGroup.Unknown:
+        return i18nString(UIStrings.unknownCanceled);
+    }
+  };
+
+  const getGroupIcon = (group: OriginGroup, mainOriginState = Protocol.Security.SecurityState.Unknown): Icon|null => {
+    switch (group) {
+      case OriginGroup.MainOrigin:
+        return getSecurityStateIconForOverview(mainOriginState, `lock-icon lock-icon-${mainOriginState}`);
+      case OriginGroup.NonSecure:
+        return getSecurityStateIconForDetailedView(Protocol.Security.SecurityState.Insecure,
+                                                   `lock-icon lock-icon-${Protocol.Security.SecurityState.Insecure}`);
+      case OriginGroup.Secure:
+        return getSecurityStateIconForDetailedView(Protocol.Security.SecurityState.Secure,
+                                                   `lock-icon lock-icon-${Protocol.Security.SecurityState.Secure}`);
+      case OriginGroup.Unknown:
+        return getSecurityStateIconForDetailedView(Protocol.Security.SecurityState.Unknown,
+                                                   `lock-icon lock-icon-${Protocol.Security.SecurityState.Unknown}`);
+    }
+  };
 
-    this.element.addEventListener('update-sidebar-selection', (event: Event) => {
-      const id: string = (event as CustomEvent).detail.id;
-      this.#securitySidebarLastItemSetting.set(id);
-    });
-    this.showLastSelectedElement();
+  const originsByGroup =
+      new Map<OriginGroup, Array<{origin: Platform.DevToolsPath.UrlString, state: Protocol.Security.SecurityState}>>();
+  for (const group of Object.values(OriginGroup)) {
+    originsByGroup.set(group, []);
   }
 
-  // Used in web tests
-  elementsByOrigin(): Map<string, OriginTreeElement> {
-    return this.#elementsByOrigin;
+  let mainOriginState = Protocol.Security.SecurityState.Unknown;
+  const overviewIcon = getSecurityStateIconForOverview(input.overviewSecurityState,
+                                                       'lock-icon lock-icon-' + input.overviewSecurityState);
+  for (const [origin, state] of input.origins) {
+    if (origin === input.mainOrigin) {
+      originsByGroup.get(OriginGroup.MainOrigin)?.push({origin, state});
+      mainOriginState = state;
+    } else {
+      switch (state) {
+        case Protocol.Security.SecurityState.Secure:
+          originsByGroup.get(OriginGroup.Secure)?.push({origin, state});
+          break;
+        case Protocol.Security.SecurityState.Unknown:
+          originsByGroup.get(OriginGroup.Unknown)?.push({origin, state});
+          break;
+        default:
+          originsByGroup.get(OriginGroup.NonSecure)?.push({origin, state});
+          break;
+      }
+    }
   }
 
-  showLastSelectedElement(): void {
-    this.securityOverviewElement.select();
-    this.securityOverviewElement.showElement();
-  }
+  const renderGroup = (group: OriginGroup): TemplateResult => {
+    const origins = originsByGroup.get(group) || [];
+    const title = getGroupTitle(group);
+    const icon = getGroupIcon(group, mainOriginState);
+    const isHidden = input.originsHidden ||
+        (!input.showOriginsUnconditionally && group !== OriginGroup.MainOrigin && origins.length === 0);
+    const showReloadMessage = group === OriginGroup.MainOrigin && input.origins.size === 0;
+
+    // clang-format off
+    return html`
+      <li role="treeitem" class="security-sidebar-origins" open ?hidden=${isHidden}>
+        ${icon ? renderIcon(icon) : nothing}
+        <span class="security-sidebar-origins-title">${title}</span>
+        <ul role="group" aria-label=${title}>
+          ${showReloadMessage ? html`
+            <li role="treeitem" class="security-main-view-reload-message" aria-disabled="true">
+              ${i18nString(UIStrings.reloadToViewDetails)}
+            </li>
+          ` : nothing}
+          ${origins.map(o => renderOrigin(o.origin, o.state))}
+        </ul>
+      </li>
+    `;
+    // clang-format on
+  };
+
+  // clang-format off
+  render(html`
+    <devtools-tree class="security-sidebar" navigation-variant .template=${html`
+      <ul role="tree">
+        <li role="treeitem" class="security-group-list-item" aria-level="3" aria-label=${i18nString(UIStrings.security)}>
+          ${i18nString(UIStrings.security)}
+          <ul role="group">
+            <li role="treeitem"
+                class="security-main-view-sidebar-tree-item"
+                title=${i18nString(UIStrings.overview)}
+                ?selected=${input.selectedElementId === 'overview'}
+                @click=${() => {
+                  output.onElementSelected('overview');
+                  output.onShowOrigin(null);
+                }}>
+              ${renderIcon(overviewIcon)}
+              <span title=${i18nString(UIStrings.overview)}>${i18nString(UIStrings.overview)}</span>
+            </li>
+            ${Object.values(OriginGroup).map(group => renderGroup(group))}
+          </ul>
+        </li>
+      </ul>
+    `}></devtools-tree>
+  `, target);
+  // clang-format on
+};
+
+export class SecurityPanelSidebar extends UI.Widget.VBox {
+  readonly #securitySidebarLastItemSetting: Common.Settings.Setting<string>;
+  #mainOrigin: string|null = null;
+  #origins = new Map<Platform.DevToolsPath.UrlString, Protocol.Security.SecurityState>();
+  #originsHidden = false;
+  #showOriginsUnconditionally = false;
+  #overviewSecurityState = Protocol.Security.SecurityState.Unknown;
+  #selectedElementId = 'overview';
+  readonly #view: View;
+  #onShowOrigin?: (origin: Platform.DevToolsPath.UrlString|null) => void;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+    this.registerRequiredCSS(lockIconStyles, sidebarStyles);
 
-  #addSidebarSection(title: string, jslogContext: string): UI.TreeOutline.TreeElement {
-    const treeElement = new UI.TreeOutline.TreeElement(title, true, jslogContext);
-    treeElement.listItemElement.classList.add('security-group-list-item');
-    treeElement.setCollapsible(false);
-    treeElement.selectable = false;
-    this.sidebarTree.appendChild(treeElement);
-    UI.ARIAUtils.markAsHeading(treeElement.listItemElement, 3);
-    UI.ARIAUtils.setLabel(treeElement.childrenListElement, title);
-    return treeElement;
+    this.#securitySidebarLastItemSetting =
+        Common.Settings.Settings.instance().createSetting('security-last-selected-element-path', '');
   }
 
-  #originGroupTitle(originGroup: OriginGroup): string {
-    return this.#originGroupTitles.get(originGroup)?.title as string;
+  set onShowOrigin(callback: (origin: Platform.DevToolsPath.UrlString|null) => void) {
+    this.#onShowOrigin = callback;
   }
 
-  #originGroupElement(originGroup: OriginGroup): UI.TreeOutline.TreeElement {
-    return this.#originGroups.get(originGroup) as UI.TreeOutline.TreeElement;
+  override wasShown(): void {
+    super.wasShown();
+    this.showLastSelectedElement();
   }
 
-  #createOriginGroupElement(originGroupTitle: string, originGroupIcon?: Icon): UI.TreeOutline.TreeElement {
-    const originGroup = new UI.TreeOutline.TreeElement(originGroupTitle, true);
-    originGroup.expand();
-    originGroup.listItemElement.classList.add('security-sidebar-origins');
-    if (originGroupIcon) {
-      originGroup.setLeadingIcons([originGroupIcon]);
-    }
-    UI.ARIAUtils.setLabel(originGroup.childrenListElement, originGroupTitle);
-    return originGroup;
+  showLastSelectedElement(): void {
+    this.#selectedElementId = 'overview';
+    this.#securitySidebarLastItemSetting.set('overview');
+    this.requestUpdate();
+    this.#onShowOrigin?.(null);
   }
 
   toggleOriginsList(hidden: boolean): void {
-    for (const element of this.#originGroups.values()) {
-      element.hidden = hidden;
-    }
+    this.#originsHidden = hidden;
+    this.#showOriginsUnconditionally = !hidden;
+    this.requestUpdate();
   }
 
   addOrigin(origin: Platform.DevToolsPath.UrlString, securityState: Protocol.Security.SecurityState): void {
-    this.#mainViewReloadMessage.hidden = true;
-    const originElement = new OriginTreeElement('security-sidebar-tree-item', this.#renderTreeElement, origin);
-    originElement.tooltip = origin;
-    this.#elementsByOrigin.set(origin, originElement);
-    this.updateOrigin(origin, securityState);
+    this.#origins.set(origin, securityState);
+    this.requestUpdate();
   }
 
   setMainOrigin(origin: string): void {
     this.#mainOrigin = origin;
+    this.requestUpdate();
   }
 
   get mainOrigin(): string|null {
     return this.#mainOrigin;
   }
 
-  get originGroups(): Map<OriginGroup, UI.TreeOutline.TreeElement> {
-    return this.#originGroups;
+  updateOrigin(origin: Platform.DevToolsPath.UrlString, securityState: Protocol.Security.SecurityState): void {
+    this.#origins.set(origin, securityState);
+    this.requestUpdate();
   }
 
-  updateOrigin(origin: string, securityState: Protocol.Security.SecurityState): void {
-    const originElement = this.#elementsByOrigin.get(origin) as OriginTreeElement;
-    originElement.setSecurityState(securityState);
-
-    let newParent: UI.TreeOutline.TreeElement;
-    if (origin === this.#mainOrigin) {
-      newParent = this.#originGroups.get(OriginGroup.MainOrigin) as UI.TreeOutline.TreeElement;
-      newParent.title = i18nString(UIStrings.mainOrigin);
-      if (securityState === Protocol.Security.SecurityState.Secure) {
-        newParent.setLeadingIcons(
-            [getSecurityStateIconForOverview(securityState, `lock-icon lock-icon-${securityState}`)]);
-      } else {
-        newParent.setLeadingIcons(
-            [getSecurityStateIconForOverview(securityState, `lock-icon lock-icon-${securityState}`)]);
-      }
-      UI.ARIAUtils.setLabel(newParent.childrenListElement, newParent.title);
-    } else {
-      switch (securityState) {
-        case Protocol.Security.SecurityState.Secure:
-          newParent = this.#originGroupElement(OriginGroup.Secure);
-          break;
-        case Protocol.Security.SecurityState.Unknown:
-          newParent = this.#originGroupElement(OriginGroup.Unknown);
-          break;
-        default:
-          newParent = this.#originGroupElement(OriginGroup.NonSecure);
-          break;
-      }
-    }
+  updateOverviewSecurityState(securityState: Protocol.Security.SecurityState): void {
+    this.#overviewSecurityState = securityState;
+    this.requestUpdate();
+  }
 
-    const oldParent = originElement.parent;
-    if (oldParent !== newParent) {
-      if (oldParent) {
-        oldParent.removeChild(originElement);
-        if (oldParent.childCount() === 0) {
-          oldParent.hidden = true;
-        }
-      }
-      newParent.appendChild(originElement);
-      newParent.hidden = false;
-    }
+  clearOrigins(): void {
+    this.#origins.clear();
+    this.requestUpdate();
   }
 
-  #clearOriginGroups(): void {
-    for (const [originGroup, originGroupElement] of this.#originGroups) {
-      if (originGroup === OriginGroup.MainOrigin) {
-        for (let i = originGroupElement.childCount() - 1; i > 0; i--) {
-          originGroupElement.removeChildAtIndex(i);
-        }
-        originGroupElement.title = this.#originGroupTitle(OriginGroup.MainOrigin);
-        originGroupElement.hidden = false;
-        this.#mainViewReloadMessage.hidden = false;
-      } else {
-        originGroupElement.removeChildren();
-        originGroupElement.hidden = true;
-      }
+  // Used in web tests
+  elementsByOrigin(): Map<string, {
+    select: (omitFocus?: boolean, selectedByUser?: boolean) => void,
+    showElement: () => void,
+    origin: () => string,
+    securityState: () => Protocol.Security.SecurityState | undefined,
+  }> {
+    const map = new Map<string, {
+      select: (omitFocus?: boolean, selectedByUser?: boolean) => void,
+      showElement: () => void,
+      origin: () => string,
+      securityState: () => Protocol.Security.SecurityState | undefined,
+    }>();
+    for (const [origin, state] of this.#origins.entries()) {
+      const element = {
+        select: () => {
+          this.#selectedElementId = origin;
+          this.#securitySidebarLastItemSetting.set(origin);
+          this.requestUpdate();
+          this.#onShowOrigin?.(origin);
+        },
+        showElement: () => {
+          this.#onShowOrigin?.(origin);
+        },
+        origin: () => origin,
+        securityState: () => state,
+      };
+      map.set(origin, element);
     }
+    return map;
   }
 
-  clearOrigins(): void {
-    this.#clearOriginGroups();
-    this.#elementsByOrigin.clear();
+  set selectedOrigin(origin: Platform.DevToolsPath.UrlString|null) {
+    this.#selectedElementId = origin ?? 'overview';
+    this.#securitySidebarLastItemSetting.set(this.#selectedElementId);
+    this.requestUpdate();
+    this.#onShowOrigin?.(origin);
   }
 
-  override focus(): void {
-    this.sidebarTree.focus();
+  get selectedOrigin(): string {
+    return this.#selectedElementId;
   }
 
-  #renderTreeElement(element: SecurityPanelSidebarTreeElement): void {
-    if (element instanceof OriginTreeElement) {
-      const securityState = element.securityState() ?? Protocol.Security.SecurityState.Unknown;
-
-      const isOverviewElement = element.listItemElement.classList.contains('security-main-view-sidebar-tree-item');
-
-      const icon = isOverviewElement ?
-          getSecurityStateIconForOverview(securityState, `lock-icon lock-icon-${securityState}`) :
-          getSecurityStateIconForDetailedView(securityState, `security-property security-property-${securityState}`);
-
-      element.setLeadingIcons([icon]);
-
-      if (isOverviewElement) {
-        element.title = i18nString(UIStrings.overview);
-      } else {
-        const elementTitle =
-            createHighlightedUrl(element.origin() ?? Platform.DevToolsPath.EmptyUrlString, securityState);
-        if (element.listItemElement.lastChild) {
-          element.listItemElement.removeChild(element.listItemElement.lastChild);
-        }
-        element.listItemElement.appendChild(elementTitle);
-      }
-    }
+  override performUpdate(): void {
+    const input: ViewInput = {
+      mainOrigin: this.#mainOrigin,
+      origins: this.#origins,
+      originsHidden: this.#originsHidden,
+      showOriginsUnconditionally: this.#showOriginsUnconditionally,
+      overviewSecurityState: this.#overviewSecurityState,
+      selectedElementId: this.#selectedElementId,
+    };
+    const output: ViewOutput = {
+      onElementSelected: (id: string) => {
+        this.#selectedElementId = id;
+        this.#securitySidebarLastItemSetting.set(id);
+        this.requestUpdate();
+      },
+      onShowOrigin: (origin: Platform.DevToolsPath.UrlString|null) => {
+        this.#onShowOrigin?.(origin);
+      },
+    };
+    this.#view(input, output, this.contentElement);
   }
 }

package/front_end/panels/security/security.ts

@@ -2,16 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as OriginTreeElement from './OriginTreeElement.js';
 import * as SecurityModel from './SecurityModel.js';
 import * as SecurityPanel from './SecurityPanel.js';
 import * as SecurityPanelSidebar from './SecurityPanelSidebar.js';
-import * as SecurityPanelSidebarTreeElement from './SecurityPanelSidebarTreeElement.js';
 
 export {
-  OriginTreeElement,
   SecurityModel,
   SecurityPanel,
   SecurityPanelSidebar,
-  SecurityPanelSidebarTreeElement,
 };

package/front_end/panels/settings/EditFileSystemView.ts

@@ -6,7 +6,7 @@ import '../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import type {PlatformFileSystem} from '../../models/persistence/PlatformFileSystem.js';
+import type * as Persistence from '../../models/persistence/persistence.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, render} from '../../ui/lit/lit.js';
 
@@ -104,7 +104,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 export class EditFileSystemView extends UI.Widget.VBox {
-  #fileSystem?: PlatformFileSystem;
+  #fileSystem?: Persistence.PlatformFileSystem.PlatformFileSystem;
   #excludedFolderPaths: PathWithStatus[] = [];
   readonly #view: View;
 
@@ -113,7 +113,7 @@ export class EditFileSystemView extends UI.Widget.VBox {
     this.#view = view;
   }
 
-  set fileSystem(fileSystem: PlatformFileSystem) {
+  set fileSystem(fileSystem: Persistence.PlatformFileSystem.PlatformFileSystem) {
     this.#fileSystem = fileSystem;
     this.#resyncExcludedFolderPaths();
     this.requestUpdate();
@@ -126,10 +126,11 @@ export class EditFileSystemView extends UI.Widget.VBox {
   }
 
   #resyncExcludedFolderPaths(): void {
-    this.#excludedFolderPaths = this.#fileSystem?.excludedFolders()
-                                    .values()
-                                    .map(path => ({path, status: ExcludedFolderStatus.VALID}))
-                                    .toArray() ??
+    this.#excludedFolderPaths =
+        this.#fileSystem?.excludedFolders()
+            .values()
+            .map((path: Platform.DevToolsPath.EncodedPathString) => ({path, status: ExcludedFolderStatus.VALID}))
+            .toArray() ??
         [];
   }
 

package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -7,6 +7,7 @@ import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
@@ -111,7 +112,8 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
 
     const ignoreListingDescription = document.createElement('span');
     ignoreListingDescription.textContent = i18nString(UIStrings.ignoreListingDescription);
-    const enabledSetting = Common.Settings.Settings.instance().moduleSetting('enable-ignore-listing');
+    const enabledSetting =
+        Common.Settings.Settings.instance().resolve(Workspace.IgnoreListManager.enableIgnoreListingSettingDescriptor);
     const enableIgnoreListing = this.contentElement.createChild('div', 'enable-ignore-listing');
     enableIgnoreListing.appendChild(
         SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.ignoreListing), enabledSetting));
@@ -123,17 +125,18 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
 
     const generalExclusionGroup = this.createSettingGroup();
     generalExclusionGroup.classList.add('general-exclusion-group');
-    const ignoreListContentScripts =
-        generalExclusionGroup.createChild('div', 'ignore-list-option')
-            .appendChild(SettingsUI.SettingsUI.createSettingCheckbox(
-                i18nString(UIStrings.ignoreListContentScripts),
-                Common.Settings.Settings.instance().moduleSetting('skip-content-scripts')));
+    const ignoreListContentScripts = generalExclusionGroup.createChild('div', 'ignore-list-option')
+                                         .appendChild(SettingsUI.SettingsUI.createSettingCheckbox(
+                                             i18nString(UIStrings.ignoreListContentScripts),
+                                             Common.Settings.Settings.instance().resolve(
+                                                 Workspace.IgnoreListManager.skipContentScriptsSettingDescriptor)));
 
     const automaticallyIgnoreListContainer = generalExclusionGroup.createChild('div', 'ignore-list-option');
     const automaticallyIgnoreList =
         automaticallyIgnoreListContainer.appendChild(SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.automaticallyIgnoreListKnownThirdPartyScripts),
-            Common.Settings.Settings.instance().moduleSetting('automatically-ignore-list-known-third-party-scripts')));
+            Common.Settings.Settings.instance().resolve(
+                Workspace.IgnoreListManager.automaticallyIgnoreListKnownThirdPartyScriptsSettingDescriptor)));
 
     const automaticallyIgnoreLinkButton = new Buttons.Button.Button();
     automaticallyIgnoreLinkButton.data = {
@@ -149,11 +152,11 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
             'https://developer.chrome.com/docs/devtools/settings/ignore-list/#skip-third-party'));
     automaticallyIgnoreListContainer.appendChild(automaticallyIgnoreLinkButton);
 
-    const ignoreListAnonymousScripts =
-        generalExclusionGroup.createChild('div', 'ignore-list-option')
-            .appendChild(SettingsUI.SettingsUI.createSettingCheckbox(
-                i18nString(UIStrings.ignoreListAnonymousScripts),
-                Common.Settings.Settings.instance().moduleSetting('skip-anonymous-scripts')));
+    const ignoreListAnonymousScripts = generalExclusionGroup.createChild('div', 'ignore-list-option')
+                                           .appendChild(SettingsUI.SettingsUI.createSettingCheckbox(
+                                               i18nString(UIStrings.ignoreListAnonymousScripts),
+                                               Common.Settings.Settings.instance().resolve(
+                                                   Workspace.IgnoreListManager.skipAnonymousScriptsSettingDescriptor)));
 
     const generalExclusionGroupCard = settingsContent.createChild('devtools-card', 'ignore-list-options');
     generalExclusionGroupCard.heading = i18nString(UIStrings.generalExclusionRules);
@@ -179,7 +182,8 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
     UI.ARIAUtils.setLabel(addPatternButton, i18nString(UIStrings.addFilenamePattern));
     customExclusionGroup.appendChild(addPatternButton);
     this.setting =
-        Common.Settings.Settings.instance().moduleSetting('skip-stack-frames-pattern') as Common.Settings.RegExpSetting;
+        Common.Settings.Settings.instance().resolve(
+            Workspace.IgnoreListManager.skipStackFramesPatternSettingDescriptor) as Common.Settings.RegExpSetting;
     this.setting.addChangeListener(this.settingUpdated, this);
 
     const enabledChanged = (): void => {
@@ -202,7 +206,9 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
   }
 
   private settingUpdated(): void {
-    const editable = Common.Settings.Settings.instance().moduleSetting<boolean>('enable-ignore-listing').get();
+    const editable = Common.Settings.Settings.instance()
+                         .resolve(Workspace.IgnoreListManager.enableIgnoreListingSettingDescriptor)
+                         .get();
     this.list.clear();
     const patterns = this.setting.getAsArray();
     for (let i = 0; i < patterns.length; ++i) {