chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/freestyler/FreestylerPanel.ts

@@ -6,6 +6,8 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Trace from '../../models/trace/trace.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
@@ -21,14 +23,19 @@ import {
   State as FreestylerChatUiState,
   type Step,
 } from './components/FreestylerChatUi.js';
+import {
+  DrJonesFileAgent,
+} from './DrJonesFileAgent.js';
 import {
   DrJonesNetworkAgent,
 } from './DrJonesNetworkAgent.js';
+import {DrJonesPerformanceAgent} from './DrJonesPerformanceAgent.js';
 import {FreestylerAgent} from './FreestylerAgent.js';
 import freestylerPanelStyles from './freestylerPanel.css.js';
 
-// Bug for the send feed back link
-// const AI_ASSISTANCE_SEND_FEEDBACK = 'https://crbug.com/364805393' as Platform.DevToolsPath.UrlString;
+const {html} = LitHtml;
+
+const AI_ASSISTANCE_SEND_FEEDBACK = 'https://crbug.com/364805393' as Platform.DevToolsPath.UrlString;
 const AI_ASSISTANCE_HELP = 'https://goo.gle/devtools-ai-assistance' as Platform.DevToolsPath.UrlString;
 
 /*
@@ -36,9 +43,9 @@ const AI_ASSISTANCE_HELP = 'https://goo.gle/devtools-ai-assistance' as Platform.
 */
 const UIStringsNotTranslate = {
   /**
-   *@description AI assistance UI text for clearing messages.
+   *@description AI assistance UI text for clearing the chat.
    */
-  clearMessages: 'Clear messages',
+  clearChat: 'Clear chat',
   /**
    *@description AI assistance UI tooltip text for the help button.
    */
@@ -47,6 +54,22 @@ const UIStringsNotTranslate = {
    *@description AI assistant UI tooltip text for the settings button (gear icon).
    */
   settings: 'Settings',
+  /**
+   *@description AI assistant UI tooltip sending feedback.
+   */
+  sendFeedback: 'Send feedback',
+  /**
+   *@description Announcement text for screen readers when the chat is cleared.
+   */
+  chatCleared: 'Chat cleared',
+  /**
+   *@description Announcement text for screen readers when the conversation starts.
+   */
+  answerLoading: 'Answer loading',
+  /**
+   *@description Announcement text for screen readers when the answer comes.
+   */
+  answerReady: 'Answer ready',
 };
 
 const lockedString = i18n.i18n.lockedString;
@@ -63,10 +86,19 @@ function createToolbar(target: HTMLElement, {onClearClick}: {onClearClick: () =>
   const rightToolbar = new UI.Toolbar.Toolbar('freestyler-right-toolbar', toolbarContainer);
 
   const clearButton = new UI.Toolbar.ToolbarButton(
-      lockedString(UIStringsNotTranslate.clearMessages), 'clear', undefined, 'freestyler.clear');
+      lockedString(UIStringsNotTranslate.clearChat), 'clear', undefined, 'freestyler.clear');
   clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, onClearClick);
   leftToolbar.appendToolbarItem(clearButton);
 
+  const link = UI.XLink.XLink.create(
+      AI_ASSISTANCE_SEND_FEEDBACK, lockedString(UIStringsNotTranslate.sendFeedback), undefined, undefined,
+      'freestyler.send-feedback');
+  link.style.setProperty('display', null);
+  link.style.setProperty('text-decoration', 'none');
+  link.style.setProperty('padding', '0 var(--sys-size-3)');
+  const linkItem = new UI.Toolbar.ToolbarItem(link);
+  rightToolbar.appendToolbarItem(linkItem);
+
   rightToolbar.appendSeparator();
   const helpButton =
       new UI.Toolbar.ToolbarButton(lockedString(UIStringsNotTranslate.help), 'help', undefined, 'freestyler.help');
@@ -85,14 +117,14 @@ function createToolbar(target: HTMLElement, {onClearClick}: {onClearClick: () =>
 
 function defaultView(input: FreestylerChatUiProps, output: ViewOutput, target: HTMLElement): void {
   // clang-format off
-  LitHtml.render(LitHtml.html`
-    <${FreestylerChatUi.litTagName} .props=${input} ${LitHtml.Directives.ref((el: Element|undefined) => {
+  LitHtml.render(html`
+    <devtools-freestyler-chat-ui .props=${input} ${LitHtml.Directives.ref((el: Element|undefined) => {
       if (!el || !(el instanceof FreestylerChatUi)) {
         return;
       }
 
       output.freestylerChatUi = el;
-    })}></${FreestylerChatUi.litTagName}>
+    })}></devtools-freestyler-chat-ui>
   `, target, {host: input}); // eslint-disable-line rulesdir/lit_html_host_this
   // clang-format on
 }
@@ -103,11 +135,15 @@ export class FreestylerPanel extends UI.Panel.Panel {
 
   #toggleSearchElementAction: UI.ActionRegistration.Action;
   #selectedElement: SDK.DOMModel.DOMNode|null;
+  #selectedFile: Workspace.UISourceCode.UISourceCode|null;
   #selectedNetworkRequest: SDK.NetworkRequest.NetworkRequest|null;
+  #selectedStackTrace: Trace.Helpers.TreeHelpers.TraceEntryNodeForAI|null;
   #contentContainer: HTMLElement;
   #aidaClient: Host.AidaClient.AidaClient;
   #freestylerAgent: FreestylerAgent;
+  #drJonesFileAgent: DrJonesFileAgent;
   #drJonesNetworkAgent: DrJonesNetworkAgent;
+  #drJonesPerformanceAgent: DrJonesPerformanceAgent;
   #viewProps: FreestylerChatUiProps;
   #viewOutput: ViewOutput = {};
   #serverSideLoggingEnabled = isFreestylerServerSideLoggingEnabled();
@@ -120,7 +156,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     syncInfo: Host.InspectorFrontendHostAPI.SyncInformation,
   }) {
     super(FreestylerPanel.panelName);
-    this.#freestylerEnabledSetting = this.#getFreestylerEnabledSetting();
+    this.#freestylerEnabledSetting = this.#getAiAssistanceEnabledSetting();
 
     createToolbar(this.contentElement, {onClearClick: this.#clearMessages.bind(this)});
     this.#toggleSearchElementAction =
@@ -138,20 +174,25 @@ export class FreestylerPanel extends UI.Panel.Panel {
 
     this.#selectedElement = selectedElementFilter(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode));
     this.#selectedNetworkRequest = UI.Context.Context.instance().flavor(SDK.NetworkRequest.NetworkRequest);
+    this.#selectedStackTrace = UI.Context.Context.instance().flavor(Trace.Helpers.TreeHelpers.TraceEntryNodeForAI);
+    this.#selectedFile = UI.Context.Context.instance().flavor(Workspace.UISourceCode.UISourceCode);
     this.#viewProps = {
-      state: this.#freestylerEnabledSetting?.get() ? FreestylerChatUiState.CHAT_VIEW :
-                                                     FreestylerChatUiState.CONSENT_VIEW,
+      state: this.#freestylerEnabledSetting?.getIfNotDisabled() ? FreestylerChatUiState.CHAT_VIEW :
+                                                                  FreestylerChatUiState.CONSENT_VIEW,
       aidaAvailability,
       messages: [],
       inspectElementToggled: this.#toggleSearchElementAction.toggled(),
       selectedElement: this.#selectedElement,
       selectedNetworkRequest: this.#selectedNetworkRequest,
+      selectedStackTrace: this.#selectedStackTrace,
+      selectedFile: this.#selectedFile,
       isLoading: false,
       onTextSubmit: this.#startConversation.bind(this),
       onInspectElementClick: this.#handleSelectElementClick.bind(this),
       onFeedbackSubmit: this.#handleFeedbackSubmit.bind(this),
       onCancelClick: this.#cancel.bind(this),
       onSelectedNetworkRequestClick: this.#handleSelectedNetworkRequestClick.bind(this),
+      onSelectedFileRequestClick: this.#handleSelectedFileClick.bind(this),
       canShowFeedbackForm: this.#serverSideLoggingEnabled,
       userInfo: {
         accountImage: syncInfo.accountImage,
@@ -165,7 +206,9 @@ export class FreestylerPanel extends UI.Panel.Panel {
     });
 
     this.#freestylerAgent = this.#createFreestylerAgent();
+    this.#drJonesFileAgent = this.#createDrJonesFileAgent();
     this.#drJonesNetworkAgent = this.#createDrJonesNetworkAgent();
+    this.#drJonesPerformanceAgent = this.#createDrJonesPerformanceAgent();
 
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, ev => {
       if (this.#viewProps.selectedElement === ev.data) {
@@ -183,12 +226,28 @@ export class FreestylerPanel extends UI.Panel.Panel {
       this.#viewProps.selectedNetworkRequest = Boolean(ev.data) ? ev.data : null;
       this.doUpdate();
     });
+    UI.Context.Context.instance().addFlavorChangeListener(Trace.Helpers.TreeHelpers.TraceEntryNodeForAI, ev => {
+      if (this.#viewProps.selectedStackTrace === ev.data) {
+        return;
+      }
+
+      this.#viewProps.selectedStackTrace = Boolean(ev.data) ? ev.data : null;
+      this.doUpdate();
+    });
+    UI.Context.Context.instance().addFlavorChangeListener(Workspace.UISourceCode.UISourceCode, ev => {
+      if (this.#viewProps.selectedFile === ev.data) {
+        return;
+      }
+
+      this.#viewProps.selectedFile = Boolean(ev.data) ? ev.data : null;
+      this.doUpdate();
+    });
     this.doUpdate();
   }
 
-  #getFreestylerEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
+  #getAiAssistanceEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
     try {
-      return Common.Settings.moduleSetting('freestyler-enabled') as Common.Settings.Setting<boolean>;
+      return Common.Settings.moduleSetting('ai-assistance-enabled') as Common.Settings.Setting<boolean>;
     } catch {
       return;
     }
@@ -202,6 +261,13 @@ export class FreestylerPanel extends UI.Panel.Panel {
     });
   }
 
+  #createDrJonesFileAgent(): DrJonesFileAgent {
+    return new DrJonesFileAgent({
+      aidaClient: this.#aidaClient,
+      serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
+    });
+  }
+
   #createDrJonesNetworkAgent(): DrJonesNetworkAgent {
     return new DrJonesNetworkAgent({
       aidaClient: this.#aidaClient,
@@ -209,6 +275,13 @@ export class FreestylerPanel extends UI.Panel.Panel {
     });
   }
 
+  #createDrJonesPerformanceAgent(): DrJonesPerformanceAgent {
+    return new DrJonesPerformanceAgent({
+      aidaClient: this.#aidaClient,
+      serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
+    });
+  }
+
   static async instance(opts: {
     forceNew: boolean|null,
   }|undefined = {forceNew: null}): Promise<FreestylerPanel> {
@@ -273,8 +346,21 @@ export class FreestylerPanel extends UI.Panel.Panel {
     }
   }
 
+  #handleSelectedFileClick(): void|Promise<void> {
+    if (this.#viewProps.selectedFile) {
+      return Common.Revealer.reveal(this.#viewProps.selectedFile.uiLocation(0, 0));
+    }
+  }
+
   handleAction(actionId: string): void {
     switch (actionId) {
+      case 'freestyler.elements-floating-button': {
+        this.#viewOutput.freestylerChatUi?.focusTextInput();
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.FreestylerOpenedFromElementsPanelFloatingButton);
+        this.#viewProps.agentType = AgentType.FREESTYLER;
+        this.doUpdate();
+        break;
+      }
       case 'freestyler.element-panel-context': {
         this.#viewOutput.freestylerChatUi?.focusTextInput();
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.FreestylerOpenedFromElementsPanel);
@@ -289,6 +375,20 @@ export class FreestylerPanel extends UI.Panel.Panel {
         this.doUpdate();
         break;
       }
+      case 'drjones.performance-panel-context': {
+        // TODO(samiyac): Add UMA
+        this.#viewOutput.freestylerChatUi?.focusTextInput();
+        this.#viewProps.agentType = AgentType.DRJONES_PERFORMANCE;
+        this.doUpdate();
+        break;
+      }
+      case 'drjones.sources-panel-context': {
+        // TODO(samiyac): Add UMA
+        this.#viewOutput.freestylerChatUi?.focusTextInput();
+        this.#viewProps.agentType = AgentType.DRJONES_FILE;
+        this.doUpdate();
+        break;
+      }
     }
   }
 
@@ -296,9 +396,11 @@ export class FreestylerPanel extends UI.Panel.Panel {
     this.#viewProps.messages = [];
     this.#viewProps.isLoading = false;
     this.#freestylerAgent = this.#createFreestylerAgent();
+    this.#drJonesFileAgent = this.#createDrJonesFileAgent();
     this.#drJonesNetworkAgent = this.#createDrJonesNetworkAgent();
     this.#cancel();
     this.doUpdate();
+    UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.chatCleared));
   }
 
   #runAbortController = new AbortController();
@@ -328,9 +430,14 @@ export class FreestylerPanel extends UI.Panel.Panel {
     let runner: AsyncGenerator<ResponseData, void, void>|undefined;
     if (this.#viewProps.agentType === AgentType.FREESTYLER) {
       runner = this.#freestylerAgent.run(text, {signal, selectedElement: this.#viewProps.selectedElement});
+    } else if (this.#viewProps.agentType === AgentType.DRJONES_FILE) {
+      runner = this.#drJonesFileAgent.run(text, {signal, selectedFile: this.#viewProps.selectedFile});
     } else if (this.#viewProps.agentType === AgentType.DRJONES_NETWORK_REQUEST) {
       runner =
           this.#drJonesNetworkAgent.run(text, {signal, selectedNetworkRequest: this.#viewProps.selectedNetworkRequest});
+    } else if (this.#viewProps.agentType === AgentType.DRJONES_PERFORMANCE) {
+      runner =
+          this.#drJonesPerformanceAgent.run(text, {signal, selectedStackTrace: this.#viewProps.selectedStackTrace});
     }
 
     if (!runner) {
@@ -338,7 +445,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     }
 
     let step: Step = {isLoading: true};
-
+    UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.answerLoading));
     for await (const data of runner) {
       step.sideEffect = undefined;
       switch (data.type) {
@@ -421,6 +528,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
       this.doUpdate();
       this.#viewOutput.freestylerChatUi?.scrollToLastMessage();
     }
+    UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.answerReady));
   }
 }
 
@@ -430,8 +538,11 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
       actionId: string,
       ): boolean {
     switch (actionId) {
+      case 'freestyler.elements-floating-button':
       case 'freestyler.element-panel-context':
-      case 'drjones.network-panel-context': {
+      case 'drjones.network-panel-context':
+      case 'drjones.performance-panel-context':
+      case 'drjones.sources-panel-context': {
         void (async () => {
           const view = UI.ViewManager.ViewManager.instance().view(
               FreestylerPanel.panelName,

package/front_end/panels/freestyler/components/FreestylerChatUi.test.ts

@@ -4,6 +4,7 @@
 
 import * as Host from '../../../core/host/host.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
+import type * as Trace from '../../../models/trace/trace.js';
 import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import * as Marked from '../../../third_party/marked/marked.js';
@@ -46,13 +47,16 @@ css
       onFeedbackSubmit: noop,
       onCancelClick: noop,
       onSelectedNetworkRequestClick: noop,
+      onSelectedFileRequestClick: noop,
       inspectElementToggled: false,
       state: Freestyler.State.CHAT_VIEW,
       agentType: Freestyler.AgentType.FREESTYLER,
       aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
       messages,
       selectedElement: {} as unknown as SDK.DOMModel.DOMNode,
+      selectedFile: null,
       selectedNetworkRequest: {} as unknown as SDK.NetworkRequest.NetworkRequest,
+      selectedStackTrace: {} as unknown as Trace.Helpers.TreeHelpers.TraceEntryNodeForAI,
       isLoading: false,
       canShowFeedbackForm: false,
       userInfo: {},
@@ -88,19 +92,34 @@ css
       assert.exists(sideEffect);
     });
 
-    it('shows the consent view', async () => {
+    it('shows the disabled view when the state is CONSENT_VIEW', async () => {
       const props = getProp({
         state: Freestyler.State.CONSENT_VIEW,
       });
       const chat = new Freestyler.FreestylerChatUi(props);
       renderElementIntoDOM(chat);
 
-      const optIn = chat.shadowRoot?.querySelector('.opt-in');
+      const optIn = chat.shadowRoot?.querySelector('.disabled-view');
       assert.strictEqual(
           optIn?.textContent?.trim(), 'Turn on AI assistance in Settings to get help with understanding CSS styles');
       const chatInput = chat.shadowRoot?.querySelector('.chat-input') as HTMLTextAreaElement;
       assert.isTrue(chatInput.disabled);
       assert.strictEqual(chatInput.placeholder, 'Follow the steps above to ask a question');
     });
+
+    it('shows the disabled view when the AIDA is not available', async () => {
+      const props = getProp({
+        state: Freestyler.State.CHAT_VIEW,
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.NO_INTERNET,
+      });
+      const chat = new Freestyler.FreestylerChatUi(props);
+      renderElementIntoDOM(chat);
+
+      const optIn = chat.shadowRoot?.querySelector('.disabled-view');
+      assert.strictEqual(optIn?.textContent?.trim(), 'Check your internet connection and try again');
+      const chatInput = chat.shadowRoot?.querySelector('.chat-input') as HTMLTextAreaElement;
+      assert.isTrue(chatInput.disabled);
+      assert.strictEqual(chatInput.placeholder, 'Ask a question about the selected element');
+    });
   });
 });