chrome-devtools-frontend 1.0.1657855 → 1.0.1661063

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -15,17 +15,17 @@ import {type LazyUint8Array, LinearMemoryInspectorController} from './LinearMemo
 
 const UIStrings = {
   /**
-   * @description Label in the Linear Memory inspector tool that serves as a placeholder if no inspections are open (i.e. nothing to see here).
-   *             Inspection hereby refers to viewing, navigating and understanding the memory through this tool.
+   * @description Label in the Memory inspector panel that serves as a placeholder if no inspections are open (i.e., nothing to see here).
+   *             Inspection here refers to viewing, navigating, and understanding the memory through this panel.
    */
   noOpenInspections: 'No open inspections',
   /**
-   * @description Label in the Linear Memory inspector tool that serves as a placeholder if no inspections are open (i.e. nothing to see here).
-   *             Inspection hereby refers to viewing, navigating and understanding the memory through this tool.
+   * @description Label in the Memory inspector panel that serves as a placeholder if no inspections are open (i.e., nothing to see here).
+   *             Inspection here refers to viewing, navigating, and understanding the memory through this panel.
    */
   memoryInspectorExplanation: 'On this page you can inspect binary data.',
   /**
-   * @description Label in the Linear Memory inspector tool for a link.
+   * @description Label in the Memory inspector panel for a link.
    */
   learnMore: 'Learn more',
 } as const;

package/front_end/panels/linear_memory_inspector/components/LinearMemoryHighlightChipList.ts

