Enable new badges, and gate 'Debug with AI' also behind a feature

This CL adds the new badges for the native context menus and rate limits
them based on their usage count.

We also gate the 'Debug with AI' behind a new feature.

Bug: 427371633
Change-Id: I0d852038962977f0d7b14cec898f4a99b51c1982
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6827161
Reviewed-by: Alex Rudenko <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/core/host/InspectorFrontendHost.ts

@@ -280,6 +280,9 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
   recordUserMetricsAction(_umaName: string): void {
   }
 
+  recordNewBadgeUsage(_featureName: string): void {
+  }
+
   connectAutomaticFileSystem(
       _fileSystemPath: Platform.DevToolsPath.RawPathString,
       _fileSystemUUID: string,

front_end/core/host/InspectorFrontendHostAPI.ts

@@ -355,6 +355,8 @@ export interface InspectorFrontendHostAPI {
 
   recordUserMetricsAction(umaName: string): void;
 
+  recordNewBadgeUsage(featureName: string): void;
+
   sendMessageToBackend(message: string): void;
 
   setDevicesDiscoveryConfig(config: Adb.Config): void;

front_end/core/root/Runtime.ts

@@ -452,12 +452,18 @@ interface AllowPopoverForcing {
 
 interface AiSubmenuPrompts {
   enabled: boolean;
+  featureName?: string;
 }
 
 interface IpProtectionInDevTools {
   enabled: boolean;
 }
 
+interface AiDebugWithAi {
+  enabled: boolean;
+  featureName?: string;
+}
+
 /**
  * The host configuration that we expect from the DevTools back-end.
  *
@@ -478,6 +484,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsDeepLinksViaExtensibilityApi: HostConfigDeepLinksViaExtensibilityApi,
   devToolsFreestyler: HostConfigFreestyler,
   devToolsAiAssistanceNetworkAgent: HostConfigAiAssistanceNetworkAgent,
+  devToolsAiDebugWithAi: AiDebugWithAi,
   devToolsAiAssistanceFileAgent: HostConfigAiAssistanceFileAgent,
   devToolsAiAssistancePerformanceAgent: HostConfigAiAssistancePerformanceAgent,
   devToolsAiCodeCompletion: HostConfigAiCodeCompletion,

front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import type * as Root from '../../core/root/root.js';
+import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as AiAssistance from './ai_assistance.js';
@@ -108,13 +108,22 @@ function isAnyFeatureAvailable(config?: Root.Runtime.HostConfig): boolean {
       isPerformanceAgentFeatureAvailable(config) || isFileAgentFeatureAvailable(config);
 }
 
+function titleForAiAssistanceActions(): Platform.UIString.LocalizedString {
+  if (Root.Runtime.hostConfig.devToolsAiDebugWithAi?.enabled ||
+      Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {
+    return i18nLazyString(UIStrings.debugWithAi)();
+  }
+  return i18nLazyString(UIStrings.askAi)();
+}
+
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.DRAWER_VIEW,
   id: 'freestyler',
   commandPrompt: i18nLazyString(UIStrings.showAiAssistance),
   title: i18nLazyString(UIStrings.aiAssistance),
   order: 10,
   isPreviewFeature: true,
+  featurePromotionId: 'ai-assistance',
   persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
   hasToolbar: false,
   condition: config => isAnyFeatureAvailable(config) && !isPolicyRestricted(config),
@@ -156,7 +165,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.askAi),
+  title: () => titleForAiAssistanceActions(),
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -171,7 +180,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.askAi),
+  title: () => titleForAiAssistanceActions(),
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -186,7 +195,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.askAi),
+  title: () => titleForAiAssistanceActions(),
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -201,7 +210,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.debugWithAi),
+  title: () => titleForAiAssistanceActions(),
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -216,7 +225,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.debugWithAi),
+  title: () => titleForAiAssistanceActions(),
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -231,7 +240,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.askAi),
+  title: () => titleForAiAssistanceActions(),
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -248,7 +257,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.askAi),
+  title: () => titleForAiAssistanceActions(),
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -262,7 +271,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.debugWithAi),
+  title: () => titleForAiAssistanceActions(),
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();

front_end/panels/elements/ElementsTreeElement.ts

@@ -232,10 +232,6 @@ const UIStrings = {
    * @description Text of the tooltip for scroll adorner.
    */
   elementHasScrollableOverflow: 'This element has a scrollable overflow',
-  /**
-   * @description Context menu text in Elements 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.
    */
@@ -918,8 +914,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, this.nodeInternal);
       if (Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {
         const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
-        const submenu =
-            contextMenu.footerSection().appendSubMenuItem(i18nString(UIStrings.debugWithAi), false, openAiAssistanceId);
+        // Register new badge under the `devToolsAiSubmenuPrompts` feature, as the freestyler one is already used in ViewManager.
+        const submenu = contextMenu.footerSection().appendSubMenuItem(
+            action.title(), false, Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.featureName);
         submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
 
         const submenuConfigs = [
@@ -1050,6 +1047,11 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
                 submenu, action, item.label, item.prompt, openAiAssistanceId + item.jslogContextSuffix);
           }
         }
+      } else if (Root.Runtime.hostConfig.devToolsAiDebugWithAi?.enabled) {
+        // Register new badge under the `devToolsAiDebugWithAi` feature, as the freestyler one is already used in ViewManager.
+        contextMenu.footerSection().appendAction(
+            openAiAssistanceId, undefined, false, undefined,
+            Root.Runtime.hostConfig.devToolsAiDebugWithAi?.featureName);
       } else {
         contextMenu.footerSection().appendAction(openAiAssistanceId);
       }

front_end/panels/network/NetworkLogView.ts

@@ -474,10 +474,6 @@ const UIStrings = {
    * @description Text for the Show only/Hide requests dropdown button of the filterbar
    */
   moreFilters: 'More filters',
-  /**
-   * @description Context menu text in Network 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.
    */
@@ -1717,14 +1713,15 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
             submenu: UI.ContextMenu.SubMenu, action: UI.ActionRegistration.Action,
             label: Common.UIString.LocalizedString, prompt: string, jslogContext: string): void {
           submenu.defaultSection().appendItem(
-              label, async () => await action.execute({prompt}), {disabled: !action.enabled(), jslogContext});
+              label, () => action.execute({prompt}), {disabled: !action.enabled(), jslogContext});
         }
 
         UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, request);
         if (Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {
           const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
           const submenu = contextMenu.footerSection().appendSubMenuItem(
-              i18nString(UIStrings.debugWithAi), false, openAiAssistanceId);
+              action.title(), false, openAiAssistanceId,
+              Root.Runtime.hostConfig.devToolsAiAssistanceNetworkAgent?.featureName);
           submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
           appendSubmenuPromptAction(
               submenu, action, i18nString(UIStrings.explainPurpose), 'What is the purpose of this request?',
@@ -1738,6 +1735,10 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
           appendSubmenuPromptAction(
               submenu, action, i18nString(UIStrings.assessSecurityHeaders), 'Are there any security headers present?',
               openAiAssistanceId + '.security');
+        } else if (Root.Runtime.hostConfig.devToolsAiDebugWithAi?.enabled) {
+          contextMenu.footerSection().appendAction(
+              openAiAssistanceId, undefined, false, undefined,
+              Root.Runtime.hostConfig.devToolsAiAssistanceNetworkAgent?.featureName);
         } else {
           contextMenu.footerSection().appendAction(openAiAssistanceId);
         }

front_end/panels/sources/SourcesPanel.ts

@@ -167,10 +167,6 @@ 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.
    */
@@ -974,7 +970,8 @@ export class SourcesPanel extends UI.Panel.Panel implements
         if (Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {
           const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
           const submenu = contextMenu.footerSection().appendSubMenuItem(
-              i18nString(UIStrings.debugWithAi), false, openAiAssistanceId);
+              action.title(), false, openAiAssistanceId,
+              Root.Runtime.hostConfig.devToolsAiAssistanceFileAgent?.featureName);
           submenu.defaultSection().appendAction('drjones.sources-panel-context', i18nString(UIStrings.startAChat));
           appendSubmenuPromptAction(
               submenu, action, i18nString(UIStrings.assessPerformance), 'Is this script optimized for performance?',
@@ -985,6 +982,10 @@ export class SourcesPanel extends UI.Panel.Panel implements
           appendSubmenuPromptAction(
               submenu, action, i18nString(UIStrings.explainInputHandling), 'Does the script handle user input safely',
               openAiAssistanceId + '.input');
+        } else if (Root.Runtime.hostConfig.devToolsAiDebugWithAi?.enabled) {
+          contextMenu.footerSection().appendAction(
+              openAiAssistanceId, undefined, false, undefined,
+              Root.Runtime.hostConfig.devToolsAiAssistanceFileAgent?.featureName);
         } else {
           contextMenu.footerSection().appendAction(openAiAssistanceId);
         }

front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -102,10 +102,6 @@ const UIStrings = {
    * @description Text for an action that shows all of the hidden entries of the Flame Chart
    */
   resetTrace: 'Reset trace',
-  /**
-   * @description Context menu text in Performance 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.
    */
@@ -291,11 +287,12 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
               submenu: UI.ContextMenu.SubMenu, action: UI.ActionRegistration.Action,
               label: Common.UIString.LocalizedString, prompt: string, jslogContext: string): void {
             submenu.defaultSection().appendItem(
-                label, async () => await action.execute({prompt}), {disabled: !action.enabled(), jslogContext});
+                label, () => action.execute({prompt}), {disabled: !action.enabled(), jslogContext});
           }
 
           const submenu = contextMenu.footerSection().appendSubMenuItem(
-              i18nString(UIStrings.debugWithAi), false, PERF_AI_ACTION_ID);
+              action.title(), false, PERF_AI_ACTION_ID,
+              Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.featureName);
           submenu.defaultSection().appendAction(PERF_AI_ACTION_ID, i18nString(UIStrings.startAChat));
           submenu.defaultSection().appendItem(i18nString(UIStrings.labelEntry), () => {
             this.dispatchEventToListeners(
@@ -312,10 +309,13 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
           appendSubmenuPromptAction(
               submenu, action, i18nString(UIStrings.findImprovements), 'How can I reduce the time of this call tree?',
               PERF_AI_ACTION_ID + '.improvements');
+        } else if (Root.Runtime.hostConfig.devToolsAiDebugWithAi?.enabled) {
+          contextMenu.footerSection().appendAction(
+              PERF_AI_ACTION_ID, undefined, false, undefined,
+              Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.featureName);
         } else {
           contextMenu.footerSection().appendAction(PERF_AI_ACTION_ID);
         }
-          UI.Context.Context.instance().setFlavor(Utils.AIContext.AgentFocus, context);
       }
     }
 

