Add submenu items to 'Debug with Ai' in Sources Panel

This CL allows us to show submenu items in the context menu, when
right clicking on a script file in the Sources Panel. They contain
example prompts that directly open and run a prompt in the Ai
Assistance panel.

Bug: 433468811
Change-Id: I6e38e0c7f1e96e31cb975ea6f83f9340a9db01c4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6802286
Auto-Submit: Kim-Anh Tran <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>

Author: ktran

front_end/panels/ai_assistance/AiAssistancePanel.test.ts

@@ -654,7 +654,40 @@ describeWithMockConnection('AI Assistance Panel', () => {
       ]);
     });
 
+    it('runs action-triggered prompts', async () => {
+      updateHostConfig({
+        devToolsFreestyler: {
+          enabled: true,
+        },
+      });
+
+      const {panel, view} = await createAiAssistancePanel({
+        aidaClient: mockAidaClient(
+            [
+              [{explanation: 'test'}],
+            ],
+            ),
+      });
+
+      panel.handleAction('freestyler.element-panel-context', {prompt: 'Tell me more'});
+      assert.deepEqual((await view.nextInput).messages, [
+        {
+          entity: AiAssistancePanel.ChatMessageEntity.USER,
+          text: 'Tell me more',
+          imageInput: undefined,
+        },
+        {
+          answer: 'test',
+          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
+          rpcId: undefined,
+          suggestions: undefined,
+          steps: [],
+        },
+      ]);
+    });
+
     it('should not save partial responses to conversation history', async () => {
+
       updateHostConfig({
         devToolsFreestyler: {
           enabled: true,
@@ -993,6 +1026,33 @@ describeWithMockConnection('AI Assistance Panel', () => {
          assert.isTrue((await view.nextInput).blockedByCrossOrigin);
          assert.strictEqual(view.input.selectedContext?.getItem(), networkRequest2);
        });
+
+    it('starts a new chat when a predefined prompt for a cross origin request is sent', async () => {
+      const networkRequest = createNetworkRequest({
+        url: urlString`https://a.test`,
+      });
+      UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, networkRequest);
+
+      const {panel, view} = await createAiAssistancePanel({
+        aidaClient: mockAidaClient([
+          [{explanation: 'test'}],
+        ])
+      });
+      panel.handleAction('drjones.network-floating-button', {prompt: 'Tell me more'});
+      assert.isFalse((await view.nextInput).blockedByCrossOrigin);
+
+      // Change context to https://b.test.
+      const networkRequest2 = createNetworkRequest({
+        url: urlString`https://b.test`,
+      });
+      UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, networkRequest2);
+
+      // A predefined prompt from the user on a different origin has been initiated.
+      // This should automatically start a new chat, to allow for the prompt to be executed.
+      panel.handleAction('drjones.network-floating-button', {prompt: 'Tell me more about another one'});
+      const input = await view.nextInput;
+      assert.isFalse(input.blockedByCrossOrigin);
+    });
   });
 
   describe('auto agent selection for panels', () => {

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -1163,7 +1163,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     // Node picker is using linkifier.
   }
 
-  handleAction(actionId: string): void {
+  handleAction(actionId: string, opts?: Record<string, unknown>): void {
     if (this.#isLoading) {
       // If running some queries already, focus the input with the abort
       // button and do nothing.
@@ -1227,7 +1227,18 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       agent = this.#createAgent(targetConversationType);
     }
     this.#updateConversationState(agent);
-    this.#viewOutput.chatView?.focusTextInput();
+    const predefinedPrompt = opts?.['prompt'];
+    if (predefinedPrompt && typeof predefinedPrompt === 'string') {
+      this.#imageInput = undefined;
+      this.#isTextInputEmpty = true;
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
+      if (this.#blockedByCrossOrigin) {
+        this.#handleNewChatRequest();
+      }
+      void this.#startConversation(predefinedPrompt);
+    } else {
+      this.#viewOutput.chatView?.focusTextInput();
+    }
   }
 
   #populateHistoryMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
@@ -1877,10 +1888,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 }
 
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
-  handleAction(
-      _context: UI.Context.Context,
-      actionId: string,
-      ): boolean {
+  handleAction(_context: UI.Context.Context, actionId: string, opts?: Record<string, unknown>): boolean {
     switch (actionId) {
       case 'freestyler.elements-floating-button':
       case 'freestyler.element-panel-context':
@@ -1911,7 +1919,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
           }
 
           const widget = (await view.widget()) as AiAssistancePanel;
-          widget.handleAction(actionId);
+          widget.handleAction(actionId, opts);
         })();
         return true;
       }

front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -34,6 +34,11 @@ const UIStrings = {
    * the current element as context
    */
   askAi: 'Ask AI',
+  /**
+   *@description Text of a context menu item to redirect to the AI assistance panel with
+   * the current context
+   */
+  debugWithAi: 'Debug with AI',
   /**
    * @description Message shown to the user if the DevTools locale is not
    * supported.
@@ -258,7 +263,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.askAi),
+  title: i18nLazyString(UIStrings.debugWithAi),
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();

front_end/panels/sources/BUILD.gn

@@ -160,6 +160,7 @@ ts_library("unittests") {
     "OutlineQuickOpen.test.ts",
     "ResourceOriginPlugin.test.ts",
     "SourcesNavigator.test.ts",
+    "SourcesPanel.test.ts",
     "SourcesView.test.ts",
     "TabbedEditorContainer.test.ts",
     "UISourceCodeFrame.test.ts",

front_end/panels/sources/SourcesPanel.test.ts

@@ -0,0 +1,90 @@
+// 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 type * as Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as Bindings from '../../models/bindings/bindings.js';
+import * as Breakpoints from '../../models/breakpoints/breakpoints.js';
+import * as Persistence from '../../models/persistence/persistence.js';
+import * as Workspace from '../../models/workspace/workspace.js';
+import {describeWithEnvironment, registerNoopActions, updateHostConfig} from '../../testing/EnvironmentHelpers.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import * as Sources from './sources.js';
+
+describeWithEnvironment('SourcesPanel', () => {
+  function setUpEnvironment() {
+    const workspace = Workspace.Workspace.WorkspaceImpl.instance({forceNew: true});
+    const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance({
+      forceNew: true,
+      targetManager: SDK.TargetManager.TargetManager.instance(),
+      resourceMapping:
+          new Bindings.ResourceMapping.ResourceMapping(SDK.TargetManager.TargetManager.instance(), workspace),
+      ignoreListManager: Workspace.IgnoreListManager.IgnoreListManager.instance({forceNew: true}),
+    });
+    const breakpointManager = Breakpoints.BreakpointManager.BreakpointManager.instance({
+      forceNew: true,
+      targetManager: SDK.TargetManager.TargetManager.instance(),
+      workspace,
+      debuggerWorkspaceBinding,
+    });
+    Persistence.Persistence.PersistenceImpl.instance({forceNew: true, workspace, breakpointManager});
+    const networkPersistenceManager =
+        sinon.createStubInstance(Persistence.NetworkPersistenceManager.NetworkPersistenceManager);
+    sinon.stub(Persistence.NetworkPersistenceManager.NetworkPersistenceManager, 'instance')
+        .returns(networkPersistenceManager);
+    sinon.stub(UI.ViewManager.ViewManager.instance(), 'view')
+        .callsFake(() => sinon.createStubInstance(UI.View.SimpleView));
+  }
+
+  function createStubUISourceCode() {
+    const uiSourceCode = sinon.createStubInstance(Workspace.UISourceCode.UISourceCode);
+    uiSourceCode.contentType.returns(Common.ResourceType.resourceTypes.Script);
+    const stubProject = sinon.createStubInstance(Bindings.ContentProviderBasedProject.ContentProviderBasedProject);
+    uiSourceCode.project.returns(stubProject);
+    stubProject.isServiceProject.returns(true);
+    return uiSourceCode;
+  }
+
+  it('Shows Debug with Ai menu and submenu items', () => {
+    updateHostConfig({
+      devToolsAiSubmenuPrompts: {
+        enabled: true,
+      },
+    });
+
+    registerNoopActions([
+      'debugger.toggle-pause', 'debugger.step-over', 'debugger.step-into', 'debugger.step-out', 'debugger.step',
+      'debugger.toggle-breakpoints-active'
+    ]);
+    UI.ActionRegistration.registerActionExtension({
+      actionId: 'drjones.sources-panel-context',
+      title: () => 'Debug with AI' as Platform.UIString.LocalizedString,
+      category: UI.ActionRegistration.ActionCategory.GLOBAL,
+    });
+    const actionRegistryInstance = UI.ActionRegistry.ActionRegistry.instance({forceNew: true});
+    UI.ShortcutRegistry.ShortcutRegistry.instance({forceNew: true, actionRegistry: actionRegistryInstance});
+
+    setUpEnvironment();
+
+    const sources = new Sources.SourcesPanel.SourcesPanel();
+
+    const event = new Event('contextmenu');
+    sinon.stub(event, 'target').value(document);
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+
+    const uiSourceCode = createStubUISourceCode();
+    sources.appendApplicableItems(event, contextMenu, uiSourceCode);
+
+    const debugWithAiItem = contextMenu.buildDescriptor().subItems?.find(item => item.label === 'Debug with AI');
+    assert.exists(debugWithAiItem);
+    assert.deepEqual(
+        debugWithAiItem.subItems?.map(item => item.label),
+        ['Start a chat', 'Assess performance', 'Explain this script', 'Explain input handling']);
+
+    UI.ActionRegistry.ActionRegistry.reset();
+    UI.ShortcutRegistry.ShortcutRegistry.removeInstance();
+  });
+});

front_end/panels/sources/SourcesPanel.ts

@@ -167,6 +167,27 @@ const UIStrings = {
    *@description Text in Sources Panel of the Sources panel
    */
   openInSourcesPanel: 'Open in Sources panel',
+  /**
+   *@description Context menu text in Sources Panel to that opens a submenu with AI prompts.
+   */
+  debugWithAi: 'Debug with AI',
+  /**
+   *@description Text of a context menu item to redirect to the AI assistance panel and to start a chat.
+   */
+  startAChat: 'Start a chat',
+  /**
+   *@description Text of a context menu item to redirect to the AI assistance panel and directly execute
+   * a prompt to assess the performance of a script.
+   */
+  assessPerformance: 'Assess performance',
+  /**
+   *@description Context menu item in Sources panel to explain a script via AI.
+   */
+  explainThisScript: 'Explain this script',
+  /**
+   *@description Context menu item in Sources panel to explain input handling in a script via AI.
+   */
+  explainInputHandling: 'Explain input handling',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/sources/SourcesPanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -945,11 +966,28 @@ export class SourcesPanel extends UI.Panel.Panel implements
           });
     }
 
