chrome-devtools-frontend 1.0.1672557 → 1.0.1675430

package/front_end/ui/lit/render.ts

@@ -5,11 +5,14 @@
 
 import * as Lit from '../../third_party/lit/lit.js';
 
+import {InterceptBindingDirective} from './Directives.js';
+
 export interface RenderOptions extends Lit.RenderOptions {
   container?: {
     attributes?: Record<string, string|null|boolean|undefined|{toString(): string}>,
     classes?: string[],
     listeners?: Record<string, EventListenerOrEventListenerObject>,
+    interceptedListeners?: Record<string, EventListenerOrEventListenerObject>,
   };
 }
 
@@ -112,6 +115,11 @@ export function render(template: unknown, container: HTMLElement|DocumentFragmen
       listenersMap.delete(name);
     }
   }
+
+  if (host instanceof Element) {
+    InterceptBindingDirective.registerListeners(host, options?.container?.interceptedListeners);
+  }
+
   renderOptions.set(container, options);
   return Lit.render(template, container, options);
 }

package/front_end/ui/settings/SettingUIRegistration.ts

@@ -51,6 +51,7 @@ export function register(
   if (registeredSettings.has(settingName)) {
     throw new Error(`Duplicate setting name '${settingName}'`);
   }
+  Common.SettingRegistration.registerCategoryOrder(settingUIDescriptor.category, settingUIDescriptor.order);
   registeredSettings.set(settingName, {descriptor: settingDescriptor, uiDescriptor: settingUIDescriptor});
 }
 
@@ -98,5 +99,8 @@ export function resolve(settingDescriptor: Common.Settings.SettingDescriptor<unk
 }
 
 export function resetSettings(): void {
+  for (const {uiDescriptor} of registeredSettings.values()) {
+    Common.SettingRegistration.removeCategoryOrder(uiDescriptor.category, uiDescriptor.order);
+  }
   registeredSettings.clear();
 }

package/front_end/ui/visual_logging/Debugging.ts

@@ -6,7 +6,7 @@
 import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 
 import type {Loggable} from './Loggable.js';
-import {type LoggingConfig, VisualElements} from './LoggingConfig.js';
+import {elementKey, type LoggingConfig, VisualElements} from './LoggingConfig.js';
 import {getLoggingState, type LoggingState} from './LoggingState.js';
 
 let veDebuggingEnabled = false;
@@ -406,10 +406,6 @@ function processImpressionsForAdHocAnalysisDebugLog(states: LoggingState[]): voi
   }
 }
 
