chrome-devtools-frontend 1.0.1590494 → 1.0.1591204

package/docs/ui_engineering.md

@@ -1383,6 +1383,39 @@ export const DEFAULT_VIEW = (input, _output, target) => {
 };
 ```
 
+In a more complex case you might want to skip rendering of the collapsed nodes
+subtrees and temporarily expand nodes to show search matches. This could be done
+as follows:
+
+```typescript
+export const DEFAULT_VIEW = (input, _output, target) => {
+  render(html`
+    <div>
+      <devtools-tree .template=${html`
+        <ul role="tree">
+          ${input.topLevelNodes.map(node => html`
+            <li role="treeitem" ?open=${containsSearchResult(node)}>
+              ${node.name}
+              ${node.children.length ? html`
+                <ul role="group">
+                  ${ifExpanded(node.children.map(renderChild))}
+                </ul>
+              ` : nothing}
+            </li>`)}
+        </ul>
+      `}></devtools-tree>
+    </div>`,
+    target, {host: input});
+};
+```
+
+Here `open` attribute overrides the expansion state set by the user. Once `open`
+attribute is removed, the expansion state is reversed to the last state set by
+the user.
+
+`ifExpanded` is a lit directive provided on `UI.TreeOutline` and it makes its
+argument render only if the current tree node is expanded.
+
 ## Refactoring UI.Toolbar.Provider
 
 As part of the migration, sometimes classes need to be broken up into smaller pieces. Classes implementing

package/front_end/core/common/Gzip.ts

@@ -37,11 +37,26 @@ export async function fileToString(file: File): Promise<string> {
  * Decompress a gzipped ArrayBuffer to a string.
  * Consider using `arrayBufferToString` instead, which can handle both gzipped and plain text buffers.
  */
-export async function decompress(gzippedBuffer: ArrayBufferLike): Promise<string> {
+export async function decompress(gzippedBuffer: ArrayBufferLike, charset = 'utf-8'): Promise<string> {
   const buffer = await gzipCodec(gzippedBuffer, new DecompressionStream('gzip'));
-  const str = new TextDecoder('utf-8').decode(buffer);
+  const str = new TextDecoder(charset).decode(buffer);
   return str;
 }
+
+/**
+ * Decompress a deflate-encoded ArrayBuffer to a string.
+ * Tries 'deflate' (zlib wrapper) first, then falls back to 'deflate-raw'.
+ */
+export async function decompressDeflate(buffer: ArrayBufferLike, charset = 'utf-8'): Promise<string> {
+  let decompressedBuffer: ArrayBuffer;
+  try {
+    decompressedBuffer = await gzipCodec(buffer, new DecompressionStream('deflate'));
+  } catch {
+    // Try deflate-raw format if zlib-wrapped deflate fails.
+    decompressedBuffer = await gzipCodec(buffer, new DecompressionStream('deflate-raw'));
+  }
+  return new TextDecoder(charset).decode(decompressedBuffer);
+}
 export async function compress(str: string): Promise<ArrayBuffer> {
   const encoded = new TextEncoder().encode(str);
   const buffer = await gzipCodec(encoded, new CompressionStream('gzip'));

package/front_end/core/host/UserMetrics.ts

@@ -825,10 +825,11 @@ export enum DevtoolsExperiments {
   'use-source-map-scopes' = 76,
   'timeline-show-postmessage-events' = 86,
   'timeline-debug-mode' = 93,
+  'durable-messages' = 110,
   /* eslint-enable @typescript-eslint/naming-convention */
 
   // Increment this when new experiments are added.
-  MAX_VALUE = 110,
+  MAX_VALUE = 111,
 }
 
 /** Update DevToolsIssuesPanelIssueExpanded from tools/metrics/histograms/enums.xml if new enum is added. **/

package/front_end/core/root/ExperimentNames.ts

@@ -23,6 +23,7 @@ export enum ExperimentName {
   USE_SOURCE_MAP_SCOPES = 'use-source-map-scopes',
   TIMELINE_SHOW_POST_MESSAGE_EVENTS = 'timeline-show-postmessage-events',
   TIMELINE_DEBUG_MODE = 'timeline-debug-mode',
+  DURABLE_MESSAGES = 'durable-messages',
   // Adding or removing an entry from this enum?
   // You will need to update:
   // 1. DevToolsExperiments enum in host/UserMetrics.ts

package/front_end/core/root/Runtime.ts

@@ -534,6 +534,10 @@ export interface HostConfigAnimationStylesInStylesTab {
   enabled: boolean;
 }
 
+export interface HostConfigJpegXlImageFormat {
+  enabled: boolean;
+}
+
 export interface HostConfigThirdPartyCookieControls {
   thirdPartyCookieRestrictionEnabled: boolean;
   thirdPartyCookieMetadataEnabled: boolean;
@@ -641,6 +645,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   isOffTheRecord: boolean,
   devToolsEnableOriginBoundCookies: HostConfigEnableOriginBoundCookies,
   devToolsAnimationStylesInStylesTab: HostConfigAnimationStylesInStylesTab,
+  devToolsJpegXlImageFormat: HostConfigJpegXlImageFormat,
   thirdPartyCookieControls: HostConfigThirdPartyCookieControls,
   devToolsAiGeneratedTimelineLabels: AiGeneratedTimelineLabels,
   devToolsAllowPopoverForcing: AllowPopoverForcing,

package/front_end/core/sdk/EmulationModel.ts

@@ -191,6 +191,7 @@ export class EmulationModel extends SDKModel<void> {
     }
 
     const avifFormatDisabledSetting = Common.Settings.Settings.instance().moduleSetting('avif-format-disabled');
+    const jpegXlFormatDisabledSetting = Common.Settings.Settings.instance().moduleSetting('jpeg-xl-format-disabled');
     const webpFormatDisabledSetting = Common.Settings.Settings.instance().moduleSetting('webp-format-disabled');
 
     const updateDisabledImageFormats = (): void => {
@@ -198,6 +199,9 @@ export class EmulationModel extends SDKModel<void> {
       if (avifFormatDisabledSetting.get()) {
         types.push(Protocol.Emulation.DisabledImageType.Avif);
       }
+      if (jpegXlFormatDisabledSetting.get()) {
+        types.push(Protocol.Emulation.DisabledImageType.Jxl);
+      }
       if (webpFormatDisabledSetting.get()) {
         types.push(Protocol.Emulation.DisabledImageType.Webp);
       }
@@ -205,9 +209,10 @@ export class EmulationModel extends SDKModel<void> {
     };
 
     avifFormatDisabledSetting.addChangeListener(updateDisabledImageFormats);
+    jpegXlFormatDisabledSetting.addChangeListener(updateDisabledImageFormats);
     webpFormatDisabledSetting.addChangeListener(updateDisabledImageFormats);
 
-    if (avifFormatDisabledSetting.get() || webpFormatDisabledSetting.get()) {
+    if (avifFormatDisabledSetting.get() || jpegXlFormatDisabledSetting.get() || webpFormatDisabledSetting.get()) {
       updateDisabledImageFormats();
     }
 

package/front_end/core/sdk/NetworkManager.ts

@@ -277,13 +277,56 @@ export class NetworkManager extends SDKModel<EventTypes> {
       return null;
     }
     try {
-      const {postData} = await manager.#networkAgent.invoke_getRequestPostData({requestId});
+      const {postData, base64Encoded} = await manager.#networkAgent.invoke_getRequestPostData({requestId});
+      if (base64Encoded && postData) {
+        // Decode base64 to get raw bytes as an ArrayBuffer.
+        const binaryString = window.atob(postData);
+        const bytes = new Uint8Array(binaryString.length);
+        for (let i = 0; i < binaryString.length; i++) {
+          bytes[i] = binaryString.charCodeAt(i);
+        }
+
+        // Extract charset from request Content-Type header, defaulting to utf-8.
+        const requestContentType = request.requestContentType();
+        const charset =
+            requestContentType ? Platform.MimeType.parseContentType(requestContentType).charset ?? 'utf-8' : 'utf-8';
+
+        // If the request body is compressed, attempt to decompress it.
+        const contentEncoding = request.requestContentEncoding()?.toLowerCase();
+        if (contentEncoding) {
+          const decompressed = await NetworkManager.#tryDecompressBody(bytes.buffer, contentEncoding, charset);
+          if (decompressed !== null) {
+            return decompressed;
+          }
+        }
+
+        // Not compressed or decompression not applicable -- decode as text.
+        return new TextDecoder(charset).decode(bytes);
+      }
       return postData;
     } catch (e) {
       return e.message;
     }
   }
 
+  /**
+   * Attempts to decompress a compressed request body.
+   * Returns the decompressed string, or null if decompression is not applicable.
+   */
+  static async #tryDecompressBody(buffer: ArrayBuffer, encoding: string, charset: string): Promise<string|null> {
+    try {
+      if (encoding.includes('gzip') && Common.Gzip.isGzip(buffer)) {
+        return await Common.Gzip.decompress(buffer, charset);
+      }
+      if (encoding.includes('deflate')) {
+        return await Common.Gzip.decompressDeflate(buffer, charset);
+      }
+    } catch (e) {
+      console.warn('Failed to decompress request body:', e);
+    }
+    return null;
+  }
+
   static connectionType(conditions: Conditions): Protocol.Network.ConnectionType {
     if (!conditions.download && !conditions.upload) {
       return Protocol.Network.ConnectionType.None;
@@ -567,7 +610,11 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
   private updateNetworkRequestWithRequest(networkRequest: NetworkRequest, request: Protocol.Network.Request): void {
     networkRequest.requestMethod = request.method;
     networkRequest.setRequestHeaders(this.headersMapToHeadersArray(request.headers));
-    networkRequest.setRequestFormData(Boolean(request.hasPostData), request.postData || null);
+    // If the request body is compressed, discard the inline postData which is
+    // garbled (binary-as-text). The getRequestPostData command will provide
+    // properly base64-encoded data that we can decompress.
+    const isCompressed = Boolean(networkRequest.requestContentEncoding());
+    networkRequest.setRequestFormData(Boolean(request.hasPostData), isCompressed ? null : (request.postData || null));
     networkRequest.setInitialPriority(request.initialPriority);
     networkRequest.mixedContentType = request.mixedContentType || Protocol.Security.MixedContentType.None;
     networkRequest.setReferrerPolicy(request.referrerPolicy);

package/front_end/core/sdk/NetworkRequest.ts

@@ -1471,6 +1471,10 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     return this.requestHeaderValue('Content-Type');
   }
 
+  requestContentEncoding(): string|undefined {
+    return this.requestHeaderValue('Content-Encoding');
+  }
+
   hasErrorStatusCode(): boolean {
     return this.statusCode >= 400;
   }

package/front_end/core/sdk/sdk-meta.ts

@@ -313,6 +313,14 @@ const UIStrings = {
    * @description Title of a setting that enables AVIF format
    */
   enableAvifFormat: 'Enable `AVIF` format',
+  /**
+   * @description Title of a setting that disables JPEG XL format
+   */
+  disableJpegXlFormat: 'Disable `JPEG XL` format',
+  /**
+   * @description Title of a setting that enables JPEG XL format
+   */
+  enableJpegXlFormat: 'Enable `JPEG XL` format',
   /**
    * @description Title of a setting that disables WebP format
    */
@@ -1072,6 +1080,24 @@ Common.Settings.registerSettingExtension({
   defaultValue: false,
 });
 
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.RENDERING,
+  settingName: 'jpeg-xl-format-disabled',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.disableJpegXlFormat),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.enableJpegXlFormat),
+    },
+  ],
+  defaultValue: false,
+});
+
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.RENDERING,
   settingName: 'webp-format-disabled',

package/front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -7,6 +7,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -145,10 +146,14 @@ const UIStrings = {
    */
   disableAvifImageFormat: 'Disable `AVIF` image format',
   /**
-   * @description Explanation text for both the 'Disable AVIF image format' and 'Disable WebP image
-   * format' settings in the Rendering tool.
+   * @description Explanation text for the image format disabling settings in the Rendering tool.
    */
   requiresAPageReloadToApplyAnd: 'Requires a page reload to apply and disables caching for image requests.',
+  /**
+   * @description The name of a checkbox setting in the Rendering tool. This setting disables the
+   * page from loading images with the JPEG XL format.
+   */
+  disableJpegXlImageFormat: 'Disable `JPEG XL` image format',
   /**
    * @description The name of a checkbox setting in the Rendering tool. This setting disables the
    * page from loading images with the WebP format.
@@ -184,7 +189,13 @@ const supportsPrefersContrast = (): boolean => {
   return window.matchMedia(query).matches;
 };
 
+const supportsJpegXl = (): boolean => {
+  return Boolean(Root.Runtime.hostConfig.devToolsJpegXlImageFormat?.enabled);
+};
+
 export class RenderingOptionsView extends UI.Widget.VBox {
+  #jpegXlCheckboxAdded = false;
+
   constructor() {
     super({useShadowDom: true});
     this.registerRequiredCSS(renderingOptionsStyles);
@@ -266,13 +277,19 @@ export class RenderingOptionsView extends UI.Widget.VBox {
 
     this.contentElement.createChild('div').classList.add('panel-section-separator');
 
+    const avifFormatDisabledSetting = Common.Settings.Settings.instance().moduleSetting('avif-format-disabled');
+    const jpegXlFormatDisabledSetting = Common.Settings.Settings.instance().moduleSetting('jpeg-xl-format-disabled');
+    const webpFormatDisabledSetting = Common.Settings.Settings.instance().moduleSetting('webp-format-disabled');
+
     this.#appendCheckbox(
         i18nString(UIStrings.disableAvifImageFormat), i18nString(UIStrings.requiresAPageReloadToApplyAnd),
-        Common.Settings.Settings.instance().moduleSetting('avif-format-disabled'));
+        avifFormatDisabledSetting);
 
-    this.#appendCheckbox(
+    const webpCheckbox = this.#appendCheckbox(
         i18nString(UIStrings.disableWebpImageFormat), i18nString(UIStrings.requiresAPageReloadToApplyAnd),
-        Common.Settings.Settings.instance().moduleSetting('webp-format-disabled'));
+        webpFormatDisabledSetting);
+
+    this.#appendJpegXlCheckboxWhenSupported(webpCheckbox, jpegXlFormatDisabledSetting);
 
     this.contentElement.createChild('div').classList.add('panel-section-separator');
   }
@@ -286,6 +303,18 @@ export class RenderingOptionsView extends UI.Widget.VBox {
     return checkbox;
   }
 
+  #appendJpegXlCheckboxWhenSupported(
+      webpCheckbox: UI.UIUtils.CheckboxLabel, jpegXlFormatDisabledSetting: Common.Settings.Setting<boolean>): void {
+    if (this.#jpegXlCheckboxAdded || !supportsJpegXl()) {
+      return;
+    }
+
+    this.#jpegXlCheckboxAdded = true;
+    webpCheckbox.before(this.#appendCheckbox(
+        i18nString(UIStrings.disableJpegXlImageFormat), i18nString(UIStrings.requiresAPageReloadToApplyAnd),
+        jpegXlFormatDisabledSetting));
+  }
+
   #appendSelect(label: string, setting: Common.Settings.Setting<unknown>): void {
     const control = SettingsUI.SettingsUI.createControlForSetting(setting, label);
     if (control) {

package/front_end/entrypoints/main/MainImpl.ts

@@ -423,6 +423,14 @@ export class MainImpl {
         'Performance panel: show postMessage dispatch and handling flows',
     );
 
+    Root.Runtime.experiments.registerHostExperiment({
+      name: Root.ExperimentNames.ExperimentName.DURABLE_MESSAGES,
+      title: 'Durable Messages',
+      aboutFlag: 'devtools-enable-durable-messages',
+      isEnabled: Root.Runtime.hostConfig.devToolsEnableDurableMessages?.enabled ?? false,
+      requiresChromeRestart: false,
+    });
+
     Root.Runtime.experiments.enableExperimentsByDefault([
       Root.ExperimentNames.ExperimentName.FULL_ACCESSIBILITY_TREE,
       Root.ExperimentNames.ExperimentName.USE_SOURCE_MAP_SCOPES,

package/front_end/generated/InspectorBackendCommands.ts

@@ -557,6 +557,7 @@ inspectorBackend.registerCommand("Emulation.setSmallViewportHeightDifferenceOver
 inspectorBackend.registerCommand("Emulation.getScreenInfos", [], ["screenInfos"], "Returns device's screen configuration. In headful mode, the physical screens configuration is returned, whereas in headless mode, a virtual headless screen configuration is provided instead.");
 inspectorBackend.registerCommand("Emulation.addScreen", [{"name": "left", "type": "number", "optional": false, "description": "Offset of the left edge of the screen in pixels.", "typeRef": null}, {"name": "top", "type": "number", "optional": false, "description": "Offset of the top edge of the screen in pixels.", "typeRef": null}, {"name": "width", "type": "number", "optional": false, "description": "The width of the screen in pixels.", "typeRef": null}, {"name": "height", "type": "number", "optional": false, "description": "The height of the screen in pixels.", "typeRef": null}, {"name": "workAreaInsets", "type": "object", "optional": true, "description": "Specifies the screen's work area. Default is entire screen.", "typeRef": "Emulation.WorkAreaInsets"}, {"name": "devicePixelRatio", "type": "number", "optional": true, "description": "Specifies the screen's device pixel ratio. Default is 1.", "typeRef": null}, {"name": "rotation", "type": "number", "optional": true, "description": "Specifies the screen's rotation angle. Available values are 0, 90, 180 and 270. Default is 0.", "typeRef": null}, {"name": "colorDepth", "type": "number", "optional": true, "description": "Specifies the screen's color depth in bits. Default is 24.", "typeRef": null}, {"name": "label", "type": "string", "optional": true, "description": "Specifies the descriptive label for the screen. Default is none.", "typeRef": null}, {"name": "isInternal", "type": "boolean", "optional": true, "description": "Indicates whether the screen is internal to the device or external, attached to the device. Default is false.", "typeRef": null}], ["screenInfo"], "Add a new screen to the device. Only supported in headless mode.");
 inspectorBackend.registerCommand("Emulation.removeScreen", [{"name": "screenId", "type": "string", "optional": false, "description": "", "typeRef": "Emulation.ScreenId"}], [], "Remove screen from the device. Only supported in headless mode.");
+inspectorBackend.registerCommand("Emulation.setPrimaryScreen", [{"name": "screenId", "type": "string", "optional": false, "description": "", "typeRef": "Emulation.ScreenId"}], [], "Set primary screen. Only supported in headless mode. Note that this changes the coordinate system origin to the top-left of the new primary screen, updating the bounds and work areas of all existing screens accordingly.");
 inspectorBackend.registerType("Emulation.SafeAreaInsets", [{"name": "top", "type": "number", "optional": true, "description": "Overrides safe-area-inset-top.", "typeRef": null}, {"name": "topMax", "type": "number", "optional": true, "description": "Overrides safe-area-max-inset-top.", "typeRef": null}, {"name": "left", "type": "number", "optional": true, "description": "Overrides safe-area-inset-left.", "typeRef": null}, {"name": "leftMax", "type": "number", "optional": true, "description": "Overrides safe-area-max-inset-left.", "typeRef": null}, {"name": "bottom", "type": "number", "optional": true, "description": "Overrides safe-area-inset-bottom.", "typeRef": null}, {"name": "bottomMax", "type": "number", "optional": true, "description": "Overrides safe-area-max-inset-bottom.", "typeRef": null}, {"name": "right", "type": "number", "optional": true, "description": "Overrides safe-area-inset-right.", "typeRef": null}, {"name": "rightMax", "type": "number", "optional": true, "description": "Overrides safe-area-max-inset-right.", "typeRef": null}]);
 inspectorBackend.registerType("Emulation.ScreenOrientation", [{"name": "type", "type": "string", "optional": false, "description": "Orientation type.", "typeRef": null}, {"name": "angle", "type": "number", "optional": false, "description": "Orientation angle.", "typeRef": null}]);
 inspectorBackend.registerType("Emulation.DisplayFeature", [{"name": "orientation", "type": "string", "optional": false, "description": "Orientation of a display feature in relation to screen", "typeRef": null}, {"name": "offset", "type": "number", "optional": false, "description": "The offset from the screen origin in either the x (for vertical orientation) or y (for horizontal orientation) direction.", "typeRef": null}, {"name": "maskLength", "type": "number", "optional": false, "description": "A display feature may mask content such that it is not physically displayed - this length along with the offset describes this area. A display feature that only splits content will have a 0 mask_length.", "typeRef": null}]);

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

@@ -2782,6 +2782,16 @@ export namespace ProtocolMapping {
       paramsType: [Protocol.Emulation.RemoveScreenRequest];
       returnType: void;
     };
+    /**
+     * Set primary screen. Only supported in headless mode.
+     * Note that this changes the coordinate system origin to the top-left
+     * of the new primary screen, updating the bounds and work areas
+     * of all existing screens accordingly.
+     */
+    'Emulation.setPrimaryScreen': {
+      paramsType: [Protocol.Emulation.SetPrimaryScreenRequest];
+      returnType: void;
+    };
     /**
      * Sets breakpoint on particular native event.
      */

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

@@ -1852,6 +1852,14 @@ declare namespace ProtocolProxyApi {
      */
     invoke_removeScreen(params: Protocol.Emulation.RemoveScreenRequest): Promise<Protocol.ProtocolResponseWithError>;
 
+    /**
+     * Set primary screen. Only supported in headless mode.
+     * Note that this changes the coordinate system origin to the top-left
+     * of the new primary screen, updating the bounds and work areas
+     * of all existing screens accordingly.
+     */
+    invoke_setPrimaryScreen(params: Protocol.Emulation.SetPrimaryScreenRequest): Promise<Protocol.ProtocolResponseWithError>;
+
   }
   export interface EmulationDispatcher {
     /**

package/front_end/generated/protocol.ts

@@ -7550,6 +7550,10 @@ export namespace Emulation {
   export interface RemoveScreenRequest {
     screenId: ScreenId;
   }
+
+  export interface SetPrimaryScreenRequest {
+    screenId: ScreenId;
+  }
 }
 
 /**

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -6716,7 +6716,7 @@ export const NativeFunctions = [
     signatures: [["?options"]]
   },
   {
-    name: "getValueRange",
+    name: "createValueRange",
     signatures: [["start","end"]]
   },
   {
@@ -7021,6 +7021,10 @@ export const NativeFunctions = [
     name: "Highlight",
     signatures: [["...initRanges"]]
   },
+  {
+    name: "CanvasPaintEvent",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "getElementTransform",
     signatures: [["element","draw_transform"]]

package/front_end/panels/ai_assistance/README.md

@@ -69,3 +69,17 @@ The key to the walkthrough feature lies in the `parts` array of a `ModelChatMess
     -   `text`: The markdown-formatted text of the answer.
 
 A single `ModelChatMessage` will typically have **zero or more `StepPart`s** followed by **one `AnswerPart`**. This structure allows the UI to first show the final answer and provide the option to progressively disclose the "thinking" steps that led to it via the `WalkthroughView`.
