chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -4,12 +4,21 @@
 
 import * as Common from '../../core/common/common.js';
 import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
-import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import {describeWithEnvironment, getGetHostConfigStub} from '../../testing/EnvironmentHelpers.js';
 import * as Switch from '../../ui/components/switch/switch.js';
 
 import * as Settings from './settings.js';
 
 describeWithEnvironment('AISettingsTab', () => {
+  function mockHostConfigWithExplainThisResourceEnabled() {
+    getGetHostConfigStub({
+      devToolsExplainThisResourceDogfood: {
+        enabled: true,
+        modelId: 'test',
+      },
+    });
+  }
+
   function isExpanded(details: Element): boolean {
     return details.classList.contains('open');
   }
@@ -18,9 +27,10 @@ describeWithEnvironment('AISettingsTab', () => {
     switches: Switch.Switch.Switch[],
     details: Element[],
     dropdownButtons: HTMLElement[],
+    toggleContainers: HTMLElement[],
   }> {
     Common.Settings.moduleSetting('console-insights-enabled').set(false);
-    Common.Settings.moduleSetting('freestyler-enabled').set(true);
+    Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
 
     const view = new Settings.AISettingsTab.AISettingsTab();
     renderElementIntoDOM(view);
@@ -33,12 +43,15 @@ describeWithEnvironment('AISettingsTab', () => {
     assert.strictEqual(details.length, 2);
     const dropdownButtons = Array.from(view.shadowRoot.querySelectorAll('.dropdown devtools-button')) as HTMLElement[];
     assert.strictEqual(dropdownButtons.length, 2);
-    return {switches, details, dropdownButtons};
+    const toggleContainers =
+        Array.from(view.shadowRoot.querySelectorAll('.toggle-container')) as Switch.Switch.Switch[];
+    assert.strictEqual(toggleContainers.length, 2);
+    return {switches, details, dropdownButtons, toggleContainers};
   }
 
   it('renders', async () => {
     Common.Settings.moduleSetting('console-insights-enabled').set(true);
-    Common.Settings.moduleSetting('freestyler-enabled').set(true);
+    Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
 
     const view = new Settings.AISettingsTab.AISettingsTab();
     renderElementIntoDOM(view);
@@ -51,6 +64,23 @@ 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']);
+
+    const settingCardDesc = view.shadowRoot.querySelectorAll('.setting-description');
+    assert.strictEqual(settingCardDesc[1].textContent, 'Get help with understanding CSS styles');
+  });
+
+  it('renders with explain this resource enabled', async () => {
+    mockHostConfigWithExplainThisResourceEnabled();
+    Common.Settings.moduleSetting('console-insights-enabled').set(true);
+    Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
+
+    const 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');
   });
 
   it('can turn feature on, which automatically expands it', async () => {
@@ -80,11 +110,11 @@ describeWithEnvironment('AISettingsTab', () => {
   it('can turn feature off without collapsing it', async () => {
     const {switches, details, dropdownButtons} = await renderAISettings();
     dropdownButtons[1].click();
-    assert.isTrue(Common.Settings.moduleSetting('freestyler-enabled').get());
+    assert.isTrue(Common.Settings.moduleSetting('ai-assistance-enabled').get());
     assert.isTrue(isExpanded(details[1]));
 
     (switches[1].parentElement as HTMLElement).click();
-    assert.isFalse(Common.Settings.moduleSetting('freestyler-enabled').get());
+    assert.isFalse(Common.Settings.moduleSetting('ai-assistance-enabled').get());
     assert.isTrue(isExpanded(details[1]));
   });
 
@@ -97,18 +127,18 @@ describeWithEnvironment('AISettingsTab', () => {
         return {disabled: true, reason: 'reason 1'};
       },
     });
-    Common.Settings.moduleSetting('freestyler-enabled').setRegistration({
-      settingName: 'freestyler-enabled',
+    Common.Settings.moduleSetting('ai-assistance-enabled').setRegistration({
+      settingName: 'ai-assistance-enabled',
       settingType: Common.Settings.SettingType.BOOLEAN,
       defaultValue: true,
       disabledCondition: () => {
         return {disabled: true, reason: 'reason 2'};
       },
     });
-    const {switches} = await renderAISettings();
+    const {switches, toggleContainers} = await renderAISettings();
     assert.isTrue(switches[0].disabled);
-    assert.strictEqual(switches[0].title, 'reason 1');
+    assert.strictEqual(toggleContainers[0].title, 'reason 1');
     assert.isTrue(switches[1].disabled);
-    assert.strictEqual(switches[1].title, 'reason 2');
+    assert.strictEqual(toggleContainers[1].title, 'reason 2');
   });
 });

package/front_end/panels/settings/AISettingsTab.ts

@@ -4,8 +4,9 @@
 
 import * as Common from '../../core/common/common.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 IconButton from '../../ui/components/icon_button/icon_button.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';
@@ -15,6 +16,8 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import aiSettingsTabStyles from './aiSettingsTab.css.js';
 
+const {html, Directives: {ifDefined, classMap}} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Header text for for a list of things to consider in the context of generative AI features
@@ -83,6 +86,14 @@ const UIStrings = {
    *@description Text describing the 'AI assistance' feature
    */
   helpUnderstandStyling: 'Get help with understanding CSS styles',
+  /**
+   *@description Text describing the 'AI assistance' feature
+   */
+  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 which is a hyperlink to more documentation
    */
@@ -91,6 +102,14 @@ const UIStrings = {
    *@description Description of the AI assistance feature
    */
   explainStyling: 'Understand CSS styles with AI-powered insights',
+  /**
+   *@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
+   */
+  explainStylingNetworkAndFile: 'Understand CSS styles, network activity, and file origins with AI-powered insights',
   /**
    *@description Description of the AI assistance feature
    */
@@ -131,9 +150,9 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
   static readonly litTagName = LitHtml.literal`devtools-settings-ai-settings-tab`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #consoleInsightsSetting?: Common.Settings.Setting<boolean>;
-  #freestylerSetting?: Common.Settings.Setting<boolean>;
+  #aiAssistanceSetting?: Common.Settings.Setting<boolean>;
   #isConsoleInsightsSettingExpanded = false;
-  #isFreestylerSettingExpanded = false;
+  #isAiAssistanceSettingExpanded = false;
 
   constructor() {
     super();
@@ -143,9 +162,9 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       this.#consoleInsightsSetting = undefined;
     }
     try {
-      this.#freestylerSetting = Common.Settings.Settings.instance().moduleSetting('freestyler-enabled');
+      this.#aiAssistanceSetting = Common.Settings.Settings.instance().moduleSetting('ai-assistance-enabled');
     } catch {
-      this.#freestylerSetting = undefined;
+      this.#aiAssistanceSetting = undefined;
     }
   }
 
@@ -153,6 +172,28 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     this.#shadow.adoptedStyleSheets = [Input.checkboxStyles, aiSettingsTabStyles];
   }
 
+  #getAiAssistanceSettingDescription(): Platform.UIString.LocalizedString {
+    const config = Common.Settings.Settings.instance().getHostConfig();
+    if (config.devToolsExplainThisResourceDogfood?.enabled) {
+      if (config.devToolsAiAssistanceFileAgentDogfood?.enabled) {
+        return i18nString(UIStrings.helpUnderstandStylingNetworkAndFile);
+      }
+      return i18nString(UIStrings.helpUnderstandStylingAndNetworkRequest);
+    }
+    return i18nString(UIStrings.helpUnderstandStyling);
+  }
+
+  #getAiAssistanceSettingInfo(): Platform.UIString.LocalizedString {
+    const config = Common.Settings.Settings.instance().getHostConfig();
+    if (config.devToolsExplainThisResourceDogfood?.enabled) {
+      if (config.devToolsAiAssistanceFileAgentDogfood?.enabled) {
+        return i18nString(UIStrings.explainStylingNetworkAndFile);
+      }
+      return i18nString(UIStrings.explainStylingAndNetworkRequest);
+    }
+    return i18nString(UIStrings.explainStyling);
+  }
+
   #expandConsoleInsightsSetting(): void {
     this.#isConsoleInsightsSettingExpanded = !this.#isConsoleInsightsSettingExpanded;
     void this.render();
@@ -181,24 +222,24 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     void this.render();
   }
 
-  #expandFreestylerSetting(): void {
-    this.#isFreestylerSettingExpanded = !this.#isFreestylerSettingExpanded;
+  #expandAiAssistanceSetting(): void {
+    this.#isAiAssistanceSettingExpanded = !this.#isAiAssistanceSettingExpanded;
     void this.render();
   }
 
-  #toggleFreestylerSetting(ev: Event): void {
+  #toggleAiAssistanceSetting(ev: Event): void {
     // If the switch is being clicked, there is both a click- and a
     // change-event. Aborting on click avoids running this method twice.
     if (ev.target instanceof Switch.Switch.Switch && ev.type !== Switch.Switch.SwitchChangeEvent.eventName) {
       return;
     }
-    if (!this.#freestylerSetting) {
+    if (!this.#aiAssistanceSetting) {
       return;
     }
-    const oldSettingValue = this.#freestylerSetting.get();
-    this.#freestylerSetting.set(!oldSettingValue);
-    if (!oldSettingValue && !this.#isFreestylerSettingExpanded) {
-      this.#isFreestylerSettingExpanded = true;
+    const oldSettingValue = this.#aiAssistanceSetting.get();
+    this.#aiAssistanceSetting.set(!oldSettingValue);
+    if (!oldSettingValue && !this.#isAiAssistanceSettingExpanded) {
+      this.#isAiAssistanceSettingExpanded = true;
     }
     void this.render();
   }
@@ -207,15 +248,15 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       LitHtml.TemplateResult {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div>
-        <${IconButton.Icon.Icon.litTagName} .data=${{
+        <devtools-icon .data=${{
           iconName: icon,
           color: 'var(--icon-default)',
           width: 'var(--sys-size-8)',
           height: 'var(--sys-size-8)',
         } as IconButton.Icon.IconData}>
-        </${IconButton.Icon.Icon.litTagName}>
+        </devtools-icon>
       </div>
       <div>${text}</div>
     `;
@@ -237,13 +278,13 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       {icon: 'corporate-fare', text: i18nString(UIStrings.adminSettings)},
       {
         icon: 'policy',
-        text: LitHtml.html`${i18n.i18n.getFormatLocalizedString(str_, UIStrings.termsOfServicePrivacyNotice, {
+        text: html`${i18n.i18n.getFormatLocalizedString(str_, UIStrings.termsOfServicePrivacyNotice, {
           PH1: tosLink,
           PH2: privacyNoticeLink,
         })}`,
       },
     ];
-    return LitHtml.html`
+    return html`
       <div class="shared-disclaimer">
         <h2>${i18nString(UIStrings.boostYourProductivity)}</h2>
         <h3 class="disclaimer-list-header">${i18nString(UIStrings.thingsToConsider)}</h3>
@@ -257,14 +298,14 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
   #renderSettingItem(icon: string, text: Common.UIString.LocalizedString): LitHtml.TemplateResult {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div>
-        <${IconButton.Icon.Icon.litTagName} .data=${{
+        <devtools-icon .data=${{
           iconName: icon,
           width: 'var(--sys-size-9)',
           height: 'var(--sys-size-9)',
         } as IconButton.Icon.IconData}>
-        </${IconButton.Icon.Icon.litTagName}>
+        </devtools-icon>
       </div>
       <div class="padded">${text}</div>
     `;
@@ -280,17 +321,17 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div class="accordion-header" @click=${this.#expandConsoleInsightsSetting}>
         <div class="icon-container centered">
-          <${IconButton.Icon.Icon.litTagName} name="lightbulb-spark"></${IconButton.Icon.Icon.litTagName}>
+          <devtools-icon name="lightbulb-spark"></devtools-icon>
         </div>
         <div class="setting-card">
           <h2>${i18n.i18n.lockedString('Console Insights')}</h2>
           <div class="setting-description">${i18nString(UIStrings.helpUnderstandConsole)}</div>
         </div>
         <div class="dropdown centered">
-          <${Buttons.Button.Button.litTagName}
+          <devtools-button
             .data=${{
               title: this.#isConsoleInsightsSettingExpanded ? i18nString(UIStrings.showLess) : i18nString(UIStrings.showMore),
               size: Buttons.Button.Size.SMALL,
@@ -298,21 +339,23 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
               variant: Buttons.Button.Variant.ICON,
               jslogContext: 'console-insights.accordion',
             } as Buttons.Button.ButtonData}
-          ></${Buttons.Button.Button.litTagName}>
+          ></devtools-button>
         </div>
       </div>
       <div class="divider"></div>
-      <div class="toggle-container centered" @click=${this.#toggleConsoleInsightsSetting.bind(this)}>
-        <${Switch.Switch.Switch.litTagName}
-          .checked=${this.#consoleInsightsSetting?.get() && !this.#consoleInsightsSetting?.disabled()}
-          .jslogContext=${this.#consoleInsightsSetting?.name}
-          .disabled=${this.#consoleInsightsSetting?.disabled()}
-          title=${this.#consoleInsightsSetting?.disabledReason()}
+      <div class="toggle-container centered"
+        title=${ifDefined(this.#consoleInsightsSetting?.disabledReason())}
+        @click=${this.#toggleConsoleInsightsSetting.bind(this)}
+      >
+        <devtools-switch
+          .checked=${Boolean(this.#consoleInsightsSetting?.get() && !this.#consoleInsightsSetting?.disabled())}
+          .jslogContext=${this.#consoleInsightsSetting?.name || ''}
+          .disabled=${Boolean(this.#consoleInsightsSetting?.disabled())}
           @switchchange=${this.#toggleConsoleInsightsSetting.bind(this)}
           aria-label=${this.#consoleInsightsSetting?.disabledReason() || i18nString(UIStrings.enableConsoleInsights)}
-        ></${Switch.Switch.Switch.litTagName}>
+        ></devtools-switch>
       </div>
-      <div class=${LitHtml.Directives.classMap(detailsClasses)}>
+      <div class=${classMap(detailsClasses)}>
         <div class="overflow-hidden">
           <div class="expansion-grid">
             <h3 class="expansion-grid-whole-row">${i18nString(UIStrings.whenOn)}</h3>
@@ -337,52 +380,54 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // clang-format on
   }
 
-  #renderFreestylerSetting(): LitHtml.TemplateResult {
+  #renderAiAssistanceSetting(): LitHtml.TemplateResult {
     const detailsClasses = {
       'whole-row': true,
-      open: this.#isFreestylerSettingExpanded,
+      open: this.#isAiAssistanceSettingExpanded,
     };
-    const tabindex = this.#isFreestylerSettingExpanded ? '0' : '-1';
+    const tabindex = this.#isAiAssistanceSettingExpanded ? '0' : '-1';
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
-      <div class="accordion-header" @click=${this.#expandFreestylerSetting}>
+    return html`
+      <div class="accordion-header" @click=${this.#expandAiAssistanceSetting}>
         <div class="icon-container centered">
-          <${IconButton.Icon.Icon.litTagName} name="smart-assistant"></${IconButton.Icon.Icon.litTagName}>
+          <devtools-icon name="smart-assistant"></devtools-icon>
         </div>
         <div class="setting-card">
           <h2>${i18n.i18n.lockedString('AI assistance')}</h2>
-          <div class="setting-description">${i18nString(UIStrings.helpUnderstandStyling)}</div>
+          <div class="setting-description">${this.#getAiAssistanceSettingDescription()}</div>
         </div>
         <div class="dropdown centered">
-          <${Buttons.Button.Button.litTagName}
+          <devtools-button
             .data=${{
-              title: this.#isFreestylerSettingExpanded ? i18nString(UIStrings.showLess) : i18nString(UIStrings.showMore),
+              title: this.#isAiAssistanceSettingExpanded ? i18nString(UIStrings.showLess) : i18nString(UIStrings.showMore),
               size: Buttons.Button.Size.SMALL,
-              iconUrl: this.#isFreestylerSettingExpanded ? chevronUpIconUrl : chevronDownIconUrl,
+              iconUrl: this.#isAiAssistanceSettingExpanded ? chevronUpIconUrl : chevronDownIconUrl,
               variant: Buttons.Button.Variant.ICON,
               jslogContext: 'freestyler.accordion',
             } as Buttons.Button.ButtonData}
-          ></${Buttons.Button.Button.litTagName}>
+          ></devtools-button>
         </div>
       </div>
       <div class="divider"></div>
-      <div class="toggle-container centered" @click=${this.#toggleFreestylerSetting.bind(this)}>
-        <${Switch.Switch.Switch.litTagName}
-          .checked=${this.#freestylerSetting?.get() && !this.#freestylerSetting?.disabled()}
-          .jslogContext=${this.#freestylerSetting?.name}
-          .disabled=${this.#freestylerSetting?.disabled()}
-          title=${this.#freestylerSetting?.disabledReason()}
-          @switchchange=${this.#toggleFreestylerSetting.bind(this)}
-          aria-label=${this.#freestylerSetting?.disabledReason() || i18nString(UIStrings.enableAiAssistance)}
-        ></${Switch.Switch.Switch.litTagName}>
+      <div class="toggle-container centered"
+        title=${ifDefined(this.#aiAssistanceSetting?.disabledReason())}
+        @click=${this.#toggleAiAssistanceSetting.bind(this)}
+      >
+        <devtools-switch
+          .checked=${Boolean(this.#aiAssistanceSetting?.get() && !this.#aiAssistanceSetting?.disabled())}
+          .jslogContext=${this.#aiAssistanceSetting?.name || ''}
+          .disabled=${Boolean(this.#aiAssistanceSetting?.disabled())}
+          @switchchange=${this.#toggleAiAssistanceSetting.bind(this)}
+          aria-label=${this.#aiAssistanceSetting?.disabledReason() || i18nString(UIStrings.enableAiAssistance)}
+        ></devtools-switch>
       </div>
-      <div class=${LitHtml.Directives.classMap(detailsClasses)}>
+      <div class=${classMap(detailsClasses)}>
         <div class="overflow-hidden">
           <div class="expansion-grid">
             <h3 class="expansion-grid-whole-row">${i18nString(UIStrings.whenOn)}</h3>
-            ${this.#renderSettingItem('info', i18nString(UIStrings.explainStyling))}
+            ${this.#renderSettingItem('info', this.#getAiAssistanceSettingInfo())}
             ${this.#renderSettingItem('pen-spark', i18nString(UIStrings.receiveStylingSuggestions))}
             <h3 class="expansion-grid-whole-row">${i18nString(UIStrings.thingsToConsider)}</h3>
             ${this.#renderSettingItem('google', i18nString(UIStrings.freestylerSendsData))}
@@ -406,16 +451,16 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
   override async render(): Promise<void> {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <header>
         <h1>${i18nString(UIStrings.aiInnovations)}</h1>
       </header>
       <div class="settings-container-wrapper" jslog=${VisualLogging.pane('chrome-ai')}>
         ${this.#renderSharedDisclaimer()}
-        ${this.#consoleInsightsSetting || this.#freestylerSetting ? LitHtml.html`
+        ${this.#consoleInsightsSetting || this.#aiAssistanceSetting ? html`
           <div class="settings-container">
             ${this.#consoleInsightsSetting ? this.#renderConsoleInsightsSetting() : LitHtml.nothing}
-            ${this.#freestylerSetting ? this.#renderFreestylerSetting() : LitHtml.nothing}
+            ${this.#aiAssistanceSetting ? this.#renderAiAssistanceSetting() : LitHtml.nothing}
           </div>
         ` : LitHtml.nothing}
       </div>

package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -26,6 +26,10 @@ const UIStrings = {
    *@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
+   */
+  ignoreListAnonymousScripts: 'Anonymous scripts from eval or console',
   /**
    *@description Text in Framework Ignore List Settings Tab of the Settings
    */
@@ -138,6 +142,11 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
             'http://goo.gle/skip-third-party' as Platform.DevToolsPath.UrlString));
     automaticallyIgnoreList.appendChild(automaticallyIgnoreLinkButton);
 
+    const ignoreListAnonymousScripts = generalExclusionGroup.createChild('div', 'ignore-list-option');
+    ignoreListAnonymousScripts.appendChild(UI.SettingsUI.createSettingCheckbox(
+        i18nString(UIStrings.ignoreListAnonymousScripts),
+        Common.Settings.Settings.instance().moduleSetting('skip-anonymous-scripts'), true));
+
     const customExclusionGroup = this.createSettingGroup(i18nString(UIStrings.customExclusionRules));
     ignoreListOptions.appendChild(customExclusionGroup);
 

package/front_end/panels/settings/SettingsScreen.ts

@@ -40,7 +40,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {PanelUtils} from '../utils/utils.js';
 
 import * as PanelComponents from './components/components.js';
-import {type KeybindsSettingsTab} from './KeybindsSettingsTab.js';
+import type {KeybindsSettingsTab} from './KeybindsSettingsTab.js';
 import settingsScreenStyles from './settingsScreen.css.js';
 
 const UIStrings = {

package/front_end/panels/settings/components/SyncSection.ts

@@ -2,16 +2,21 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/chrome_link/chrome_link.js';
+import '../../../ui/components/settings/settings.js';
+
 import * as Common from '../../../core/common/common.js';
-import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import type * 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 ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import type * as Settings from '../../../ui/components/settings/settings.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
-import * as Settings from '../../../ui/components/settings/settings.js';
-import * as ChromeLink from '../../../ui/components/chrome_link/chrome_link.js';
 
 import syncSectionStyles from './syncSection.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Text shown to the user in the Settings UI. 'This setting' refers
@@ -72,13 +77,13 @@ export class SyncSection extends HTMLElement {
     this.#syncSetting?.setDisabled(checkboxDisabled);
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <fieldset>
         <legend>${Common.Settings.getLocalizedSettingsCategory(Common.Settings.SettingCategory.SYNC)}</legend>
         ${renderAccountInfoOrWarning(this.#syncInfo)}
-        <${Settings.SettingCheckbox.SettingCheckbox.litTagName} .data=${
+        <setting-checkbox .data=${
             {setting: this.#syncSetting} as Settings.SettingCheckbox.SettingCheckboxData}>
-        </${Settings.SettingCheckbox.SettingCheckbox.litTagName}>
+        </setting-checkbox>
       </fieldset>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -90,28 +95,28 @@ export class SyncSection extends HTMLElement {
 
 function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.SyncInformation): LitHtml.TemplateResult {
   if (!syncInfo.isSyncActive) {
-    const link = 'chrome://settings/syncSetup';
+    const link = 'chrome://settings/syncSetup' as Platform.DevToolsPath.UrlString;
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <span class="warning">
         ${i18nString(UIStrings.syncDisabled)}
-        <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${link}>${i18nString(UIStrings.settings)}</${ChromeLink.ChromeLink.ChromeLink.litTagName}>
+        <devtools-chrome-link .href=${link}>${i18nString(UIStrings.settings)}</devtools-chrome-link>
       </span>`;
     // clang-format on
   }
   if (!syncInfo.arePreferencesSynced) {
-    const link = 'chrome://settings/syncSetup/advanced';
+    const link = 'chrome://settings/syncSetup/advanced' as Platform.DevToolsPath.UrlString;
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <span class="warning">
         ${i18nString(UIStrings.preferencesSyncDisabled)}
-        <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${link}>${i18nString(UIStrings.settings)}</${ChromeLink.ChromeLink.ChromeLink.litTagName}>
+        <devtools-chrome-link .href=${link}>${i18nString(UIStrings.settings)}</devtools-chrome-link>
       </span>`;
     // clang-format on
   }
-  return LitHtml.html`
+  return html`
     <div class="account-info">
       <img src="data:image/png;base64, ${syncInfo.accountImage}" alt="Account avatar" />
       <div class="account-email">