chrome-devtools-frontend 1.0.1602543 → 1.0.1603822

package/.agents/skills/version-control/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: devtools-version-control
-description: Use when managing branches, creating CLs, or handling stacked changes in the DevTools Gerrit-based workflow.
+description: Use when managing branches, creating and uploading CLs, or handling stacked changes in the DevTools Gerrit-based workflow.
 ---
 
 # DevTools Version Control
@@ -27,7 +27,6 @@ To update your CL after feedback or more work:
 1. Make more changes.
 2. Stage them: `git add <files>`.
 3. Amend the commit: `git commit --amend`.
-4. Upload: `git cl upload`.
 
 ### Stacked CLs
 If CL B depends on CL A:
@@ -54,6 +53,22 @@ To update all your branches with the latest changes from `main` and their respec
 git rebase-update
 ```
 
+### Initial upload
+When a CL is ready, upload it with:
+```bash
+git cl upload -d --commit-description="<description>"
+```
+* Use the same writing style as the current committer
+* Keep line length below 72
+* Add a "Bug: <issue number>" or "Bug: None" trailer on a separate line.
+* Amend formatter/linter changes and fix linter issues.
+
+### Subsequent upload
+To upload an updated CL:
+```bash
+git cl upload -d -t "<one sentence patch set description>"
+```
+
 ## Quick Reference
 
 | Action | Command |

package/front_end/core/sdk/OverlayModel.ts

@@ -97,10 +97,10 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
     target.registerOverlayDispatcher(this);
     this.overlayAgent = target.overlayAgent();
 
+    const settings = this.target().targetManager().settings;
     this.#debuggerModel = target.model(DebuggerModel);
     if (this.#debuggerModel) {
-      Common.Settings.Settings.instance()
-          .moduleSetting('disable-paused-state-overlay')
+      settings.moduleSetting('disable-paused-state-overlay')
           .addChangeListener(this.updatePausedInDebuggerMessage, this);
       this.#debuggerModel.addEventListener(
           DebuggerModelEvents.DebuggerPaused, this.updatePausedInDebuggerMessage, this);
@@ -114,21 +114,19 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
     this.#defaultHighlighter = new DefaultHighlighter(this);
     this.#highlighter = this.#defaultHighlighter;
 
-    this.#showPaintRectsSetting = Common.Settings.Settings.instance().moduleSetting<boolean>('show-paint-rects');
-    this.#showLayoutShiftRegionsSetting =
-        Common.Settings.Settings.instance().moduleSetting<boolean>('show-layout-shift-regions');
-    this.#showAdHighlightsSetting = Common.Settings.Settings.instance().moduleSetting<boolean>('show-ad-highlights');
-    this.#showDebugBordersSetting = Common.Settings.Settings.instance().moduleSetting<boolean>('show-debug-borders');
-    this.#showFPSCounterSetting = Common.Settings.Settings.instance().moduleSetting<boolean>('show-fps-counter');
-    this.#showScrollBottleneckRectsSetting =
-        Common.Settings.Settings.instance().moduleSetting<boolean>('show-scroll-bottleneck-rects');
+    this.#showPaintRectsSetting = settings.moduleSetting<boolean>('show-paint-rects');
+    this.#showLayoutShiftRegionsSetting = settings.moduleSetting<boolean>('show-layout-shift-regions');
+    this.#showAdHighlightsSetting = settings.moduleSetting<boolean>('show-ad-highlights');
+    this.#showDebugBordersSetting = settings.moduleSetting<boolean>('show-debug-borders');
+    this.#showFPSCounterSetting = settings.moduleSetting<boolean>('show-fps-counter');
+    this.#showScrollBottleneckRectsSetting = settings.moduleSetting<boolean>('show-scroll-bottleneck-rects');
 
     if (!target.suspended()) {
       void this.overlayAgent.invoke_enable();
       void this.wireAgentToSettings();
     }
 
-    this.#persistentHighlighter = new OverlayPersistentHighlighter(this, {
+    this.#persistentHighlighter = new OverlayPersistentHighlighter(this, settings, {
       onGridOverlayStateChanged: ({nodeId, enabled}) => {
         this.#domModel.nodeForId(nodeId)?.dispatchEventToListeners(DOMNodeEvents.GRID_OVERLAY_STATE_CHANGED, {enabled});
         this.dispatchEventToListeners(Events.PERSISTENT_GRID_OVERLAY_STATE_CHANGED, {nodeId, enabled});
@@ -291,8 +289,9 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
     if (this.target().suspended()) {
       return;
     }
+    const settings = this.target().targetManager().settings;
     const message = this.#debuggerModel && this.#debuggerModel.isPaused() &&
-            !Common.Settings.Settings.instance().moduleSetting('disable-paused-state-overlay').get() ?
+            !settings.moduleSetting('disable-paused-state-overlay').get() ?
         i18nString(UIStrings.pausedInDebugger) :
         undefined;
     void this.overlayAgent.invoke_setPausedInDebuggerMessage({message});
@@ -524,7 +523,8 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
 
   private buildHighlightConfig(mode: string|undefined = 'all', showDetailedToolip: boolean|undefined = false):
       Protocol.Overlay.HighlightConfig {
-    const showRulers = Common.Settings.Settings.instance().moduleSetting('show-metrics-rulers').get();
+    const settings = this.target().targetManager().settings;
+    const showRulers = settings.moduleSetting('show-metrics-rulers').get();
     const highlightConfig: Protocol.Overlay.HighlightConfig = {
       showInfo: mode === 'all' || mode === 'container-outline',
       showRulers,

package/front_end/core/sdk/OverlayPersistentHighlighter.ts

@@ -33,9 +33,7 @@ export interface PersistentHighlighterCallbacks {
 export class OverlayPersistentHighlighter {
   readonly #model: OverlayModel;
   readonly #colors = new Map<Protocol.DOM.NodeId, Common.Color.Color>();
-  readonly #persistentHighlightSetting =
-      Common.Settings.Settings.instance().createLocalSetting<PersistentHighlightSettingItem[]>(
-          'persistent-highlight-setting', []);
+  readonly #persistentHighlightSetting: Common.Settings.Setting<PersistentHighlightSettingItem[]>;
   #gridHighlights = new Map<Protocol.DOM.NodeId, Protocol.Overlay.GridHighlightConfig>();
   #scrollSnapHighlights = new Map<Protocol.DOM.NodeId, Protocol.Overlay.ScrollSnapContainerHighlightConfig>();
   #flexHighlights = new Map<Protocol.DOM.NodeId, Protocol.Overlay.FlexContainerHighlightConfig>();
@@ -47,18 +45,23 @@ export class OverlayPersistentHighlighter {
   /**
    * @see `front_end/core/sdk/sdk-meta.ts`
    */
-  readonly #showGridLineLabelsSetting =
-      Common.Settings.Settings.instance().moduleSetting<string>('show-grid-line-labels');
-  readonly #extendGridLinesSetting = Common.Settings.Settings.instance().moduleSetting<boolean>('extend-grid-lines');
-  readonly #showGridAreasSetting = Common.Settings.Settings.instance().moduleSetting<boolean>('show-grid-areas');
-  readonly #showGridTrackSizesSetting =
-      Common.Settings.Settings.instance().moduleSetting<boolean>('show-grid-track-sizes');
+  readonly #showGridLineLabelsSetting: Common.Settings.Setting<string>;
+  readonly #extendGridLinesSetting: Common.Settings.Setting<boolean>;
+  readonly #showGridAreasSetting: Common.Settings.Setting<boolean>;
+  readonly #showGridTrackSizesSetting: Common.Settings.Setting<boolean>;
 
   readonly #callbacks: PersistentHighlighterCallbacks;
-  constructor(model: OverlayModel, callbacks: PersistentHighlighterCallbacks) {
+  constructor(model: OverlayModel, settings: Common.Settings.Settings, callbacks: PersistentHighlighterCallbacks) {
     this.#model = model;
     this.#callbacks = callbacks;
 
+    this.#persistentHighlightSetting =
+        settings.createLocalSetting<PersistentHighlightSettingItem[]>('persistent-highlight-setting', []);
+    this.#showGridLineLabelsSetting = settings.moduleSetting<string>('show-grid-line-labels');
+    this.#extendGridLinesSetting = settings.moduleSetting<boolean>('extend-grid-lines');
+    this.#showGridAreasSetting = settings.moduleSetting<boolean>('show-grid-areas');
+    this.#showGridTrackSizesSetting = settings.moduleSetting<boolean>('show-grid-track-sizes');
+
     this.#showGridLineLabelsSetting.addChangeListener(this.onSettingChange, this);
     this.#extendGridLinesSetting.addChangeListener(this.onSettingChange, this);
     this.#showGridAreasSetting.addChangeListener(this.onSettingChange, this);

package/front_end/core/sdk/RuntimeModel.ts

@@ -32,13 +32,12 @@ export class RuntimeModel extends SDKModel<EventTypes> {
     this.target().registerRuntimeDispatcher(new RuntimeDispatcher(this));
     void this.agent.invoke_enable();
 
-    if (Common.Settings.Settings.instance().moduleSetting('custom-formatters').get()) {
+    const settings = this.target().targetManager().context.get(Common.Settings.Settings);
+    if (settings.moduleSetting('custom-formatters').get()) {
       void this.agent.invoke_setCustomObjectFormatterEnabled({enabled: true});
     }
 
-    Common.Settings.Settings.instance()
-        .moduleSetting('custom-formatters')
-        .addChangeListener(this.customFormattersStateChanged.bind(this));
+    settings.moduleSetting('custom-formatters').addChangeListener(this.customFormattersStateChanged.bind(this));
   }
 
   static isSideEffectFailure(response: Protocol.Runtime.EvaluateResponse|EvaluationResult): boolean {
@@ -301,7 +300,8 @@ export class RuntimeModel extends SDKModel<EventTypes> {
       return;
     }
 
-    const indent = Common.Settings.Settings.instance().moduleSetting('text-editor-indent').get();
+    const indent =
+        this.target().targetManager().context.get(Common.Settings.Settings).moduleSetting('text-editor-indent').get();
     void object
         .callFunctionJSON(toStringForClipboard, [{
                             value: {

package/front_end/core/sdk/ServiceWorkerManager.ts

@@ -77,8 +77,10 @@ export class ServiceWorkerManager extends SDKModel<EventTypes> {
     target.registerServiceWorkerDispatcher(new ServiceWorkerDispatcher(this));
     this.#agent = target.serviceWorkerAgent();
     void this.enable();
-    this.#forceUpdateSetting =
-        Common.Settings.Settings.instance().createSetting('service-worker-update-on-reload', false);
+    this.#forceUpdateSetting = this.target()
+                                   .targetManager()
+                                   .context.get(Common.Settings.Settings)
+                                   .createSetting('service-worker-update-on-reload', false);
     if (this.#forceUpdateSetting.get()) {
       this.forceUpdateSettingChanged();
     }

package/front_end/core/sdk/TargetManager.ts

@@ -26,6 +26,11 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   readonly context: Root.DevToolsContext.DevToolsContext;
   #targets: Set<Target>;
   readonly #observers: Set<Observer>;
+
+  get settings(): Common.Settings.Settings {
+    return this.context.get(Common.Settings.Settings);
+  }
+
   /* eslint-disable @typescript-eslint/no-explicit-any */
   #modelListeners: Platform.MapUtilities.Multimap<string|symbol|number, {
     modelClass: SDKModelConstructor,

package/front_end/core/sdk/WebMCPModel.ts

@@ -93,6 +93,12 @@ class WebMCPDispatcher implements ProtocolProxyApi.WebMCPDispatcher {
   toolsRemoved(params: Protocol.WebMCP.ToolsRemovedEvent): void {
     this.#model.onToolsRemoved(params.tools);
   }
+
+  toolInvoked(): void {
+  }
+
+  toolResponded(): void {
+  }
 }
 
 SDKModel.register(WebMCPModel, {capabilities: Capability.WEB_MCP, autostart: true});

package/front_end/generated/InspectorBackendCommands.ts

@@ -1517,8 +1517,11 @@ inspectorBackend.registerType("WebAuthn.VirtualAuthenticatorOptions", [{"name":
 inspectorBackend.registerType("WebAuthn.Credential", [{"name": "credentialId", "type": "string", "optional": false, "description": "", "typeRef": null}, {"name": "isResidentCredential", "type": "boolean", "optional": false, "description": "", "typeRef": null}, {"name": "rpId", "type": "string", "optional": true, "description": "Relying Party ID the credential is scoped to. Must be set when adding a credential.", "typeRef": null}, {"name": "privateKey", "type": "string", "optional": false, "description": "The ECDSA P-256 private key in PKCS#8 format.", "typeRef": null}, {"name": "userHandle", "type": "string", "optional": true, "description": "An opaque byte sequence with a maximum size of 64 bytes mapping the credential to a specific user.", "typeRef": null}, {"name": "signCount", "type": "number", "optional": false, "description": "Signature counter. This is incremented by one for each successful assertion. See https://w3c.github.io/webauthn/#signature-counter", "typeRef": null}, {"name": "largeBlob", "type": "string", "optional": true, "description": "The large blob associated with the credential. See https://w3c.github.io/webauthn/#sctn-large-blob-extension", "typeRef": null}, {"name": "backupEligibility", "type": "boolean", "optional": true, "description": "Assertions returned by this credential will have the backup eligibility (BE) flag set to this value. Defaults to the authenticator's defaultBackupEligibility value.", "typeRef": null}, {"name": "backupState", "type": "boolean", "optional": true, "description": "Assertions returned by this credential will have the backup state (BS) flag set to this value. Defaults to the authenticator's defaultBackupState value.", "typeRef": null}, {"name": "userName", "type": "string", "optional": true, "description": "The credential's user.name property. Equivalent to empty if not set. https://w3c.github.io/webauthn/#dom-publickeycredentialentity-name", "typeRef": null}, {"name": "userDisplayName", "type": "string", "optional": true, "description": "The credential's user.displayName property. Equivalent to empty if not set. https://w3c.github.io/webauthn/#dom-publickeycredentialuserentity-displayname", "typeRef": null}]);
 
 // WebMCP.
+inspectorBackend.registerEnum("WebMCP.InvocationStatus", {Success: "Success", Canceled: "Canceled", Error: "Error"});
 inspectorBackend.registerEvent("WebMCP.toolsAdded", ["tools"]);
 inspectorBackend.registerEvent("WebMCP.toolsRemoved", ["tools"]);
+inspectorBackend.registerEvent("WebMCP.toolInvoked", ["toolName", "frameId", "invocationId", "input"]);
+inspectorBackend.registerEvent("WebMCP.toolResponded", ["invocationId", "status", "output", "errorText", "exception"]);
 inspectorBackend.registerCommand("WebMCP.enable", [], [], "Enables the WebMCP domain, allowing events to be sent. Enabling the domain will trigger a toolsAdded event for all currently registered tools.");
 inspectorBackend.registerType("WebMCP.Annotation", [{"name": "readOnly", "type": "boolean", "optional": true, "description": "A hint indicating that the tool does not modify any state.", "typeRef": null}, {"name": "autosubmit", "type": "boolean", "optional": true, "description": "If the declarative tool was declared with the autosubmit attribute.", "typeRef": null}]);
 inspectorBackend.registerType("WebMCP.Tool", [{"name": "name", "type": "string", "optional": false, "description": "Tool name.", "typeRef": null}, {"name": "description", "type": "string", "optional": false, "description": "Tool description.", "typeRef": null}, {"name": "inputSchema", "type": "object", "optional": true, "description": "Schema for the tool's input parameters.", "typeRef": null}, {"name": "annotations", "type": "object", "optional": true, "description": "Optional annotations for the tool.", "typeRef": "WebMCP.Annotation"}, {"name": "frameId", "type": "string", "optional": false, "description": "Frame identifier associated with the tool registration.", "typeRef": "Page.FrameId"}, {"name": "backendNodeId", "type": "number", "optional": true, "description": "Optional node ID for declarative tools.", "typeRef": "DOM.BackendNodeId"}, {"name": "stackTrace", "type": "object", "optional": true, "description": "The stack trace at the time of the registration.", "typeRef": "Runtime.StackTrace"}]);

package/front_end/generated/protocol-mapping.d.ts

@@ -938,6 +938,14 @@ export namespace ProtocolMapping {
      * Event fired when tools are removed.
      */
     'WebMCP.toolsRemoved': [Protocol.WebMCP.ToolsRemovedEvent];
+    /**
+     * Event fired when a tool invocation starts.
+     */
+    'WebMCP.toolInvoked': [Protocol.WebMCP.ToolInvokedEvent];
+    /**
+     * Event fired when a tool invocation completes or fails.
+     */
+    'WebMCP.toolResponded': [Protocol.WebMCP.ToolRespondedEvent];
     /**
      * Fired when breakpoint is resolved to an actual script and location.
      * Deprecated in favor of `resolvedBreakpoints` in the `scriptParsed` event.

package/front_end/generated/protocol-proxy-api.d.ts

@@ -4872,6 +4872,16 @@ declare namespace ProtocolProxyApi {
      */
     toolsRemoved(params: Protocol.WebMCP.ToolsRemovedEvent): void;
 
+    /**
+     * Event fired when a tool invocation starts.
+     */
+    toolInvoked(params: Protocol.WebMCP.ToolInvokedEvent): void;
+
+    /**
+     * Event fired when a tool invocation completes or fails.
+     */
+    toolResponded(params: Protocol.WebMCP.ToolRespondedEvent): void;
+
   }
 
   export interface DebuggerApi {

package/front_end/generated/protocol.ts

@@ -20602,6 +20602,15 @@ export namespace WebMCP {
     autosubmit?: boolean;
   }
 
+  /**
+   * Represents the status of a tool invocation.
+   */
+  export const enum InvocationStatus {
+    Success = 'Success',
+    Canceled = 'Canceled',
+    Error = 'Error',
+  }
+
   /**
    * Definition of a tool that can be invoked.
    */
@@ -20655,6 +20664,54 @@ export namespace WebMCP {
      */
     tools: Tool[];
   }
+
+  /**
+   * Event fired when a tool invocation starts.
+   */
+  export interface ToolInvokedEvent {
+    /**
+     * Name of the tool to invoke.
+     */
+    toolName: string;
+    /**
+     * Frame id
+     */
+    frameId: Page.FrameId;
+    /**
+     * Invocation identifier.
+     */
+    invocationId: string;
+    /**
+     * The input parameters used for the invocation.
+     */
+    input: string;
+  }
+
+  /**
+   * Event fired when a tool invocation completes or fails.
+   */
+  export interface ToolRespondedEvent {
+    /**
+     * Invocation identifier.
+     */
+    invocationId: string;
+    /**
+     * Status of the invocation.
+     */
+    status: InvocationStatus;
+    /**
+     * Output or error delivered as delivered to the agent. Missing if `status` is anything other than Success.
+     */
+    output?: any;
+    /**
+     * Error text for protocol users.
+     */
+    errorText?: string;
+    /**
+     * The exception object, if the javascript tool threw an error>
+     */
+    exception?: Runtime.RemoteObject;
+  }
 }
 
 /**

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

@@ -82,9 +82,9 @@ Your primary goal is to provide actionable advice to web developers about their
 
 You will be provided a summary of a trace: some performance metrics; the most critical network requests; a bottom-up call graph summary; and a brief overview of available insights. Each insight has information about potential performance issues with the page.
 
-Don't mention anything about an insight without first getting more data about it by calling \`getInsightDetails\`.
+Don't mention anything about an insight or the actual LCP element without first getting more data about it by calling \`getInsightDetails\`.
 
-You have many functions available to learn more about the trace. Use these to confirm hypotheses, or to further explore the trace when diagnosing performance issues.
+You have functions available to learn more about the trace. Use these to confirm hypotheses, or to further explore the trace when diagnosing performance issues.
 
 ${annotationsEnabled ? greenDevAdditionalAnnotationsFunction : ''}
 
@@ -106,14 +106,15 @@ Note: if the user asks a specific question about the trace (such as "What is my
 ### Step 1: Determine a performance problem to investigate
 
 - With help from the user, determine what performance problem to focus on.
-- If the user is not specific about what problem to investigate, help them by doing a high-level investigation yourself. Present to the user a few options with 1-sentence summaries. Mention what performance metrics each option impacts. Call as many functions and confirm the data thoroughly: never present an option without being certain it is a real performance issue. Don't suggest solutions yet.
+- If the user is not specific about what problem to investigate, help them by doing a investigation yourself. Present to the user options with 1-sentence summaries. Mention what performance metrics each option impacts. Call as many functions and confirm the data thoroughly: never present an option without being certain it is a real performance issue. Don't suggest solutions yet.
 - Rank the options from most impactful to least impactful, and present them to the user in that order.
-- Don't present more than 5 options.
+- Don't present more than 2 options.
 - Once a performance problem has been identified for investigation, move on to step 2.
 
 ### Step 2: Suggest solutions
 
-- Suggest possible solutions to remedy the identified performance problem. Be as specific as possible, using data from the trace via the provided functions to back up everything you say. You should prefer specific solutions, but absent any specific solution you may suggest general solutions (such as from an insight's documentation links).
+- Suggest solutions to remedy the identified performance problem. Be as specific as possible, using data from the trace via the provided functions to back up everything you say. You should prefer specific solutions, but absent any specific solution you may suggest general solutions (such as from an insight's documentation links).
+- If you are unsure, be honest and present information that can be helpful for further investigation.
 - A good first step to discover solutions is to consider the insights, but you should also validate all potential advice by analyzing the trace until you are confident about the root cause of a performance issue.
 
 ## Guidelines
@@ -145,6 +146,16 @@ Adhere to the following critical requirements:
 - Do not mention that you are an AI, or refer to yourself in the third person. You are simulating a performance expert.
 - If asked about sensitive topics (religion, race, politics, sexuality, gender, etc.), respond with: "My expertise is limited to website performance analysis. I cannot provide information on that topic.".
 - Do not provide answers on non-web-development topics, such as legal, financial, medical, or personal advice.
+- Use the precision of Strunk & White, the brevity of Hemingway, and the simple clarity of Vonnegut. Don't add repeated information, and keep the whole answer short.
+
+## Response Structure
+
+- If available, point out the root cause of the problem. It may be a bullet point list.
+  - Example: "**Root Cause**: The page is slow because of [reason]."
+- if applicable, list actionable solution suggestion(s) in order of impact:
+  - Example: "**Suggestions**:
+    - [Suggestion 1]
+    - [Suggestion 2]
 `;
 };
 

