chrome-devtools-frontend 1.0.1651641 → 1.0.1654411

package/front_end/panels/layer_viewer/LayerTreeOutline.ts

@@ -2,12 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-imperative-dom-api */
-
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
 
 import layerTreeOutlineStyles from './layerTreeOutline.css.js';
 import {
@@ -41,21 +40,49 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/layer_viewer/LayerTreeOutline.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.TreeOutline.TreeOutline>(
-    UI.TreeOutline.TreeOutline) implements Common.EventTarget.EventTarget<EventTypes>, LayerView {
+
+export interface ViewInput {
+  treeOutlineElement: HTMLElement;
+  layerCount: number;
+  totalLayerMemory: number;
+}
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, _output, target) => {
+  render(html`
+    <style>${layerTreeOutlineStyles}</style>
+    <div class="vbox layer-tree-wrapper">
+      <div style="flex-grow: 1; overflow: auto; display: flex;">
+        ${input.treeOutlineElement}
+      </div>
+      <div class="hbox layer-summary">
+        <span class="layer-count">${i18nString(UIStrings.layerCount, {
+           PH1: input.layerCount
+         })}</span>
+        <span>${i18n.ByteUtilities.bytesToString(input.totalLayerMemory)}</span>
+      </div>
+    </div>
+  `,
+         target);
+};
+
+export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
+    UI.Widget.Widget) implements Common.EventTarget.EventTarget<EventTypes>, LayerView {
   private layerViewHost: LayerViewHost;
   private treeOutline: UI.TreeOutline.TreeOutlineInShadow;
   private lastHoveredNode: LayerTreeElement|null;
-  private layerCountElement: HTMLSpanElement;
-  private layerMemoryElement: HTMLSpanElement;
-  override element: HTMLElement;
   private layerTree?: SDK.LayerTreeBase.LayerTreeBase|null;
   private layerSnapshotMap?: Map<SDK.LayerTreeBase.Layer, SnapshotSelection>;
 
-  constructor(layerViewHost: LayerViewHost) {
+  #view: View;
+  #layerCount = 0;
+  #totalLayerMemory = 0;
+
+  constructor(layerViewHost: LayerViewHost, view: View = DEFAULT_VIEW) {
     super();
     this.layerViewHost = layerViewHost;
     this.layerViewHost.registerView(this);
+    this.#view = view;
 
     this.treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
     this.treeOutline.element.classList.add('layer-tree', 'overflow-auto');
@@ -66,24 +93,23 @@ export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes
 
     this.lastHoveredNode = null;
 
-    const summaryElement = document.createElement('div');
-    summaryElement.classList.add('hbox', 'layer-summary');
-    this.layerCountElement = document.createElement('span');
-    this.layerCountElement.classList.add('layer-count');
-    this.layerMemoryElement = document.createElement('span');
-    summaryElement.appendChild(this.layerCountElement);
-    summaryElement.appendChild(this.layerMemoryElement);
-
-    const wrapperElement = document.createElement('div');
-    wrapperElement.classList.add('vbox', 'layer-tree-wrapper');
-    wrapperElement.appendChild(this.treeOutline.element);
-    wrapperElement.appendChild(summaryElement);
-    this.element = wrapperElement;
-    UI.DOMUtilities.appendStyle(this.element, layerTreeOutlineStyles);
-
     this.layerViewHost.showInternalLayersSetting().addChangeListener(this.update, this);
   }
 
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    this.#view({
+      treeOutlineElement: this.treeOutline.element,
+      layerCount: this.#layerCount,
+      totalLayerMemory: this.#totalLayerMemory,
+    },
+               {}, this.contentElement);
+  }
+
   override focus(): void {
     this.treeOutline.focus();
   }
