chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/common/AiCodeCompletionTeaser.test.ts

@@ -0,0 +1,98 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// 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 {assertNotNullOrUndefined} from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
+import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import {describeWithEnvironment, updateHostConfig} from '../../testing/EnvironmentHelpers.js';
+import {createViewFunctionStub} from '../../testing/ViewFunctionHelpers.js';
+import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import * as AiCodeCompletionTeaser from './AiCodeCompletionTeaser.js';
+import * as FreDialog from './FreDialog.js';
+
+describeWithEnvironment('AiCodeCompletionTeaser', () => {
+  let showFreDialogStub: sinon.SinonStub<Parameters<typeof FreDialog.FreDialog.show>, Promise<boolean>>;
+
+  beforeEach(() => {
+    showFreDialogStub = sinon.stub(FreDialog.FreDialog, 'show');
+    sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions')
+        .resolves(Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
+  });
+
+  async function createTeaser() {
+    const view = createViewFunctionStub(AiCodeCompletionTeaser.AiCodeCompletionTeaser);
+    const widget = new AiCodeCompletionTeaser.AiCodeCompletionTeaser({onDetach: sinon.stub()}, view);
+    widget.markAsRoot();
+    renderElementIntoDOM(widget);
+    await view.nextInput;
+    return {view, widget};
+  }
+
+  afterEach(() => {
+    Common.Settings.Settings.instance().settingForTest('ai-code-completion-teaser-dismissed').set(false);
+    Common.Settings.Settings.instance().settingForTest('ai-code-completion-enabled').set(false);
+    sinon.restore();
+  });
+
+  it('should dismiss and open snackbar on dismiss click', async () => {
+    const {view, widget} = await createTeaser();
+    const showSnackbar = sinon.stub(Snackbars.Snackbar.Snackbar, 'show');
+
+    assert.isTrue(widget.isShowing());
+    assertNotNullOrUndefined(view.input.onDismiss);
+    view.input.onDismiss(new Event('click'));
+    await widget.updateComplete;
+
+    sinon.assert.calledOnce(showSnackbar);
+    assert.isTrue(Common.Settings.Settings.instance().settingForTest('ai-code-completion-teaser-dismissed').get());
+    assert.isFalse(widget.isShowing());
+  });
+
+  it('should open settings on snackbar action click', async () => {
+    const {view, widget} = await createTeaser();
+    const showSnackbar = sinon.stub(Snackbars.Snackbar.Snackbar, 'show');
+    const showViewStub = sinon.stub(UI.ViewManager.ViewManager.instance(), 'showView');
+    assertNotNullOrUndefined(view.input.onDismiss);
+    view.input.onDismiss(new Event('click'));
+
+    sinon.assert.calledOnce(showSnackbar);
+    const snackbarOptions = showSnackbar.firstCall.args[0];
+    assertNotNullOrUndefined(snackbarOptions.actionProperties);
+    snackbarOptions.actionProperties.onClick();
+
+    assert.isTrue(showViewStub.calledOnceWith('chrome-ai'));
+    widget.detach();
+  });
+
+  it('should FRE text include no logging case when the enterprise policy value is ALLOW_WITHOUT_LOGGING', async () => {
+    updateHostConfig(
+        {aidaAvailability: {enterprisePolicyValue: Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING}});
+
+    const {view, widget} = await createTeaser();
+    view.input.onAction(new Event(''));
+
+    sinon.assert.called(showFreDialogStub);
+    assert.exists(showFreDialogStub.lastCall.args[0].reminderItems.find(
+        reminderItem =>
+            reminderItem.content.toString().includes('This data will not be used to improve Google’s AI models.')));
+    widget.detach();
+  });
+
+  it('should FRE text not include no logging case when the enterprise policy value is ALLOW', async () => {
+    updateHostConfig({aidaAvailability: {enterprisePolicyValue: Root.Runtime.GenAiEnterprisePolicyValue.ALLOW}});
+
+    const {view, widget} = await createTeaser();
+    view.input.onAction(new Event(''));
+
+    sinon.assert.called(showFreDialogStub);
+    assert.notExists(showFreDialogStub.lastCall.args[0].reminderItems.find(
+        reminderItem =>
+            reminderItem.content.toString().includes('This data will not be used to improve Google’s AI models.')));
+    widget.detach();
+  });
+});

package/front_end/panels/common/AiCodeCompletionTeaser.ts

@@ -0,0 +1,258 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// 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 Snackbars from '../../ui/components/snackbars/snackbars.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import {html, nothing, render} from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+
+import styles from './aiCodeCompletionTeaser.css.js';
+import {FreDialog} from './FreDialog.js';
+
+const UIStringsNotTranslate = {
+  /**
+   * @description Text for `ctrl` key.
+   */
+  ctrl: 'ctrl',
+  /**
+   * @description Text for `cmd` key.
+   */
+  cmd: 'cmd',
+  /**
+   * @description Text for `i` key.
+   */
+  i: 'i',
+  /**
+   * @description Text for `x` key.
+   */
+  x: 'x',
+  /**
+   * @description Text for dismissing teaser.
+   */
+  dontShowAgain: 'Don\'t show again',
+  /**
+   * @description Text for teaser to turn on code suggestions.
+   */
+  toTurnOnCodeSuggestions: 'to turn on code suggestions.',
+  /**
+   * @description Text for snackbar notification on dismissing the teaser.
+   */
+  turnOnCodeSuggestionsAtAnyTimeInSettings: 'Turn on code suggestions at any time in Settings',
+  /**
+   * @description Text for snackbar action button to manage settings.
+   */
+  manage: 'Manage',
+  /**
+   * @description The footer disclaimer that links to more information
+   * about the AI feature.
+   */
+  learnMore: 'Learn more about AI code completion',
+  /**
+   * @description Header text for the AI-powered suggestions disclaimer dialog.
+   */
+  freDisclaimerHeader: 'Code faster with AI-powered suggestions',
+  /**
+   * @description First disclaimer item text for the fre dialog.
+   */
+  freDisclaimerTextAiWontAlwaysGetItRight: 'This feature uses AI and won’t always get it right',
+  /**
+   * @description Second disclaimer item text for the fre dialog.
+   */
+  freDisclaimerTextPrivacy:
+      'To generate code suggestions, your console input, the history of your current console session, the currently inspected CSS, and the contents of the currently open file are shared with Google. This data may be seen by human reviewers to improve this feature.',
+  /**
+   * @description Second disclaimer item text for the fre dialog when enterprise logging is off.
+   */
+  freDisclaimerTextPrivacyNoLogging:
+      'To generate code suggestions, your console input, the history of your current console session, the currently inspected CSS, and the contents of the currently open file are shared with Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
+  /**
+   * @description Third disclaimer item text for the fre dialog.
+   */
+  freDisclaimerTextUseWithCaution: 'Use generated code snippets with caution',
+  /**
+   *@description Text for ARIA label for the teaser.
+   */
+  press: 'Press',
+  /**
+   *@description Text for ARIA label for the teaser.
+   */
+  toDisableCodeSuggestions: 'to disable code suggestions.',
+} as const;
+
+const lockedString = i18n.i18n.lockedString;
+const CODE_SNIPPET_WARNING_URL = 'https://support.google.com/legal/answer/13505487';
+
+export interface ViewInput {
+  aidaAvailability: Host.AidaClient.AidaAccessPreconditions;
+  onAction: (event: Event) => void;
+  onDismiss: (event: Event) => void;
+}
+
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  if (input.aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
+    render(nothing, target);
+    return;
+  }
+  const cmdOrCtrl =
+      Host.Platform.isMac() ? lockedString(UIStringsNotTranslate.cmd) : lockedString(UIStringsNotTranslate.ctrl);
+  const teaserAriaLabel = lockedString(UIStringsNotTranslate.press) + ' ' + cmdOrCtrl + ' ' +
+      lockedString(UIStringsNotTranslate.i) + ' ' + lockedString(UIStringsNotTranslate.toTurnOnCodeSuggestions) + ' ' +
+      lockedString(UIStringsNotTranslate.press) + ' ' + cmdOrCtrl + ' ' + lockedString(UIStringsNotTranslate.x) + ' ' +
+      lockedString(UIStringsNotTranslate.toDisableCodeSuggestions);
+  // clang-format off
+  render(
+        html`
+          <style>${styles}</style>
+          <div class="ai-code-completion-teaser-screen-reader-only">${teaserAriaLabel}</div>
+          <div class="ai-code-completion-teaser" aria-hidden="true">
+            <span class="ai-code-completion-teaser-action">
+              <span>${cmdOrCtrl}</span>
+              <span>${lockedString(UIStringsNotTranslate.i)}</span>
+            </span>
+            </span>&nbsp;${lockedString(UIStringsNotTranslate.toTurnOnCodeSuggestions)}&nbsp;
+            <span role="button" class="ai-code-completion-teaser-dismiss" @click=${input.onDismiss}
+              jslog=${VisualLogging.action('ai-code-completion-teaser.dismiss').track({click: true})}>
+                ${lockedString(UIStringsNotTranslate.dontShowAgain)}
+            </span>
+          </div>
+        `, target
+      );
+  // clang-format on
+};
+
+interface AiCodeCompletionTeaserConfig {
+  onDetach: () => void;
+}
+
+export class AiCodeCompletionTeaser extends UI.Widget.Widget {
+  readonly #view: View;
+
+  #aidaAvailability = Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL;
+  #boundOnAidaAvailabilityChange: () => Promise<void>;
+  #onDetach: () => void;
+
+  // Whether the user completed first run experience dialog or not.
+  #aiCodeCompletionFreCompletedSetting =
+      Common.Settings.Settings.instance().createSetting('ai-code-completion-enabled', false);
+  // Whether the user dismissed the teaser or not.
+  #aiCodeCompletionTeaserDismissedSetting =
+      Common.Settings.Settings.instance().createSetting('ai-code-completion-teaser-dismissed', false);
+
+  #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
+
+  constructor(config: AiCodeCompletionTeaserConfig, view?: View) {
+    super();
+    this.markAsExternallyManaged();
+    this.#onDetach = config.onDetach;
+    this.#view = view ?? DEFAULT_VIEW;
+    this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
+    this.#noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
+        Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
+    this.requestUpdate();
+  }
+
+  #showReminderSnackbar(): void {
+    Snackbars.Snackbar.Snackbar.show({
+      message: lockedString(UIStringsNotTranslate.turnOnCodeSuggestionsAtAnyTimeInSettings),
+      actionProperties: {
+        label: lockedString(UIStringsNotTranslate.manage),
+        onClick: () => {
+          void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+        },
+      },
+      closable: true,
+    });
+  }
+
+  async #onAidaAvailabilityChange(): Promise<void> {
+    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    if (currentAidaAvailability !== this.#aidaAvailability) {
+      this.#aidaAvailability = currentAidaAvailability;
+      this.requestUpdate();
+    }
+  }
+
+  onAction = async(event: Event): Promise<void> => {
+    event.preventDefault();
+    const result = await FreDialog.show({
+      header: {iconName: 'smart-assistant', text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
+      reminderItems: [
+        {
+          iconName: 'psychiatry',
+          content: lockedString(UIStringsNotTranslate.freDisclaimerTextAiWontAlwaysGetItRight),
+        },
+        {
+          iconName: 'google',
+          content: this.#noLogging ? lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacyNoLogging) :
+                                     lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacy),
+        },
+        {
+          iconName: 'warning',
+          // clang-format off
+          content: html`<x-link
+            href=${CODE_SNIPPET_WARNING_URL}
+            class="link devtools-link"
+            jslog=${VisualLogging.link('code-snippets-explainer.ai-code-completion-teaser').track({
+              click: true
+            })}
+          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</x-link>`,
+          // clang-format on
+        }
+      ],
+      onLearnMoreClick: () => {
+        void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+      },
+      ariaLabel: lockedString(UIStringsNotTranslate.freDisclaimerHeader),
+      learnMoreButtonAriaLabel: lockedString(UIStringsNotTranslate.learnMore),
+    });
+
+    if (result) {
+      this.#aiCodeCompletionFreCompletedSetting.set(true);
+      this.detach();
+    } else {
+      this.requestUpdate();
+    }
+  };
+
+  onDismiss = (event: Event): void => {
+    event.preventDefault();
+    this.#aiCodeCompletionTeaserDismissedSetting.set(true);
+    this.#showReminderSnackbar();
+    this.detach();
+  };
+
+  override performUpdate(): void {
+    const output = {};
+    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);
+    void this.#onAidaAvailabilityChange();
+  }
+
+  override willHide(): void {
+    super.willHide();
+    Host.AidaClient.HostConfigTracker.instance().removeEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+  }
+
+  override onDetach(): void {
+    this.#onDetach();
+  }
+}

