chrome-devtools-frontend 1.0.1657110 → 1.0.1660788

package/front_end/core/sdk/CSSMetadata.ts

@@ -476,13 +476,24 @@ export function cssMetadata(): CSSMetadata {
 
 /**
  * The pipe character '|' indicates where text selection should be set.
+ *
+ * Spec: https://drafts.csswg.org/css-images-4/#image-values
+ * <image> = <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>
+ * <gradient> = [
+ * <linear-gradient()> | <repeating-linear-gradient()> |
+ * <radial-gradient()> | <repeating-radial-gradient()> |
+ * <conic-gradient()>  | <repeating-conic-gradient()> ]
  */
 const imageValuePresetMap = new Map([
-  ['linear-gradient', 'linear-gradient(|45deg, black, transparent|)'],
-  ['radial-gradient', 'radial-gradient(|black, transparent|)'],
-  ['repeating-linear-gradient', 'repeating-linear-gradient(|45deg, black, transparent 100px|)'],
-  ['repeating-radial-gradient', 'repeating-radial-gradient(|black, transparent 100px|)'],
-  ['url', 'url(||)'],
+  ['linear-gradient()', 'linear-gradient(|45deg, black, transparent|)'],
+  ['radial-gradient()', 'radial-gradient(|black, transparent|)'],
+  ['conic-gradient()', 'conic-gradient(|from 45deg, red, orange, yellow, green, teal, blue, purple|)'],
+  ['repeating-linear-gradient()', 'repeating-linear-gradient(|45deg, black, transparent 100px|)'],
+  ['repeating-radial-gradient()', 'repeating-radial-gradient(|black, transparent 100px|)'],
+  ['repeating-conic-gradient()', 'repeating-conic-gradient(|black 0deg 25%, white 0deg 50%|)'],  // Checkerboard
+  ['url()', 'url(||)'],
+  ['image-set()', 'image-set(|url("") 1x, url("") 2x|)'],
+  ['cross-fade()', 'cross-fade(|url("") 50%, url("") 50%|)'],
 ]);
 
 const filterValuePresetMap = new Map([
@@ -505,8 +516,16 @@ const cornerShapeValuePresetMap = new Map([
 ]);
 
 const valuePresets = new Map([
-  ['filter', filterValuePresetMap], ['backdrop-filter', filterValuePresetMap], ['background', imageValuePresetMap],
-  ['background-image', imageValuePresetMap], ['-webkit-mask-image', imageValuePresetMap],
+  ['filter', filterValuePresetMap],
+  ['backdrop-filter', filterValuePresetMap],
+  ['background', imageValuePresetMap],
+  ['background-image', imageValuePresetMap],
+  ['mask-image', imageValuePresetMap],
+  ['-webkit-mask-image', imageValuePresetMap],
+  ['list-style', imageValuePresetMap],
+  ['list-style-image', imageValuePresetMap],
+  ['border-image', imageValuePresetMap],
+  ['border-image-source', imageValuePresetMap],
   [
     'transform',
     new Map([
@@ -866,7 +885,44 @@ const extraPropertyValues = new Map<string, Set<string>>([
   ['-webkit-text-emphasis-position', textEmphasisPosition],
   ['alignment-baseline', new Set(['before-edge', 'after-edge', 'text-before-edge', 'text-after-edge', 'hanging'])],
   ['page-break-before', new Set(['left', 'right', 'always', 'avoid'])],
-  ['border-image', new Set(['repeat', 'stretch', 'space', 'round'])],
+  [
+    'border-image',
+    new Set([
+      'none',  // border-image-source
+      'repeat',
+      'stretch',
+      'space',
+      'round',
+      'auto',  // border-image-width
+      'fill',  // border-image-slice
+      'linear-gradient()',
+      'radial-gradient()',
+      'conic-gradient()',
+      'repeating-linear-gradient()',
+      'repeating-radial-gradient()',
+      'repeating-conic-gradient()',
+      'image-set()',
+      'cross-fade()',
+      'url()',
+    ]),
+  ],
+  ['border-image-width', new Set(['auto'])],
+  ['border-image-slice', new Set(['fill'])],
+  [
+    'border-image-source',
+    new Set([
+      'none',
+      'linear-gradient()',
+      'radial-gradient()',
+      'conic-gradient()',
+      'repeating-linear-gradient()',
+      'repeating-radial-gradient()',
+      'repeating-conic-gradient()',
+      'image-set()',
+      'cross-fade()',
+      'url()',
+    ]),
+  ],
   [
     'text-decoration',
     new Set(['blink', 'line-through', 'overline', 'underline', 'wavy', 'double', 'solid', 'dashed', 'dotted']),
@@ -1179,16 +1235,31 @@ const extraPropertyValues = new Map<string, Set<string>>([
       'border-box',
       'content-box',
       'padding-box',
-      'linear-gradient',
-      'radial-gradient',
-      'repeating-linear-gradient',
-      'repeating-radial-gradient',
-      'url',
+      'text',  // background-clip
+      'linear-gradient()',
+      'radial-gradient()',
+      'conic-gradient()',
+      'repeating-linear-gradient()',
+      'repeating-radial-gradient()',
+      'repeating-conic-gradient()',
+      'image-set()',
+      'cross-fade()',
+      'url()',
     ]),
   ],
   [
     'background-image',
-    new Set(['linear-gradient', 'radial-gradient', 'repeating-linear-gradient', 'repeating-radial-gradient', 'url']),
+    new Set([
+      'linear-gradient()',
+      'radial-gradient()',
+      'conic-gradient()',
+      'repeating-linear-gradient()',
+      'repeating-radial-gradient()',
+      'repeating-conic-gradient()',
+      'image-set()',
+      'cross-fade()',
+      'url()',
+    ]),
   ],
   ['background-position', new Set(['top', 'bottom', 'left', 'right', 'center'])],
   ['background-position-x', new Set(['left', 'right', 'center'])],
@@ -1440,9 +1511,33 @@ const extraPropertyValues = new Map<string, Set<string>>([
       'plus-lighter',
     ]),
   ],
+  [
+    'mask-image',
+    new Set([
+      'linear-gradient()',
+      'radial-gradient()',
+      'conic-gradient()',
+      'repeating-linear-gradient()',
+      'repeating-radial-gradient()',
+      'repeating-conic-gradient()',
+      'image-set()',
+      'cross-fade()',
+      'url()',
+    ]),
+  ],
   [
     '-webkit-mask-image',
-    new Set(['linear-gradient', 'radial-gradient', 'repeating-linear-gradient', 'repeating-radial-gradient', 'url']),
+    new Set([
+      'linear-gradient()',
+      'radial-gradient()',
+      'conic-gradient()',
+      'repeating-linear-gradient()',
+      'repeating-radial-gradient()',
+      'repeating-conic-gradient()',
+      'image-set()',
+      'cross-fade()',
+      'url()',
+    ]),
   ],
   ['-webkit-mask-origin', new Set(['border', 'border-box', 'content', 'content-box', 'padding', 'padding-box'])],
   ['-webkit-mask-position', new Set(['top', 'bottom', 'left', 'right', 'center'])],
@@ -1479,7 +1574,6 @@ const extraPropertyValues = new Map<string, Set<string>>([
   ['timeline-trigger-activation-range-end', new Set(['normal'])],
   ['timeline-trigger-active-range-start', new Set(['normal'])],
   ['timeline-trigger-active-range-end', new Set(['normal'])],
-
   ['contain-intrinsic-width', new Set(['auto none', 'auto 100px'])],
   ['contain-intrinsic-height', new Set(['auto none', 'auto 100px'])],
   ['contain-intrinsic-size', new Set(['auto none', 'auto 100px'])],

package/front_end/core/sdk/CompilerSourceMappingContentProvider.ts

@@ -7,7 +7,7 @@ import type * as Common from '../common/common.js';
 import * as i18n from '../i18n/i18n.js';
 import type * as Platform from '../platform/platform.js';
 
-import {PageResourceLoader, type PageResourceLoadInitiator} from './PageResourceLoader.js';
+import type {PageResourceLoader, PageResourceLoadInitiator} from './PageResourceLoader.js';
 
 const UIStrings = {
   /**
@@ -28,10 +28,7 @@ export class CompilerSourceMappingContentProvider implements TextUtils.ContentPr
   readonly #pageResourceLoader: PageResourceLoader;
 
   constructor(sourceURL: Platform.DevToolsPath.UrlString, contentType: Common.ResourceType.ResourceType,
-              initiator: PageResourceLoadInitiator,
-              pageResourceLoader: PageResourceLoader = initiator.target ?
-                  initiator.target.targetManager().context.get(PageResourceLoader) :
-                  PageResourceLoader.instance()) {
+              initiator: PageResourceLoadInitiator, pageResourceLoader: PageResourceLoader) {
     this.#sourceURL = sourceURL;
     this.#contentType = contentType;
     this.#initiator = initiator;

package/front_end/core/sdk/ConsoleModel.ts

@@ -35,7 +35,7 @@ import {
 } from './RuntimeModel.js';
 import {SDKModel} from './SDKModel.js';
 import {Capability, type Target, Type} from './Target.js';
-import {TargetManager} from './TargetManager.js';
+import type {TargetManager} from './TargetManager.js';
 
 export {FrontendMessageType} from './ConsoleModelTypes.js';
 
@@ -357,7 +357,7 @@ export class ConsoleModel extends SDKModel<EventTypes> {
   }
 
   // messages[] are not ordered by timestamp.
-  static allMessagesUnordered(targetManager: TargetManager = TargetManager.instance()): ConsoleMessage[] {
+  static allMessagesUnordered(targetManager: TargetManager): ConsoleMessage[] {
     const messages = [];
     for (const target of targetManager.targets()) {
       const targetMessages = target.model(ConsoleModel)?.messages() || [];
@@ -366,7 +366,7 @@ export class ConsoleModel extends SDKModel<EventTypes> {
     return messages;
   }
 
-  static requestClearMessages(targetManager: TargetManager = TargetManager.instance()): void {
+  static requestClearMessages(targetManager: TargetManager): void {
     for (const logModel of targetManager.models(LogModel)) {
       logModel.requestClear();
     }
@@ -394,7 +394,7 @@ export class ConsoleModel extends SDKModel<EventTypes> {
     return this.#errors;
   }
 
-  static allErrors(targetManager: TargetManager = TargetManager.instance()): number {
+  static allErrors(targetManager: TargetManager): number {
     let errors = 0;
     for (const target of targetManager.targets()) {
       errors += target.model(ConsoleModel)?.errors() || 0;
@@ -406,7 +406,7 @@ export class ConsoleModel extends SDKModel<EventTypes> {
     return this.#warnings;
   }
 
-  static allWarnings(targetManager: TargetManager = TargetManager.instance()): number {
+  static allWarnings(targetManager: TargetManager): number {
     let warnings = 0;
     for (const target of targetManager.targets()) {
       warnings += target.model(ConsoleModel)?.warnings() || 0;

package/front_end/core/sdk/DOMDebuggerModel.ts

@@ -661,7 +661,9 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
     this.createEventListenerBreakpoints(
         Category.XHR, ['readystatechange', 'load', 'loadstart', 'loadend', 'abort', 'error', 'progress', 'timeout'],
         ['xmlhttprequest', 'xmlhttprequestupload']);
+  }
 
+  initialize(): void {
     this.#targetManager.observeModels(DOMDebuggerModel, this);
   }
 
@@ -671,9 +673,11 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
   } = {forceNew: null}): DOMDebuggerManager {
     const {forceNew, targetManager} = opts;
     if (!Root.DevToolsContext.globalInstance().has(DOMDebuggerManager) || forceNew) {
+      const manager = new DOMDebuggerManager(targetManager ?? TargetManager.instance());
+      manager.initialize();
       Root.DevToolsContext.globalInstance().set(
           DOMDebuggerManager,
-          new DOMDebuggerManager(targetManager ?? TargetManager.instance()),
+          manager,
       );
     }
 

package/front_end/core/sdk/DOMModel.ts

@@ -1127,27 +1127,33 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
     return model;
   }
 
-  async setAsInspectedNode(): Promise<void> {
-    let node: DOMNode|null = this;
-    if (node?.pseudoType()) {
-      node = node.parentNode;
+  canInspectNode(): boolean {
+    if (this.ancestorUserAgentShadowRoot()) {
+      return false;
     }
-    while (node) {
-      let ancestor = node.ancestorUserAgentShadowRoot();
-      if (!ancestor) {
-        break;
-      }
-      ancestor = node.ancestorShadowHost();
-      if (!ancestor) {
-        break;
-      }
-      // User #agent shadow root, keep climbing up.
-      node = ancestor;
+
+    if (this.#pseudoType) {
+      return [
+        Protocol.DOM.PseudoType.Before,
+        Protocol.DOM.PseudoType.After,
+        Protocol.DOM.PseudoType.Marker,
+        Protocol.DOM.PseudoType.ScrollMarker,
+        Protocol.DOM.PseudoType.Backdrop,
+        Protocol.DOM.PseudoType.ViewTransition,
+        Protocol.DOM.PseudoType.ViewTransitionGroup,
+        Protocol.DOM.PseudoType.ViewTransitionImagePair,
+        Protocol.DOM.PseudoType.ViewTransitionOld,
+        Protocol.DOM.PseudoType.ViewTransitionNew,
+      ].includes(this.#pseudoType);
     }
-    if (!node) {
-      throw new Error('In DOMNode.setAsInspectedNode: node is expected to not be null.');
+    return true;
+  }
+
+  async setAsInspectedNode(): Promise<void> {
+    if (!this.canInspectNode()) {
+      return;
     }
-    await this.#agent.invoke_setInspectedNode({nodeId: node.id});
+    await this.#agent.invoke_setInspectedNode({nodeId: this.id});
   }
 
   enclosingElementOrSelf(): DOMNode|null {
@@ -2365,6 +2371,10 @@ export class DOMNodeSnapshot extends DOMNode {
       _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
   }
 
+  override canInspectNode(): boolean {
+    return false;
+  }
+
   override setAsInspectedNode(): Promise<void> {
     return Promise.resolve();
   }
@@ -2410,6 +2420,10 @@ export class DOMDocumentSnapshot extends DOMDocument {
       _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
   }
 
+  override canInspectNode(): boolean {
+    return false;
+  }
+
   override setAsInspectedNode(): Promise<void> {
     return Promise.resolve();
   }

package/front_end/core/sdk/NetworkManager.ts

@@ -323,6 +323,45 @@ export class NetworkManager extends SDKModel<EventTypes> {
     }
   }
 
+  /**
+   * Returns the request post data as a ContentData suitable for binary
+   * viewers (hex, base64, utf-8) in the Payload tab.  When the backend
+   * provides base64-encoded (possibly compressed) data, the body is
+   * decompressed first so viewers show the actual payload bytes rather
+   * than gzip/deflate framing.
+   */
+  static async requestPostDataContentData(request: NetworkRequest): Promise<TextUtils.ContentData.ContentDataOrError> {
+    const manager = NetworkManager.forRequest(request);
+    if (!manager) {
+      return {error: 'No network manager for request'};
+    }
+    const requestId = request.backendRequestId();
+    if (!requestId) {
+      return {error: 'No backend request id for request'};
+    }
+    try {
+      const response = await manager.#networkAgent.invoke_getRequestPostData({requestId});
+      const error = response.getError();
+      if (error) {
+        return {error};
+      }
+      const {postData, base64Encoded} = response;
+      if (!postData) {
+        return {error: 'No post data'};
+      }
+      const requestContentType = request.requestContentType() ?? 'application/octet-stream';
+      const {charset} = Platform.MimeType.parseContentType(requestContentType);
+
+      if (base64Encoded && postData) {
+        return await TextUtils.ContentData.ContentData.fromCompressedBase64(
+            postData, requestContentType, charset ?? undefined, request.requestContentEncoding());
+      }
+      return new TextUtils.ContentData.ContentData(postData, false, requestContentType, charset ?? undefined);
+    } catch (e) {
+      return {error: e.message};
+    }
+  }
+
   /**
    * Attempts to decompress a compressed request body.
    * Returns the decompressed string, or null if decompression is not applicable.
@@ -658,6 +697,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
     networkRequest.setReferrerPolicy(request.referrerPolicy);
     networkRequest.setIsSameSite(request.isSameSite || false);
     networkRequest.setIsAdRelated(request.isAdRelated || false);
+    networkRequest.setIsLinkPreload(request.isLinkPreload || false);
   }
 
   private updateNetworkRequestWithResponse(networkRequest: NetworkRequest, response: Protocol.Network.Response): void {
@@ -847,7 +887,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
     } else {
       networkRequest = NetworkRequest.create(
           requestId, request.url as Platform.DevToolsPath.UrlString, documentURL as Platform.DevToolsPath.UrlString,
-          frameId ?? null, loaderId, initiator, hasUserGesture);
+          frameId ?? null, loaderId, initiator, hasUserGesture, this.#manager.target().targetManager().getConsole());
       if (renderBlockingBehavior) {
         networkRequest.setRenderBlockingBehavior(renderBlockingBehavior);
       }
@@ -969,7 +1009,8 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
 
   webSocketCreated({requestId, url: requestURL, initiator}: Protocol.Network.WebSocketCreatedEvent): void {
     const networkRequest =
-        NetworkRequest.createForSocket(requestId, requestURL as Platform.DevToolsPath.UrlString, initiator);
+        NetworkRequest.createForSocket(requestId, requestURL as Platform.DevToolsPath.UrlString, initiator,
+                                       this.#manager.target().targetManager().getConsole());
     requestToManagerMap.set(networkRequest, this.#manager);
     networkRequest.setResourceType(Common.ResourceType.resourceTypes.WebSocket);
     this.startNetworkRequest(networkRequest, null);
@@ -1174,7 +1215,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
     const newNetworkRequest = NetworkRequest.create(
         requestId, redirectURL, originalNetworkRequest.documentURL, originalNetworkRequest.frameId,
         originalNetworkRequest.loaderId, originalNetworkRequest.initiator(),
-        originalNetworkRequest.hasUserGesture() ?? undefined);
+        originalNetworkRequest.hasUserGesture() ?? undefined, this.#manager.target().targetManager().getConsole());
     requestToManagerMap.set(newNetworkRequest, this.#manager);
     newNetworkRequest.setRedirectSource(originalNetworkRequest);
     originalNetworkRequest.setRedirectDestination(newNetworkRequest);
@@ -1296,7 +1337,8 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
   webTransportCreated({transportId, url: requestURL, timestamp: time, initiator}:
                           Protocol.Network.WebTransportCreatedEvent): void {
     const networkRequest =
-        NetworkRequest.createForSocket(transportId, requestURL as Platform.DevToolsPath.UrlString, initiator);
+        NetworkRequest.createForSocket(transportId, requestURL as Platform.DevToolsPath.UrlString, initiator,
+                                       this.#manager.target().targetManager().getConsole());
     networkRequest.hasNetworkData = true;
     requestToManagerMap.set(networkRequest, this.#manager);
     networkRequest.setResourceType(Common.ResourceType.resourceTypes.WebTransport);
@@ -1333,8 +1375,9 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
 
   directTCPSocketCreated(event: Protocol.Network.DirectTCPSocketCreatedEvent): void {
     const requestURL = this.concatHostPort(event.remoteAddr, event.remotePort);
-    const networkRequest = NetworkRequest.createForSocket(
-        event.identifier, requestURL as Platform.DevToolsPath.UrlString, event.initiator);
+    const networkRequest =
+        NetworkRequest.createForSocket(event.identifier, requestURL as Platform.DevToolsPath.UrlString, event.initiator,
+                                       this.#manager.target().targetManager().getConsole());
     networkRequest.hasNetworkData = true;
     networkRequest.setRemoteAddress(event.remoteAddr, event.remotePort);
     networkRequest.protocol = i18n.i18n.lockedString('tcp');
@@ -1448,8 +1491,9 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
       // is not specified.
       return;
     }
-    const networkRequest = NetworkRequest.createForSocket(
-        event.identifier, requestURL as Platform.DevToolsPath.UrlString, event.initiator);
+    const networkRequest =
+        NetworkRequest.createForSocket(event.identifier, requestURL as Platform.DevToolsPath.UrlString, event.initiator,
+                                       this.#manager.target().targetManager().getConsole());
     networkRequest.hasNetworkData = true;
     if (event.options.remoteAddr && event.options.remotePort) {
       networkRequest.setRemoteAddress(event.options.remoteAddr, event.options.remotePort);
@@ -1633,9 +1677,9 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
   protected createNetworkRequest(
       requestId: Protocol.Network.RequestId, frameId: Protocol.Page.FrameId, loaderId: Protocol.Network.LoaderId,
       url: string, documentURL: string, initiator: Protocol.Network.Initiator|null): NetworkRequest {
-    const request = NetworkRequest.create(
-        requestId, url as Platform.DevToolsPath.UrlString, documentURL as Platform.DevToolsPath.UrlString, frameId,
-        loaderId, initiator);
+    const request = NetworkRequest.create(requestId, url as Platform.DevToolsPath.UrlString,
+                                          documentURL as Platform.DevToolsPath.UrlString, frameId, loaderId, initiator,
+                                          undefined, this.#manager.target().targetManager().getConsole());
     requestToManagerMap.set(request, this.#manager);
     return request;
   }
@@ -1716,9 +1760,7 @@ export class RequestCondition extends Common.ObjectWrapper.ObjectWrapper<Request
   #conditions: ThrottlingConditions;
   #ruleIds = new Set<string>();
 
-  static createFromSetting(
-      setting: RequestConditionsSetting,
-      settings: Common.Settings.Settings = Common.Settings.Settings.instance()): RequestCondition {
+  static createFromSetting(setting: RequestConditionsSetting, settings: Common.Settings.Settings): RequestCondition {
     if ('urlPattern' in setting) {
       const pattern = RequestURLPattern.create(setting.urlPattern) ?? {
         wildcardURL: setting.urlPattern,
@@ -1966,6 +2008,7 @@ export class RequestConditions extends Common.ObjectWrapper.ObjectWrapper<Reques
       promises.push(agent
                         .invoke_emulateNetworkConditionsByRule({
                           offline,
+                          emulateOfflineServiceWorker: offline,
                           matchedNetworkConditions: matchedNetworkConditions.map(
                               ({urlPattern, conditions}) => ({
                                 urlPattern: urlPattern ?? '',
@@ -1976,6 +2019,7 @@ export class RequestConditions extends Common.ObjectWrapper.ObjectWrapper<Reques
                                 packetQueueLength: conditions.packetQueueLength,
                                 packetReordering: conditions.packetReordering,
                                 connectionType: NetworkManager.connectionType(conditions),
+                                offline,
                               }))
                         })
                         .then(response => {

package/front_end/core/sdk/NetworkRequest.ts

@@ -296,7 +296,9 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
   directSocketInfo?: DirectSocketInfo;
   readonly #directSocketChunks: DirectSocketChunk[] = [];
   #isAdRelated: boolean;
+  #isLinkPreload: boolean;
   #appliedNetworkConditionsId?: string;
+  readonly #console: Common.Console.Console;
 
   constructor(
       requestId: string,
@@ -307,6 +309,7 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
       loaderId: Protocol.Network.LoaderId|null,
       initiator: Protocol.Network.Initiator|null,
       hasUserGesture?: boolean,
+      console: Common.Console.Console = Common.Console.Console.instance(),
   ) {
     super();
 
@@ -319,6 +322,8 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     this.#initiator = initiator;
     this.#hasUserGesture = hasUserGesture;
     this.#isAdRelated = false;
+    this.#isLinkPreload = false;
+    this.#console = console;
   }
 
   static create(
@@ -329,6 +334,7 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
       loaderId: Protocol.Network.LoaderId|null,
       initiator: Protocol.Network.Initiator|null,
       hasUserGesture?: boolean,
+      console?: Common.Console.Console,
       ): NetworkRequest {
     return new NetworkRequest(
         backendRequestId,
@@ -339,6 +345,7 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
         loaderId,
         initiator,
         hasUserGesture,
+        console,
     );
   }
 
@@ -346,6 +353,7 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
       backendRequestId: Protocol.Network.RequestId,
       requestURL: Platform.DevToolsPath.UrlString,
       initiator?: Protocol.Network.Initiator,
+      console?: Common.Console.Console,
       ): NetworkRequest {
     return new NetworkRequest(
         backendRequestId,
@@ -355,6 +363,8 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
         null,
         null,
         initiator || null,
+        undefined,
+        console,
     );
   }
 
@@ -363,6 +373,7 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
       url: Platform.DevToolsPath.UrlString,
       documentURL: Platform.DevToolsPath.UrlString,
       initiator: Protocol.Network.Initiator|null,
+      console?: Common.Console.Console,
       ): NetworkRequest {
     return new NetworkRequest(
         requestId,
@@ -372,6 +383,8 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
         null,
         null,
         initiator,
+        undefined,
+        console,
     );
   }
 
@@ -909,6 +922,11 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
         this.#initiator.type === Protocol.Network.InitiatorType.Preflight);
   }
 
+  isPreloadRequest(): boolean {
+    return (this.#initiator !== null && this.#initiator !== undefined &&
+            this.#initiator.type === Protocol.Network.InitiatorType.Preload);
+  }
+
   redirectDestination(): NetworkRequest|null {
     return this.#redirectDestination;
   }
@@ -960,6 +978,15 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     this.#formParametersPromise = null;
   }
 
+  /**
+   * Returns the raw request body as ContentData, preserving base64 encoding
+   * for binary payloads. This enables binary viewers (hex, base64, utf-8)
+   * in the Payload tab.
+   */
+  requestFormDataContentData(): Promise<TextUtils.ContentData.ContentDataOrError> {
+    return NetworkManager.requestPostDataContentData(this);
+  }
+
   private filteredProtocolName(): string {
     const protocol = this.protocol.toLowerCase();
     if (protocol === 'h2') {
@@ -1201,7 +1228,8 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
   get serverTimings(): ServerTiming[]|null {
     if (typeof this.#serverTimings === 'undefined') {
       this.#serverTimings = ServerTiming.parseHeaders(
-          this.responseHeaders,
+          this.responseHeaders.map(x => ({name: x.name, value: x.value})),
+          this.#console,
       );
     }
     return this.#serverTimings;
@@ -1837,6 +1865,14 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     return this.#isAdRelated;
   }
 
+  setIsLinkPreload(isLinkPreload: boolean): void {
+    this.#isLinkPreload = isLinkPreload;
+  }
+
+  isLinkPreload(): boolean {
+    return this.#isLinkPreload;
+  }
+
   getAssociatedData(key: string): object|null {
     return this.#associatedData.get(key) || null;
   }