chrome-devtools-frontend 1.0.1586699 → 1.0.1587572

package/front_end/entrypoint_template.html

@@ -14,7 +14,11 @@
     }
   }
 </style>
-<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' https://chrome-devtools-frontend.appspot.com">
+<meta
+  http-equiv="Content-Security-Policy"
+  content="default-src 'self' devtools: data:; style-src 'self' 'unsafe-inline' devtools:; object-src 'none'; script-src
+  'self' https://chrome-devtools-frontend.appspot.com; img-src 'self' data:; frame-src * data:; connect-src data:
+  https://chromeuxreport.googleapis.com 'self' devtools:;">
 <meta name="referrer" content="no-referrer">
 <script type="module" src="./entrypoints/%ENTRYPOINT_NAME%/%ENTRYPOINT_NAME%.js"></script>
 <link href="./application_tokens.css" rel="stylesheet">

package/front_end/generated/InspectorBackendCommands.ts

@@ -857,7 +857,7 @@ inspectorBackend.registerCommand("Network.disable", [], [], "Disables network tr
 inspectorBackend.registerCommand("Network.emulateNetworkConditions", [{"name": "offline", "type": "boolean", "optional": false, "description": "True to emulate internet disconnection.", "typeRef": null}, {"name": "latency", "type": "number", "optional": false, "description": "Minimum latency from request sent to response headers received (ms).", "typeRef": null}, {"name": "downloadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated download throughput (bytes/sec). -1 disables download throttling.", "typeRef": null}, {"name": "uploadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated upload throughput (bytes/sec).  -1 disables upload throttling.", "typeRef": null}, {"name": "connectionType", "type": "string", "optional": true, "description": "Connection type if known.", "typeRef": "Network.ConnectionType"}, {"name": "packetLoss", "type": "number", "optional": true, "description": "WebRTC packet loss (percent, 0-100). 0 disables packet loss emulation, 100 drops all the packets.", "typeRef": null}, {"name": "packetQueueLength", "type": "number", "optional": true, "description": "WebRTC packet queue length (packet). 0 removes any queue length limitations.", "typeRef": null}, {"name": "packetReordering", "type": "boolean", "optional": true, "description": "WebRTC packetReordering feature.", "typeRef": null}], [], "Activates emulation of network conditions. This command is deprecated in favor of the emulateNetworkConditionsByRule and overrideNetworkState commands, which can be used together to the same effect.");
 inspectorBackend.registerCommand("Network.emulateNetworkConditionsByRule", [{"name": "offline", "type": "boolean", "optional": false, "description": "True to emulate internet disconnection.", "typeRef": null}, {"name": "matchedNetworkConditions", "type": "array", "optional": false, "description": "Configure conditions for matching requests. If multiple entries match a request, the first entry wins.  Global conditions can be configured by leaving the urlPattern for the conditions empty. These global conditions are also applied for throttling of p2p connections.", "typeRef": "Network.NetworkConditions"}], ["ruleIds"], "Activates emulation of network conditions for individual requests using URL match patterns. Unlike the deprecated Network.emulateNetworkConditions this method does not affect `navigator` state. Use Network.overrideNetworkState to explicitly modify `navigator` behavior.");
 inspectorBackend.registerCommand("Network.overrideNetworkState", [{"name": "offline", "type": "boolean", "optional": false, "description": "True to emulate internet disconnection.", "typeRef": null}, {"name": "latency", "type": "number", "optional": false, "description": "Minimum latency from request sent to response headers received (ms).", "typeRef": null}, {"name": "downloadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated download throughput (bytes/sec). -1 disables download throttling.", "typeRef": null}, {"name": "uploadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated upload throughput (bytes/sec).  -1 disables upload throttling.", "typeRef": null}, {"name": "connectionType", "type": "string", "optional": true, "description": "Connection type if known.", "typeRef": "Network.ConnectionType"}], [], "Override the state of navigator.onLine and navigator.connection.");
-inspectorBackend.registerCommand("Network.enable", [{"name": "maxTotalBufferSize", "type": "number", "optional": true, "description": "Buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}, {"name": "maxResourceBufferSize", "type": "number", "optional": true, "description": "Per-resource buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}, {"name": "maxPostDataSize", "type": "number", "optional": true, "description": "Longest post body size (in bytes) that would be included in requestWillBeSent notification", "typeRef": null}, {"name": "reportDirectSocketTraffic", "type": "boolean", "optional": true, "description": "Whether DirectSocket chunk send/receive events should be reported.", "typeRef": null}, {"name": "enableDurableMessages", "type": "boolean", "optional": true, "description": "Enable storing response bodies outside of renderer, so that these survive a cross-process navigation. Requires maxTotalBufferSize to be set. Currently defaults to false. This field is being deprecated in favor of the dedicated configureDurableMessages command, due to the possibility of deadlocks when awaiting Network.enable before issuing Runtime.runIfWaitingForDebugger.", "typeRef": null}], [], "Enables network tracking, network events will now be delivered to the client.");
+inspectorBackend.registerCommand("Network.enable", [{"name": "maxTotalBufferSize", "type": "number", "optional": true, "description": "Buffer size in bytes to use when preserving network payloads (XHRs, etc). This is the maximum number of bytes that will be collected by this DevTools session.", "typeRef": null}, {"name": "maxResourceBufferSize", "type": "number", "optional": true, "description": "Per-resource buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}, {"name": "maxPostDataSize", "type": "number", "optional": true, "description": "Longest post body size (in bytes) that would be included in requestWillBeSent notification", "typeRef": null}, {"name": "reportDirectSocketTraffic", "type": "boolean", "optional": true, "description": "Whether DirectSocket chunk send/receive events should be reported.", "typeRef": null}, {"name": "enableDurableMessages", "type": "boolean", "optional": true, "description": "Enable storing response bodies outside of renderer, so that these survive a cross-process navigation. Requires maxTotalBufferSize to be set. Currently defaults to false. This field is being deprecated in favor of the dedicated configureDurableMessages command, due to the possibility of deadlocks when awaiting Network.enable before issuing Runtime.runIfWaitingForDebugger.", "typeRef": null}], [], "Enables network tracking, network events will now be delivered to the client.");
 inspectorBackend.registerCommand("Network.configureDurableMessages", [{"name": "maxTotalBufferSize", "type": "number", "optional": true, "description": "Buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}, {"name": "maxResourceBufferSize", "type": "number", "optional": true, "description": "Per-resource buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}], [], "Configures storing response bodies outside of renderer, so that these survive a cross-process navigation. If maxTotalBufferSize is not set, durable messages are disabled.");
 inspectorBackend.registerCommand("Network.getAllCookies", [], ["cookies"], "Returns all browser cookies. Depending on the backend support, will return detailed cookie information in the `cookies` field. Deprecated. Use Storage.getCookies instead.");
 inspectorBackend.registerCommand("Network.getCertificate", [{"name": "origin", "type": "string", "optional": false, "description": "Origin to get certificate for.", "typeRef": null}], ["tableNames"], "Returns the DER-encoded certificate.");

package/front_end/generated/protocol.ts

@@ -11896,6 +11896,8 @@ export namespace Network {
   export interface EnableRequest {
     /**
      * Buffer size in bytes to use when preserving network payloads (XHRs, etc).
+     * This is the maximum number of bytes that will be collected by this
+     * DevTools session.
      */
     maxTotalBufferSize?: integer;
     /**

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -15,7 +15,6 @@ import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrappe
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import * as NetworkComponents from '../network/components/components.js';
 import * as Network from '../network/network.js';
 
 import * as ApplicationComponents from './components/components.js';
@@ -545,7 +544,7 @@ export class RequestView extends UI.Widget.VBox {
     this.tabbedPane.appendTab(
         'headers', i18nString(UIStrings.headers),
         LegacyWrapper.LegacyWrapper.legacyWrapper(
-            UI.Widget.VBox, new NetworkComponents.RequestHeadersView.RequestHeadersView(request)));
+            UI.Widget.VBox, new Network.RequestHeadersView.RequestHeadersView(request)));
     this.tabbedPane.appendTab(
         'preview', i18nString(UIStrings.preview), new Network.RequestPreviewView.RequestPreviewView(request));
     this.tabbedPane.show(this.element);

package/front_end/panels/elements/ElementsPanel.ts

@@ -227,6 +227,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   domTreeButton?: HTMLElement;
   private selectedNodeOnReset?: SDK.DOMModel.DOMNode;
   private hasNonDefaultSelectedNode?: boolean;
+  #restorationGeneration = 0;
   private searchConfig?: UI.SearchableView.SearchConfig;
   private omitDefaultSelection?: boolean;
   private notFirstInspectElement?: boolean;
@@ -609,6 +610,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     if (focus) {
       this.selectedNodeOnReset = selectedNode;
       this.hasNonDefaultSelectedNode = true;
+      this.#restorationGeneration++;
     }
 
     const executionContexts = selectedNode.domModel().runtimeModel().executionContexts();
@@ -645,32 +647,128 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
 
     const savedSelectedNodeOnReset = this.selectedNodeOnReset;
-    void restoreNode.call(this, domModel, this.selectedNodeOnReset || null);
+    void this.restoreSelectedNodeAfterUpdate(domModel, this.selectedNodeOnReset || null, savedSelectedNodeOnReset);
+  }
+
+  /**
+   * Best-effort restoration of the previously focused node after a reload.
+   *
+   * The CDP path-based mechanism works well for stable DOMs, but can be
+   * unreliable for pages that render asynchronously after the initial
+   * document update. To improve reliability we retry a few times, and also
+   * fall back to evaluating a JS path (document.querySelector(...)) when
+   * possible.
+   *
+   * Node resolution (computation) is separated from view state updates:
+   * resolveNode returns a DOMNode|null, and this method handles selection.
+   */
+  private async restoreSelectedNodeAfterUpdate(
+      domModel: SDK.DOMModel.DOMModel, staleNode: SDK.DOMModel.DOMNode|null,
+      savedSelectedNodeOnReset: SDK.DOMModel.DOMNode|undefined): Promise<void> {
+    // Fast path: no previous node to restore -- just select the fallback
+    // synchronously so callers that check selection immediately still work.
+    if (!staleNode) {
+      this.trySetFallbackSelection(domModel);
+      return;
+    }
+
+    const nodePath = staleNode.path();
+
+    // Keep the panel usable quickly by selecting a reasonable default node as
+    // soon as we can, but continue trying to restore the stale node.
+    let didSetFallbackSelection = false;
 
-    async function restoreNode(
-        this: ElementsPanel, domModel: SDK.DOMModel.DOMModel, staleNode: SDK.DOMModel.DOMNode|null): Promise<void> {
-      const nodePath = staleNode ? staleNode.path() : null;
-      const restoredNodeId = nodePath ? await domModel.pushNodeByPathToFrontend(nodePath) : null;
+    // Retry with exponential-ish backoff, capping total wait at ~3s.
+    // Most async-rendered pages settle well within this window.
+    const attemptDelaysMs = [0, 250, 500, 1000, 1500];
 
+    // Capture the restoration generation so any user interaction (node
+    // selection, style editing, node reveal, etc.) cancels pending retries.
+    const restorationGeneration = this.#restorationGeneration;
+
+    for (let attempt = 0; attempt < attemptDelaysMs.length; ++attempt) {
       if (savedSelectedNodeOnReset !== this.selectedNodeOnReset) {
         return;
       }
-      let node = domModel.nodeForId(restoredNodeId);
-      if (!node) {
-        const inspectedDocument = domModel.existingDocument();
-        node = inspectedDocument ? inspectedDocument.body || inspectedDocument.documentElement : null;
+      if (this.hasNonDefaultSelectedNode || this.pendingNodeReveal ||
+          restorationGeneration !== this.#restorationGeneration) {
+        return;
       }
-      // If `node` is null here, the document hasn't been transmitted from the backend yet
-      // and isn't in a valid state to have a default-selected node. Another document update
-      // should be forthcoming. In the meantime, don't set the default-selected node or notify
-      // the test that it's ready, because it isn't.
-      if (node) {
-        this.setDefaultSelectedNode(node);
+
+      if (attemptDelaysMs[attempt]) {
+        await new Promise<void>(resolve => window.setTimeout(resolve, attemptDelaysMs[attempt]));
+      }
+
+      if (savedSelectedNodeOnReset !== this.selectedNodeOnReset) {
+        return;
+      }
+      if (this.hasNonDefaultSelectedNode || this.pendingNodeReveal ||
+          restorationGeneration !== this.#restorationGeneration) {
+        return;
+      }
+
+      // Computation: resolve the node without touching view state.
+      const restoredNode = await this.resolveNodeForRestoration(domModel, nodePath);
+
+      if (restoredNode) {
+        this.setDefaultSelectedNode(restoredNode);
         this.lastSelectedNodeSelectedForTest();
+        return;
+      }
+
+      if (!didSetFallbackSelection) {
+        // If we cannot compute a fallback selection yet, the document likely
+        // has not been transmitted from the backend and isn't in a valid state
+        // to have a default-selected node. Another document update should be
+        // forthcoming. In the meantime, don't notify tests that selection is
+        // ready, because it isn't.
+        if (!this.trySetFallbackSelection(domModel)) {
+          return;
+        }
+        didSetFallbackSelection = true;
       }
     }
   }
 
+  /**
+   * Attempts to resolve a DOM node by its CDP path.
+   * Pure computation -- does not modify view state.
+   */
+  private async resolveNodeForRestoration(domModel: SDK.DOMModel.DOMModel, nodePath: string|null):
+      Promise<SDK.DOMModel.DOMNode|null> {
+    try {
+      if (nodePath) {
+        const restoredNodeId = await domModel.pushNodeByPathToFrontend(nodePath);
+        const restoredNode = domModel.nodeForId(restoredNodeId);
+        if (restoredNode) {
+          return restoredNode;
+        }
+      }
+    } catch {
+      // CDP calls (pushNodeByPathToFrontend) can reject when the target or
+      // session is closed, e.g. if the page navigates again while we are
+      // retrying. Safe to swallow: we either retry on the next iteration or
+      // fall through to the fallback node.
+    }
+    return null;
+  }
+
+  private trySetFallbackSelection(domModel: SDK.DOMModel.DOMModel): boolean {
+    const inspectedDocument = domModel.existingDocument();
+    const fallbackNode = inspectedDocument ? inspectedDocument.body || inspectedDocument.documentElement : null;
+    if (!fallbackNode) {
+      return false;
+    }
+
+    this.setDefaultSelectedNode(fallbackNode);
+    this.lastSelectedNodeSelectedForTest();
+    return true;
+  }
+
+  cancelPendingRestoration(): void {
+    this.#restorationGeneration++;
+  }
+
   private lastSelectedNodeSelectedForTest(): void {
   }
 
@@ -1373,6 +1471,7 @@ export class DOMNodeRevealer implements Common.Revealer.Revealer<
       omitFocus?: boolean): Promise<void> {
     const panel = ElementsPanel.instance();
     panel.pendingNodeReveal = true;
+    panel.cancelPendingRestoration();
 
     return (new Promise<void>(revealPromise)).catch((reason: Error) => {
       let message: string;

package/front_end/panels/network/NetworkItemView.ts

@@ -22,6 +22,7 @@ import * as NetworkComponents from './components/components.js';
 import {EventSourceMessagesView} from './EventSourceMessagesView.js';
 import {RequestCookiesView} from './RequestCookiesView.js';
 import {RequestDeviceBoundSessionsView} from './RequestDeviceBoundSessionsView.js';
+import * as RequestHeadersView from './RequestHeadersView.js';
 import {RequestInitiatorView} from './RequestInitiatorView.js';
 import {RequestPayloadView} from './RequestPayloadView.js';
 import {RequestPreviewView} from './RequestPreviewView.js';
@@ -148,7 +149,7 @@ const requestToPreviewView = new WeakMap<SDK.NetworkRequest.NetworkRequest, Requ
 export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   #request: SDK.NetworkRequest.NetworkRequest;
   readonly #resourceViewTabSetting: Common.Settings.Setting<NetworkForward.UIRequestLocation.UIRequestTabs>;
-  readonly #headersViewComponent: NetworkComponents.RequestHeadersView.RequestHeadersView|undefined;
+  readonly #headersViewComponent: RequestHeadersView.RequestHeadersView|undefined;
   #payloadView: RequestPayloadView|null = null;
   readonly #responseView: RequestResponseView|undefined;
   #cookiesView: RequestCookiesView|null = null;
@@ -174,7 +175,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
           i18nString(UIStrings.headers));
     } else {
       this.#firstTab = NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT;
-      this.#headersViewComponent = new NetworkComponents.RequestHeadersView.RequestHeadersView(request);
+      this.#headersViewComponent = new RequestHeadersView.RequestHeadersView(request);
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT, i18nString(UIStrings.headers),
           LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.VBox, this.#headersViewComponent),
@@ -426,7 +427,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     this.#headersViewComponent?.revealHeader(section, header);
   }
 
-  getHeadersViewComponent(): NetworkComponents.RequestHeadersView.RequestHeadersView|undefined {
+  getHeadersViewComponent(): RequestHeadersView.RequestHeadersView|undefined {
     return this.#headersViewComponent;
   }
 }

package/front_end/panels/network/{components/RequestHeadersView.ts → RequestHeadersView.ts}

@@ -2,31 +2,26 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
-import '../../../ui/kit/kit.js';
-
-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 Platform from '../../../core/platform/platform.js';
-import * as SDK from '../../../core/sdk/sdk.js';
-import * as Persistence from '../../../models/persistence/persistence.js';
-import * as Workspace from '../../../models/workspace/workspace.js';
-import * as NetworkForward from '../../../panels/network/forward/forward.js';
-import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as Input from '../../../ui/components/input/input.js';
-import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-import * as Sources from '../../sources/sources.js';
-
-import {RequestHeaderSection} from './RequestHeaderSection.js';
-import requestHeadersViewStyles from './RequestHeadersView.css.js';
-import {
-  RESPONSE_HEADER_SECTION_DATA_KEY,
-  type ResponseHeaderSectionData,
-} from './ResponseHeaderSection.js';
+import '../../ui/kit/kit.js';
+
+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 Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as Persistence from '../../models/persistence/persistence.js';
+import * as Workspace from '../../models/workspace/workspace.js';
+import * as NetworkForward from '../../panels/network/forward/forward.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Input from '../../ui/components/input/input.js';
+import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
+import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as Sources from '../sources/sources.js';
+
+import * as NetworkComponents from './components/components.js';
 
 const RAW_HEADER_CUTOFF = 3000;
 const {render, html} = Lit;
@@ -105,7 +100,7 @@ const UIStrings = {
    */
   statusCode: 'Status Code',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestHeadersView.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/network/RequestHeadersView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
@@ -146,7 +141,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
   }
 
   #resetAndRefreshHeadersView(): void {
-    this.#request.deleteAssociatedData(RESPONSE_HEADER_SECTION_DATA_KEY);
+    this.#request.deleteAssociatedData(NetworkComponents.ResponseHeaderSection.RESPONSE_HEADER_SECTION_DATA_KEY);
     void this.render();
   }
 
@@ -194,7 +189,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       render(html`
-        <style>${requestHeadersViewStyles}</style>
+        <style>${NetworkComponents.RequestHeaderSection.requestHeadersViewStyles}</style>
         <style>${Input.checkboxStyles}</style>
         ${this.#renderGeneralSection()}
         ${this.#renderEarlyHintsHeaders()}
@@ -230,7 +225,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
           <devtools-early-hints-header-section .data=${{
         request: this.#request,
         toReveal: this.#toReveal,
-      } as ResponseHeaderSectionData}></devtools-early-hints-header-section>
+      } as NetworkComponents.ResponseHeaderSection.ResponseHeaderSectionData}></devtools-early-hints-header-section>
         `
     });
   }
@@ -260,7 +255,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
           <devtools-response-header-section .data=${{
             request: this.#request,
             toReveal: this.#toReveal,
-          } as ResponseHeaderSectionData} jslog=${
+          } as NetworkComponents.ResponseHeaderSection.ResponseHeaderSectionData} jslog=${
               VisualLogging.section('response-headers')}></devtools-response-header-section>
         `
     });
@@ -344,10 +339,11 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       contents: (this.#showRequestHeadersText && requestHeadersText) ?
           this.#renderRawHeaders(requestHeadersText, false) :
           html`
-          <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(RequestHeaderSection, {
-            request: this.#request,
-            toReveal: this.#toReveal,
-          })} jslog=${VisualLogging.section('request-headers')}></devtools-widget>`
+          <devtools-widget .widgetConfig=${
+              UI.Widget.widgetConfig(NetworkComponents.RequestHeaderSection.RequestHeaderSection, {
+                request: this.#request,
+                toReveal: this.#toReveal,
+              })} jslog=${VisualLogging.section('request-headers')}></devtools-widget>`
     });
   }
 

package/front_end/panels/network/components/RequestHeaderSection.ts

@@ -14,6 +14,9 @@ import * as NetworkForward from '../forward/forward.js';
 
 import {EditingAllowedStatus, type HeaderDescriptor} from './HeaderSectionRow.js';
 import requestHeaderSectionStyles from './RequestHeaderSection.css.js';
+import requestHeadersViewStyles from './RequestHeadersView.css.js';
+
+export {requestHeadersViewStyles};
 
 const {render, html} = Lit;
 

package/front_end/panels/network/components/components.ts

@@ -6,7 +6,6 @@ import * as DirectSocketConnectionView from './DirectSocketConnectionView.js';
 import * as EditableSpan from './EditableSpan.js';
 import * as HeaderSectionRow from './HeaderSectionRow.js';
 import * as RequestHeaderSection from './RequestHeaderSection.js';
-import * as RequestHeadersView from './RequestHeadersView.js';
 import * as RequestTrustTokensView from './RequestTrustTokensView.js';
 import * as ResponseHeaderSection from './ResponseHeaderSection.js';
 
@@ -15,7 +14,6 @@ export {
   EditableSpan,
   HeaderSectionRow,
   RequestHeaderSection,
-  RequestHeadersView,
   RequestTrustTokensView,
   ResponseHeaderSection,
 };

package/front_end/panels/network/network.ts

@@ -18,6 +18,7 @@ import './NetworkSearchScope.js';
 import './NetworkWaterfallColumn.js';
 import './RequestCookiesView.js';
 import './RequestHTMLView.js';
+import './RequestHeadersView.js';
 import './RequestInitiatorView.js';
 import './RequestResponseView.js';
 import './RequestPreviewView.js';
@@ -44,6 +45,7 @@ import * as NetworkWaterfallColumn from './NetworkWaterfallColumn.js';
 import * as RequestConditionsDrawer from './RequestConditionsDrawer.js';
 import * as RequestCookiesView from './RequestCookiesView.js';
 import * as RequestDeviceBoundSessionsView from './RequestDeviceBoundSessionsView.js';
+import * as RequestHeadersView from './RequestHeadersView.js';
 import * as RequestHTMLView from './RequestHTMLView.js';
 import * as RequestInitiatorView from './RequestInitiatorView.js';
 import * as RequestPayloadView from './RequestPayloadView.js';
@@ -72,6 +74,7 @@ export {
   RequestConditionsDrawer,
   RequestCookiesView,
   RequestDeviceBoundSessionsView,
+  RequestHeadersView,
   RequestHTMLView,
   RequestInitiatorView,
   RequestPayloadView,

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: 649f914735bb39cbd9bfe68673921ced1cc2e71f
+Revision: ca9006bfc6f6f58d2fcd25b7c78dbd3b1289f949
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/third_party/puppeteer/README.chromium

@@ -1,10 +1,10 @@
 Name: Puppeteer Core
 Short Name: Puppeteer Core
 URL: https://github.com/puppeteer/puppeteer/tree/main/packages/puppeteer-core
-Version: 24.37.4
+Version: 24.37.5
 License: Apache-2.0
 License File: LICENSE
-Revision: c771d9cc0c6c3611532e18d89291c2d734f736ab
+Revision: fcb37e3b3a4f6b55b6f81a40811243260bcea16f
 Security Critical: no
 Shipped: yes
 Update Mechanism: Autoroll

package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/revisions.d.ts

@@ -7,8 +7,8 @@
  * @internal
  */
 export declare const PUPPETEER_REVISIONS: Readonly<{
-    chrome: "145.0.7632.76";
-    'chrome-headless-shell': "145.0.7632.76";
+    chrome: "145.0.7632.77";
+    'chrome-headless-shell': "145.0.7632.77";
     firefox: "stable_147.0.4";
 }>;
 //# sourceMappingURL=revisions.d.ts.map

package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/revisions.js

@@ -10,8 +10,8 @@ exports.PUPPETEER_REVISIONS = void 0;
  * @internal
  */
 exports.PUPPETEER_REVISIONS = Object.freeze({
-    chrome: '145.0.7632.76',
-    'chrome-headless-shell': '145.0.7632.76',
+    chrome: '145.0.7632.77',
+    'chrome-headless-shell': '145.0.7632.77',
     firefox: 'stable_147.0.4',
 });
 //# sourceMappingURL=revisions.js.map

package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/util/version.d.ts

@@ -3,5 +3,5 @@
  * Copyright 2025 Google Inc.
  * SPDX-License-Identifier: Apache-2.0
  */
-export declare const packageVersion = "24.37.4";
+export declare const packageVersion = "24.37.5";
 //# sourceMappingURL=version.d.ts.map

package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/util/version.js

@@ -8,6 +8,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.packageVersion = void 0;
 // If moved update release-please config
 // x-release-please-start-version
-exports.packageVersion = '24.37.4';
+exports.packageVersion = '24.37.5';
 // x-release-please-end
 //# sourceMappingURL=version.js.map

package/front_end/third_party/puppeteer/package/lib/es5-iife/puppeteer-core-browser.js

@@ -3050,7 +3050,7 @@ var Puppeteer = function (exports, _PuppeteerURL, _LazyArg, _ARIAQueryHandler, _
    */
   // If moved update release-please config
   // x-release-please-start-version
-  const packageVersion = '24.37.4';
+  const packageVersion = '24.37.5';
   // x-release-please-end
 
   /**
@@ -25247,8 +25247,8 @@ var Puppeteer = function (exports, _PuppeteerURL, _LazyArg, _ARIAQueryHandler, _
    * @internal
    */
   const PUPPETEER_REVISIONS = Object.freeze({
-    chrome: '145.0.7632.76',
-    'chrome-headless-shell': '145.0.7632.76',
+    chrome: '145.0.7632.77',
+    'chrome-headless-shell': '145.0.7632.77',
     firefox: 'stable_147.0.4'
   });
 

package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/revisions.d.ts

@@ -7,8 +7,8 @@
  * @internal
  */
 export declare const PUPPETEER_REVISIONS: Readonly<{
-    chrome: "145.0.7632.76";
-    'chrome-headless-shell': "145.0.7632.76";
+    chrome: "145.0.7632.77";
+    'chrome-headless-shell': "145.0.7632.77";
     firefox: "stable_147.0.4";
 }>;
 //# sourceMappingURL=revisions.d.ts.map

package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/revisions.js

@@ -7,8 +7,8 @@
  * @internal
  */
 export const PUPPETEER_REVISIONS = Object.freeze({
-    chrome: '145.0.7632.76',
-    'chrome-headless-shell': '145.0.7632.76',
+    chrome: '145.0.7632.77',
+    'chrome-headless-shell': '145.0.7632.77',
     firefox: 'stable_147.0.4',
 });
 //# sourceMappingURL=revisions.js.map

package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/util/version.d.ts

@@ -3,5 +3,5 @@
  * Copyright 2025 Google Inc.
  * SPDX-License-Identifier: Apache-2.0
  */
-export declare const packageVersion = "24.37.4";
+export declare const packageVersion = "24.37.5";
 //# sourceMappingURL=version.d.ts.map

package/front_end/third_party/puppeteer/package/lib/esm/puppeteer/util/version.js

@@ -5,6 +5,6 @@
  */
 // If moved update release-please config
 // x-release-please-start-version
-export const packageVersion = '24.37.4';
+export const packageVersion = '24.37.5';
 // x-release-please-end
 //# sourceMappingURL=version.js.map

package/front_end/third_party/puppeteer/package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "puppeteer-core",
-  "version": "24.37.4",
+  "version": "24.37.5",
   "description": "A high-level API to control headless Chrome over the DevTools Protocol",
   "keywords": [
     "puppeteer",

package/front_end/third_party/puppeteer/package/src/revisions.ts

@@ -8,7 +8,7 @@
  * @internal
  */
 export const PUPPETEER_REVISIONS = Object.freeze({
-  chrome: '145.0.7632.76',
-  'chrome-headless-shell': '145.0.7632.76',
+  chrome: '145.0.7632.77',
+  'chrome-headless-shell': '145.0.7632.77',
   firefox: 'stable_147.0.4',
 });

package/front_end/third_party/puppeteer/package/src/util/version.ts

@@ -6,5 +6,5 @@
 
 // If moved update release-please config
 // x-release-please-start-version
-export const packageVersion = '24.37.4';
+export const packageVersion = '24.37.5';
 // x-release-please-end

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

@@ -37,14 +37,14 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as StackTrace from '../../../../models/stack_trace/stack_trace.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
-import {Directives, html, render} from '../../../lit/lit.js';
+import {Directives, html, nothing, render, type TemplateResult} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
 import jsUtilsStyles from './jsUtils.css.js';
 import {Linkifier} from './Linkifier.js';
 
-const {classMap, createRef, ref} = Directives;
+const {classMap} = Directives;
 
 const UIStrings = {
   /**
@@ -97,134 +97,105 @@ export interface ViewInput {
   widthConstrained?: boolean;
   showColumnNumber?: boolean;
   expandable?: boolean;
+  expanded?: boolean;
+  showIgnoreListed?: boolean;
+  onExpand: () => void;
+  onShowMore: () => void;
+  onShowLess: () => void;
 }
 
-export type View = (input: ViewInput, output: {table?: HTMLElement}, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, output, target) => {
+  let renderExpandButton = Boolean(input.expandable);
+  const maybeRenderExpandButton = (): TemplateResult => {
+    // clang-format off
+    const result = html`
+      ${renderExpandButton ? html`
+        <button class="arrow-icon-button" jslog=${VisualLogging.expand().track({click: true})} @click=${input.onExpand}>
+          <span class="arrow-icon"></span>
+        </button>
+      ` : '\n'}`;
+    // clang-format on
+    renderExpandButton = false;
+    return result;
+  };
+
   const classes = {
     'stack-preview-container': true,
     'width-constrained': Boolean(input.widthConstrained),
+    expandable: Boolean(input.expandable),
+    expanded: Boolean(input.expanded),
+    'show-hidden-rows': Boolean(input.showIgnoreListed),
   };
-  // TODO(crbug.com/483576322): Remove once fully migrated.
-  const tableRef = createRef<HTMLElement>();
+  const {stackTrace} = input;
   // clang-format off
   render(html`
     <style>${jsUtilsStyles}</style>
-    <table class=${classMap(classes)} ${ref(tableRef)}>
+    <table class=${classMap(classes)}>
+      ${stackTrace ? html`
+        ${[stackTrace.syncFragment, ...stackTrace.asyncFragments].map(fragment => html`
+          <tbody>
+            ${'description' in fragment ? html`
+              <tr class="stack-preview-async-row">
+                <td>${maybeRenderExpandButton()}</td>
+                <td class="stack-preview-async-description">
+                  ${UI.UIUtils.asyncFragmentLabel(stackTrace, fragment as StackTrace.StackTrace.AsyncFragment)}
+                </td>
+                <td></td>
+                <td></td>
+              </tr>
+            ` : nothing}
+            ${fragment.frames.map((frame, i) => {
+              const previousStackFrameWasBreakpointCondition = i > 0 && [
+                SDK.DebuggerModel.COND_BREAKPOINT_SOURCE_URL,
+                SDK.DebuggerModel.LOGPOINT_SOURCE_URL,
+              ].includes(fragment.frames[i - 1].url ?? '');
+              const link = Linkifier.linkifyStackTraceFrame(frame, {
+                showColumnNumber: Boolean(input.showColumnNumber),
+                tabStop: Boolean(input.tabStops),
+                inlineFrameIndex: 0,
+                revealBreakpoint: previousStackFrameWasBreakpointCondition,
+                maxLength: UI.UIUtils.MaxLengthForDisplayedURLsInConsole,
+              });
+              link.setAttribute('jslog', `${VisualLogging.link('stack-trace').track({click: true})}`);
+              link.addEventListener('contextmenu', populateContextMenu.bind(null, link));
+              return html`
+                <tr>
+                  <td>${maybeRenderExpandButton()}</td>
+                  <td class="function-name">
+                    ${UI.UIUtils.beautifyFunctionName(frame.name ?? '')}
+                  </td>
+                  <td> @ </td>
+                  <td class="link">${link}</td>
+                </tr>
+            `;})}
+          </tbody>
+        `)}
+        <tfoot>
+          <tr class="show-all-link">
+            <td></td>
+            <td colspan="3">
+              <span class="link" @click=${input.onShowMore}>
+                <span class="css-inserted-text" data-inserted-text=${i18nString(UIStrings.showMoreFrames)}></span>
+              </span>
+            </td>
+          </tr>
+          <tr class="show-less-link">
+            <td></td>
+            <td colspan="3">
+              <span class="link" @click=${input.onShowLess}>
+                <span class="css-inserted-text" data-inserted-text=${i18nString(UIStrings.showLess)}></span>
+              </span>
+            </td>
+          </tr>
+        </tfoot>
+      ` : nothing}
     </table>
   `, target);
   // clang-format on
-  output.table = tableRef.value;
 };
 
-function renderStackTraceTable(
-    container: Element,
-    parent: Element,
-    stackTrace: StackTrace.StackTrace.StackTrace,
-    options: Options,
-    ): void {
-  container.removeChildren();
-
-  function buildStackTraceRowsHelper(fragment: StackTrace.StackTrace.Fragment|StackTrace.StackTrace.AsyncFragment):
-      Array<StackTraceRegularRow|StackTraceAsyncRow> {
-    const stackTraceRows: Array<StackTraceRegularRow|StackTraceAsyncRow> = [];
-    if ('description' in fragment) {
-      stackTraceRows.push({asyncDescription: UI.UIUtils.asyncFragmentLabel(stackTrace, fragment)});
-    }
-    let previousStackFrameWasBreakpointCondition = false;
-    for (const frame of fragment.frames) {
-      const functionName = UI.UIUtils.beautifyFunctionName(frame.name ?? '');
-      const link = Linkifier.linkifyStackTraceFrame(frame, {
-        showColumnNumber: Boolean(options.showColumnNumber),
-        tabStop: Boolean(options.tabStops),
-        inlineFrameIndex: 0,
-        revealBreakpoint: previousStackFrameWasBreakpointCondition,
-        maxLength: UI.UIUtils.MaxLengthForDisplayedURLsInConsole,
-      });
-      link.setAttribute('jslog', `${VisualLogging.link('stack-trace').track({click: true})}`);
-      link.addEventListener('contextmenu', populateContextMenu.bind(null, link));
-
-      stackTraceRows.push({functionName, link});
-      previousStackFrameWasBreakpointCondition = [
-        SDK.DebuggerModel.COND_BREAKPOINT_SOURCE_URL,
-        SDK.DebuggerModel.LOGPOINT_SOURCE_URL,
-      ].includes(frame.url ?? '');
-    }
-
-    return stackTraceRows;
-  }
-
-  // The tableSection groups one or more synchronous call frames together.
-  // Wherever there is an asynchronous call, a new section is created.
-  let firstRow = true;
-  for (const fragment of [stackTrace.syncFragment, ...stackTrace.asyncFragments]) {
-    if (fragment.frames.length === 0) {
-      continue;
-    }
-
-    const stackTraceRows = buildStackTraceRowsHelper(fragment);
-    const tableSection = container.createChild('tbody');
-    for (const item of stackTraceRows) {
-      const row = tableSection.createChild('tr');
-      if (firstRow && options.expandable) {
-        const button = row.createChild('td').createChild('button', 'arrow-icon-button');
-        button.createChild('span', 'arrow-icon');
-        parent.classList.add('expandable');
-        container.classList.add('expandable');
-        button.addEventListener('click', () => {
-          button.setAttribute('jslog', `${VisualLogging.expand().track({click: true})}`);
-          parent.classList.toggle('expanded');
-          container.classList.toggle('expanded');
-        });
-        firstRow = false;
-      } else {
-        row.createChild('td').textContent = '\n';
-      }
-      if ('asyncDescription' in item) {
-        row.createChild('td', 'stack-preview-async-description').textContent = item.asyncDescription;
-        row.createChild('td');
-        row.createChild('td');
-        row.classList.add('stack-preview-async-row');
-      } else {
-        row.createChild('td', 'function-name').textContent = item.functionName;
-        row.createChild('td').textContent = ' @ ';
-        row.createChild('td', 'link').appendChild(item.link);
-      }
-    }
-  }
-
-  const tableSection = container.createChild('tfoot');
-  const showAllRow = tableSection.createChild('tr', 'show-all-link');
-  showAllRow.createChild('td');
-  const cell = showAllRow.createChild('td');
-  cell.colSpan = 4;
-  const showAllLink = cell.createChild('span', 'link');
-  // Don't directly put the text of the link in the DOM, as it will likely be
-  // invisible and it may be confusing if it is copied to the clipboard.
-  showAllLink.createChild('span', 'css-inserted-text')
-      .setAttribute('data-inserted-text', i18nString(UIStrings.showMoreFrames));
-  showAllLink.addEventListener('click', () => {
-    container.classList.add('show-hidden-rows');
-    parent.classList.add('show-hidden-rows');
-    // If we are in a popup, this will trigger a re-layout
-    UI.GlassPane.GlassPane.containerMoved(container);
-  }, false);
-  const showLessRow = tableSection.createChild('tr', 'show-less-link');
-  showLessRow.createChild('td');
-  const showLesscell = showLessRow.createChild('td');
-  showLesscell.colSpan = 4;
-  const showLessLink = showLesscell.createChild('span', 'link');
-  showLessLink.createChild('span', 'css-inserted-text')
-      .setAttribute('data-inserted-text', i18nString(UIStrings.showLess));
-  showLessLink.addEventListener('click', () => {
-    container.classList.remove('show-hidden-rows');
-    parent.classList.remove('show-hidden-rows');
-    // If we are in a popup, this will trigger a re-layout
-    UI.GlassPane.GlassPane.containerMoved(container);
-  }, false);
-}
-
 export interface Options {
   tabStops?: boolean;
   // Whether the width of stack trace preview
@@ -235,20 +206,13 @@ export interface Options {
   expandable?: boolean;
 }
 
-interface StackTraceRegularRow {
-  functionName: string;
-  link: HTMLElement;
-}
-
-interface StackTraceAsyncRow {
-  asyncDescription: string;
-}
-
 export class StackTracePreviewContent extends UI.Widget.Widget {
   readonly #view: View;
 
   #stackTrace?: StackTrace.StackTrace.StackTrace;
   #options: Options = {};
+  #expanded = false;
+  #showIgnoreListed = false;
 
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element, {useShadowDom: true, classes: ['monospace', 'stack-preview-container']});
@@ -264,17 +228,20 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
   }
 
   override performUpdate(): void {
-    const output: {table?: HTMLElement} = {};
-    this.#view(
-        {
-          stackTrace: this.#stackTrace,
-          ...this.#options,
-        },
-        output, this.contentElement);
+    this.element.classList.toggle('expandable', this.#options.expandable);
+    this.element.classList.toggle('expanded', this.#expanded);
+    this.element.classList.toggle('show-hidden-rows', this.#showIgnoreListed);
 
-    if (this.#stackTrace && output.table) {
-      renderStackTraceTable(output.table, this.element, this.#stackTrace, this.#options);
-    }
+    const input: ViewInput = {
+      stackTrace: this.#stackTrace,
+      ...this.#options,
+      expanded: this.#expanded,
+      showIgnoreListed: this.#showIgnoreListed,
+      onExpand: this.#onExpand.bind(this),
+      onShowMore: this.#onShowMoreLess.bind(this, true),
+      onShowLess: this.#onShowMoreLess.bind(this, false),
+    };
+    this.#view(input, {}, this.contentElement);
   }
 
   get linkElements(): readonly HTMLElement[] {
@@ -294,4 +261,17 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
     this.#stackTrace.addEventListener(StackTrace.StackTrace.Events.UPDATED, this.requestUpdate, this);
     this.requestUpdate();
   }
+
+  #onShowMoreLess(more: boolean): void {
+    this.#showIgnoreListed = more;
+    this.requestUpdate();
+
+    // If we are in a popup, this will trigger a re-layout
+    void this.updateComplete.then(() => UI.GlassPane.GlassPane.containerMoved(this.contentElement));
+  }
+
+  #onExpand(): void {
+    this.#expanded = !this.#expanded;
+    this.requestUpdate();
+  }
 }

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1586699"
+  "version": "1.0.1587572"
 }