Add support for reading network panel metadata from the target (#146)

Author: EdmondChuiHW

config/gni/devtools_grd_files.gni

@@ -891,7 +891,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/FuseboxProfilingBuildObserver.js",
+  "front_end/entrypoints/rn_fusebox/FuseboxExperimentsObserver.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/rn_experiments/experimentsImpl.ts

@@ -191,3 +191,10 @@ Instance.register({
   unstable: true,
   enabledByDefault: ({ isReactNativeEntryPoint }) => !isReactNativeEntryPoint,
 });
+
+Instance.register({
+  name: RNExperimentName.ENABLE_NETWORK_PANEL,
+  title: 'Enable Network panel',
+  unstable: true,
+  enabledByDefault: () => false,
+});

front_end/core/root/Runtime.ts

@@ -280,6 +280,7 @@ export enum RNExperimentName {
   REACT_NATIVE_SPECIFIC_UI = 'react-native-specific-ui',
   JS_HEAP_PROFILER_ENABLE = 'js-heap-profiler-enable',
   ENABLE_PERFORMANCE_PANEL = 'enable-performance-panel',
+  ENABLE_NETWORK_PANEL = 'enable-network-panel',
 }
 
 // TODO(crbug.com/1167717): Make this a const enum again
@@ -320,6 +321,7 @@ export const enum ExperimentName {
   JS_HEAP_PROFILER_ENABLE = RNExperimentName.JS_HEAP_PROFILER_ENABLE,
   REACT_NATIVE_SPECIFIC_UI = RNExperimentName.REACT_NATIVE_SPECIFIC_UI,
   ENABLE_PERFORMANCE_PANEL = RNExperimentName.ENABLE_PERFORMANCE_PANEL,
+  ENABLE_NETWORK_PANEL = RNExperimentName.ENABLE_NETWORK_PANEL,
 }
 
 export interface HostConfigConsoleInsights {
@@ -362,5 +364,7 @@ export type Condition = (config?: HostConfig) => boolean;
 export const conditions = {
   canDock: () => Boolean(Runtime.queryParam('can_dock')),
   notSourcesHideAddFolder: () => Boolean(Runtime.queryParam(ConditionName.NOT_SOURCES_HIDE_ADD_FOLDER)),
-  reactNativeUnstableNetworkPanel: () => Boolean(Runtime.queryParam(ConditionName.REACT_NATIVE_UNSTABLE_NETWORK_PANEL)),
+  reactNativeUnstableNetworkPanel: () =>
+      Boolean(Runtime.queryParam(ConditionName.REACT_NATIVE_UNSTABLE_NETWORK_PANEL)) ||
+      experiments.isEnabled(ExperimentName.ENABLE_NETWORK_PANEL),
 };

front_end/entrypoints/rn_fusebox/BUILD.gn

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

…fusebox/FuseboxProfilingBuildObserver.ts …rn_fusebox/FuseboxExperimentsObserver.tsfront_end/entrypoints/rn_fusebox/FuseboxProfilingBuildObserver.ts renamed to front_end/entrypoints/rn_fusebox/FuseboxExperimentsObserver.ts front_end/entrypoints/rn_fusebox/FuseboxProfilingBuildObserver.ts renamed to front_end/entrypoints/rn_fusebox/FuseboxExperimentsObserver.ts

@@ -13,19 +13,24 @@ import FuseboxWindowTitleManager from './FuseboxWindowTitleManager.js';
 
 const UIStrings = {
   /**
-   * @description Message for the "settings changed" banner shown when a reload is required.
+   * @description Message for the "settings changed" banner shown when a reload is required for the Performance panel.
    */
-  reloadRequiredMessage: '[Profiling build first run] One or more settings have changed. Please reload to access the Performance panel.',
+  reloadRequiredForPerformancePanelMessage:
+      '[Profiling build first run] One or more settings have changed. Please reload to access the Performance panel.',
+  /**
+   * @description Message for the "settings changed" banner shown when a reload is required for the Network panel.
+   */
+  reloadRequiredForNetworkPanelMessage: 'Network panel is now available for dogfooding. Please reload to access it.',
 };
 
-const str_ = i18n.i18n.registerUIStrings('entrypoints/rn_fusebox/FuseboxProfilingBuildModeObserver.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('entrypoints/rn_fusebox/FuseboxExperimentsObserver.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 /**
  * [Experimental] Model observer which configures available DevTools features
- * when a profiling build is identified.
+ * based on the target's capabilities, e.g. when a profiling build is identified, or when network inspection is supported.
  */
-export default class FuseboxProfilingBuildObserver implements
+export default class FuseboxFeatureObserver implements
     SDK.TargetManager.SDKModelObserver<SDK.ReactNativeApplicationModel.ReactNativeApplicationModel> {
   constructor(targetManager: SDK.TargetManager.TargetManager) {
     targetManager.observeModels(SDK.ReactNativeApplicationModel.ReactNativeApplicationModel, this);
@@ -43,16 +48,20 @@ export default class FuseboxProfilingBuildObserver implements
 
   #handleMetadataUpdated(
       event: Common.EventTarget.EventTargetEvent<Protocol.ReactNativeApplication.MetadataUpdatedEvent>): void {
-    const {unstable_isProfilingBuild} = event.data;
+    const {unstable_isProfilingBuild, unstable_networkInspectionEnabled} = event.data;
 
     if (unstable_isProfilingBuild) {
       FuseboxWindowTitleManager.instance().setSuffix('[PROFILING]');
-      this.#hideUnsupportedFeatures();
+      this.#hideUnsupportedFeaturesForProfilingBuilds();
       this.#ensurePerformancePanelEnabled();
     }
+
+    if (unstable_networkInspectionEnabled) {
+      this.#ensureNetworkPanelEnabled();
+    }
   }
 
-  #hideUnsupportedFeatures(): void {
+  #hideUnsupportedFeaturesForProfilingBuilds(): void {
     UI.ViewManager.ViewManager.instance()
       .resolveLocation(UI.ViewManager.ViewLocationValues.PANEL)
       .then(location => {
@@ -83,9 +92,24 @@ export default class FuseboxProfilingBuildObserver implements
       const inspectorView = UI.InspectorView?.InspectorView?.instance();
       if (inspectorView) {
         inspectorView.displayReloadRequiredWarning(
-          i18nString(UIStrings.reloadRequiredMessage),
+            i18nString(UIStrings.reloadRequiredForPerformancePanelMessage),
         );
       }
     }
   }
+
+  #ensureNetworkPanelEnabled(): void {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.ENABLE_NETWORK_PANEL)) {
+      return;
+    }
+
+    Root.Runtime.experiments.setEnabled(
+        Root.Runtime.ExperimentName.ENABLE_NETWORK_PANEL,
+        true,
+    );
+
+    UI.InspectorView?.InspectorView?.instance()?.displayReloadRequiredWarning(
+        i18nString(UIStrings.reloadRequiredForNetworkPanelMessage),
+    );
+  }
 }

front_end/entrypoints/rn_fusebox/rn_fusebox.ts

@@ -25,7 +25,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as Main from '../main/main.js';
 import FuseboxAppMetadataObserver from './FuseboxAppMetadataObserver.js';
 import FuseboxReconnectDeviceButton from './FuseboxReconnectDeviceButton.js';
-import FuseboxProfilingBuildObserver from './FuseboxProfilingBuildObserver.js';
+import FuseboxExperimentsObserver from './FuseboxExperimentsObserver.js';
 
 import type * as Platform from '../../core/platform/platform.js';
 import type * as Sources from '../../panels/sources/sources.js';
@@ -164,6 +164,6 @@ UI.Toolbar.registerToolbarItem({
 });
 
 new FuseboxAppMetadataObserver(SDK.TargetManager.TargetManager.instance());
-new FuseboxProfilingBuildObserver(SDK.TargetManager.TargetManager.instance());
+new FuseboxExperimentsObserver(SDK.TargetManager.TargetManager.instance());
 
 Host.rnPerfMetrics.entryPointLoadingFinished('rn_fusebox');

front_end/generated/InspectorBackendCommands.js

@@ -57,6 +57,10 @@ export namespace ReactNativeApplication {
      * Whether the app is a profiling build.
      */
     unstable_isProfilingBuild?: boolean;
+    /**
+     * Enables the Network Panel.
+     */
+    unstable_networkInspectionEnabled?: boolean;
   }
 }
 