-    if (UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.sources-panel-context')) {
+    const openAiAssistanceId = 'drjones.sources-panel-context';
+    if (UI.ActionRegistry.ActionRegistry.instance().hasAction(openAiAssistanceId)) {
       const editorElement = this.element.querySelector('devtools-text-editor');
       if (!eventTarget.isSelfOrDescendant(editorElement) && uiSourceCode.contentType().isTextType()) {
         UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, uiSourceCode);
-        contextMenu.footerSection().appendAction('drjones.sources-panel-context');
+        if (Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {
+          const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
+          const submenu = contextMenu.footerSection().appendSubMenuItem(
+              i18nString(UIStrings.debugWithAi), false, openAiAssistanceId);
+          submenu.defaultSection().appendAction('drjones.sources-panel-context', i18nString(UIStrings.startAChat));
+          appendSubmenuPromptAction(
+              submenu, action, i18nString(UIStrings.assessPerformance), 'Is this script optimized for performance?',
+              openAiAssistanceId + '.performance');
+          appendSubmenuPromptAction(
+              submenu, action, i18nString(UIStrings.explainThisScript), 'What does this script do?',
+              openAiAssistanceId + '.script');
+          appendSubmenuPromptAction(
+              submenu, action, i18nString(UIStrings.explainInputHandling), 'Does the script handle user input safely',
+              openAiAssistanceId + '.input');
+        } else {
+          contextMenu.footerSection().appendAction(openAiAssistanceId);
+        }
       }
     }
 
@@ -960,6 +998,13 @@ export class SourcesPanel extends UI.Panel.Panel implements
             .every(script => script.isJavaScript())) {
       this.callstackPane.appendIgnoreListURLContextMenuItems(contextMenu, uiSourceCode);
     }
