chrome-devtools-frontend 1.0.1534251 → 1.0.1535712

package/front_end/models/ai_assistance/BuiltInAi.ts

@@ -2,10 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Host from '../../core/host/host.js';
 import * as Root from '../../core/root/root.js';
 
 let builtInAiInstance: BuiltInAi|undefined;
-let availability = '';
+let availability: LanguageModelAvailability|undefined;
+let hasGpu: boolean|undefined;
+let isFirstRun = true;
 
 export interface LanguageModel {
   promptStreaming: (arg0: string, opts?: {
@@ -15,20 +18,62 @@ export interface LanguageModel {
   destroy: () => void;
 }
 
+export const enum LanguageModelAvailability {
+  UNAVAILABLE = 'unavailable',
+  DOWNLOADABLE = 'downloadable',
+  DOWNLOADING = 'downloading',
+  AVAILABLE = 'available',
+  DISABLED = 'disabled',
+}
+
 export class BuiltInAi {
   #consoleInsightsSession: LanguageModel;
 
-  static async isAvailable(): Promise<boolean> {
+  static async getLanguageModelAvailability(): Promise<LanguageModelAvailability> {
     if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.enabled) {
-      return false;
+      return LanguageModelAvailability.DISABLED;
+    }
+    try {
+      // @ts-expect-error
+      availability = await window.LanguageModel.availability({expectedOutputs: [{type: 'text', languages: ['en']}]}) as
+          LanguageModelAvailability;
+      return availability;
+    } catch {
+      return LanguageModelAvailability.UNAVAILABLE;
     }
-    // @ts-expect-error
-    availability = await window.LanguageModel.availability({expectedOutputs: [{type: 'text', languages: ['en']}]});
-    return availability === 'available';
   }
 
   static cachedIsAvailable(): boolean {
-    return availability === 'available';
+    return availability === LanguageModelAvailability.AVAILABLE;
+  }
+
+  static isGpuAvailable(): boolean {
+    const hasGpuHelper = (): boolean => {
+      const canvas = document.createElement('canvas');
+      try {
+        const webgl = canvas.getContext('webgl');
+        if (!webgl) {
+          return false;
+        }
+        const debugInfo = webgl.getExtension('WEBGL_debug_renderer_info');
+        if (!debugInfo) {
+          return false;
+        }
+        const renderer = webgl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+        if (renderer.includes('SwiftShader')) {
+          return false;
+        }
+      } catch {
+        return false;
+      }
+      return true;
+    };
+
+    if (hasGpu !== undefined) {
+      return hasGpu;
+    }
+    hasGpu = hasGpuHelper();
+    return hasGpu;
   }
 
   private constructor(consoleInsightsSession: LanguageModel) {
@@ -37,40 +82,97 @@ export class BuiltInAi {
 
   static async instance(): Promise<BuiltInAi|undefined> {
     if (builtInAiInstance === undefined) {
-      if (!(await BuiltInAi.isAvailable())) {
-        return undefined;
+      if (isFirstRun) {
+        const languageModelAvailability = await BuiltInAi.getLanguageModelAvailability();
+        const hasGpu = BuiltInAi.isGpuAvailable();
+        if (hasGpu) {
+          switch (languageModelAvailability) {
+            case LanguageModelAvailability.UNAVAILABLE:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.UNAVAILABLE_HAS_GPU);
+              break;
+            case LanguageModelAvailability.DOWNLOADABLE:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADABLE_HAS_GPU);
+              break;
+            case LanguageModelAvailability.DOWNLOADING:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADING_HAS_GPU);
+              break;
+            case LanguageModelAvailability.AVAILABLE:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.AVAILABLE_HAS_GPU);
+              break;
+            case LanguageModelAvailability.DISABLED:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DISABLED_HAS_GPU);
+              break;
+          }
+        } else {
+          switch (languageModelAvailability) {
+            case LanguageModelAvailability.UNAVAILABLE:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.UNAVAILABLE_NO_GPU);
+              break;
+            case LanguageModelAvailability.DOWNLOADABLE:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADABLE_NO_GPU);
+              break;
+            case LanguageModelAvailability.DOWNLOADING:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADING_NO_GPU);
+              break;
+            case LanguageModelAvailability.AVAILABLE:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.AVAILABLE_NO_GPU);
+              break;
+            case LanguageModelAvailability.DISABLED:
+              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DISABLED_NO_GPU);
+              break;
+          }
+        }
+        isFirstRun = false;
+        if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !hasGpu) {
+          return undefined;
+        }
+        if (languageModelAvailability !== LanguageModelAvailability.AVAILABLE) {
+          return undefined;
+        }
+      } else {
+        if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !BuiltInAi.isGpuAvailable()) {
+          return undefined;
+        }
+        if ((await BuiltInAi.getLanguageModelAvailability()) !== LanguageModelAvailability.AVAILABLE) {
+          return undefined;
+        }
       }
