chrome-devtools-frontend 1.0.1654411 → 1.0.1656291

package/front_end/panels/mobile_throttling/CalibrationController.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as PanelsCommon from '../common/common.js';
 
 const UIStrings = {
   /**
@@ -55,7 +56,7 @@ export class CalibrationController {
   #runtimeModel!: SDK.RuntimeModel.RuntimeModel;
   #emulationModel!: SDK.EmulationModel.EmulationModel;
   #originalUrl!: string;
-  #result?: SDK.CPUThrottlingManager.CalibratedCPUThrottling;
+  #result?: PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling;
   #state: 'idle'|'running'|'aborting' = 'idle';
 
   /**
@@ -220,14 +221,14 @@ export class CalibrationController {
       if (actualScore < midScore) {
         if (actualScore < lowScore) {
           this.#result = {
-            low: SDK.CPUThrottlingManager.CalibrationError.DEVICE_TOO_WEAK,
-            mid: SDK.CPUThrottlingManager.CalibrationError.DEVICE_TOO_WEAK,
+            low: PanelsCommon.CPUThrottlingOption.CalibrationError.DEVICE_TOO_WEAK,
+            mid: PanelsCommon.CPUThrottlingOption.CalibrationError.DEVICE_TOO_WEAK,
           };
           return;
         }
 
         // Can still emulate the low-end device.
-        this.#result = {mid: SDK.CPUThrottlingManager.CalibrationError.DEVICE_TOO_WEAK};
+        this.#result = {mid: PanelsCommon.CPUThrottlingOption.CalibrationError.DEVICE_TOO_WEAK};
         isHalfwayDone = true;
       }
     }
@@ -258,7 +259,7 @@ export class CalibrationController {
     }
   }
 
-  result(): SDK.CPUThrottlingManager.CalibratedCPUThrottling|undefined {
+  result(): PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling|undefined {
     return this.#result;
   }
 

package/front_end/panels/mobile_throttling/MobileThrottlingSelector.ts

@@ -70,7 +70,7 @@ export class MobileThrottlingSelector {
     this.populateOptions();
 
     const networkConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
-    const cpuThrottlingOption = SDK.CPUThrottlingManager.CPUThrottlingManager.instance().cpuThrottlingOption();
+    const cpuThrottlingOption = throttlingManager().cpuThrottlingOption();
     for (let index = 0; index < this.options.length; ++index) {
       const option = this.options[index];
       if (option && 'network' in option && option.network === networkConditions &&

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -11,6 +11,7 @@ import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.js';
 
 import {MobileThrottlingSelector} from './MobileThrottlingSelector.js';
 import {
@@ -22,7 +23,7 @@ import {
 
 export interface CPUThrottlingSelectorWrapper {
   control: UI.Toolbar.ToolbarComboBox;
-  updateRecommendedOption(recommendedOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null): void;
+  updateRecommendedOption(recommendedOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption|null): void;
 }
 
 const UIStrings = {
@@ -109,15 +110,17 @@ class PromiseQueue<T> {
 
 export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<ThrottlingManager.EventTypes> {
   private readonly cpuThrottlingControls: Set<UI.Toolbar.ToolbarComboBox>;
-  private readonly cpuThrottlingOptions: SDK.CPUThrottlingManager.CPUThrottlingOption[];
+  private readonly cpuThrottlingOptions: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption[];
   private readonly customNetworkConditionsSetting: Common.Settings.Setting<SDK.NetworkManager.Conditions[]>;
   private readonly currentNetworkThrottlingConditionKeySetting:
       Common.Settings.Setting<SDK.NetworkManager.ThrottlingConditionKey>;
   private readonly calibratedCpuThrottlingSetting:
-      Common.Settings.Setting<SDK.CPUThrottlingManager.CalibratedCPUThrottling>;
+      Common.Settings.Setting<PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling>;
   private lastNetworkThrottlingConditions!: SDK.NetworkManager.Conditions;
   private readonly cpuThrottlingManager: SDK.CPUThrottlingManager.CPUThrottlingManager;
   #hardwareConcurrencyOverrideEnabled = false;
+  #currentCPUThrottlingOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption =
+      PanelsCommon.CPUThrottlingOption.NoThrottlingOption;
   readonly #emulationQueue = new PromiseQueue<void>();
   get hardwareConcurrencyOverrideEnabled(): boolean {
     return this.#hardwareConcurrencyOverrideEnabled;
@@ -136,8 +139,9 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
     this.currentNetworkThrottlingConditionKeySetting = SDK.NetworkManager.activeNetworkThrottlingKeySetting();
 
     this.calibratedCpuThrottlingSetting =
-        Common.Settings.Settings.instance().createSetting<SDK.CPUThrottlingManager.CalibratedCPUThrottling>(
+        Common.Settings.Settings.instance().createSetting<PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling>(
             'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
+    this.calibratedCpuThrottlingSetting.addChangeListener(this.onCalibratedSettingChanged, this);
 
     SDK.NetworkManager.MultitargetNetworkManager.instance().addEventListener(
         SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, () => {
@@ -250,23 +254,46 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
 
   private updatePanelIcon(): void {
     const warnings = [];
-    if (this.cpuThrottlingManager.cpuThrottlingRate() !== SDK.CPUThrottlingManager.CPUThrottlingRates.NO_THROTTLING) {
+    if (this.cpuThrottlingManager.cpuThrottlingRate() !==
+        PanelsCommon.CPUThrottlingOption.CPUThrottlingRates.NO_THROTTLING) {
       warnings.push(i18nString(UIStrings.cpuThrottlingIsEnabled));
     }
     UI.InspectorView.InspectorView.instance().setPanelWarnings('timeline', warnings);
   }
 
-  setCPUThrottlingOption(option: SDK.CPUThrottlingManager.CPUThrottlingOption): void {
-    // This will transitively call onCPUThrottlingRateChangedOnSDK.
-    this.cpuThrottlingManager.setCPUThrottlingOption(option);
+  cpuThrottlingOption(): PanelsCommon.CPUThrottlingOption.CPUThrottlingOption {
+    return this.#currentCPUThrottlingOption;
+  }
+
+  setCPUThrottlingOption(option: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption): void {
+    if (this.#currentCPUThrottlingOption === option) {
+      return;
+    }
+    this.#currentCPUThrottlingOption = option;
+    this.cpuThrottlingManager.setCPUThrottlingRate(option.rate());
+  }
+
+  private onCalibratedSettingChanged(): void {
+    if (!this.#currentCPUThrottlingOption.calibratedDeviceType) {
+      return;
+    }
+    const rate = this.#currentCPUThrottlingOption.rate();
+    if (rate === 0) {
+      this.setCPUThrottlingOption(PanelsCommon.CPUThrottlingOption.NoThrottlingOption);
+      return;
+    }
+    this.cpuThrottlingManager.setCPUThrottlingRate(rate);
   }
 
   onCPUThrottlingRateChangedOnSDK(rate: number): void {
-    if (rate !== SDK.CPUThrottlingManager.CPUThrottlingRates.NO_THROTTLING) {
+    if (rate !== PanelsCommon.CPUThrottlingOption.CPUThrottlingRates.NO_THROTTLING) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.CpuThrottlingEnabled);
     }
 
-    const index = this.cpuThrottlingOptions.indexOf(this.cpuThrottlingManager.cpuThrottlingOption());
+    const option = PanelsCommon.CPUThrottlingOption.determineOptionFromRate(rate, this.#currentCPUThrottlingOption);
+    this.#currentCPUThrottlingOption = option;
+
+    const index = this.cpuThrottlingOptions.indexOf(option);
     for (const control of this.cpuThrottlingControls) {
       control.setSelectedIndex(index);
     }
@@ -282,7 +309,7 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
 
     const optionSelected = (): void => {
       if (control.selectedIndex() === control.options().length - 1) {
-        const index = this.cpuThrottlingOptions.indexOf(this.cpuThrottlingManager.cpuThrottlingOption());
+        const index = this.cpuThrottlingOptions.indexOf(this.#currentCPUThrottlingOption);
         control.setSelectedIndex(index);
         void Common.Revealer.reveal(this.calibratedCpuThrottlingSetting);
       } else {
@@ -293,7 +320,7 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
     const control =
         new UI.Toolbar.ToolbarComboBox(optionSelected, i18nString(UIStrings.cpuThrottling), '', 'cpu-throttling');
     this.cpuThrottlingControls.add(control);
-    const currentOption = this.cpuThrottlingManager.cpuThrottlingOption();
+    const currentOption = this.#currentCPUThrottlingOption;
 
     const optionEls: HTMLOptionElement[] = [];
     const options = this.cpuThrottlingOptions;
@@ -317,7 +344,7 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
 
     return {
       control,
-      updateRecommendedOption(recommendedOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null) {
+      updateRecommendedOption(recommendedOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption|null) {
         for (let i = 0; i < optionEls.length - 1; i++) {
           const option = options[i];
           optionEls[i].text = option === recommendedOption ?

package/front_end/panels/mobile_throttling/ThrottlingPresets.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as PanelsCommon from '../common/common.js';
 
 const UIStrings = {
   /**
@@ -61,7 +62,7 @@ export class ThrottlingPresets {
       title,
       description: i18nString(UIStrings.noThrottling),
       network: SDK.NetworkManager.NoThrottlingConditions,
-      cpuThrottlingOption: SDK.CPUThrottlingManager.NoThrottlingOption,
+      cpuThrottlingOption: PanelsCommon.CPUThrottlingOption.NoThrottlingOption,
       jslogContext: 'no-throttling',
     };
   }
@@ -74,15 +75,16 @@ export class ThrottlingPresets {
       title,
       description: i18nString(UIStrings.noInternetConnectivity),
       network: SDK.NetworkManager.OfflineConditions,
-      cpuThrottlingOption: SDK.CPUThrottlingManager.NoThrottlingOption,
+      cpuThrottlingOption: PanelsCommon.CPUThrottlingOption.NoThrottlingOption,
       jslogContext: 'offline',
     };
   }
 
   static getLowEndMobileConditions(): Conditions {
-    const useCalibrated = SDK.CPUThrottlingManager.CalibratedLowTierMobileThrottlingOption.rate() !== 0;
-    const cpuThrottlingOption = useCalibrated ? SDK.CPUThrottlingManager.CalibratedLowTierMobileThrottlingOption :
-                                                SDK.CPUThrottlingManager.LowTierThrottlingOption;
+    const useCalibrated = PanelsCommon.CPUThrottlingOption.CalibratedLowTierMobileThrottlingOption.rate() !== 0;
+    const cpuThrottlingOption = useCalibrated ?
+        PanelsCommon.CPUThrottlingOption.CalibratedLowTierMobileThrottlingOption :
+        PanelsCommon.CPUThrottlingOption.LowTierThrottlingOption;
     const description = useCalibrated ?
         i18nString(UIStrings.slowGXCpuSlowdownCalibrated, {PH1: cpuThrottlingOption.rate()}) :
         i18nString(UIStrings.slowGXCpuSlowdown);
@@ -97,9 +99,10 @@ export class ThrottlingPresets {
   }
 
   static getMidTierMobileConditions(): Conditions {
-    const useCalibrated = SDK.CPUThrottlingManager.CalibratedMidTierMobileThrottlingOption.rate() !== 0;
-    const cpuThrottlingOption = useCalibrated ? SDK.CPUThrottlingManager.CalibratedMidTierMobileThrottlingOption :
-                                                SDK.CPUThrottlingManager.MidTierThrottlingOption;
+    const useCalibrated = PanelsCommon.CPUThrottlingOption.CalibratedMidTierMobileThrottlingOption.rate() !== 0;
+    const cpuThrottlingOption = useCalibrated ?
+        PanelsCommon.CPUThrottlingOption.CalibratedMidTierMobileThrottlingOption :
+        PanelsCommon.CPUThrottlingOption.MidTierThrottlingOption;
     const description = useCalibrated ?
         i18nString(UIStrings.fastGXCpuSlowdownCalibrated, {PH1: cpuThrottlingOption.rate()}) :
         i18nString(UIStrings.fastGXCpuSlowdown);
@@ -142,14 +145,7 @@ export class ThrottlingPresets {
     SDK.NetworkManager.OfflineConditions,
   ];
 
-  static cpuThrottlingPresets: SDK.CPUThrottlingManager.CPUThrottlingOption[] = [
-    SDK.CPUThrottlingManager.NoThrottlingOption,
-    SDK.CPUThrottlingManager.MidTierThrottlingOption,
-    SDK.CPUThrottlingManager.LowTierThrottlingOption,
-    SDK.CPUThrottlingManager.ExtraSlowThrottlingOption,
-    SDK.CPUThrottlingManager.CalibratedLowTierMobileThrottlingOption,
-    SDK.CPUThrottlingManager.CalibratedMidTierMobileThrottlingOption,
-  ];
+  static cpuThrottlingPresets = PanelsCommon.CPUThrottlingOption.cpuThrottlingPresets;
 }
 
 // @ts-expect-error exported for Tests.js
@@ -161,7 +157,7 @@ export interface Conditions {
   title: string;
   description: string;
   network: SDK.NetworkManager.Conditions;
-  cpuThrottlingOption: SDK.CPUThrottlingManager.CPUThrottlingOption;
+  cpuThrottlingOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption;
   jslogContext?: string;
 }
 

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -12,6 +12,7 @@ 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';
@@ -214,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;
 
@@ -230,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);
@@ -331,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
@@ -349,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);

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';
@@ -998,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();

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);

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

@@ -24,10 +24,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;
   }
 
@@ -56,7 +58,7 @@
   }
 
   .inline-icon {
-    vertical-align: middle;
+    margin-top: var(--sys-size-2);
   }
 
   @media (forced-colors: active) {

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

@@ -83,9 +83,8 @@ function renderProvisionalHeadersWarning(isRequestCached: boolean): Lit.LitTempl
   return html`
     <div class="call-to-action">
       <div class="call-to-action-body">
+        <devtools-icon class="inline-icon medium" name='warning-filled'></devtools-icon>
         <div class="explanation" title=${cautionTitle}>
-          <devtools-icon class="inline-icon medium" name='warning-filled'>
-          </devtools-icon>
           ${cautionText} <devtools-link href="https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers" class="link">${i18nString(UIStrings.learnMore)}</devtools-link>
         </div>
       </div>