+
+    function appendSubmenuPromptAction(
+        submenu: UI.ContextMenu.SubMenu, action: UI.ActionRegistration.Action, label: Common.UIString.LocalizedString,
+        prompt: string, jslogContext: string): void {
+      submenu.defaultSection().appendItem(
+          label, () => action.execute({prompt}), {disabled: !action.enabled(), jslogContext});
+    }
   }
 
   private appendUISourceCodeFrameItems(contextMenu: UI.ContextMenu.ContextMenu, target: UISourceCodeFrame): void {

front_end/ui/legacy/ActionRegistration.ts

@@ -99,7 +99,7 @@ const str_ = i18n.i18n.registerUIStrings('ui/legacy/ActionRegistration.ts', UISt
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface ActionDelegate {
-  handleAction(context: Context, actionId: string): boolean;
+  handleAction(context: Context, actionId: string, opts?: Record<string, unknown>): boolean;
 }
 
 export class Action extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
@@ -115,13 +115,13 @@ export class Action extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     return this.actionRegistration.actionId;
   }
 
-  async execute(): Promise<boolean> {
+  async execute(opts?: Record<string, unknown>): Promise<boolean> {
     if (!this.actionRegistration.loadActionDelegate) {
       return false;
     }
     const delegate = await this.actionRegistration.loadActionDelegate();
     const actionId = this.id();
-    return delegate.handleAction(Context.instance(), actionId);
+    return delegate.handleAction(Context.instance(), actionId, opts);
   }
 
   icon(): string|undefined {

front_end/ui/legacy/ContextMenu.test.ts

@@ -155,7 +155,7 @@ describeWithEnvironment('ContextMenu', () => {
     const event = new Event('contextmenu');
     sinon.stub(event, 'target').value(document);
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    contextMenu.defaultSection().appendAction('test-action', 'mockLabel', false, 'mockFeature');
+    contextMenu.defaultSection().appendAction('test-action', 'mockLabel', false, undefined, 'mockFeature');
     await contextMenu.show();
     sinon.assert.calledOnce(showContextMenuAtPoint);
 

front_end/ui/legacy/ContextMenu.ts

@@ -225,7 +225,7 @@ export class Section {
     return item;
   }
 
-  appendAction(actionId: string, label?: string, optional?: boolean, feature?: string): void {
+  appendAction(actionId: string, label?: string, optional?: boolean, jslogContext?: string, feature?: string): void {
     if (optional && !ActionRegistry.instance().hasAction(actionId)) {
       return;
     }
@@ -235,7 +235,7 @@ export class Section {
     }
     const result = this.appendItem(label, action.execute.bind(action), {
       disabled: !action.enabled(),
-      jslogContext: actionId,
+      jslogContext: jslogContext ?? actionId,
       featureName: feature,
     });
     const shortcut = ShortcutRegistry.instance().shortcutTitleForAction(actionId);

front_end/ui/visual_logging/KnownContextValues.ts

@@ -1299,6 +1299,9 @@ export const knownContextValues = new Set([
   'drjones.performance-panel-context',
   'drjones.sources-floating-button',
   'drjones.sources-panel-context',
+  'drjones.sources-panel-context.input',
+  'drjones.sources-panel-context.performance',
+  'drjones.sources-panel-context.script',
   'drop',
   'duration',
   'durationchange',