-      // @ts-expect-error
-      const consoleInsightsSession = await window.LanguageModel.create({
-        initialPrompts: [{
-          role: 'system',
-          content: `
-You are an expert web developer. Your goal is to help a human web developer who
-is using Chrome DevTools to debug a web site or web app. The Chrome DevTools
-console is showing a message which is either an error or a warning. Please help
-the user understand the problematic console message.
 
-Your instructions are as follows:
-  - Explain the reason why the error or warning is showing up.
-  - The explanation has a maximum length of 200 characters. Anything beyond this
-    length will be cut off. Make sure that your explanation is at most 200 characters long.
-  - Your explanation should not end in the middle of a sentence.
-  - Your explanation should consist of a single paragraph only. Do not include any
-    headings or code blocks. Only write a single paragraph of text.
-  - Your response should be concise and to the point. Avoid lengthy explanations
-    or unnecessary details.
-          `
-        }],
-        expectedInputs: [{
-          type: 'text',
-          languages: ['en'],
-        }],
-        expectedOutputs: [{
-          type: 'text',
-          languages: ['en'],
-        }],
-      }) as LanguageModel;
-      builtInAiInstance = new BuiltInAi(consoleInsightsSession);
+      try {
+        // @ts-expect-error
+        const consoleInsightsSession = await window.LanguageModel.create({
+          initialPrompts: [{
+            role: 'system',
+            content: `
+  You are an expert web developer. Your goal is to help a human web developer who
+  is using Chrome DevTools to debug a web site or web app. The Chrome DevTools
+  console is showing a message which is either an error or a warning. Please help
+  the user understand the problematic console message.
+
+  Your instructions are as follows:
+    - Explain the reason why the error or warning is showing up.
+    - The explanation has a maximum length of 200 characters. Anything beyond this
+      length will be cut off. Make sure that your explanation is at most 200 characters long.
+    - Your explanation should not end in the middle of a sentence.
+    - Your explanation should consist of a single paragraph only. Do not include any
+      headings or code blocks. Only write a single paragraph of text.
+    - Your response should be concise and to the point. Avoid lengthy explanations
+      or unnecessary details.
+            `
+          }],
+          expectedInputs: [{
+            type: 'text',
+            languages: ['en'],
+          }],
+          expectedOutputs: [{
+            type: 'text',
+            languages: ['en'],
+          }],
+        }) as LanguageModel;
+        builtInAiInstance = new BuiltInAi(consoleInsightsSession);
+      } catch {
+        return undefined;
+      }
     }
     return builtInAiInstance;
   }

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -1,7 +1,6 @@
 // Copyright 2025 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-lit-render-outside-of-view */
 
 import '../../ui/legacy/legacy.js';
 import '../../ui/components/markdown_view/markdown_view.js';
@@ -187,42 +186,8 @@ export interface ViewOutput {
 }
 
 type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