front_end/generated/protocol.ts

@@ -23,6 +23,10 @@ const UIStrings = {
    *@description Title of the Network tool
    */
   network: 'Network',
+  /**
+   *@description Title of the Network tool (Expo, unstable)
+   */
+  networkExpoUnstable: 'Network (Expo, unstable)',
   /**
    *@description Command for showing the 'Network request blocking' tool
    */
@@ -126,6 +130,7 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/network-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let loadedNetworkModule: (typeof Network|undefined);
 
 async function loadNetworkModule(): Promise<typeof Network> {
@@ -146,7 +151,9 @@ UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.PANEL,
   id: 'network',
   commandPrompt: i18nLazyString(UIStrings.showNetwork),
-  title: i18nLazyString(UIStrings.network),
+  title: () => Root.Runtime.experiments.isEnabled(Root.Runtime.RNExperimentName.ENABLE_NETWORK_PANEL) ?
+      i18nString(UIStrings.network) :
+      i18nString(UIStrings.networkExpoUnstable),
   order: 40,
   condition: Root.Runtime.conditions.reactNativeUnstableNetworkPanel,
   async loadView() {

front_end/panels/network/network-meta.ts

@@ -63,6 +63,12 @@
                             "description": "Whether the app is a profiling build.",
                             "optional": true,
                             "type": "boolean"
+                        },
+                        {
+                            "name": "unstable_networkInspectionEnabled",
+                            "description": "Enables the Network Panel.",
+                            "optional": true,
+                            "type": "boolean"
                         }
                     ]
                 }
@@ -30427,4 +30433,4 @@
             ]
         }
     ]
-}
+}