chrome-devtools-frontend 1.0.1608453 → 1.0.1608868

package/front_end/models/ai_assistance/agents/AccessibilityAgent.ts

@@ -240,7 +240,7 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
       },
       displayInfoFromArgs: params => {
         return {
-          title: i18n.i18n.lockedString('Running accessibility audits…'),
+          title: i18n.i18n.lockedString('Running accessibility audits'),
           thought: params.explanation,
           action: 'runAccessibilityAudits()'
         };
@@ -282,7 +282,7 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
       },
       displayInfoFromArgs: params => {
         return {
-          title: i18n.i18n.lockedString(`Getting Lighthouse audits for ${params.categoryId}…`),
+          title: i18n.i18n.lockedString(`Getting Lighthouse audits for ${params.categoryId}`),
           action: `getLighthouseAudits('${params.categoryId}')`
         };
       },

package/front_end/models/ai_assistance/agents/BreakpointDebuggerAgent.ts

@@ -407,7 +407,7 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
       },
       displayInfoFromArgs: () => {
         return {
-          title: 'Waiting for user action...',
+          title: 'Waiting for user action',
           thought: 'I am waiting for you to trigger a breakpoint in the application.',
         };
       },

package/front_end/models/ai_assistance/agents/ContextSelectionAgent.ts

@@ -110,7 +110,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
       },
       displayInfoFromArgs: () => {
         return {
-          title: lockedString('Listing network requests…'),
+          title: lockedString('Listing network requests'),
           action: 'listNetworkRequest()',
         };
       },
@@ -175,7 +175,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
       },
       displayInfoFromArgs: args => {
         return {
-          title: lockedString('Getting network request…'),
+          title: lockedString('Getting network request'),
           action: `selectNetworkRequest(${args.id})`,
         };
       },
@@ -215,7 +215,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
       },
       displayInfoFromArgs: () => {
         return {
-          title: lockedString('Listing source requests…'),
+          title: lockedString('Listing source requests'),
           action: 'listSourceFiles()',
         };
       },
@@ -252,7 +252,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
       },
       displayInfoFromArgs: args => {
         return {
-          title: lockedString('Getting source file…'),
+          title: lockedString('Getting source file'),
           action: `selectSourceFile(${args.id})`,
         };
       },
@@ -285,7 +285,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
       },
       displayInfoFromArgs: () => {
         return {
-          title: 'Recording a performance trace…',
+          title: 'Recording a performance trace',
           action: 'performanceRecordAndReload()',
         };
       },
@@ -317,7 +317,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
       },
       displayInfoFromArgs: () => {
         return {
-          title: 'Auditing your page with Lighthouse…',
+          title: 'Auditing your page with Lighthouse',
           action: 'runLighthouseAudits()',
         };
       },

package/front_end/models/ai_assistance/agents/ConversationSummaryAgent.ts