+
+## Understanding Step Loading States
+
+There are two distinct `isLoading` properties related to the AI's response generation, serving different purposes:
+
+1.  **`step.isLoading`**: This property resides within a single `Step` object and indicates the immediate parsing status of that specific step from the AI's response stream. It becomes `true` when a new step begins (e.g., "Querying...") and is set to `false` almost immediately once the first piece of meaningful information for that step (like a "thought" or a "code" block) is received. Essentially, it's a short-lived internal parsing state.
+
+2.  **Conversation `isLoading`** (passed down to the `ChatMessage` component): This top-level property reflects the overall state of the entire conversation's response generation process. It is set to `true` as soon as the user submits a query and remains `true` until the AI has completed its entire thought process, including all steps, and has provided the final answer.
+
+The spinner displayed next to a step in the UI is intentionally tied to the **conversation `isLoading`** property, not the individual `step.isLoading`. This design choice provides a better user experience by:
+
+*   **Providing Continuous Feedback**: Using the conversation's `isLoading` ensures a persistent visual indicator that the AI is actively working on the query, even if individual steps are quickly parsed. This prevents the UI from appearing unresponsive.
+*   **Avoiding a "Stuck" Feeling**: If the spinner were tied to `step.isLoading`, it would flicker on and off rapidly, potentially making the user feel that the AI has stopped processing or is stuck.
+*   **Clear Progress Visualization**: The spinner is dynamically moved to the *last* active step in the list as long as the overall conversation is loading. Once a step is completed, it receives a checkmark, and the spinner moves to the next active step.

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