package/front_end/models/ai_assistance/data_formatters/LighthouseFormatter.snapshot.txt

@@ -39,9 +39,18 @@ The following audits in this category have a score below 90 and may need attenti
 - **Table Audit**: 50
   * Audit with a table
 
-    | URL | Wasted Bytes | Node | Location |
-    | https://example.com/script.js | 1024 | div.main (path: 1,HTML,1,BODY,5,DIV) | https://example.com/script.js:10:5 |
-    | https://example.com/style.css | 512 | body > p (selector: body > p) (path: 1,HTML,1,BODY,10,P) | https://example.com/style.css |
+    - Item:
+      * **URL**: https://example.com/script.js
+      * **Wasted Bytes**: 1 kB
+      * **Node**: div.main
+      * **Node path**: 1,HTML,1,BODY,5,DIV
+      * **Location**: https://example.com/script.js:10:5
+    - Item:
+      * **URL**: https://example.com/style.css
+      * **Wasted Bytes**: 512 B
+      * **Node**: body > p
+      * **Node path**: 1,HTML,1,BODY,10,P
+      * **Location**: https://example.com/style.css
 === end content
 
 Title: LighthouseFormatter formats opportunity details
@@ -53,8 +62,9 @@ The following audits in this category have a score below 90 and may need attenti
   * Audit with an opportunity
 
     Potential savings: 500ms, Potential savings: 2048 bytes
