chrome-devtools-frontend 1.0.1667564 → 1.0.1669021

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -9,7 +9,6 @@ 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 * as Platform from '../../../core/platform/platform.js';
-import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as TextUtils from '../../../core/text_utils/text_utils.js';
 import type * as Protocol from '../../../generated/protocol.js';
@@ -105,10 +104,6 @@ const UIStringsNotTranslate = {
    * @description The title of the button for scrolling to see previous suggestions
    */
   scrollToPrevious: 'Scroll to previous suggestions',
-  /**
-   * @description The title of the button that copies the AI-generated response to the clipboard.
-   */
-  copyResponse: 'Copy response',
   /**
    * @description The error message when the request to the LLM failed for some reason.
    */
@@ -142,14 +137,6 @@ const UIStringsNotTranslate = {
    * @description Button text that cancels code execution that may affect the page.
    */
   declineActionRequestApproval: 'Cancel',
-  /**
-   * @description The generic name of the AI agent (do not translate)
-   */
-  ai: 'AI',
-  /**
-   * @description Gemini (do not translate)
-   */
-  gemini: 'Gemini',
   /**
    * @description The fallback text when a step has no title yet
    */
@@ -561,7 +548,6 @@ export interface MessageInput {
 }
 
 export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, target: HTMLElement): void => {
-  const hasAiV2 = Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled);
   const message = input.message;
 
   if (message.entity === ChatMessageEntity.USER) {
@@ -574,19 +560,13 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
       query: true,
       'is-last-message': input.isLastMessage,
       'is-first-message': input.isFirstMessage,
-      'ai-v2': hasAiV2,
     });
 
-    const userQueryWrapperClasses = Lit.Directives.classMap({
-      // Don't need to style at all unless we are on the V2 flag.
-      // Once we ship this can be removed entirely.
-      'user-query-wrapper': hasAiV2,
-    });
     // clang-format off
     Lit.render(html`
       <style>${Input.textInputStyles}</style>
       <style>${chatMessageStyles}</style>
-      <div class=${userQueryWrapperClasses}>
+      <div class="user-query-wrapper">
         <section class=${messageClasses} jslog=${VisualLogging.section('question')}>
           ${imageInput}
           <div class="message-content">${renderTextAsMarkdown(message.text, input.markdownRenderer)}</div>
@@ -598,28 +578,19 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
   }
 
   const steps = message.parts.filter(part => part.type === 'step').map(part => part.step);
-  const icon = AiAssistanceModel.AiUtils.getIconName();
 
   const messageClasses = Lit.Directives.classMap({
     'chat-message': true,
     answer: true,
     'is-last-message': input.isLastMessage,
     'is-first-message': input.isFirstMessage,
-    'ai-v2': hasAiV2,
   });
   // clang-format off
   Lit.render(html`
     <style>${Input.textInputStyles}</style>
     <style>${chatMessageStyles}</style>
     <section class=${messageClasses} jslog=${VisualLogging.section('answer')}>
-      ${hasAiV2 ? Lit.nothing : html`
-        <div class="message-info">
-          <devtools-icon name=${icon}></devtools-icon>
-          <div class="message-name">
-            <h2>${AiAssistanceModel.AiUtils.isGeminiBranding() ? lockedString(UIStringsNotTranslate.gemini) : lockedString(UIStringsNotTranslate.ai)}</h2>
-          </div>
-        </div>`}
-      ${hasAiV2 ? renderWalkthroughUI(input, steps) : Lit.nothing}
+      ${renderWalkthroughUI(input, steps)}
       <div class="answer-body-wrapper">
         ${Lit.Directives.repeat(
           message.parts,
@@ -632,21 +603,13 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
             if (part.type === 'widget') {
               return html`${Lit.Directives.until(renderWidgets(part.widgets, {wrapperClass: 'main-widgets-wrapper'}))}`;
             }
-            if (!hasAiV2 && part.type === 'step') {
-              return renderStep({
-                step: part.step,
-                isLoading: input.isLoading,
-                markdownRenderer: input.markdownRenderer,
-                isLast: isLastPart,
-              });
-            }
             return Lit.nothing;
           },
         )}
         ${renderError(message)}
         ${input.showActions ? renderActions(input, output) : Lit.nothing}
       </div>