@@ -386,12 +386,15 @@ function renderTextAsMarkdown(text: string, markdownRenderer: MarkdownLitRendere
   // clang-format on
 }
 
+function titleForStep(step: Step): string {
+  return step.title ?? `${lockedString(UIStringsNotTranslate.investigating)}…`;
+}
+
 function renderTitle(step: Step): Lit.LitTemplate {
   const paused =
       step.sideEffect ? html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` : Lit.nothing;
-  const actionTitle = step.title ?? `${lockedString(UIStringsNotTranslate.investigating)}…`;
 
-  return html`<span class="title">${paused}${actionTitle}</span>`;
+  return html`<span class="title">${paused}${titleForStep(step)}</span>`;
 }
 
 function renderStepCode(step: Step): Lit.LitTemplate {
@@ -470,6 +473,41 @@ function renderStepDetails({
   // clang-format on
 }
 
+function renderWalkthroughSidebarButton(
+    input: ChatMessageViewInput,
+    lastStep: Step,
+    ): Lit.LitTemplate {
+  const {message, walkthrough} = input;
+  if (walkthrough.isInlined) {
+    return Lit.nothing;
+  }
+  const title = input.isLoading ? titleForStep(lastStep) : lockedString(UIStringsNotTranslate.showThinking);
+
+  // clang-format off
+  return html`
+    <div class="walkthrough-toggle-container">
+      ${input.isLoading ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
+      <devtools-button
+        .variant=${Buttons.Button.Variant.OUTLINED}
+        .size=${Buttons.Button.Size.SMALL}
+        .title=${lastStep.isLoading ? titleForStep(lastStep) : lockedString(UIStringsNotTranslate.showThinking)}
+        .jslogContext=${walkthrough.isExpanded ? 'ai-hide-walkthrough-sidebar' : 'ai-show-walkthrough-sidebar'}
+        data-show-walkthrough
+        @click=${() => {
+          if(walkthrough.isExpanded) {
+            walkthrough.onToggle(false);
+          } else {
+            // Can't just toggle the visibility here; we need to ensure we
+            // update the state with this message as the user could have had
+            // the walkthrough open with an alternative message.
+            walkthrough.onOpen(message as ModelChatMessage);
+          }
+        }}
+      >${title}</devtools-button>
+    </div>
+  `;
+  // clang-format on
+}
 /**
  * Responsible for rendering the AI Walkthrough UI. This can take different
  * shapes and involve different parts depending on if the walkthrough is
@@ -477,36 +515,16 @@ function renderStepDetails({
  * view them.
  */
 function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.LitTemplate {
-  if (steps.length === 0) {
+  const lastStep = steps.at(-1);
+  if (!lastStep) {
+    // No steps = no walkthrough UI in the chat view.
     return Lit.nothing;
   }
-
   const sideEffectSteps = steps.filter(s => s.sideEffect);
-
   // If the walkthrough is in the sidebar, we render a button into the
   // ChatView to open it.
-  // clang-format off
-  const openWalkThroughSidebarButton = !input.walkthrough.isInlined ? html`
-      <div class="walkthrough-toggle-container">
-        <devtools-button
-          .variant=${Buttons.Button.Variant.OUTLINED}
-          .size=${Buttons.Button.Size.SMALL}
-          .title=${lockedString(UIStringsNotTranslate.showThinking)}
-          .jslogContext=${'ai-show-walkthrough'}
-          @click=${() => {
-            if(input.walkthrough.isExpanded) {
-              input.walkthrough.onToggle(false);
-            } else {
-              // Can't just toggle the visibility here; we need to ensure we
-              // update the state with this message as the user could have had
-              // the walkthrough open with an alternative message.
-              input.walkthrough.onOpen(input.message as ModelChatMessage);
-            }
-          }}
-        >${lockedString(UIStringsNotTranslate.showThinking)}</devtools-button>
-      </div>
-  ` : Lit.nothing;
-  // clang-format on
+  const openWalkThroughSidebarButton =
+      !input.walkthrough.isInlined ? renderWalkthroughSidebarButton(input, lastStep) : Lit.nothing;
 
   // If there are side-effect steps, and the walkthrough is not open, we render
   // those inline so that the user can see them and approve them.

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

@@ -348,4 +348,10 @@
     display: flex;
     gap: var(--sys-size-4);
   }
+
+  .walkthrough-toggle-container {
+    display: flex;
+    gap: var(--sys-size-4);
+    align-items: center;
+  }
 }

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -127,10 +127,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
 const {html, render} = Lit;
+const {ifExpanded} = UI.TreeOutline;
 
-interface ViewOutput {
-  userExpandedCategories: Set<SDK.CategorizedBreakpoint.Category>;
-}
 interface ViewInput {
   onFilterChanged: (filterText: string|null) => void;
   onBreakpointChange: (breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean) => void;
@@ -139,14 +137,14 @@ interface ViewInput {
   onSpaceKeyDown: () => void;
 
   filterText: string|null;
-  userExpandedCategories: Set<SDK.CategorizedBreakpoint.Category>;
+  onExpandCollapse: () => void;
   highlightedItem: SDK.CategorizedBreakpoint.CategorizedBreakpoint|null;
   categories: Map<SDK.CategorizedBreakpoint.Category, SDK.CategorizedBreakpoint.CategorizedBreakpoint[]>;
   sortedCategoryNames: SDK.CategorizedBreakpoint.Category[];
 }
 
 export type View = typeof DEFAULT_VIEW;
-export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
+export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLElement): void => {
   const shouldExpandCategory = (breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[]): boolean =>
       Boolean(input.filterText) || (input.highlightedItem && breakpoints.includes(input.highlightedItem)) ||
       breakpoints.some(breakpoint => breakpoint.enabled());
@@ -193,23 +191,6 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
             'source-code': true,
             'breakpoint-hit': input.highlightedItem === breakpoint,
           });
-  const onExpand =
-      (category: SDK.CategorizedBreakpoint.Category, {detail: {expanded}}: UI.TreeOutline.TreeViewElement.ExpandEvent):
-          void => {
-            const breakpoints = category && input.categories.get(category);
-            if (!breakpoints) {
-              return;
-            }
-            if (shouldExpandCategory(breakpoints)) {
-              // Basically ignore expand/collapse when the category is expanded by default.
-              return;
-            }
-            if (expanded) {
-              output.userExpandedCategories.add(category);
-            } else {
-              output.userExpandedCategories.delete(category);
-            }
-          };
 
   const onKeyDown = (e: KeyboardEvent): void => {
     if (e.key === ' ') {
@@ -232,13 +213,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       <ul role="tree">
         ${filteredCategories.map(([category, breakpoints]) => html`
           <li @select=${() => input.onItemSelected(category)}
-              @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => onExpand(category, e)}
+              @expand=${() => input.onExpandCollapse()}
               role="treeitem"
               jslog-context=${category}
               aria-checked=${breakpoints.some(breakpoint => breakpoint.enabled())
                 ? breakpoints.some(breakpoint => !breakpoint.enabled()) ? 'mixed' : true
                 : false}
-              ?open=${shouldExpandCategory(breakpoints) || input.userExpandedCategories.has(category)}>
+              ?open=${shouldExpandCategory(breakpoints)}>
             <style>${categorizedBreakpointsSidebarPaneStyles}</style>
             <devtools-checkbox
               class="small"
@@ -250,22 +231,22 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
               @change=${(e: Event) => onCheckboxClicked(e, category)}
             >${getLocalizedCategory(category)}</devtools-checkbox>
             <ul role="group">
-              ${breakpoints.map(breakpoint => html`
-              <li @select=${() => input.onItemSelected(breakpoint)}
-                  role="treeitem"
-                  aria-checked=${breakpoint.enabled()}
-                  jslog-context=${Platform.StringUtilities.toKebabCase(breakpoint.name)}>
-                <div ?hidden=${breakpoint !== input.highlightedItem} class="breakpoint-hit-marker"></div>
-                <devtools-checkbox
-                  class=${classes(breakpoint)}
-                  tabIndex=-1
-                  title=${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}
-                  ?checked=${breakpoint.enabled()}
-                  aria-description=${breakpoint === input.highlightedItem ? i18nString(UIStrings.breakpointHit)
-                                                                          : Lit.nothing}
-                  @change=${(e: Event) => onCheckboxClicked(e, breakpoint)}
-                >${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}</devtools-checkbox>
-              </li>`)}
+              ${ifExpanded(html`${breakpoints.map(breakpoint => html`
+                <li @select=${() => input.onItemSelected(breakpoint)}
+                    role="treeitem"
+                    aria-checked=${breakpoint.enabled()}
+                    jslog-context=${Platform.StringUtilities.toKebabCase(breakpoint.name)}>
+                  <div ?hidden=${breakpoint !== input.highlightedItem} class="breakpoint-hit-marker"></div>
+                  <devtools-checkbox
+                    class=${classes(breakpoint)}
+                    tabIndex=-1
+                    title=${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}
+                    ?checked=${breakpoint.enabled()}
+                    aria-description=${breakpoint === input.highlightedItem ? i18nString(UIStrings.breakpointHit)
+                                                                            : Lit.nothing}
+                    @change=${(e: Event) => onCheckboxClicked(e, breakpoint)}
+                  >${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}</devtools-checkbox>
+                </li>`)}`)}
             </ul>
           </li>`)}
       </ul>`}>
