chrome-devtools-frontend 1.0.1675430 → 1.0.1678416

package/front_end/entrypoints/heap_snapshot_worker/HeapSnapshot.ts

@@ -501,21 +501,11 @@ export class HeapSnapshotNode implements HeapSnapshotItem {
   }
 
   #detachednessAndClassIndex(): number {
-    const {snapshot, nodeIndex} = this;
-    const nodeDetachednessAndClassIndexOffset = snapshot.nodeDetachednessAndClassIndexOffset;
-    return nodeDetachednessAndClassIndexOffset !== -1 ?
-        snapshot.nodes.getValue(nodeIndex + nodeDetachednessAndClassIndexOffset) :
-        (snapshot.detachednessAndClassIndexArray as Uint32Array)[nodeIndex / snapshot.nodeFieldCount];
+    return this.snapshot.detachednessAndClassIndexArray[this.nodeIndex / this.snapshot.nodeFieldCount];
   }
 
   #setDetachednessAndClassIndex(value: number): void {
-    const {snapshot, nodeIndex} = this;
-    const nodeDetachednessAndClassIndexOffset = snapshot.nodeDetachednessAndClassIndexOffset;
-    if (nodeDetachednessAndClassIndexOffset !== -1) {
-      snapshot.nodes.setValue(nodeIndex + nodeDetachednessAndClassIndexOffset, value);
-    } else {
-      (snapshot.detachednessAndClassIndexArray as Uint32Array)[nodeIndex / snapshot.nodeFieldCount] = value;
-    }
+    this.snapshot.detachednessAndClassIndexArray[this.nodeIndex / this.snapshot.nodeFieldCount] = value;
   }
 
   detachedness(): HeapSnapshotModel.HeapSnapshotModel.DOMLinkState {
@@ -1010,7 +1000,7 @@ export abstract class HeapSnapshot {
   #ignoredEdgesInRetainersView = new Set<number>();
   #nodeDistancesForRetainersView: Int32Array|undefined;
   #edgeNamesThatAreNotWeakMaps: Platform.TypedArrayUtilities.BitVector;
-  detachednessAndClassIndexArray?: Uint32Array;
+  detachednessAndClassIndexArray!: Uint32Array;
   nodeNativeContextAttribution!: Int32Array;
   #nativeContextSizes!: HeapSnapshotModel.HeapSnapshotModel.NativeContextSizes;
   #nativeContextOrdinals!: number[];
@@ -1092,6 +1082,7 @@ export abstract class HeapSnapshot {
     this.#progress.updateStatus('Building retainers…');
     const resultsFromSecondWorker = this.startInitStep1InSecondThread(secondWorker);
     this.#progress.updateStatus('Propagating DOM state…');
+    this.initDetachednessAndClassIndex();
     this.propagateDOMState();
     this.#progress.updateStatus('Calculating node flags…');
     this.calculateFlags();
@@ -2400,12 +2391,6 @@ export abstract class HeapSnapshot {
       nodeRegExpType,
     } = this;
 
-    // If the snapshot doesn't contain a detachedness field in each node, then
-    // allocate a separate array so there is somewhere to store the class index.
-    if (this.nodeDetachednessAndClassIndexOffset === -1) {
-      this.detachednessAndClassIndexArray = new Uint32Array(nodeCount);
-    }
-
     // We'll add some new values to the `strings` array during the processing below.
     // This map lets us easily find the index for each added string.
     const stringTable = new Map<string, number>();
@@ -2707,6 +2692,49 @@ export abstract class HeapSnapshot {
     return this.#nativeContextSizes;
   }
 
+  getRetainedByContextSummary(): HeapSnapshotModel.HeapSnapshotModel.RetainedByContextSummary {
+    // Use the exact same implementation here as aggregateWithFilter('objectsRetainedByContexts').
+    const isRetainedByContext = this.createNamedFilter('objectsRetainedByContexts');
+
+    let contextCount = 0;
+    let retainedByContextSize = 0;
+    let retainedByContextCount = 0;
+    let notRetainedByContextSize = 0;
+    let notRetainedByContextCount = 0;
+
+    const node = this.rootNode();
+    const {nodes, nodeFieldCount, nodeSelfSizeOffset: selfSizeOffset} = this;
+    const nodesLength = nodes.length;
+
+    for (let nodeIndex = 0; nodeIndex < nodesLength; nodeIndex += nodeFieldCount) {
+      const selfSize = nodes.getValue(nodeIndex + selfSizeOffset);
+      if (!selfSize) {
+        continue;
+      }
+      node.nodeIndex = nodeIndex;
+      if (isRetainedByContext(node)) {
+        retainedByContextCount++;
+        retainedByContextSize += selfSize;
+      } else {
+        notRetainedByContextCount++;
+        notRetainedByContextSize += selfSize;
+      }
+
+      if (this.isContextObject(node)) {
+        contextCount++;
+      }
+    }
+
+    return {
+      contextCount,
+      retainedByContextSize,
+      retainedByContextCount,
+      notRetainedByContextSize,
+      notRetainedByContextCount,
+      totalSize: retainedByContextSize + notRetainedByContextSize,
+    };
+  }
+
   nodeNativeContext(nodeIndex: number): number {
     const ordinal = nodeIndex / this.nodeFieldCount;
     const nativeContextOrdinal = this.nodeNativeContextAttribution[ordinal];
@@ -2987,6 +3015,30 @@ export abstract class HeapSnapshot {
     return null;
   }
 
+  private initDetachednessAndClassIndex(): void {
+    this.detachednessAndClassIndexArray = new Uint32Array(this.nodeCount);
+    if (this.nodeDetachednessAndClassIndexOffset !== -1) {
+      // Seed this array from the detachedness field of the snapshot.
+      const {nodeFieldCount, nodeDetachednessAndClassIndexOffset: offset} = this;
+      for (let i = 0; i < this.nodeCount; ++i) {
+        this.detachednessAndClassIndexArray[i] = Number(this.nodes.getValue(i * nodeFieldCount + offset));
+      }
+    } else {
+      // For old snapshots, treat native objects named 'Detached ...' as detached.
+      const node = this.rootNode();
+      const nodesLength = this.nodes.length;
+      const {nodeFieldCount, nodeNativeType, nodeTypeOffset} = this;
+      for (let nodeIndex = 0; nodeIndex < nodesLength; nodeIndex += nodeFieldCount) {
+        if (this.nodes.getValue(nodeIndex + nodeTypeOffset) === nodeNativeType) {
+          node.nodeIndex = nodeIndex;
+          if (node.name().startsWith('Detached ')) {
+            node.setDetachedness(HeapSnapshotModel.HeapSnapshotModel.DOMLinkState.DETACHED);
+          }
+        }
+      }
+    }
+  }
+
   /**
    * The phase propagates whether a node is attached or detached through the
    * graph and adjusts the low-level representation of nodes.
@@ -3292,11 +3344,58 @@ export abstract class HeapSnapshot {
     return null;
   }
 
-  createEdgesProvider(nodeIndex: number): HeapSnapshotEdgesProvider {
+  createEdgesProvider(nodeIndex: number,
+                      options?: HeapSnapshotModel.HeapSnapshotModel.HeapEdgesQueryOptions): HeapSnapshotEdgesProvider {
     const node = this.createNode(nodeIndex);
-    const filter = this.containmentEdgesFilter();
+    const defaultFilter = this.containmentEdgesFilter();
+    const minRetainedSize = options?.minRetainedSize;
+    const excludePrimitives = options?.excludePrimitives ?? false;
+
+    let filter: ((arg0: HeapSnapshotEdge) => boolean)|null = defaultFilter;
+
+    if (minRetainedSize !== undefined || excludePrimitives) {
+      filter = (edge: HeapSnapshotEdge): boolean => {
+        if (defaultFilter && !defaultFilter(edge)) {
+          return false;
+        }
+        const targetNode = edge.node();
+        if (minRetainedSize !== undefined && targetNode.retainedSize() < minRetainedSize) {
+          return false;
+        }
+        if (excludePrimitives) {
+          const rawType = targetNode.rawType();
+          if (rawType === this.nodeNumberType) {
+            return false;
+          }
+          if (rawType === this.nodeNativeType) {
+            const targetName = targetNode.rawName();
+            if (targetName === 'undefined' || targetName === 'null' || targetName === 'true' ||
+                targetName === 'false') {
+              return false;
+            }
+          }
+        }
+        return true;
+      };
+    }
+
     const indexProvider = new HeapSnapshotEdgeIndexProvider(this);
-    return new HeapSnapshotEdgesProvider(this, filter, node.edges(), indexProvider);
+    const provider = new HeapSnapshotEdgesProvider(this, filter, node.edges(), indexProvider);
+
+    if (options?.sortBy) {
+      const sortBy = options.sortBy;
+      let comparator: HeapSnapshotModel.HeapSnapshotModel.ComparatorConfig;
+      if (sortBy === 'selfSize') {
+        comparator = new HeapSnapshotModel.HeapSnapshotModel.ComparatorConfig('selfSize', false, '!edgeName', true);
+      } else if (sortBy === 'name') {
+        comparator = new HeapSnapshotModel.HeapSnapshotModel.ComparatorConfig('!edgeName', true, 'retainedSize', false);
+      } else {
+        comparator = new HeapSnapshotModel.HeapSnapshotModel.ComparatorConfig('retainedSize', false, '!edgeName', true);
+      }
+      provider.sortAndRewind(comparator);
+    }
+
+    return provider;
   }
 
   createEdgesProviderForTest(nodeIndex: number, filter: ((arg0: HeapSnapshotEdge) => boolean)|null):
@@ -3512,6 +3611,97 @@ export abstract class HeapSnapshot {
     return new HeapSnapshotNodesProvider(this, this.aggregatesWithFilter(nodeFilter)[classKey].idxs);
   }
 
+  queryObjects(queryOptions: HeapSnapshotModel.HeapSnapshotModel.HeapQueryOptions): HeapSnapshotNodesProvider {
+    const {nodes, nodeFieldCount, retainedSizes} = this;
+    const nodesLength = nodes.length;
+
+    const matchingIndexes: number[] = [];
+
+    const classNamePattern = queryOptions.className ? new RegExp(queryOptions.className, 'i') : null;
+    const propertyNamePattern = queryOptions.propertyName ? new RegExp(queryOptions.propertyName, 'i') : null;
+    const targetNodeType = queryOptions.nodeType ? queryOptions.nodeType.toLowerCase() : null;
+
+    const node = this.rootNode();
+
+    for (let nodeIndex = 0, ordinal = 0; nodeIndex < nodesLength; nodeIndex += nodeFieldCount, ordinal++) {
+      node.nodeIndex = nodeIndex;
+
+      if (queryOptions.minSelfSize !== undefined && node.selfSize() < queryOptions.minSelfSize) {
+        continue;
+      }
+      if (queryOptions.maxSelfSize !== undefined && node.selfSize() > queryOptions.maxSelfSize) {
+        continue;
+      }
+
+      const retainedSize = retainedSizes[ordinal];
+      if (queryOptions.minRetainedSize !== undefined && retainedSize < queryOptions.minRetainedSize) {
+        continue;
+      }
+      if (queryOptions.maxRetainedSize !== undefined && retainedSize > queryOptions.maxRetainedSize) {
+        continue;
+      }
+
+      if (queryOptions.isDetached !== undefined) {
+        const isDetached = node.detachedness() === HeapSnapshotModel.HeapSnapshotModel.DOMLinkState.DETACHED;
+        if (isDetached !== queryOptions.isDetached) {
+          continue;
+        }
+      }
+
+      if (classNamePattern) {
+        const name = node.name();
+        if (!classNamePattern.test(name)) {
+          continue;
+        }
+      }
+
+      if (targetNodeType) {
+        const typeStr = node.type();
+        if (typeStr.toLowerCase() !== targetNodeType) {
+          continue;
+        }
+      }
+
+      if (propertyNamePattern) {
+        let propMatch = false;
+        for (const iter = node.edges(); iter.hasNext(); iter.next()) {
+          if (propertyNamePattern.test(iter.edge.name())) {
+            propMatch = true;
+            break;
+          }
+        }
+        if (!propMatch) {
+          continue;
+        }
+      }
+
+      matchingIndexes.push(nodeIndex);
+    }
+
+    const sortBy = queryOptions.sortBy ?? 'retainedSize';
+    if (sortBy === 'retainedSize') {
+      matchingIndexes.sort((a, b) => retainedSizes[b / nodeFieldCount] - retainedSizes[a / nodeFieldCount]);
+    } else if (sortBy === 'selfSize') {
+      matchingIndexes.sort((a, b) => {
+        node.nodeIndex = b;
+        const sizeB = node.selfSize();
+        node.nodeIndex = a;
+        const sizeA = node.selfSize();
+        return sizeB - sizeA;
+      });
+    } else if (sortBy === 'id') {
+      matchingIndexes.sort((a, b) => {
+        node.nodeIndex = b;
+        const idB = node.id();
+        node.nodeIndex = a;
+        const idA = node.id();
+        return idA - idB;
+      });
+    }
+
+    return new HeapSnapshotNodesProvider(this, matchingIndexes);
+  }
+
   private maxJsNodeId(): number {
     const nodeFieldCount = this.nodeFieldCount;
     const nodes = this.nodes;
@@ -4196,7 +4386,7 @@ export class JSHeapSnapshot extends HeapSnapshot {
         continue;
       }
       node.nodeIndex = nodeIndex;
-      if (node.name().startsWith('Detached ')) {
+      if (node.detachedness() === HeapSnapshotModel.HeapSnapshotModel.DOMLinkState.DETACHED) {
         this.flags[ordinal] |= flag;
       }
     }

package/front_end/entrypoints/inspector_main/InspectorMain.ts

@@ -226,14 +226,14 @@ export class NodeIndicatorProvider implements UI.Toolbar.Provider {
 
 export class SourcesPanelIndicator {
   constructor() {
-    Common.Settings.Settings.instance()
-        .moduleSetting('java-script-disabled')
-        .addChangeListener(javaScriptDisabledChanged);
+    const disableJavascriptSetting =
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.javaScriptDisabledSettingDescriptor);
+    disableJavascriptSetting.addChangeListener(javaScriptDisabledChanged);
     javaScriptDisabledChanged();
 
     function javaScriptDisabledChanged(): void {
       const warnings = [];
-      if (Common.Settings.Settings.instance().moduleSetting('java-script-disabled').get()) {
+      if (disableJavascriptSetting.get()) {
         warnings.push(i18nString(UIStrings.javascriptIsDisabled));
       }
       UI.InspectorView.InspectorView.instance().setPanelWarnings('sources', warnings);
@@ -254,7 +254,8 @@ export class BackendSettingsSync implements SDK.TargetManager.Observer {
     this.#adBlockEnabledSetting = Common.Settings.Settings.instance().moduleSetting('network.ad-blocking-enabled');
     this.#adBlockEnabledSetting.addChangeListener(this.#update, this);
 
-    this.#emulatePageFocusSetting = Common.Settings.Settings.instance().moduleSetting('emulate-page-focus');
+    this.#emulatePageFocusSetting =
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.emulatePageFocusSettingDescriptor);
     this.#emulatePageFocusSetting.addChangeListener(this.#update, this);
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_INFO_CHANGED,

package/front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -8,6 +8,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -201,36 +202,34 @@ export class RenderingOptionsView extends UI.Widget.VBox {
 
     this.element.setAttribute('jslog', `${VisualLogging.panel('rendering').track({resize: true})}`);
 
-    this.#appendCheckbox(
-        i18nString(UIStrings.paintFlashing), i18nString(UIStrings.highlightsAreasOfThePageGreen),
-        Common.Settings.Settings.instance().moduleSetting('show-paint-rects'));
+    this.#appendCheckbox(i18nString(UIStrings.paintFlashing), i18nString(UIStrings.highlightsAreasOfThePageGreen),
+                         Common.Settings.Settings.instance().resolve(SDK.SDKSettings.showPaintRectsSettingDescriptor));
     this.#appendCheckbox(
         i18nString(UIStrings.layoutShiftRegions), i18nString(UIStrings.highlightsAreasOfThePageBlueThat),
-        Common.Settings.Settings.instance().moduleSetting('show-layout-shift-regions'));
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.showLayoutShiftRegionsSettingDescriptor));
     this.#appendCheckbox(
         i18nString(UIStrings.layerBorders), i18nString(UIStrings.showsLayerBordersOrangeoliveAnd),
-        Common.Settings.Settings.instance().moduleSetting('show-debug-borders'));
-    this.#appendCheckbox(
-        i18nString(UIStrings.frameRenderingStats), i18nString(UIStrings.plotsFrameThroughputDropped),
-        Common.Settings.Settings.instance().moduleSetting('show-fps-counter'));
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.showDebugBordersSettingDescriptor));
+    this.#appendCheckbox(i18nString(UIStrings.frameRenderingStats), i18nString(UIStrings.plotsFrameThroughputDropped),
+                         Common.Settings.Settings.instance().resolve(SDK.SDKSettings.showFPSCounterSettingDescriptor));
     this.#appendCheckbox(
         i18nString(UIStrings.scrollingPerformanceIssues), i18nString(UIStrings.highlightsElementsTealThatCan),
-        Common.Settings.Settings.instance().moduleSetting('show-scroll-bottleneck-rects'));
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.showScrollBottleneckRectsSettingDescriptor));
 
     // 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.highlightAds), i18nString(UIStrings.highlightsElementsRedDetectedToBe),
+          Common.Settings.Settings.instance().resolve(SDK.SDKSettings.showAdHighlightsSettingDescriptor));
     }
 
     this.#appendCheckbox(
         i18nString(UIStrings.disableLocalFonts), i18nString(UIStrings.disablesLocalSourcesInFontface),
         Common.Settings.Settings.instance().moduleSetting('local-fonts-disabled'));
-    this.#appendCheckbox(
-        i18nString(UIStrings.emulateAFocusedPage), i18nString(UIStrings.emulatesAFocusedPage),
-        Common.Settings.Settings.instance().moduleSetting('emulate-page-focus'),
-        {toggle: Host.UserMetrics.Action.ToggleEmulateFocusedPageFromRenderingTab});
+    this.#appendCheckbox(i18nString(UIStrings.emulateAFocusedPage), i18nString(UIStrings.emulatesAFocusedPage),
+                         Common.Settings.Settings.instance().resolve(SDK.SDKSettings.emulatePageFocusSettingDescriptor),
+                         {toggle: Host.UserMetrics.Action.ToggleEmulateFocusedPageFromRenderingTab});
     const autoDarkModeSetting = Common.Settings.Settings.instance().moduleSetting('emulate-auto-dark-mode');
     this.#appendCheckbox(i18nString(UIStrings.emulateAutoDarkMode), i18nString(UIStrings.emulatesAutoDarkMode),
                          autoDarkModeSetting);

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

@@ -4,11 +4,69 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as SettingsUI from '../../ui/settings/settings.js';
 
 import type * as InspectorMain from './inspector_main.js';
 
 const UIStrings = {
+  /**
+   * @description Title of an option under the Rendering category that can be invoked through the Command Menu.
+   */
+  showPaintFlashingRectangles: 'Show paint flashing rectangles',
+  /**
+   * @description Title of an option under the Rendering category that can be invoked through the Command Menu.
+   */
+  hidePaintFlashingRectangles: 'Hide paint flashing rectangles',
+  /**
+   * @description Title of an option under the Rendering category that can be invoked through the Command Menu.
+   */
+  showLayoutShiftRegions: 'Show layout shift regions',
+  /**
+   * @description Title of an option under the Rendering category that can be invoked through the Command Menu.
+   */
+  hideLayoutShiftRegions: 'Hide layout shift regions',
+  /**
+   * @description Text to highlight the rendering frames for ads.
+   */
+  highlightAdFrames: 'Highlight ad frames',
+  /**
+   * @description Title of an option under the Rendering category that can be invoked through the Command Menu.
+   */
+  doNotHighlightAdFrames: 'Do not highlight ad frames',
+  /**
+   * @description Title of an option under the Rendering category that can be invoked through the Command Menu.
+   */
+  showLayerBorders: 'Show layer borders',
+  /**
+   * @description Title of an option under the Rendering category that can be invoked through the Command Menu.
+   */
+  hideLayerBorders: 'Hide layer borders',
+  /**
+   * @description Title of an option under the Rendering category that can be invoked through the Command Menu.
+   */
+  showFramesPerSecondFpsMeter: 'Show frames per second (FPS) meter',
+  /**
+   * @description Title of an option under the Rendering category that can be invoked through the Command Menu.
+   */
+  hideFramesPerSecondFpsMeter: 'Hide frames per second (FPS) meter',
+  /**
+   * @description Title of an option under the Rendering category that can be invoked through the Command Menu.
+   */
+  showScrollPerformanceBottlenecks: 'Show scroll performance bottlenecks',
+  /**
+   * @description Title of an option under the Rendering category that can be invoked through the Command Menu.
+   */
+  hideScrollPerformanceBottlenecks: 'Hide scroll performance bottlenecks',
+  /**
+   * @description Title of a Rendering setting that can be invoked through the Command Menu.
+   */
+  emulateAFocusedPage: 'Emulate a focused page',
+  /**
+   * @description Title of a Rendering setting that can be invoked through the Command Menu.
+   */
+  doNotEmulateAFocusedPage: 'Do not emulate a focused page',
   /**
    * @description Title of the Rendering panel. The Rendering panel is a collection of settings that
    * lets the user debug the rendering (i.e. how the website is drawn onto the screen) of the
@@ -253,3 +311,102 @@ UI.Toolbar.registerToolbarItem({
   order: 97,
   location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_RIGHT,
 });
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.showPaintRectsSettingDescriptor, {
+  category: Common.Settings.SettingCategory.RENDERING,
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.showPaintFlashingRectangles),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.hidePaintFlashingRectangles),
+    },
+  ],
+});
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.showLayoutShiftRegionsSettingDescriptor, {
+  category: Common.Settings.SettingCategory.RENDERING,
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.showLayoutShiftRegions),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.hideLayoutShiftRegions),
+    },
+  ],
+});
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.showAdHighlightsSettingDescriptor, {
+  category: Common.Settings.SettingCategory.RENDERING,
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.highlightAdFrames),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.doNotHighlightAdFrames),
+    },
+  ],
+});
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.showDebugBordersSettingDescriptor, {
+  category: Common.Settings.SettingCategory.RENDERING,
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.showLayerBorders),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.hideLayerBorders),
+    },
+  ],
+});
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.showFPSCounterSettingDescriptor, {
+  category: Common.Settings.SettingCategory.RENDERING,
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.showFramesPerSecondFpsMeter),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.hideFramesPerSecondFpsMeter),
+    },
+  ],
+});
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.showScrollBottleneckRectsSettingDescriptor, {
+  category: Common.Settings.SettingCategory.RENDERING,
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.showScrollPerformanceBottlenecks),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.hideScrollPerformanceBottlenecks),
+    },
+  ],
+});
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.emulatePageFocusSettingDescriptor, {
+  category: Common.Settings.SettingCategory.RENDERING,
+  title: i18nLazyString(UIStrings.emulateAFocusedPage),
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.emulateAFocusedPage),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.doNotEmulateAFocusedPage),
+    },
+  ],
+});

package/front_end/entrypoints/main/MainImpl.ts

@@ -49,6 +49,7 @@ import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import * as Snippets from '../../panels/snippets/snippets.js';
+import type * as Comments from '../../ui/comments/comments.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbar from '../../ui/components/snackbars/snackbars.js';
 import * as UIHelpers from '../../ui/helpers/helpers.js';
@@ -998,3 +999,34 @@ export class ReloadActionDelegate implements UI.ActionRegistration.ActionDelegat
     return false;
   }
 }
+
+let activeOverlayManager: Comments.CommentOverlayManager.CommentOverlayManager|null = null;
+let activeOverlayWidget: Comments.CommentsOverlayWidget.CommentsOverlayWidget|null = null;
+
+// Temporary for manual testing and experimentation.
+export async function comments(): Promise<Comments.CommentOverlayManager.CommentOverlayManager> {
+  const Comments = await import('../../ui/comments/comments.js');
+  const CommentManager = await import('../../models/comment_manager/comment_manager.js');
+  const commentManager = CommentManager.CommentManager.CommentManager.instance();
+  if (!activeOverlayManager || !activeOverlayWidget) {
+    activeOverlayManager = new Comments.CommentOverlayManager.CommentOverlayManager(commentManager);
+    activeOverlayWidget = new Comments.CommentsOverlayWidget.CommentsOverlayWidget(activeOverlayManager);
+    activeOverlayWidget.markAsRoot();
+    activeOverlayWidget.show(document.body);
+    activeOverlayManager.start();
+    commentManager.setCommentMode(true);
+    return activeOverlayManager;
+  }
+
+  const newMode = !commentManager.isCommentMode();
+  commentManager.setCommentMode(newMode);
+  if (newMode) {
+    activeOverlayWidget.show(document.body);
+  } else {
+    activeOverlayWidget.detach();
+  }
+  return activeOverlayManager;
+}
+
+// @ts-expect-error global helper for manual testing
+globalThis.comments = comments;

package/front_end/entrypoints/shell/shell.ts

@@ -26,7 +26,6 @@ import '../../core/sdk/sdk-meta.js';
 import '../../models/workspace/workspace-meta.js';
 import '../../ui/legacy/components/source_frame/source_frame-meta.js';
 import '../../panels/console_counters/console_counters-meta.js';
-import '../../ui/legacy/components/object_ui/object_ui-meta.js';
 import '../../panels/explain/explain-meta.js';
 import '../../panels/ai_assistance/ai_assistance-meta.js';
 import '../main/main.js';

package/front_end/foundation/Universe.ts

@@ -11,6 +11,7 @@ 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 CommentManager from '../models/comment_manager/comment_manager.js';
 import * as CrUXManager from '../models/crux-manager/crux-manager.js';
 import * as Emulation from '../models/emulation/emulation.js';
 import * as IssuesManager from '../models/issues_manager/issues_manager.js';
@@ -227,6 +228,9 @@ export class Universe {
     const builtInAi = new AiAssistance.BuiltInAi.BuiltInAi();
     context.set(AiAssistance.BuiltInAi.BuiltInAi, builtInAi);
 
+    const commentManager = new CommentManager.CommentManager.CommentManager();
+    context.set(CommentManager.CommentManager.CommentManager, commentManager);
+
     this.autofillManager = new AutofillManager.AutofillManager.AutofillManager(targetManager, frameManager);
     context.set(AutofillManager.AutofillManager.AutofillManager, this.autofillManager);
   }
@@ -263,6 +267,10 @@ export class Universe {
     return this.context.get(Breakpoints.BreakpointManager.BreakpointManager);
   }
 
+  get commentManager(): CommentManager.CommentManager.CommentManager {
+    return this.context.get(CommentManager.CommentManager.CommentManager);
+  }
+
   get cpuThrottlingManager(): SDK.CPUThrottlingManager.CPUThrottlingManager {
     return this.context.get(SDK.CPUThrottlingManager.CPUThrottlingManager);
   }