-
-export class PatchWidget extends UI.Widget.Widget {
-  changeSummary = '';
-  changeManager: AiAssistanceModel.ChangeManager.ChangeManager|undefined;
-  // Whether the user completed first run experience dialog or not.
-  #aiPatchingFreCompletedSetting =
-      Common.Settings.Settings.instance().createSetting('ai-assistance-patching-fre-completed', false);
-  #projectIdSetting =
-      Common.Settings.Settings.instance().createSetting('ai-assistance-patching-selected-project-id', '');
-  #view: View;
-  #viewOutput: ViewOutput = {};
-  #aidaClient: Host.AidaClient.AidaClient;
-  #applyPatchAbortController?: AbortController;
-  #project?: Workspace.Workspace.Project;
-  #patchSources?: string;
-  #savedToDisk?: boolean;
-  #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
-  #patchSuggestionState = PatchSuggestionState.INITIAL;
-  #workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();
-  #workspace = Workspace.Workspace.WorkspaceImpl.instance();
-  #automaticFileSystem =
-      Persistence.AutomaticFileSystemManager.AutomaticFileSystemManager.instance().automaticFileSystem;
-  #applyToDisconnectedAutomaticWorkspace = false;
-  // `rpcId` from the `applyPatch` request
-  #rpcId: Host.AidaClient.RpcGlobalId|null = null;
-
-  constructor(element?: HTMLElement, view?: View, opts?: {
-    aidaClient: Host.AidaClient.AidaClient,
-  }) {
-    super(element);
-    this.#aidaClient = opts?.aidaClient ?? new Host.AidaClient.AidaClient();
-    this.#noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
-        Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
-
-    // clang-format off
-    this.#view = view ?? ((input, output, target) => {
+const DEFAULT_VIEW: View =
+    (input, output, target) => {
       if (!input.changeSummary && input.patchSuggestionState === PatchSuggestionState.INITIAL) {
         return;
       }
@@ -428,9 +393,43 @@ export class PatchWidget extends UI.Widget.Widget {
           </details>
         `;
 
-      render(template, target, {host: target});
-    });
-    // clang-format on
+      render(template, target);
+    };
+
+export class PatchWidget extends UI.Widget.Widget {
+  changeSummary = '';
+  changeManager: AiAssistanceModel.ChangeManager.ChangeManager|undefined;
+  // Whether the user completed first run experience dialog or not.
+  #aiPatchingFreCompletedSetting =
+      Common.Settings.Settings.instance().createSetting('ai-assistance-patching-fre-completed', false);
+  #projectIdSetting =
+      Common.Settings.Settings.instance().createSetting('ai-assistance-patching-selected-project-id', '');
+  #view: View;
+  #viewOutput: ViewOutput = {};
+  #aidaClient: Host.AidaClient.AidaClient;
+  #applyPatchAbortController?: AbortController;
+  #project?: Workspace.Workspace.Project;
+  #patchSources?: string;
+  #savedToDisk?: boolean;
+  #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
+  #patchSuggestionState = PatchSuggestionState.INITIAL;
+  #workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();
+  #workspace = Workspace.Workspace.WorkspaceImpl.instance();
+  #automaticFileSystem =
+      Persistence.AutomaticFileSystemManager.AutomaticFileSystemManager.instance().automaticFileSystem;
+  #applyToDisconnectedAutomaticWorkspace = false;
+  // `rpcId` from the `applyPatch` request
+  #rpcId: Host.AidaClient.RpcGlobalId|null = null;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW, opts?: {
+    aidaClient: Host.AidaClient.AidaClient,
+  }) {
+    super(element);
+    this.#aidaClient = opts?.aidaClient ?? new Host.AidaClient.AidaClient();
+    this.#noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
+        Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
+    this.#view = view;
+
     this.requestUpdate();
   }
 

package/front_end/panels/ai_assistance/components/ExploreWidget.ts

@@ -2,7 +2,6 @@
 // Copyright 2025 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-lit-render-outside-of-view */
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
@@ -105,7 +104,6 @@ export const DEFAULT_VIEW = (
       </div>
     `,
     target,
-    { host: target },
   );
   // clang-format on
 };

package/front_end/panels/autofill/AutofillView.ts

@@ -1,7 +1,6 @@
 // Copyright 2023 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-lit-render-outside-of-view */
 
 import '../../ui/components/adorners/adorners.js';
 import '../../ui/legacy/components/data_grid/data_grid.js';
@@ -250,7 +249,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
             </div>
           </div>
         </main>
-      `, target, {host: this});
+      `, target);
     // clang-format on
     return;
   }