@@ -282,7 +263,6 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   #highlightedItem: SDK.CategorizedBreakpoint.CategorizedBreakpoint|null = null;
   #filterText: string|null = null;
   #view: View;
-  #userExpandedCategories = new Set<SDK.CategorizedBreakpoint.Category>();
   #selectedItem: SDK.CategorizedBreakpoint.Category|SDK.CategorizedBreakpoint.CategorizedBreakpoint|null = null;
   constructor(
       breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[], jslog: string, viewId: string,
@@ -375,12 +355,11 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
       sortedCategoryNames: this.#sortedCategories,
       categories: this.categories,
       highlightedItem: this.#highlightedItem,
-      userExpandedCategories: this.#userExpandedCategories,
-    };
-    const output: ViewOutput = {
-      userExpandedCategories: this.#userExpandedCategories,
+      onExpandCollapse: () => {
+        this.requestUpdate();
+      },
     };
-    this.#view(input, output, this.contentElement);
+    this.#view(input, undefined, this.contentElement);
   }
 }
 

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -299,7 +299,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null = null;
   private readonly showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
   private readonly groupComputedStylesSetting: Common.Settings.Setting<boolean>;
-  private filterRegex: RegExp|null;
+  private filterRegex: RegExp|null = null;
   private readonly linkifier: Components.Linkifier.Linkifier;
   private readonly imagePreviewPopover: ImagePreviewPopover;
   /**
@@ -324,8 +324,15 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   #computedStylesTree = new TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>();
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
   readonly #view: View;
+
+  /**
+   * TODO(b/407751272): the state here is confusing (3 instance variables relating to filtering).
+   * There is also a bug where the Toolbar Input's regex flag cannot be
+   * controlled, so if you set a regex filter here, the toolbar might not
+   * reflect it.
+   */
   #filterText = '';