@@ -11,6 +11,7 @@ const preamble = `### Role
 You are a Conversation Summarizer. Your task is to take a transcript of a conversation between a user and a DevTools AI agent and produce a succinct, actionable Markdown summary. This summary will be used to help apply fixes in an IDE, so it must capture all relevant technical details, findings, and proposed code changes without any conversational fluff.
 
 ### Critical Constraints
+- **Strict Groundedness:** Only summarize information explicitly present in the provided transcript. Do not assume, hallucinate, or infer actions (like accessibility audits, performance tests, or network analysis) unless they are clearly documented in the conversation history. If a topic was not discussed, do not include it in the summary.
 - **Persona:** Do not mention that you are an AI or refer to yourself in the third person.
 - **Domain Scope:** Do not provide answers on non-web-development topics (e.g., legal, financial, medical, or personal advice).
 - **Sensitive Topics:** If the conversation history touches on sensitive topics (religion, race, politics, sexuality, gender, etc.), respond only with: "My expertise is limited to summarizing DevTools AI conversations. I cannot provide information on that topic."
@@ -23,7 +24,7 @@ You are a Conversation Summarizer. Your task is to take a transcript of a conver
 
 ### Objectives
 1. **Identify Intent:** Define the core technical goal of the session.
-2. **Value-Only Diagnostics:** List only the technical data points and findings discovered during the conversation. Omit steps that didn't yield a result.
+2. **Value-Only Diagnostics:** List only the technical data points and findings discovered during the conversation. Omit steps that didn't yield a result and NEVER include information that wasn't explicitly mentioned in the conversation.
 3. **Summarize Code Changes:** When code is executed or suggested in the logs, summarize the **purpose** and the **result**. Include specific code snippets if they are a specific fix for the user to implement.
 4. **Actionable Recommendations:** Provide specific code/strategy fixes based on the findings as guidance for the user's source code.
 

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -41,11 +41,11 @@ const UIStringsNotTranslated = {
   /**
    * @description Shown when the agent is investigating network activity
    */
-  networkActivitySummary: 'Investigating network activity…',
+  networkActivitySummary: 'Investigating network activity',
   /**
    * @description Shown when the agent is investigating main thread activity
    */
-  mainThreadActivity: 'Investigating main thread activity…',
+  mainThreadActivity: 'Investigating main thread activity',
 } as const;
 const lockedString = i18n.i18n.lockedString;
 
@@ -805,7 +805,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       },
       displayInfoFromArgs: params => {
         return {
-          title: lockedString(`Investigating insight ${params.insightName}…`),
+          title: lockedString(`Investigating insight ${params.insightName}`),
           action: `getInsightDetails('${params.insightSetId}', '${params.insightName}')`
         };
       },
@@ -903,7 +903,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         required: ['eventKey']
       },
       displayInfoFromArgs: params => {
-        return {title: lockedString('Looking at trace event…'), action: `getEventByKey('${params.eventKey}')`};
+        return {title: lockedString('Looking at trace event'), action: `getEventByKey('${params.eventKey}')`};
       },
       handler: async params => {
         debugLog('Function call: getEventByKey', params);
@@ -1093,7 +1093,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         required: ['eventKey']
       },
       displayInfoFromArgs: args => {
-        return {title: lockedString('Looking at call tree…'), action: `getDetailedCallTree('${args.eventKey}')`};
+        return {title: lockedString('Looking at call tree'), action: `getDetailedCallTree('${args.eventKey}')`};
       },
       handler: async args => {
         debugLog('Function call: getDetailedCallTree');
@@ -1213,7 +1213,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       },
       displayInfoFromArgs: args => {
         return {
-          title: lockedString('Looking up function code…'),
+          title: lockedString('Looking up function code'),
           action: `getFunctionCode('${args.scriptUrl}', ${args.line}, ${args.column})`
         };
       },
@@ -1271,7 +1271,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         required: ['url']
       },
       displayInfoFromArgs: args => {
-        return {title: lockedString('Looking at resource content…'), action: `getResourceContent('${args.url}')`};
+        return {title: lockedString('Looking at resource content'), action: `getResourceContent('${args.url}')`};
       },
       handler: async args => {
         debugLog('Function call: getResourceContent');
@@ -1326,7 +1326,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           required: ['eventKey']
         },
         displayInfoFromArgs: params => {
-          return {title: lockedString('Selecting event…'), action: `selectEventByKey('${params.eventKey}')`};
+          return {title: lockedString('Selecting event'), action: `selectEventByKey('${params.eventKey}')`};
         },
         handler: async params => {
           debugLog('Function call: selectEventByKey', params);

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -8,6 +8,7 @@ import type * as Platform from '../../core/platform/platform.js';
 import {createIcon} from '../../ui/kit/kit.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
+import {CrashReportContextView} from './CrashReportContextView.js';
 import {ReportingApiView} from './ReportingApiView.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
 
@@ -16,19 +17,32 @@ const UIStrings = {
    * @description Label for an item in the Application Panel Sidebar of the Application panel
    */
   reportingApi: 'Reporting API',
+  /**
+   * @description Label for the Crash Report Context child item in the Reporting API section.
+   */
+  crashReportContext: 'Crash Report Context',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/ReportingApiTreeElement.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
   private view?: ReportingApiView;
+  #childrenInitialized = false;
 
   constructor(storagePanel: ResourcesPanel) {
-    super(storagePanel, i18nString(UIStrings.reportingApi), false, 'reporting-api');
+    super(storagePanel, i18nString(UIStrings.reportingApi), true, 'reporting-api');
     const icon = createIcon('document');
     this.setLeadingIcons([icon]);
   }
 
+  override onattach(): void {
+    super.onattach();
+    if (!this.#childrenInitialized) {
+      this.#childrenInitialized = true;
+      this.appendChild(new CrashReportContextTreeElement(this.resourcesPanel));
+    }
+  }
+
   override get itemURL(): Platform.DevToolsPath.UrlString {
     return 'reportingApi://' as Platform.DevToolsPath.UrlString;
   }
@@ -43,3 +57,28 @@ export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
     return false;
   }
 }
+
+export class CrashReportContextTreeElement extends ApplicationPanelTreeElement {
+  private view?: CrashReportContextView;
+
+  constructor(storagePanel: ResourcesPanel) {
+    super(storagePanel, i18nString(UIStrings.crashReportContext), false, 'crash-report-context');
+    const icon = createIcon('table');
+    this.setLeadingIcons([icon]);
+  }
+
+  override get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'reportingApi://crash-report-context' as Platform.DevToolsPath.UrlString;
+  }
+
+  override onselect(selectedByUser?: boolean): boolean {
+    super.onselect(selectedByUser);
+    if (!this.view) {
+      this.view = new CrashReportContextView();
+    }
+    this.view.requestUpdate();
+    this.showView(this.view);
+    Host.userMetrics.panelShown('crash-report-context');
+    return false;
+  }
+}

package/front_end/panels/application/WebMCPView.ts

@@ -19,6 +19,7 @@ import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import type * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import type * as NodeText from '../../ui/components/node_text/node_text.js';
+import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {
@@ -26,6 +27,7 @@ import {
   html,
   nothing,
   render,
+  type TemplateResult,
 } from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -299,6 +301,23 @@ function getIconGroupsFromStats(toolStats: ReturnType<typeof calculateToolStats>
   return groups;
 }
 
+export function parsePayload(payload?: unknown): {
+  valueObject: unknown,
+  valueString: string|undefined,
+} {
+  if (payload === undefined) {
+    return {valueObject: undefined, valueString: undefined};
+  }
+  if (typeof payload === 'string') {
+    try {
+      return {valueObject: JSON.parse(payload), valueString: undefined};
+    } catch {
+      return {valueObject: undefined, valueString: payload};
+    }
+  }
+  return {valueObject: payload, valueString: undefined};
+}
+
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const tools = input.tools;
   const stats = calculateToolStats(input.toolCalls);
@@ -393,11 +412,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                           <span>${statusString(call)}</span>
                         </div>
                       </td>
-                          ${!input.selectedCall ? html`
-                      <td>${call.input}</td>
-                          <td>${call.result?.output ? JSON.stringify(call.result.output)
+                      ${!input.selectedCall ? html`
+                        <td>${call.input}</td>
+                        <td>${call.result?.output ? JSON.stringify(call.result.output)
                                                     : call.result?.errorText ?? ''}</td>
-                          ` : nothing}
+                        ` : nothing}
                     </tr>
                   `)}
                   </table>`}>
@@ -418,6 +437,16 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   title=${i18nString(UIStrings.toolDetails)}
                   ${widget(ToolDetailsWidget, {tool: input.selectedCall?.tool})}>
                 </devtools-widget>
+                <devtools-widget
+                  id="inputs"
+                  title=${i18nString(UIStrings.input)}
+                  ${widget(PayloadWidget, parsePayload(input.selectedCall?.input))}>
+                </devtools-widget>
+                <devtools-widget
+                  id="outputs"
+                  title=${i18nString(UIStrings.output)}
+                  ${widget(PayloadWidget, parsePayload(input.selectedCall?.result?.output))}>
+                </devtools-widget>
               </devtools-tabbed-pane>
             </div>
           </devtools-split-view>
@@ -653,6 +682,95 @@ export class WebMCPView extends UI.Widget.VBox {
     this.#view(input, {}, this.contentElement);
   }
 }
+export interface PayloadViewInput {
+  valueObject?: unknown;
+  valueString?: string;
+}
+
+export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, target: HTMLElement): void => {
+  if (input.valueObject === undefined && input.valueString === undefined) {
+    render(nothing, target);
+    return;
+  }
+  const isParsable = input.valueObject !== undefined;
+
+  const createPayload = (parsedInput: unknown): TemplateResult => {
+    const object = new SDK.RemoteObject.LocalJSONObject(parsedInput);
+    const section =
+        new ObjectUI.ObjectPropertiesSection.RootElement(new ObjectUI.ObjectPropertiesSection.ObjectTree(object, {
+          readOnly: true,
+          propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+        }));
+    section.title = document.createTextNode(object.description);
+    section.listItemElement.classList.add('source-code', 'object-properties-section');
+    section.childrenListElement.classList.add('source-code', 'object-properties-section');
+    section.expand();
+    return html`<devtools-tree .template=${html`
+          <style>${ObjectUI.ObjectPropertiesSection.objectValueStyles}</style>
+          <style>${ObjectUI.ObjectPropertiesSection.objectPropertiesSectionStyles}</style>
+          <ul role="tree">
+            <devtools-tree-wrapper .treeElement=${section}></devtools-tree-wrapper>
+          </ul>
+        `}></devtools-tree>`;
+  };
+
+  const createSourceText = (text: string): TemplateResult => html`<div class="payload-value source-code">${text}</div>`;
+
+  render(
+      html`
+    <style>${webMCPViewStyles}</style>
+    <div class="call-payload-view">
+      <div class="call-payload-content">
+            ${
+          isParsable ? createPayload(input.valueObject) :
+                       (input.valueString !== undefined ? createSourceText(input.valueString) : nothing)}
+      </div>
+    </div>
+  `,
+      target);
+};
+
+export class PayloadWidget extends UI.Widget.Widget {
+  #valueObject?: unknown;
+  #valueString?: string;
+  #view: typeof PAYLOAD_DEFAULT_VIEW;
+
+  constructor(element?: HTMLElement, view = PAYLOAD_DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  set valueObject(valueObject: unknown) {
+    this.#valueObject = valueObject;
+    this.requestUpdate();
+  }
+
+  get valueObject(): unknown {
+    return this.#valueObject;
+  }
+
+  set valueString(valueString: string|undefined) {
+    this.#valueString = valueString;
+    this.requestUpdate();
+  }
+
+  get valueString(): string|undefined {
+    return this.#valueString;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const input: PayloadViewInput = {
+      valueObject: this.#valueObject,
+      valueString: this.#valueString,
+    };
+    this.#view(input, {}, this.contentElement);
+  }
+}
 
 export interface ToolDetailsViewInput {
   tool: WebMCP.WebMCPModel.Tool|null|undefined;

package/front_end/panels/application/application.ts

@@ -27,6 +27,7 @@ import * as OpenedWindowDetailsView from './OpenedWindowDetailsView.js';
 import * as OriginTrialTreeView from './OriginTrialTreeView.js';
 import * as PreloadingView from './preloading/PreloadingView.js';
 import * as PreloadingTreeElement from './PreloadingTreeElement.js';
+import * as ReportingApiTreeElement from './ReportingApiTreeElement.js';
 import * as ReportingApiView from './ReportingApiView.js';
 import * as ResourcesPanel from './ResourcesPanel.js';
 import * as ServiceWorkerCacheViews from './ServiceWorkerCacheViews.js';
@@ -70,6 +71,7 @@ export {
   OriginTrialTreeView,
   PreloadingTreeElement,
   PreloadingView,
+  ReportingApiTreeElement,
   ReportingApiView,
   ResourcesPanel,
   ServiceWorkerCacheViews,

package/front_end/panels/application/webMCPView.css

@@ -198,4 +198,16 @@
         flex: auto;
         border-bottom: 1px solid var(--sys-color-divider);
     }
+
+    .call-payload-view {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .call-payload-content {
+        padding: var(--sys-size-5);
+        flex: auto;
+        overflow: auto;
+    }
 }

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -611,7 +611,8 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       jslogContext: options.jslogContext || 'url',
       lineNumber,
       columnNumber,
-      userMetric: options?.userMetric
+      userMetric: options?.userMetric,
+      onRef: options.onRef,
     };
     return Linkifier.renderLink(linkText, className, linkOptions);
   }

package/front_end/ui/legacy/components/utils/imagePreview.css

@@ -12,7 +12,7 @@
 
 .image-preview-container img {
   margin: 6px 0;
-  max-width: 100px;
+  width: auto;
   max-height: 100px;
   background-image: var(--image-file-checker);
   user-select: text;

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1608453"
+  "version": "1.0.1608868"
 }