@@ -121,7 +147,7 @@ export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes
 
   private update(): void {
     const showInternalLayers = this.layerViewHost.showInternalLayersSetting().get();
-    const seenLayers = new Map<SDK.LayerTreeBase.Layer, boolean>();
+    const seenLayers = new Set<SDK.LayerTreeBase.Layer>();
     let root: (SDK.LayerTreeBase.Layer|null)|null = null;
     if (this.layerTree) {
       if (!showInternalLayers) {
@@ -135,58 +161,81 @@ export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes
     let layerCount = 0;
     let totalLayerMemory = 0;
 
-    function updateLayer(this: LayerTreeOutline, layer: SDK.LayerTreeBase.Layer): void {
-      if (!layer.drawsContent() && !showInternalLayers) {
-        return;
-      }
-      if (seenLayers.get(layer)) {
-        console.assert(false, 'Duplicate layer: ' + layer.id());
-      }
-      seenLayers.set(layer, true);
+    const childrenMap = new Map<SDK.LayerTreeBase.Layer, SDK.LayerTreeBase.Layer[]>();
 
-      layerCount++;
-      totalLayerMemory += layer.gpuMemoryUsage();
+    if (this.layerTree && root) {
+      const buildTree = (layer: SDK.LayerTreeBase.Layer): void => {
+        if (!layer.drawsContent() && !showInternalLayers) {
+          return;
+        }
 
-      let node: LayerTreeElement|null = layerToTreeElement.get(layer) || null;
-      let parentLayer = layer.parent();
-      // Skip till nearest visible ancestor.
-      while (parentLayer && parentLayer !== root && !parentLayer.drawsContent() && !showInternalLayers) {
-        parentLayer = parentLayer.parent();
-      }
-      const parent =
-          layer === root ? this.treeOutline.rootElement() : parentLayer && layerToTreeElement.get(parentLayer);
-      if (!parent) {
-        console.assert(false, 'Parent is not in the tree');
-        return;
-      }
-      if (!node) {
-        node = new LayerTreeElement(this, layer);
-        parent.appendChild(node);
-        // Expand all new non-content layers to expose content layers better.
-        if (!layer.drawsContent()) {
-          node.expand();
+        layerCount++;
+        totalLayerMemory += layer.gpuMemoryUsage();
+
+        if (layer === root) {
+          return;
         }
-      } else {
-        if (node.parent !== parent) {
-          const oldSelection = this.treeOutline.selectedTreeElement;
-          if (node.parent) {
-            node.parent.removeChild(node);
-          }
-          parent.appendChild(node);
-          if (oldSelection && oldSelection !== this.treeOutline.selectedTreeElement) {
-            oldSelection.select();
+
+        let parentLayer = layer.parent();
+        // Skip till nearest visible ancestor.
+        while (parentLayer && parentLayer !== root && !parentLayer.drawsContent() && !showInternalLayers) {
+          parentLayer = parentLayer.parent();
+        }
+
+        if (parentLayer) {
+          let children = childrenMap.get(parentLayer);
+          if (!children) {
+            children = [];
+            childrenMap.set(parentLayer, children);
           }
+          children.push(layer);
+        } else {
+          console.assert(false, 'Internal error: multiple root layers');
         }
-        node.update();
-      }
+      };
+
+      this.layerTree.forEachLayer(buildTree, root);
     }
-    if (root && this.layerTree) {
-      this.layerTree.forEachLayer(updateLayer.bind(this), root);
+
+    const syncNode =
+        (layer: SDK.LayerTreeBase.Layer, parent: UI.TreeOutline.TreeOutline|UI.TreeOutline.TreeElement): void => {
+          seenLayers.add(layer);
+          let node: LayerTreeElement|null = layerToTreeElement.get(layer) || null;
+          if (!node) {
+            node = new LayerTreeElement(this, layer);
+            parent.appendChild(node);
+            // Expand all new non-content layers to expose content layers better.
+            if (!layer.drawsContent()) {
+              node.expand();
+            }
+          } else {
+            if (node.parent !== parent) {
+              const oldSelection = this.treeOutline.selectedTreeElement;
+              if (node.parent) {
+                node.parent.removeChild(node);
+              }
+              parent.appendChild(node);
+              if (oldSelection && oldSelection !== this.treeOutline.selectedTreeElement) {
+                oldSelection.select();
+              }
+            }
+            node.update();
+          }
+
+          const children = childrenMap.get(layer) || [];
+          for (const child of children) {
+            syncNode(child, node);
+          }
+        };
+
+    if (root && (root.drawsContent() || showInternalLayers)) {
+      syncNode(root, this.treeOutline.rootElement());
     }
+
     // Clean up layers that don't exist anymore from tree.
     const rootElement = this.treeOutline.rootElement();
     for (let node = rootElement.firstChild(); node instanceof LayerTreeElement && !node.root;) {
-      if (seenLayers.get(node.layer)) {
+      if (seenLayers.has(node.layer)) {
         node = node.traverseNextTreeElement(false);
       } else {
         const nextNode = node.nextSibling || node.parent;
@@ -209,8 +258,9 @@ export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes
       }
     }
 
-    this.layerCountElement.textContent = i18nString(UIStrings.layerCount, {PH1: layerCount});
-    this.layerMemoryElement.textContent = i18n.ByteUtilities.bytesToString(totalLayerMemory);
+    this.#layerCount = layerCount;
+    this.#totalLayerMemory = totalLayerMemory;
+    this.requestUpdate();
   }
 
   private onMouseMove(event: MouseEvent): void {

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -120,7 +120,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         uiI18n.getFormatLocalizedString(
           str_, UIStrings.checkSForPossibleReasons,
           {
-            PH1: Link.create('about:gpu', undefined, undefined, 'about-gpu')
+            PH1: Link.create('chrome://gpu', undefined, undefined, 'about-gpu', 0, true)
           }
         )
       ],

package/front_end/panels/layer_viewer/layerTreeOutline.css

@@ -4,19 +4,26 @@
  * found in the LICENSE file.
  */
 
-.layer-summary {
-  border-top: 1px solid var(--sys-color-divider);
-  justify-content: space-between;
-  padding: 4px 10px;
-  flex-shrink: 0;
-}
+@scope to (devtools-widget > *) {
+  .layer-summary {
+    border-top: 1px solid var(--sys-color-divider);
+    justify-content: space-between;
+    padding: 4px 10px;
+    flex-shrink: 0;
+  }
 
-.layer-count {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+  .layer-count {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .layer-tree-wrapper {
+    height: 100%;
+    flex-grow: 1;
+  }
 
-.layer-tree-wrapper {
-  flex-grow: 1;
+  .layer-tree {
+    flex-grow: 1;
+  }
 }

package/front_end/panels/layers/LayersPanel.ts

@@ -47,7 +47,7 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar implements SDK.Target
     this.layerTreeOutline = new LayerViewer.LayerTreeOutline.LayerTreeOutline(this.layerViewHost);
     this.layerTreeOutline.addEventListener(
         LayerViewer.LayerTreeOutline.Events.PAINT_PROFILER_REQUESTED, this.onPaintProfileRequested, this);
-    this.panelSidebarElement().appendChild(this.layerTreeOutline.element);
+    this.layerTreeOutline.show(this.panelSidebarElement());
     this.setDefaultFocusedElement(this.layerTreeOutline.element);
 
     this.rightSplitWidget = new UI.SplitWidget.SplitWidget(false, true, 'layer-details-split-view-state');

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -14,13 +14,18 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {CalibrationController} from './CalibrationController.js';
+import {ThrottlingPresets} from './ThrottlingPresets.js';
 import throttlingSettingsTabStyles from './throttlingSettingsTab.css.js';
 
 const UIStrings = {
   /**
-   * @description Text in Throttling Settings Tab of the Network panel
+   * @description Title for default network throttling profiles card
+   */
+  defaultProfiles: 'Default profiles',
+  /**
+   * @description Title for custom network throttling profiles card
    */
-  networkThrottlingProfiles: 'Network throttling profiles',
+  customProfiles: 'Custom profiles',
   /**
    * @description Text of add conditions button in Throttling Settings Tab of the Network panel
    */
@@ -452,7 +457,10 @@ function extractCustomSettingIndex(key: SDK.NetworkManager.UserDefinedThrottling
 
 export class ThrottlingSettingsTab extends UI.Widget.VBox implements
     UI.ListWidget.Delegate<SDK.NetworkManager.Conditions> {
-  private readonly list: UI.ListWidget.ListWidget<SDK.NetworkManager.Conditions>;
+  /** List of default network throttling presets (read-only in UI) */
+  private readonly presetsList: UI.ListWidget.ListWidget<SDK.NetworkManager.Conditions>;
+  /** List of custom user-defined network throttling profiles */
+  private readonly customList: UI.ListWidget.ListWidget<SDK.NetworkManager.Conditions>;
   private readonly customUserConditions: Common.Settings.Setting<SDK.NetworkManager.Conditions[]>;
   private editor?: UI.ListWidget.Editor<SDK.NetworkManager.Conditions>;
   private cpuThrottlingCard: CPUThrottlingCard;
@@ -489,15 +497,18 @@ export class ThrottlingSettingsTab extends UI.Widget.VBox implements
     addButton.textContent = i18nString(UIStrings.addCustomProfile);
     addButton.addEventListener('click', () => this.addButtonClicked());
 
-    const card = settingsContent.createChild('devtools-card');
-    card.heading = i18nString(UIStrings.networkThrottlingProfiles);
-    const container = card.createChild('div');
+    this.presetsList = new UI.ListWidget.ListWidget(this);
+    this.presetsList.setHeader(createHeaderRow());
+    createProfilesCard(i18nString(UIStrings.defaultProfiles), this.presetsList, settingsContent);
+    const presets = ThrottlingPresets.networkPresets;
+    for (let i = 0; i < presets.length; ++i) {
+      this.presetsList.appendItem(presets[i], false);
+    }
 
-    this.list = new UI.ListWidget.ListWidget(this);
-    this.list.element.classList.add('conditions-list');
-    this.list.registerRequiredCSS(throttlingSettingsTabStyles);
-    this.list.show(container);
-    container.appendChild(addButton);
+    this.customList = new UI.ListWidget.ListWidget(this);
+    this.customList.setHeader(createHeaderRow());
+    const customContainer = createProfilesCard(i18nString(UIStrings.customProfiles), this.customList, settingsContent);
+    customContainer.appendChild(addButton);
 
     this.customUserConditions = SDK.NetworkManager.customUserNetworkConditionsSetting();
     this.customUserConditions.addChangeListener(this.conditionsUpdated, this);
@@ -533,19 +544,17 @@ export class ThrottlingSettingsTab extends UI.Widget.VBox implements
   }
 
   private conditionsUpdated(): void {
-    this.list.clear();
+    this.customList.clear();
 
     const conditions = this.customUserConditions.get();
     for (let i = 0; i < conditions.length; ++i) {
-      this.list.appendItem(conditions[i], true);
+      this.customList.appendItem(conditions[i], true);
     }
-
-    this.list.appendSeparator();
   }
 
   private addButtonClicked(): void {
     this.#customUserConditionsCount++;
-    this.list.addNewItem(this.customUserConditions.get().length, {
+    this.customList.addNewItem(this.customList.items.length, {
       key: `USER_CUSTOM_SETTING_${this.#customUserConditionsCount}`,
       title: () => '',
       download: -1,
@@ -563,7 +572,7 @@ export class ThrottlingSettingsTab extends UI.Widget.VBox implements
     const titleText = title.createChild('div', 'conditions-list-title-text');
     const castedTitle = this.retrieveOptionsTitle(conditions);
     titleText.textContent = castedTitle;
-    UI.Tooltip.Tooltip.install(titleText, castedTitle);
+    UI.Tooltip.Tooltip.install(title, castedTitle);
     element.createChild('div', 'conditions-list-separator');
     element.createChild('div', 'conditions-list-text').textContent = throughputText(conditions.download);
     element.createChild('div', 'conditions-list-separator');
@@ -853,3 +862,41 @@ function percentText(percent: number): string {
   }
   return String(percent) + '%';
 }
+
+function createProfilesCard(heading: string, list: UI.ListWidget.ListWidget<SDK.NetworkManager.Conditions>,
+                            parent: Element): HTMLElement {
+  const card = parent.createChild('devtools-card');
+  card.heading = heading;
+  const container = card.createChild('div');
+  list.element.classList.add('conditions-list');
+  list.registerRequiredCSS(throttlingSettingsTabStyles);
+  list.show(container);
+  return container;
+}
+
+function appendHeaderColumn(element: Element, text: string): void {
+  element.createChild('div', 'conditions-list-separator');
+  const column = element.createChild('div', 'conditions-list-text');
+  column.textContent = text;
+  UI.Tooltip.Tooltip.install(column, text);
+}
+
+function createHeaderRow(): Element {
+  const element = document.createElement('div');
+  element.classList.add('conditions-list-item', 'conditions-list-header');
+
+  const title = element.createChild('div', 'conditions-list-text conditions-list-title');
+  const titleText = title.createChild('div', 'conditions-list-title-text');
+  const profileName = i18nString(UIStrings.profileName);
+  titleText.textContent = profileName;
+  UI.Tooltip.Tooltip.install(title, profileName);
+
+  appendHeaderColumn(element, i18nString(UIStrings.download));
+  appendHeaderColumn(element, i18nString(UIStrings.upload));
+  appendHeaderColumn(element, i18nString(UIStrings.latency));
+  appendHeaderColumn(element, i18nString(UIStrings.packetLoss));
+  appendHeaderColumn(element, i18nString(UIStrings.packetQueueLength));
+  appendHeaderColumn(element, i18nString(UIStrings.packetReordering));
+
+  return element;
+}

package/front_end/panels/mobile_throttling/throttlingSettingsTab.css

@@ -148,3 +148,8 @@
   align-items: center;
   gap: 5px;
 }
+
+.conditions-list-header {
+  font-weight: bold;
+  border-bottom: 1px solid var(--sys-color-divider);
+}

package/front_end/panels/network/LinkPreloadGenerator.ts

@@ -0,0 +1,101 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../core/common/common.js';
+import type * as SDK from '../../core/sdk/sdk.js';
+
+const resourceTypeToAsAttribute = new Map<Common.ResourceType.ResourceType, string>([
+  [Common.ResourceType.resourceTypes.Document, 'document'],
+  [Common.ResourceType.resourceTypes.Stylesheet, 'style'],
+  [Common.ResourceType.resourceTypes.Image, 'image'],
+  [Common.ResourceType.resourceTypes.Font, 'font'],
+  [Common.ResourceType.resourceTypes.Script, 'script'],
+  [Common.ResourceType.resourceTypes.TextTrack, 'track'],
+  [Common.ResourceType.resourceTypes.Manifest, 'manifest'],
+  [Common.ResourceType.resourceTypes.Fetch, 'fetch'],
+  [Common.ResourceType.resourceTypes.XHR, 'fetch'],
+  [Common.ResourceType.resourceTypes.Wasm, 'fetch'],
+]);
+
+/**
+ * Escapes HTML special characters.
+ * Crucial for URLs in href attributes to prevent characters like '&' from being
+ * interpreted as HTML entities (e.g., '&copy' becoming '©').
+ */
+function escapeHTML(str: string): string {
+  return str.replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+}
+
+function parsePreloadLinkOrigins(request: SDK.NetworkRequest.NetworkRequest):
+    {requestOrigin: string|null, documentOrigin: string|null} {
+  const requestOrigin = request.parsedURL.securityOrigin();
+  const documentURL = request.documentURL;
+  const documentOrigin =
+      documentURL ? (Common.ParsedURL.ParsedURL.fromString(documentURL)?.securityOrigin() ?? null) : null;
+  return {requestOrigin, documentOrigin};
+}
+
+function determinePreloadLinkHref(request: SDK.NetworkRequest.NetworkRequest, isSameOrigin: boolean): string {
+  // For same-origin resources, use root-relative URL for environment portability.
+  if (isSameOrigin && request.parsedURL.isValid) {
+    return request.parsedURL.path + (request.parsedURL.queryParams ? '?' + request.parsedURL.queryParams : '');
+  }
+  return request.url();
+}
+
+function determinePreloadLinkCrossOrigin(request: SDK.NetworkRequest.NetworkRequest, isCrossOrigin: boolean): string {
+  const resourceType = request.resourceType();
+  const asValue = resourceTypeToAsAttribute.get(resourceType);
+  const isFont = resourceType === Common.ResourceType.resourceTypes.Font;
+  const isFetch = asValue === 'fetch';
+  const secFetchMode = request.requestHeaderValue('sec-fetch-mode')?.toLowerCase();
+
+  const needsCrossOrigin = isFont || isFetch || secFetchMode === 'cors';
+
+  if (!needsCrossOrigin) {
+    return '';
+  }
+
+  const hasCredentials = request.includedRequestCookies().length > 0 ||
+      Boolean(request.requestHeaderValue('cookie') || request.requestHeaderValue('authorization'));
+
+  // Only use credentials mode if it is cross-origin AND has credentials.
+  // Same-origin CORS (anonymous) automatically sends credentials.
+  const useCredentials = isCrossOrigin && hasCredentials;
+  return useCredentials ? ' crossorigin="use-credentials"' : ' crossorigin';
+}
+
+/**
+ * Determines whether a network request can be preloaded.
+ */
+export function canPreloadRequest(request: SDK.NetworkRequest.NetworkRequest): boolean {
+  return resourceTypeToAsAttribute.has(request.resourceType());
+}
+
+/**
+ * Generates an HTML `<link rel="preload">` element string for a given network request.
+ */
+export function generatePreloadLink(request: SDK.NetworkRequest.NetworkRequest): string {
+  const {requestOrigin, documentOrigin} = parsePreloadLinkOrigins(request);
+  const isSameOrigin = Boolean(requestOrigin && documentOrigin && requestOrigin === documentOrigin);
+  const isCrossOrigin = Boolean(requestOrigin && documentOrigin && requestOrigin !== documentOrigin);
+
+  const url = determinePreloadLinkHref(request, isSameOrigin);
+  const escapedUrl = escapeHTML(url);
+
+  const resourceType = request.resourceType();
+  const escapedMimeType = request.mimeType ? escapeHTML(request.mimeType) : '';
+
+  const asValue = resourceTypeToAsAttribute.get(resourceType);
+  const asAttr = `as="${asValue ?? 'fetch'}"`;
+
+  const crossoriginAttr = determinePreloadLinkCrossOrigin(request, isCrossOrigin);
+  const typeAttr = escapedMimeType ? ` type="${escapedMimeType}"` : '';
+
+  return `<link rel="preload" href="${escapedUrl}" ${asAttr}${typeAttr}${crossoriginAttr}>`;
+}

package/front_end/panels/network/NetworkLogView.ts

@@ -61,6 +61,7 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import {canPreloadRequest, generatePreloadLink} from './LinkPreloadGenerator.js';
 import {
   Events,
   type EventTypes,
@@ -284,6 +285,11 @@ const UIStrings = {
    * refers to the format the data will be copied as, which is compatible with the fetch web API.
    */
   copyAsFetch: 'Copy as `fetch`',
+  /**
+   * @description A context menu command in the Network panel, for copying a resource's link element
+   * to the clipboard. 'preload' refers to the HTML link relation format the data will be copied as.
+   */
+  copyAsPreload: 'Copy as preload element',
   /**
    * @description Text in Network Log View of the Network panel. An action that copies a command to
    * the developer's clipboard. The command allows the developer to replay this specific network
@@ -1812,6 +1818,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       copyMenu.defaultSection().appendItem(
           i18nString(UIStrings.copyAsNodejsFetch), this.copyFetchCall.bind(this, request, FetchStyle.NODE_JS),
           {disabled: disableIfBlob, jslogContext: 'copy-as-nodejs-fetch'});
+      this.appendCopyAsPreloadItem(copyMenu, request);
 
       if (Host.Platform.isWin()) {
         copyMenu.footerSection().appendItem(
@@ -2011,6 +2018,27 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(commands);
   }
 
+  private copyPreloadElement(request: SDK.NetworkRequest.NetworkRequest): void {
+    const preloadLink = generatePreloadLink(request);
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(preloadLink);
+  }
+
+  private appendCopyAsPreloadItem(copyMenu: UI.ContextMenu.SubMenu, request: SDK.NetworkRequest.NetworkRequest): void {
+    const isHttpOrHttps = request.parsedURL.scheme === 'http' || request.parsedURL.scheme === 'https';
+    const isGetRequest = request.requestMethod === 'GET';
+
+    const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
+    const resourceTreeModel = networkManager?.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
+    const isMainDocument = Boolean(resourceTreeModel?.mainFrame && resourceTreeModel.mainFrame.id === request.frameId &&
+                                   request.resourceType() === Common.ResourceType.resourceTypes.Document);
+
+    const disablePreload =
+        !isHttpOrHttps || request.isBlobRequest() || !isGetRequest || isMainDocument || !canPreloadRequest(request);
+    copyMenu.defaultSection().appendItem(i18nString(UIStrings.copyAsPreload),
+                                         this.copyPreloadElement.bind(this, request),
+                                         {disabled: disablePreload, jslogContext: 'copy-as-preload'});
+  }
+
   private async copyFetchCall(request: SDK.NetworkRequest.NetworkRequest, style: FetchStyle): Promise<void> {
     const command = await this.generateFetchCall(request, style);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(command);

package/front_end/panels/network/network.ts

@@ -31,6 +31,7 @@ import './NetworkPanel.js';
 
 import * as BinaryResourceView from './BinaryResourceView.js';
 import * as EventSourceMessagesView from './EventSourceMessagesView.js';
+import * as LinkPreloadGenerator from './LinkPreloadGenerator.js';
 import * as NetworkConfigView from './NetworkConfigView.js';
 import * as NetworkDataGridNode from './NetworkDataGridNode.js';
 import * as NetworkFrameGrouper from './NetworkFrameGrouper.js';
@@ -60,6 +61,7 @@ import * as SignedExchangeInfoView from './SignedExchangeInfoView.js';
 export {
   BinaryResourceView,
   EventSourceMessagesView,
+  LinkPreloadGenerator,
   NetworkConfigView,
   NetworkDataGridNode,
   NetworkFrameGrouper,