-  #isRegex = false;
+  #filterIsRegex = false;
   #includeToolbar = true;
 
   constructor() {
@@ -361,12 +368,31 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     this.#computedStylesTree.classList.toggle('computed-narrow', isNarrow);
   }
 
+  get filterText(): string {
+    return this.#filterText;
+  }
+
+  get filterIsRegex(): boolean {
+    return this.#filterIsRegex;
+  }
+
+  set filterText(newFilter: RegExp|string) {
+    if (typeof newFilter === 'string') {
+      this.#filterText = newFilter;
+      this.#filterIsRegex = false;
+    } else {
+      this.#filterText = newFilter.source;
+      this.#filterIsRegex = true;
+    }
+    this.requestUpdate();
+  }
+
   get includeToolbar(): boolean {
     return this.#includeToolbar;
   }
 
-  set includeToolbar(x: boolean) {
-    this.#includeToolbar = x;
+  set includeToolbar(inc: boolean) {
+    this.#includeToolbar = inc;
     this.requestUpdate();
   }
 
@@ -668,7 +694,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     if (!text) {
       return null;
     }
-    if (this.#isRegex) {
+    if (this.#filterIsRegex) {
       try {
         return new RegExp(text, 'i');
       } catch {
@@ -679,7 +705,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   }
 
   private async onRegexToggled(): Promise<void> {
-    this.#isRegex = !this.#isRegex;
+    this.#filterIsRegex = !this.#filterIsRegex;
     await this.filterComputedStyles(this.#buildFilterRegex(this.#filterText));
   }
 
@@ -701,11 +727,6 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     return this.filterAlphabeticalList();
   }
 
-  setFilterInput(text: string): void {
-    this.#filterText = text;
-    this.requestUpdate();
-  }
-
   private nodeFilter(node: TreeOutline.TreeOutlineUtils.TreeNode<ComputedStyleData>): boolean {
     const regex = this.filterRegex;
     const data = node.treeNodeData;

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -2896,7 +2896,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const regex = new RegExp(propertyNamePattern, 'i');
     await computedStyleWidget.filterComputedStyles(regex);
 
-    computedStyleWidget.setFilterInput(this.property.name);
+    computedStyleWidget.filterText = this.property.name;
   }
 
   private copyCssDeclarationAsJs(): void {

package/front_end/panels/network/RequestPayloadView.ts

@@ -52,6 +52,7 @@ import {ShowMoreDetailsWidget} from './ShowMoreDetailsWidget.js';
 
 const {classMap} = Directives;
 const {widgetConfig} = UI.Widget;
+const {ifExpanded} = UI.TreeOutline;
 const UIStrings = {
   /**
    * @description A context menu item Payload View of the Network panel to copy a parsed value.
@@ -239,8 +240,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           ${input.decodeRequestParameters ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded)}
         </devtools-button>
         <ul role=group>
-          ${input.viewQueryParamSource ? createSourceText(input.queryString ?? '')
-                                       : createParsedParams(input.queryParameters ?? [])}
+          ${ifExpanded(input.viewQueryParamSource ? createSourceText(input.queryString ?? '')
+                                                  : createParsedParams(input.queryParameters ?? []))}
         </ul>
       </li>
       <li
@@ -263,8 +264,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           ${input.decodeRequestParameters ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded)}
         </devtools-button>
         <ul role=group>
-          ${input.viewFormParamSource ? createSourceText(input.formData ?? '')
-                                      : createParsedParams(input.formParameters ?? [])}
+          ${ifExpanded(input.viewFormParamSource ? createSourceText(input.formData ?? '')
+                                                 : createParsedParams(input.formParameters ?? []))}
         </ul>
       </li>
       <li
@@ -280,8 +281,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         <div class="selection fill"></div>${i18nString(UIStrings.requestPayload)}${
             createViewSourceToggle(input.viewJSONPayloadSource, input.setViewJSONPayloadSource)}
         <ul role=group>
-          ${!parsedFormData || input.viewJSONPayloadSource ? createSourceText(input.formData ?? '')
-                                                           : createPayload(parsedFormData)}
+          ${ifExpanded(!parsedFormData || input.viewJSONPayloadSource ? createSourceText(input.formData ?? '')
+                                                                      : createPayload(parsedFormData))}
         </ul>
       </li>
      </ul>

package/front_end/panels/search/SearchResultsPane.ts

@@ -31,6 +31,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/search/SearchResultsPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {ifExpanded} = UI.TreeOutline;
 
 interface SearchMatch {
   lineContent: string;
@@ -74,7 +75,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             <style>${searchResultsPaneStyles}</style>
             ${renderSearchResult(searchResult)}
             <ul role="group">
-              ${renderSearchMatches(searchResult, matches, onSelectMatch, onShowMoreMatches)}
+              ${ifExpanded(renderSearchMatches(searchResult, matches, onSelectMatch, onShowMoreMatches))}
             </ul>
           </li>`)}
       </ul>

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: 070c55b60dd29061a93f753a77d49c7a1a9688d6
+Revision: 68abf80f61173a7def1da1fad60f72a52ea0531e
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/legacy/Treeoutline.ts

@@ -1927,6 +1927,45 @@ export namespace TreeViewElement {
   }
 }
 
+export const ifExpanded = Lit.Directive.directive(class extends Lit.Directive.Directive {
+  #partInfo: {type: Lit.Directive.PartType, startNode: Node};
+  constructor(partInfo: Lit.Directive.PartInfo) {
+    if (partInfo.type !== Lit.Directive.PartType.CHILD) {
+      throw new Error('ifExpanded directive must be used in a child node');
+    }
+    super(partInfo);
+    this.#partInfo = partInfo as {type: Lit.Directive.PartType, startNode: Node};
+  }
+
+  render(content: Lit.LitTemplate|Iterable<Lit.LitTemplate>): Lit.LitTemplate|Iterable<Lit.LitTemplate> {
+    return this.#isInExpandedRow(this.#partInfo.startNode) ? content : Lit.nothing;
+  }
+
+  #isInExpandedRow(element: Node|null|undefined): boolean {
+    if (!element) {
+      return false;
+    }
+    if (!(element instanceof HTMLElement)) {
+      element = element.parentNode;
+    }
+    if (!(element instanceof HTMLElement)) {
+      return false;
+    }
+    element = element.closest('li[role="treeitem"]') ?? undefined;
+    if (!(element instanceof HTMLLIElement)) {
+      return false;
+    }
+    if (hasBooleanAttribute(element, 'open')) {
+      return true;
+    }
+    const node = TreeViewTreeElement.get(element);
+    if (!node) {
+      return false;
+    }
+    return node.expanded;
+  }
+});
+
 export class TreeElementWrapper extends HTMLElement {
   #treeElement?: TreeElement;
   set treeElement(treeElement: TreeElement) {

package/front_end/ui/legacy/components/source_frame/XMLView.ts

@@ -19,9 +19,12 @@ const UIStrings = {
    */
   find: 'Find',
 } as const;
+
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/source_frame/XMLView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html} = Lit;
+const {ifExpanded} = UI.TreeOutline;
+
 function* attributes(element: Element): Generator<Attr> {
   for (let i = 0; i < element.attributes.length; ++i) {
     const attributeNode = element.attributes.item(i);
@@ -135,23 +138,35 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     return {highlights, selected};
   }
 
-  function layOutNode(node: XMLTreeViewNode, populateSubtrees = false): Lit.LitTemplate {
+  function layOutNode(node: XMLTreeViewNode): Lit.LitTemplate {
     const onExpand = (event: UI.TreeOutline.TreeViewElement.ExpandEvent): void =>
         input.onExpand(node, event.detail.expanded);
     const {highlights, selected} = highlight(node, /* closeTag=*/ false);
 
+    const containsSearchResult = (node: XMLTreeViewNode): boolean => {
+      if (node === input.jumpToNextSearchResult?.node) {
+        return true;
+      }
+      for (const child of node.children()) {
+        if (containsSearchResult(child)) {
+          return true;
+        }
+      }
+      return false;
+    };
+
     // clang-format off
     return html`
       <li role="treeitem"
           ?selected=${input.jumpToNextSearchResult?.node === node}
           @expand=${onExpand}
-          ?open=${node.expanded || input.jumpToNextSearchResult?.node === node}>
+          ?open=${containsSearchResult(node)}>
         <devtools-highlight ranges=${highlights} current-range=${selected}>
           ${htmlView(node)}
         </devtools-highlight>
         ${node.children().length ? html`
           <ul role="group">
-            ${populateSubtrees || input.search ? subtree(node) : Lit.nothing}
+            ${ifExpanded(subtree(node))}
           </ul>` : Lit.nothing}
       </li>`;
     // clang-format on
@@ -165,7 +180,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     const {highlights, selected} = highlight(treeNode, /* closeTag=*/ true);
     // clang-format off
     return html`
-      ${children.map(child => layOutNode(child, treeNode.expanded))}
+      ${children.map(child => layOutNode(child))}
       ${treeNode.node instanceof Element ? html`
         <li role="treeitem">
           <devtools-highlight ranges=${highlights} current-range=${selected}>
@@ -184,7 +199,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       class="shadow-xml-view source-code"
       .template=${html`
         <ul role="tree">
-          ${input.xml.children().map(node => layOutNode(node, /* populateSubtrees=*/ true))}
+          ${input.xml.children().map(node => layOutNode(node))}
         </ul>`}
       ></devtools-tree>`,
       // clang-format on

package/front_end/ui/visual_logging/Debugging.ts

@@ -821,50 +821,67 @@ ${JSON.stringify(allLogs, null, 2)}
 
 let numMatchedEvents = 0;
 
+function recordUnmatchedEvent(
+    pendingExpectation: PendingEventExpectation, actualEvent: TestLogEntry, expectedEvent: TestLogEntry,
+    matchedImpressions: Set<string>): void {
+  const unmatched = {...actualEvent};
+  if ('impressions' in unmatched && 'impressions' in expectedEvent) {
+    unmatched.impressions = unmatched.impressions.filter(impression => {
+      const matched = expectedEvent.impressions.includes(impression);
+      if (matched) {
+        matchedImpressions.add(impression);
+      }
+      return !matched;
+    });
+  }
+  pendingExpectation.unmatchedEvents.push(unmatched);
+}
+
+function processMissingEvents(
+    pendingExpectation: PendingEventExpectation, expectedEventIndex: number, matchedImpressions: Set<string>): void {
+  pendingExpectation.missingEvents = pendingExpectation.expectedEvents.slice(expectedEventIndex);
+  for (const event of pendingExpectation.missingEvents) {
+    if ('impressions' in event) {
+      event.impressions = event.impressions.filter(impression => !matchedImpressions.has(impression));
+    }
+  }
+  pendingExpectation.missingEvents =
+      pendingExpectation.missingEvents.filter(event => !('impressions' in event) || event.impressions.length > 0);
+}
+
 function checkPendingEventExpectation(): void {
   if (!pendingEventExpectation) {
     return;
   }
-  const actualEvents = [...veDebugEventsLog] as TestLogEntry[];
-  let partialMatch = false;
+  const actualEvents = veDebugEventsLog as TestLogEntry[];
+  let actualEventIndex = 0;
+  let matchStarted = false;
   const matchedImpressions = new Set<string>();
   pendingEventExpectation.unmatchedEvents = [];
-  for (let i = 0; i < pendingEventExpectation.expectedEvents.length; ++i) {
-    const expectedEvent = pendingEventExpectation.expectedEvents[i];
-    while (true) {
-      if (actualEvents.length <= i) {
-        pendingEventExpectation.missingEvents = pendingEventExpectation.expectedEvents.slice(i);
-        for (const event of pendingEventExpectation.missingEvents) {
-          if ('impressions' in event) {
-            event.impressions = event.impressions.filter(impression => !matchedImpressions.has(impression));
-          }
-        }
-        pendingEventExpectation.missingEvents = pendingEventExpectation.missingEvents.filter(
-            event => !('impressions' in event) || event.impressions.length > 0);
-        return;
-      }
-      if (!compareVeEvents(actualEvents[i], expectedEvent)) {
-        if (partialMatch) {
-          const unmatched = {...actualEvents[i]};
-          if ('impressions' in unmatched && 'impressions' in expectedEvent) {
-            unmatched.impressions = unmatched.impressions.filter(impression => {
-              const matched = expectedEvent.impressions.includes(impression);
-              if (matched) {
-                matchedImpressions.add(impression);
-              }
-              return !matched;
-            });
-          }
-          pendingEventExpectation.unmatchedEvents.push(unmatched);
-        }
-        actualEvents.splice(i, 1);
-      } else {
-        partialMatch = true;
+
+  for (let expectedEventIndex = 0; expectedEventIndex < pendingEventExpectation.expectedEvents.length;
+       ++expectedEventIndex) {
+    const expectedEvent = pendingEventExpectation.expectedEvents[expectedEventIndex];
+    let found = false;
+    while (actualEventIndex < actualEvents.length) {
+      if (compareVeEvents(actualEvents[actualEventIndex], expectedEvent)) {
+        found = true;
+        matchStarted = true;
+        actualEventIndex++;
         break;
       }
+      if (matchStarted) {
+        recordUnmatchedEvent(
+            pendingEventExpectation, actualEvents[actualEventIndex], expectedEvent, matchedImpressions);
+      }
+      actualEventIndex++;
+    }
+    if (!found) {
+      processMissingEvents(pendingEventExpectation, expectedEventIndex, matchedImpressions);
+      return;
     }
   }
-  numMatchedEvents = veDebugEventsLog.length - actualEvents.length + pendingEventExpectation.expectedEvents.length;
+  numMatchedEvents = actualEventIndex;
   pendingEventExpectation.success();
 }
 

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -360,7 +360,8 @@ export const knownContextValues = new Set([
   'ai-code-generation-upgrade-dialog.manage-in-settings',
   'ai-code-generation-used',
   'ai-explorer',
-  'ai-show-walkthrough',
+  'ai-hide-walkthrough-sidebar',
+  'ai-show-walkthrough-sidebar',
   'ai_assistance',
   'align-content',
   'align-content-center',
@@ -1377,6 +1378,7 @@ export const knownContextValues = new Set([
   'drjones.sources-panel-context.performance',
   'drjones.sources-panel-context.script',
   'drop',
+  'durable-messages',
   'duration',
   'durationchange',
   'dynamic-local-setting',
@@ -2055,6 +2057,8 @@ export const knownContextValues = new Set([
   'java-script-disabled-true',
   'javascript',
   'javascript-context',
+  'jpeg-xl-format-disabled',
+  'jpeg-xl-format-disabled-true',
   'jpg-header',
   'js-event-listeners',
   'js-heap-total-size',

package/front_end/ui/visual_logging/LoggingEvents.ts

@@ -40,8 +40,11 @@ export const logResize = (loggable: Loggable, size: DOMRect): void => {
     return;
   }
   loggingState.size = size;
-  const resizeEvent: Host.InspectorFrontendHostAPI
-      .ResizeEvent = {veid: loggingState.veid, width: loggingState.size.width, height: loggingState.size.height};
+  const resizeEvent: Host.InspectorFrontendHostAPI.ResizeEvent = {
+    veid: loggingState.veid,
+    width: Math.round(loggingState.size.width),
+    height: Math.round(loggingState.size.height)
+  };
   Host.InspectorFrontendHost.InspectorFrontendHostInstance.recordResize(resizeEvent);
   processEventForDebugging('Resize', loggingState, {width: Math.round(size.width), height: Math.round(size.height)});
 };

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1590494"
+  "version": "1.0.1591204"
 }