chrome-devtools-frontend 1.0.1657110 → 1.0.1660788

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -184,7 +184,7 @@ const UIStrings = {
   /**
    * @description Cell title in Network Data Grid Node of the Network panel
    */
-  earlyHints: 'early-hints',
+  earlyHints: 'Early-hints',
   /**
    * @description Text in Network Data Grid Node of the Network panel
    */
@@ -654,7 +654,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     const aRemoteAddress = aRequest.remoteAddress();
     const bRemoteAddress = bRequest.remoteAddress();
@@ -672,7 +672,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     if (bRequest.cached() && !aRequest.cached()) {
       return 1;
@@ -688,7 +688,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
 
     const aRequestNumber = NetworkRequestNode.requestNumber(aRequest);
@@ -701,7 +701,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     const aSimpleType = a.displayType();
     const bSimpleType = b.displayType();
@@ -720,7 +720,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     const aHasInitiatorCell = a instanceof NetworkRequestNode && a.initiatorCell;
     const bHasInitiatorCell = b instanceof NetworkRequestNode && b.initiatorCell;
@@ -744,7 +744,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     const aClientSecurityState = aRequest.clientSecurityState();
     const bClientSecurityState = bRequest.clientSecurityState();
@@ -758,7 +758,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     return aRequest.remoteAddressSpace().localeCompare(bRequest.remoteAddressSpace());
   }
@@ -768,7 +768,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     const aScore = aRequest.includedRequestCookies().length;
     const bScore = bRequest.includedRequestCookies().length;
@@ -781,7 +781,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     const aScore = aRequest.responseCookies ? aRequest.responseCookies.length : 0;
     const bScore = bRequest.responseCookies ? bRequest.responseCookies.length : 0;
@@ -793,7 +793,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     const aPriority = aRequest.priority();
     let aScore: number = aPriority ? PerfUI.NetworkPriorities.networkPriorityWeight(aPriority) : 0;
@@ -810,7 +810,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     const aIsAdRelated = aRequest.isAdRelated();
     const bIsAdRelated = bRequest.isAdRelated();
@@ -823,12 +823,29 @@ export class NetworkRequestNode extends NetworkNode {
     return aRequest.identityCompare(bRequest);
   }
 
-  static RenderBlockingComparator(a: NetworkNode, b: NetworkNode): number {
+  static IsPreloadedComparator(a: NetworkNode, b: NetworkNode): number {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
+    if (!aRequest && !bRequest) {
+      return 0;
+    }
     if (!aRequest || !bRequest) {
       return !aRequest ? -1 : 1;
     }
+    const aIsPreloaded = aRequest.isLinkPreload();
+    const bIsPreloaded = bRequest.isLinkPreload();
+    if (aIsPreloaded === bIsPreloaded) {
+      return aRequest.identityCompare(bRequest);
+    }
+    return aIsPreloaded ? 1 : -1;
+  }
+
+  static RenderBlockingComparator(a: NetworkNode, b: NetworkNode): number {
+    const aRequest = a.requestOrFirstKnownChildRequest();
+    const bRequest = b.requestOrFirstKnownChildRequest();
+    if (!aRequest || !bRequest) {
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
+    }
     const order = [
       Protocol.Network.RenderBlockingBehavior.InBodyParserBlocking,
       Protocol.Network.RenderBlockingBehavior.Blocking,
@@ -842,6 +859,55 @@ export class NetworkRequestNode extends NetworkNode {
     return aOrder - bOrder;
   }
 
+  static ExecutionContextComparator(a: NetworkNode, b: NetworkNode): number {
+    const aRequest = a.requestOrFirstKnownChildRequest();
+    const bRequest = b.requestOrFirstKnownChildRequest();
+    if (!aRequest || !bRequest) {
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
+    }
+    const aContext = NetworkRequestNode.getExecutionContextDescription(aRequest);
+    const bContext = NetworkRequestNode.getExecutionContextDescription(bRequest);
+    return aContext.localeCompare(bContext);
+  }
+
+  static getExecutionContextDescription(request: SDK.NetworkRequest.NetworkRequest): string {
+    const requestTarget = SDK.NetworkManager.NetworkManager.forRequest(request)?.target();
+
+    if (requestTarget) {
+      const targetType = requestTarget.type();
+      if (targetType === SDK.Target.Type.ServiceWorker || targetType === SDK.Target.Type.Worker ||
+          targetType === SDK.Target.Type.SHARED_WORKER) {
+        const runtimeModel = requestTarget.model(SDK.RuntimeModel.RuntimeModel);
+        if (runtimeModel) {
+          const defaultContextLabel = runtimeModel.executionContexts().find(c => c.isDefault)?.label();
+          if (defaultContextLabel) {
+            return defaultContextLabel;
+          }
+        }
+        return requestTarget.name() || '';
+      }
+    }
+
+    const frame = SDK.ResourceTreeModel.ResourceTreeModel.frameForRequest(request);
+    if (!frame) {
+      return '';
+    }
+
+    if (requestTarget) {
+      const runtimeModel = requestTarget.model(SDK.RuntimeModel.RuntimeModel);
+      if (runtimeModel) {
+        const frameContextLabel = runtimeModel.executionContexts()
+                                      .find(context => context.frameId === request.frameId && context.isDefault)
+                                      ?.label();
+        if (frameContextLabel) {
+          return frameContextLabel;
+        }
+      }
+    }
+
+    return frame.displayName();
+  }
+
   static RequestPropertyComparator(propertyName: string, a: NetworkNode, b: NetworkNode): number {
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -850,7 +916,7 @@ export class NetworkRequestNode extends NetworkNode {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const bRequest = (b.requestOrFirstKnownChildRequest() as any);
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     const aValue = aRequest[propertyName];
     const bValue = bRequest[propertyName];
@@ -864,7 +930,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     const aURL = aRequest.url();
     const bURL = bRequest.url();
@@ -880,7 +946,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     // Use the provided callback to get the header value
     const aValue = String(getHeaderValue(aRequest, propertyName) || '');
@@ -903,7 +969,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     const aRawValue = aRequest.responseHeaderValue(propertyName);
     const aValue = (aRawValue !== undefined) ? parseFloat(aRawValue) : -Infinity;
@@ -920,7 +986,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     const aHeader = aRequest.responseHeaderValue(propertyName);
     const bHeader = bRequest.responseHeaderValue(propertyName);
@@ -936,10 +1002,7 @@ export class NetworkRequestNode extends NetworkNode {
     const aRequest = a.requestOrFirstKnownChildRequest();
     const bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest) {
-      if (!aRequest && !bRequest) {
-        return 0;
-      }
-      return !aRequest ? -1 : 1;
+      return !aRequest ? !bRequest ? 0 : -1 : 1;
     }
     const aValue = aRequest.overrideTypes.join(', ');
     const bValue = bRequest.overrideTypes.join(', ');
@@ -1001,10 +1064,6 @@ export class NetworkRequestNode extends NetworkNode {
     const resourceType = this.requestInternal.resourceType();
     let simpleType = resourceType.name();
 
-    if (this.requestInternal.fromEarlyHints()) {
-      return i18nString(UIStrings.earlyHints);
-    }
-
     if (resourceType === Common.ResourceType.resourceTypes.Other ||
         resourceType === Common.ResourceType.resourceTypes.Image) {
       simpleType = mimeType.replace(/^(application|image)\//, '');
@@ -1038,16 +1097,20 @@ export class NetworkRequestNode extends NetworkNode {
     return this.requestInternal.resourceType() === Common.ResourceType.resourceTypes.Prefetch;
   }
 
+  private isPreload(): boolean {
+    return this.requestInternal.isPreloadRequest();
+  }
+
   throttlingConditions(): SDK.NetworkManager.AppliedNetworkConditions|undefined {
     return SDK.NetworkManager.MultitargetNetworkManager.instance().appliedRequestConditions(this.requestInternal);
   }
 
   override isWarning(): boolean {
-    return this.isFailed() && this.isPrefetch();
+    return this.isFailed() && (this.isPrefetch() || this.isPreload());
   }
 
   override isError(): boolean {
-    return this.isFailed() && !this.isPrefetch();
+    return this.isFailed() && !this.isPrefetch() && !this.isPreload();
   }
 
   override createCells(trElement: HTMLElement): void {
@@ -1137,6 +1200,10 @@ export class NetworkRequestNode extends NetworkNode {
         this.setTextAndTitle(cell, this.requestInternal.isAdRelated().toLocaleString());
         break;
       }
+      case 'is-preloaded': {
+        this.setTextAndTitle(cell, this.requestInternal.isLinkPreload().toLocaleString());
+        break;
+      }
       case 'render-blocking': {
         this.renderRenderBlockingCell(cell);
         break;
@@ -1207,6 +1274,10 @@ export class NetworkRequestNode extends NetworkNode {
         this.setTextAndTitle(cell, this.requestInternal.overrideTypes.join(', '));
         break;
       }
+      case 'execution-context': {
+        this.renderExecutionContextCell(cell);
+        break;
+      }
       default: {
         const columnConfig = this.dataGrid?.columns[columnId];
         if (columnConfig) {
@@ -1551,9 +1622,17 @@ export class NetworkRequestNode extends NetworkNode {
       }
 
       default: {
-        UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.otherC));
+        // Early hints are not technically an InitiatorType in Chromium but
+        // probably should be (it is in Resource Timing). See:
+        // https://chromium-review.googlesource.com/c/chromium/src/+/5348938/comments/7cf39a37_dae12d06
+        // But to developers it IS the initiator and more useful to know than
+        // the default "other" that otherwise shows for early-hint requests.
+        const initiatorText =
+            request.fromEarlyHints() ? i18nString(UIStrings.earlyHints) : i18nString(UIStrings.otherC);
+
+        UI.Tooltip.Tooltip.install(cell, initiatorText);
         cell.classList.add('network-dim-cell');
-        cell.appendChild(document.createTextNode(i18nString(UIStrings.otherC)));
+        cell.appendChild(document.createTextNode(initiatorText));
       }
     }
   }
@@ -1587,18 +1666,22 @@ export class NetworkRequestNode extends NetworkNode {
       }
       UI.Tooltip.Tooltip.install(cell, tooltipText);
       cell.classList.add('network-dim-cell');
+    } else if (this.requestInternal.fetchedViaServiceWorker) {
+      // Checked before the no-matching-route fallback below: a request that
+      // matches no router rule falls back to the fetch handler, so it can
+      // still be fulfilled by the ServiceWorker.
+      UI.UIUtils.createTextChild(cell, i18nString(UIStrings.serviceWorker));
+      UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.servedFromServiceWorkerResource, {PH1: resourceSize}));
+      cell.classList.add('network-dim-cell');
     } else if (this.requestInternal.serviceWorkerRouterInfo) {
-      // ServiceWorker routers are registered, but the request fallbacks to network
-      // because no matching router rules found.
+      // ServiceWorker routers are registered, but the request fell back to the
+      // network because no matching router rule was found and the fetch
+      // handler did not provide the response.
       const transferSize = i18n.ByteUtilities.formatBytesToKb(this.requestInternal.transferSize);
       UI.UIUtils.createTextChild(cell, transferSize);
       UI.Tooltip.Tooltip.install(
           cell,
           i18nString(UIStrings.servedFromNetworkMissingServiceWorkerRoute, {PH1: transferSize, PH2: resourceSize}));
-    } else if (this.requestInternal.fetchedViaServiceWorker) {
-      UI.UIUtils.createTextChild(cell, i18nString(UIStrings.serviceWorker));
-      UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.servedFromServiceWorkerResource, {PH1: resourceSize}));
-      cell.classList.add('network-dim-cell');
     } else if (this.requestInternal.redirectSourceSignedExchangeInfoHasNoErrors()) {
       UI.UIUtils.createTextChild(cell, i18n.i18n.lockedString('(signed-exchange)'));
       UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.servedFromSignedHttpExchange, {PH1: resourceSize}));
@@ -1643,6 +1726,11 @@ export class NetworkRequestNode extends NetworkNode {
     }
   }
 
+  private renderExecutionContextCell(cell: HTMLElement): void {
+    const contextDescription = NetworkRequestNode.getExecutionContextDescription(this.requestInternal);
+    this.setTextAndTitle(cell, contextDescription);
+  }
+
   private appendSubtitle(cellElement: Element, subtitleText: string, alwaysVisible = false, tooltipText = ''): void {
     const subtitleElement = document.createElement('div');
     subtitleElement.classList.add('network-cell-subtitle');

package/front_end/panels/network/NetworkLogView.ts

@@ -47,6 +47,7 @@ import * as Logs from '../../models/logs/logs.js';
 import * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Sources from '../../panels/sources/sources.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
@@ -776,6 +777,10 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     return request.initiatedByServiceWorker();
   }
 
+  private static linkPreloadRequestFilter(request: SDK.NetworkRequest.NetworkRequest): boolean {
+    return request.isLinkPreload();
+  }
+
   private static requestResponseHeaderFilter(value: string, request: SDK.NetworkRequest.NetworkRequest): boolean {
     return request.responseHeaderValue(value) !== undefined;
   }
@@ -1061,6 +1066,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
         NetworkForward.UIFilter.FilterType.Is, NetworkForward.UIFilter.IsFilterType.SERVICE_WORKER_INTERCEPTED);
     this.suggestionBuilder.addItem(
         NetworkForward.UIFilter.FilterType.Is, NetworkForward.UIFilter.IsFilterType.SERVICE_WORKER_INITIATED);
+    this.suggestionBuilder.addItem(NetworkForward.UIFilter.FilterType.Is, NetworkForward.UIFilter.IsFilterType.PRELOAD);
     this.suggestionBuilder.addItem(NetworkForward.UIFilter.FilterType.LargerThan, '100');
     this.suggestionBuilder.addItem(NetworkForward.UIFilter.FilterType.LargerThan, '10k');
     this.suggestionBuilder.addItem(NetworkForward.UIFilter.FilterType.LargerThan, '1M');
@@ -2060,7 +2066,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     const url = mainTarget.inspectedURL();
     const parsedURL = Common.ParsedURL.ParsedURL.fromString(url);
     const filename = (parsedURL ? parsedURL.host : 'network-log') as Platform.DevToolsPath.RawPathString;
-    const stream = new Bindings.FileUtils.FileOutputStream();
+    const stream = new Bindings.FileUtils.FileOutputStream(Workspace.FileManager.FileManager.instance());
 
     if (!await stream.open(Common.ParsedURL.ParsedURL.concatenate(filename, '.har'))) {
       return;
@@ -2082,7 +2088,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       await Common.Revealer.reveal(requestLocation);
     } else {  // If folder for local overrides has not been provided yet
       UI.InspectorView.InspectorView.instance().displaySelectOverrideFolderInfobar(async () => {
-        await Sources.SourcesNavigator.OverridesNavigatorView.instance().setupNewWorkspace();
+        await Sources.SourcesNavigator.OverridesNavigatorView.setupNewWorkspace();
         await networkPersistenceManager.getOrCreateHeadersUISourceCodeFromUrl(request.url());
         await Common.Revealer.reveal(requestLocation);
       });
@@ -2206,6 +2212,9 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
         if (value.toLowerCase() === NetworkForward.UIFilter.IsFilterType.SERVICE_WORKER_INITIATED) {
           return NetworkLogView.initiatedByServiceWorkerFilter;
         }
+        if (value.toLowerCase() === NetworkForward.UIFilter.IsFilterType.PRELOAD) {
+          return NetworkLogView.linkPreloadRequestFilter;
+        }
         break;
 
       case NetworkForward.UIFilter.FilterType.LargerThan:

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -161,6 +161,14 @@ const UIStrings = {
    * @description Text in Network Log View Columns of the Network panel
    */
   renderBlocking: 'Render-blocking',
+  /**
+   * @description Text to show whether a request is preloaded
+   */
+  isPreloaded: 'Preloaded',
+  /**
+   * @description Column header in the Network log view of the Network panel
+   */
+  executionContext: 'Execution context',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkLogViewColumns.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -1221,6 +1229,16 @@ const DEFAULT_COLUMNS = [
     title: i18nLazyString(UIStrings.renderBlocking),
     sortingFunction: NetworkRequestNode.RenderBlockingComparator,
   },
+  {
+    id: 'is-preloaded',
+    title: i18nLazyString(UIStrings.isPreloaded),
+    sortingFunction: NetworkRequestNode.IsPreloadedComparator,
+  },
+  {
+    id: 'execution-context',
+    title: i18nLazyString(UIStrings.executionContext),
+    sortingFunction: NetworkRequestNode.ExecutionContextComparator,
+  },
   // This header is a placeholder to let datagrid know that it can be sorted by this column, but never shown.
   {
     id: 'waterfall',

package/front_end/panels/network/NetworkPanel.ts

@@ -805,7 +805,8 @@ export class NetworkPanel extends UI.Panel.Panel implements
       return;
     }
     if (target instanceof Workspace.UISourceCode.UISourceCode) {
-      const resource = SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(target.url());
+      const resource = SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(
+          SDK.TargetManager.TargetManager.instance(), target.url());
       if (resource?.request) {
         appendRevealItem(resource.request);
       } else {

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -112,9 +112,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     styleMap.set(
         NetworkTimeCalculator.RequestTimeRangeNames.PROXY,
         {fillStyle: RequestTimeRangeNameToColor[NetworkTimeCalculator.RequestTimeRangeNames.PROXY]});
-    styleMap.set(
-        NetworkTimeCalculator.RequestTimeRangeNames.BLOCKING,
-        {fillStyle: RequestTimeRangeNameToColor[NetworkTimeCalculator.RequestTimeRangeNames.BLOCKING]});
+    styleMap.set(NetworkTimeCalculator.RequestTimeRangeNames.BLOCKING, {fillStyle: '--network-waterfall-blocking'});
     styleMap.set(
         NetworkTimeCalculator.RequestTimeRangeNames.PUSH,
         {fillStyle: RequestTimeRangeNameToColor[NetworkTimeCalculator.RequestTimeRangeNames.PUSH]});

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -6,7 +6,7 @@ import '../../ui/components/lists/lists.js';
 import '../../ui/components/tooltips/tooltips.js';
 import '../../ui/legacy/legacy.js';
 
-import type * as Common from '../../core/common/common.js';
+import * as Common from '../../core/common/common.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';
@@ -541,7 +541,7 @@ export class RequestConditionsDrawer extends UI.Widget.VBox {
       this.#cancelEdit(this.#editingCondition);
     }
     const condition = SDK.NetworkManager.RequestCondition.createFromSetting(
-        {url: Platform.DevToolsPath.EmptyUrlString, enabled: true});
+        {url: Platform.DevToolsPath.EmptyUrlString, enabled: true}, Common.Settings.Settings.instance());
     this.#editingCondition = condition;
     this.requestUpdate();
   }

package/front_end/panels/network/RequestPayloadView.ts

@@ -35,7 +35,9 @@
 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 TextUtils from '../../models/text_utils/text_utils.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 // eslint-disable-next-line @devtools/es-modules-import
@@ -43,9 +45,10 @@ import objectPropertiesSectionStyles from '../../ui/legacy/components/object_ui/
 // eslint-disable-next-line @devtools/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, type LitTemplate, render, type TemplateResult} from '../../ui/lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import {BinaryResourceView} from './BinaryResourceView.js';
 import requestPayloadTreeStyles from './requestPayloadTree.css.js';
 import requestPayloadViewStyles from './requestPayloadView.css.js';
 import {ShowMoreDetailsWidget} from './ShowMoreDetailsWidget.js';
@@ -120,6 +123,10 @@ interface ViewInput {
   formParameters: SDK.NetworkRequest.NameValue[]|undefined;
   queryString: string|null;
   queryParameters: SDK.NetworkRequest.NameValue[]|null;
+
+  /** Raw binary content data for the request body (when base64-encoded by backend). */
+  binaryPayloadContentData: TextUtils.ContentData.ContentData|null;
+  requestUrl: Platform.DevToolsPath.UrlString;
 }
 
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
@@ -273,7 +280,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       </li>
       <li
           role=treeitem
-          ?hidden=${!input.formData || Boolean(input.formParameters)}
+          ?hidden=${!input.formData || Boolean(input.formParameters) || Boolean(input.binaryPayloadContentData)}
           jslog=${VisualLogging.section().context('request-payload')}
           @contextmenu=${onContextMenu(input.viewJSONPayloadSource, input.setViewJSONPayloadSource,
                                        /* includeURLDecodingOption*/ false)}
@@ -289,7 +296,21 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         </ul>
       </li>
      </ul>
-     `}></devtools-tree>`, target, {
+     `}></devtools-tree>
+   ${input.binaryPayloadContentData ? html`
+     <div class="raw-payload-section"
+          jslog=${VisualLogging.section().context('binary-request-payload')}>
+       ${widget(element => {
+         const streamingContent = TextUtils.StreamingContentData.StreamingContentData.from(
+             input.binaryPayloadContentData as TextUtils.ContentData.ContentData);
+         return new BinaryResourceView(
+             streamingContent,
+             input.requestUrl,
+             Common.ResourceType.resourceTypes.XHR,
+             element);
+       })}
+     </div>` : nothing}
+   `, target, {
       container: {
         classes: ['request-payload-view'],
         attributes: {
@@ -304,10 +325,12 @@ export class RequestPayloadView extends UI.Widget.VBox {
   #decodeRequestParameters = true;
   #formData?: string;
   #formParameters?: SDK.NetworkRequest.NameValue[];
+  #binaryPayloadContentData: TextUtils.ContentData.ContentData|null = null;
   #view: View;
   #viewJSONPayloadSource = false;
   #viewFormParamSource = false;
   #viewQueryParamSource = false;
+  #refreshFormDataPromiseForTest = Promise.resolve();
 
   constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
     super();
@@ -330,18 +353,22 @@ export class RequestPayloadView extends UI.Widget.VBox {
     }
 
     this.requestUpdate();
-    void this.#refreshFormData();
+    this.#refreshFormData();
   }
 
   get request(): SDK.NetworkRequest.NetworkRequest|undefined {
     return this.#request;
   }
 
+  get refreshFormDataPromiseForTest(): Promise<void> {
+    return this.#refreshFormDataPromiseForTest;
+  }
+
   override wasShown(): void {
     super.wasShown();
     this.request?.addEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.#refreshFormData, this);
 
-    void this.#refreshFormData();
+    this.#refreshFormData();
   }
 
   override willHide(): void {
@@ -396,16 +423,35 @@ export class RequestPayloadView extends UI.Widget.VBox {
       copyValue: (value: string): void => {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(value);
-      }
+      },
+      binaryPayloadContentData: this.#binaryPayloadContentData,
+      requestUrl: this.request?.url() ?? Platform.DevToolsPath.EmptyUrlString,
     };
     this.#view(input, {}, this.element);
   }
 
-  async #refreshFormData(): Promise<void> {
+  #refreshFormData(): void {
+    this.#refreshFormDataPromiseForTest = this.#doRefreshFormData();
+  }
+
+  async #doRefreshFormData(): Promise<void> {
     this.#formData = await this.request?.requestFormData() ?? undefined;
     if (this.#formData) {
       this.#formParameters = await this.request?.formParameters() ?? undefined;
     }
+
+    // Fetch raw binary content data for the request body when the backend
+    // returns base64-encoded data. This enables the binary viewer (hex,
+    // base64, utf-8) in the Payload tab for compressed/binary bodies.
+    this.#binaryPayloadContentData = null;
+    if (this.request && !this.#formParameters) {
+      const contentData = await this.request.requestFormDataContentData();
+      if (!TextUtils.ContentData.ContentData.isError(contentData) && !contentData.isTextContent &&
+          contentData.createdFromBase64) {
+        this.#binaryPayloadContentData = contentData;
+      }
+    }
+
     this.requestUpdate();
   }
 

package/front_end/panels/network/RequestPreviewView.ts

@@ -10,6 +10,7 @@ import type * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {RequestHTMLView} from './RequestHTMLView.js';
@@ -47,7 +48,12 @@ export class RequestPreviewView extends UI.Widget.VBox {
     }
     const toolbar = this.element.createChild('devtools-toolbar', 'network-item-preview-toolbar');
     void view.toolbarItems().then(items => {
-      items.map(item => toolbar.appendToolbarItem(item));
+      if (Array.isArray(items)) {
+        items.map(item => toolbar.appendToolbarItem(item));
+      } else {
+        // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+        render(items, toolbar);
+      }
     });
     return view;
   }

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

@@ -568,7 +568,7 @@ export class ResponseHeaderSection extends ResponseHeaderSectionBase {
       await networkPersistenceManager.getOrCreateHeadersUISourceCodeFromUrl(requestUrl);
     } else {  // If folder for local overrides has not been provided yet
       UI.InspectorView.InspectorView.instance().displaySelectOverrideFolderInfobar(async () => {
-        await Sources.SourcesNavigator.OverridesNavigatorView.instance().setupNewWorkspace();
+        await Sources.SourcesNavigator.OverridesNavigatorView.setupNewWorkspace();
         await networkPersistenceManager.getOrCreateHeadersUISourceCodeFromUrl(requestUrl);
       });
     }

package/front_end/panels/network/forward/UIFilter.ts

@@ -34,6 +34,7 @@ export const enum IsFilterType {
   FROM_CACHE = 'from-cache',
   SERVICE_WORKER_INTERCEPTED = 'service-worker-intercepted',
   SERVICE_WORKER_INITIATED = 'service-worker-initiated',
+  PRELOAD = 'preloaded',
 }
 
 export const enum MixedContentFilterValues {