chrome-devtools-frontend 1.0.1652307 → 1.0.1656291

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -12,15 +12,21 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import {type Card, createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.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
    */
@@ -209,7 +215,7 @@ function createComputePressurePromise(): Promise<{state: string}> {
 export class CPUThrottlingCard {
   element: Card;
 
-  private readonly setting: Common.Settings.Setting<SDK.CPUThrottlingManager.CalibratedCPUThrottling>;
+  private readonly setting: Common.Settings.Setting<PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling>;
   private computePressurePromise?: ReturnType<typeof createComputePressurePromise>;
   private controller?: CalibrationController;
 
@@ -225,8 +231,9 @@ export class CPUThrottlingCard {
   private warnings: string[] = [];
 
   constructor() {
-    this.setting = Common.Settings.Settings.instance().createSetting<SDK.CPUThrottlingManager.CalibratedCPUThrottling>(
-        'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
+    this.setting =
+        Common.Settings.Settings.instance().createSetting<PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling>(
+            'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
 
     this.element = document.createElement('devtools-card');
     this.element.heading = i18nString(UIStrings.cpuThrottlingPresets);
@@ -326,13 +333,13 @@ export class CPUThrottlingCard {
       this.progress.style.display = '';
     }
 
-    const resultToString = (result: number|SDK.CPUThrottlingManager.CalibrationError|undefined): string => {
+    const resultToString = (result: number|PanelsCommon.CPUThrottlingOption.CalibrationError|undefined): string => {
       if (result === undefined) {
         return i18nString(UIStrings.needsCalibration);
       }
 
       if (typeof result === 'string') {
-        return SDK.CPUThrottlingManager.calibrationErrorToString(result);
+        return PanelsCommon.CPUThrottlingOption.calibrationErrorToString(result);
       }
 
       // Shouldn't happen, but let's not throw an error (.toFixed) if the setting
@@ -344,15 +351,15 @@ export class CPUThrottlingCard {
       return i18nString(UIStrings.dSlowdown, {PH1: result.toFixed(1)});
     };
 
-    const setPresetResult =
-        (element: HTMLElement|null, result: number|SDK.CPUThrottlingManager.CalibrationError|undefined): void => {
-          if (!element) {
-            throw new Error('expected HTMLElement');
-          }
+    const setPresetResult = (element: HTMLElement|null,
+                             result: number|PanelsCommon.CPUThrottlingOption.CalibrationError|undefined): void => {
+      if (!element) {
+        throw new Error('expected HTMLElement');
+      }
 
-          element.textContent = resultToString(result);
-          element.classList.toggle('not-calibrated', result === undefined);
-        };
+      element.textContent = resultToString(result);
+      element.classList.toggle('not-calibrated', result === undefined);
+    };
 
     setPresetResult(this.lowTierMobileDeviceEl.querySelector('.cpu-preset-result'), result.low);
     setPresetResult(this.midTierMobileDeviceEl.querySelector('.cpu-preset-result'), result.mid);
@@ -452,7 +459,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 +499,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 +546,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 +574,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 +864,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

@@ -41,7 +41,6 @@ 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 Protocol from '../../generated/protocol.js';
-import * as Annotations from '../../models/annotations/annotations.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as HAR from '../../models/har/har.js';
 import * as Logs from '../../models/logs/logs.js';
@@ -61,6 +60,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 +284,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
@@ -992,14 +997,6 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     return this.summaryToolbarInternal;
   }
 
-  getDataGrid(): DataGrid.SortableDataGrid.SortableDataGrid<NetworkNode>|null {
-    if (Annotations.AnnotationRepository.annotationsEnabled()) {
-      return this.dataGrid;
-    }
-
-    return null;
-  }
-
   modelAdded(networkManager: SDK.NetworkManager.NetworkManager): void {
     // TODO(allada) Remove dependency on networkManager and instead use NetworkLog and PageLoad for needed data.
     const target = networkManager.target();
@@ -1812,6 +1809,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 +2009,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/NetworkPanel.ts

@@ -40,12 +40,11 @@ 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 Annotations from '../../models/annotations/annotations.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import * as PanelCommon from '../../panels/common/common.js';
+import type * as PanelCommon from '../../panels/common/common.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Tracing from '../../services/tracing/tracing.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -340,14 +339,6 @@ export class NetworkPanel extends UI.Panel.Panel implements
          HTMLElement);
     panel.element.appendChild(this.fileSelectorElement);
 
-    if (Annotations.AnnotationRepository.annotationsEnabled()) {
-      const dataGrid = this.networkLogView.getDataGrid();
-      if (dataGrid) {
-        PanelCommon.AnnotationManager.instance().initializePlacementForAnnotationType(
-            Annotations.AnnotationType.NETWORK_REQUEST, this.resolveInitialState.bind(this), dataGrid.scrollContainer);
-      }
-    }
-
     this.detailsWidget = new UI.Widget.VBox();
     this.detailsWidget.element.classList.add('network-details-view');
     this.splitWidget.setMainWidget(this.detailsWidget);
@@ -661,11 +652,6 @@ export class NetworkPanel extends UI.Panel.Panel implements
 
     // Record the network tool load time after the panel has loaded.
     UI.UIUserMetrics.UIUserMetrics.instance().panelLoaded('network', 'DevTools.Launch.Network');
-
-    if (Annotations.AnnotationRepository.annotationsEnabled()) {
-      void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(
-          Annotations.AnnotationType.NETWORK_REQUEST);
-    }
   }
 
   override willHide(): void {
@@ -765,47 +751,6 @@ export class NetworkPanel extends UI.Panel.Panel implements
     return this.networkItemView;
   }
 
-  async resolveInitialState(
-      parentElement: Element, reveal: boolean, lookupId: string,
-      anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest): Promise<{x: number, y: number}|null> {
-    let request = anchor as SDK.NetworkRequest.NetworkRequest;
-    if (!this.isShowing()) {
-      return null;
-    }
-
-    if (!request) {
-      const networkManager =
-          SDK.TargetManager.TargetManager.instance().scopeTarget()?.model(SDK.NetworkManager.NetworkManager);
-      if (!networkManager) {
-        return null;
-      }
-
-      const requests = Logs.NetworkLog.NetworkLog.instance().requestsForId(lookupId);
-      if (requests.length === 0) {
-        console.warn('Network Request list is empty');
-        return null;
-      }
-      request = requests[0];
-    }
-
-    if (reveal) {
-      await Common.Revealer.reveal(request);
-      await this.selectAndActivateRequest(request);
-    }
-
-    const requestNode = this.networkLogView?.nodeForRequest(request);
-    if (requestNode?.element()) {
-      const targetRect = requestNode.element().getBoundingClientRect();
-      const parentRect = parentElement.getBoundingClientRect();
-      const relativeX = 4;
-      const relativeY = targetRect.y - parentRect.y + parentElement.scrollTop;
-      return {x: relativeX, y: relativeY};
-    }
-
-    console.warn('Could not find element for request:', anchor);
-    return null;
-  }
-
   private updateUI(): void {
     if (this.detailsWidget) {
       this.detailsWidget.element.classList.toggle(
@@ -905,13 +850,6 @@ export class NetworkPanel extends UI.Panel.Panel implements
         Trace.Types.Timing.Milli(this.calculator.minimumBoundary() * 1000),
         Trace.Types.Timing.Milli(this.calculator.maximumBoundary() * 1000));
     this.networkOverview.updateRequest(request);
-
-    if (Annotations.AnnotationRepository.annotationsEnabled()) {
-      requestAnimationFrame(() => {
-        void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(
-            Annotations.AnnotationType.NETWORK_REQUEST);
-      });
-    }
   }
 
   resolveLocation(locationName: string): UI.View.ViewLocation|null {

package/front_end/panels/network/RequestInitiatorView.ts

@@ -2,7 +2,6 @@
 // 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 i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
@@ -10,7 +9,7 @@ import * as Logs from '../../models/logs/logs.js';
 import type * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, type LitTemplate, nothing, 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 requestInitiatorViewStyles from './requestInitiatorView.css.js';
@@ -34,6 +33,20 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestInitiatorView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const MAX_URL_LENGTH = 150;
+
+function trimUrl(url: string): string {
+  if (url.length <= MAX_URL_LENGTH) {
+    return url;
+  }
+  // To avoid performance issues with extremely long URLs (e.g. 2MB base64 data URLs),
+  // we do a fast O(1) slice instead of using the O(N) Platform.StringUtilities.trimMiddle
+  // utility which instantiates Intl.Segmenter and iterates over every grapheme.
+  const halfMaxLength = Math.floor(MAX_URL_LENGTH / 2);
+  return url.substring(0, halfMaxLength) + '…' + url.substring(url.length - halfMaxLength);
+}
+
 export interface ViewInput {
   initiatorGraph: Logs.NetworkLog.InitiatorGraph;
   stackTrace: StackTrace.StackTrace.StackTrace|null;
@@ -87,11 +100,17 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
         const isCurrentRequest = (index === initiators.length - 1);
         const hasFurtherInitiatedNodes = index + 1 < initiators.length;
         const renderedChildren = isCurrentRequest ? renderInitiatedNodes(initiated, request, visited) : nothing;
+        const url = request.url();
+        // To avoid layout and rendering lag from extremely long URLs (like data: URLs),
+        // we only set the title/tooltip attribute if the URL is under 2000 characters.
+        const title = url.length < 2000 ? url : undefined;
 
         // clang-format off
         return html`
           <li role="treeitem" ?selected=${isCurrentRequest} aria-expanded="true" open>
-            <span style=${isCurrentRequest ? 'font-weight: bold' : ''}>${request.url()}</span>
+            <span style=${isCurrentRequest ? 'font-weight: bold' : ''} title=${Directives.ifDefined(title) as string}>
+              ${trimUrl(url)}
+            </span>
             ${hasFurtherInitiatedNodes || renderedChildren !== nothing ? html`
               <ul role="group">
                 ${renderInitiatorNodes(initiators, index + 1, initiated, visited)}
@@ -121,9 +140,15 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
             visited.add(child);
           }
           const renderedChildren = shouldRecurse ? renderInitiatedNodes(initiated, child, visited) : nothing;
+          const url = child.url();
+          // To avoid layout and rendering lag from extremely long URLs (like data: URLs),
+          // we only set the title/tooltip attribute if the URL is under 2000 characters.
+          const title = url.length < 2000 ? url : undefined;
           return html`
         <li role="treeitem" aria-expanded="true" open>
-          <span>${child.url()}</span>
+          <span title=${Directives.ifDefined(title) as string}>
+            ${trimUrl(url)}
+          </span>
           ${renderedChildren !== nothing ? html`<ul role="group">${renderedChildren}</ul>` : nothing}
         </li>
       `;

package/front_end/panels/network/components/HeaderSectionRow.css

@@ -17,9 +17,8 @@
   margin: var(--sys-size-3) 0;
 }
 
-.row.header-editable {
-  font-family: var(--monospace-font-family);
-  font-size: var(--monospace-font-size);
+.row:hover {
+  background-color: var(--sys-color-state-hover-on-subtle);
 }
 
 .header-name {
@@ -57,7 +56,8 @@
   display: flex;
   overflow-wrap: anywhere;
   margin-inline-end: 14px;
-  font: var(--sys-typescale-body4-regular);
+  font-family: var(--monospace-font-family);
+  font-size: var(--monospace-font-size);
 }
 
 .header-badge-text {
@@ -85,10 +85,12 @@
 }
 
 .call-to-action-body {
+  display: flex;
+  gap: var(--sys-size-4);
   padding: 6px 0;
-  margin-left: 9.5px;
+  margin-left: var(--sys-size-1);
   border-left: 2px solid var(--issue-color-yellow);
-  padding-left: 18px;
+  padding-left: 11px;
   line-height: 20px;
 }
 
@@ -117,7 +119,7 @@
 }
 
 .inline-icon {
-  vertical-align: middle;
+  margin-top: var(--sys-size-2);
 }
 
 .row-flex-icon {

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

@@ -4,7 +4,6 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/kit/kit.js';
-import '../../../ui/legacy/legacy.js';
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -14,6 +13,7 @@ import type * as Protocol from '../../../generated/protocol.js';
 import * as ClientVariations from '../../../third_party/chromium/client-variations/client-variations.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -23,6 +23,10 @@ import headerSectionRowStyles from './HeaderSectionRow.css.js';
 const {render, html} = Lit;
 
 const UIStrings = {
+  /**
+   * @description A context menu item to copy the value of a header.
+   */
+  copyValue: 'Copy value',
   /**
    * @description Comment used in decoded X-Client-Data HTTP header output in Headers View of the Network panel
    */
@@ -197,6 +201,7 @@ export class HeaderSectionRow extends HTMLElement {
         <div
           class=${headerValueClasses}
           @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+          @contextmenu=${this.#onContextMenu}
         >
           ${this.#renderHeaderValue()}
         </div>
@@ -483,6 +488,20 @@ export class HeaderSectionRow extends HTMLElement {
     }
     event.preventDefault();
   }
+
+  #onContextMenu(event: Event): void {
+    if (!this.#header) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyValue), () => {
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.#header?.value || '');
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
+    });
+    void contextMenu.show();
+  }
 }
 
 customElements.define('devtools-header-section-row', HeaderSectionRow);