-function elementKey(config: LoggingConfig): string {
-  return `${VisualElements[config.ve]}${config.context ? `: ${config.context}` : ''}`;
-}
-
 export function debugString(config: LoggingConfig): string {
   const components = [VisualElements[config.ve]];
   if (config.context) {

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -2126,6 +2126,7 @@ export const knownContextValues = new Set([
   'integer-8-bit',
   'interactions',
   'interactivity',
+  'interest',
   'interest-delay',
   'interest-delay-end',
   'interest-delay-start',
@@ -3237,6 +3238,7 @@ export const knownContextValues = new Set([
   'protocol',
   'protocol-handlers',
   'protocol-monitor',
+  'protocol-monitor-columns',
   'protocol-monitor-documentation',
   'protocol-monitor.add-custom-property',
   'protocol-monitor.add-parameter',
@@ -4052,6 +4054,7 @@ export const knownContextValues = new Set([
   'text-combine-upright',
   'text-decoration',
   'text-decoration-color',
+  'text-decoration-inset',
   'text-decoration-line',
   'text-decoration-skip-ink',
   'text-decoration-skip-spaces',

package/front_end/ui/visual_logging/LoggingConfig.ts

@@ -27,6 +27,27 @@ export interface LoggingConfig {
   parent?: string;
 }
 
+export function elementKey(config: LoggingConfig): string {
+  return `${VisualElements[config.ve]}${config.context ? `: ${config.context}` : ''}`;
+}
+
+export function getVePath(element: Element): string {
+  const parts: string[] = [];
+  let current: Element|null = element;
+  while (current) {
+    if (needsLogging(current)) {
+      try {
+        const config = getLoggingConfig(current);
+        parts.unshift(elementKey(config));
+      } catch {
+        // Skip invalid logging configs
+      }
+    }
+    current = current.parentElementOrShadowHost();
+  }
+  return parts.join(' > ');
+}
+
 export function needsLogging(element: Element): boolean {
   return element.hasAttribute(LOGGING_ATTRIBUTE);
 }

package/front_end/ui/visual_logging/visual_logging.ts

@@ -11,6 +11,15 @@ import * as NonDomState from './NonDomState.js';
 
 export type Loggable = LoggableModule.Loggable;
 export {DebugLoggingFormat, setVeDebuggingEnabled, setVeDebugLoggingEnabled} from './Debugging.js';
+export {
+  elementKey,
+  getLoggingConfig,
+  getVePath,
+  type LoggingConfig,
+  needsLogging,
+  parseJsLog,
+  VisualElements,
+} from './LoggingConfig.js';
 export {addDocument, startLogging, stopLogging} from './LoggingDriver.js';
 export {logImpressions, logSettingAccess, logFunctionCall} from './LoggingEvents.js';
 export const logClick = (loggable: Loggable, event: Event, options: {doubleClick?: boolean} = {}): void =>

package/mcp/mcp.ts

@@ -26,6 +26,7 @@ export {PuppeteerDevToolsConnection} from '../front_end/core/protocol_client/Pup
 export {DebuggerModel} from '../front_end/core/sdk/DebuggerModel.js';
 export * as NetworkManager from '../front_end/core/sdk/NetworkManager.js';
 export {RuntimeModel} from '../front_end/core/sdk/RuntimeModel.js';
+export * as SourceMapManager from '../front_end/core/sdk/SourceMapManager.js';
 export {Target} from '../front_end/core/sdk/Target.js';
 export {TargetManager} from '../front_end/core/sdk/TargetManager.js';
 export * as Foundation from '../front_end/foundation/foundation.js';

package/package.json

@@ -92,5 +92,5 @@
     "webidl2": "24.5.0",
     "yargs": "17.7.2"
   },
-  "version": "1.0.1672557"
+  "version": "1.0.1675430"
 }

package/front_end/panels/common/ThrottlingUtils.ts

@@ -1,51 +0,0 @@
-// 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 SDK from '../../core/sdk/sdk.js';
-import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
-
-import {
-  CalibratedMidTierMobileThrottlingOption,
-  type CPUThrottlingOption,
-  MidTierThrottlingOption,
-} from './CPUThrottlingOption.js';
-
-export interface ThrottlingRecommendations {
-  cpuOption: CPUThrottlingOption|null;
-  networkConditions: SDK.NetworkManager.Conditions|null;
-}
-
-/**
- * Computes the recommended CPU and network throttling presets based on CrUX
- * field metric data.
- */
-export function getThrottlingRecommendations(): ThrottlingRecommendations {
-  const cruxManager = CrUXManager.CrUXManager.instance();
-  const roundTripTimeMetricData = cruxManager.getSelectedFieldMetricData('round_trip_time');
-
-  let cpuOption: CPUThrottlingOption = CalibratedMidTierMobileThrottlingOption;
-  if (cpuOption.rate() === 0) {
-    cpuOption = MidTierThrottlingOption;
-  }
-
-  const networkConditions = getRecommendedNetworkConditions(roundTripTimeMetricData);
-
-  return {
-    cpuOption,
-    networkConditions,
-  };
-}
-
-/**
- * Computes the recommended network throttling preset based on CrUX RTT field
- * metric data. Returns null if no RTT data is available or no preset matches.
- */
-export function getRecommendedNetworkConditions(roundTripTimeMetricData?: CrUXManager.MetricResponse):
-    SDK.NetworkManager.Conditions|null {
-  if (roundTripTimeMetricData?.percentiles) {
-    const rtt = Number(roundTripTimeMetricData.percentiles.p75);
-    return SDK.NetworkManager.getRecommendedNetworkPreset(rtt);
-  }
-  return null;
-}

package/front_end/panels/emulation/DeviceModeWrapper.ts

@@ -1,248 +0,0 @@
-// Copyright 2016 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import type * as Common from '../../core/common/common.js';
-import * as Root from '../../core/root/root.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
-import * as EmulationModel from '../../models/emulation/emulation.js';
-import * as Geometry from '../../models/geometry/geometry.js';
-import * as UI from '../../ui/legacy/legacy.js';
-import {html, render} from '../../ui/lit/lit.js';
-
-import {DeviceModeView} from './DeviceModeView.js';
-import {InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
-
-const {widget} = UI.Widget;
-interface ViewInput {
-  showDeviceMode: boolean;
-}
-type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
-export const DEFAULT_VIEW: View = (input, output, target) => {
-  // clang-format off
-    render(input.showDeviceMode ?
-      html`<devtools-widget ${widget(DeviceModeView)}>
-        ${widget(() => InspectedPagePlaceholder.instance(), {minimumSize: new Geometry.Size(1, 1)})}
-      </devtools-widget>` :
-      widget(() => InspectedPagePlaceholder.instance(), {minimumSize: new Geometry.Size(150, 150)}),
-      target);
-  // clang-format on
-};
-
-export class DeviceModeWrapper extends UI.Widget.VBox {
-  private readonly toggleDeviceModeAction: UI.ActionRegistration.Action;
-  private showDeviceModeSetting: Common.Settings.Setting<boolean>;
-  readonly #view: View;
-
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
-    super(element);
-    this.#view = view;
-    this.toggleDeviceModeAction = UI.ActionRegistry.ActionRegistry.instance().getAction('emulation.toggle-device-mode');
-    const model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
-    this.showDeviceModeSetting = model.enabledSetting();
-    this.showDeviceModeSetting.setRequiresUserAction(Boolean(Root.Runtime.Runtime.queryParam('hasOtherClients')));
-    this.showDeviceModeSetting.addChangeListener(this.requestUpdate.bind(this));
-    SDK.TargetManager.TargetManager.instance().addModelListener(SDK.OverlayModel.OverlayModel,
-                                                                SDK.OverlayModel.Events.SCREENSHOT_REQUESTED,
-                                                                this.screenshotRequestedFromOverlay, this);
-    this.requestUpdate();
-  }
-
-  static #setNonEmulatedAvailableSize(): void {
-    const model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
-    if (model.type() !== EmulationModel.DeviceModeModel.Type.None) {
-      return;
-    }
-
-    const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
-    const rect = InspectedPagePlaceholder.instance().element.getBoundingClientRect();
-    const availableSize =
-        new Geometry.Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1));
-    model.setAvailableSize(availableSize, availableSize);
-  }
-
-  static captureScreenshot(fullSize?: boolean, clip?: Protocol.Page.Viewport): boolean {
-    const model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
-
-    this.#setNonEmulatedAvailableSize();
-    if (fullSize) {
-      void model.captureFullSizeScreenshot();
-    } else if (clip) {
-      void model.captureAreaScreenshot(clip);
-    } else {
-      void model.captureScreenshot();
-    }
-    return true;
-  }
-
-  private screenshotRequestedFromOverlay(event: Common.EventTarget.EventTargetEvent<Protocol.Page.Viewport>): void {
-    const clip = event.data;
-    DeviceModeWrapper.captureScreenshot(false, clip);
-  }
-
-  override performUpdate(): void {
-    this.toggleDeviceModeAction.setToggled(this.showDeviceModeSetting.get());
-
-    this.#view({showDeviceMode: this.showDeviceModeSetting.get()}, undefined, this.contentElement);
-  }
-}
-
-export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
-  handleAction(context: UI.Context.Context, actionId: string): boolean {
-    switch (actionId) {
-      case 'emulation.capture-screenshot':
-        return DeviceModeWrapper.captureScreenshot();
-
-      case 'emulation.capture-node-screenshot': {
-        const node = context.flavor(SDK.DOMModel.DOMNode);
-        if (!node) {
-          return true;
-        }
-        async function captureClip(): Promise<void> {
-          if (!node) {
-            return;
-          }
-
-          // Resolve to a remote object to ensure the node is alive in the context.
-          const object = await node.resolveToObject();
-          if (!object) {
-            return;
-          }
-
-          // Get the Box Model via CDP.
-          // This returns the quads relative to the target's viewport.
-          // We use the 'border' quad to include the border and padding in the screenshot,
-          // matching the 'width' and 'height' properties which are also Border Box dimensions.
-          const nodeBoxModel = await node.boxModel();
-          if (!nodeBoxModel) {
-            throw new Error(`Unable to get box model of the node: ${new Error().stack}`);
-          }
-          const nodeBorderQuad = nodeBoxModel.border;
-          // Calculate the rendered bounding box from the border quad to account for CSS scaling and transforms (e.g. zoom or transform: scale).
-          const {minX, maxX, minY, maxY} = getQuadBoundingBox(nodeBorderQuad);
-
-          // Get Layout Metrics to account for the Visual Viewport scroll and zoom.
-          const metrics = await node.domModel().target().pageAgent().invoke_getLayoutMetrics();
-          if (metrics.getError()) {
-            throw new Error(`Unable to get metrics: ${new Error().stack}`);
-          }
-
-          const scrollX = metrics.cssVisualViewport.pageX;
-          const scrollY = metrics.cssVisualViewport.pageY;
-
-          // Calculate the global offset for OOPiFs (Out-of-Process iframes).
-          // This accounts for the position of the target's frame within the main page.
-          const {x: oopifOffsetX, y: oopifOffsetY} = await getOopifOffset(node.domModel().target());
-
-          // Assemble the final Clip.
-          // The absolute coordinates are: Global (OOPiF) + Viewport Scroll + Local Node Position (Border Box).
-          const clip = {
-            x: oopifOffsetX + scrollX + minX,
-            y: oopifOffsetY + scrollY + minY,
-            width: maxX - minX,
-            height: maxY - minY,
-            scale: 1,
-          };
-
-          // Apply Zoom factor.
-          const zoom = metrics.cssVisualViewport.zoom ?? 1;
-          clip.x *= zoom;
-          clip.y *= zoom;
-          clip.width *= zoom;
-          clip.height *= zoom;
-          DeviceModeWrapper.captureScreenshot(false, clip);
-        }
-        void captureClip();
-        return true;
-      }
-
-      case 'emulation.capture-full-height-screenshot':
-        return DeviceModeWrapper.captureScreenshot(true);
-
-      case 'emulation.toggle-device-mode': {
-        const model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
-        model.toggleDeviceMode();
-        return true;
-      }
-    }
-    return false;
-  }
-}
-
-/**
- * Calculate the offset of the "Local Root" frame relative to the "Global Root" (the main frame).
- * This involves traversing the CDP Targets for OOPiFs.
- */
-async function getOopifOffset(target: SDK.Target.Target|null): Promise<{x: number, y: number}> {
-  if (!target) {
-    return {x: 0, y: 0};
-  }
-
-  // Get the parent target. If there's no parent (we are at root) or it's not a frame, we are done.
-  const parentTarget = target.parentTarget();
-  if (!parentTarget || parentTarget.type() !== SDK.Target.Type.FRAME) {
-    return {x: 0, y: 0};
-  }
-
-  // Identify the current frame's ID to find its owner in the parent.
-  const frameId = target.model(SDK.ResourceTreeModel.ResourceTreeModel)?.mainFrame?.id;
-  if (!frameId) {
-    return {x: 0, y: 0};
-  }
-
-  // Get the DOMModel of the parent to query the frame owner element.
-  const parentDOMModel = parentTarget.model(SDK.DOMModel.DOMModel);
-  if (!parentDOMModel) {
-    return {x: 0, y: 0};
-  }
-
-  // Retrieve the frame owner node (e.g. the <iframe> element) in the parent's document.
-  const frameOwnerDeferred = await parentDOMModel.getOwnerNodeForFrame(frameId);
-  const frameOwner = await frameOwnerDeferred?.resolvePromise();
-  if (!frameOwner) {
-    return {x: 0, y: 0};
-  }
-
-  // Get the content box of the iframe element.
-  // This is relative to the parent target's viewport.
-  const boxModel = await frameOwner.boxModel();
-  if (!boxModel) {
-    return {x: 0, y: 0};
-  }
-
-  // content is a Quad [x1, y1, x2, y2, x3, y3, x4, y4]
-  const contentQuad = boxModel.content;
-  const iframeContentX = contentQuad[0];
-  const iframeContentY = contentQuad[1];
-
-  // Get the scroll position of the parent target to convert viewport-relative coordinates
-  // to document-relative coordinates.
-  const parentMetrics = await parentTarget.pageAgent().invoke_getLayoutMetrics();
-  if (parentMetrics.getError()) {
-    return {x: 0, y: 0};
-  }
-
-  const scrollX = parentMetrics.cssVisualViewport.pageX;
-  const scrollY = parentMetrics.cssVisualViewport.pageY;
-
-  // Recursively add the offset of the parent target itself (if it is also an OOPiF).
-  const parentOffset = await getOopifOffset(parentTarget);
-
-  return {
-    x: iframeContentX + scrollX + parentOffset.x,
-    y: iframeContentY + scrollY + parentOffset.y,
-  };
-}
-
-/**
- * Calculate the axis-aligned bounding box for a Quad [x1, y1, x2, y2, x3, y3, x4, y4].
- * This accounts for CSS scaling and transforms (e.g. zoom, transform: scale).
- */
-function getQuadBoundingBox(quad: Protocol.DOM.Quad): {minX: number, maxX: number, minY: number, maxY: number} {
-  const minX = Math.min(quad[0], quad[2], quad[4], quad[6]);
-  const maxX = Math.max(quad[0], quad[2], quad[4], quad[6]);
-  const minY = Math.min(quad[1], quad[3], quad[5], quad[7]);
-  const maxY = Math.max(quad[1], quad[3], quad[5], quad[7]);
-  return {minX, maxX, minY, maxY};
-}

package/front_end/panels/mobile_throttling/MobileThrottlingSelector.ts

@@ -1,92 +0,0 @@
-// Copyright 2017 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 i18n from '../../core/i18n/i18n.js';
-import * as SDK from '../../core/sdk/sdk.js';
-
-import {throttlingManager} from './ThrottlingManager.js';
-import {
-  ThrottlingPresets,
-  type Conditions,
-  type ConditionsList,
-  type MobileThrottlingConditionsGroup,
-} from './ThrottlingPresets.js';
-
-const UIStrings = {
-  /**
-   * @description Mobile throttling is disabled. The user can select this option to run mobile
-   * emulation at a normal speed instead of throttled.
-   */
-  disabled: 'Disabled',
-  /**
-   * @description Title for a group of pre-decided configuration options for mobile throttling. These
-   * are useful default options that users might want.
-   */
-  presets: 'Presets',
-  /**
-   * @description Title for a group of advanced configuration options for mobile throttling, which
-   * might not be applicable to every user or situation.
-   */
-  advanced: 'Advanced',
-} as const;
-const str_ = i18n.i18n.registerUIStrings('panels/mobile_throttling/MobileThrottlingSelector.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-export class MobileThrottlingSelector {
-  private readonly populateCallback: (arg0: MobileThrottlingConditionsGroup[]) => ConditionsList;
-  private readonly selectCallback: (arg0: number) => void;
-  private readonly options: ConditionsList;
-
-  constructor(
-      populateCallback: (arg0: MobileThrottlingConditionsGroup[]) => ConditionsList,
-      selectCallback: (arg0: number) => void) {
-    this.populateCallback = populateCallback;
-    this.selectCallback = selectCallback;
-    SDK.CPUThrottlingManager.CPUThrottlingManager.instance().addEventListener(
-        SDK.CPUThrottlingManager.Events.RATE_CHANGED, this.conditionsChanged, this);
-    SDK.NetworkManager.MultitargetNetworkManager.instance().addEventListener(
-        SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, this.conditionsChanged, this);
-    this.options = this.populateOptions();
-    this.conditionsChanged();
-  }
-
-  optionSelected(conditions: Conditions): void {
-    SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(conditions.network);
-    throttlingManager().setCPUThrottlingOption(conditions.cpuThrottlingOption);
-  }
-
-  private populateOptions(): ConditionsList {
-    const disabledGroup = {
-      title: i18nString(UIStrings.disabled),
-      items: [ThrottlingPresets.getNoThrottlingConditions()],
-    };
-    const presetsGroup = {title: i18nString(UIStrings.presets), items: ThrottlingPresets.getMobilePresets()};
-    const advancedGroup = {title: i18nString(UIStrings.advanced), items: ThrottlingPresets.getAdvancedMobilePresets()};
-    return this.populateCallback([disabledGroup, presetsGroup, advancedGroup]);
-  }
-
-  private conditionsChanged(): void {
-    this.populateOptions();
-
-    const networkConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
-    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 &&
-          option.cpuThrottlingOption === cpuThrottlingOption) {
-        this.selectCallback(index);
-        return;
-      }
-    }
-
-    const customConditions = ThrottlingPresets.getCustomConditions();
-    for (let index = 0; index < this.options.length; ++index) {
-      const item = this.options[index];
-      if (item && item.title === customConditions.title && item.description === customConditions.description) {
-        this.selectCallback(index);
-        return;
-      }
-    }
-  }
-}