package/front_end/panels/common/FreDialog.ts

@@ -0,0 +1,139 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+/* eslint-disable rulesdir/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 styles from './freDialog.css.js';
+
+const {html, Directives: {ifDefined}} = Lit;
+
+const UIStrings = {
+  /**
+   * @description Header text for the feature reminder dialog.
+   */
+  thingsToConsider: 'Things to consider',
+  /**
+   * @description Text for the learn more button in the feature reminder dialog.
+   */
+  learnMore: 'Learn more',
+  /**
+   * @description Text for the cancel button in the feature reminder dialog.
+   */
+  cancel: 'Cancel',
+  /**
+   * @description Text for the got it button in the feature reminder dialog.
+   */
+  gotIt: 'Got it',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('panels/common/FreDialog.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class FreDialog {
+  static show({header, reminderItems, onLearnMoreClick, ariaLabel, learnMoreButtonTitle, learnMoreButtonAriaLabel}: {
+    header: {
+      iconName: string,
+      text: Platform.UIString.LocalizedString,
+    },
+    reminderItems: Array<{
+      iconName: string,
+      content: Platform.UIString.LocalizedString|Lit.LitTemplate,
+    }>,
+    onLearnMoreClick: () => void,
+    ariaLabel?: string,
+    learnMoreButtonTitle?: string,
+    learnMoreButtonAriaLabel?: string,
+  }): Promise<boolean> {
+    const dialog = new UI.Dialog.Dialog();
+    if (ariaLabel) {
+      dialog.setAriaLabel(ariaLabel);
+    }
+    const result = Promise.withResolvers<boolean>();
+    // clang-format off
+    Lit.render(html`
+      <div class="fre-disclaimer">
+        <style>
+          ${styles}
+        </style>
+        <header>
+          <div class="header-icon-container">
+            <devtools-icon name=${header.iconName}></devtools-icon>
+          </div>
+          <h2 tabindex="-1">
+            ${header.text}
+          </h2>
+        </header>
+        <main class="reminder-container">
+          <h3>${i18nString(UIStrings.thingsToConsider)}</h3>
+          ${reminderItems.map(reminderItem => html`
+            <div class="reminder-item">
+              <devtools-icon class="reminder-icon" name=${reminderItem.iconName}></devtools-icon>
+              <span>${reminderItem.content}</span>
+            </div>
+          `)}
+        </main>
+        <footer>
+          <devtools-button
+            @click=${onLearnMoreClick}
+            .jslogContext=${'fre-disclaimer.learn-more'}
+            .variant=${Buttons.Button.Variant.OUTLINED}
+            aria-label=${ifDefined(learnMoreButtonAriaLabel)}>
+            ${learnMoreButtonTitle ?? i18nString(UIStrings.learnMore)}
+          </devtools-button>
+          <div class="right-buttons">
+            <devtools-button
+              @click=${() => {
+                // The order of operations are important here as hiding the dialog by
+                // itself causes the promise to be resolved with `false` in `onHideCallback`.
+                result.resolve(false);
+                dialog.hide();
+              }}
+              .jslogContext=${'fre-disclaimer.cancel'}
+              .variant=${Buttons.Button.Variant.TONAL}>
+              ${i18nString(UIStrings.cancel)}
+            </devtools-button>
+            <devtools-button
+              @click=${() => {
+                // The order of operations are important here as hiding the dialog by
+                // itself causes the promise to be resolved with `false` in `onHideCallback`.
+                result.resolve(true);
+                dialog.hide();
+              }}
+              .jslogContext=${'fre-disclaimer.continue'}
+              .variant=${Buttons.Button.Variant.PRIMARY}>
+              ${i18nString(UIStrings.gotIt)}
+            </devtools-button>
+          </div>
+        </footer>
+      </div>`, dialog.contentElement);
+    // clang-format on
+
+    dialog.setOutsideClickCallback(ev => {
+      ev.consume(true);  // true = preventDefault()
+      dialog.hide();
+      result.resolve(false);
+    });
+
+    // This ensures that if the dialog gets hidden for any unexpected reason,
+    // or if the user goes to another panel and comes back, that we resolve
+    // rather than leave the promise dangling.
+    dialog.setOnHideCallback(() => {
+      result.resolve(false);
+    });
+
+    dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
+    dialog.setDimmed(true);
+    dialog.show();
+
+    return result.promise;
+  }
+
+  private constructor() {
+  }
+}

