chrome-devtools-frontend 1.0.1675430 → 1.0.1676824

package/front_end/ui/comments/CommentsOverlayWidget.ts

@@ -0,0 +1,121 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+
+import {
+  type CommentManager,
+  Events as CommentManagerEvents,
+  type HighlightRectData,
+  type HoverHighlightData,
+  type PinPositionData,
+} from './CommentManager.js';
+import commentsOverlayStyles from './commentsOverlay.css.js';
+
+const {html, render, nothing, Directives: {styleMap}} = Lit;
+
+export interface ViewInput {
+  pins: PinPositionData[];
+  highlights: HighlightRectData[];
+  hoverHighlight: HoverHighlightData|null;
+  commentMode: boolean;
+  onPinClick: (threadId: string) => void;
+}
+
+export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+// clang-format off
+const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  render(html`
+    <style>${commentsOverlayStyles}</style>
+    <div class="comments-overlay-container">
+      ${input.hoverHighlight && input.hoverHighlight.visible ? html`
+        <div
+          class="comment-hover-highlight"
+          style=${styleMap({
+            top: `${input.hoverHighlight.top}px`,
+            left: `${input.hoverHighlight.left}px`,
+            width: `${input.hoverHighlight.width}px`,
+            height: `${input.hoverHighlight.height}px`,
+          })}>
+        </div>
+      ` : nothing}
+      ${input.highlights.map(h => h.visible ? html`
+        <div
+          class="comment-anchor-highlight"
+          data-comment-id=${h.id}
+          style=${styleMap({
+            top: `${h.top}px`,
+            left: `${h.left}px`,
+            width: `${h.width}px`,
+            height: `${h.height}px`,
+          })}>
+        </div>
+      ` : nothing)}
+      ${input.pins.map(p => p.visible ? html`
+        <div
+          class="comment-pin"
+          data-comment-id=${p.id}
+          style=${styleMap({
+            top: `${p.top}px`,
+            left: `${p.left}px`,
+          })}
+          @click=${() => input.onPinClick(p.id)}>
+          💬
+        </div>
+      ` : nothing)}
+    </div>
+  `, target);
+};
+// clang-format on
+
+export class CommentsOverlayWidget extends UI.Widget.Widget {
+  readonly #view: View;
+  readonly #commentManager: CommentManager;
+
+  constructor(
+      commentManager: CommentManager,
+      element?: HTMLElement,
+      view: View = DEFAULT_VIEW,
+  ) {
+    super(element);
+    this.#view = view;
+    this.#commentManager = commentManager;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.#commentManager.addEventListener(CommentManagerEvents.POSITIONS_UPDATED, this.#onStateChanged, this);
+    this.#commentManager.addEventListener(CommentManagerEvents.COMMENT_THREADS_CHANGED, this.#onStateChanged, this);
+    this.#commentManager.addEventListener(CommentManagerEvents.COMMENT_MODE_CHANGED, this.#onStateChanged, this);
+    this.#commentManager.addEventListener(CommentManagerEvents.HOVER_HIGHLIGHT_CHANGED, this.#onStateChanged, this);
+    this.requestUpdate();
+  }
+
+  override willHide(): void {
+    this.#commentManager.removeEventListener(CommentManagerEvents.POSITIONS_UPDATED, this.#onStateChanged, this);
+    this.#commentManager.removeEventListener(CommentManagerEvents.COMMENT_THREADS_CHANGED, this.#onStateChanged, this);
+    this.#commentManager.removeEventListener(CommentManagerEvents.COMMENT_MODE_CHANGED, this.#onStateChanged, this);
+    this.#commentManager.removeEventListener(CommentManagerEvents.HOVER_HIGHLIGHT_CHANGED, this.#onStateChanged, this);
+    super.willHide();
+  }
+
+  #onStateChanged(): void {
+    this.requestUpdate();
+  }
+
+  #handlePinClick = (_threadId: string): void => {};
+
+  override performUpdate(): void {
+    const viewInput: ViewInput = {
+      pins: this.#commentManager.getPinPositions(),
+      highlights: this.#commentManager.getHighlightRects(),
+      hoverHighlight: this.#commentManager.getHoverHighlight(),
+      commentMode: this.#commentManager.isCommentMode(),
+      onPinClick: this.#handlePinClick,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
+  }
+}

