chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

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

@@ -27,6 +27,9 @@ describeWithEnvironment('AISettingsTab', () => {
     updateHostConfig({
       devToolsAiGeneratedTimelineLabels: {
         enabled: true,
+      },
+      devToolsAiCodeCompletion: {
+        enabled: true,
       }
     });
   });
@@ -59,6 +62,7 @@ describeWithEnvironment('AISettingsTab', () => {
     Common.Settings.moduleSetting('console-insights-enabled').set(false);
     Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
     Common.Settings.moduleSetting('ai-annotations-enabled').set(true);
+    Common.Settings.moduleSetting('ai-code-completion-enabled').set(false);
 
     view = new Settings.AISettingsTab.AISettingsTab();
     renderElementIntoDOM(view);
@@ -66,14 +70,14 @@ describeWithEnvironment('AISettingsTab', () => {
     assert.isNotNull(view.shadowRoot);
 
     const switches = Array.from(view.shadowRoot.querySelectorAll('devtools-switch'));
-    assert.lengthOf(switches, 3);
+    assert.lengthOf(switches, 4);
     const details = Array.from(view.shadowRoot.querySelectorAll('.whole-row'));
-    assert.lengthOf(details, 3);
+    assert.lengthOf(details, 4);
     const dropdownButtons = Array.from(view.shadowRoot.querySelectorAll('.dropdown devtools-button')) as HTMLElement[];
-    assert.lengthOf(dropdownButtons, 3);
+    assert.lengthOf(dropdownButtons, 4);
     const toggleContainers =
         Array.from(view.shadowRoot.querySelectorAll('.toggle-container')) as Switch.Switch.Switch[];
-    assert.lengthOf(toggleContainers, 3);
+    assert.lengthOf(toggleContainers, 4);
     return {switches, details, dropdownButtons, toggleContainers, view};
   }
 
@@ -81,6 +85,7 @@ describeWithEnvironment('AISettingsTab', () => {
     Common.Settings.moduleSetting('console-insights-enabled').set(true);
     Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
     Common.Settings.moduleSetting('ai-annotations-enabled').set(true);
+    Common.Settings.moduleSetting('ai-code-completion-enabled').set(true);
 
     view = new Settings.AISettingsTab.AISettingsTab();
     renderElementIntoDOM(view);
@@ -98,18 +103,21 @@ describeWithEnvironment('AISettingsTab', () => {
 
     const settingCards = view.shadowRoot.querySelectorAll('.setting-card h2');
     const settingNames = Array.from(settingCards).map(element => element.textContent);
-    assert.deepEqual(settingNames, ['Console Insights', 'AI assistance', 'Auto annotations']);
+    assert.deepEqual(settingNames, ['Console Insights', 'AI assistance', 'Auto annotations', 'Code suggestions']);
 
     const settingCardDesc = view.shadowRoot.querySelectorAll('.setting-description');
     assert.strictEqual(settingCardDesc[0].textContent, 'Helps you understand and fix console warnings and errors');
     assert.strictEqual(settingCardDesc[1].textContent, 'Get help with understanding CSS styles');
-    assert.strictEqual(settingCardDesc[2].textContent, 'Get AI suggestions for performance panel annotations');
+    assert.strictEqual(
+        settingCardDesc[2].textContent, 'Automatically generate titles for performance trace annotations');
+    assert.strictEqual(settingCardDesc[3].textContent, 'Get help completing your code');
   });
 
   it('renders different dislaimers for managed users which have logging disabled', async () => {
     Common.Settings.moduleSetting('console-insights-enabled').set(true);
     Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
     Common.Settings.moduleSetting('ai-annotations-enabled').set(true);
+    Common.Settings.moduleSetting('ai-code-completion-enabled').set(true);
     updateHostConfig({
       aidaAvailability: {
         enabled: true,
@@ -208,6 +216,8 @@ describeWithEnvironment('AISettingsTab', () => {
     assert.strictEqual(toggleContainers[1].title, underAgeExplainer);
     assert.isTrue(switches[2].disabled);
     assert.strictEqual(toggleContainers[2].title, underAgeExplainer);
+    assert.isTrue(switches[3].disabled);
+    assert.strictEqual(toggleContainers[3].title, underAgeExplainer);
 
     aidaAccessStub.restore();
   });
@@ -226,6 +236,8 @@ describeWithEnvironment('AISettingsTab', () => {
     assert.strictEqual(toggleContainers[1].title, notLoggedInExplainer);
     assert.isTrue(switches[2].disabled);
     assert.strictEqual(toggleContainers[2].title, notLoggedInExplainer);
+    assert.isTrue(switches[3].disabled);
+    assert.strictEqual(toggleContainers[3].title, notLoggedInExplainer);
 
     aidaAccessStub.returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.AVAILABLE));
     Host.AidaClient.HostConfigTracker.instance().dispatchEventToListeners(
@@ -235,6 +247,7 @@ describeWithEnvironment('AISettingsTab', () => {
     assert.isFalse(switches[0].disabled);
     assert.isFalse(switches[1].disabled);
     assert.isFalse(switches[2].disabled);
+    assert.isFalse(switches[3].disabled);
     aidaAccessStub.restore();
   });
 

package/front_end/panels/settings/AISettingsTab.ts

@@ -10,7 +10,6 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import type * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Input from '../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Switch from '../../ui/components/switch/switch.js';
@@ -24,164 +23,190 @@ const {html, Directives: {ifDefined, classMap}} = Lit;
 
 const UIStrings = {
   /**
-   *@description Header text for for a list of things to consider in the context of generative AI features
+   * @description Header text for for a list of things to consider in the context of generative AI features
    */
   boostYourProductivity: 'Boost your productivity with AI',
   /**
-   *@description Text announcing a list of facts to consider (when using a GenAI feature)
+   * @description Text announcing a list of facts to consider (when using a GenAI feature)
    */
   thingsToConsider: 'Things to consider',
   /**
-   *@description Text describing a fact to consider when using AI features
+   * @description Text describing a fact to consider when using AI features
    */
   experimentalFeatures:
       'These features use generative AI and may provide inaccurate or offensive information that doesn’t represent Google’s views',
   /**
-   *@description Text describing a fact to consider when using AI features
+   * @description Text describing a fact to consider when using AI features
    */
   sendsDataToGoogle:
       'These features send relevant data to Google. Google collects this data and feedback to improve its products and services with the help of human reviewers. Avoid sharing sensitive or personal information.',
   /**
-   *@description Text describing a fact to consider when using AI features
+   * @description Text describing a fact to consider when using AI features
    */
   sendsDataToGoogleNoLogging:
       'Your content will not be used by human reviewers to improve AI. Your organization may change these settings at any time.',
-
   /**
-   *@description Text describing a fact to consider when using AI features
+   * @description Text describing a fact to consider when using AI features
    */
   dataCollection: 'Depending on your region, Google may refrain from data collection',
   /**
-   *@description Text describing a fact to consider when using AI features
+   * @description Text describing a fact to consider when using AI features
    */
   dataCollectionNoLogging:
       'Depending on your Google account management and/or region, Google may refrain from data collection',
   /**
-   *@description Text describing the 'Console Insights' feature
+   * @description Text describing the 'Console Insights' feature
    */
   helpUnderstandConsole: 'Helps you understand and fix console warnings and errors',
   /**
-   *@description Text describing the 'Console Insights' feature
+   * @description Text describing the 'Auto Annotations' feature
+   */
+  aIAnnotationsFeatureDescription: 'Automatically generate titles for performance trace annotations',
+  /**
+   * @description Text explaining AI feature helps annotate a performance trace with auto-generated labels
    */
-  getAIAnnotationsSuggestions: 'Get AI suggestions for performance panel annotations',
+  helpAnnotatePerformance: 'Helps you annotate your performance trace with auto-generated labels',
   /**
-   *@description Label for a button to expand an accordion
+   * @description Label for a button to expand an accordion
    */
   showMore: 'Show more',
   /**
-   *@description Label for a button to collapse an accordion
+   * @description Label for a button to collapse an accordion
    */
   showLess: 'Show less',
   /**
-   *@description Header for a list of feature attributes. 'When (the feature is turned) on, you'll be able to …'
+   * @description Header for a list of feature attributes. 'When (the feature is turned) on, you'll be able to …'
    */
   whenOn: 'When on',
   /**
-   *@description Description of the console insights feature
+   * @description Description of the console insights feature
    */
   explainConsole: 'Get explanations for console warnings and errors',
   /**
-   *@description Description of the console insights feature ('these issues' refers to console warnings and errors)
+   * @description Description of the console insights feature ('these issues' refers to console warnings and errors)
    */
   receiveSuggestions: 'Receive suggestions and code samples to address these issues',
   /**
-   *@description Explainer for which data is being sent by the console insights feature
+   * @description Explainer for which data is being sent by the console insights feature
    */
   consoleInsightsSendsData:
-      'The console message, associated stack trace, related source code, and the associated network headers are sent to Google to generate explanations. This data may be seen by human reviewers to improve this feature.',
+      'To generate explanations, the console message, associated stack trace, related source code, and the associated network headers are sent to Google. This data may be seen by human reviewers to improve this feature.',
   /**
-   *@description Explainer for which data is being sent by the console insights feature
+   * @description Explainer for which data is being sent by the console insights feature
    */
   consoleInsightsSendsDataNoLogging:
-      'The console message, associated stack trace, related source code, and the associated network headers are sent to Google to generate explanations. This data will not be used to improve Google’s AI models.',
+      'To generate explanations, the console message, associated stack trace, related source code, and the associated network headers are sent to Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
   /**
-   *@description Reference to the terms of service and privacy notice
-   *@example {Google Terms of Service} PH1
-   *@example {Privacy Notice} PH2
+   * @description Reference to the terms of service and privacy notice
+   * @example {Google Terms of Service} PH1
+   * @example {Privacy Notice} PH2
    */
   termsOfServicePrivacyNotice: 'Use of these features is subject to the {PH1} and {PH2}',
   /**
-   *@description Text describing the 'AI assistance' feature
+   * @description Text describing the 'AI assistance' feature
    */
   helpUnderstandStyling: 'Get help with understanding CSS styles',
   /**
-   *@description Text describing the 'AI assistance' feature
+   * @description Text describing the 'AI assistance' feature
    */
   helpUnderstandStylingAndNetworkRequest: 'Get help with understanding CSS styles, and network requests',
   /**
-   *@description Text describing the 'AI assistance' feature
+   * @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
+   * @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
+   * @description Text describing the 'Code suggestions' feature
+   */
+  helpUnderstandCodeSuggestions: 'Get help completing your code',
+  /**
+   * @description Text which is a hyperlink to more documentation
    */
   learnMore: 'Learn more',
   /**
-   *@description Description of the AI assistance feature
+   * @description Description of the AI assistance feature
    */
   explainStyling: 'Understand CSS styles with AI-powered insights',
   /**
-   *@description Description of the AI assistance feature
+   * @description Description of the AI assistance feature
    */
   explainStylingAndNetworkRequest: 'Understand CSS styles, and network activity with AI-powered insights',
   /**
-   *@description Description of the AI assistance feature
+   * @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
+   * @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
+   * @description Description of the AI assistance feature
    */
   receiveStylingSuggestions: 'Improve your development workflow with contextual explanations and suggestions',
   /**
-   *@description Explainer for which data is being sent by the AI assistance feature
+   * @description Explainer for which data is being sent by the AI assistance feature
    */
   freestylerSendsData:
-      'Any user query and data the inspected page can access via Web APIs, network requests, files, and performance traces are sent to Google to generate explanations. This data may be seen by human reviewers to improve this feature. Don’t use on pages with personal or sensitive information.',
+      'To generate explanations, any user query and data the inspected page can access via Web APIs, network requests, files, and performance traces are sent to Google. This data may be seen by human reviewers to improve this feature. Don’t use on pages with personal or sensitive information.',
   /**
-   *@description Explainer for which data is being sent by the AI assistance feature
+   * @description Explainer for which data is being sent by the AI assistance feature
    */
   freestylerSendsDataNoLogging:
-      'Any user query and data the inspected page can access via Web APIs, network requests, files, and performance traces are sent to Google to generate explanations. This data will not be used to improve Google’s AI models.',
+      'To generate explanations, any user query and data the inspected page can access via Web APIs, network requests, files, and performance traces are sent to Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
   /**
-   *@description Explainer for which data is being sent by the AI generated annotations feature
+   * @description Explainer for which data is being sent by the AI generated annotations feature
    */
   generatedAiAnnotationsSendData:
-      'Your performance trace is sent to Google to generate an explanation. This data will be used to improve Google’s AI models.',
+      'To generate annotation suggestions, your performance trace is sent to Google. This data may be seen by human reviewers to improve this feature.',
   /**
-   *@description Explainer for which data is being sent by the AI assistance feature
+   * @description Explainer for which data is being sent by the AI assistance feature
    */
   generatedAiAnnotationsSendDataNoLogging:
-      'Your performance trace is sent to Google to generate an explanation. This data will not be used to improve Google’s AI models.',
+      'To generate annotation suggestions, your performance trace is sent to Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
+  /**
+   * @description Description of the 'Code suggestions' feature
+   */
+  asYouTypeCodeSuggestions:
+      'As you type in the Console or Sources panel, you’ll get code suggestions. Press Tab to accept one.',
+  /**
+   * @description Explainer for which data is being sent for the 'Code suggestions' feature
+   */
+  codeSuggestionsSendData:
+      'To generate annotation suggestions, your performance trace is sent to Google. This data may be seen by human reviewers to improve this feature.',
+  /**
+   * @description Explainer for which data is being sent for the 'Code suggestions' feature when logging is not enabled
+   */
+  codeSuggestionsSendDataNoLogging:
+      'To generate annotation suggestions, your performance trace is sent to Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
   /**
-   *@description Label for a link to the terms of service
+   * @description Label for a link to the terms of service
    */
   termsOfService: 'Google Terms of Service',
   /**
-   *@description Label for a link to the privacy notice
+   * @description Label for a link to the privacy notice
    */
   privacyNotice: 'Google Privacy Policy',
   /**
-   *@description Label for a toggle to enable the Console Insights feature
+   * @description Label for a toggle to enable the Console Insights feature
    */
   enableConsoleInsights: 'Enable `Console insights`',
   /**
-   *@description Label for a toggle to enable the AI assistance feature
+   * @description Label for a toggle to enable the AI assistance feature
    */
   enableAiAssistance: 'Enable AI assistance',
   /**
-   *@description Label for a toggle to enable the AI assistance feature
+   * @description Label for a toggle to enable the AI annotation feature
    */
   enableAiSuggestedAnnotations: 'Enable AI suggestions for performance panel annotations',
+  /**
+   * @description Label for a toggle to enable the AI code suggestions feature
+   */
+  enableAiCodeSuggestions: 'Enable AI code suggestions',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/settings/AISettingsTab.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -210,6 +235,7 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
   #consoleInsightsSetting?: Common.Settings.Setting<boolean>;
   #aiAnnotationsSetting?: Common.Settings.Setting<boolean>;
   #aiAssistanceSetting?: Common.Settings.Setting<boolean>;
+  #aiCodeCompletionSetting?: Common.Settings.Setting<boolean>;
   #aidaAvailability = Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL;
   #boundOnAidaAvailabilityChange: () => Promise<void>;
   // Setting to parameters needed to display it in the UI.
@@ -234,6 +260,12 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       this.#aiAnnotationsSetting = Common.Settings.Settings.instance().createSetting('ai-annotations-enabled', false);
     }
 
+    if (Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled) {
+      // Get an existing setting or, if it does not exist, create a new one.
+      this.#aiCodeCompletionSetting =
+          Common.Settings.Settings.instance().createSetting('ai-code-completion-enabled', false);
+    }
+
     this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
     this.#initSettings();
   }
@@ -269,8 +301,10 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
           text: noLogging ? i18nString(UIStrings.consoleInsightsSendsDataNoLogging) :
                             i18nString(UIStrings.consoleInsightsSendsData)
         }],
-        learnMoreLink:
-            {url: 'https://goo.gle/devtools-console-messages-ai', linkJSLogContext: 'learn-more.console-insights'},
+        learnMoreLink: {
+          url: 'https://developer.chrome.com/docs/devtools/console/understand-messages',
+          linkJSLogContext: 'learn-more.console-insights',
+        },
         settingExpandState: {
           isSettingExpanded: false,
           expandSettingJSLogContext: 'console-insights.accordion',
@@ -295,7 +329,10 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
           text: noLogging ? i18nString(UIStrings.freestylerSendsDataNoLogging) :
                             i18nString(UIStrings.freestylerSendsData)
         }],
-        learnMoreLink: {url: 'https://goo.gle/devtools-ai-assistance', linkJSLogContext: 'learn-more.ai-assistance'},
+        learnMoreLink: {
+          url: 'https://developer.chrome.com/docs/devtools/ai-assistance',
+          linkJSLogContext: 'learn-more.ai-assistance',
+        },
         settingExpandState: {
           isSettingExpanded: false,
           expandSettingJSLogContext: 'freestyler.accordion',
@@ -306,13 +343,13 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     }
 
     if (this.#aiAnnotationsSetting) {
-      const aiAssistanceData: AiSettingParams = {
+      const aiAnnotationsData: AiSettingParams = {
         settingName: i18n.i18n.lockedString('Auto annotations'),
         iconName: 'pen-spark',
-        settingDescription: i18nString(UIStrings.getAIAnnotationsSuggestions),
+        settingDescription: i18nString(UIStrings.aIAnnotationsFeatureDescription),
         enableSettingText: i18nString(UIStrings.enableAiSuggestedAnnotations),
         settingItems: [
-          {iconName: 'pen-spark', text: i18nString(UIStrings.getAIAnnotationsSuggestions)},
+          {iconName: 'label-auto', text: i18nString(UIStrings.helpAnnotatePerformance)},
         ],
         toConsiderSettingItems: [{
           iconName: 'google',
@@ -325,11 +362,34 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
         },
         settingExpandState: {
           isSettingExpanded: false,
-          expandSettingJSLogContext: 'freestyler.accordion',
+          expandSettingJSLogContext: 'auto-annotations.accordion',
+        },
+      };
+
+      this.#settingToParams.set(this.#aiAnnotationsSetting, aiAnnotationsData);
+    }
+
+    if (this.#aiCodeCompletionSetting) {
+      const aiCodeCompletionData: AiSettingParams = {
+        settingName: i18n.i18n.lockedString('Code suggestions'),
+        iconName: 'text-analysis',
+        settingDescription: i18nString(UIStrings.helpUnderstandCodeSuggestions),
+        enableSettingText: i18nString(UIStrings.enableAiCodeSuggestions),
+        settingItems: [{iconName: 'code', text: i18nString(UIStrings.asYouTypeCodeSuggestions)}],
+        toConsiderSettingItems: [{
+          iconName: 'google',
+          text: noLogging ? i18nString(UIStrings.codeSuggestionsSendDataNoLogging) :
+                            i18nString(UIStrings.codeSuggestionsSendData)
+        }],
+        // TODO: Add a relevant link
+        learnMoreLink: {url: '', linkJSLogContext: 'learn-more.code-completion'},
+        settingExpandState: {
+          isSettingExpanded: false,
+          expandSettingJSLogContext: 'code-completion.accordion',
         },
       };
 
-      this.#settingToParams.set(this.#aiAnnotationsSetting, aiAssistanceData);
+      this.#settingToParams.set(this.#aiCodeCompletionSetting, aiCodeCompletionData);
     }
   }
 
@@ -423,12 +483,7 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // clang-format off
     return html`
       <div>
-        <devtools-icon .data=${{
-          iconName: icon,
-          color: 'var(--icon-default)',
-          width: 'var(--sys-size-8)',
-          height: 'var(--sys-size-8)',
-        } as IconButton.Icon.IconData}>
+        <devtools-icon .name=${icon} class="medium">
         </devtools-icon>
       </div>
       <div>${text}</div>
@@ -481,11 +536,7 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // clang-format off
     return html`
       <div>
-        <devtools-icon .data=${{
-          iconName: settingItem.iconName,
-          width: 'var(--sys-size-9)',
-          height: 'var(--sys-size-9)',
-        } as IconButton.Icon.IconData}>
+        <devtools-icon class="extra-large" .name=${settingItem.iconName}>
         </devtools-icon>
       </div>
       <div class="padded">${settingItem.text}</div>
@@ -574,12 +625,7 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       <div class="disabled-explainer">
         ${disabledReasons.map(reason => html`
           <div class="disabled-explainer-row">
-            <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 name="warning" class="medium" style="color: var(--icon-warning);">
             </devtools-icon>
             ${reason}
           </div>

package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -16,74 +16,74 @@ import settingsScreenStyles from './settingsScreen.css.js';
 
 const UIStrings = {
   /**
-   *@description Header text content in Framework Ignore List Settings Tab of the Settings for enabling or disabling ignore listing
+   * @description Header text content in Framework Ignore List Settings Tab of the Settings for enabling or disabling ignore listing
    */
   frameworkIgnoreList: 'Ignore listing',
   /**
-   *@description Checkbox label in Framework Ignore List Settings Tab of the Settings
+   * @description Checkbox label in Framework Ignore List Settings Tab of the Settings
    */
   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
+   * @description Text in Framework Ignore List Settings Tab of the Settings
    */
   ignoreListContentScripts: 'Content scripts injected by extensions',
   /**
-   *@description Text in Framework Ignore List Settings Tab of the Settings
+   * @description Text in Framework Ignore List Settings Tab of the Settings
    */
   ignoreListAnonymousScripts: 'Anonymous scripts from eval or console',
   /**
-   *@description Text in Framework Ignore List Settings Tab of the Settings
+   * @description Text in Framework Ignore List Settings Tab of the Settings
    */
   automaticallyIgnoreListKnownThirdPartyScripts: 'Known third-party scripts from source maps',
   /**
-   *@description Text in Framework Ignore List Settings Tab of the Settings
+   * @description Text in Framework Ignore List Settings Tab of the Settings
    */
   enableIgnoreListing: 'Enable ignore listing',
   /**
-   *@description Text in Framework Ignore List Settings Tab of the Settings
+   * @description Text in Framework Ignore List Settings Tab of the Settings
    */
   enableIgnoreListingTooltip: 'Uncheck to disable all ignore listing',
   /**
-   *@description Text in Framework Ignore List Settings Tab of the Settings
+   * @description Text in Framework Ignore List Settings Tab of the Settings
    */
   generalExclusionRules: 'General exclusion rules',
   /**
-   *@description Text in Framework Ignore List Settings Tab of the Settings
+   * @description Text in Framework Ignore List Settings Tab of the Settings
    */
   customExclusionRules: 'Custom exclusion rules',
   /**
-   *@description Text of the add pattern button in Framework Ignore List Settings Tab of the Settings
+   * @description Text of the add pattern button in Framework Ignore List Settings Tab of the Settings
    */
   addPattern: 'Add regex rule',
   /**
-   *@description Aria accessible name in Framework Ignore List Settings Tab of the Settings
+   * @description Aria accessible name in Framework Ignore List Settings Tab of the Settings
    */
   addFilenamePattern: 'Add a regular expression rule for the script\'s URL',
   /**
-   *@description Pattern title in Framework Ignore List Settings Tab of the Settings
-   *@example {ad.*?} PH1
+   * @description Pattern title in Framework Ignore List Settings Tab of the Settings
+   * @example {ad.*?} PH1
    */
   ignoreScriptsWhoseNamesMatchS: 'Ignore scripts whose names match \'\'{PH1}\'\'',
   /**
-   *@description Aria accessible name in Framework Ignore List Settings Tab of the Settings. It labels the input
+   * @description Aria accessible name in Framework Ignore List Settings Tab of the Settings. It labels the input
    * field used to add new or edit existing regular expressions that match file names to ignore in the debugger.
    */
   pattern: 'Add a regular expression rule for the script\'s URL',
   /**
-   *@description Error message in Framework Ignore List settings pane that declares pattern must not be empty
+   * @description Error message in Framework Ignore List settings pane that declares pattern must not be empty
    */
   patternCannotBeEmpty: 'Rule can\'t be empty',
   /**
-   *@description Error message in Framework Ignore List settings pane that declares pattern already exits
+   * @description Error message in Framework Ignore List settings pane that declares pattern already exits
    */
   patternAlreadyExists: 'Rule already exists',
   /**
-   *@description Error message in Framework Ignore List settings pane that declares pattern must be a valid regular expression
+   * @description Error message in Framework Ignore List settings pane that declares pattern must be a valid regular expression
    */
   patternMustBeAValidRegular: 'Rule must be a valid regular expression',
   /**
-   *@description Text that is usually a hyperlink to more documentation
+   * @description Text that is usually a hyperlink to more documentation
    */
   learnMore: 'Learn more',
 } as const;
@@ -97,9 +97,11 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
   private editor?: UI.ListWidget.Editor<Common.Settings.RegExpSettingItem>;
 
   constructor() {
-    super(true);
+    super({
+      jslog: `${VisualLogging.pane('blackbox')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(frameworkIgnoreListSettingsTabStyles, settingsScreenStyles);
-    this.element.setAttribute('jslog', `${VisualLogging.pane('blackbox')}`);
 
     const settingsContent =
         this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');