package/front_end/panels/common/aiCodeCompletionDisclaimer.css

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2025 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+    /* stylelint-disable-next-line no-invalid-position-declaration */
+    display: flex;
+
+    .ai-code-completion-disclaimer {
+        gap: 5px;
+        display: flex;
+        flex-shrink: 0;
+
+        span.link {
+            color: var(--sys-color-on-surface-subtle);
+
+            &:focus-visible {
+                outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+                outline-offset: 0;
+                border-radius: var(--sys-shape-corner-extra-small);
+            }
+        }
+
+        devtools-spinner {
+            margin-top: var(--sys-size-2);
+            padding: var(--sys-size-1);
+            height: var(--sys-size-6);
+            width: var(--sys-size-6);
+        }
+
+        devtools-tooltip:popover-open {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .disclaimer-tooltip-container {
+                padding: var(--sys-size-4) 0;
+                max-width: var(--sys-size-30);
+                white-space: normal;
+
+                .tooltip-text {
+                    color: var(--sys-color-on-surface-subtle);
+                    padding: 0 var(--sys-size-5);
+                    align-items: flex-start;
+                    gap: 10px;
+                }
+
+                .link {
+                    margin: var(--sys-size-5) var(--sys-size-8) 0 var(--sys-size-5);
+                    display: inline-block;
+                }
+            }
+        }
+    }
+}

