Add ENABLE_NETWORK_THROTTLING experiment (#279)

Author: huntie

front_end/core/rn_experiments/experimentsImpl.ts

@@ -190,3 +190,9 @@ Instance.register({
   title: 'Enable performance frames track',
   unstable: true,
 });
+
+Instance.register({
+  name: RNExperimentName.ENABLE_NETWORK_THROTTLING,
+  title: 'Enable network throttling (Network panel)',
+  unstable: true,
+});

front_end/core/root/Runtime.ts

@@ -306,6 +306,7 @@ export enum RNExperimentName {
   REACT_NATIVE_SPECIFIC_UI = 'react-native-specific-ui',
   JS_HEAP_PROFILER_ENABLE = 'js-heap-profiler-enable',
   ENABLE_TIMELINE_FRAMES = 'enable-timeline-frames',
+  ENABLE_NETWORK_THROTTLING = 'enable-network-throttling',
 }
 
 export enum ConditionName {
@@ -341,6 +342,7 @@ export const enum ExperimentName {
   REACT_NATIVE_SPECIFIC_UI = RNExperimentName.REACT_NATIVE_SPECIFIC_UI,
   NOT_REACT_NATIVE_SPECIFIC_UI = '!' + RNExperimentName.REACT_NATIVE_SPECIFIC_UI,
   ENABLE_TIMELINE_FRAMES = RNExperimentName.ENABLE_TIMELINE_FRAMES,
+  ENABLE_NETWORK_THROTTLING = RNExperimentName.ENABLE_NETWORK_THROTTLING,
 }
 
 export enum GenAiEnterprisePolicyValue {

front_end/entrypoints/rn_fusebox/FuseboxFeatureObserver.ts

@@ -29,6 +29,12 @@ const UIStrings = {
    * @description Title shown when a feature is unavailable due to multiple React Native hosts.
    */
   multiHostFeatureUnavailableTitle: 'Feature is unavailable',
+  /**
+   * @description Message for the "settings changed" banner shown when a reload
+   * is required for response throttling in the Network panel.
+   */
+  reloadRequiredForNetworkThrottlingMessage:
+      'Network throttling is now available in the Network panel. Please reload to enable.',
   /**
    * @description Message for the "settings changed" banner shown when a reload
    * is required for frame timings in the Performance panel.
@@ -81,7 +87,8 @@ export class FuseboxFeatureObserver implements
   #handleMetadataUpdated(
       event: Common.EventTarget.EventTargetEvent<Protocol.ReactNativeApplication.MetadataUpdatedEvent>): void {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    const {unstable_isProfilingBuild, unstable_networkInspectionEnabled, unstable_frameRecordingEnabled} = event.data;
+    const {unstable_isProfilingBuild, unstable_networkInspectionEnabled, unstable_frameRecordingEnabled, unstable_networkThrottlingEnabled} =
+        event.data;
 
     if (unstable_isProfilingBuild) {
       FuseboxWindowTitleManager.instance().setSuffix('[PROFILING]');
@@ -97,6 +104,10 @@ export class FuseboxFeatureObserver implements
     if (unstable_frameRecordingEnabled) {
       void this.#ensureTimelineFramesEnabled();
     }
+
+    if (unstable_networkThrottlingEnabled) {
+      void this.#ensureNetworkThrottlingEnabled();
+    }
   }
 
   #handleSystemStateChanged(
@@ -150,6 +161,14 @@ export class FuseboxFeatureObserver implements
     }
   }
 
+  async #ensureNetworkThrottlingEnabled(): Promise<void> {
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.RNExperimentName.ENABLE_NETWORK_THROTTLING)) {
+      Root.Runtime.experiments.setEnabled(Root.Runtime.RNExperimentName.ENABLE_NETWORK_THROTTLING, true);
+      UI.InspectorView?.InspectorView?.instance()?.displayReloadRequiredWarning(
+          i18nString(UIStrings.reloadRequiredForNetworkThrottlingMessage));
+    }
+  }
+
   #disableSingleHostOnlyFeatures(): void {
     if (this.#singleHostFeaturesDisabled) {
       return;

front_end/generated/InspectorBackendCommands.js

@@ -62,10 +62,13 @@ export namespace ReactNativeApplication {
      */
     unstable_networkInspectionEnabled?: boolean;
     /**
-     * Whether Frame Timings and screenshots are supported in performance
-     * traces.
+     * Whether Frame Timings and screenshots are supported in performance traces.
      */
     unstable_frameRecordingEnabled?: boolean;
+    /**
+     * Whether network throttling is supported in the Network panel.
+     */
+    unstable_networkThrottlingEnabled?: boolean;
   }
 
   /**

front_end/generated/protocol.ts

@@ -482,6 +482,10 @@ export class NetworkPanel extends UI.Panel.Panel implements
         void UI.ViewManager.ViewManager.instance().showView('network.config');
       }, this);
       this.panelToolbar.appendToolbarItem(networkConditionsButton);
+    } else if (Root.Runtime.experiments.isEnabled(Root.Runtime.RNExperimentName.ENABLE_NETWORK_THROTTLING)) {
+      // [RN] Expose the network throttling selector when enabled by the backend.
+      this.panelToolbar.appendSeparator();
+      this.panelToolbar.appendToolbarItem(this.throttlingSelect);
     }
 
     this.rightToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.progressBarContainer));

front_end/panels/network/NetworkPanel.ts

@@ -131,6 +131,7 @@ const REGISTERED_EXPERIMENTS = [
   Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
   Root.Runtime.ExperimentName.NOT_REACT_NATIVE_SPECIFIC_UI,
   Root.Runtime.ExperimentName.ENABLE_TIMELINE_FRAMES,
+  Root.Runtime.ExperimentName.ENABLE_NETWORK_THROTTLING,
 ];
 
 export async function initializeGlobalVars({reset = true} = {}) {

front_end/testing/EnvironmentHelpers.ts

@@ -75,6 +75,12 @@
                             "description": "Whether Frame Timings and screenshots are supported in performance traces.",
                             "optional": true,
                             "type": "boolean"
+                        },
+                        {
+                            "name": "unstable_networkThrottlingEnabled",
+                            "description": "Whether network throttling is supported in the Network panel.",
+                            "optional": true,
+                            "type": "boolean"
                         }
                     ]
                 },
@@ -84,7 +90,7 @@
                     "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.",
+                            "description": "Whether the application has a single React Native host. If an app or\nframework intantiates multiple hosts, some debugger features will not\nbehave safely and should be dynamically disabled.",
                             "type": "boolean"
                         }
                     ]
@@ -32044,4 +32050,4 @@
             ]
         }
     ]
-}
+}

third_party/blink/public/devtools_protocol/browser_protocol.json

@@ -32,6 +32,8 @@ experimental domain ReactNativeApplication
       optional boolean unstable_networkInspectionEnabled
       # Whether Frame Timings and screenshots are supported in performance traces.
       optional boolean unstable_frameRecordingEnabled
+      # Whether network throttling is supported in the Network panel.
+      optional boolean unstable_networkThrottlingEnabled
 
   # Emitted when assertions about the debugger backend have changed.
   event systemStateChanged