chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/sensors/sensors-meta.ts

@@ -93,6 +93,30 @@ const UIStrings = {
    *@description Command that shows geographic locations.
    */
   showLocations: 'Show Locations',
+  /**
+   * @description Text for the CPU Pressure type to simulate on a device.
+   */
+  cpuPressure: 'CPU Pressure',
+  /**
+   *@description Title of an option in Sensors tab cpu pressure emulation drop-down. Turns off emulation of cpu pressure state.
+   */
+  noPressureEmulation: 'No override',
+  /**
+   *@description An option that appears in a drop-down that represents the nominal state.
+   */
+  nominal: 'Nominal',
+  /**
+   *@description An option that appears in a drop-down that represents the fair state.
+   */
+  fair: 'Fair',
+  /**
+   *@description An option that appears in a drop-down that represents the serious state.
+   */
+  serious: 'Serious',
+  /**
+   *@description An option that appears in a drop-down that represents the critical state.
+   */
+  critical: 'Critical',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sensors/sensors-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -216,6 +240,41 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
+Common.Settings.registerSettingExtension({
+  title: i18nLazyString(UIStrings.cpuPressure),
+  reloadRequired: true,
+  settingName: 'emulation.cpu-pressure',
+  settingType: Common.Settings.SettingType.ENUM,
+  defaultValue: 'none',
+  options: [
+    {
+      value: 'none',
+      title: i18nLazyString(UIStrings.noPressureEmulation),
+      text: i18nLazyString(UIStrings.noPressureEmulation),
+    },
+    {
+      value: 'nominal',
+      title: i18nLazyString(UIStrings.nominal),
+      text: i18nLazyString(UIStrings.nominal),
+    },
+    {
+      value: 'fair',
+      title: i18nLazyString(UIStrings.fair),
+      text: i18nLazyString(UIStrings.fair),
+    },
+    {
+      value: 'serious',
+      title: i18nLazyString(UIStrings.serious),
+      text: i18nLazyString(UIStrings.serious),
+    },
+    {
+      value: 'critical',
+      title: i18nLazyString(UIStrings.critical),
+      text: i18nLazyString(UIStrings.critical),
+    },
+  ],
+});
+
 Common.Settings.registerSettingExtension({
   title: i18nLazyString(UIStrings.touch),
   reloadRequired: true,

package/front_end/panels/settings/AISettingsTab.test.ts

@@ -3,16 +3,28 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
 import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {describeWithEnvironment, getGetHostConfigStub} from '../../testing/EnvironmentHelpers.js';
 import * as Switch from '../../ui/components/switch/switch.js';
 
 import * as Settings from './settings.js';
 
+async function drainMicroTasks() {
+  await new Promise(resolve => setTimeout(resolve, 0));
+}
+
 describeWithEnvironment('AISettingsTab', () => {
+  let view: Settings.AISettingsTab.AISettingsTab|undefined;
+
+  afterEach(async () => {
+    await drainMicroTasks();
+    view?.remove();
+  });
+
   function mockHostConfigWithExplainThisResourceEnabled() {
     getGetHostConfigStub({
-      devToolsExplainThisResourceDogfood: {
+      devToolsAiAssistanceNetworkAgent: {
         enabled: true,
         modelId: 'test',
       },
@@ -28,11 +40,12 @@ describeWithEnvironment('AISettingsTab', () => {
     details: Element[],
     dropdownButtons: HTMLElement[],
     toggleContainers: HTMLElement[],
+    view: Settings.AISettingsTab.AISettingsTab,
   }> {
     Common.Settings.moduleSetting('console-insights-enabled').set(false);
     Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
 
-    const view = new Settings.AISettingsTab.AISettingsTab();
+    view = new Settings.AISettingsTab.AISettingsTab();
     renderElementIntoDOM(view);
     await view.render();
     assert.isNotNull(view.shadowRoot);
@@ -46,14 +59,14 @@ describeWithEnvironment('AISettingsTab', () => {
     const toggleContainers =
         Array.from(view.shadowRoot.querySelectorAll('.toggle-container')) as Switch.Switch.Switch[];
     assert.strictEqual(toggleContainers.length, 2);
-    return {switches, details, dropdownButtons, toggleContainers};
+    return {switches, details, dropdownButtons, toggleContainers, view};
   }
 
   it('renders', async () => {
     Common.Settings.moduleSetting('console-insights-enabled').set(true);
     Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
 
-    const view = new Settings.AISettingsTab.AISettingsTab();
+    view = new Settings.AISettingsTab.AISettingsTab();
     renderElementIntoDOM(view);
     await view.render();
     assert.isNotNull(view.shadowRoot);
@@ -74,13 +87,13 @@ describeWithEnvironment('AISettingsTab', () => {
     Common.Settings.moduleSetting('console-insights-enabled').set(true);
     Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
 
-    const view = new Settings.AISettingsTab.AISettingsTab();
+    view = new Settings.AISettingsTab.AISettingsTab();
     renderElementIntoDOM(view);
     await view.render();
     assert.isNotNull(view.shadowRoot);
 
     const settingCardDesc = view.shadowRoot.querySelectorAll('.setting-description');
-    assert.strictEqual(settingCardDesc[1].textContent, 'Get help with understanding CSS styles and network requests');
+    assert.strictEqual(settingCardDesc[1].textContent, 'Get help with understanding CSS styles, and network requests');
   });
 
   it('can turn feature on, which automatically expands it', async () => {
@@ -118,13 +131,63 @@ describeWithEnvironment('AISettingsTab', () => {
     assert.isTrue(isExpanded(details[1]));
   });
 
+  it('disables switches if blocked by age', async () => {
+    const underAgeExplainer = 'This feature is only available to users who are 18 years of age or older';
+    const aidaAccessStub = sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions');
+    aidaAccessStub.returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.AVAILABLE));
+    const hostConfigStub = getGetHostConfigStub({
+      aidaAvailability: {
+        blockedByAge: true,
+      },
+      devToolsConsoleInsights: {
+        enabled: true,
+      },
+      devToolsFreestyler: {
+        enabled: true,
+      },
+    });
+
+    const {switches, toggleContainers, view} = await renderAISettings();
+    assert.strictEqual(view.shadowRoot?.querySelector('.disabled-explainer')?.textContent?.trim(), underAgeExplainer);
+    assert.isTrue(switches[0].disabled);
+    assert.strictEqual(toggleContainers[0].title, underAgeExplainer);
+    assert.isTrue(switches[1].disabled);
+    assert.strictEqual(toggleContainers[1].title, underAgeExplainer);
+
+    aidaAccessStub.restore();
+    hostConfigStub.restore();
+  });
+
+  it('updates when the user logs in', async () => {
+    const notLoggedInExplainer = 'This feature is only available when you sign into Chrome with your Google account.';
+    const aidaAccessStub = sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions');
+    aidaAccessStub.returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL));
+
+    const {switches, toggleContainers, view} = await renderAISettings();
+    assert.strictEqual(
+        view.shadowRoot?.querySelector('.disabled-explainer')?.textContent?.trim(), notLoggedInExplainer);
+    assert.isTrue(switches[0].disabled);
+    assert.strictEqual(toggleContainers[0].title, notLoggedInExplainer);
+    assert.isTrue(switches[1].disabled);
+    assert.strictEqual(toggleContainers[1].title, notLoggedInExplainer);
+
+    aidaAccessStub.returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.AVAILABLE));
+    Host.AidaClient.HostConfigTracker.instance().dispatchEventToListeners(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED);
+    await drainMicroTasks();
+    assert.isNull(view.shadowRoot?.querySelector('.disabled-explainer'));
+    assert.isFalse(switches[0].disabled);
+    assert.isFalse(switches[1].disabled);
+    aidaAccessStub.restore();
+  });
+
   it('renders disabled switch component with reason', async () => {
     Common.Settings.moduleSetting('console-insights-enabled').setRegistration({
       settingName: 'console-insights-enabled',
       settingType: Common.Settings.SettingType.BOOLEAN,
       defaultValue: false,
       disabledCondition: () => {
-        return {disabled: true, reason: 'reason 1'};
+        return {disabled: true, reason: 'some reason'};
       },
     });
     Common.Settings.moduleSetting('ai-assistance-enabled').setRegistration({
@@ -132,13 +195,18 @@ describeWithEnvironment('AISettingsTab', () => {
       settingType: Common.Settings.SettingType.BOOLEAN,
       defaultValue: true,
       disabledCondition: () => {
-        return {disabled: true, reason: 'reason 2'};
+        return {disabled: true, reason: 'some reason'};
       },
     });
-    const {switches, toggleContainers} = await renderAISettings();
+    const stub = sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions');
+    stub.returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.AVAILABLE));
+
+    const {switches, toggleContainers, view} = await renderAISettings();
+    assert.strictEqual(view.shadowRoot?.querySelector('.disabled-explainer')?.textContent?.trim(), 'some reason');
     assert.isTrue(switches[0].disabled);
-    assert.strictEqual(toggleContainers[0].title, 'reason 1');
+    assert.strictEqual(toggleContainers[0].title, 'some reason');
     assert.isTrue(switches[1].disabled);
-    assert.strictEqual(toggleContainers[1].title, 'reason 2');
+    assert.strictEqual(toggleContainers[1].title, 'some reason');
+    stub.restore();
   });
 });

package/front_end/panels/settings/AISettingsTab.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
@@ -89,11 +90,16 @@ const UIStrings = {
   /**
    *@description Text describing the 'AI assistance' feature
    */
-  helpUnderstandStylingAndNetworkRequest: 'Get help with understanding CSS styles and network requests',
+  helpUnderstandStylingAndNetworkRequest: 'Get help with understanding CSS styles, and network requests',
   /**
    *@description Text describing the 'AI assistance' feature
    */
   helpUnderstandStylingNetworkAndFile: 'Get help with understanding CSS styles, network requests, and files',
+  /**
+   *@description Text describing the 'AI assistance' feature
+   */
+  helpUnderstandStylingNetworkPerformanceAndFile:
+      'Get help with understanding CSS styles, network requests, performance, and files',
   /**
    *@description Text which is a hyperlink to more documentation
    */
@@ -110,6 +116,11 @@ const UIStrings = {
    *@description Description of the AI assistance feature
    */
   explainStylingNetworkAndFile: 'Understand CSS styles, network activity, and file origins with AI-powered insights',
+  /**
+   *@description Description of the AI assistance feature
+   */
+  explainStylingNetworkPerformanceAndFile:
+      'Understand CSS styles, network activity, performance bottlenecks, and file origins with AI-powered insights',
   /**
    *@description Description of the AI assistance feature
    */
@@ -139,6 +150,18 @@ const UIStrings = {
    *@description Label for a toggle to enable the AI assistance feature
    */
   enableAiAssistance: 'Enable AI assistance',
+  /**
+   * @description Message shown to the user if the age check is not successful.
+   */
+  ageRestricted: 'This feature is only available to users who are 18 years of age or older',
+  /**
+   * @description The error message when the user is not logged in into Chrome.
+   */
+  notLoggedIn: 'This feature is only available when you sign into Chrome with your Google account.',
+  /**
+   * @description Message shown when the user is offline.
+   */
+  offline: 'This feature is only available with an active internet connection.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/settings/AISettingsTab.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -147,12 +170,13 @@ const chevronDownIconUrl = new URL('../../Images/chevron-down.svg', import.meta.
 const chevronUpIconUrl = new URL('../../Images/chevron-up.svg', import.meta.url).toString();
 
 export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  static readonly litTagName = LitHtml.literal`devtools-settings-ai-settings-tab`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #consoleInsightsSetting?: Common.Settings.Setting<boolean>;
   #aiAssistanceSetting?: Common.Settings.Setting<boolean>;
   #isConsoleInsightsSettingExpanded = false;
   #isAiAssistanceSettingExpanded = false;
+  #aidaAvailability = Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL;
+  #boundOnAidaAvailabilityChange: () => Promise<void>;
 
   constructor() {
     super();
@@ -166,18 +190,39 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     } catch {
       this.#aiAssistanceSetting = undefined;
     }
+    this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
   }
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [Input.checkboxStyles, aiSettingsTabStyles];
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+    void this.#onAidaAvailabilityChange();
+  }
+
+  disconnectedCallback(): void {
+    Host.AidaClient.HostConfigTracker.instance().removeEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+  }
+
+  async #onAidaAvailabilityChange(): Promise<void> {
+    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    if (currentAidaAvailability !== this.#aidaAvailability) {
+      this.#aidaAvailability = currentAidaAvailability;
+      void this.render();
+    }
   }
 
   #getAiAssistanceSettingDescription(): Platform.UIString.LocalizedString {
     const config = Common.Settings.Settings.instance().getHostConfig();
-    if (config.devToolsExplainThisResourceDogfood?.enabled) {
-      if (config.devToolsAiAssistanceFileAgentDogfood?.enabled) {
-        return i18nString(UIStrings.helpUnderstandStylingNetworkAndFile);
-      }
+    if (config.devToolsAiAssistancePerformanceAgent?.enabled ||
+        config.devToolsAiAssistancePerformanceAgentDogfood?.enabled) {
+      return i18nString(UIStrings.helpUnderstandStylingNetworkPerformanceAndFile);
+    }
+    if (config.devToolsAiAssistanceFileAgent?.enabled || config.devToolsAiAssistanceFileAgentDogfood?.enabled) {
+      return i18nString(UIStrings.helpUnderstandStylingNetworkAndFile);
+    }
+    if (config.devToolsAiAssistanceNetworkAgent?.enabled || config.devToolsExplainThisResourceDogfood?.enabled) {
       return i18nString(UIStrings.helpUnderstandStylingAndNetworkRequest);
     }
     return i18nString(UIStrings.helpUnderstandStyling);
@@ -185,10 +230,14 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
 
   #getAiAssistanceSettingInfo(): Platform.UIString.LocalizedString {
     const config = Common.Settings.Settings.instance().getHostConfig();
-    if (config.devToolsExplainThisResourceDogfood?.enabled) {
-      if (config.devToolsAiAssistanceFileAgentDogfood?.enabled) {
-        return i18nString(UIStrings.explainStylingNetworkAndFile);
-      }
+    if (config.devToolsAiAssistancePerformanceAgent?.enabled ||
+        config.devToolsAiAssistancePerformanceAgentDogfood?.enabled) {
+      return i18nString(UIStrings.explainStylingNetworkPerformanceAndFile);
+    }
+    if (config.devToolsAiAssistanceFileAgent?.enabled || config.devToolsAiAssistanceFileAgentDogfood?.enabled) {
+      return i18nString(UIStrings.explainStylingNetworkAndFile);
+    }
+    if (config.devToolsAiAssistanceNetworkAgent?.enabled || config.devToolsExplainThisResourceDogfood?.enabled) {
       return i18nString(UIStrings.explainStylingAndNetworkRequest);
     }
     return i18nString(UIStrings.explainStyling);
@@ -312,7 +361,24 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // clang-format on
   }
 
-  #renderConsoleInsightsSetting(): LitHtml.TemplateResult {
+  #getDisabledReason(): string|undefined {
+    switch (this.#aidaAvailability) {
+      case Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL:
+      case Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED:
+        return i18nString(UIStrings.notLoggedIn);
+      case Host.AidaClient.AidaAccessPreconditions.NO_INTERNET:
+        return i18nString(UIStrings.offline);
+    }
+
+    const config = Common.Settings.Settings.instance().getHostConfig();
+    if (config?.aidaAvailability?.blockedByAge === true) {
+      return i18nString(UIStrings.ageRestricted);
+    }
+    // `consoleInsightsSetting` and `aiAssistantSetting` are both disabled for the same reason.
+    return this.#consoleInsightsSetting?.disabledReason();
+  }
+
+  #renderConsoleInsightsSetting(disabledReason?: string): LitHtml.TemplateResult {
     const detailsClasses = {
       'whole-row': true,
       open: this.#isConsoleInsightsSettingExpanded,
@@ -344,15 +410,15 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       </div>
       <div class="divider"></div>
       <div class="toggle-container centered"
-        title=${ifDefined(this.#consoleInsightsSetting?.disabledReason())}
+        title=${ifDefined(disabledReason)}
         @click=${this.#toggleConsoleInsightsSetting.bind(this)}
       >
         <devtools-switch
-          .checked=${Boolean(this.#consoleInsightsSetting?.get() && !this.#consoleInsightsSetting?.disabled())}
+          .checked=${Boolean(this.#consoleInsightsSetting?.get()) && !Boolean(disabledReason)}
           .jslogContext=${this.#consoleInsightsSetting?.name || ''}
-          .disabled=${Boolean(this.#consoleInsightsSetting?.disabled())}
+          .disabled=${Boolean(disabledReason)}
           @switchchange=${this.#toggleConsoleInsightsSetting.bind(this)}
-          aria-label=${this.#consoleInsightsSetting?.disabledReason() || i18nString(UIStrings.enableConsoleInsights)}
+          aria-label=${disabledReason || i18nString(UIStrings.enableConsoleInsights)}
         ></devtools-switch>
       </div>
       <div class=${classMap(detailsClasses)}>
@@ -380,7 +446,7 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // clang-format on
   }
 
-  #renderAiAssistanceSetting(): LitHtml.TemplateResult {
+  #renderAiAssistanceSetting(disabledReason?: string): LitHtml.TemplateResult {
     const detailsClasses = {
       'whole-row': true,
       open: this.#isAiAssistanceSettingExpanded,
@@ -412,15 +478,15 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       </div>
       <div class="divider"></div>
       <div class="toggle-container centered"
-        title=${ifDefined(this.#aiAssistanceSetting?.disabledReason())}
+        title=${ifDefined(disabledReason)}
         @click=${this.#toggleAiAssistanceSetting.bind(this)}
       >
         <devtools-switch
-          .checked=${Boolean(this.#aiAssistanceSetting?.get() && !this.#aiAssistanceSetting?.disabled())}
+          .checked=${Boolean(this.#aiAssistanceSetting?.get()) && !Boolean(disabledReason)}
           .jslogContext=${this.#aiAssistanceSetting?.name || ''}
-          .disabled=${Boolean(this.#aiAssistanceSetting?.disabled())}
+          .disabled=${Boolean(disabledReason)}
           @switchchange=${this.#toggleAiAssistanceSetting.bind(this)}
-          aria-label=${this.#aiAssistanceSetting?.disabledReason() || i18nString(UIStrings.enableAiAssistance)}
+          aria-label=${disabledReason || i18nString(UIStrings.enableAiAssistance)}
         ></devtools-switch>
       </div>
       <div class=${classMap(detailsClasses)}>
@@ -448,7 +514,27 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // clang-format on
   }
 
+  #renderDisabledExplainer(disabledReason: string): LitHtml.LitTemplate {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    return html`
+      <div class="disabled-explainer">
+        <devtools-icon .data=${{
+          iconName: 'warning',
+          color: 'var(--sys-color-orange)',
+          width: 'var(--sys-size-8)',
+          height: 'var(--sys-size-8)',
+        } as IconButton.Icon.IconData}>
+        </devtools-icon>
+        ${disabledReason}
+      </div>
+    `;
+    // clang-format on
+  }
+
   override async render(): Promise<void> {
+    const disabledReason = this.#getDisabledReason();
+
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(html`
@@ -458,9 +544,10 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       <div class="settings-container-wrapper" jslog=${VisualLogging.pane('chrome-ai')}>
         ${this.#renderSharedDisclaimer()}
         ${this.#consoleInsightsSetting || this.#aiAssistanceSetting ? html`
+          ${Boolean(disabledReason) ? this.#renderDisabledExplainer(disabledReason as string) : LitHtml.nothing}
           <div class="settings-container">
-            ${this.#consoleInsightsSetting ? this.#renderConsoleInsightsSetting() : LitHtml.nothing}
-            ${this.#aiAssistanceSetting ? this.#renderAiAssistanceSetting() : LitHtml.nothing}
+            ${this.#consoleInsightsSetting ? this.#renderConsoleInsightsSetting(disabledReason) : LitHtml.nothing}
+            ${this.#aiAssistanceSetting ? this.#renderAiAssistanceSetting(disabledReason) : LitHtml.nothing}
           </div>
         ` : LitHtml.nothing}
       </div>

package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -7,21 +7,23 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Buttons from '../../ui/components/buttons/buttons.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';
 
 import frameworkIgnoreListSettingsTabStyles from './frameworkIgnoreListSettingsTab.css.js';
+import settingsScreenStyles from './settingsScreen.css.js';
 
 const UIStrings = {
   /**
-   *@description Header text content in Framework Ignore List Settings Tab of the Settings
+   *@description Header text content in Framework Ignore List Settings Tab of the Settings for enabling or disabling ignore listing
    */
-  frameworkIgnoreList: 'Framework ignore list',
+  frameworkIgnoreList: 'Ignore listing',
   /**
-   *@description Text in Framework Ignore List Settings Tab of the Settings
+   *@description Checkbox label in Framework Ignore List Settings Tab of the Settings
    */
-  debuggerWillSkipThroughThe:
-      'Debugger won\'t step through these scripts or break on exceptions that only affect them and Performance panel will collapse flamechart items that match.',
+  ignoreListingDescription:
+      'When enabled, the debugger will skip over ignore-listed scripts and will ignore exceptions that only affect them and the Performance panel will collapse matching flamechart items.',
   /**
    *@description Text in Framework Ignore List Settings Tab of the Settings
    */
@@ -45,11 +47,11 @@ const UIStrings = {
   /**
    *@description Text in Framework Ignore List Settings Tab of the Settings
    */
-  generalExclusionRules: 'General exclusion rules:',
+  generalExclusionRules: 'General exclusion rules',
   /**
    *@description Text in Framework Ignore List Settings Tab of the Settings
    */
-  customExclusionRules: 'Custom exclusion rules:',
+  customExclusionRules: 'Custom exclusion rules',
   /**
    *@description Text of the add pattern button in Framework Ignore List Settings Tab of the Settings
    */
@@ -96,27 +98,30 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
 
   constructor() {
     super(true);
-
     this.element.setAttribute('jslog', `${VisualLogging.pane('blackbox')}`);
 
-    const header = this.contentElement.createChild('div', 'header');
-    header.textContent = i18nString(UIStrings.frameworkIgnoreList);
-    UI.ARIAUtils.markAsHeading(header, 1);
-
-    this.contentElement.createChild('div', 'intro').textContent = i18nString(UIStrings.debuggerWillSkipThroughThe);
+    const settingsContent =
+        this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
+    settingsContent.classList.add('settings-card-container', 'ignore-list-settings');
 
+    const ignoreListingDescription = document.createElement('span');
+    ignoreListingDescription.textContent = i18nString(UIStrings.ignoreListingDescription);
     const enabledSetting =
         Common.Settings.Settings.instance().moduleSetting('enable-ignore-listing') as Common.Settings.Setting<boolean>;
-    const enableIgnoreListing = this.contentElement.createChild('div', 'ignore-list-global-enable');
+    const enableIgnoreListing = this.contentElement.createChild('div', 'enable-ignore-listing');
     enableIgnoreListing.appendChild(
         UI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.enableIgnoreListing), enabledSetting, true));
     UI.Tooltip.Tooltip.install(enableIgnoreListing, i18nString(UIStrings.enableIgnoreListingTooltip));
 
-    const ignoreListOptions = this.contentElement.createChild('div', 'ignore-list-options');
-
-    const generalExclusionGroup = this.createSettingGroup(i18nString(UIStrings.generalExclusionRules));
-    ignoreListOptions.appendChild(generalExclusionGroup);
+    const enableIgnoreListingCard = new Cards.Card.Card();
+    enableIgnoreListingCard.data = {
+      heading: i18nString(UIStrings.frameworkIgnoreList),
+      content: [ignoreListingDescription, enableIgnoreListing],
+    };
+    settingsContent.appendChild(enableIgnoreListingCard);
 
+    const generalExclusionGroup = this.createSettingGroup();
+    generalExclusionGroup.classList.add('general-exclusion-group');
     const ignoreListContentScripts = generalExclusionGroup.createChild('div', 'ignore-list-option');
     ignoreListContentScripts.appendChild(UI.SettingsUI.createSettingCheckbox(
         i18nString(UIStrings.ignoreListContentScripts),
@@ -147,8 +152,23 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
         i18nString(UIStrings.ignoreListAnonymousScripts),
         Common.Settings.Settings.instance().moduleSetting('skip-anonymous-scripts'), true));
 
-    const customExclusionGroup = this.createSettingGroup(i18nString(UIStrings.customExclusionRules));
-    ignoreListOptions.appendChild(customExclusionGroup);
+    const generalExclusionGroupCard = new Cards.Card.Card();
+    generalExclusionGroupCard.data = {
+      heading: i18nString(UIStrings.generalExclusionRules),
+      content: [generalExclusionGroup],
+    };
+    generalExclusionGroupCard.classList.add('ignore-list-options');
+    settingsContent.appendChild(generalExclusionGroupCard);
+
+    const customExclusionGroup = this.createSettingGroup();
+    customExclusionGroup.classList.add('custom-exclusion-group');
+    const customExclusionGroupCard = new Cards.Card.Card();
+    customExclusionGroupCard.classList.add('ignore-list-options');
+    customExclusionGroupCard.data = {
+      heading: i18nString(UIStrings.customExclusionRules),
+      content: [customExclusionGroup],
+    };
+    settingsContent.appendChild(customExclusionGroupCard);
 
     this.list = new UI.ListWidget.ListWidget(this);
     this.list.element.classList.add('ignore-list');
@@ -166,17 +186,15 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
         Common.Settings.Settings.instance().moduleSetting('skip-stack-frames-pattern') as Common.Settings.RegExpSetting;
     this.setting.addChangeListener(this.settingUpdated, this);
 
-    this.setDefaultFocusedElement(addPatternButton);
-
     enabledSetting.addChangeListener(enabledChanged);
     enabledChanged();
 
     function enabledChanged(): void {
       const enabled = enabledSetting.get();
       if (enabled) {
-        ignoreListOptions.classList.remove('ignore-listing-disabled');
+        settingsContent.classList.remove('ignore-listing-disabled');
       } else {
-        ignoreListOptions.classList.add('ignore-listing-disabled');
+        settingsContent.classList.add('ignore-listing-disabled');
       }
     }
   }
@@ -184,7 +202,7 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
   override wasShown(): void {
     super.wasShown();
     this.list.registerCSSFiles([frameworkIgnoreListSettingsTabStyles]);
-    this.registerCSSFiles([frameworkIgnoreListSettingsTabStyles]);
+    this.registerCSSFiles([frameworkIgnoreListSettingsTabStyles, settingsScreenStyles]);
     this.settingUpdated();
   }
 
@@ -200,14 +218,10 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
     this.list.addNewItem(this.setting.getAsArray().length, {pattern: '', disabled: false});
   }
 
-  private createSettingGroup(title: string): Element {
+  private createSettingGroup(): HTMLElement {
     const group = document.createElement('div');
     group.classList.add('ignore-list-option-group');
     UI.ARIAUtils.markAsGroup(group);
-    const groupTitle = group.createChild('div', 'ignore-list-option-group-title');
-    UI.ARIAUtils.markAsHeading(groupTitle, 2);
-    UI.ARIAUtils.setLabel(group, title);
-    groupTitle.textContent = title;
     return group;
   }