chrome-devtools-frontend 1.0.1595925 → 1.0.1596535

package/.stylelintrc.json

@@ -2,11 +2,13 @@
   "extends": "stylelint-config-standard",
   "plugins": [
     "./scripts/stylelint_rules/lib/use_theme_colors.mjs",
-    "./scripts/stylelint_rules/lib/check_highlight_scope.mjs"
+    "./scripts/stylelint_rules/lib/check_highlight_scope.mjs",
+    "./scripts/stylelint_rules/lib/use_monospace_font.mjs"
   ],
   "rules": {
     "plugin/use_theme_colors": true,
     "plugin/check_highlight_scope": true,
+    "plugin/use_monospace_font": true,
     "alpha-value-notation": "percentage",
     "color-function-notation": "modern",
     "hue-degree-notation": "angle",

package/docs/ui_engineering.md

@@ -1183,42 +1183,6 @@ export const DEFAULT_VIEW = (input, _output, target) => {
 };
 ```
 
-## Migrating `UI.Fragment`
-
-Replace `UI.Fragment.Fragment.build` with a standard lit-html template. To get a reference to an element, use the `ref` directive.
-
-**Before:**
-```typescript
-
-class SomeWidget extends UI.Widget.Widget {
-  constructor() {
-    super();
-    const contrastFragment = UI.Fragment.Fragment.build`
-      <div class="contrast-container-in-grid" $="contrast-container-element">
-        <span class="contrast-preview">Aa</span>
-        <span>${contrastRatioString}</span>
-      </div>`;
-    this.contentElement.appendChild(contrastFragment.element());
-  }
-}
-```
-
-**After:**
-```typescript
-
-
-export const DEFAULT_VIEW = (input, output, target) => {
-  render(html`
-    <div>
-      <div class="contrast-container-in-grid" ${ref(e => { output.contrastContainerElement = e; })}>
-        <span class="contrast-preview">Aa</span>
-        <span>${contrastRatioString}</span>
-      </div>
-    </div>`,
-    target, {host: input});
-};
-```
-
 ## Migrating `UI.ARIAUtils` helpers
 
 Replace calls to `UI.ARIAUtils` helper functions with the corresponding ARIA attributes directly in the lit-html template.

package/front_end/core/common/Console.ts

@@ -2,24 +2,24 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Root from '../root/root.js';
+
 import {ObjectWrapper} from './Object.js';
 import {reveal} from './Revealer.js';
 
-let consoleInstance: Console|undefined;
-
 export class Console extends ObjectWrapper<EventTypes> {
   readonly #messages: Message[] = [];
 
   static instance(opts?: {forceNew: boolean}): Console {
-    if (!consoleInstance || opts?.forceNew) {
-      consoleInstance = new Console();
+    if (!Root.DevToolsContext.globalInstance().has(Console) || opts?.forceNew) {
+      Root.DevToolsContext.globalInstance().set(Console, new Console());
     }
 
-    return consoleInstance;
+    return Root.DevToolsContext.globalInstance().get(Console);
   }
 
   static removeInstance(): void {
-    consoleInstance = undefined;
+    Root.DevToolsContext.globalInstance().delete(Console);
   }
 
   /**

package/front_end/core/common/Settings.ts

@@ -22,8 +22,6 @@ import {
   SettingType,
 } from './SettingRegistration.js';
 
-let settingsInstance: Settings|undefined;
-
 export interface SettingsCreationOptions {
   syncedStorage: SettingsStorage;
   globalStorage: SettingsStorage;
@@ -85,7 +83,7 @@ export class Settings {
   }
 
   static hasInstance(): boolean {
-    return typeof settingsInstance !== 'undefined';
+    return Root.DevToolsContext.globalInstance().has(Settings);
   }
 
   static instance(opts: {
@@ -107,20 +105,26 @@ export class Settings {
       logSettingAccess,
       runSettingsMigration
     } = opts;
-    if (!settingsInstance || forceNew) {
+    if (!Root.DevToolsContext.globalInstance().has(Settings) || forceNew) {
       if (!syncedStorage || !globalStorage || !localStorage || !settingRegistrations) {
         throw new Error(`Unable to create settings: global and local storage must be provided: ${new Error().stack}`);
       }
 
-      settingsInstance = new Settings(
-          {syncedStorage, globalStorage, localStorage, settingRegistrations, logSettingAccess, runSettingsMigration});
+      Root.DevToolsContext.globalInstance().set(Settings, new Settings({
+                                                  syncedStorage,
+                                                  globalStorage,
+                                                  localStorage,
+                                                  settingRegistrations,
+                                                  logSettingAccess,
+                                                  runSettingsMigration
+                                                }));
     }
 
-    return settingsInstance;
+    return Root.DevToolsContext.globalInstance().get(Settings);
   }
 
   static removeInstance(): void {
-    settingsInstance = undefined;
+    Root.DevToolsContext.globalInstance().delete(Settings);
   }
 
   private registerModuleSetting(setting: Setting<unknown>): void {

package/front_end/core/host/UserMetrics.ts

@@ -822,7 +822,6 @@ export enum DevtoolsExperiments {
   'authored-deployed-grouping' = 63,
   'just-my-code' = 65,
   'use-source-map-scopes' = 76,
-  'timeline-show-postmessage-events' = 86,
   'timeline-debug-mode' = 93,
   'durable-messages' = 110,
   'jpeg-xl' = 111,

package/front_end/core/root/DevToolsContext.ts

@@ -11,7 +11,14 @@ export type ConstructorT<T> = new (...args: any[]) => T;
  * via constructor, and not just pass a {@link DevToolsContext} around. That would hide
  * dependencies and we want to be explicit.
  */
-export class DevToolsContext {
+export interface DevToolsContext {
+  get<T>(ctor: ConstructorT<T>): T;
+}
+
+/**
+ * The actual implementation. Should only be accessed by test-setup code or the bootstrapper.
+ */
+export class WritableDevToolsContext implements DevToolsContext {
   readonly #instances = new Map<ConstructorT<unknown>, unknown>();
 
   get<T>(ctor: ConstructorT<T>): T {
@@ -28,8 +35,7 @@ export class DevToolsContext {
   }
 
   /**
-   * @deprecated Should only be used by existing `instance` accessors and the bootstrapper.
-   * Exists on the public interface only for migration purposes for now.
+   * Should only be used by existing `instance` accessors and the bootstrapper.
    */
   set<T>(ctor: ConstructorT<T>, instance: T): void {
     // TODO(crbug.com/458180550): We need to throw here if an instance was already set!
@@ -42,16 +48,16 @@ export class DevToolsContext {
   }
 }
 
-let gInstance: DevToolsContext|null = null;
+let gInstance: WritableDevToolsContext|null = null;
 
 /**
  * @deprecated Exists to migrate instance() methods.
  */
-export function globalInstance(): DevToolsContext {
+export function globalInstance(): WritableDevToolsContext {
   if (!gInstance) {
     // TODO(crbug.com/458180550): This should really throw to prevent side-effects and globals
     //                            from leaking all over the place.
-    gInstance = new DevToolsContext();
+    gInstance = new WritableDevToolsContext();
   }
   return gInstance;
 }
@@ -59,6 +65,6 @@ export function globalInstance(): DevToolsContext {
 /**
  * @deprecated Should only be called by test setup and MainImpl
  */
-export function setGlobalInstance(context: DevToolsContext|null): void {
+export function setGlobalInstance(context: WritableDevToolsContext|null): void {
   gInstance = context;
 }

package/front_end/core/root/ExperimentNames.ts

@@ -20,7 +20,6 @@ export enum ExperimentName {
   AUTHORED_DEPLOYED_GROUPING = 'authored-deployed-grouping',
   JUST_MY_CODE = 'just-my-code',
   USE_SOURCE_MAP_SCOPES = 'use-source-map-scopes',
-  TIMELINE_SHOW_POST_MESSAGE_EVENTS = 'timeline-show-postmessage-events',
   TIMELINE_DEBUG_MODE = 'timeline-debug-mode',
   DURABLE_MESSAGES = 'durable-messages',
   JPEG_XL = 'jpeg-xl',

package/front_end/core/sdk/CPUThrottlingManager.ts

@@ -39,24 +39,27 @@ let throttlingManagerInstance: CPUThrottlingManager;
 
 export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     SDKModelObserver<EmulationModel> {
+  readonly #targetManager: TargetManager;
   #cpuThrottlingOption: CPUThrottlingOption;
   #calibratedThrottlingSetting: Common.Settings.Setting<CalibratedCPUThrottling>;
   #hardwareConcurrency?: number;
   #pendingMainTargetPromise?: (r: number) => void;
 
-  private constructor() {
+  private constructor(settings: Common.Settings.Settings, targetManager: TargetManager) {
     super();
+    this.#targetManager = targetManager;
     this.#cpuThrottlingOption = NoThrottlingOption;
-    this.#calibratedThrottlingSetting = Common.Settings.Settings.instance().createSetting<CalibratedCPUThrottling>(
+    this.#calibratedThrottlingSetting = settings.createSetting<CalibratedCPUThrottling>(
         'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
     this.#calibratedThrottlingSetting.addChangeListener(this.#onCalibratedSettingChanged, this);
-    TargetManager.instance().observeModels(EmulationModel, this);
+    targetManager.observeModels(EmulationModel, this);
   }
 
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): CPUThrottlingManager {
     const {forceNew} = opts;
     if (!throttlingManagerInstance || forceNew) {
-      throttlingManagerInstance = new CPUThrottlingManager();
+      throttlingManagerInstance =
+          new CPUThrottlingManager(Common.Settings.Settings.instance(), TargetManager.instance());
     }
 
     return throttlingManagerInstance;
@@ -84,7 +87,7 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
       return;
     }
 
-    for (const emulationModel of TargetManager.instance().models(EmulationModel)) {
+    for (const emulationModel of this.#targetManager.models(EmulationModel)) {
       void emulationModel.setCPUThrottlingRate(rate);
     }
     this.dispatchEventToListeners(Events.RATE_CHANGED, rate);
@@ -96,7 +99,7 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
     }
 
     this.#cpuThrottlingOption = option;
-    for (const emulationModel of TargetManager.instance().models(EmulationModel)) {
+    for (const emulationModel of this.#targetManager.models(EmulationModel)) {
       void emulationModel.setCPUThrottlingRate(this.#cpuThrottlingOption.rate());
     }
     this.dispatchEventToListeners(Events.RATE_CHANGED, this.#cpuThrottlingOption.rate());
@@ -104,7 +107,7 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
 
   setHardwareConcurrency(concurrency: number): void {
     this.#hardwareConcurrency = concurrency;
-    for (const emulationModel of TargetManager.instance().models(EmulationModel)) {
+    for (const emulationModel of this.#targetManager.models(EmulationModel)) {
       void emulationModel.setHardwareConcurrency(concurrency);
     }
     this.dispatchEventToListeners(Events.HARDWARE_CONCURRENCY_CHANGED, this.#hardwareConcurrency);
@@ -115,14 +118,14 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
     // target may error. So if we get any errors here at all, assume that we do
     // not have a target.
     try {
-      return TargetManager.instance().primaryPageTarget() !== null;
+      return this.#targetManager.primaryPageTarget() !== null;
     } catch {
       return false;
     }
   }
 
   async getHardwareConcurrency(): Promise<number> {
-    const target = TargetManager.instance().primaryPageTarget();
+    const target = this.#targetManager.primaryPageTarget();
     const existingCallback = this.#pendingMainTargetPromise;
 
     // If the main target hasn't attached yet, block callers until it appears.

package/front_end/core/sdk/DOMModel.ts

@@ -1223,6 +1223,122 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
     return this.domModel().nodeForId(response.nodeId);
   }
 
+  async takeSnapshot(ownerDocumentSnapshot?: DOMDocument): Promise<DOMNode> {
+    const snapshot = (this instanceof DOMDocument) ? new DOMDocumentSnapshot(this.domModel(), {
+      nodeId: this.id,
+      backendNodeId: this.backendNodeId(),
+      nodeType: this.nodeType(),
+      nodeName: this.nodeName(),
+      localName: this.localName(),
+      nodeValue: this.nodeValueInternal,
+    } as Protocol.DOM.Node) :
+                                                     new DOMNodeSnapshot(this.domModel());
+    snapshot.id = this.id;
+    snapshot.#backendNodeId = this.#backendNodeId;
+    snapshot.#frameOwnerFrameId = this.#frameOwnerFrameId;
+    snapshot.#nodeType = this.#nodeType;
+    snapshot.#nodeName = this.#nodeName;
+    snapshot.#localName = this.#localName;
+    snapshot.nodeValueInternal = this.nodeValueInternal;
+    snapshot.#pseudoType = this.#pseudoType;
+    snapshot.#pseudoIdentifier = this.#pseudoIdentifier;
+    snapshot.#shadowRootType = this.#shadowRootType;
+    snapshot.#xmlVersion = this.#xmlVersion;
+    snapshot.#isSVGNode = this.#isSVGNode;
+    snapshot.#isScrollable = this.#isScrollable;
+    snapshot.#affectedByStartingStyles = this.#affectedByStartingStyles;
+    snapshot.ownerDocument =
+        ownerDocumentSnapshot || ((snapshot instanceof DOMDocument) ? snapshot : this.ownerDocument);
+    snapshot.#isInShadowTree = this.#isInShadowTree;
+    snapshot.childNodeCountInternal = this.childNodeCountInternal;
+
+    if (snapshot instanceof DOMDocument && this instanceof DOMDocument) {
+      snapshot.documentURL = this.documentURL;
+      snapshot.baseURL = this.baseURL;
+    }
+
+    if (!this.childrenInternal && this.childNodeCountInternal > 0) {
+      await this.getSubtree(1, false);
+    }
+
+    for (const [name, attr] of this.#attributes) {
+      snapshot.#attributes.set(name, {name: attr.name, value: attr.value, _node: snapshot});
+    }
+
+    if (this.childrenInternal) {
+      snapshot.childrenInternal = [];
+      for (const child of this.childrenInternal) {
+        const childSnapshot = await child.takeSnapshot(snapshot.ownerDocument || undefined);
+        childSnapshot.parentNode = snapshot;
+        childSnapshot.ownerDocument = (snapshot instanceof DOMDocument) ? snapshot : snapshot.ownerDocument;
+        snapshot.childrenInternal.push(childSnapshot);
+        if (childSnapshot.ownerDocument instanceof DOMDocument) {
+          if (childSnapshot.nodeName() === 'HTML' && !childSnapshot.ownerDocument.documentElement) {
+            childSnapshot.ownerDocument.documentElement = childSnapshot;
+          }
+          if (childSnapshot.nodeName() === 'BODY' && !childSnapshot.ownerDocument.body) {
+            childSnapshot.ownerDocument.body = childSnapshot;
+          }
+        }
+      }
+    }
+
+    for (const root of this.shadowRootsInternal) {
+      const rootSnapshot = await root.takeSnapshot(snapshot.ownerDocument || undefined);
+      rootSnapshot.parentNode = snapshot;
+      rootSnapshot.ownerDocument = snapshot.ownerDocument;
+      snapshot.shadowRootsInternal.push(rootSnapshot);
+    }
+
+    if (this.templateContentInternal) {
+      const templateSnapshot = await this.templateContentInternal.takeSnapshot(snapshot.ownerDocument || undefined);
+      templateSnapshot.parentNode = snapshot;
+      templateSnapshot.ownerDocument = snapshot.ownerDocument;
+      snapshot.templateContentInternal = templateSnapshot;
+    }
+
+    if (this.contentDocumentInternal) {
+      const contentDocSnapshot = await this.contentDocumentInternal.takeSnapshot();
+      contentDocSnapshot.parentNode = snapshot;
+      snapshot.contentDocumentInternal = contentDocSnapshot as DOMDocumentSnapshot;
+    }
+
+    if (this.#importedDocument) {
+      const importedDocSnapshot = await this.#importedDocument.takeSnapshot(snapshot.ownerDocument || undefined);
+      importedDocSnapshot.parentNode = snapshot;
+      importedDocSnapshot.ownerDocument = snapshot.ownerDocument;
+      snapshot.#importedDocument = importedDocSnapshot;
+    }
+
+    for (const [pseudoType, nodes] of this.#pseudoElements) {
+      const snapshots = [];
+      for (const node of nodes) {
+        const pseudoSnapshot = await node.takeSnapshot(snapshot.ownerDocument || undefined);
+        pseudoSnapshot.parentNode = snapshot;
+        pseudoSnapshot.ownerDocument = snapshot.ownerDocument;
+        snapshots.push(pseudoSnapshot);
+      }
+      snapshot.#pseudoElements.set(pseudoType, snapshots);
+    }
+
+    // We intentionally preserve references to live nodes for assignedSlot and distributedNodes.
+    // This allows slot adorners in the Elements panel to remain functional within the snapshot,
+    // enabling users to resolve and jump to the actual nodes in the live DOM tree.
+    if (this.#distributedNodes) {
+      snapshot.#distributedNodes = [...this.#distributedNodes];
+    }
+
+    snapshot.assignedSlot = this.assignedSlot;
+
+    snapshot.#retainedNodes = this.#retainedNodes;
+
+    if (this.#adoptedStyleSheets.length) {
+      snapshot.setAdoptedStyleSheets(this.#adoptedStyleSheets.map(sheet => sheet.id));
+    }
+
+    return snapshot;
+  }
+
   classNames(): string[] {
     const classes = this.getAttribute('class');
     return classes ? classes.split(/\s+/) : [];
@@ -2176,6 +2292,96 @@ export class DOMModelUndoStack {
 }
 
 SDKModel.register(DOMModel, {capabilities: Capability.DOM, autostart: true});
+export class DOMNodeSnapshot extends DOMNode {
+  override init(
+      _doc: DOMDocument|null, _isInShadowTree: boolean, _payload: Protocol.DOM.Node,
+      _retainedNodes?: Set<Protocol.DOM.BackendNodeId>|undefined): void {
+  }
+
+  override setNodeName(_name: string, _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
+  }
+
+  override setNodeValue(_value: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override setAttribute(_name: string, _text: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override setAttributeValue(_name: string, _value: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override removeAttribute(_name: string): Promise<void> {
+    return Promise.resolve();
+  }
+
+  override setOuterHTML(_html: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override removeNode(_callback?: ((arg0: string|null, arg1?: Protocol.DOM.NodeId|undefined) => void)|undefined):
+      Promise<void> {
+    return Promise.resolve();
+  }
+
+  override copyTo(
+      _targetNode: DOMNode, _anchorNode: DOMNode|null,
+      _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
+  }
+
+  override moveTo(
+      _targetNode: DOMNode, _anchorNode: DOMNode|null,
+      _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
+  }
+
+  override setAsInspectedNode(): Promise<void> {
+    return Promise.resolve();
+  }
+}
+
+export class DOMDocumentSnapshot extends DOMDocument {
+  override init(
+      _doc: DOMDocument|null, _isInShadowTree: boolean, _payload: Protocol.DOM.Node,
+      _retainedNodes?: Set<Protocol.DOM.BackendNodeId>|undefined): void {
+  }
+
+  override setNodeName(_name: string, _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
+  }
+
+  override setNodeValue(_value: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override setAttribute(_name: string, _text: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override setAttributeValue(_name: string, _value: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override removeAttribute(_name: string): Promise<void> {
+    return Promise.resolve();
+  }
+
+  override setOuterHTML(_html: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override removeNode(_callback?: ((arg0: string|null, arg1?: Protocol.DOM.NodeId|undefined) => void)|undefined):
+      Promise<void> {
+    return Promise.resolve();
+  }
+
+  override copyTo(
+      _targetNode: DOMNode, _anchorNode: DOMNode|null,
+      _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
+  }
+
+  override moveTo(
+      _targetNode: DOMNode, _anchorNode: DOMNode|null,
+      _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
+  }
+
+  override setAsInspectedNode(): Promise<void> {
+    return Promise.resolve();
+  }
+}
+
 export interface Attribute {
   name: string;
   value: string;

package/front_end/core/sdk/FrameManager.ts

@@ -4,14 +4,13 @@
 
 import type * as Protocol from '../../generated/protocol.js';
 import * as Common from '../common/common.js';
+import * as Root from '../root/root.js';
 
 import type {Resource} from './Resource.js';
 import {Events as ResourceTreeModelEvents, type ResourceTreeFrame, ResourceTreeModel} from './ResourceTreeModel.js';
 import type {Target} from './Target.js';
 import {type SDKModelObserver, TargetManager} from './TargetManager.js';
 
-let frameManagerInstance: FrameManager|null = null;
-
 /**
  * The FrameManager is a central storage for all #frames. It collects #frames from all
  * ResourceTreeModel-instances (one per target), so that #frames can be found by id
@@ -37,22 +36,22 @@ export class FrameManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }>();
   #awaitedFrames = new Map<string, Array<{resolve: (frame: ResourceTreeFrame) => void, notInTarget?: Target}>>();
 
-  constructor() {
+  constructor(targetManager: TargetManager) {
     super();
-    TargetManager.instance().observeModels(ResourceTreeModel, this);
+    targetManager.observeModels(ResourceTreeModel, this);
   }
 
   static instance({forceNew}: {
     forceNew: boolean,
   } = {forceNew: false}): FrameManager {
-    if (!frameManagerInstance || forceNew) {
-      frameManagerInstance = new FrameManager();
+    if (!Root.DevToolsContext.globalInstance().has(FrameManager) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(FrameManager, new FrameManager(TargetManager.instance()));
     }
-    return frameManagerInstance;
+    return Root.DevToolsContext.globalInstance().get(FrameManager);
   }
 
   static removeInstance(): void {
-    frameManagerInstance = null;
+    Root.DevToolsContext.globalInstance().delete(FrameManager);
   }
 
   modelAdded(resourceTreeModel: ResourceTreeModel): void {

package/front_end/core/sdk/SourceMapScopesInfo.ts

@@ -418,7 +418,7 @@ export class SourceMapScopesInfo {
    * Returns the authored function name of the function containing the provided generated position.
    */
   findOriginalFunctionName(position: ScopesCodec.Position): string|null {
-    const originalInnerMostScope = this.findOriginalFunctionScope(position)?.scope ?? undefined;
+    const originalInnerMostScope = this.findOriginalFunctionScope(position)?.scope;
     return this.#findFunctionNameInOriginalScopeChain(originalInnerMostScope);
   }
 

package/front_end/entrypoints/greendev_floaty/FloatyEntrypoint.ts

@@ -431,7 +431,7 @@ async function init(): Promise<void> {
         settingRegistrations: Common.SettingRegistration.getRegisteredSettings(),
       }
     });
-    Root.DevToolsContext.setGlobalInstance(universe.context);
+    Root.DevToolsContext.setGlobalInstance(universe.context as Root.DevToolsContext.WritableDevToolsContext);
 
     await i18n.i18n.fetchAndRegisterLocaleData('en-US');
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.connectionReady();

package/front_end/entrypoints/greendev_floaty/floaty.css

@@ -134,7 +134,7 @@ html, body {
   margin-top: 8px;
   padding-top: 8px;
   border-top: 1px solid #eee;
-  font-family: monospace;
+  font-family: var(--monospace-font-family);
 }
 
 .thought, .action {
@@ -186,7 +186,7 @@ html, body {
 
 .green-dev-floaty-dialog-node-description {
   font-size: 11px;
-  font-family: monospace;
+  font-family: var(--monospace-font-family);
   color: #0b57d0;
   background-color: #d3e3fd;
   padding: 2px 8px;

package/front_end/entrypoints/main/MainImpl.ts

@@ -201,7 +201,7 @@ export class MainImpl {
       },
     };
     this.#universe = new Foundation.Universe.Universe(creationOptions);
-    Root.DevToolsContext.setGlobalInstance(this.#universe.context);
+    Root.DevToolsContext.setGlobalInstance(this.#universe.context as Root.DevToolsContext.WritableDevToolsContext);
 
     await this.requestAndRegisterLocaleData();
 
@@ -413,11 +413,6 @@ export class MainImpl {
     Root.Runtime.experiments.register(
         Root.ExperimentNames.ExperimentName.JUST_MY_CODE, 'Hide ignore-listed code in Sources tree view');
 
-    Root.Runtime.experiments.register(
-        Root.ExperimentNames.ExperimentName.TIMELINE_SHOW_POST_MESSAGE_EVENTS,
-        'Performance panel: show postMessage dispatch and handling flows',
-    );
-
     Root.Runtime.experiments.registerHostExperiment({
       name: Root.ExperimentNames.ExperimentName.DURABLE_MESSAGES,
       title: 'Durable Messages',
@@ -493,7 +488,6 @@ export class MainImpl {
 
     // These instances need to be created early so they don't miss any events about requests/issues/etc.
     Logs.NetworkLog.NetworkLog.instance();
-    SDK.FrameManager.FrameManager.instance();
     Logs.LogManager.LogManager.instance();
     IssuesManager.IssuesManager.IssuesManager.instance({
       forceNew: true,