package/front_end/panels/common/aiCodeCompletionSummaryToolbar.css

@@ -0,0 +1,101 @@
+/*
+ * Copyright 2025 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+  .ai-code-completion-summary-toolbar {
+    display: flex;
+    height: 26px;
+    background-color: var(--sys-color-cdt-base-container);
+    padding: var(--sys-size-2) var(--sys-size-5);
+    align-items: center;
+    gap: var(--sys-size-5);
+    flex-shrink: 0;
+    color: var(--sys-color-on-surface-subtle);
+
+    &:not(.has-top-border) {
+      border-top: var(--sys-size-1) solid var(--sys-color-divider);
+    }
+
+    devtools-widget.disclaimer-widget {
+      flex: none;
+    }
+
+    span.link {
+      color: var(--sys-color-on-surface-subtle);
+      /* Inside the code mirror editor, the cursor and text-decoration styling need to be provided explicitly */
+      cursor: pointer;
+      text-decoration: underline;
+
+      &:focus-visible {
+        outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+        outline-offset: 0;
+        border-radius: var(--sys-shape-corner-extra-small);
+      }
+    }
+
+    .ai-code-completion-recitation-notice {
+      white-space: nowrap;
+
+      span.link {
+        padding-left: var(--sys-size-3);
+      }
+    }
+
+    &.has-disclaimer .ai-code-completion-recitation-notice {
+      padding-left: var(--sys-size-5);
+      border-left: var(--sys-size-1) solid var(--sys-color-divider);
+    }
+
+    @media (width < 545px) {
+      &.has-disclaimer.has-recitation-notice {
+        height: 46px;
+        flex-direction: column;
+        align-items: flex-start;
+
+        .ai-code-completion-disclaimer {
+          height: 26px;
+          margin-bottom: -3px;
+          margin-top: var(--sys-size-2);
+          flex-shrink: 1;
+        }
+
+        .ai-code-completion-recitation-notice {
+          height: 26px;
+          padding-left: 0;
+          border-left: 0;
+          margin-top: -3px;
+        }
+      }
+    }
+
+    devtools-tooltip:popover-open {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .citations-tooltip-container {
+            display: inline-flex;
+            padding: var(--sys-size-4) var(--sys-size-5);
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: center;
+            gap: var(--sys-size-2);
+            white-space: normal;
+
+            x-link {
+                color: var(--sys-color-primary);
+                text-decoration: underline;
+
+              &:focus-visible {
+                outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+                outline-offset: 0;
+                border-radius: var(--sys-shape-corner-extra-small);
+              }
+          }
+      }
+    }
+  }
+}

package/front_end/panels/common/aiCodeCompletionTeaser.css

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2025 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+    .ai-code-completion-teaser-screen-reader-only {
+        position: absolute;
+        overflow: hidden;
+        clip-path: rect(0 0 0 0);
+        height: var(--sys-size-1);
+        width: var(--sys-size-1);
+        margin: -1 * var(--sys-size-1);;
+        padding: 0;
+        border: 0;
+    }
+
+    .ai-code-completion-teaser {
+        padding-left: var(--sys-size-3);
+        line-height: normal;
+        pointer-events: all;
+        align-items: center;
+        font-style: italic;
+
+        .ai-code-completion-teaser-dismiss {
+            text-decoration: underline;
+            cursor: pointer;
+        }
+
+        .ai-code-completion-teaser-action {
+            display: inline-flex;
+            gap: var(--sys-size-2);
+
+            span {
+                border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+                border-radius: var(--sys-shape-corner-extra-small);
+                padding: 0 var(--sys-size-3);
+            }
+        }
+    }
+}