@@ -14,13 +14,13 @@ import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 
 const UIStrings = {
   /**
-   * @description Tooltip text that appears when hovering over an inspected variable's button in the Linear Memory Highlight Chip List.
-   * Clicking the button changes the displayed slice of computer memory in the Linear Memory inspector to contain the inspected variable's bytes.
+   * @description Tooltip text that appears when hovering over an inspected variable's button in the highlight chip list in the Memory inspector panel.
+   * Clicking the button changes the displayed slice of computer memory in the Memory inspector panel to contain the inspected variable's bytes.
    */
   jumpToAddress: 'Jump to this memory',
   /**
-   * @description Tooltip text that appears when hovering over an inspected variable's delete button in the Linear Memory Highlight Chip List.
-   * Clicking the delete button stops highlighting the variable's memory in the Linear Memory inspector.
+   * @description Tooltip text that appears when hovering over an inspected variable's delete button in the highlight chip list in the Memory inspector panel.
+   * Clicking the delete button stops highlighting the variable's memory in the Memory inspector panel.
    * 'Memory' is a slice of bytes in the computer memory.
    */
   deleteHighlight: 'Stop highlighting this memory',

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -32,11 +32,11 @@ import {
 
 const UIStrings = {
   /**
-   * @description Tooltip text that appears when hovering over an invalid address in the address line in the Linear memory inspector
+   * @description Tooltip text that appears when hovering over an invalid address in the address line in the Memory inspector panel.
    * @example {0x00000000} PH1
    * @example {0x00400000} PH2
    */
-  addressHasToBeANumberBetweenSAnd: 'Address has to be a number between {PH1} and {PH2}',
+  addressHasToBeANumberBetweenSAnd: 'Address must be a number between {PH1} and {PH2}',
 } as const;
 const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/LinearMemoryInspector.ts', UIStrings);

package/front_end/panels/linear_memory_inspector/components/LinearMemoryNavigator.ts

@@ -14,27 +14,27 @@ import linearMemoryNavigatorStyles from './linearMemoryNavigator.css.js';
 
 const UIStrings = {
   /**
-   * @description Tooltip text that appears when hovering over a valid memory address (e.g. 0x0) in the address line in the Linear memory inspector.
+   * @description Tooltip text that appears when hovering over a valid memory address (for example, 0x0) in the address line in the Memory inspector panel.
    */
   enterAddress: 'Enter address',
   /**
-   * @description Tooltip text that appears when hovering over the button to go back in history in the Linear Memory Navigator
+   * @description Tooltip text that appears when hovering over the button to go back in history in the Memory inspector panel.
    */
   goBackInAddressHistory: 'Go back in address history',
   /**
-   * @description Tooltip text that appears when hovering over the button to go forward in history in the Linear Memory Navigator
+   * @description Tooltip text that appears when hovering over the button to go forward in history in the Memory inspector panel.
    */
   goForwardInAddressHistory: 'Go forward in address history',
   /**
-   * @description Tooltip text that appears when hovering over the page back icon in the Linear Memory Navigator
+   * @description Tooltip text that appears when hovering over the page back icon in the Memory inspector panel.
    */
   previousPage: 'Previous page',
   /**
-   * @description Tooltip text that appears when hovering over the next page icon in the Linear Memory Navigator
+   * @description Tooltip text that appears when hovering over the next page icon in the Memory inspector panel.
    */
   nextPage: 'Next page',
   /**
-   * @description Text to refresh the page
+   * @description Tooltip text that appears when hovering over the refresh button in the Memory inspector panel.
    */
   refresh: 'Refresh',
 } as const;

package/front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -18,14 +18,14 @@ import {ValueInterpreterSettings} from './ValueInterpreterSettings.js';
 
 const UIStrings = {
   /**
-   * @description Tooltip text that appears when hovering over the gear button to open and close settings in the Linear memory inspector. These settings
+   * @description Tooltip text that appears when hovering over the gear button to open and close settings in the Memory inspector panel. These settings
    *             allow the user to change the value type to view, such as 32-bit Integer, or 32-bit Float.
    */
   toggleValueTypeSettings: 'Toggle value type settings',
   /**
-   * @description Tooltip text that appears when hovering over the 'Little Endian' or 'Big Endian' setting in the Linear memory inspector.
+   * @description Tooltip text that appears when hovering over the Little Endian or Big Endian setting in the Memory inspector panel.
    */
-  changeEndianness: 'Change `Endianness`',
+  changeEndianness: 'Change endianness',
 } as const;
 const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts', UIStrings);

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts

@@ -26,27 +26,26 @@ import {
 
 const UIStrings = {
   /**
-   * @description Tooltip text that appears when hovering over an unsigned interpretation of the memory under the Value Interpreter
+   * @description Tooltip text that appears when hovering over an unsigned interpretation of the memory in the value interpreter in the Memory inspector panel.
    */
-  unsignedValue: '`Unsigned` value',
+  unsignedValue: 'Unsigned value',
   /**
-   * @description Tooltip text that appears when hovering over the element to change value type modes of under the Value Interpreter. Value type modes
-   *             are different ways of viewing a certain value, e.g.: 10 (decimal) can be 0xa in hexadecimal mode, or 12 in octal mode.
+   * @description Tooltip text that appears when hovering over the element to change value type modes in the value interpreter in the Memory inspector panel. Value type modes
+   *             are different ways of viewing a certain value, for example: 10 (decimal) can be 0xa in hexadecimal mode, or 12 in octal mode.
    */
   changeValueTypeMode: 'Change mode',
   /**
-   * @description Tooltip text that appears when hovering over a signed interpretation of the memory under the Value Interpreter
+   * @description Tooltip text that appears when hovering over a signed interpretation of the memory in the value interpreter in the Memory inspector panel.
    */
-  signedValue: '`Signed` value',
+  signedValue: 'Signed value',
   /**
-   * @description Tooltip text that appears when hovering over a 'jump-to-address' button that is next to a pointer (32-bit or 64-bit) under the Value Interpreter
+   * @description Tooltip text that appears when hovering over a jump-to-address button that is next to a pointer (32-bit or 64-bit) in the value interpreter in the Memory inspector panel.
    */
   jumpToPointer: 'Jump to address',
   /**
-   * @description Tooltip text that appears when hovering over a 'jump-to-address' button that is next to a pointer (32-bit or 64-bit) with an invalid address under the Value Interpreter.
+   * @description Tooltip text that appears when hovering over a jump-to-address button that is next to a pointer (32-bit or 64-bit) with an invalid address in the value interpreter in the Memory inspector panel.
    */
   addressOutOfRange: 'Address out of memory range',
-
 } as const;
 const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts', UIStrings);

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplayUtils.ts

@@ -7,8 +7,8 @@ import * as Platform from '../../../core/platform/platform.js';
 
 const UIStrings = {
   /**
-   * @description Text that is shown in the LinearMemoryInspector if a value could not be correctly formatted
-   *             for the requested mode (e.g. we do not floats to be represented as hexadecimal numbers).
+   * @description Text that is shown in the Memory inspector panel if a value cannot be correctly formatted
+   *             for the requested mode (for example, when a float cannot be represented as a hexadecimal number).
    *             Abbreviation stands for 'not applicable'.
    */
   notApplicable: 'N/A',

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterSettings.ts

@@ -15,7 +15,7 @@ const {render, html} = Lit;
 
 const UIStrings = {
   /**
-   * @description Name of a group of selectable value types that do not fall under integer and floating point value types, e.g. Pointer32. The group appears name appears under the Value Interpreter Settings.
+   * @description Name of a group of selectable value types that do not fall under integer and floating point value types (for example, Pointer32). The group name appears in the value interpreter settings in the Memory inspector panel.
    */
   otherGroup: 'Other',
 } as const;

package/front_end/panels/linear_memory_inspector/linear_memory_inspector-meta.ts

@@ -12,11 +12,11 @@ import type * as LinearMemoryInspector from './linear_memory_inspector.js';
 
 const UIStrings = {
   /**
-   * @description Title of the Linear Memory inspector tool
+   * @description Title of the Memory inspector panel.
    */
   memoryInspector: 'Memory inspector',
   /**
-   * @description Command for showing the 'Memory inspector' tool
+   * @description Command for showing the Memory inspector panel.
    */
   showMemoryInspector: 'Show Memory inspector',
 } as const;

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

@@ -777,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;
   }
@@ -1062,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');
@@ -2083,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);
       });
@@ -2207,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 {