chrome-devtools-frontend 1.0.1592129 → 1.0.1593518

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

@@ -10,7 +10,10 @@ 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 SDK from '../../../core/sdk/sdk.js';
+import type {AiWidget, ComputedStyleAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
+import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
@@ -20,9 +23,10 @@ import * as UIHelpers from '../../../ui/helpers/helpers.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+import * as Elements from '../../elements/elements.js';
 
 import chatMessageStyles from './chatMessage.css.js';
-import {WalkthroughView} from './WalkthroughView.js';
+import {walkthroughTitle, WalkthroughView} from './WalkthroughView.js';
 
 const {html, Directives: {ref, ifDefined}} = Lit;
 const lockedString = i18n.i18n.lockedString;
@@ -96,18 +100,14 @@ const UIStringsNotTranslate = {
    * @description Displayed when the user stop the response
    */
   stoppedResponse: 'You stopped this response',
-  /**
-   * @description Prompt for user to confirm code execution that may affect the page.
-   */
-  sideEffectConfirmationDescription: 'This code may modify page content. Continue?',
   /**
    * @description Button text that confirm code execution that may affect the page.
    */
-  positiveSideEffectConfirmation: 'Continue',
+  confirmActionRequestApproval: 'Continue',
   /**
    * @description Button text that cancels code execution that may affect the page.
    */
-  negativeSideEffectConfirmation: 'Cancel',
+  declineActionRequestApproval: 'Cancel',
   /**
    * @description The generic name of the AI agent (do not translate)
    */
@@ -168,6 +168,11 @@ const UIStringsNotTranslate = {
    * @description Title for the button that shows the thinking process (walkthrough).
    */
   showThinking: 'Show thinking',
+
+  /**
+   * @description Title for the button that takes the user into other DevTools panels to reveal items the AI references.
+   */
+  reveal: 'Reveal'
 } as const;
 
 export interface Step {
@@ -176,12 +181,14 @@ export interface Step {
   title?: string;
   code?: string;
   output?: string;
+  widgets?: AiWidget[];
   canceled?: boolean;
-  sideEffect?: ConfirmSideEffectDialog;
+  requestApproval?: ConfirmSideEffectDialog;
   contextDetails?: [AiAssistanceModel.AiAgent.ContextDetail, ...AiAssistanceModel.AiAgent.ContextDetail[]];
 }
 
 export interface ConfirmSideEffectDialog {
+  description: string|null;
   onAnswer: (result: boolean) => void;
 }
 
@@ -386,13 +393,14 @@ function renderTextAsMarkdown(text: string, markdownRenderer: MarkdownLitRendere
   // clang-format on
 }
 
-function titleForStep(step: Step): string {
+export function titleForStep(step: Step): string {
   return step.title ?? `${lockedString(UIStringsNotTranslate.investigating)}…`;
 }
 
 function renderTitle(step: Step): Lit.LitTemplate {
-  const paused =
-      step.sideEffect ? html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` : Lit.nothing;
+  const paused = step.requestApproval ?
+      html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` :
+      Lit.nothing;
 
   return html`<span class="title">${paused}${titleForStep(step)}</span>`;
 }
@@ -444,7 +452,7 @@ function renderStepDetails({
   markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
-  const sideEffects = isLast && step.sideEffect ? renderSideEffectConfirmationUi(step) : Lit.nothing;
+  const sideEffects = isLast && step.requestApproval ? renderSideEffectConfirmationUi(step) : Lit.nothing;
   const thought = step.thought ? html`<p>${renderTextAsMarkdown(step.thought, markdownRenderer)}</p>` : Lit.nothing;
 
   // clang-format off
@@ -481,7 +489,10 @@ function renderWalkthroughSidebarButton(
   if (walkthrough.isInlined) {
     return Lit.nothing;
   }
-  const title = input.isLoading ? titleForStep(lastStep) : lockedString(UIStringsNotTranslate.showThinking);
+  const title = walkthroughTitle({
+    isLoading: input.isLoading,
+    lastStep,
+  });
 
   // clang-format off
   return html`
@@ -520,7 +531,7 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
     // No steps = no walkthrough UI in the chat view.
     return Lit.nothing;
   }
-  const sideEffectSteps = steps.filter(s => s.sideEffect);
+  const sideEffectSteps = steps.filter(s => s.requestApproval);
   // If the walkthrough is in the sidebar, we render a button into the
   // ChatView to open it.
   const openWalkThroughSidebarButton =
@@ -552,7 +563,7 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
         markdownRenderer: input.markdownRenderer,
         isInlined: true,
         isExpanded: input.isLastMessage &&
-            (input.walkthrough.isExpanded || steps.some(step => Boolean(step.sideEffect))),
+            (input.walkthrough.isExpanded || steps.some(step => Boolean(step.requestApproval))),
         onToggle: input.walkthrough.onToggle,
       })}></devtools-widget>
     </div>
@@ -571,14 +582,14 @@ function renderStepBadge({step, isLoading, isLast}: {
   isLoading: boolean,
   isLast: boolean,
 }): Lit.LitTemplate {
-  if (isLoading && isLast && !step.sideEffect) {
+  if (isLoading && isLast && !step.requestApproval) {
     return html`<devtools-spinner></devtools-spinner>`;
   }
 
   let iconName = 'checkmark';
   let ariaLabel: string|undefined = lockedString(UIStringsNotTranslate.completed);
   let role: 'button'|undefined = 'button';
-  if (isLast && step.sideEffect) {
+  if (isLast && step.requestApproval) {
     role = undefined;
     ariaLabel = undefined;
     iconName = 'pause-circle';
@@ -601,17 +612,18 @@ export function renderStep({step, isLoading, markdownRenderer, isLast}: {
   markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
+  const shouldRenderWidgets = Boolean(step.widgets?.length && Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled);
   const stepClasses = Lit.Directives.classMap({
     step: true,
-    empty: !step.thought && !step.code && !step.contextDetails && !step.sideEffect,
-    paused: Boolean(step.sideEffect),
+    empty: !step.thought && !step.code && !step.contextDetails && !step.requestApproval,
+    paused: Boolean(step.requestApproval),
     canceled: Boolean(step.canceled),
   });
   // clang-format off
   return html`
     <details class=${stepClasses}
       jslog=${VisualLogging.section('step')}
-      .open=${Boolean(step.sideEffect)}>
+      .open=${Boolean(step.requestApproval)}>
       <summary>
         <div class="summary">
           ${renderStepBadge({ step, isLoading, isLast })}
@@ -623,12 +635,114 @@ export function renderStep({step, isLoading, markdownRenderer, isLast}: {
         </div>
       </summary>
       ${renderStepDetails({step, markdownRenderer, isLast})}
-    </details>`;
+    </details>
+    ${shouldRenderWidgets ? html`
+      <div class="step-widgets-wrapper">
+        ${Lit.Directives.until(renderStepWidgets(step))}
+      </div>` : Lit.nothing
+     }`;
+  // clang-format on
+}
+
+interface WidgetMakerResponse {
+  renderedWidget: Lit.LitTemplate;
+  revealable: unknown;
+}
+
+async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promise<WidgetMakerResponse|null> {
+  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+  if (!target) {
+    return null;
+  }
+  const node = new SDK.DOMModel.DeferredDOMNode(
+      target,
+      widgetData.data.backendNodeId,
+  );
+  const resolved = await node.resolvePromise();
+  if (!resolved) {
+    return null;
+  }
+  const model = new ComputedStyle.ComputedStyleModel.ComputedStyleModel(resolved);
+  const styles = new ComputedStyle.ComputedStyleModel.ComputedStyle(resolved, widgetData.data.computedStyles);
+
+  const widgetConfig = UI.Widget.widgetConfig(Elements.ComputedStyleWidget.ComputedStyleWidget, {
+    nodeStyle: styles,
+    matchedStyles: widgetData.data.matchedCascade,
+    // This disables showing the nested traces and detailed information in the widget.
+    propertyTraces: null,
+    computedStyleModel: model,
+    allowUserControl: false,
+    filterText: new RegExp(widgetData.data.properties.join('|'), 'i')
+  });
+
+  // clang-format off
+    const widget = html`<devtools-widget class="computed-styles-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
   // clang-format on
+
+  return {renderedWidget: widget, revealable: new Elements.ElementsPanel.NodeComputedStyles(resolved)};
+}
+
+function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTemplate {
+  if (response === null) {
+    return Lit.nothing;
+  }
+
+  function onReveal(): void {
+    if (response === null) {
+      return;
+    }
+    void Common.Revealer.reveal(response?.revealable);
+  }
+
+  // clang-format off
+  return html`
+    <div class="widget-content-container">
+      ${response.renderedWidget}
+    </div>
+    <div class="widget-reveal-container">
+      <devtools-button class="widget-reveal"
+        .iconName=${'tab-move'}
+        .variant=${Buttons.Button.Variant.TEXT}
+        @click=${onReveal}
+      >${lockedString(UIStringsNotTranslate.reveal)}</devtools-button>
+    </div>
+    `;
+  // clang-format on
+}
+
+/**
+ * Renders AI-defined UI widgets within a step.
+ * When a ModelChatMessage contains a WidgetPart, the ChatMessage component
+ * iterates through the `step.widgets` array. For each widget, it determines
+ * the appropriate rendering logic based on the `widgetData.name`.
+ *
+ * Currently, only 'COMPUTED_STYLES' widgets are supported. For these, the
+ * `makeComputedStyleWidget` function is called to construct the necessary
+ * data and configuration for the `Elements.ComputedStyleWidget.ComputedStyleWidget`
+ * component. The widget is then rendered using the `<devtools-widget>`
+ * custom element, which dynamically instantiates and displays the specified
+ * UI.Widget subclass with the provided configuration.
+ *
+ * This allows for a flexible and extensible system where new widget types
+ * can be added to the AI responses and rendered in DevTools by adding
+ * corresponding `make...Widget` functions and handling them here.
+ */
+async function renderStepWidgets(step: Step): Promise<Lit.LitTemplate> {
+  if (!step.widgets || step.widgets.length === 0) {
+    return Lit.nothing;
+  }
+  const ui = await Promise.all(step.widgets.map(async widgetData => {
+    if (widgetData.name === 'COMPUTED_STYLES') {
+      const response = await makeComputedStyleWidget(widgetData);
+      return renderWidgetResponse(response);
+    }
+    return Lit.nothing;
+  }));
+  return html`${ui}`;
 }
 
 function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
-  if (!step.sideEffect) {
+  if (!step.requestApproval) {
     return Lit.nothing;
   }
 
@@ -637,7 +751,7 @@ function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
     class="side-effect-confirmation"
     jslog=${VisualLogging.section('side-effect-confirmation')}
   >
-    <p>${lockedString(UIStringsNotTranslate.sideEffectConfirmationDescription)}</p>
+    ${step.requestApproval.description ? html`<p>${step.requestApproval.description}</p>` : Lit.nothing}
     <div class="side-effect-buttons-container">
       <devtools-button
         .data=${
@@ -646,9 +760,9 @@ function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
             jslogContext: 'decline-execute-code',
           } as Buttons.Button.ButtonData
         }
-        @click=${() => step.sideEffect?.onAnswer(false)}
+        @click=${() => step.requestApproval?.onAnswer(false)}
       >${lockedString(
-        UIStringsNotTranslate.negativeSideEffectConfirmation,
+        UIStringsNotTranslate.declineActionRequestApproval,
       )}</devtools-button>
       <devtools-button
         .data=${
@@ -658,9 +772,9 @@ function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
             iconName: 'play',
           } as Buttons.Button.ButtonData
         }
-        @click=${() => step.sideEffect?.onAnswer(true)}
+        @click=${() => step.requestApproval?.onAnswer(true)}
       >${
-          lockedString(UIStringsNotTranslate.positiveSideEffectConfirmation)
+          lockedString(UIStringsNotTranslate.confirmActionRequestApproval)
       }</devtools-button>
     </div>
   </div>`;

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

@@ -20,7 +20,11 @@ import chatViewStyles from './chatView.css.js';
 
 export {ChatInput, type ImageInputData} from './ChatInput.js';
 
-const {ref, repeat, classMap} = Directives;
+const {
+  ref,
+  repeat,
+  classMap,
+} = Directives;
 
 /*
 * Strings that don't need to be translated at this time.

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

@@ -2,9 +2,15 @@
 // 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 * as Platform from '../../../core/platform/platform.js';
+import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
+import * as Logs from '../../../models/logs/logs.js';
 import type * as Marked from '../../../third_party/marked/marked.js';
 import * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
-import type * as Lit from '../../../ui/lit/lit.js';
+import * as Lit from '../../../ui/lit/lit.js';
+
+const {html} = Lit;
 
 /**
  * The model returns multiline code blocks in an erroneous way with the language being in new line.
@@ -19,7 +25,43 @@ import type * as Lit from '../../../ui/lit/lit.js';
  * ```
  **/
 export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.MarkdownInsightRenderer {
+  #revealableLink(revealable: unknown, label: string): Lit.LitTemplate {
+    return html`<devtools-link @click=${(e: Event) => {
+      e.preventDefault();
+      e.stopPropagation();
+      void Common.Revealer.reveal(revealable);
+    }}>${Platform.StringUtilities.trimEndWithMaxLength(label, 100)}</devtools-link>`;
+  }
+
+  #renderLink(href: string): Lit.LitTemplate|null {
+    if (href.startsWith('#req-')) {
+      const request =
+          Logs.NetworkLog.NetworkLog.instance().requests().find(req => req.requestId() === href.substring(5));
+
+      if (request) {
+        return this.#revealableLink(request, request.url());
+      }
+
+    } else if (href.startsWith('#file-')) {
+      const file = AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.getUISourceCodes().find(
+          file => AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.uiSourceCodeId.get(file) ===
+              Number(href.substring(6)));
+
+      if (file) {
+        return this.#revealableLink(file, file.name());
+      }
+    }
+    return null;
+  }
+
   override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
+    if (token.type === 'link') {
+      const link = this.#renderLink(token.href);
+      if (link) {
+        return link;
+      }
+    }
+
     if (token.type === 'code') {
       const lines = (token.text).split('\n');
       if (lines[0]?.trim() === 'css') {
@@ -28,6 +70,18 @@ export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.Mar
       }
     }
 
+    if (token.type === 'codespan') {
+      // LLM likes outputting the link inside a codespan block.
+      // Remove the codespan and render the link directly
+      const matches = token.text.match(/^\[.*\]\((.+)\)$/);
+      if (matches?.[1]) {
+        const link = this.#renderLink(matches[1]);
+        if (link) {
+          return link;
+        }
+      }
+    }
+
     return super.templateForToken(token);
   }
 }

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

@@ -10,9 +10,11 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
 import chatMessageStyles from './chatMessage.css.js';
-import {type ModelChatMessage, renderStep} from './ChatMessage.js';
+import {type ModelChatMessage, renderStep, type Step, titleForStep} from './ChatMessage.js';
 import walkthroughViewStyles from './walkthroughView.css.js';
 
+const lockedString = i18n.i18n.lockedString;
+
 const {html, render} = Lit;
 
 const UIStrings = {
@@ -25,9 +27,9 @@ const UIStrings = {
    */
   title: 'Investigation steps',
   /**
-   * @description Title for the inline walkthrough view.
+   * @description Title for the button that shows the thinking process (walkthrough).
    */
-  inlineTitle: 'Show thinking',
+  showThinking: 'Show thinking',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/WalkthroughView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -41,8 +43,17 @@ export interface ViewInput {
   onToggle: (isOpen: boolean) => void;
 }
 
-function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate): Lit.LitTemplate {
-  if (!input.isInlined) {
+export function walkthroughTitle(input: {
+  isLoading: boolean,
+  lastStep: Step,
+}): string {
+  const title = input.isLoading ? titleForStep(input.lastStep) : lockedString(UIStrings.showThinking);
+  return title;
+}
+
+function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate, steps: Step[]): Lit.LitTemplate {
+  const lastStep = steps.at(-1);
+  if (!input.isInlined || !lastStep) {
     return Lit.nothing;
   }
 
@@ -54,7 +65,8 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate)
   return html`
     <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
       <summary>
-        ${i18nString(UIStrings.inlineTitle)}
+        ${input.isLoading ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
+        ${walkthroughTitle({isLoading: input.isLoading, lastStep,})}
         <devtools-icon name="chevron-down"></devtools-icon>
       </summary>
       ${stepsOutput}
@@ -123,7 +135,7 @@ export const DEFAULT_VIEW = (
       ${chatMessageStyles}
       ${walkthroughViewStyles}
     </style>
-    ${input.isInlined ? renderInlineWalkthrough(input, stepsOutput)
+    ${input.isInlined ? renderInlineWalkthrough(input, stepsOutput, steps)
                      : renderSidebarWalkthrough(input, stepsOutput, steps.length)
     }`, target);
   // clang-format on

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

@@ -333,6 +333,7 @@
     }
   }
 
+
   .error-step {
     color: var(--sys-color-error);
   }
@@ -354,4 +355,33 @@
     gap: var(--sys-size-4);
     align-items: center;
   }
+
+
+  .computed-styles-widget {
+    display: block;
+    width: fit-content;
+  }
+
+  .step-widgets-wrapper {
+    width: fit-content;
+  }
+
+  .widget-reveal-container {
+    width: 100%;
+    background: var(--sys-color-surface5);
+    border-bottom-right-radius: var(--sys-shape-corner-medium);
+    border-bottom-left-radius: var(--sys-shape-corner-medium);
+    padding: 0 var(--sys-size-4) var(--sys-size-4) 0;
+  }
+
+  .widget-content-container {
+    padding: var(--sys-size-4);
+    border-top-left-radius: var(--sys-shape-corner-medium);
+    border-top-right-radius: var(--sys-shape-corner-medium);
+    width: 100%;
+    overflow-x: auto;
+    background-color: var(--sys-color-surface3);
+
+    --override-computed-style-property-white-space: normal;
+  }
 }

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

@@ -78,26 +78,31 @@
     border-radius: var(--sys-size-5);
     overflow: hidden;
     background-color: var(--sys-color-surface1);
+    width: fit-content;
+
+    &[open] {
+      width: auto;
+    }
   }
 
-  .walkthrough-inline summary {
+  .walkthrough-inline > summary {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: var(--sys-size-5) var(--sys-size-6);
+    padding: var(--sys-size-4) var(--sys-size-6);
     cursor: pointer;
     background-color: transparent;
-    font-weight: 500;
-    font-size: 11px;
+    font: var(--sys-typescale-body4-regular);
     user-select: none;
     list-style: none; /* Hide default triangle */
+    justify-content: flex-start;
+    gap: var(--sys-size-4);
   }
 
-  .walkthrough-inline summary::-webkit-details-marker {
+  .walkthrough-inline > summary::-webkit-details-marker {
     display: none;
   }
 
-  .walkthrough-inline summary:hover {
+  .walkthrough-inline > summary:hover {
     background-color: var(--sys-color-state-hover-on-subtle);
   }
 

package/front_end/panels/animation/AnimationGroupPreviewUI.ts

@@ -98,7 +98,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
   render(html`
     <div class="animation-group-preview-ui">
       <button
-        jslog=${VisualLogging.item(`animations.buffer-preview${input.isScrollDrivenAnimationGroup ? '-sda' : ''}`).track({click: true})}
+        jslog=${VisualLogging.item(`animations.buffer-preview${input.isScrollDrivenAnimationGroup ? '-sda' : ''}`).track({click: true, resize: true})}
         class=${classes}
         role="option"
         aria-label=${input.label}