chrome-devtools-frontend 1.0.1562885 → 1.0.1563377

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

@@ -5,6 +5,7 @@
 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 type * 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';
@@ -12,6 +13,7 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
 import {AiCodeCompletionTeaserPlaceholder} from './AiCodeCompletionTeaserPlaceholder.js';
+import {AiCodeGenerationParser} from './AiCodeGenerationParser.js';
 import {
   acceptAiAutoCompleteSuggestion,
   aiAutoCompleteSuggestion,
@@ -43,6 +45,7 @@ export interface AiCodeGenerationConfig {
   onRequestTriggered: () => void;
   // TODO(b/445394511): Move exposing citations to onSuggestionAccepted
   onResponseReceived: (citations: Host.AidaClient.Citation[]) => void;
+  panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 }
 
 export class AiCodeGenerationProvider {
@@ -64,6 +67,9 @@ export class AiCodeGenerationProvider {
       throw new Error('AI code generation feature is not enabled.');
     }
     this.#generationTeaser = new PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaser();
+    this.#generationTeaser.disclaimerTooltipId =
+        aiCodeGenerationConfig.panel + '-ai-code-generation-disclaimer-tooltip';
+    this.#generationTeaser.panel = aiCodeGenerationConfig.panel;
     this.#aiCodeGenerationConfig = aiCodeGenerationConfig;
   }
 
@@ -74,11 +80,11 @@ export class AiCodeGenerationProvider {
   extension(): CodeMirror.Extension[] {
     return [
       CodeMirror.EditorView.updateListener.of(update => this.#activateTeaser(update)),
-      CodeMirror.EditorView.updateListener.of(update => this.#abortGenerationDuringUpdate(update)),
+      CodeMirror.EditorView.updateListener.of(update => this.#abortOrDismissGenerationDuringUpdate(update)),
       aiAutoCompleteSuggestion,
       aiAutoCompleteSuggestionState,
       aiCodeGenerationTeaserModeState,
-      this.#generationTeaserCompartment.of([]),
+      CodeMirror.Prec.highest(this.#generationTeaserCompartment.of([])),
       CodeMirror.Prec.highest(CodeMirror.keymap.of(this.#editorKeymap())),
     ];
   }
@@ -137,9 +143,7 @@ export class AiCodeGenerationProvider {
             return false;
           }
           if (hasActiveAiSuggestion(this.#editor.state)) {
-            this.#editor.dispatch({
-              effects: setAiAutoCompleteSuggestion.of(null),
-            });
+            this.#dismissTeaserAndSuggestion();
             return true;
           }
           const generationTeaserIsLoading = this.#generationTeaser.displayState ===
@@ -147,7 +151,7 @@ export class AiCodeGenerationProvider {
           if (this.#generationTeaser.isShowing() && generationTeaserIsLoading) {
             this.#controller.abort();
             this.#controller = new AbortController();
-            this.#dismissTeaser();
+            this.#dismissTeaserAndSuggestion();
             return true;
           }
           return false;
@@ -189,9 +193,14 @@ export class AiCodeGenerationProvider {
     ];
   }
 
-  #dismissTeaser(): void {
+  #dismissTeaserAndSuggestion(): void {
     this.#generationTeaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.TRIGGER;
-    this.#editor?.dispatch({effects: setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.DISMISSED)});
+    this.#editor?.dispatch({
+      effects: [
+        setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.DISMISSED),
+        setAiAutoCompleteSuggestion.of(null),
+      ]
+    });
   }
 
   #activateTeaser(update: CodeMirror.ViewUpdate): void {
@@ -206,26 +215,35 @@ export class AiCodeGenerationProvider {
   }
 
   /**
-   * Monitors editor changes to cancel an ongoing AI generation.
-   * We abort the request and dismiss the teaser if the user modifies the
-   * document or moves their cursor/selection. These actions indicate the user
-   * is no longer focused on the current generation point or has manually
-   * resumed editing, making the pending suggestion irrelevant.
+   * Monitors editor changes to cancel an ongoing AI generation or dismiss one
+   * if it already exists.
+   * We abort the request (or dismiss suggestion) and dismiss the teaser if the
+   * user modifies the document or moves their cursor/selection. These actions
+   * indicate the user is no longer focused on the current generation point or
+   * has manually resumed editing, making the suggestion irrelevant.
    */
-  #abortGenerationDuringUpdate(update: CodeMirror.ViewUpdate): void {
+  #abortOrDismissGenerationDuringUpdate(update: CodeMirror.ViewUpdate): void {
     if (!update.docChanged && update.state.selection.main.head === update.startState.selection.main.head) {
       return;
     }
     const currentTeaserMode = update.state.field(aiCodeGenerationTeaserModeState);
-    const generationTeaserIsLoading = this.#generationTeaser.displayState ===
-        PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
-    // Generation should be in progress
-    if (currentTeaserMode === AiCodeGenerationTeaserMode.DISMISSED || !generationTeaserIsLoading) {
+    if (currentTeaserMode === AiCodeGenerationTeaserMode.DISMISSED) {
+      return;
+    }
+    if (this.#generationTeaser.displayState ===
+        PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING) {
+      this.#controller.abort();
+      this.#controller = new AbortController();
+      this.#dismissTeaserAndSuggestion();
+      return;
+    }
+    if (this.#generationTeaser.displayState ===
+        PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.GENERATED) {
+      update.view.dispatch({effects: setAiAutoCompleteSuggestion.of(null)});
+      this.#generationTeaser.displayState =
+          PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.TRIGGER;
       return;
     }
-    this.#controller.abort();
-    this.#controller = new AbortController();
-    this.#dismissTeaser();
   }
 
   async #triggerAiCodeGeneration(options?: {signal?: AbortSignal}): Promise<void> {
@@ -235,9 +253,8 @@ export class AiCodeGenerationProvider {
 
     this.#generationTeaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
     const cursor = this.#editor.state.selection.main.head;
-    // TODO(b/445899453): Detect all types of comments
-    const query = this.#editor.state.doc.lineAt(cursor).text;
-    if (query.trim().length === 0) {
+    const query = AiCodeGenerationParser.extractCommentText(this.#editor.state, cursor);
+    if (!query || query.trim().length === 0) {
       return;
     }
 
@@ -251,7 +268,7 @@ export class AiCodeGenerationProvider {
           this.#aiCodeGenerationConfig?.generationContext.inferenceLanguage, options);
 
       if (this.#generationTeaser) {
-        this.#dismissTeaser();
+        this.#dismissTeaserAndSuggestion();
       }
 
       if (!generationResponse || generationResponse.samples.length === 0) {
@@ -265,20 +282,30 @@ export class AiCodeGenerationProvider {
         return;
       }
 
+      const backtickRegex = /^```(?:\w+)?\n([\s\S]*?)\n```$/;
+      const matchArray = topSample.generationString.match(backtickRegex);
+      const suggestionText = matchArray ? matchArray[1].trim() : topSample.generationString;
+
       this.#editor.dispatch({
-        effects: setAiAutoCompleteSuggestion.of({
-          text: '\n' + topSample.generationString,
-          from: cursor,
-          rpcGlobalId: generationResponse.metadata.rpcGlobalId,
-          sampleId: topSample.sampleId,
-          startTime,
-          onImpression: this.#aiCodeGeneration?.registerUserImpression.bind(this.#aiCodeGeneration),
-        })
+        effects: [
+          setAiAutoCompleteSuggestion.of({
+            text: '\n' + suggestionText,
+            from: cursor,
+            rpcGlobalId: generationResponse.metadata.rpcGlobalId,
+            sampleId: topSample.sampleId,
+            startTime,
+            onImpression: this.#aiCodeGeneration?.registerUserImpression.bind(this.#aiCodeGeneration),
+          }),
+          setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.ACTIVE)
+        ]
       });
+      this.#generationTeaser.displayState =
+          PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.GENERATED;
 
-      AiCodeGeneration.debugLog('Suggestion dispatched to the editor', topSample.generationString);
+      AiCodeGeneration.debugLog('Suggestion dispatched to the editor', suggestionText);
       const citations = topSample.attributionMetadata?.citations ?? [];
       this.#aiCodeGenerationConfig?.onResponseReceived(citations);
+      return;
     } catch (e) {
       AiCodeGeneration.debugLog('Error while fetching code generation suggestions from AIDA', e);
       this.#aiCodeGenerationConfig?.onResponseReceived([]);
@@ -286,7 +313,7 @@ export class AiCodeGenerationProvider {
     }
 
     if (this.#generationTeaser) {
-      this.#dismissTeaser();
+      this.#dismissTeaserAndSuggestion();
     }
   }
 }
@@ -318,8 +345,7 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
       const line = this.#view.state.doc.lineAt(cursorPosition);
 
       const isEmptyLine = line.length === 0;
-      // TODO(b/445899453): Detect all types of comments
-      const isComment = line.text.startsWith('//');
+      const isComment = Boolean(AiCodeGenerationParser.extractCommentText(this.#view.state, cursorPosition));
       const isCursorAtEndOfLine = cursorPosition >= line.to;
 
       if ((isEmptyLine) || (isComment && isCursorAtEndOfLine)) {
@@ -332,9 +358,10 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
     }
 
     #updateTeaserState(state: CodeMirror.EditorState): void {
-      // Only handle non loading states, as updates during generation are handled by
-      // #abortGenerationDuringUpdate in AiCodeGenerationProvider
-      if (teaser.displayState === PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING) {
+      // Only handle non loading and non generated states, as updates during and after generation are handled by
+      // #abortOrDismissGenerationDuringUpdate in AiCodeGenerationProvider
+      if (teaser.displayState === PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING ||
+          teaser.displayState === PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.GENERATED) {
         return;
       }
       const cursorPosition = state.selection.main.head;
@@ -348,5 +375,15 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
     }
   }, {
     decorations: v => v.decorations,
+    eventHandlers: {
+      mousemove(event: MouseEvent): boolean {
+        // Required for mouse hover to propagate to the info button in teaser.
+        return (event.target instanceof Node && teaser.contentElement.contains(event.target));
+      },
+      mousedown(event: MouseEvent): boolean {
+        // Required for mouse click to propagate to the info tooltip in teaser.
+        return (event.target instanceof Node && teaser.contentElement.contains(event.target));
+      },
+    },
   });
 }

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

@@ -4,6 +4,7 @@
 
 export * as AiCodeCompletionProvider from './AiCodeCompletionProvider.js';
 export * as AiCodeCompletionTeaserPlaceholder from './AiCodeCompletionTeaserPlaceholder.js';
+export * as AiCodeGenerationParser from './AiCodeGenerationParser.js';
 export * as AiCodeGenerationProvider from './AiCodeGenerationProvider.js';
 export * as AutocompleteHistory from './AutocompleteHistory.js';
 export * as Config from './config.js';

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -320,13 +320,14 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
   }
 
   linkifyRawLocation(
-      rawLocation: SDK.DebuggerModel.Location, fallbackUrl: Platform.DevToolsPath.UrlString,
-      className?: string): HTMLElement {
+      rawLocation: SDK.DebuggerModel.Location, fallbackUrl: Platform.DevToolsPath.UrlString, className?: string,
+      options?: LinkifyOptions): HTMLElement {
     return this.linkifyScriptLocation(
         rawLocation.debuggerModel.target(), rawLocation.scriptId, fallbackUrl, rawLocation.lineNumber, {
           columnNumber: rawLocation.columnNumber,
           className,
           inlineFrameIndex: rawLocation.inlineFrameIndex,
+          tabStop: options?.tabStop,
         });
   }
 

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -352,6 +352,7 @@ export const knownContextValues = new Set([
   'ai-code-completion-teaser-dismissed',
   'ai-code-completion-teaser.dismiss',
   'ai-code-completion-teaser.fre',
+  'ai-code-generation-teaser.info-button',
   'ai-explorer',
   'ai_assistance',
   'align-content',

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1562885"
+  "version": "1.0.1563377"
 }