-    | URL | Wasted Bytes |
-    | https://example.com/large-script.js | 2048 |
+    - Item:
+      * **URL**: https://example.com/large-script.js
+      * **Wasted Bytes**: 2 kB
 === end content
 
 Title: LighthouseFormatter formats table details with summary
@@ -67,8 +77,8 @@ The following audits in this category have a score below 90 and may need attenti
 
     Wasted time: 100ms
     Wasted bytes: 512
-    | Text |
-    | Some detail |
+    - Item:
+      * **Text**: Some detail
 === end content
 
 Title: LighthouseFormatter formats landmark-one-main audit with node explanation
@@ -79,6 +89,47 @@ The following audits in this category have a score below 90 and may need attenti
 - **Document does not have a main landmark.**: 0
   * One main landmark helps screen reader users navigate a web page. [Learn more about landmarks](https://dequeuniversity.com/rules/axe/4.11/landmark-one-main).
 
-    | Failing Elements |
-    | html (selector: html) (path: 1,HTML) (explanation: Fix all of the following:   Document does not have a main landmark) |
+    - Item:
+      * **Failing Elements**: html
+      * **Failing Elements path**: 1,HTML
+      * **Failing Elements explanation**: Fix all of the following:   Document does not have a main landmark
+=== end content
+
+Title: LighthouseFormatter formats table details with subItems
+Content:
+# Audits for Performance
+
+The following audits in this category have a score below 90 and may need attention:
+- **SubItems Audit**: 50
+  * Audit with subItems
+
+    - Item:
+      * **URL**: https://example.com/script.js
+        * Failed to load sourcemap
+        * Another error
+      * **Map URL**: https://example.com/script.js.map
+=== end content
+
+Title: LighthouseFormatter formats image-delivery-insight audit from realistic data
+Content:
+# Audits for Performance
+
+The following audits in this category have a score below 90 and may need attention:
+- **Improve image delivery**: 50 (Est savings of 35 KiB)
+  * Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/performance/insights/image-delivery)
+
+    - Item:
+      * **node**: div.devsite-landing-row-item-media > figure.devsite-landing-row-item-image > picture > img
+      * **node path**: 1,HTML,1,BODY,2,SECTION,6,SECTION,0,MAIN,1,DEVSITE-CONTENT,0,ARTICLE,4,DIV,0,SECTION,0,DIV,0,DIV,0,DIV,0,DIV,0,FIGURE,0,PICTURE,0,IMG
+      * **URL**: https://web.dev/static/images/home-blue_856.png
+        * This image file is larger than it needs to be (856x505) for its displayed dimensions (568x335). Use responsive images to reduce the image download size.
+      * **Resource Size**: 33.3 kB
+      * **Est Savings**: 18.6 kB
+    - Item:
+      * **node**: figure.devsite-landing-row-item-image > a > picture > img
+      * **node path**: 1,HTML,1,BODY,2,SECTION,6,SECTION,0,MAIN,1,DEVSITE-CONTENT,0,ARTICLE,4,DIV,1,SECTION,0,DIV,0,DIV,3,DIV,0,DIV,0,FIGURE,0,A,0,PICTURE,0,IMG
+      * **URL**: https://web.dev/static/identity/image/hero-identity_480.png
+        * This image file is larger than it needs to be (1296x881) for its displayed dimensions (632x430). Use responsive images to reduce the image download size.
+      * **Resource Size**: 22.2 kB
+      * **Est Savings**: 16.9 kB
 === end content

