chrome-devtools-frontend 1.0.1661063 → 1.0.1662965

package/front_end/core/common/Settings.ts

@@ -23,6 +23,75 @@ import {
 } from './SettingRegistration.js';
 import {VersionController} from './VersionController.js';
 
+/**
+ * Describes and configures a Setting.
+ *
+ * Use `Settings#resolve` to get the concrete `Setting` instance for a descriptor.
+ */
+export interface SettingDescriptor<ValueT> {
+  /** The unique identifier of a setting */
+  readonly name: string;
+
+  /**
+   * Determines how the possible values of the setting are expressed.
+   *
+   * - If the setting can only be enabled and disabled use BOOLEAN
+   * - If the setting has a list of possible values use ENUM
+   * - If each setting value is a set of objects use ARRAY
+   * - If the setting value is a regular expression use REGEX
+   */
+  readonly type: SettingType;
+
+  /**
+   * The default value for this setting.
+   *
+   * Can be computed based on the `hostConfig` (but NOTHING ELSE).
+   */
+  readonly defaultValue: ValueT|((hostConfig: Root.Runtime.HostConfig) => ValueT);
+
+  /**
+   * Determines if the setting value is stored in the global, local or session storage.
+   */
+  readonly storageType?: SettingStorageType;
+}
+
+/**
+ * Describes and configures a Setting that might be unavailable or disabled depending on the HostConfig.
+ *
+ * See {@link SettingAvailability} for details.
+ *
+ * Use `Settings#maybeResolve` to get the concrete `Setting` instance (or a reason why it's not available).
+ */
+export interface ConditionalSettingDescriptor<ValueT, ReasonT> extends SettingDescriptor<ValueT> {
+  /** The function used as `isAvailable` must only read the host config, NOTHING ELSE. */
+  isAvailable: (hostConfig: Root.Runtime.HostConfig) => SettingAvailabilityStatus<ReasonT>;
+}
+
+export type SettingAvailabilityStatus<ReasonT> = {
+  status: SettingAvailability.AVAILABLE,
+}|{
+  status: SettingAvailability.UNAVAILABLE | SettingAvailability.DISABLED,
+  reason: ReasonT,
+};
+
+export const enum SettingAvailability {
+  /**
+   * Setting is available and can be changed by the user or programmatically.
+   */
+  AVAILABLE = 1,
+
+  /**
+   * Setting is not available at all. Any `maybeResolve` or `resolve` call will fail.
+   * The setting should be hidden from the user.
+   */
+  UNAVAILABLE = 2,
+
+  /**
+   * Setting is available, but its value can't be read or written.
+   */
+  DISABLED = 3,
+}
+
 export interface SettingsCreationOptions {
   syncedStorage: SettingsStorage;
   globalStorage: SettingsStorage;
@@ -75,9 +144,6 @@ export class Settings {
           this.createSetting(settingName, evaluatedDefaultValue, storageType);
 
       setting.setTitleFunction(registration.title);
-      if (registration.userActionCondition) {
-        setting.setRequiresUserAction(Boolean(Root.Runtime.Runtime.queryParam(registration.userActionCondition)));
-      }
       setting.setRegistration(registration);
 
       this.registerModuleSetting(setting);

package/front_end/core/platform/ArrayUtilities.ts

@@ -152,6 +152,16 @@ export function lowerBound<S, T, A extends S[]>(
   return r;
 }
 
+/**
+ * Inserts a value into a sorted array in O(n) time (O(log n) search using the provided comparator and O(n) insertion).
+ * Returns the index at which the value was inserted.
+ */
+export function insertWithComparator<T>(array: T[], value: T, comparator: (a: T, b: T) => number): number {
+  const index = lowerBound(array, value, comparator);
+  array.splice(index, 0, value);
+  return index;
+}
+
 /**
  * Returns the index of the element closest to the needle that is greater than
  * it. Assumes that the provided array is sorted.

package/front_end/core/platform/StringUtilities.ts

@@ -50,8 +50,40 @@ const escapedReplacements = new Map([
   ['</script', '\\x3C/script'],
 ]);
 
-export const escapeUnicode = (content: string): string => {
-  return content.replaceAll(/[\p{Format}\p{Surrogate}]/gu, match => {
+const UNICODE_ESCAPE_SOURCE = '[\\p{Format}\\p{Surrogate}]';
+const UNICODE_ESCAPE_REGEX = new RegExp(UNICODE_ESCAPE_SOURCE, 'u');
+const UNICODE_ESCAPE_GLOBAL_REGEX = new RegExp(UNICODE_ESCAPE_SOURCE, 'gu');
+
+const UNICODE_ESCAPE_EXCEPT_ZWSP_SOURCE = '(?![\\u200B\\u200C\\u200D])[\\p{Format}]|\\p{Surrogate}';
+const UNICODE_ESCAPE_EXCEPT_ZWSP_REGEX = new RegExp(UNICODE_ESCAPE_EXCEPT_ZWSP_SOURCE, 'u');
+const UNICODE_ESCAPE_EXCEPT_ZWSP_GLOBAL_REGEX = new RegExp(UNICODE_ESCAPE_EXCEPT_ZWSP_SOURCE, 'gu');
+
+/**
+ * Escapes formatting and surrogate characters in the string into literal Unicode escape sequences (e.g. \u200B).
+ * Use this when displaying strings to developers for inspection (e.g. in the Console or Object properties)
+ * where you want hidden or invisible characters to be explicitly visible as literal text.
+ */
+export const escapeUnicodeAsText = (content: string): string => {
+  if (!UNICODE_ESCAPE_REGEX.test(content)) {
+    return content;
+  }
+  return content.replaceAll(UNICODE_ESCAPE_GLOBAL_REGEX, match => {
+    return match.split('').map(char => '\\u' + toHexadecimal(char.charCodeAt(0), 4)).join('');
+  });
+};
+
+/**
+ * Escapes dangerous formatting and surrogate characters (like bidi override characters) to prevent
+ * security and layout issues, but leaves safe, layout-critical zero-width formatting characters
+ * (Zero Width Space \u200B, Zero Width Non-Joiner \u200C, and Zero Width Joiner \u200D) untouched.
+ * Use this when rendering user-controlled content inside templates or HTML markup where you want formatting
+ * characters to function normally for word wrapping or rendering layout, rather than showing as literal text.
+ */
+export const safeEscapeUnicode = (content: string): string => {
+  if (!UNICODE_ESCAPE_EXCEPT_ZWSP_REGEX.test(content)) {
+    return content;
+  }
+  return content.replaceAll(UNICODE_ESCAPE_EXCEPT_ZWSP_GLOBAL_REGEX, match => {
     return match.split('').map(char => '\\u' + toHexadecimal(char.charCodeAt(0), 4)).join('');
   });
 };
@@ -176,8 +208,8 @@ export const toBase64 = (inputString: string): string => {
     shift = i % 3;
     v |= data[i] << (16 >>> shift & 24);
     if (shift === 2) {
-      encoded += String.fromCharCode(
-          encodeBits(v >>> 18 & 63), encodeBits(v >>> 12 & 63), encodeBits(v >>> 6 & 63), encodeBits(v & 63));
+      encoded += String.fromCharCode(encodeBits(v >>> 18 & 63), encodeBits(v >>> 12 & 63), encodeBits(v >>> 6 & 63),
+                                     encodeBits(v & 63));
       v = 0;
     }
   }
@@ -312,8 +344,8 @@ export const filterRegex = function(query: string): RegExp {
   return new RegExp(regexString, 'i');
 };
 
-export const createSearchRegex = function(
-    query: string, caseSensitive: boolean, isRegex: boolean, matchWholeWord = false): RegExp {
+export const createSearchRegex = function(query: string, caseSensitive: boolean, isRegex: boolean,
+                                          matchWholeWord = false): RegExp {
   const regexFlags = caseSensitive ? 'g' : 'gi';
   let regexObject;
 

package/front_end/core/sdk/ServiceWorkerCacheModel.ts

@@ -273,16 +273,6 @@ export class ServiceWorkerCacheModel extends SDKModel<EventTypes> implements Pro
   indexedDBContentUpdated(_event: Protocol.Storage.IndexedDBContentUpdatedEvent): void {
   }
 
-  interestGroupAuctionEventOccurred(_event: Protocol.Storage.InterestGroupAuctionEventOccurredEvent): void {
-  }
-
-  interestGroupAccessed(_event: Protocol.Storage.InterestGroupAccessedEvent): void {
-  }
-
-  interestGroupAuctionNetworkRequestCreated(_event: Protocol.Storage.InterestGroupAuctionNetworkRequestCreatedEvent):
-      void {
-  }
-
   sharedStorageAccessed(_event: Protocol.Storage.SharedStorageAccessedEvent): void {
   }
 

package/front_end/core/sdk/StorageBucketsModel.ts

@@ -142,16 +142,6 @@ export class StorageBucketsModel extends SDKModel<EventTypes> implements Protoco
     }
   }
 
-  interestGroupAccessed(_event: Protocol.Storage.InterestGroupAccessedEvent): void {
-  }
-
-  interestGroupAuctionEventOccurred(_event: Protocol.Storage.InterestGroupAuctionEventOccurredEvent): void {
-  }
-
-  interestGroupAuctionNetworkRequestCreated(_event: Protocol.Storage.InterestGroupAuctionNetworkRequestCreatedEvent):
-      void {
-  }
-
   indexedDBListUpdated(_event: Protocol.Storage.IndexedDBListUpdatedEvent): void {
   }
 

package/front_end/core/sdk/sdk-meta.ts

@@ -1355,7 +1355,6 @@ Common.Settings.registerSettingExtension({
   settingType: Common.Settings.SettingType.BOOLEAN,
   order: 0,
   defaultValue: false,
-  userActionCondition: 'hasOtherClients',
   options: [
     {
       value: true,

package/front_end/entrypoints/inspector_main/OutermostTargetSelector.ts

@@ -27,8 +27,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('entrypoints/inspector_main/OutermostTargetSelector.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-let outermostTargetSelectorInstance: OutermostTargetSelector;
-
 export class OutermostTargetSelector implements SDK.TargetManager.Observer, UI.SoftDropDown.Delegate<SDK.Target.Target>,
                                                 UI.Toolbar.Provider {
   readonly listItems = new UI.ListModel.ListModel<SDK.Target.Target>();
@@ -54,17 +52,6 @@ export class OutermostTargetSelector implements SDK.TargetManager.Observer, UI.S
     UI.Context.Context.instance().addFlavorChangeListener(SDK.Target.Target, this.#targetChanged, this);
   }
 
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): OutermostTargetSelector {
-    const {forceNew} = opts;
-    if (!outermostTargetSelectorInstance || forceNew) {
-      outermostTargetSelectorInstance = new OutermostTargetSelector();
-    }
-
-    return outermostTargetSelectorInstance;
-  }
-
   item(): UI.Toolbar.ToolbarItem {
     return this.#toolbarItem;
   }

package/front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -216,9 +216,14 @@ export class RenderingOptionsView extends UI.Widget.VBox {
     this.#appendCheckbox(
         i18nString(UIStrings.scrollingPerformanceIssues), i18nString(UIStrings.highlightsElementsTealThatCan),
         Common.Settings.Settings.instance().moduleSetting('show-scroll-bottleneck-rects'));
-    this.#appendCheckbox(
-        i18nString(UIStrings.highlightAds), i18nString(UIStrings.highlightsElementsRedDetectedToBe),
-        Common.Settings.Settings.instance().moduleSetting('show-ad-highlights'));
+
+    // The 'Highlight ads' setting now lives in the Ads panel under Application.
+    // We display this legacy setting only when the Ads panel isn't enabled.
+    if (!Root.Runtime.hostConfig.devToolsAdsPanel?.enabled) {
+      this.#appendCheckbox(i18nString(UIStrings.highlightAds), i18nString(UIStrings.highlightsElementsRedDetectedToBe),
+                           Common.Settings.Settings.instance().moduleSetting('show-ad-highlights'));
+    }
+
     this.#appendCheckbox(
         i18nString(UIStrings.disableLocalFonts), i18nString(UIStrings.disablesLocalSourcesInFontface),
         Common.Settings.Settings.instance().moduleSetting('local-fonts-disabled'));

package/front_end/entrypoints/inspector_main/inspector_main-meta.ts

@@ -246,10 +246,10 @@ UI.Toolbar.registerToolbarItem({
 });
 
 UI.Toolbar.registerToolbarItem({
-  async loadItem() {
+  loadItem: Common.Lazy.lazy(async () => {
     const InspectorMain = await loadInspectorMainModule();
-    return InspectorMain.OutermostTargetSelector.OutermostTargetSelector.instance();
-  },
+    return new InspectorMain.OutermostTargetSelector.OutermostTargetSelector();
+  }) as () => Promise<UI.Toolbar.Provider>,
   order: 97,
   location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_RIGHT,
 });

package/front_end/entrypoints/main/MainImpl.ts

@@ -215,6 +215,11 @@ export class MainImpl {
     this.#universe = new Foundation.Universe.Universe(creationOptions);
     Root.DevToolsContext.setGlobalInstance(this.#universe.context as Root.DevToolsContext.WritableDevToolsContext);
 
+    // Mark 'cache-disabled' as requiring user interaction when multiple CDP clients are attached.
+    if (Root.Runtime.Runtime.queryParam('hasOtherClients')) {
+      this.#universe.settings.moduleSetting('cache-disabled').setRequiresUserAction(true);
+    }
+
     Root.Runtime.experiments.cleanUpStaleExperiments();
 
     await this.requestAndRegisterLocaleData();
@@ -503,8 +508,8 @@ export class MainImpl {
                                            'no-profile-and-not-eligible';
         void VisualLogging.logFunctionCall('gdp-client-initialize', contextString);
       });
-      void Badges.UserBadges.instance().initialize();
-      Badges.UserBadges.instance().addEventListener(Badges.Events.BADGE_TRIGGERED, async ev => {
+      void this.#universe.userBadges.initialize();
+      this.#universe.userBadges.addEventListener(Badges.Events.BADGE_TRIGGERED, async ev => {
         loadedPanelCommonModule ??= await import('../../panels/common/common.js') as typeof PanelCommon;
         const badgeNotification = new loadedPanelCommonModule.BadgeNotification();
         const {badge, reason} = ev.data;

package/front_end/foundation/README.md

@@ -8,3 +8,89 @@ As such, allowed use of APIs is restricted to what is available in both runtimes
 A `DevToolsUniverse` is a concrete, encapsulated instance of "foundation" scoped
 to a single root CDP target. It is valid to create multiple `DevToolsUniverse`
 instances simultaneously.
+
+## Architecture Shortcomings & Code Health Projects
+
+The following is a prioritized list of architectural shortcomings and refactoring projects aimed at reducing coupling, eliminating global state, and improving the modularity of the DevTools foundation.
+
+### Priority 1: Move `models/text_utils` to `core/text_utils`
+*   **Problem**: 22 files in `front_end/core/sdk` depend directly on `front_end/models/text_utils` for basic text structures (layering violation).
+*   **Rationale**: `text_utils` contains fundamental, non-business-logic utilities (`TextRange`, `TextCursor`, `ContentData`, `ContentProvider`) that represent the base data structures of the editor, debugger, and network panels. It only depends on `core/common` and `core/platform`. Moving it to `core` is a natural fit and resolves the majority of `core` -> `models` layering violations.
+*   **Action**:
+    1. Move the directory `front_end/models/text_utils` to `front_end/core/text_utils`.
+    2. Update all imports across the codebase.
+
+### Priority 2: Break Circular Dependencies in Bindings (`ResourceMapping` <-> Bindings)
+*   **Problem**: Bidirectional dependencies between `ResourceMapping` and `DebuggerWorkspaceBinding`/`CSSWorkspaceBinding` prevent isolated testing.
+*   **Rationale**: Decoupling `ResourceMapping` from concrete bindings allows better testing and modularity.
+*   **Action**: Introduce abstract listener interfaces in `ResourceMapping` (Dependency Inversion). `DebuggerWorkspaceBinding` and `CSSWorkspaceBinding` should implement these interfaces and register themselves, allowing `ResourceMapping` to invoke them without depending on concrete classes.
+
+### Priority 3: Move `IgnoreListManager` from `workspace` to `bindings`
+*   **Problem**: `models/workspace` depends on `core/sdk` via `IgnoreListManager.ts`.
+*   **Rationale**: Ignore-listing is conceptually a debugger-binding concern, not a basic workspace/file-system concern.
+*   **Action**:
+    1. Remove the convenience helper `UISourceCode.isIgnoreListed()` (and related methods in `UILocation`) from `models/workspace`.
+    2. Update callers to query `IgnoreListManager` directly.
+    3. Move `IgnoreListManager.ts` to `models/bindings`.
+    4. This removes the value-level dependency of `workspace` on `sdk`.
+
+### Priority 4: Decouple `Workspace.Project` from `SDK.Target`
+*   **Problem**: `Workspace.Project` exposes `target()`, coupling the VFS to runtime targets.
+*   **Rationale**: A workspace should be able to exist without knowing about browser targets.
+*   **Action**:
+    1. Remove `target()` from the `Project` interface and `ProjectStore` in `front_end/models/workspace/WorkspaceImpl.ts`.
+    2. In the `bindings` module, maintain a private `WeakMap<Workspace.Project, SDK.Target.Target>` to associate projects with targets.
+    3. Update `NetworkProject.targetForUISourceCode(uiSourceCode)` to look up the target from this `WeakMap`.
+
+### Priority 5: Decouple `core/sdk` from `models/formatter` (AST Scope Fallback)
+*   **Problem**: `SDK/SourceMap.ts` depends on `models/formatter` for fallback scope calculation.
+*   **Rationale**: `SDK` should not depend on high-level formatting/parsing worker pools.
+*   **Action**:
+    1. Remove the fallback scope calculation logic from `SourceMap.ts` and expose a clean API (e.g., `setScopesInfo(...)`).
+    2. Move the AST fallback scope calculation logic to `front_end/models/bindings` (e.g., in `DebuggerWorkspaceBinding`), which coordinates script and source map loading.
+    3. Have the bindings layer calculate the fallback scopes and attach them to the `SourceMap` object.
+
+### Priority 6: Refactor Mapping Engines & Inner Helpers in Bindings
+*   **Problem**: Engines and helpers query global `DebuggerWorkspaceBinding.instance()` directly.
+*   **Rationale**: High coupling hinders testing and isolation.
+*   **Action**: Eliminate direct global singleton queries. Update helpers to access parent mapping engines or pass references via constructors.
+
+### Priority 7: Universe-scoped Embedder Host and HostConfig
+*   **Problem**: `InspectorFrontendHostInstance` and `Root.Runtime.hostConfig` are treated as global mutable singletons. Core classes (`Connections`, `IsolatedFileSystemManager`, `FileManager`) and UI components access them directly, leading to global state pollution and state leaks in tests.
+*   **Rationale**: The host interface and its configuration represent the boundary between DevTools and the Chromium browser. To support multiple isolated `DevToolsUniverse` instances, both the host interface and host configuration must be scoped to the universe context.
+*   **Action**:
+    1. Store the scoped `InspectorFrontendHostAPI` (wrapped in `ScopedInspectorFrontendHost`) in the `DevToolsUniverse` context.
+    2. Refactor core classes (`Connections`, `IsolatedFileSystemManager`, `FileManager`, `UserMetrics`) to receive the scoped host via constructor injection.
+    3. Introduce a scoped `HostConfigProvider` service in the `Universe` context to manage `HostConfig` fetching and caching.
+    4. Move polling and configuration update logic from `HostConfigTracker` in `AidaClient.ts` to `HostConfigProvider`.
+    5. Provide a compatibility Proxy for `Root.Runtime.hostConfig` to allow gradual migration of the 200+ call sites.
+    6. Remove the global side-effect initialization in `InspectorFrontendHost.ts`.
+
+### Priority 8: View-Level Dependency Injection (Universe-ification)
+*   **Problem**: UI panels query global `.instance()` for bindings, causing state leaks in tests.
+*   **Rationale**: DevTools is transitioning to a scoped "Universe" architecture where dependencies are injected. UI panels should receive their dependencies rather than querying globals.
+*   **Action**:
+    1. Expose bindings on `Universe` and inject them via the view loading pipeline.
+    2. Leverage the view loading pipeline (`-meta.ts` files) to pass these bindings to panel constructors upon initialization, avoiding global calls in UI panels.
+
+### Priority 9: Decouple `persistence` from `bindings`
+*   **Problem**: `models/persistence` depends on `models/bindings` to check if a target is Node.js.
+*   **Rationale**: `persistence` (which maps network files to local files) should ideally only depend on `workspace` and not on the complex debugger/bindings layer.
+*   **Action**: Introduce a capability/property on `Workspace.Project` (e.g., `isNodeProject`) to avoid direct target queries.
+
+### Priority 10: Move `SourceFrameIssuesManager` to `bindings`
+*   **Problem**: `models/issues_manager` depends on `workspace` and `bindings` only for placing issue badges.
+*   **Rationale**: Showing badges on source frames is a binding/presentation concern, similar to showing console messages. `issues_manager` itself should be a clean, independent leaf module.
+*   **Action**: Move `SourceFrameIssuesManager.ts` to `models/bindings/` and remove `workspace` and `bindings` dependencies from `issues_manager/BUILD.gn`.
+
+### Priority 11: Decouple UI via Interfaces / Revealers
+*   **Problem**: General UI components (like `Linkifier`) depend on heavy concrete bindings.
+*   **Rationale**: UI components should not be tightly coupled to complex mapping logic.
+*   **Action**: Use light interfaces or `Common.Revealer`.
+
+### Priority 12: Decouple Core Modules from `i18n` (UI Localization)
+*   **Problem**: Core infra/parser modules import `i18n` for localized strings.
+*   **Rationale**: Business logic and core infrastructure should not be tied to UI localization libraries.
+*   **Action**:
+    1. Refactor parsers to return structured error data and let UI handle localization.
+    2. Update registries to use string IDs/keys.

package/front_end/foundation/Universe.ts

@@ -6,7 +6,9 @@ import * as Common from '../core/common/common.js';
 import * as Host from '../core/host/host.js';
 import * as Root from '../core/root/root.js';
 import * as SDK from '../core/sdk/sdk.js';
+import * as AiAssistance from '../models/ai_assistance/ai_assistance.js';
 import * as AutofillManager from '../models/autofill_manager/autofill_manager.js';
+import * as Badges from '../models/badges/badges.js';
 import * as Bindings from '../models/bindings/bindings.js';
 import * as Breakpoints from '../models/breakpoints/breakpoints.js';
 import * as CrUXManager from '../models/crux-manager/crux-manager.js';
@@ -186,6 +188,12 @@ export class Universe {
     const liveMetrics = new LiveMetrics.LiveMetrics(targetManager, deviceModeModel);
     context.set(LiveMetrics.LiveMetrics, liveMetrics);
 
+    const userBadges = new Badges.UserBadges(settings, gdpClient);
+    context.set(Badges.UserBadges, userBadges);
+
+    const aiHistoryStorage = new AiAssistance.AiHistoryStorage.AiHistoryStorage(settings);
+    context.set(AiAssistance.AiHistoryStorage.AiHistoryStorage, aiHistoryStorage);
+
     this.autofillManager = new AutofillManager.AutofillManager.AutofillManager(targetManager, frameManager);
   }
 
@@ -198,6 +206,10 @@ export class Universe {
     return this.context.get(Persistence.AutomaticFileSystemWorkspaceBinding.AutomaticFileSystemWorkspaceBinding);
   }
 
+  get aiHistoryStorage(): AiAssistance.AiHistoryStorage.AiHistoryStorage {
+    return this.context.get(AiAssistance.AiHistoryStorage.AiHistoryStorage);
+  }
+
   get breakpointManager(): Breakpoints.BreakpointManager.BreakpointManager {
     return this.context.get(Breakpoints.BreakpointManager.BreakpointManager);
   }
@@ -286,6 +298,10 @@ export class Universe {
     return this.context.get(SDK.TargetManager.TargetManager);
   }
 
+  get userBadges(): Badges.UserBadges {
+    return this.context.get(Badges.UserBadges);
+  }
+
   get workspace(): Workspace.Workspace.WorkspaceImpl {
     return this.context.get(Workspace.Workspace.WorkspaceImpl);
   }