package/front_end/ui/comments/comments.ts

@@ -3,7 +3,11 @@
 // found in the LICENSE file.
 
 import * as CommentAnchorResolver from './CommentAnchorResolver.js';
+import * as CommentManager from './CommentManager.js';
+import * as CommentsOverlayWidget from './CommentsOverlayWidget.js';
 
 export {
   CommentAnchorResolver,
+  CommentManager,
+  CommentsOverlayWidget,
 };

package/front_end/ui/comments/commentsOverlay.css

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2026 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+  :scope,
+  .comments-overlay-container {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 999990;
+    overflow: hidden;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  .comment-pin {
+    position: absolute;
+    pointer-events: auto;
+    cursor: pointer;
+    font-size: 24px;
+    line-height: 24px;
+    filter: drop-shadow(0 2px 5px rgb(0 0 0 / 35%));
+    user-select: none;
+    transition: transform 0.1s ease;
+  }
+
+  .comment-pin:hover {
+    transform: scale(1.15);
+  }
+
+  .comment-anchor-highlight {
+    position: absolute;
+    pointer-events: none;
+    border: 2px dashed var(--sys-color-primary);
+    background-color: color-mix(in srgb, var(--sys-color-primary), transparent 90%);
+    box-sizing: border-box;
+  }
+
+  .comment-hover-highlight {
+    position: absolute;
+    pointer-events: none;
+    border: 2px solid var(--sys-color-primary);
+    background-color: color-mix(in srgb, var(--sys-color-primary), transparent 85%);
+    box-sizing: border-box;
+  }
+}

package/front_end/{panels/common → ui/components/dialogs}/FreDialog.ts

@@ -3,11 +3,11 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-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 UI from '../../ui/legacy/legacy.js';
-import * as Lit from '../../ui/lit/lit.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
+import * as UI from '../../legacy/legacy.js';
+import * as Lit from '../../lit/lit.js';
+import * as Buttons from '../buttons/buttons.js';
 
 import styles from './freDialog.css.js';
 
@@ -32,7 +32,7 @@ const UIStrings = {
   gotIt: 'Got it',
 } as const;
 