package/front_end/models/ai_assistance/data_formatters/LighthouseFormatter.ts

@@ -4,6 +4,8 @@
 
 import type * as LHModel from '../../lighthouse/lighthouse.js';
 
+import {bytes, millis} from './UnitFormatters.js';
+
 /**
  * A formatter that takes a raw Lighthouse report JSON and creates a markdown
  * summary for an AI Agent.
@@ -120,37 +122,74 @@ export class LighthouseFormatter {
     }
   }
 
-  #formatTable(headings: LHModel.ReporterTypes.TableHeadingJSON[], items: Array<Record<string, unknown>>): string {
+  #formatTable(headings: LHModel.ReporterTypes.TableHeadingJSON[], items: LHModel.ReporterTypes.TableItem[]): string {
     const lines: string[] = [];
-    lines.push(`| ${headings.map(h => h.label).join(' | ')} |`);
+
     for (const item of items) {
-      const row = headings.map(h => this.#formatTableValue(item[h.key] as LHModel.ReporterTypes.TableItemValue));
-      lines.push(`| ${row.join(' | ')} |`);
+      const itemLines: string[] = [];
+      for (const heading of headings) {
+        const value = item[heading.key] as LHModel.ReporterTypes.TableItemValue;
+        const formattedValues = this.#formatTableValues(value, heading.valueType);
+        for (const {labelSuffix, value: v} of formattedValues) {
+          const baseLabel = heading.label || heading.key;
+          const label = labelSuffix ? `${baseLabel} ${labelSuffix}` : baseLabel;
+          itemLines.push(`  * **${label}**: ${v}`);
+        }
+        const subItems = item.subItems;
+        // subItems can technically be a string (TableItemValue), but we
+        // only care about it here if it's a SubItemsJSON (type:
+        // 'subitems'), which represents a nested table of values.
+        if (subItems && typeof subItems === 'object' && 'type' in subItems && subItems.type === 'subitems' &&
+            heading.subItemsHeading) {
+          for (const subItem of subItems.items) {
+            const subValue = subItem[heading.subItemsHeading.key] as LHModel.ReporterTypes.TableItemValue;
+            // Skip sub-item values that are identical to the main item's value
+            // for the same heading to avoid redundant output (e.g. if both
+            // show the same "Est Savings" value).
+            if (subValue === value) {
+              continue;
+            }
+            const formattedSubValues = this.#formatTableValues(subValue, heading.subItemsHeading.valueType);
+            for (const {value: v} of formattedSubValues) {
+              itemLines.push(`    * ${v}`);
+            }
+          }
+        }
+      }
+      if (itemLines.length > 0) {
+        lines.push(`- Item:`);
+        lines.push(...itemLines);
+      }
     }
     return lines.join('\n');
   }
 
-  #formatTableValue(value: LHModel.ReporterTypes.TableItemValue|undefined): string {
+  #formatTableValues(value: LHModel.ReporterTypes.TableItemValue|undefined, valueType?: string): Array<{
+    value: string,
+    labelSuffix?: string,
+  }> {
     if (value === undefined || value === null) {
-      return '';
+      return [];
     }
     if (typeof value === 'string' || typeof value === 'number') {
-      return String(value);
+      return [{value: this.#formatValue(value, valueType)}];
     }
     if (typeof value === 'object' && 'type' in value) {
       switch (value.type) {
         case 'node': {
-          let label = value.nodeLabel || value.selector || value.snippet || '(node)';
-          if (value.selector) {
-            label += ` (selector: ${value.selector})`;
+          const results = [];
+          const label = value.nodeLabel || value.selector || value.snippet || '(node)';
+          results.push({value: label});
+          if (value.selector && value.selector !== label) {
+            results.push({labelSuffix: 'selector', value: value.selector});
           }
           if (value.path) {
-            label += ` (path: ${value.path})`;
+            results.push({labelSuffix: 'path', value: value.path});
           }
           if (value.explanation) {
-            label += ` (explanation: ${value.explanation.replace(/\n/g, ' ')})`;
+            results.push({labelSuffix: 'explanation', value: value.explanation.replace(/\n/g, ' ')});
           }
-          return label;
+          return results;
         }
         case 'source-location': {
           const parts = [];
@@ -163,10 +202,27 @@ export class LighthouseFormatter {
           if (value.column) {
             parts.push(String(value.column));
           }
-          return parts.join(':');
+          return [{value: parts.join(':')}];
         }
       }
     }
-    return '';
+    return [];
+  }
+
+  #formatValue(value: string|number, valueType?: string): string {
+    if (typeof value === 'string') {
+      return value;
+    }
+    switch (valueType) {
+      case 'bytes': {
+        return bytes(value);
+      }
+      case 'timespanMs':
+      case 'ms': {
+        return millis(value);
+      }
+      default:
+        return String(value);
+    }
   }
 }