front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -380,7 +380,11 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
       return Lit.nothing;
     }
 
-    const ariaLabel = `Ask AI about ${insightModel.title} insight`;
+    const aiLabel = Root.Runtime.hostConfig.devToolsAiDebugWithAi?.enabled ||
+            Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled ?
+        'Debug with AI' :
+        'Ask AI';
+    const ariaLabel = `${aiLabel} about ${insightModel.title} insight`;
     // Only render the insight body content if it is selected.
     // To avoid re-rendering triggered from elsewhere.
     const content = this.renderContent();
@@ -398,7 +402,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
               jslog=${VisualLogging.action(`timeline.insight-ask-ai.${this.internalName}`).track({click: true})}
               @click=${this.#askAIButtonClick}
               aria-label=${ariaLabel}
-            >Ask AI</devtools-button>
+            >${aiLabel}</devtools-button>
           </div>
         `: Lit.nothing}
       </div>`;

front_end/ui/legacy/ContextMenu.test.ts

@@ -94,6 +94,29 @@ describeWithEnvironment('ContextMenu', () => {
     sinon.assert.called(showContextMenuAtPoint);
   });
 
+  it('records new badge usage', async () => {
+    sinon.stub(Host.InspectorFrontendHost.InspectorFrontendHostInstance, 'isHostedMode').returns(false);
+    sinon.stub(Host.InspectorFrontendHost.InspectorFrontendHostInstance, 'showContextMenuAtPoint');
+
+    const event = new Event('contextmenu');
+    sinon.stub(event, 'target').value(document);
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    const submenu1 = contextMenu.defaultSection().appendSubMenuItem('submenu', false, undefined, 'feature1');
+    submenu1.defaultSection().appendItem('item', () => {}, {featureName: 'feature2'});
+    submenu1.defaultSection().appendItem('item', () => {});
+
+    const submenu2 = contextMenu.defaultSection().appendSubMenuItem('submenu2', false, undefined, 'feature3');
+    submenu2.defaultSection().appendItem('item', () => {}, {featureName: 'feature4'});
+    const item = submenu2.defaultSection().appendItem('item', () => {}, {featureName: 'feature5'});
+
+    await contextMenu.show();
+    const newBadgeUsageStub =
+        sinon.stub(Host.InspectorFrontendHost.InspectorFrontendHostInstance, 'recordNewBadgeUsage');
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.dispatchEventToListeners(
+        Host.InspectorFrontendHostAPI.Events.ContextMenuItemSelected, item.id());
+    assert.deepEqual(newBadgeUsageStub.args, [['feature5'], ['feature3']]);
+  });
+
   it('logs impressions and clicks for hosted menu', async () => {
     const throttler = new Common.Throttler.Throttler(1000000000);
     await VisualLogging.startLogging({processingThrottler: throttler});