@@ -287,7 +286,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
           ${renderFilledFields()}
         </div>
       </main>
-    `, target, {host: this});
+    `, target);
   // clang-format on
 };
 

package/front_end/panels/changes/CombinedDiffView.ts

@@ -1,7 +1,6 @@
 // Copyright 2025 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-lit-render-outside-of-view */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -101,6 +100,18 @@ function renderSingleDiffView(singleDiffViewInput: SingleDiffViewInput): Lit.Tem
   // clang-format on
 }
 
+const DEFAULT_VIEW: View = (input, output, target) => {
+  // clang-format off
+  Lit.render(
+      html`
+      <div class="combined-diff-view">
+        ${input.singleDiffViewInputs.map(singleDiffViewInput => renderSingleDiffView(singleDiffViewInput))}
+      </div>
+    `,
+      target);
+  // clang-format on
+};
+
 export class CombinedDiffView extends UI.Widget.Widget {
   /**
    * Ignores urls that start with any in the list
@@ -113,19 +124,7 @@ export class CombinedDiffView extends UI.Widget.Widget {
   #copiedFiles: Record<string, boolean> = {};
   #view: View;
   #viewOutput: ViewOutput = {};
-  constructor(element?: HTMLElement, view: View = (input, output, target) => {
-    output.scrollToSelectedDiff = () => {
-      target.querySelector('details.selected')?.scrollIntoView();
-    };
-
-    Lit.render(
-        html`
-      <div class="combined-diff-view">
-        ${input.singleDiffViewInputs.map(singleDiffViewInput => renderSingleDiffView(singleDiffViewInput))}
-      </div>
-    `,
-        target, {host: target});
-  }) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.registerRequiredCSS(combinedDiffViewStyles);
     this.#view = view;

package/front_end/panels/common/BadgeNotification.ts

@@ -6,7 +6,6 @@ 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 * as Badges from '../../models/badges/badges.js';
-import * as WindowBoundsService from '../../services/window_bounds/window_bounds.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -166,8 +165,7 @@ export class BadgeNotification extends UI.Widget.Widget {
 
   #positionNotification(): void {
     const boundingRect = this.contentElement.getBoundingClientRect();
-    const container =
-        WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
+    const container = UI.UIUtils.getDevToolsBoundingElement();
     this.contentElement.positionAt(
         LEFT_OFFSET, container.clientHeight - boundingRect.height - BOTTOM_OFFSET, container);
   }

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -124,6 +124,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
       variant="rich"
       vertical-distance-increase=-6
       prefer-span-left
+      jslogContext="console-insight-teaser"
     >
       <div class="teaser-tooltip-container">
         ${input.isError ? html`
@@ -177,7 +178,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
             aria-details=${'teaser-info-tooltip-' + input.uuid}
             .accessibleLabel=${lockedString(UIStringsNotTranslate.learnDataUsage)}
           ></devtools-button>
-          <devtools-tooltip id=${'teaser-info-tooltip-' + input.uuid} variant="rich">
+          <devtools-tooltip id=${'teaser-info-tooltip-' + input.uuid} variant="rich" jslogContext="teaser-info-tooltip">
             <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
             <div class="learn-more">
               <x-link
@@ -322,6 +323,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     }
     if (this.#isGenerating) {
       this.#mainText = '';
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationAborted);
     }
     this.#isGenerating = false;
     if (this.#timeoutId) {
@@ -345,7 +347,9 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   async #generateTeaserText(): Promise<void> {
     this.#headerText = this.#consoleViewMessage.toMessageTextString().substring(0, 70);
     this.#isGenerating = true;
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationStarted);
     this.#timeoutId = setTimeout(this.#setSlow.bind(this), SLOW_GENERATION_CUTOFF_MILLISECONDS);
+    const startTime = performance.now();
     let teaserText = '';
     try {
       for await (const chunk of this.#getOnDeviceInsight()) {
@@ -358,6 +362,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
       if (err.name !== 'AbortError') {
         console.error(err.name, err.message);
         this.#isError = true;
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationErrored);
       }
       this.#isGenerating = false;
       clearTimeout(this.#timeoutId);
@@ -366,8 +371,10 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     }
 
     clearTimeout(this.#timeoutId);
+    Host.userMetrics.consoleInsightTeaserGenerated(performance.now() - startTime);
     this.#isGenerating = false;
     this.#mainText = teaserText;
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationCompleted);
     this.requestUpdate();
   }
 

package/front_end/panels/console/ConsoleView.ts

@@ -505,6 +505,7 @@ export class ConsoleView extends UI.Widget.VBox implements
 
     this.pinPane = new ConsolePinPane(liveExpressionButton, () => this.prompt.focus());
     this.pinPane.element.classList.add('console-view-pinpane');
+    this.pinPane.element.classList.remove('flex-auto');
     this.pinPane.show(this.contentsElement);
 
     this.viewport = new ConsoleViewport(this);

package/front_end/panels/console/consoleView.css

@@ -527,7 +527,6 @@
 }
 
 .console-view-pinpane {
-  flex: none;
   max-height: 50%;
 }
 

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -422,7 +422,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       if (domModel.parentModel()) {
         continue;
       }
-      if (!this.rootDOMNode) {
+      if (!this.rootDOMNode || this.rootDOMNode.domModel() !== domModel) {
         if (domModel.existingDocument()) {
           this.rootDOMNode = domModel.existingDocument();
           this.onDocumentUpdated(domModel);

package/front_end/panels/network/components/DirectSocketConnectionView.ts

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
-
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -112,9 +110,9 @@ export interface ViewInput {
   onCopyRow: () => void;
 }
 
-export type View = (input: ViewInput, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
-export const DEFAULT_VIEW: View = (input, target) => {
+export const DEFAULT_VIEW: View = (input, _output, target) => {
   function isCategoryOpen(name: string): boolean {
     return input.openCategories.includes(name);
   }
@@ -203,7 +201,7 @@ export const DEFAULT_VIEW: View = (input, target) => {
     ${renderCategory(CATEGORY_NAME_GENERAL, i18nString(UIStrings.general), generalContent)}
     ${renderCategory(CATEGORY_NAME_OPTIONS, i18nString(UIStrings.options), optionsContent)}
     ${socketInfo.openInfo ? renderCategory(CATEGORY_NAME_OPEN_INFO, i18nString(UIStrings.openInfo), openInfoContent) : Lit.nothing}
-  `, target, {host: input});
+  `, target);
   // clang-format on
 };
 
@@ -278,7 +276,7 @@ export class DirectSocketConnectionView extends UI.Widget.Widget {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
       }
     };
-    this.#view(viewInput, this.contentElement);
+    this.#view(viewInput, undefined, this.contentElement);
   }
 
   #setIsOpen(categoryName: string, open: boolean): void {

package/front_end/panels/network/components/ResponseHeaderSection.ts

@@ -29,7 +29,6 @@ import {
   type HeaderEditedEvent,
   type HeaderEditorDescriptor,
   type HeaderRemovedEvent,
-  type HeaderSectionRow,
   type HeaderSectionRowData,
   isValidHeaderName,
 } from './HeaderSectionRow.js';
@@ -515,7 +514,7 @@ export class ResponseHeaderSection extends ResponseHeaderSectionBase {
     this.#updateOverrides(this.#headerEditors[index].name, this.#headerEditors[index].value || '', index);
     this.#render();
 
-    const rows = this.shadow.querySelectorAll<HeaderSectionRow>('devtools-header-section-row');
+    const rows = this.shadow.querySelectorAll('devtools-header-section-row');
     const [lastRow] = Array.from(rows).slice(-1);
     lastRow?.focus();
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.HeaderOverrideHeaderAdded);