-const str_ = i18n.i18n.registerUIStrings('panels/common/FreDialog.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('ui/components/dialogs/FreDialog.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class FreDialog {

package/front_end/ui/components/dialogs/TypeToAllowDialog.ts

@@ -0,0 +1,96 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/* eslint-disable @devtools/no-imperative-dom-api */
+
+import * as 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 Geometry from '../../../models/geometry/geometry.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+
+import typeToAllowDialogStyles from './typeToAllowDialog.css.js';
+
+const UIStrings = {
+  /**
+   * @description Text for the cancel button in the dialog.
+   */
+  cancel: 'Cancel',
+  /**
+   * @description Text for the allow button in the "type to allow" dialog.
+   */
+  allow: 'Allow',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('ui/components/dialogs/TypeToAllowDialog.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class TypeToAllowDialog {
+  static async show(options: {
+    jslogContext: {
+      dialog: string,
+      input: string,
+    },
+    header: Platform.UIString.LocalizedString,
+    message: Platform.UIString.LocalizedString,
+    typePhrase: Platform.UIString.LocalizedString,
+    inputPlaceholder: Platform.UIString.LocalizedString,
+  }): Promise<boolean> {
+    const dialog = new UI.Dialog.Dialog(options.jslogContext.dialog);
+    dialog.setMaxContentSize(new Geometry.Size(504, 340));
+    dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
+    dialog.setDimmed(true);
+    const shadowRoot =
+        UI.UIUtils.createShadowRootWithCoreStyles(dialog.contentElement, {cssFile: typeToAllowDialogStyles});
+    const content = shadowRoot.createChild('div', 'type-to-allow-dialog');
+
+    const result = await new Promise<boolean>(resolve => {
+      const header = content.createChild('div', 'header');
+      header.createChild('div', 'title').textContent = options.header;
+
+      const closeButton = header.createChild('dt-close-button', 'dialog-close-button');
+      closeButton.setTabbable(true);
+      self.onInvokeElement(closeButton, event => {
+        dialog.hide();
+        event.consume(true);
+        resolve(false);
+      });
+      closeButton.setSize(Buttons.Button.Size.SMALL);
+
+      content.createChild('div', 'message').textContent = options.message;
+
+      const input = UI.UIUtils.createInput('text-input', 'text', options.jslogContext.input);
+      input.placeholder = options.inputPlaceholder;
+      content.appendChild(input);
+
+      const buttonsBar = content.createChild('div', 'button');
+      const cancelButton =
+          UI.UIUtils.createTextButton(i18nString(UIStrings.cancel), () => resolve(false), {jslogContext: 'cancel'});
+
+      const allowButton = UI.UIUtils.createTextButton(i18nString(UIStrings.allow), () => {
+        resolve(input.value === options.typePhrase || input.value === `'${options.typePhrase}'`);
+      }, {jslogContext: 'confirm', variant: Buttons.Button.Variant.PRIMARY});
+      allowButton.disabled = true;
+
+      buttonsBar.appendChild(allowButton);
+      buttonsBar.appendChild(cancelButton);
+
+      input.addEventListener('input', () => {
+        allowButton.disabled = !Boolean(input.value);
+      }, false);
+      input.addEventListener('paste', e => e.preventDefault());
+      input.addEventListener('drop', e => e.preventDefault());
+
+      dialog.setOutsideClickCallback(event => {
+        event.consume();
+        resolve(false);
+      });
+      dialog.show();
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.SelfXssWarningDialogShown);
+    });
+    dialog.hide();
+    return result;
+  }
+}

package/front_end/ui/components/dialogs/dialogs.ts

@@ -4,10 +4,14 @@
 
 import * as ButtonDialog from './ButtonDialog.js';
 import * as Dialog from './Dialog.js';
+import * as FreDialog from './FreDialog.js';
 import * as ShortcutDialog from './ShortcutDialog.js';
+import * as TypeToAllowDialog from './TypeToAllowDialog.js';
 
 export {
   ButtonDialog,
   Dialog,
+  FreDialog,
   ShortcutDialog,
+  TypeToAllowDialog,
 };

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -66,7 +66,7 @@ export class SettingCheckbox extends HTMLElement {
     }
 
     const uiDescriptor = SettingUIRegistration.SettingUIRegistration.maybeResolve(this.#setting.descriptor());
-    const learnMore = uiDescriptor?.learnMore ?? this.#setting.learnMore();
+    const learnMore = uiDescriptor?.learnMore;
     if (learnMore) {
       const jsLogContext = `${this.#setting.name}-documentation`;
       const data: Buttons.Button.ButtonData = {
@@ -136,8 +136,8 @@ export class SettingCheckbox extends HTMLElement {
     }
 
     const uiDescriptor = SettingUIRegistration.SettingUIRegistration.maybeResolve(this.#setting.descriptor());
-    const learnMore = uiDescriptor?.learnMore ?? this.#setting.learnMore();
-    const titleText = uiDescriptor?.title?.() ?? this.#setting.title();
+    const learnMore = uiDescriptor?.learnMore;
+    const titleText = uiDescriptor?.title ?? '';
 
     const icon = this.icon();
     const title = learnMore?.tooltip?.() ?? '';

package/front_end/{panels/common → ui/components/text_editor}/AiCodeCompletionDisclaimer.ts

@@ -2,16 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../ui/components/spinners/spinners.js';
-import '../../ui/components/tooltips/tooltips.js';
+import '../spinners/spinners.js';
+import '../tooltips/tooltips.js';
 
-import type * 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 Root from '../../core/root/root.js';
-import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import type * 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 Root from '../../../core/root/root.js';
+import * as UI from '../../legacy/legacy.js';
+import {Directives, html, nothing, render} from '../../lit/lit.js';
+import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
 import styles from './aiCodeCompletionDisclaimer.css.js';
 
@@ -293,8 +293,8 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
 
   override wasShown(): void {
     super.wasShown();
-    Host.AidaClient.HostConfigTracker.instance().addEventListener(
-        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED,
+                                                                  this.#boundOnAidaAvailabilityChange);
     const initialAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
     if (initialAvailability !== undefined) {
       this.#updateAidaAvailability(initialAvailability);
@@ -303,7 +303,7 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
 
   override willHide(): void {
     super.willHide();
-    Host.AidaClient.HostConfigTracker.instance().removeEventListener(
-        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+    Host.AidaClient.HostConfigTracker.instance().removeEventListener(Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED,
+                                                                     this.#boundOnAidaAvailabilityChange);
   }
 }

package/front_end/ui/components/text_editor/AiCodeCompletionProvider.ts

@@ -8,12 +8,13 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import * as AiCodeCompletion from '../../../models/ai_code_completion/ai_code_completion.js';
 import * as AiCodeGeneration from '../../../models/ai_code_generation/ai_code_generation.js';
-import * as PanelCommon from '../../../panels/common/common.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as UI from '../../legacy/legacy.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
 import {AccessiblePlaceholder} from './AccessiblePlaceholder.js';
+import type {DisclaimerTextVariant} from './AiCodeCompletionDisclaimer.js';
+import {AiCodeCompletionTeaser} from './AiCodeCompletionTeaser.js';
 import {type AiCodeGenerationConfig, AiCodeGenerationProvider} from './AiCodeGenerationProvider.js';
 import {
   acceptAiAutoCompleteSuggestion,
@@ -57,7 +58,7 @@ export interface AiCodeCompletionConfig {
   onRequestTriggered: () => void;
   onResponseReceived: () => void;
   disclaimerTooltipId: string;
-  disclaimerTextVariant: PanelCommon.DisclaimerTextVariant;
+  disclaimerTextVariant: DisclaimerTextVariant;
 }
 
 export const DELAY_BEFORE_SHOWING_RESPONSE_MS = 500;
@@ -71,7 +72,7 @@ export class AiCodeCompletionProvider {
   #aiCodeCompletionTeaserDismissedSetting =
       Common.Settings.Settings.instance().createSetting('ai-code-completion-teaser-dismissed', false);
   #teaserCompartment = new CodeMirror.Compartment();
-  #teaser?: PanelCommon.AiCodeCompletionTeaser;
+  #teaser?: AiCodeCompletionTeaser;
   #suggestionRenderingTimeout?: number;
   #editor?: TextEditor;
   #aiCodeCompletionCitations: Host.AidaClient.Citation[] = [];
@@ -143,7 +144,7 @@ export class AiCodeCompletionProvider {
   editorInitialized(editor: TextEditor): void {
     this.#editor = editor;
     if (!this.#aiCodeCompletionSetting.get() && !this.#aiCodeCompletionTeaserDismissedSetting.get()) {
-      this.#teaser = new PanelCommon.AiCodeCompletionTeaser({
+      this.#teaser = new AiCodeCompletionTeaser({
         onDetach: () => this.#detachTeaser.bind(this),
         disclaimerTextVariant: this.#aiCodeCompletionConfig?.disclaimerTextVariant,
       });
@@ -486,9 +487,9 @@ export class AiCodeCompletionProvider {
   }
 }
 
-function aiCodeCompletionTeaserExtension(teaser: PanelCommon.AiCodeCompletionTeaser): CodeMirror.Extension {
+function aiCodeCompletionTeaserExtension(teaser: AiCodeCompletionTeaser): CodeMirror.Extension {
   return CodeMirror.ViewPlugin.fromClass(class {
-    teaser: PanelCommon.AiCodeCompletionTeaser;
+    teaser: AiCodeCompletionTeaser;
     #teaserDecoration: CodeMirror.DecorationSet = CodeMirror.Decoration.none;
     #teaserMode: AiCodeCompletionTeaserMode;
     #teaserDisplayTimeout?: number;

package/front_end/{panels/common → ui/components/text_editor}/AiCodeCompletionTeaser.ts

@@ -2,22 +2,22 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../ui/kit/kit.js';
+import '../../kit/kit.js';
 
-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 Root from '../../core/root/root.js';
-import * as AIAssistance from '../../models/ai_assistance/ai_assistance.js';
-import * as AiCodeGeneration from '../../models/ai_code_generation/ai_code_generation.js';
-import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
-import * as UI from '../../ui/legacy/legacy.js';
-import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+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 Root from '../../../core/root/root.js';
+import * as AIAssistance from '../../../models/ai_assistance/ai_assistance.js';
+import * as AiCodeGeneration from '../../../models/ai_code_generation/ai_code_generation.js';
+import * as UI from '../../legacy/legacy.js';
+import {html, type LitTemplate, nothing, render} from '../../lit/lit.js';
+import * as VisualLogging from '../../visual_logging/visual_logging.js';
+import * as Dialogs from '../dialogs/dialogs.js';
+import * as Snackbars from '../snackbars/snackbars.js';
 
 import type {DisclaimerTextVariant} from './AiCodeCompletionDisclaimer.js';
 import styles from './aiCodeCompletionTeaser.css.js';
-import {FreDialog} from './FreDialog.js';
 
 const UIStringsNotTranslate = {
   /**
@@ -243,35 +243,33 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
 
     const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
     if (AiCodeGeneration.AiCodeGeneration.AiCodeGeneration.isAiCodeGenerationEnabled(devtoolsLocale.locale)) {
-      reminderItems.push(
-          {
-            iconName: 'code',
-            content: lockedString(UIStringsNotTranslate.freDisclaimerTextAsYouType),
-          },
-          {
-            iconName: 'text-analysis',
-            content: Host.Platform.isMac() ?
-                lockedString(UIStringsNotTranslate.freDisclaimerDescribeCodeInCommentForMacOs) :
-                lockedString(UIStringsNotTranslate.freDisclaimerDescribeCodeInComment),
-          });
+      reminderItems.push({
+        iconName: 'code',
+        content: lockedString(UIStringsNotTranslate.freDisclaimerTextAsYouType),
+      },
+                         {
+                           iconName: 'text-analysis',
+                           content: Host.Platform.isMac() ?
+                               lockedString(UIStringsNotTranslate.freDisclaimerDescribeCodeInCommentForMacOs) :
+                               lockedString(UIStringsNotTranslate.freDisclaimerDescribeCodeInComment),
+                         });
     }
 
-    reminderItems.push(
-        {
-          iconName: 'google',
-          content: this.#noLogging ? lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacyNoLogging) :
-                                     lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacy),
-        },
-        {
-          iconName: 'warning',
-          // clang-format off
+    reminderItems.push({
+      iconName: 'google',
+      content: this.#noLogging ? lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacyNoLogging) :
+                                 lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacy),
+    },
+                       {
+                         iconName: 'warning',
+                         // clang-format off
           content: html`<devtools-link
             href=${CODE_SNIPPET_WARNING_URL}
             class="link devtools-link"
             jslogcontext="code-snippets-explainer.ai-code-completion-teaser"
           >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</devtools-link>`,
-          // clang-format on
-        });
+                         // clang-format on
+                       });
     return reminderItems;
   }
 
@@ -279,7 +277,7 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
     event.preventDefault();
 
     const iconName = AIAssistance.AiUtils.getIconName();
-    const result = await FreDialog.show({
+    const result = await Dialogs.FreDialog.FreDialog.show({
       header: {iconName, text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
       reminderItems: this.#createReminderItems(),
       onLearnMoreClick: () => {
@@ -311,19 +309,18 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
 
   override performUpdate(): void {
     const output = {};
-    this.#view(
-        {
-          aidaAvailability: this.#aidaAvailability,
-          onAction: this.onAction,
-          onDismiss: this.onDismiss,
-        },
-        output, this.contentElement);
+    this.#view({
+      aidaAvailability: this.#aidaAvailability,
+      onAction: this.onAction,
+      onDismiss: this.onDismiss,
+    },
+               output, this.contentElement);
   }
 
   override wasShown(): void {
     super.wasShown();
-    Host.AidaClient.HostConfigTracker.instance().addEventListener(
-        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED,
+                                                                  this.#boundOnAidaAvailabilityChange);
     this.#aiCodeCompletionFreCompletedSetting.addChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
     this.#aiCodeCompletionTeaserDismissedSetting.addChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
     const initialAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
@@ -334,8 +331,8 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
 
   override willHide(): void {
     super.willHide();
-    Host.AidaClient.HostConfigTracker.instance().removeEventListener(
-        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+    Host.AidaClient.HostConfigTracker.instance().removeEventListener(Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED,
+                                                                     this.#boundOnAidaAvailabilityChange);
     this.#aiCodeCompletionFreCompletedSetting.removeChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
     this.#aiCodeCompletionTeaserDismissedSetting.removeChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
   }