Add conditional disabling of unsafe multi host features

Author: huntie

config/gni/devtools_grd_files.gni

@@ -995,7 +995,7 @@ grd_files_debug_sources = [
   "front_end/entrypoints/node_app/NodeMain.js",
   "front_end/entrypoints/node_app/nodeConnectionsPanel.css.js",
   "front_end/entrypoints/rn_fusebox/FuseboxAppMetadataObserver.js",
-  "front_end/entrypoints/rn_fusebox/FuseboxExperimentsObserver.js",
+  "front_end/entrypoints/rn_fusebox/FuseboxFeatureObserver.js",
   "front_end/entrypoints/rn_fusebox/FuseboxReconnectDeviceButton.js",
   "front_end/entrypoints/rn_fusebox/FuseboxWindowTitleManager.js",
   "front_end/entrypoints/shell/browser_compatibility_guard.js",

front_end/core/sdk/ReactNativeApplicationModel.ts

@@ -52,17 +52,23 @@ export class ReactNativeApplicationModel extends SDKModel<EventTypes> implements
     this.dispatchEventToListeners(Events.METADATA_UPDATED, metadata);
   }
 
+  systemStateChanged(params: Protocol.ReactNativeApplication.SystemStateChangedEvent): void {
+    this.dispatchEventToListeners(Events.SYSTEM_STATE_CHANGED, params);
+  }
+
   traceRequested(): void {
     this.dispatchEventToListeners(Events.TRACE_REQUESTED);
   }
 }
 
 export const enum Events {
   METADATA_UPDATED = 'MetadataUpdated',
+  SYSTEM_STATE_CHANGED = 'SystemStateChanged',
   TRACE_REQUESTED = 'TraceRequested',
 }
 
 export interface EventTypes {
   [Events.METADATA_UPDATED]: Protocol.ReactNativeApplication.MetadataUpdatedEvent;
+  [Events.SYSTEM_STATE_CHANGED]: Protocol.ReactNativeApplication.SystemStateChangedEvent;
   [Events.TRACE_REQUESTED]: void;
 }

front_end/entrypoints/rn_fusebox/BUILD.gn

