Add hover button for drjones file entrypoint

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

Author: Samiya Caur

front_end/core/host/UserMetrics.ts

@@ -570,7 +570,11 @@ export enum Action {
   InsightsReminderTeaserAbortedInSettings = 167,
   GeneratingInsightWithoutDisclaimer = 168,
   FreestylerOpenedFromElementsPanelFloatingButton = 169,
-  MAX_VALUE = 170,
+  DrJonesOpenedFromNetworkPanel = 170,
+  DrJonesOpenedFromSourcesPanel = 171,
+  DrJonesOpenedFromSourcesPanelFloatingButton = 172,
+  DrJonesOpenedFromPerformancePanel = 173,
+  MAX_VALUE = 174,
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 

front_end/panels/freestyler/FreestylerPanel.ts

@@ -403,22 +403,29 @@ export class FreestylerPanel extends UI.Panel.Panel {
         break;
       }
       case 'drjones.network-panel-context': {
-        // TODO(samiyac): Add UMA
         this.#viewOutput.freestylerChatUi?.focusTextInput();
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromNetworkPanel);
         this.#viewProps.agentType = AgentType.DRJONES_NETWORK_REQUEST;
         this.doUpdate();
         break;
       }
       case 'drjones.performance-panel-context': {
-        // TODO(samiyac): Add UMA
         this.#viewOutput.freestylerChatUi?.focusTextInput();
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromPerformancePanel);
         this.#viewProps.agentType = AgentType.DRJONES_PERFORMANCE;
         this.doUpdate();
         break;
       }
+      case 'drjones.sources-floating-button': {
+        this.#viewOutput.freestylerChatUi?.focusTextInput();
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromSourcesPanelFloatingButton);
+        this.#viewProps.agentType = AgentType.DRJONES_FILE;
+        this.doUpdate();
+        break;
+      }
       case 'drjones.sources-panel-context': {
-        // TODO(samiyac): Add UMA
         this.#viewOutput.freestylerChatUi?.focusTextInput();
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromSourcesPanel);
         this.#viewProps.agentType = AgentType.DRJONES_FILE;
         this.doUpdate();
         break;
@@ -576,6 +583,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
       case 'freestyler.element-panel-context':
       case 'drjones.network-panel-context':
       case 'drjones.performance-panel-context':
+      case 'drjones.sources-floating-button':
       case 'drjones.sources-panel-context': {
         void (async () => {
           const view = UI.ViewManager.ViewManager.instance().view(

front_end/panels/freestyler/freestyler-meta.ts

@@ -193,6 +193,21 @@ UI.ActionRegistration.registerActionExtension({
   condition: config => isDrJonesPerformanceFeatureAvailable(config) && !isPolicyRestricted(config),
 });
 
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'drjones.sources-floating-button',
+  contextTypes(): [] {
+    return [];
+  },
+  experiment: Root.Runtime.ExperimentName.FLOATING_ENTRY_POINTS_FOR_AI_ASSISTANCE,
+  category: UI.ActionRegistration.ActionCategory.GLOBAL,
+  title: i18nLazyString(UIStrings.askAi),
+  async loadActionDelegate() {
+    const Freestyler = await loadFreestylerModule();
+    return new Freestyler.ActionDelegate();
+  },
+  condition: config => isDrJonesFileFeatureAvailable(config) && !isPolicyRestricted(config),
+});
+
 UI.ActionRegistration.registerActionExtension({
   actionId: 'drjones.sources-panel-context',
   contextTypes() {

front_end/panels/sources/BUILD.gn

@@ -81,6 +81,7 @@ devtools_module("sources") {
     "../../panels/snippets:bundle",
     "../../panels/utils:bundle",
     "../../third_party/diff:bundle",
+    "../../ui/components/floating_button:bundle",
     "../../ui/components/icon_button:bundle",
     "../../ui/components/text_editor:bundle",
     "../../ui/legacy:bundle",

front_end/panels/sources/NavigatorView.ts

@@ -37,6 +37,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import * as FloatingButton from '../../ui/components/floating_button/floating_button.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -1375,6 +1376,7 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
   readonly node: NavigatorUISourceCodeTreeNode;
   private readonly navigatorView: NavigatorView;
   uiSourceCodeInternal: Workspace.UISourceCode.UISourceCode;
+  private aiButtonContainer?: HTMLElement;
 
   constructor(
       navigatorView: NavigatorView, uiSourceCode: Workspace.UISourceCode.UISourceCode, title: string,
@@ -1425,6 +1427,28 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
     UI.ARIAUtils.setLabel(this.listItemElement, `${this.uiSourceCodeInternal.name()}, ${this.nodeType}`);
   }
 
+  private createAiButton(): void {
+    if (!UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.sources-floating-button')) {
+      return;
+    }
+    const action = UI.ActionRegistry.ActionRegistry.instance().getAction('drjones.sources-floating-button');
+    if (!this.aiButtonContainer) {
+      this.aiButtonContainer = this.listItemElement.createChild('span', 'ai-button-container');
+      const floatingButton = new FloatingButton.FloatingButton.FloatingButton({
+        iconName: 'smart-assistant',
+      });
+      floatingButton.addEventListener('click', ev => {
+        ev.stopPropagation();
+        this.navigatorView.sourceSelected(this.uiSourceCode, false);
+        void action.execute();
+      }, {capture: true});
+      floatingButton.addEventListener('mousedown', ev => {
+        ev.stopPropagation();
+      }, {capture: true});
+      this.aiButtonContainer.appendChild(floatingButton);
+    }
+  }
+
   get uiSourceCode(): Workspace.UISourceCode.UISourceCode {
     return this.uiSourceCodeInternal;
   }
@@ -1434,6 +1458,7 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
     this.listItemElement.addEventListener('click', this.onclick.bind(this), false);
     this.listItemElement.addEventListener('contextmenu', this.handleContextMenuEvent.bind(this), false);
     this.listItemElement.addEventListener('dragstart', this.ondragstart.bind(this), false);
+    this.createAiButton();
   }
 
   private shouldRenameOnMouseDown(): boolean {

front_end/panels/sources/navigatorTree.css

@@ -61,6 +61,17 @@
   color: var(--icon-file-script);
 }
 
+.navigator-file-tree-item .ai-button-container {
+  display: none;
+  position: absolute;
+  z-index: 999;
+  right: var(--sys-size-3);
+}
+
+.navigator-file-tree-item:hover .ai-button-container {
+  display: inline-flex;
+}
+
 .navigator-file-tree-item devtools-icon.dot::before {
   width: 7px;
   height: 7px;

front_end/ui/visual_logging/KnownContextValues.ts

@@ -1086,6 +1086,7 @@ export const knownContextValues = new Set([
   'drawer-view-closeableTabs',
   'drjones.network-panel-context',
   'drjones.performance-panel-context',
+  'drjones.sources-floating-button',
   'drjones.sources-panel-context',
   'drop',
   'duration',