-      ${hasAiV2 ? renderSideEffectStepsUI(input, steps) : Lit.nothing}
+      ${renderSideEffectStepsUI(input, steps)}
     </section>
   `, target);
   // clang-format on
@@ -688,7 +651,7 @@ export function titleForStep(step: Step): string {
 }
 
 function renderTitle(step: Step): Lit.LitTemplate {
-  const paused = step.requestApproval ?
+  const paused = step.requestApproval && !step.canceled ?
       html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` :
       Lit.nothing;
 
@@ -916,13 +879,13 @@ function renderStepBadge({step, isLoading, isLast}: {
   let iconName = 'checkmark';
   let ariaLabel: string|undefined = lockedString(UIStringsNotTranslate.completed);
   let role: 'button'|undefined = 'button';
-  if (isLast && step.requestApproval) {
+  if (step.canceled) {
+    ariaLabel = lockedString(UIStringsNotTranslate.aborted);
+    iconName = 'cross';
+  } else if (isLast && step.requestApproval) {
     role = undefined;
     ariaLabel = lockedString(UIStringsNotTranslate.paused);
     iconName = 'pause-circle';
-  } else if (step.canceled) {
-    ariaLabel = lockedString(UIStringsNotTranslate.aborted);
-    iconName = 'cross';
   }
 
   return html`<devtools-icon
@@ -942,7 +905,7 @@ export function renderStep({step, isLoading, markdownRenderer, isLast}: {
   const stepClasses = Lit.Directives.classMap({
     step: true,
     empty: !step.thought && !step.code && !step.contextDetails && !step.requestApproval,
-    paused: Boolean(step.requestApproval),
+    paused: Boolean(step.requestApproval && !step.canceled),
     canceled: Boolean(step.canceled),
   });
   // clang-format off
@@ -1724,7 +1687,7 @@ export function getDeduplicatedWidgetsMessage(message: ModelChatMessage): ModelC
 
 async function renderWidgets(
     widgets: AiWidget[]|undefined, options: {wrapperClass?: string} = {}): Promise<Lit.LitTemplate> {
-  if (!Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled || !widgets || widgets.length === 0) {
+  if (!widgets || widgets.length === 0) {
     return Lit.nothing;
   }
   const ui = await Promise.all(widgets.map(async widgetData => {
@@ -1792,7 +1755,7 @@ async function renderWidgets(
 }
 
 function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
-  if (!step.requestApproval) {
+  if (!step.requestApproval || step.canceled) {
     return Lit.nothing;
   }
 
@@ -1882,14 +1845,9 @@ function renderImageChatMessage(inlineData: Host.AidaClient.MediaBlob): Lit.LitT
 }
 
 function renderActions(input: ChatMessageViewInput, output: ViewOutput): Lit.LitTemplate {
-  const aiAssistanceV2 = Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled;
-  const rowClasses = Lit.Directives.classMap({
-    'ai-assistance-feedback-row': true,
-    'not-v2': !aiAssistanceV2,
-  });
   // clang-format off
   return html`
-    <div class=${rowClasses}>
+    <div class="ai-assistance-feedback-row">
       <div class="action-buttons">
         ${input.showRateButtons ? html`
           <devtools-button
@@ -1918,7 +1876,6 @@ function renderActions(input: ChatMessageViewInput, output: ViewOutput): Lit.Lit
             } as Buttons.Button.ButtonData}
             @click=${() => input.onRatingClick(Host.AidaClient.Rating.NEGATIVE)}
           ></devtools-button>
-          ${aiAssistanceV2 ? Lit.nothing : html`<div class="vertical-separator"></div>`}
         `: Lit.nothing}
         <devtools-button
           .data=${
@@ -1932,20 +1889,7 @@ function renderActions(input: ChatMessageViewInput, output: ViewOutput): Lit.Lit
           }
           @click=${input.onReportClick}
         ></devtools-button>
-        ${aiAssistanceV2 ? Lit.nothing : html`
-          <div class="vertical-separator"></div>
-          <devtools-button
-            .data=${{
-              variant: Buttons.Button.Variant.ICON,
-              size: Buttons.Button.Size.SMALL,
-              title: lockedString(UIStringsNotTranslate.copyResponse),
-              iconName: 'copy',
-              jslogContext: 'copy-ai-response',
-            } as Buttons.Button.ButtonData}
-            aria-label=${lockedString(UIStringsNotTranslate.copyResponse)}
-            @click=${input.onCopyResponseClick}></devtools-button>
-        `}
-        ${input.onExportClick && aiAssistanceV2 && input.isLastMessage ? html`
+        ${input.onExportClick && input.isLastMessage ? html`
           <devtools-button
             class="export-for-agents-button"
             .jslogContext=${'ai-export-for-agents'}

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -7,7 +7,6 @@ import '../../../ui/components/spinners/spinners.js';
 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 Root from '../../../core/root/root.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
@@ -60,11 +59,17 @@ interface ViewOutput {
 type View = (input: ChatWidgetInput, output: ViewOutput, target: HTMLElement|ShadowRoot) => void;
 
 export interface Props {
-  onTextSubmit:
-      (text: string, imageInput?: Host.AidaClient.Part,
-       multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => void;
+  onTextSubmit: (
+      text: string,
+      imageInput?: Host.AidaClient.Part,
+      multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType,
+      ) => void;
   onInspectElementClick: () => void;
-  onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void;
+  onFeedbackSubmit: (
+      rpcId: Host.AidaClient.RpcGlobalId,
+      rate: Host.AidaClient.Rating,
+      feedback?: string,
+      ) => void;
   onCancelClick: () => void;
   onContextClick: () => void;
   onNewConversation: () => void;
@@ -87,6 +92,8 @@ export interface Props {
   emptyStateSuggestions: AiAssistanceModel.AiAgent.ConversationSuggestion[];
   inputPlaceholder: Platform.UIString.LocalizedString;
   disclaimerText: Platform.UIString.LocalizedString;
+  textInputValue: string;
+  onTextChange: (text: string) => void;
   uploadImageInputEnabled?: boolean;
   markdownRenderer: MarkdownLitRenderer;
   generateConversationSummary: (markdown: string) => Promise<string>;
@@ -108,12 +115,9 @@ export interface ChatWidgetInput extends Props {
 }
 
 const DEFAULT_VIEW: View = (input, output, target) => {
-  const hasAiV2 = Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled);
-
   const chatUiClasses = classMap({
     'chat-ui': true,
     gemini: AiAssistanceModel.AiUtils.isGeminiBranding(),
-    'ai-v2': hasAiV2,
   });
 
   const inputWidgetClasses = classMap({
@@ -199,6 +203,8 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             conversationType: input.conversationType,
             uploadImageInputEnabled: input.uploadImageInputEnabled ?? false,
             isReadOnly: input.isReadOnly,
+            textInputValue: input.textInputValue,
+            onTextChange: input.onTextChange,
             onContextClick: input.onContextClick,
             onInspectElementClick: input.onInspectElementClick,
             onTextSubmit: input.onTextSubmit,

package/front_end/panels/ai_assistance/components/chatMessage.css

@@ -16,11 +16,6 @@
     overflow: hidden;
     mask-image: linear-gradient(to right, var(--ref-palette-neutral0) calc(100% - var(--sys-size-15)), transparent 100%);
 
-    &.not-v2 {
-      /* Can be removed when AIv2 ships */
-      gap: var(--sys-size-8);
-    }
-
     .action-buttons {
       display: flex;
       align-items: center;
@@ -144,10 +139,8 @@
     font-size: 12px;
     word-break: normal;
     overflow-wrap: anywhere;
-    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 
-
-    &.query.ai-v2 {
+    &.query {
       width: fit-content;
       max-width: 80%;
       text-align: left;
@@ -165,22 +158,11 @@
       }
     }
 
-    &.ai-v2 {
-      border-bottom: none;
-    }
-
     .ai-css-change {
       margin: var(--sys-size-6) 0;
     }
 
-    &:not(.ai-v2) .answer-body-wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: var(--sys-size-5);
-      width: 100%;
-    }
-
-    &.ai-v2 .answer-body-wrapper {
+    .answer-body-wrapper {
       @container(min-width: 700px) {
         /* Purposefully not using design system variables, this is a
          * specific size to indent the content in and align it with the

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -1787,7 +1787,7 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
     this.listItemElement.addEventListener('contextmenu', this.handleContextMenuEvent.bind(this), true);
     const storageItem = this.#getStorageItem();
     if (storageItem) {
-      this.createAiButton(storageItem);
+      this.createAiButton(() => this.#getStorageItem());
     }
   }
 
@@ -1910,7 +1910,7 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
     this.listItemElement.addEventListener('contextmenu', this.handleContextMenuEvent.bind(this), true);
     const storageItem = this.#getStorageItem();
     if (storageItem) {
-      this.createAiButton(storageItem);
+      this.createAiButton(() => this.#getStorageItem());
     }
   }
 

package/front_end/panels/application/ApplicationPanelTreeElement.ts

@@ -8,6 +8,7 @@ import '../../ui/components/buttons/buttons.js';
 
 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 AiAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -66,7 +67,14 @@ export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
     this.resourcesPanel.showView(view);
   }
 
-  protected createAiButton(storageItem: AiAssistance.StorageItem.StorageItem): void {
+  /**
+   * Creates the Ask-AI floating button on this tree element.
+   * @param storageItemProvider A provider function returning the StorageItem context.
+   * Using a function provider allows dynamic context resolution at click time
+   * (e.g. for category headers that aren't recreated (e.g. Local Storage) whose target origin may change), while supporting
+   * static contexts for individual leaf items under these general category headers.
+   */
+  protected createAiButton(storageItemProvider: () => AiAssistance.StorageItem.StorageItem | null): void {
     const STORAGE_FLOATING_BUTTON_ACTION_ID = 'ai-assistance.storage-floating-button';
     const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
     if (!actionRegistry.hasAction(STORAGE_FLOATING_BUTTON_ACTION_ID)) {
@@ -78,11 +86,15 @@ export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
       const icon = AiAssistance.AiUtils.getIconName();
       const onClick = (ev: Event): void => {
         ev.stopPropagation();
-        UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, storageItem);
-        void action.execute();
+        const item = storageItemProvider();
+        if (item) {
+          UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, item);
+          void action.execute();
+        }
       };
 
       // clang-format off
+
       Lit.render(html`
             <devtools-floating-button
               icon-name=${icon}
@@ -106,11 +118,13 @@ export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeE
   // in the Application Panel.
   protected emptyCategoryHeadline: string;
   protected categoryDescription: string;
+  protected readonly settingsKey: string;
 
   constructor(
       resourcesPanel: ResourcesPanel, categoryName: string, emptyCategoryHeadline: string, categoryDescription: string,
       settingsKey: string, settingsDefault = false) {
     super(resourcesPanel, categoryName, false, settingsKey);
+    this.settingsKey = settingsKey;
     this.expandedSetting =
         Common.Settings.Settings.instance().createSetting('resources-' + settingsKey + '-expanded', settingsDefault);
     this.categoryName = categoryName;
@@ -119,6 +133,25 @@ export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeE
     this.categoryDescription = categoryDescription;
   }
 
+  protected createGenericStorageAiContext(): AiAssistance.StorageItem.StorageItem|null {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const mainPageOrigin =
+        target?.inspectedURL() ? Common.ParsedURL.ParsedURL.extractOrigin(target.inspectedURL()) : '';
+    if (!mainPageOrigin) {
+      return null;
+    }
+    if (this.settingsKey === 'cookies') {
+      return AiAssistance.StorageItem.CookieItem.createGenericContext(mainPageOrigin);
+    }
+    if (this.settingsKey === 'local-storage') {
+      return AiAssistance.StorageItem.DOMStorageItem.createGenericContext(mainPageOrigin, 'localStorage');
+    }
+    if (this.settingsKey === 'session-storage') {
+      return AiAssistance.StorageItem.DOMStorageItem.createGenericContext(mainPageOrigin, 'sessionStorage');
+    }
+    return null;
+  }
+
   override get itemURL(): Platform.DevToolsPath.UrlString {
     return 'category://' + this.categoryName as Platform.DevToolsPath.UrlString;
   }
@@ -134,6 +167,8 @@ export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeE
   override onselect(selectedByUser: boolean|undefined): boolean {
     super.onselect(selectedByUser);
     this.updateCategoryView();
+    const item = this.createGenericStorageAiContext();
+    UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, item);
     return false;
   }
 
@@ -165,6 +200,9 @@ export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeE
     if (this.expandedSetting.get()) {
       this.expand();
     }
+    if (this.createGenericStorageAiContext()) {
+      this.createAiButton(() => this.createGenericStorageAiContext());
+    }
   }
 
   override onexpand(): void {