chrome-devtools-frontend 1.0.1536371 → 1.0.1537860

package/front_end/third_party/puppeteer/package/src/revisions.ts

@@ -8,7 +8,7 @@
  * @internal
  */
 export const PUPPETEER_REVISIONS = Object.freeze({
-  chrome: '141.0.7390.122',
-  'chrome-headless-shell': '141.0.7390.122',
-  firefox: 'stable_144.0',
+  chrome: '142.0.7444.59',
+  'chrome-headless-shell': '142.0.7444.59',
+  firefox: 'stable_144.0.2',
 });

package/front_end/third_party/puppeteer/package/src/util/disposable.ts

@@ -45,7 +45,7 @@ export const asyncDisposeSymbol: typeof Symbol.asyncDispose =
 /**
  * @internal
  */
-class DisposableStackPolyfill {
+export class DisposableStackPolyfill {
   #disposed = false;
   #stack: Disposable[] = [];
 
@@ -194,7 +194,7 @@ export const DisposableStack: typeof DisposableStackPolyfill =
 /**
  * @internal
  */
-class AsyncDisposableStackPolyfill {
+export class AsyncDisposableStackPolyfill {
   #disposed = false;
   #stack: AsyncDisposable[] = [];
 

package/front_end/third_party/puppeteer/package/src/util/util.ts

@@ -10,3 +10,4 @@ export * from './Mutex.js';
 export * from './ErrorLike.js';
 export * from './AsyncIterableUtil.js';
 export * from './disposable.js';
+export * from './incremental-id-generator.js';

package/front_end/third_party/puppeteer/package/src/util/version.ts

@@ -6,5 +6,5 @@
 
 // If moved update release-please config
 // x-release-please-start-version
-export const packageVersion = '24.26.1';
+export const packageVersion = '24.27.0';
 // x-release-please-end

package/front_end/ui/components/adorners/Adorner.ts

@@ -5,6 +5,7 @@
 
 import type * as Platform from '../../../core/platform/platform.js';
 import {html, render} from '../../../ui/lit/lit.js';
+import * as UI from '../../legacy/legacy.js';
 import * as VisualElements from '../../visual_logging/visual_logging.js';
 
 import adornerStyles from './adorner.css.js';
@@ -37,7 +38,7 @@ export class Adorner extends HTMLElement {
   }
 
   override cloneNode(deep?: boolean): Node {
-    const node = super.cloneNode(deep) as Adorner;
+    const node = UI.UIUtils.cloneCustomElement(this, deep);
     node.data = {name: this.name, content: this.#content, jslogContext: this.#jslogContext};
     return node;
   }

package/front_end/ui/components/buttons/Button.docs.ts

@@ -0,0 +1,195 @@
+// Copyright 2021 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {Button, FloatingButton} from './buttons.js';
+
+export async function render(container: HTMLElement) {
+  const style = document.createElement('style');
+  style.textContent = `
+      #container > div {
+        width: 80%;
+        padding: var(--sys-size-11);
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--sys-size-5);
+      }
+    `;
+  container.appendChild(style);
+
+  const appendSection = (headerText: string, sectionElement: HTMLElement) => {
+    const header = document.createElement('header');
+    header.textContent = headerText;
+    container.appendChild(header);
+    container.appendChild(sectionElement);
+  };
+
+  const buttonsSection = document.createElement('div');
+  const primarySection = document.createElement('div');
+  const tonalSection = document.createElement('div');
+  const outlineSection = document.createElement('div');
+  const textSection = document.createElement('div');
+  const iconSection = document.createElement('div');
+  const floatingSection = document.createElement('div');
+
+  appendSection('Buttons', buttonsSection);
+  appendSection('Primary buttons', primarySection);
+  appendSection('Tonal buttons', tonalSection);
+  appendSection('Outlined buttons', outlineSection);
+  appendSection('Text buttons', textSection);
+  appendSection('Icon buttons', iconSection);
+  appendSection('Floating buttons', floatingSection);
+
+  const DEFAULT_TEXT = 'Default';
+  const WITH_ICON_TEXT = 'With icon';
+  const MICRO_TEXT = 'Micro';
+  // Buttons
+  {
+    const primaryButton = new Button.Button();
+    primaryButton.data = {
+      variant: Button.Variant.PRIMARY,
+    };
+    primaryButton.innerText = 'Primary button';
+    buttonsSection.appendChild(primaryButton);
+
+    const tonalButton = new Button.Button();
+    tonalButton.data = {
+      variant: Button.Variant.TONAL,
+    };
+    tonalButton.innerText = 'Tonal button';
+    buttonsSection.appendChild(tonalButton);
+
+    const outlinedButton = new Button.Button();
+    outlinedButton.data = {
+      variant: Button.Variant.OUTLINED,
+    };
+    outlinedButton.innerText = 'Outlined button';
+    buttonsSection.appendChild(outlinedButton);
+
+    const textButton = new Button.Button();
+    textButton.data = {
+      variant: Button.Variant.TEXT,
+    };
+    textButton.innerText = 'Text button';
+    buttonsSection.appendChild(textButton);
+
+    const iconButton = new Button.Button();
+    iconButton.data = {
+      variant: Button.Variant.ICON,
+      iconName: 'gear',
+    };
+    buttonsSection.appendChild(iconButton);
+  }
+
+  // Primary buttons
+  {
+    const primaryDefault = new Button.Button();
+    primaryDefault.data = {
+      variant: Button.Variant.PRIMARY,
+    };
+    primaryDefault.innerText = DEFAULT_TEXT;
+    primarySection.appendChild(primaryDefault);
+
+    const primaryWithIcon = new Button.Button();
+    primaryWithIcon.innerText = WITH_ICON_TEXT;
+    primaryWithIcon.data = {
+      variant: Button.Variant.PRIMARY,
+      iconName: 'plus',
+    };
+    primarySection.appendChild(primaryWithIcon);
+  }
+
+  // Tonal buttons
+  {
+    const tonalDefault = new Button.Button();
+    tonalDefault.data = {
+      variant: Button.Variant.TONAL,
+    };
+    tonalDefault.innerText = DEFAULT_TEXT;
+    tonalSection.appendChild(tonalDefault);
+
+    const tonalWithIcon = new Button.Button();
+    tonalWithIcon.innerText = WITH_ICON_TEXT;
+
+    tonalWithIcon.data = {
+      variant: Button.Variant.PRIMARY,
+      iconName: 'plus',
+    };
+    tonalSection.appendChild(tonalWithIcon);
+  }
+
+  // Outlined buttons
+  {
+    const outlinedDefault = new Button.Button();
+    outlinedDefault.data = {
+      variant: Button.Variant.OUTLINED,
+    };
+    outlinedDefault.innerText = DEFAULT_TEXT;
+    outlineSection.appendChild(outlinedDefault);
+
+    const outlinedWithIcon = new Button.Button();
+    outlinedWithIcon.innerText = WITH_ICON_TEXT;
+    outlinedWithIcon.data = {
+      variant: Button.Variant.OUTLINED,
+      iconName: 'plus',
+    };
+    outlineSection.appendChild(outlinedWithIcon);
+
+    const outlinedMicro = new Button.Button();
+    outlinedMicro.innerText = MICRO_TEXT;
+    outlinedMicro.data = {
+      variant: Button.Variant.OUTLINED,
+      size: Button.Size.MICRO,
+    };
+    outlineSection.appendChild(outlinedMicro);
+  }
+
+  // Text buttons
+  {
+    const textDefault = new Button.Button();
+    textDefault.innerText = DEFAULT_TEXT;
+    textDefault.data = {
+      variant: Button.Variant.TEXT,
+    };
+    textSection.appendChild(textDefault);
+
+    const textWithIcon = new Button.Button();
+    textWithIcon.innerText = WITH_ICON_TEXT;
+
+    textWithIcon.data = {
+      variant: Button.Variant.TEXT,
+      iconName: 'plus',
+    };
+    textSection.appendChild(textWithIcon);
+  }
+
+  // Icon buttons
+  {
+    const iconDefault = new Button.Button();
+    iconDefault.data = {
+      variant: Button.Variant.ICON,
+      iconName: 'gear',
+    };
+    iconSection.appendChild(iconDefault);
+
+    const iconToggle = new Button.Button();
+    iconToggle.data = {
+      variant: Button.Variant.ICON_TOGGLE,
+      iconName: 'gear',
+      toggledIconName: 'gear',
+      toggled: true,
+      toggleType: Button.ToggleType.PRIMARY,
+    };
+    const toggledWithLabel = document.createElement('span');
+    toggledWithLabel.textContent = '(Toggle)';
+    iconSection.appendChild(iconToggle);
+    iconSection.appendChild(toggledWithLabel);
+  }
+
+  // Floating buttons
+  {
+    const floatingButton = FloatingButton.create('smart-assistant', 'Ask AI!');
+    floatingSection.appendChild(floatingButton);
+  }
+}

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

@@ -3,7 +3,9 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
+import '../tooltips/tooltips.js';
 import './SettingDeprecationWarning.js';
+import '../../legacy/legacy.js';
 
 import type * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -66,23 +68,56 @@ export class SettingCheckbox extends HTMLElement {
     }
 
     const learnMore = this.#setting.learnMore();
-    if (learnMore?.url) {
-      const url = learnMore.url;
+    if (learnMore) {
+      const jsLogContext = `${this.#setting.name}-documentation`;
       const data: Buttons.Button.ButtonData = {
-        iconName: 'help',
+        iconName: 'info',
         variant: Buttons.Button.Variant.ICON,
         size: Buttons.Button.Size.SMALL,
-        jslogContext: `${this.#setting.name}-documentation`,
-        title: i18nString(UIStrings.learnMore),
-      };
-      const handleClick = (event: MouseEvent): void => {
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url);
-        event.consume();
+        jslogContext: jsLogContext,
       };
-      return html`<devtools-button
-                    class=learn-more
-                    @click=${handleClick}
-                    .data=${data}></devtools-button>`;
+
+      const url = learnMore.url;
+      if (learnMore.tooltip) {
+        const id = `${this.#setting.name}-information`;
+        // clang-format off
+        return html`
+          <devtools-button
+            class="info-icon"
+            aria-details=${id}
+            .data=${data}
+          ></devtools-button>
+          <devtools-tooltip id=${id} variant="rich">
+            <span>${learnMore.tooltip()}</span><br />
+            ${url
+              ? html`<x-link
+                  href=${url}
+                  class="link"
+                  jslog=${VisualLogging.link(jsLogContext).track({
+                    click: true,
+                  })}
+                  >${i18nString(UIStrings.learnMore)}</x-link
+                >`
+              : Lit.nothing}
+          </devtools-tooltip>
+        `;
+        // clang-format on
+      }
+      if (url) {
+        const handleClick = (event: MouseEvent): void => {
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url);
+          event.consume();
+        };
+        data.iconName = 'help';
+        data.title = i18nString(UIStrings.learnMore);
+        // clang-format off
+        return html`<devtools-button
+          class="info-icon"
+          @click=${handleClick}
+          .data=${data}
+        ></devtools-button>`;
+        // clang-format on
+      }
     }
 
     return undefined;
@@ -102,7 +137,7 @@ export class SettingCheckbox extends HTMLElement {
     }
 
     const icon = this.icon();
-    const title = `${this.#setting.learnMore() ? this.#setting.learnMore()?.tooltip() : ''}`;
+    const title = `${this.#setting.learnMore() ? this.#setting.learnMore()?.tooltip?.() : ''}`;
     const disabledReasons = this.#setting.disabledReasons();
     const reason = disabledReasons.length ?
         html`

package/front_end/ui/components/settings/settingCheckbox.css

@@ -35,7 +35,7 @@ p {
   height: var(--sys-size-9);
 }
 
-.learn-more {
+.info-icon {
   cursor: pointer;
   position: relative;
   margin-left: var(--sys-size-2);
@@ -43,3 +43,8 @@ p {
   width: var(--sys-size-9);
   height: var(--sys-size-9);
 }
+
+.link {
+  color: var(--text-link);
+  text-decoration: underline;
+}

package/front_end/ui/components/spinners/Spinners.docs.ts

@@ -0,0 +1,13 @@
+// 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.
+
+import './spinners.js';
+
+import * as Lit from '../../lit/lit.js';
+
+const {html} = Lit;
+
+export async function render(container: HTMLElement) {
+  Lit.render(html`<devtools-spinner></devtools-spinner>`, container);
+}

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

@@ -0,0 +1,280 @@
+// 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.
+
+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 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 {AiCodeCompletionTeaserPlaceholder} from './AiCodeCompletionTeaserPlaceholder.js';
+import {
+  aiAutoCompleteSuggestion,
+  aiAutoCompleteSuggestionState,
+  setAiAutoCompleteSuggestion,
+} from './config.js';
+import type {TextEditor} from './TextEditor.js';
+
+export enum AiCodeCompletionTeaserMode {
+  OFF = 'off',
+  ON = 'on',
+  ONLY_SHOW_ON_EMPTY = 'onlyShowOnEmpty',
+}
+
+export const setAiCodeCompletionTeaserMode = CodeMirror.StateEffect.define<AiCodeCompletionTeaserMode>();
+
+export const aiCodeCompletionTeaserModeState = CodeMirror.StateField.define<AiCodeCompletionTeaserMode>({
+  create: () => AiCodeCompletionTeaserMode.OFF,
+  update(value, tr) {
+    return tr.effects.find(effect => effect.is(setAiCodeCompletionTeaserMode))?.value ?? value;
+  },
+});
+
+export interface AiCodeCompletionConfig {
+  completionContext: {
+    additionalFiles?: Host.AidaClient.AdditionalFile[],
+    inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage,
+    getPrefix?: () => string,
+    stopSequences?: string[],
+  };
+  onFeatureEnabled: () => void;
+  onFeatureDisabled: () => void;
+  onSuggestionAccepted: () => void;
+  onRequestTriggered: () => void;
+  onResponseReceived: (citations: Host.AidaClient.Citation[]) => void;
+}
+
+export const DELAY_BEFORE_SHOWING_RESPONSE_MS = 500;
+export const AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS = 200;
+
+// TODO(samiyac): Add code relevant to AiCodeCompletion and for triggering requests
+export class AiCodeCompletionProvider {
+  #aidaClient?: Host.AidaClient.AidaClient;
+  #aiCodeCompletionSetting = Common.Settings.Settings.instance().createSetting('ai-code-completion-enabled', false);
+  #aiCodeCompletionTeaserDismissedSetting =
+      Common.Settings.Settings.instance().createSetting('ai-code-completion-teaser-dismissed', false);
+  #teaserCompartment = new CodeMirror.Compartment();
+  #teaser?: PanelCommon.AiCodeCompletionTeaser;
+  #suggestionRenderingTimeout?: number;
+  #editor?: TextEditor;
+  #aiCodeCompletionConfig?: AiCodeCompletionConfig;
+
+  #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
+
+  constructor(aiCodeCompletionConfig: AiCodeCompletionConfig) {
+    if (!this.#isAiCodeCompletionEnabled()) {
+      throw new Error('AI code completion feature is not enabled.');
+    }
+    this.#aiCodeCompletionConfig = aiCodeCompletionConfig;
+  }
+
+  extension(): CodeMirror.Extension[] {
+    return [
+      this.#teaserCompartment.of([]),
+      aiAutoCompleteSuggestion,
+      aiCodeCompletionTeaserModeState,
+      aiAutoCompleteSuggestionState,
+    ];
+  }
+
+  dispose(): void {
+    this.#detachTeaser();
+    this.#teaser = undefined;
+    this.#aiCodeCompletionSetting.removeChangeListener(this.#boundOnUpdateAiCodeCompletionState);
+    Host.AidaClient.HostConfigTracker.instance().removeEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnUpdateAiCodeCompletionState);
+    this.#cleanupAiCodeCompletion();
+  }
+
+  editorInitialized(editor: TextEditor): void {
+    this.#editor = editor;
+    if (!this.#aiCodeCompletionSetting.get() && !this.#aiCodeCompletionTeaserDismissedSetting.get()) {
+      this.#teaser = new PanelCommon.AiCodeCompletionTeaser({
+        onDetach: () => this.#detachTeaser.bind(this),
+      });
+      this.#editor.editor.dispatch(
+          {effects: this.#teaserCompartment.reconfigure([aiCodeCompletionTeaserExtension(this.#teaser)])});
+    }
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnUpdateAiCodeCompletionState);
+    this.#aiCodeCompletionSetting.addChangeListener(this.#boundOnUpdateAiCodeCompletionState);
+    void this.#updateAiCodeCompletionState();
+  }
+
+  #setupAiCodeCompletion(): void {
+    if (!this.#editor || !this.#aiCodeCompletionConfig) {
+      return;
+    }
+    if (!this.#aidaClient) {
+      this.#aidaClient = new Host.AidaClient.AidaClient();
+    }
+    this.#aiCodeCompletionConfig.onFeatureEnabled();
+  }
+
+  #cleanupAiCodeCompletion(): void {
+    if (this.#suggestionRenderingTimeout) {
+      clearTimeout(this.#suggestionRenderingTimeout);
+      this.#suggestionRenderingTimeout = undefined;
+    }
+    this.#editor?.dispatch({
+      effects: setAiAutoCompleteSuggestion.of(null),
+    });
+    this.#aiCodeCompletionConfig?.onFeatureDisabled();
+  }
+
+  async #updateAiCodeCompletionState(): Promise<void> {
+    const aidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    const isAvailable = aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE;
+    const isEnabled = this.#aiCodeCompletionSetting.get();
+    if (isAvailable && isEnabled) {
+      this.#detachTeaser();
+      this.#setupAiCodeCompletion();
+    } else if (isAvailable && !isEnabled) {
+      if (this.#teaser && !this.#aiCodeCompletionTeaserDismissedSetting.get()) {
+        this.#editor?.editor.dispatch(
+            {effects: this.#teaserCompartment.reconfigure([aiCodeCompletionTeaserExtension(this.#teaser)])});
+      }
+      this.#cleanupAiCodeCompletion();
+    } else if (!isAvailable) {
+      this.#detachTeaser();
+      this.#cleanupAiCodeCompletion();
+    }
+  }
+
+  #detachTeaser(): void {
+    if (!this.#teaser) {
+      return;
+    }
+    this.#editor?.editor.dispatch({effects: this.#teaserCompartment.reconfigure([])});
+  }
+
+  // TODO(samiyac): Define static method in AiCodeCompletion and use that instead
+  #isAiCodeCompletionEnabled(): boolean {
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
+    if (!devtoolsLocale.locale.startsWith('en-')) {
+      return false;
+    }
+    if (!aidaAvailability || aidaAvailability.blockedByGeo || aidaAvailability.blockedByAge ||
+        aidaAvailability.blockedByEnterprisePolicy) {
+      return false;
+    }
+    return Boolean(aidaAvailability.enabled && Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
+  }
+}
+
+function aiCodeCompletionTeaserExtension(teaser: PanelCommon.AiCodeCompletionTeaser): CodeMirror.Extension {
+  return CodeMirror.ViewPlugin.fromClass(class {
+    teaser: PanelCommon.AiCodeCompletionTeaser;
+    #teaserDecoration: CodeMirror.DecorationSet = CodeMirror.Decoration.none;
+    #teaserMode: AiCodeCompletionTeaserMode;
+    #teaserDisplayTimeout?: number;
+
+    constructor(readonly view: CodeMirror.EditorView) {
+      this.teaser = teaser;
+      this.#teaserMode = view.state.field(aiCodeCompletionTeaserModeState);
+      this.#setupDecoration();
+    }
+
+    destroy(): void {
+      window.clearTimeout(this.#teaserDisplayTimeout);
+    }
+
+    update(update: CodeMirror.ViewUpdate): void {
+      const currentTeaserMode = update.state.field(aiCodeCompletionTeaserModeState);
+      if (currentTeaserMode !== this.#teaserMode) {
+        this.#teaserMode = currentTeaserMode;
+        this.#setupDecoration();
+        return;
+      }
+      if (this.#teaserMode === AiCodeCompletionTeaserMode.ONLY_SHOW_ON_EMPTY && update.docChanged) {
+        this.#updateTeaserDecorationForOnlyShowOnEmptyMode();
+      } else if (this.#teaserMode === AiCodeCompletionTeaserMode.ON) {
+        if (update.docChanged) {
+          this.#teaserDecoration = CodeMirror.Decoration.none;
+          window.clearTimeout(this.#teaserDisplayTimeout);
+          this.#updateTeaserDecorationForOnMode();
+        } else if (update.selectionSet && update.state.doc.length > 0) {
+          this.#teaserDecoration = CodeMirror.Decoration.none;
+        }
+      }
+    }
+
+    get decorations(): CodeMirror.DecorationSet {
+      return this.#teaserDecoration;
+    }
+
+    #setupDecoration(): void {
+      switch (this.#teaserMode) {
+        case AiCodeCompletionTeaserMode.ON:
+          this.#updateTeaserDecorationForOnModeImmediately();
+          return;
+        case AiCodeCompletionTeaserMode.ONLY_SHOW_ON_EMPTY:
+          this.#updateTeaserDecorationForOnlyShowOnEmptyMode();
+          return;
+        case AiCodeCompletionTeaserMode.OFF:
+          this.#teaserDecoration = CodeMirror.Decoration.none;
+          return;
+      }
+    }
+
+    #updateTeaserDecorationForOnlyShowOnEmptyMode(): void {
+      if (this.view.state.doc.length === 0) {
+        this.#addTeaserWidget(0);
+      } else {
+        this.#teaserDecoration = CodeMirror.Decoration.none;
+      }
+    }
+
+    #updateTeaserDecorationForOnMode = Common.Debouncer.debounce(() => {
+      this.#teaserDisplayTimeout = window.setTimeout(() => {
+        this.#updateTeaserDecorationForOnModeImmediately();
+        this.view.dispatch({});
+      }, DELAY_BEFORE_SHOWING_RESPONSE_MS);
+    }, AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS);
+
+    #updateTeaserDecorationForOnModeImmediately(): void {
+      const cursorPosition = this.view.state.selection.main.head;
+      const line = this.view.state.doc.lineAt(cursorPosition);
+      if (cursorPosition >= line.to) {
+        this.#addTeaserWidget(cursorPosition);
+      }
+    }
+
+    #addTeaserWidget(pos: number): void {
+      this.#teaserDecoration = CodeMirror.Decoration.set([
+        CodeMirror.Decoration.widget({widget: new AiCodeCompletionTeaserPlaceholder(this.teaser), side: 1}).range(pos),
+      ]);
+    }
+  }, {
+    decorations: v => v.decorations,
+    eventHandlers: {
+      mousedown(event: MouseEvent): boolean {
+        // Required for mouse click to propagate to the "Don't show again" span in teaser.
+        return (event.target instanceof Node && teaser.contentElement.contains(event.target));
+      },
+      keydown(event: KeyboardEvent): boolean {
+        if (!UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event) || !teaser.isShowing()) {
+          return false;
+        }
+        if (event.key === 'i') {
+          event.consume(true);
+          void VisualLogging.logKeyDown(event.currentTarget, event, 'ai-code-completion-teaser.fre');
+          void this.teaser.onAction(event);
+          return true;
+        }
+        if (event.key === 'x') {
+          event.consume(true);
+          void VisualLogging.logKeyDown(event.currentTarget, event, 'ai-code-completion-teaser.dismiss');
+          this.teaser.onDismiss(event);
+          return true;
+        }
+        return false;
+      }
+    },
+  });
+}

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

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+export * as AiCodeCompletionProvider from './AiCodeCompletionProvider.js';
 export * as AiCodeCompletionTeaserPlaceholder from './AiCodeCompletionTeaserPlaceholder.js';
 export * as AutocompleteHistory from './AutocompleteHistory.js';
 export * as Config from './config.js';