chrome-devtools-frontend 1.0.1602543 → 1.0.1604514

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);
+    }
   }
 }

package/front_end/models/bindings/TempFile.ts

@@ -7,10 +7,7 @@ import * as Common from '../../core/common/common.js';
 import {ChunkedFileReader, type ChunkedReader} from './FileUtils.js';
 
 export class TempFile {
-  #lastBlob: Blob|null;
-  constructor() {
-    this.#lastBlob = null;
-  }
+  #lastBlob: Blob|null = null;
 
   write(pieces: Array<string|Blob>): void {
     if (this.#lastBlob) {

package/front_end/models/extensions/ExtensionAPI.ts

@@ -616,7 +616,7 @@ self.injectedExtensionAPI = function(
           entries[i].__proto__ = new (Constructor(Request))(entries[i]._requestId as number);
           delete entries[i]._requestId;
         }
-        callback?.(result as Object);
+        callback?.(result);
       }
       extensionServer.sendRequest({command: PrivateAPI.Commands.GetHAR}, callback && callbackWrapper);
     },

package/front_end/models/heap_snapshot_model/HeapSnapshotModel.ts

@@ -71,13 +71,19 @@ export class Node {
   retainedSize: number;
   selfSize: number;
   type: string;
-  canBeQueried: boolean;
-  detachedDOMTreeNode: boolean;
-  isAddedNotRemoved: boolean|null;
-  ignored: boolean;
+  canBeQueried = false;
+  detachedDOMTreeNode = false;
+  isAddedNotRemoved: boolean|null = null;
+  ignored = false;
   constructor(
-      id: number, name: string, distance: number, nodeIndex: number, retainedSize: number, selfSize: number,
-      type: string) {
+      id: number,
+      name: string,
+      distance: number,
+      nodeIndex: number,
+      retainedSize: number,
+      selfSize: number,
+      type: string,
+  ) {
     this.id = id;
     this.name = name;
     this.distance = distance;
@@ -85,11 +91,6 @@ export class Node {
     this.retainedSize = retainedSize;
     this.selfSize = selfSize;
     this.type = type;
-
-    this.canBeQueried = false;
-    this.detachedDOMTreeNode = false;
-    this.isAddedNotRemoved = null;
-    this.ignored = false;
   }
 }
 
@@ -98,13 +99,12 @@ export class Edge {
   node: Node;
   type: string;
   edgeIndex: number;
-  isAddedNotRemoved: boolean|null;
+  isAddedNotRemoved: boolean|null = null;
   constructor(name: string, node: Node, type: string, edgeIndex: number) {
     this.name = name;
     this.node = node;
     this.type = type;
     this.edgeIndex = edgeIndex;
-    this.isAddedNotRemoved = null;
   }
 }
 
@@ -132,37 +132,19 @@ export class AggregateForDiff {
 
 export class Diff {
   name: string;
-  addedCount: number;
-  removedCount: number;
-  addedSize: number;
-  removedSize: number;
-  deletedIndexes: number[];
-  addedIndexes: number[];
+  addedCount = 0;
+  removedCount = 0;
+  addedSize = 0;
+  removedSize = 0;
+  deletedIndexes: number[] = [];
+  addedIndexes: number[] = [];
   countDelta!: number;
   sizeDelta!: number;
   constructor(name: string) {
     this.name = name;
-    this.addedCount = 0;
-    this.removedCount = 0;
-    this.addedSize = 0;
-    this.removedSize = 0;
-    this.deletedIndexes = [];
-    this.addedIndexes = [];
   }
 }
 
-export class DiffForClass {
-  name!: string;
-  addedCount!: number;
-  removedCount!: number;
-  addedSize!: number;
-  removedSize!: number;
-  deletedIndexes!: number[];
-  addedIndexes!: number[];
-  countDelta!: number;
-  sizeDelta!: number;
-}
-
 export class ComparatorConfig {
   fieldName1: string;
   ascending1: boolean;
@@ -176,16 +158,16 @@ export class ComparatorConfig {
   }
 }
 
-export class WorkerCommand {
-  callId!: number;
-  disposition!: string;
-  objectId!: number;
-  newObjectId!: number;
-  methodName!: string;
+export interface WorkerCommand {
+  callId: number;
+  disposition: string;
+  objectId: number;
+  newObjectId: number;
+  methodName: string;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  methodArguments!: any[];
-  source!: string;
+  methodArguments: any[];
+  source: string;
 }
 
 export class ItemsRange {
@@ -244,8 +226,13 @@ export class SearchConfig {
   shouldJump: boolean;
   jumpBackward: boolean;
   constructor(
-      query: string, caseSensitive: boolean, wholeWord: boolean, isRegex: boolean, shouldJump: boolean,
-      jumpBackward: boolean) {
+      query: string,
+      caseSensitive: boolean,
+      wholeWord: boolean,
+      isRegex: boolean,
+      shouldJump: boolean,
+      jumpBackward: boolean,
+  ) {
     this.query = query;
     this.caseSensitive = caseSensitive;
     this.wholeWord = wholeWord;

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -1003,7 +1003,7 @@ export const NativeFunctions = [
   {
     name: "addEventListener",
     signatures: [["type","listener","?options"]],
-    receivers: ["AbortSignal","SharedWorker","Worker","ServiceWorker","Animation","AudioBufferSourceNode","AudioContext","AudioDecoder","AudioEncoder","AudioScheduledSourceNode","AudioWorkletNode","BaseAudioContext","BroadcastChannel","CSSAnimation","CSSTransition","CanvasCaptureMediaStreamTrack","ConstantSourceNode","CookieStore","Document","Element","EventSource","FileReader","FontFaceSet","Window","HTMLElement","MathMLElement","SVGElement","HTMLAnchorElement","HTMLAreaElement","HTMLAudioElement","HTMLBRElement","HTMLBaseElement","HTMLBodyElement","HTMLButtonElement","HTMLCanvasElement","HTMLDListElement","HTMLDataElement","HTMLDataListElement","HTMLDetailsElement","HTMLDialogElement","HTMLDirectoryElement","HTMLDivElement","HTMLDocument","HTMLEmbedElement","HTMLFieldSetElement","HTMLFontElement","HTMLFormElement","HTMLFrameElement","HTMLFrameSetElement","HTMLHRElement","HTMLHeadElement","HTMLHeadingElement","HTMLHtmlElement","HTMLIFrameElement","HTMLImageElement","HTMLInputElement","HTMLLIElement","HTMLLabelElement","HTMLLegendElement","HTMLLinkElement","HTMLMapElement","HTMLMarqueeElement","HTMLMediaElement","HTMLMenuElement","HTMLMetaElement","HTMLMeterElement","HTMLModElement","HTMLOListElement","HTMLObjectElement","HTMLOptGroupElement","HTMLOptionElement","HTMLOutputElement","HTMLParagraphElement","HTMLParamElement","HTMLPictureElement","HTMLPreElement","HTMLProgressElement","HTMLQuoteElement","HTMLScriptElement","HTMLSelectElement","HTMLSlotElement","HTMLSourceElement","HTMLSpanElement","HTMLStyleElement","HTMLTableCaptionElement","HTMLTableCellElement","HTMLTableColElement","HTMLTableDataCellElement","HTMLTableElement","HTMLTableHeaderCellElement","HTMLTableRowElement","HTMLTableSectionElement","HTMLTemplateElement","HTMLTextAreaElement","HTMLTimeElement","HTMLTitleElement","HTMLTrackElement","HTMLUListElement","HTMLUnknownElement","HTMLVideoElement","IDBDatabase","IDBOpenDBRequest","IDBRequest","IDBTransaction","MIDIAccess","MIDIInput","MIDIOutput","MIDIPort","MediaDevices","MediaKeySession","MediaQueryList","MediaRecorder","MediaSource","MediaStream","MediaStreamTrack","MessageEventTarget","MessagePort","NavigationHistoryEntry","Notification","OfflineAudioContext","OffscreenCanvas","OscillatorNode","PaymentRequest","PaymentResponse","Performance","PermissionStatus","PictureInPictureWindow","RTCDTMFSender","RTCDataChannel","RTCDtlsTransport","RTCIceTransport","RTCPeerConnection","RTCSctpTransport","RemotePlayback","SVGAElement","SVGAnimateElement","SVGAnimateMotionElement","SVGAnimateTransformElement","SVGAnimationElement","SVGCircleElement","SVGClipPathElement","SVGComponentTransferFunctionElement","SVGDefsElement","SVGDescElement","SVGEllipseElement","SVGFEBlendElement","SVGFEColorMatrixElement","SVGFEComponentTransferElement","SVGFECompositeElement","SVGFEConvolveMatrixElement","SVGFEDiffuseLightingElement","SVGFEDisplacementMapElement","SVGFEDistantLightElement","SVGFEDropShadowElement","SVGFEFloodElement","SVGFEFuncAElement","SVGFEFuncBElement","SVGFEFuncGElement","SVGFEFuncRElement","SVGFEGaussianBlurElement","SVGFEImageElement","SVGFEMergeElement","SVGFEMergeNodeElement","SVGFEMorphologyElement","SVGFEOffsetElement","SVGFEPointLightElement","SVGFESpecularLightingElement","SVGFESpotLightElement","SVGFETileElement","SVGFETurbulenceElement","SVGFilterElement","SVGForeignObjectElement","SVGGElement","SVGGeometryElement","SVGGradientElement","SVGGraphicsElement","SVGImageElement","SVGLineElement","SVGLinearGradientElement","SVGMPathElement","SVGMarkerElement","SVGMaskElement","SVGMetadataElement","SVGPathElement","SVGPatternElement","SVGPolygonElement","SVGPolylineElement","SVGRadialGradientElement","SVGRectElement","SVGSVGElement","SVGScriptElement","SVGSetElement","SVGStopElement","SVGStyleElement","SVGSwitchElement","SVGSymbolElement","SVGTSpanElement","SVGTextContentElement","SVGTextElement","SVGTextPathElement","SVGTextPositioningElement","SVGTitleElement","SVGUseElement","SVGViewElement","ScreenOrientation","ScriptProcessorNode","ServiceWorkerContainer","ServiceWorkerRegistration","ShadowRoot","SourceBuffer","SourceBufferList","SpeechSynthesis","SpeechSynthesisUtterance","TextTrack","TextTrackCue","TextTrackList","VTTCue","VideoDecoder","VideoEncoder","VisualViewport","WakeLockSentinel","WebSocket","XMLDocument","XMLHttpRequest","XMLHttpRequestEventTarget","XMLHttpRequestUpload","DedicatedWorkerGlobalScope","ServiceWorkerGlobalScope","SharedWorkerGlobalScope","WorkerGlobalScope","Highlight"]
+    receivers: ["AbortSignal","SharedWorker","Worker","ServiceWorker","Animation","AudioBufferSourceNode","AudioContext","AudioDecoder","AudioEncoder","AudioScheduledSourceNode","AudioWorkletNode","BaseAudioContext","BroadcastChannel","CSSAnimation","CSSTransition","CanvasCaptureMediaStreamTrack","ConstantSourceNode","CookieStore","Document","Element","EventSource","FileReader","FontFaceSet","Window","HTMLElement","MathMLElement","SVGElement","HTMLAnchorElement","HTMLAreaElement","HTMLAudioElement","HTMLBRElement","HTMLBaseElement","HTMLBodyElement","HTMLButtonElement","HTMLCanvasElement","HTMLDListElement","HTMLDataElement","HTMLDataListElement","HTMLDetailsElement","HTMLDialogElement","HTMLDirectoryElement","HTMLDivElement","HTMLDocument","HTMLEmbedElement","HTMLFieldSetElement","HTMLFontElement","HTMLFormElement","HTMLFrameElement","HTMLFrameSetElement","HTMLHRElement","HTMLHeadElement","HTMLHeadingElement","HTMLHtmlElement","HTMLIFrameElement","HTMLImageElement","HTMLInputElement","HTMLLIElement","HTMLLabelElement","HTMLLegendElement","HTMLLinkElement","HTMLMapElement","HTMLMarqueeElement","HTMLMediaElement","HTMLMenuElement","HTMLMetaElement","HTMLMeterElement","HTMLModElement","HTMLOListElement","HTMLObjectElement","HTMLOptGroupElement","HTMLOptionElement","HTMLOutputElement","HTMLParagraphElement","HTMLParamElement","HTMLPictureElement","HTMLPreElement","HTMLProgressElement","HTMLQuoteElement","HTMLScriptElement","HTMLSelectElement","HTMLSlotElement","HTMLSourceElement","HTMLSpanElement","HTMLStyleElement","HTMLTableCaptionElement","HTMLTableCellElement","HTMLTableColElement","HTMLTableDataCellElement","HTMLTableElement","HTMLTableHeaderCellElement","HTMLTableRowElement","HTMLTableSectionElement","HTMLTemplateElement","HTMLTextAreaElement","HTMLTimeElement","HTMLTitleElement","HTMLTrackElement","HTMLUListElement","HTMLUnknownElement","HTMLVideoElement","IDBDatabase","IDBOpenDBRequest","IDBRequest","IDBTransaction","MIDIAccess","MIDIInput","MIDIOutput","MIDIPort","MediaDevices","MediaKeySession","MediaQueryList","MediaRecorder","MediaSource","MediaStream","MediaStreamTrack","MessageEventTarget","MessagePort","NavigationHistoryEntry","Notification","OfflineAudioContext","OffscreenCanvas","OscillatorNode","PaymentRequest","PaymentResponse","Performance","PermissionStatus","PictureInPictureWindow","RTCDTMFSender","RTCDataChannel","RTCDtlsTransport","RTCIceTransport","RTCPeerConnection","RTCSctpTransport","RemotePlayback","SVGAElement","SVGAnimateElement","SVGAnimateMotionElement","SVGAnimateTransformElement","SVGAnimationElement","SVGCircleElement","SVGClipPathElement","SVGComponentTransferFunctionElement","SVGDefsElement","SVGDescElement","SVGEllipseElement","SVGFEBlendElement","SVGFEColorMatrixElement","SVGFEComponentTransferElement","SVGFECompositeElement","SVGFEConvolveMatrixElement","SVGFEDiffuseLightingElement","SVGFEDisplacementMapElement","SVGFEDistantLightElement","SVGFEDropShadowElement","SVGFEFloodElement","SVGFEFuncAElement","SVGFEFuncBElement","SVGFEFuncGElement","SVGFEFuncRElement","SVGFEGaussianBlurElement","SVGFEImageElement","SVGFEMergeElement","SVGFEMergeNodeElement","SVGFEMorphologyElement","SVGFEOffsetElement","SVGFEPointLightElement","SVGFESpecularLightingElement","SVGFESpotLightElement","SVGFETileElement","SVGFETurbulenceElement","SVGFilterElement","SVGForeignObjectElement","SVGGElement","SVGGeometryElement","SVGGradientElement","SVGGraphicsElement","SVGImageElement","SVGLineElement","SVGLinearGradientElement","SVGMPathElement","SVGMarkerElement","SVGMaskElement","SVGMetadataElement","SVGPathElement","SVGPatternElement","SVGPolygonElement","SVGPolylineElement","SVGRadialGradientElement","SVGRectElement","SVGSVGElement","SVGScriptElement","SVGSetElement","SVGStopElement","SVGStyleElement","SVGSwitchElement","SVGSymbolElement","SVGTSpanElement","SVGTextContentElement","SVGTextElement","SVGTextPathElement","SVGTextPositioningElement","SVGTitleElement","SVGUseElement","SVGViewElement","ScreenOrientation","ScriptProcessorNode","ServiceWorkerContainer","ServiceWorkerRegistration","ShadowRoot","SourceBuffer","SourceBufferList","SpeechSynthesis","SpeechSynthesisUtterance","TextTrack","TextTrackCue","TextTrackList","VTTCue","VideoDecoder","VideoEncoder","VisualViewport","WakeLockSentinel","WebSocket","XMLDocument","XMLHttpRequest","XMLHttpRequestEventTarget","XMLHttpRequestUpload","DedicatedWorkerGlobalScope","ServiceWorkerGlobalScope","SharedWorkerGlobalScope","WorkerGlobalScope"]
   },
   {
     name: "addEventListener",
@@ -1013,7 +1013,7 @@ export const NativeFunctions = [
   {
     name: "removeEventListener",
     signatures: [["type","listener","?options"]],
-    receivers: ["AbortSignal","SharedWorker","Worker","ServiceWorker","Animation","AudioBufferSourceNode","AudioContext","AudioDecoder","AudioEncoder","AudioScheduledSourceNode","AudioWorkletNode","BaseAudioContext","BroadcastChannel","CSSAnimation","CSSTransition","CanvasCaptureMediaStreamTrack","ConstantSourceNode","CookieStore","Document","Element","EventSource","FileReader","FontFaceSet","Window","HTMLElement","MathMLElement","SVGElement","HTMLAnchorElement","HTMLAreaElement","HTMLAudioElement","HTMLBRElement","HTMLBaseElement","HTMLBodyElement","HTMLButtonElement","HTMLCanvasElement","HTMLDListElement","HTMLDataElement","HTMLDataListElement","HTMLDetailsElement","HTMLDialogElement","HTMLDirectoryElement","HTMLDivElement","HTMLDocument","HTMLEmbedElement","HTMLFieldSetElement","HTMLFontElement","HTMLFormElement","HTMLFrameElement","HTMLFrameSetElement","HTMLHRElement","HTMLHeadElement","HTMLHeadingElement","HTMLHtmlElement","HTMLIFrameElement","HTMLImageElement","HTMLInputElement","HTMLLIElement","HTMLLabelElement","HTMLLegendElement","HTMLLinkElement","HTMLMapElement","HTMLMarqueeElement","HTMLMediaElement","HTMLMenuElement","HTMLMetaElement","HTMLMeterElement","HTMLModElement","HTMLOListElement","HTMLObjectElement","HTMLOptGroupElement","HTMLOptionElement","HTMLOutputElement","HTMLParagraphElement","HTMLParamElement","HTMLPictureElement","HTMLPreElement","HTMLProgressElement","HTMLQuoteElement","HTMLScriptElement","HTMLSelectElement","HTMLSlotElement","HTMLSourceElement","HTMLSpanElement","HTMLStyleElement","HTMLTableCaptionElement","HTMLTableCellElement","HTMLTableColElement","HTMLTableDataCellElement","HTMLTableElement","HTMLTableHeaderCellElement","HTMLTableRowElement","HTMLTableSectionElement","HTMLTemplateElement","HTMLTextAreaElement","HTMLTimeElement","HTMLTitleElement","HTMLTrackElement","HTMLUListElement","HTMLUnknownElement","HTMLVideoElement","IDBDatabase","IDBOpenDBRequest","IDBRequest","IDBTransaction","MIDIAccess","MIDIInput","MIDIOutput","MIDIPort","MediaDevices","MediaKeySession","MediaQueryList","MediaRecorder","MediaSource","MediaStream","MediaStreamTrack","MessageEventTarget","MessagePort","NavigationHistoryEntry","Notification","OfflineAudioContext","OffscreenCanvas","OscillatorNode","PaymentRequest","PaymentResponse","Performance","PermissionStatus","PictureInPictureWindow","RTCDTMFSender","RTCDataChannel","RTCDtlsTransport","RTCIceTransport","RTCPeerConnection","RTCSctpTransport","RemotePlayback","SVGAElement","SVGAnimateElement","SVGAnimateMotionElement","SVGAnimateTransformElement","SVGAnimationElement","SVGCircleElement","SVGClipPathElement","SVGComponentTransferFunctionElement","SVGDefsElement","SVGDescElement","SVGEllipseElement","SVGFEBlendElement","SVGFEColorMatrixElement","SVGFEComponentTransferElement","SVGFECompositeElement","SVGFEConvolveMatrixElement","SVGFEDiffuseLightingElement","SVGFEDisplacementMapElement","SVGFEDistantLightElement","SVGFEDropShadowElement","SVGFEFloodElement","SVGFEFuncAElement","SVGFEFuncBElement","SVGFEFuncGElement","SVGFEFuncRElement","SVGFEGaussianBlurElement","SVGFEImageElement","SVGFEMergeElement","SVGFEMergeNodeElement","SVGFEMorphologyElement","SVGFEOffsetElement","SVGFEPointLightElement","SVGFESpecularLightingElement","SVGFESpotLightElement","SVGFETileElement","SVGFETurbulenceElement","SVGFilterElement","SVGForeignObjectElement","SVGGElement","SVGGeometryElement","SVGGradientElement","SVGGraphicsElement","SVGImageElement","SVGLineElement","SVGLinearGradientElement","SVGMPathElement","SVGMarkerElement","SVGMaskElement","SVGMetadataElement","SVGPathElement","SVGPatternElement","SVGPolygonElement","SVGPolylineElement","SVGRadialGradientElement","SVGRectElement","SVGSVGElement","SVGScriptElement","SVGSetElement","SVGStopElement","SVGStyleElement","SVGSwitchElement","SVGSymbolElement","SVGTSpanElement","SVGTextContentElement","SVGTextElement","SVGTextPathElement","SVGTextPositioningElement","SVGTitleElement","SVGUseElement","SVGViewElement","ScreenOrientation","ScriptProcessorNode","ServiceWorkerContainer","ServiceWorkerRegistration","ShadowRoot","SourceBuffer","SourceBufferList","SpeechSynthesis","SpeechSynthesisUtterance","TextTrack","TextTrackCue","TextTrackList","VTTCue","VideoDecoder","VideoEncoder","VisualViewport","WakeLockSentinel","WebSocket","XMLDocument","XMLHttpRequest","XMLHttpRequestEventTarget","XMLHttpRequestUpload","DedicatedWorkerGlobalScope","ServiceWorkerGlobalScope","SharedWorkerGlobalScope","WorkerGlobalScope","Highlight"]
+    receivers: ["AbortSignal","SharedWorker","Worker","ServiceWorker","Animation","AudioBufferSourceNode","AudioContext","AudioDecoder","AudioEncoder","AudioScheduledSourceNode","AudioWorkletNode","BaseAudioContext","BroadcastChannel","CSSAnimation","CSSTransition","CanvasCaptureMediaStreamTrack","ConstantSourceNode","CookieStore","Document","Element","EventSource","FileReader","FontFaceSet","Window","HTMLElement","MathMLElement","SVGElement","HTMLAnchorElement","HTMLAreaElement","HTMLAudioElement","HTMLBRElement","HTMLBaseElement","HTMLBodyElement","HTMLButtonElement","HTMLCanvasElement","HTMLDListElement","HTMLDataElement","HTMLDataListElement","HTMLDetailsElement","HTMLDialogElement","HTMLDirectoryElement","HTMLDivElement","HTMLDocument","HTMLEmbedElement","HTMLFieldSetElement","HTMLFontElement","HTMLFormElement","HTMLFrameElement","HTMLFrameSetElement","HTMLHRElement","HTMLHeadElement","HTMLHeadingElement","HTMLHtmlElement","HTMLIFrameElement","HTMLImageElement","HTMLInputElement","HTMLLIElement","HTMLLabelElement","HTMLLegendElement","HTMLLinkElement","HTMLMapElement","HTMLMarqueeElement","HTMLMediaElement","HTMLMenuElement","HTMLMetaElement","HTMLMeterElement","HTMLModElement","HTMLOListElement","HTMLObjectElement","HTMLOptGroupElement","HTMLOptionElement","HTMLOutputElement","HTMLParagraphElement","HTMLParamElement","HTMLPictureElement","HTMLPreElement","HTMLProgressElement","HTMLQuoteElement","HTMLScriptElement","HTMLSelectElement","HTMLSlotElement","HTMLSourceElement","HTMLSpanElement","HTMLStyleElement","HTMLTableCaptionElement","HTMLTableCellElement","HTMLTableColElement","HTMLTableDataCellElement","HTMLTableElement","HTMLTableHeaderCellElement","HTMLTableRowElement","HTMLTableSectionElement","HTMLTemplateElement","HTMLTextAreaElement","HTMLTimeElement","HTMLTitleElement","HTMLTrackElement","HTMLUListElement","HTMLUnknownElement","HTMLVideoElement","IDBDatabase","IDBOpenDBRequest","IDBRequest","IDBTransaction","MIDIAccess","MIDIInput","MIDIOutput","MIDIPort","MediaDevices","MediaKeySession","MediaQueryList","MediaRecorder","MediaSource","MediaStream","MediaStreamTrack","MessageEventTarget","MessagePort","NavigationHistoryEntry","Notification","OfflineAudioContext","OffscreenCanvas","OscillatorNode","PaymentRequest","PaymentResponse","Performance","PermissionStatus","PictureInPictureWindow","RTCDTMFSender","RTCDataChannel","RTCDtlsTransport","RTCIceTransport","RTCPeerConnection","RTCSctpTransport","RemotePlayback","SVGAElement","SVGAnimateElement","SVGAnimateMotionElement","SVGAnimateTransformElement","SVGAnimationElement","SVGCircleElement","SVGClipPathElement","SVGComponentTransferFunctionElement","SVGDefsElement","SVGDescElement","SVGEllipseElement","SVGFEBlendElement","SVGFEColorMatrixElement","SVGFEComponentTransferElement","SVGFECompositeElement","SVGFEConvolveMatrixElement","SVGFEDiffuseLightingElement","SVGFEDisplacementMapElement","SVGFEDistantLightElement","SVGFEDropShadowElement","SVGFEFloodElement","SVGFEFuncAElement","SVGFEFuncBElement","SVGFEFuncGElement","SVGFEFuncRElement","SVGFEGaussianBlurElement","SVGFEImageElement","SVGFEMergeElement","SVGFEMergeNodeElement","SVGFEMorphologyElement","SVGFEOffsetElement","SVGFEPointLightElement","SVGFESpecularLightingElement","SVGFESpotLightElement","SVGFETileElement","SVGFETurbulenceElement","SVGFilterElement","SVGForeignObjectElement","SVGGElement","SVGGeometryElement","SVGGradientElement","SVGGraphicsElement","SVGImageElement","SVGLineElement","SVGLinearGradientElement","SVGMPathElement","SVGMarkerElement","SVGMaskElement","SVGMetadataElement","SVGPathElement","SVGPatternElement","SVGPolygonElement","SVGPolylineElement","SVGRadialGradientElement","SVGRectElement","SVGSVGElement","SVGScriptElement","SVGSetElement","SVGStopElement","SVGStyleElement","SVGSwitchElement","SVGSymbolElement","SVGTSpanElement","SVGTextContentElement","SVGTextElement","SVGTextPathElement","SVGTextPositioningElement","SVGTitleElement","SVGUseElement","SVGViewElement","ScreenOrientation","ScriptProcessorNode","ServiceWorkerContainer","ServiceWorkerRegistration","ShadowRoot","SourceBuffer","SourceBufferList","SpeechSynthesis","SpeechSynthesisUtterance","TextTrack","TextTrackCue","TextTrackList","VTTCue","VideoDecoder","VideoEncoder","VisualViewport","WakeLockSentinel","WebSocket","XMLDocument","XMLHttpRequest","XMLHttpRequestEventTarget","XMLHttpRequestUpload","DedicatedWorkerGlobalScope","ServiceWorkerGlobalScope","SharedWorkerGlobalScope","WorkerGlobalScope"]
   },
   {
     name: "removeEventListener",
@@ -2895,6 +2895,10 @@ export const NativeFunctions = [
     signatures: [["?detailsPromise"]],
     receivers: ["PaymentRequest"]
   },
+  {
+    name: "attachInternals",
+    signatures: [["?options"]]
+  },
   {
     name: "showPopover",
     signatures: [["?options"]]
@@ -6602,16 +6606,12 @@ export const NativeFunctions = [
     name: "replaceWithHTMLUnsafe",
     signatures: [["html","?options"]]
   },
-  {
-    name: "streamBeforeHTMLUnsafe",
-    signatures: [["?options"]]
-  },
   {
     name: "streamBeforeHTML",
     signatures: [["?options"]]
   },
   {
-    name: "streamAfterHTMLUnsafe",
+    name: "streamBeforeHTMLUnsafe",
     signatures: [["?options"]]
   },
   {
@@ -6619,13 +6619,17 @@ export const NativeFunctions = [
     signatures: [["?options"]]
   },
   {
-    name: "streamReplaceWithHTMLUnsafe",
+    name: "streamAfterHTMLUnsafe",
     signatures: [["?options"]]
   },
   {
     name: "streamReplaceWithHTML",
     signatures: [["?options"]]
   },
+  {
+    name: "streamReplaceWithHTMLUnsafe",
+    signatures: [["?options"]]
+  },
   {
     name: "Comment",
     signatures: [["?data"]]

package/front_end/models/lighthouse/LighthouseReporterTypes.ts

@@ -82,10 +82,17 @@ export interface ReportJSON {
 export type DetailsJSON =
     |TableDetailsJSON|OpportunityDetailsJSON|FilmstripDetailsJSON|ScreenshotDetailsJSON|DebugDataDetailsJSON;
 
+export interface SubItemsJSON {
+  type: 'subitems';
+  items: Array<Record<string, TableItemValue>>;
+}
+
+export type TableItem = Record<string, TableItemValue|SubItemsJSON|undefined>;
+
 export interface TableDetailsJSON {
   type: 'table';
   headings: TableHeadingJSON[];
-  items: Array<Record<string, TableItemValue>>;
+  items: TableItem[];
   summary?: OpportunitySummary;
 }
 
@@ -96,7 +103,7 @@ export interface TableHeadingJSON {
   itemType?: string;
   subItemsHeading?: {
     key: string,
-    valueType: string,
+    valueType?: string,
   };
 }
 
@@ -109,12 +116,7 @@ export type TableItemValue =|string|number|NodeDetailsJSON|SourceLocationDetails
 export interface OpportunityDetailsJSON {
   type: 'opportunity';
   headings: TableHeadingJSON[];
-  items: Array<{
-    url: string,
-    wastedBytes?: number,
-    wastedMs?: number,
-    totalBytes?: number, [key: string]: unknown,
-  }>;
+  items: TableItem[];
   overallSavingsMs: number;
   overallSavingsBytes?: number;
 }

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -383,7 +383,9 @@ interface ToolbarViewInput {
   walkthrough: {
     isExpanded: boolean,
     isInlined: boolean,
-    onToggle: (isOpen: boolean) => void,
+    onToggle: (isOpen: boolean, message: ModelChatMessage) => void,
+    activeSidebarMessage: ModelChatMessage|null,
+    inlineExpandedMessages: ModelChatMessage[],
   };
 }
 
@@ -521,7 +523,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
     let walkthroughIsForLastMessage = false;
     if(input.state === ViewState.CHAT_VIEW) {
       const lastMessage = input.props.messages.at(-1);
-      if(lastMessage && input.props.walkthrough.activeMessage === lastMessage) {
+      if(lastMessage && input.props.walkthrough.activeSidebarMessage === lastMessage) {
         walkthroughIsForLastMessage = true;
       }
     }
@@ -542,7 +544,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
           <div slot="sidebar" class="sidebar-view">
             ${shouldShowWalkthrough ? html`
               <devtools-widget ${widget(WalkthroughView, {
-                message: input.props.walkthrough.activeMessage,
+                message: input.props.walkthrough.activeSidebarMessage,
                 isLoading: input.props.isLoading && walkthroughIsForLastMessage,
                 markdownRenderer: input.props.markdownRenderer,
                 onToggle: input.props.walkthrough.onToggle,
@@ -610,10 +612,15 @@ function createPerformanceTraceContext(focus: AiAssistanceModel.AIContext.AgentF
 
 /**
  * State relating to the visibility of the Walkthrough.
- * Note that we have to track the active message and the visibility as distinct
- * state, because you can toggle the walkthrough via the sidebar, in which case
- * we need to make it visible/hidden but keep track of the active message for
- * when the user expands it again.
+ *
+ * We track both an `activeSidebarMessage` and a list of `inlineExpandedMessages` because:
+ * 1. In Narrow (inline) mode, multiple walkthroughs can be expanded at once,
+ *    so we need to track them all to render them correctly in the chat.
+ * 2. In Wide (sidebar) mode, only one walkthrough can be visible at a time.
+ *    The `activeSidebarMessage` tracks which one is shown in the sidebar.
+ * 3. When transitioning from Narrow to Wide, we use the last message in
+ *    `inlineExpandedMessages` to determine which one should stay expanded
+ *    in the sidebar.
  */
 interface WalkthroughState {
   /**
@@ -625,11 +632,15 @@ interface WalkthroughState {
    */
   isExpanded: boolean;
   /**
-   * The message that the walkthrough is showing all the steps for. A
-   * conversation can have many Model messages (1 per each user prompt) so we
-   * need to track which one we are showing for the walkthrough.
+   * The message that the walkthrough is showing all the steps for. In Wide mode,
+   * this is the message shown in the sidebar. In Narrow mode, it tracks the
+   * most recently interacted message.
    */
-  activeMessage: ModelChatMessage|null;
+  activeSidebarMessage: ModelChatMessage|null;
+  /**
+   * Tracks which messages are expanded in inline mode.
+   */
+  inlineExpandedMessages: ModelChatMessage[];
 }
 
 let panelInstance: AiAssistancePanel;
@@ -667,7 +678,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #walkthrough: WalkthroughState = {
     isInlined: false,
     isExpanded: false,
-    activeMessage: null,
+    activeSidebarMessage: null,
+    inlineExpandedMessages: [],
   };
 
   constructor(private view: View = defaultView, {aidaClient, aidaAvailability}: {
@@ -708,6 +720,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         isExpanded: this.#walkthrough.isExpanded,
         isInlined: this.#walkthrough.isInlined,
         onToggle: this.#toggleWalkthrough.bind(this),
+        activeSidebarMessage: this.#walkthrough.activeSidebarMessage,
+        inlineExpandedMessages: this.#walkthrough.inlineExpandedMessages,
       }
     };
   }
@@ -796,7 +810,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             onOpen: this.#openWalkthrough.bind(this),
             isExpanded: this.#walkthrough.isExpanded,
             isInlined: this.#walkthrough.isInlined,
-            activeMessage: this.#walkthrough.activeMessage,
+            activeSidebarMessage: this.#walkthrough.activeSidebarMessage,
+            inlineExpandedMessages: this.#walkthrough.inlineExpandedMessages,
           },
         }
       };
@@ -820,20 +835,73 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (isNarrow === this.#walkthrough.isInlined) {
       return;
     }
-    // If the UI changed, we reset the visibility of the AI Walkthrough.
-    this.#clearWalkthrough();
+
     this.#walkthrough.isInlined = isNarrow;
+
+    if (!this.#walkthrough.isExpanded) {
+      // If nothing was expanded, we just ensure the state is clean.
+      this.#walkthrough.activeSidebarMessage = null;
+      this.#walkthrough.inlineExpandedMessages = [];
+      this.requestUpdate();
+      return;
+    }
+
+    if (isNarrow) {
+      // Wide -> Inline: the walkthrough that was open stays expanded
+      this.#walkthrough.inlineExpandedMessages =
+          this.#walkthrough.activeSidebarMessage ? [this.#walkthrough.activeSidebarMessage] : [];
+    } else {
+      // Inline -> Wide: the last walkthrough that the user opened stays expanded
+      this.#walkthrough.activeSidebarMessage = this.#walkthrough.inlineExpandedMessages.at(-1) ?? null;
+    }
+
     this.requestUpdate();
   }
 
   #openWalkthrough(message: ModelChatMessage): void {
-    this.#walkthrough.activeMessage = message;
+    if (!this.#walkthrough.inlineExpandedMessages.includes(message)) {
+      this.#walkthrough.inlineExpandedMessages.push(message);
+    }
+    this.#walkthrough.activeSidebarMessage = message;
     this.#walkthrough.isExpanded = true;
     this.requestUpdate();
   }
 
-  #toggleWalkthrough(isOpen: boolean): void {
-    this.#walkthrough.isExpanded = isOpen;
+  /**
+   * Toggles the expanded state of a walkthrough.
+   *
+   * In Wide (sidebar) mode:
+   * - Opening a message's walkthrough shows the sidebar for that message.
+   * - Closing the sidebar hides the walkthrough for the currently active message.
+   *
+   * In Narrow (inline) mode:
+   * - Any number of walkthroughs can be open at once.
+   * - Opening/closing a message's walkthrough only affects that message's inline display.
+   */
+  #toggleWalkthrough(isOpen: boolean, message: ModelChatMessage): void {
+    if (isOpen) {  // If we are opening a walkthrough, ensure it's in our list of expanded messages.
+      this.#openWalkthrough(message);
+      return;
+    }
+
+    // If we are closing a walkthrough, remove it from the list of expanded messages.
+    this.#walkthrough.inlineExpandedMessages = this.#walkthrough.inlineExpandedMessages.filter(m => m !== message);
+
+    if (this.#walkthrough.isInlined) {
+      // In Narrow mode, the global expanded state tracks if at least one walkthrough is open.
+      this.#walkthrough.isExpanded = this.#walkthrough.inlineExpandedMessages.length > 0;
+      // If the message we just closed was the active one, we pick a new active message
+      // from the remaining open ones (if any). This ensures that if the user
+      // re-opens the sidebar later, it shows the most recently opened walkthrough.
+      if (this.#walkthrough.activeSidebarMessage === message) {
+        this.#walkthrough.activeSidebarMessage = this.#walkthrough.inlineExpandedMessages.at(-1) ?? null;
+      }
+    } else {
+      // In Wide mode, closing the sidebar means we are no longer expanded globally.
+      this.#walkthrough.isExpanded = false;
+      this.#walkthrough.activeSidebarMessage = null;
+    }
+
     this.requestUpdate();
   }
 
@@ -1563,9 +1631,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#updateConversationState();
   }
 
-  #clearWalkthrough(): void {
+  #resetWalkthrough(): void {
     this.#walkthrough.isExpanded = false;
-    this.#walkthrough.activeMessage = null;
+    this.#walkthrough.activeSidebarMessage = null;
+    this.#walkthrough.inlineExpandedMessages = [];
   }
 
   #onDeleteClicked(): void {
@@ -1574,7 +1643,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
 
     // Ensure we clear the walkthrough so it doesn't hold onto a chat that is about to be deleted.
-    this.#clearWalkthrough();
+    this.#resetWalkthrough();
 
     void AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().deleteHistoryEntry(this.#conversation.id);
     this.#updateConversationState();
@@ -1599,6 +1668,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #handleNewChatRequest(): void {
     this.#updateConversationState();
+    this.#resetWalkthrough();
     UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.newChatCreated));
 
     if (Annotations.AnnotationRepository.annotationsEnabled()) {