Add AI code completion disclaimer to existing sources toolbar

Bug: 438199108
Change-Id: I08b6e2f1454ba8feb6d4f0d0dd21f42107a7fd4c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6841276
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Samiya Caur <[email protected]>

Author: Samiya Caur

front_end/panels/common/AiCodeCompletionDisclaimer.test.ts

@@ -11,11 +11,10 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as Common from './common.js';
 
 describeWithEnvironment('AiCodeCompletionDisclaimer', () => {
-  async function createDisclaimer(panelName = 'console') {
+  async function createDisclaimer() {
     const view = createViewFunctionStub(Common.AiCodeCompletionDisclaimer);
     const widget = new Common.AiCodeCompletionDisclaimer(undefined, view);
     widget.disclaimerTooltipId = 'disclaimer-tooltip';
-    widget.panelName = panelName;
     widget.markAsRoot();
     renderElementIntoDOM(widget);
     await view.nextInput;

front_end/panels/common/AiCodeCompletionDisclaimer.ts

@@ -46,7 +46,6 @@ const lockedString = i18n.i18n.lockedString;
 
 export interface ViewInput {
   disclaimerTooltipId?: string;
-  panelName?: string;
   noLogging: boolean;
   onManageInSettingsTooltipClick: () => void;
 }
@@ -58,12 +57,13 @@ export interface ViewOutput {
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
-export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, output, target) => {
-  if (!input.disclaimerTooltipId || !input.panelName) {
-    render(nothing, target);
-    return;
-  }
-  // clang-format off
+export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View =
+    (input, output, target) => {
+      if (!input.disclaimerTooltipId) {
+        render(nothing, target);
+        return;
+      }
+      // clang-format off
   render(
     html`
         <style>${styles}</style>
@@ -92,7 +92,7 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, output, target) => {
           <devtools-tooltip
               id=${input.disclaimerTooltipId}
               variant=${'rich'}
-              jslogContext=${input.panelName + '.ai-code-completion-disclaimer'}
+              jslogContext=${'ai-code-completion-disclaimer'}
               ${Directives.ref(el => {
                 if (el instanceof HTMLElement) {
                   output.hideTooltip = () => {
@@ -113,8 +113,8 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, output, target) => {
                 >${lockedString(UIStringsNotTranslate.manageInSettings)}</span></div></devtools-tooltip>
           </div class="ai-code-completion-disclaimer">
         `, target);
-  // clang-format on
-};
+      // clang-format on
+    };
 
 const MINIMUM_LOADING_STATE_TIMEOUT = 1000;
 
@@ -123,14 +123,14 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
   #viewOutput: ViewOutput = {};
 
   #disclaimerTooltipId?: string;
-  #panelName?: string;
   #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
   #loading = false;
   #loadingStartTime = 0;
   #spinnerLoadingTimeout: number|undefined;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_SUMMARY_TOOLBAR_VIEW) {
     super(element);
+    this.markAsExternallyManaged();
     this.#noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
     this.#view = view;
@@ -141,11 +141,6 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  set panelName(panelName: string) {
-    this.#panelName = panelName;
-    this.requestUpdate();
-  }
-
   set loading(loading: boolean) {
     if (!loading && !this.#loading) {
       return;
@@ -182,7 +177,6 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
     this.#view(
         {
           disclaimerTooltipId: this.#disclaimerTooltipId,
-          panelName: this.#panelName,
           noLogging: this.#noLogging,
           onManageInSettingsTooltipClick: this.#onManageInSettingsTooltipClick.bind(this),
         },

front_end/panels/common/AiCodeCompletionSummaryToolbar.test.ts

@@ -9,10 +9,10 @@ import {createViewFunctionStub} from '../../testing/ViewFunctionHelpers.js';
 import * as Common from './common.js';
 
 describeWithEnvironment('AiCodeCompletionSummaryToolbar', () => {
-  async function createToolbar(panelName = 'console') {
+  async function createToolbar() {
     const view = createViewFunctionStub(Common.AiCodeCompletionSummaryToolbar);
     const widget = new Common.AiCodeCompletionSummaryToolbar(
-        {citationsTooltipId: 'citations-tooltip', panelName, disclaimerTooltipId: 'disclaimer-tooltip'}, view);
+        {citationsTooltipId: 'citations-tooltip', disclaimerTooltipId: 'disclaimer-tooltip'}, view);
     widget.markAsRoot();
     renderElementIntoDOM(widget);
     await view.nextInput;

front_end/panels/common/AiCodeCompletionSummaryToolbar.ts

@@ -28,13 +28,11 @@ const lockedString = i18n.i18n.lockedString;
 
 export interface AiCodeCompletionSummaryToolbarProps {
   citationsTooltipId: string;
-  panelName: string;
   disclaimerTooltipId?: string;
 }
 
 export interface ViewInput {
   disclaimerTooltipId?: string;
-  panelName: string;
   citations?: string[];
   citationsTooltipId: string;
   loading: boolean;
@@ -54,7 +52,6 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, _output, target) => {
     html`<devtools-widget
             .widgetConfig=${UI.Widget.widgetConfig(AiCodeCompletionDisclaimer, {
       disclaimerTooltipId: input.disclaimerTooltipId,
-      panelName: input.panelName,
       loading: input.loading,
     })} class="disclaimer-widget"></devtools-widget>` : nothing;
 
@@ -69,12 +66,12 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, _output, target) => {
                 <devtools-tooltip
                     id=${input.citationsTooltipId}
                     variant=${'rich'}
-                    jslogContext=${input.panelName + '.ai-code-completion-citations'}
+                    jslogContext=${'ai-code-completion-citations'}
                 ><div class="citations-tooltip-container">
                     ${Directives.repeat(input.citations, citation => html`<x-link
                         tabIndex="0"
                         href=${citation}
-                        jslog=${VisualLogging.link(input.panelName + '.ai-code-completion-citations.citation-link').track({
+                        jslog=${VisualLogging.link('ai-code-completion-citations.citation-link').track({
       click: true
     })}>${citation}</x-link>`)}</div></devtools-tooltip>
             </div>` : nothing;
@@ -95,15 +92,13 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
 
   #disclaimerTooltipId?: string;
   #citationsTooltipId: string;
-  #panelName: string;
   #citations: string[] = [];
   #loading = false;
 
   constructor(props: AiCodeCompletionSummaryToolbarProps, view?: View) {
     super();
     this.#disclaimerTooltipId = props.disclaimerTooltipId;
     this.#citationsTooltipId = props.citationsTooltipId;
-    this.#panelName = props.panelName;
     this.#view = view ?? DEFAULT_SUMMARY_TOOLBAR_VIEW;
     this.requestUpdate();
   }
@@ -133,7 +128,6 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
           disclaimerTooltipId: this.#disclaimerTooltipId,
           citations: this.#citations,
           citationsTooltipId: this.#citationsTooltipId,
-          panelName: this.#panelName,
           loading: this.#loading,
         },
         undefined, this.contentElement);

front_end/panels/common/aiCodeCompletionDisclaimer.css

@@ -5,6 +5,8 @@
  */
 
 @scope to (devtools-widget > *) {
+    display: flex;
+
     .ai-code-completion-disclaimer {
         gap: 5px;
         display: flex;

front_end/panels/console/ConsoleView.ts

@@ -624,7 +624,7 @@ export class ConsoleView extends UI.Widget.VBox implements
 
   createAiCodeCompletionSummaryToolbar(): void {
     this.aiCodeCompletionSummaryToolbar = new AiCodeCompletionSummaryToolbar(
-        {citationsTooltipId: CITATIONS_TOOLTIP_ID, panelName: 'console', disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID});
+        {citationsTooltipId: CITATIONS_TOOLTIP_ID, disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID});
     this.aiCodeCompletionSummaryToolbarContainer = this.element.createChild('div');
     this.aiCodeCompletionSummaryToolbar.show(this.aiCodeCompletionSummaryToolbarContainer, undefined, true);
   }

front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -1,6 +1,7 @@
 // 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 Root from '../../core/root/root.js';
@@ -15,6 +16,7 @@ import * as PanelCommon from '../common/common.js';
 import {Plugin} from './Plugin.js';
 
 const AI_CODE_COMPLETION_CHARACTER_LIMIT = 20_000;
+const DISCLAIMER_TOOLTIP_ID = 'sources-ai-code-completion-disclaimer-tooltip';
 
 export class AiCodeCompletionPlugin extends Plugin {
   #aidaClient?: Host.AidaClient.AidaClient;
@@ -26,6 +28,9 @@ export class AiCodeCompletionPlugin extends Plugin {
   #teaser?: PanelCommon.AiCodeCompletionTeaser;
   #teaserDisplayTimeout?: number;
   #editor?: TextEditor.TextEditor.TextEditor;
+  #aiCodeCompletionDisclaimer?: PanelCommon.AiCodeCompletionDisclaimer;
+  #aiCodeCompletionDisclaimerContainer = document.createElement('div');
+  #aiCodeCompletionDisclaimerToolbarItem = new UI.Toolbar.ToolbarItem(this.#aiCodeCompletionDisclaimerContainer);
 
   #boundEditorKeyDown: (event: Event) => Promise<void>;
   #boundOnAiCodeCompletionSettingChanged: () => void;
@@ -51,6 +56,10 @@ export class AiCodeCompletionPlugin extends Plugin {
     this.#teaser = undefined;
     this.#aiCodeCompletionSetting.removeChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
     this.#editor?.removeEventListener('keydown', this.#boundEditorKeyDown);
+    this.#aiCodeCompletion?.removeEventListener(
+        AiCodeCompletion.AiCodeCompletion.Events.REQUEST_TRIGGERED, this.#onAiRequestTriggered, this);
+    this.#aiCodeCompletion?.removeEventListener(
+        AiCodeCompletion.AiCodeCompletion.Events.RESPONSE_RECEIVED, this.#onAiResponseReceived, this);
     this.#aiCodeCompletion?.remove();
     super.dispose();
   }
@@ -72,6 +81,10 @@ export class AiCodeCompletionPlugin extends Plugin {
     ];
   }
 
+  override rightToolbarItems(): UI.Toolbar.ToolbarItem[] {
+    return [this.#aiCodeCompletionDisclaimerToolbarItem];
+  }
+
   #editorUpdate(update: CodeMirror.ViewUpdate): void {
     if (this.#teaser) {
       if (update.docChanged) {
@@ -181,17 +194,42 @@ export class AiCodeCompletionPlugin extends Plugin {
     }
     this.#aiCodeCompletion =
         new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion({aidaClient: this.#aidaClient}, this.#editor);
+    this.#aiCodeCompletion.addEventListener(
+        AiCodeCompletion.AiCodeCompletion.Events.REQUEST_TRIGGERED, this.#onAiRequestTriggered, this);
+    this.#aiCodeCompletion.addEventListener(
+        AiCodeCompletion.AiCodeCompletion.Events.RESPONSE_RECEIVED, this.#onAiResponseReceived, this);
+  }
+
+  #createAiCodeCompletionDisclaimer(): void {
+    this.#aiCodeCompletionDisclaimer = new PanelCommon.AiCodeCompletionDisclaimer();
+    this.#aiCodeCompletionDisclaimer.disclaimerTooltipId = DISCLAIMER_TOOLTIP_ID;
+    this.#aiCodeCompletionDisclaimer.show(this.#aiCodeCompletionDisclaimerContainer, undefined, true);
   }
 
   #onAiCodeCompletionSettingChanged(): void {
     if (this.#aiCodeCompletionSetting.get()) {
       this.#setAiCodeCompletion();
+      this.#createAiCodeCompletionDisclaimer();
     } else if (this.#aiCodeCompletion) {
       this.#aiCodeCompletion.remove();
       this.#aiCodeCompletion = undefined;
+      this.#aiCodeCompletionDisclaimerContainer.removeChildren();
+      this.#aiCodeCompletionDisclaimer = undefined;
     }
   }
 
+  #onAiRequestTriggered = (): void => {
+    if (this.#aiCodeCompletionDisclaimer) {
+      this.#aiCodeCompletionDisclaimer.loading = true;
+    }
+  };
+
+  #onAiResponseReceived = (): void => {
+    if (this.#aiCodeCompletionDisclaimer) {
+      this.#aiCodeCompletionDisclaimer.loading = false;
+    }
+  };
+
   #detachAiCodeCompletionTeaser(): void {
     this.#editor?.dispatch({
       effects: this.#teaserCompartment.reconfigure([]),

front_end/ui/visual_logging/KnownContextValues.ts

@@ -344,6 +344,9 @@ export const knownContextValues = new Set([
   'ai-assistance-history-images',
   'ai-assistance-patching-fre-completed',
   'ai-assistance-patching-selected-project-id',
+  'ai-code-completion-citations',
+  'ai-code-completion-citations.citation-link',
+  'ai-code-completion-disclaimer',
   'ai-code-completion-enabled',
   'ai-code-completion-teaser-dismissed',
   'ai-code-completion-teaser.dismiss',
@@ -855,9 +858,6 @@ export const knownContextValues = new Set([
   'console-user-activation-eval',
   'console-user-activation-eval-false',
   'console-view',
-  'console.ai-code-completion-citations',
-  'console.ai-code-completion-citations.citation-link',
-  'console.ai-code-completion-disclaimer',
   'console.clear',
   'console.clear.history',
   'console.create-pin',