@@ -11,7 +11,7 @@ devtools_module("rn_fusebox") {
   sources = [
     "FuseboxAppMetadataObserver.ts",
     "FuseboxReconnectDeviceButton.ts",
-    "FuseboxExperimentsObserver.ts",
+    "FuseboxFeatureObserver.ts",
     "FuseboxWindowTitleManager.ts",
   ]
 

…rn_fusebox/FuseboxExperimentsObserver.ts …nts/rn_fusebox/FuseboxFeatureObserver.tsfront_end/entrypoints/rn_fusebox/FuseboxExperimentsObserver.ts renamed to front_end/entrypoints/rn_fusebox/FuseboxFeatureObserver.ts front_end/entrypoints/rn_fusebox/FuseboxExperimentsObserver.ts renamed to front_end/entrypoints/rn_fusebox/FuseboxFeatureObserver.ts

@@ -17,14 +17,31 @@ const UIStrings = {
    * @description Message for the "settings changed" banner shown when a reload is required for the Network panel.
    */
   reloadRequiredForNetworkPanelMessage: 'The Network panel is now available for dogfooding. Please reload to access it.',
+  /**
+   * @description Title shown when a feature is disabled due to multiple React Native hosts.
+   */
+  multiHostFeatureDisabledTitle: 'Feature disabled',
+  /**
+   * @description Detail message shown when a feature is disabled due to multiple React Native hosts.
+   */
+  multiHostFeatureDisabledDetail: 'This feature is disabled as the app or framework has configured multiple React Native hosts, which we do not yet support safely.',
 } as const;
 
-const str_ = i18n.i18n.registerUIStrings('entrypoints/rn_fusebox/FuseboxExperimentsObserver.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('entrypoints/rn_fusebox/FuseboxFeatureObserver.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 /**
- * [Experimental] Model observer which configures available DevTools features
- * based on the target's capabilities, e.g. when a profiling build is identified, or when network inspection is supported.
+ * The set of features that are not guaranteed to behave safely with multiple
+ * React Native hosts.
+ */
+const UNSAFE_MULTI_HOST_FEATURES = new Set([
+  'network',
+  'timeline',
+]);
+
+/**
+ * [RN] Model observer which configures available DevTools features and
+ * experiments based on the target's capabilities.
  */
 export class FuseboxFeatureObserver implements
     SDK.TargetManager.SDKModelObserver<SDK.ReactNativeApplicationModel.ReactNativeApplicationModel> {
@@ -35,11 +52,14 @@ export class FuseboxFeatureObserver implements
   modelAdded(model: SDK.ReactNativeApplicationModel.ReactNativeApplicationModel): void {
     model.ensureEnabled();
     model.addEventListener(SDK.ReactNativeApplicationModel.Events.METADATA_UPDATED, this.#handleMetadataUpdated, this);
+    model.addEventListener(SDK.ReactNativeApplicationModel.Events.SYSTEM_STATE_CHANGED, this.#handleSystemStateChanged, this);
   }
 
   modelRemoved(model: SDK.ReactNativeApplicationModel.ReactNativeApplicationModel): void {
     model.removeEventListener(
         SDK.ReactNativeApplicationModel.Events.METADATA_UPDATED, this.#handleMetadataUpdated, this);
+    model.removeEventListener(
+        SDK.ReactNativeApplicationModel.Events.SYSTEM_STATE_CHANGED, this.#handleSystemStateChanged, this);
   }
 
   #handleMetadataUpdated(
@@ -57,6 +77,14 @@ export class FuseboxFeatureObserver implements
     }
   }
 
+  #handleSystemStateChanged(
+      event: Common.EventTarget.EventTargetEvent<Protocol.ReactNativeApplication.SystemStateChangedEvent>): void {
+    const {isSingleHost} = event.data;
+    if (!isSingleHost) {
+      this.#disableSingleHostOnlyFeatures();
+    }
+  }
+
   #hideUnsupportedFeaturesForProfilingBuilds(): void {
     UI.InspectorView.InspectorView.instance().closeDrawer();
 
@@ -85,6 +113,43 @@ export class FuseboxFeatureObserver implements
       });
   }
 
+  #disableSingleHostOnlyFeatures(): void {
+    // Disable relevant CDP domains
+    const targetManager = SDK.TargetManager.TargetManager.instance();
+    for (const target of targetManager.targets()) {
+      void target.networkAgent().invoke_disable();
+    }
+
+    const viewManager = UI.ViewManager.ViewManager.instance();
+    const panelLocationPromise = viewManager.resolveLocation(UI.ViewManager.ViewLocationValues.PANEL);
+
+    // Replace disabled panels with an empty widget
+    void panelLocationPromise.then(panelLocation => {
+      UI.ViewManager.getRegisteredViewExtensions().forEach(view => {
+        if (UNSAFE_MULTI_HOST_FEATURES.has(view.viewId())) {
+          panelLocation?.removeView(view);
+          const originalViewId = view.viewId();
+          const originalTitle = view.title();
+
+          UI.ViewManager.registerViewExtension({
+            location: UI.ViewManager.ViewLocationValues.PANEL,
+            id: `${originalViewId}-disabled` as Lowercase<string>,
+            commandPrompt: view.commandPrompt,
+            title: () => originalTitle,
+            order: view.order(),
+            persistence: view.persistence(),
+            async loadView() {
+              return new UI.EmptyWidget.EmptyWidget(
+                i18nString(UIStrings.multiHostFeatureDisabledTitle),
+                i18nString(UIStrings.multiHostFeatureDisabledDetail),
+              );
+            },
+          });
+        }
+      });
+    });
+  }
+
   #ensureNetworkPanelEnabled(): void {
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.ENABLE_NETWORK_PANEL)) {
       return;

front_end/entrypoints/rn_fusebox/rn_fusebox.ts

@@ -27,7 +27,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as Main from '../main/main.js';
 
 import * as FuseboxAppMetadataObserverModule from './FuseboxAppMetadataObserver.js';
-import * as FuseboxFeatureObserverModule from './FuseboxExperimentsObserver.js';
+import * as FuseboxFeatureObserverModule from './FuseboxFeatureObserver.js';
 import * as FuseboxReconnectDeviceButtonModule from './FuseboxReconnectDeviceButton.js';
 
 // To ensure accurate timing measurements, please make sure these perf metrics

front_end/generated/InspectorBackendCommands.js

@@ -17,6 +17,10 @@ export namespace ProtocolMapping {
      * device, application, and debugger integration.
      */
     'ReactNativeApplication.metadataUpdated': [Protocol.ReactNativeApplication.MetadataUpdatedEvent];
+    /**
+     * Emitted when assertions about the debugger backend have changed.
+     */
+    'ReactNativeApplication.systemStateChanged': [Protocol.ReactNativeApplication.SystemStateChangedEvent];
     /**
      * Fired when React Native requests Chrome DevTools to prepare for displaying the captured Trace.
      */

front_end/generated/protocol-mapping.d.ts

@@ -255,6 +255,11 @@ declare namespace ProtocolProxyApi {
      */
     metadataUpdated(params: Protocol.ReactNativeApplication.MetadataUpdatedEvent): void;
 
+    /**
+     * Emitted when assertions about the debugger backend have changed.
+     */
+    systemStateChanged(params: Protocol.ReactNativeApplication.SystemStateChangedEvent): void;
+
     /**
      * Fired when React Native requests Chrome DevTools to prepare for displaying the captured Trace.
      */

front_end/generated/protocol-proxy-api.d.ts

@@ -62,6 +62,18 @@ export namespace ReactNativeApplication {
      */
     unstable_networkInspectionEnabled?: boolean;
   }
+
+  /**
+   * Emitted when assertions about the debugger backend have changed.
+   */
+  export interface SystemStateChangedEvent {
+    /**
+     * Whether the application has a single React Native host. If an app or
+     * framework intantiates multiple hosts, some debugger features will not
+     * behave safely and should be dynamically disabled.
+     */
+    isSingleHost: boolean;
+  }
 }
 
 export namespace Accessibility {

front_end/generated/protocol.ts

@@ -72,6 +72,17 @@
                         }
                     ]
                 },
+                {
+                    "name": "systemStateChanged",
+                    "description": "Emitted when assertions about the debugger backend have changed.",
+                    "parameters": [
+                        {
+                            "name": "isSingleHost",
+                            "description": "Whether the application has a single React Native host. If an app or\nframework intantiates multiple hosts, some debugger features will not\n behave safely and should be dynamically disabled.",
+                            "type": "boolean"
+                        }
+                    ]
+                },
                 {
                     "name": "traceRequested",
                     "description": "Fired when React Native requests Chrome DevTools to prepare for displaying the captured Trace."
@@ -32027,4 +32038,4 @@
             ]
         }
     ]
-}
+}