diff --git a/front_end/core/rn_experiments/experimentsImpl.ts b/front_end/core/rn_experiments/experimentsImpl.ts index 751a2d9353dd..adbc8d0c3274 100644 --- a/front_end/core/rn_experiments/experimentsImpl.ts +++ b/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, +}); diff --git a/front_end/core/root/Runtime.ts b/front_end/core/root/Runtime.ts index 6c59a91c84c8..bd26df42f5df 100644 --- a/front_end/core/root/Runtime.ts +++ b/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 { diff --git a/front_end/entrypoints/rn_fusebox/FuseboxFeatureObserver.ts b/front_end/entrypoints/rn_fusebox/FuseboxFeatureObserver.ts index 7e9dd3525895..96ce7a996448 100644 --- a/front_end/entrypoints/rn_fusebox/FuseboxFeatureObserver.ts +++ b/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): 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 { + 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; diff --git a/front_end/generated/InspectorBackendCommands.js b/front_end/generated/InspectorBackendCommands.js index 3c49b7f2b655..83eec314335b 100644 --- a/front_end/generated/InspectorBackendCommands.js +++ b/front_end/generated/InspectorBackendCommands.js @@ -41,7 +41,7 @@ export function registerCommands(inspectorBackend) { // ReactNativeApplication. -inspectorBackend.registerEvent("ReactNativeApplication.metadataUpdated", ["appDisplayName", "appIdentifier", "deviceName", "integrationName", "platform", "reactNativeVersion", "unstable_isProfilingBuild", "unstable_networkInspectionEnabled"]); +inspectorBackend.registerEvent("ReactNativeApplication.metadataUpdated", ["appDisplayName", "appIdentifier", "deviceName", "integrationName", "platform", "reactNativeVersion", "unstable_isProfilingBuild", "unstable_networkInspectionEnabled", "unstable_frameRecordingEnabled", "unstable_networkThrottlingEnabled"]); inspectorBackend.registerEvent("ReactNativeApplication.systemStateChanged", ["isSingleHost"]); inspectorBackend.registerEvent("ReactNativeApplication.traceRequested", []); inspectorBackend.registerCommand("ReactNativeApplication.disable", [], [], "Disables events from backend."); diff --git a/front_end/generated/protocol.ts b/front_end/generated/protocol.ts index 5b88cf57fd4a..8209dfe4598a 100644 --- a/front_end/generated/protocol.ts +++ b/front_end/generated/protocol.ts @@ -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; } /** diff --git a/front_end/panels/network/NetworkPanel.ts b/front_end/panels/network/NetworkPanel.ts index c2f2443df588..93c59ad1d2cd 100644 --- a/front_end/panels/network/NetworkPanel.ts +++ b/front_end/panels/network/NetworkPanel.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)); diff --git a/front_end/testing/EnvironmentHelpers.ts b/front_end/testing/EnvironmentHelpers.ts index 211940a69fdc..c0ffc4020b19 100644 --- a/front_end/testing/EnvironmentHelpers.ts +++ b/front_end/testing/EnvironmentHelpers.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} = {}) { diff --git a/third_party/blink/public/devtools_protocol/browser_protocol.json b/third_party/blink/public/devtools_protocol/browser_protocol.json index 6543679373e1..74f6f824f847 100644 --- a/third_party/blink/public/devtools_protocol/browser_protocol.json +++ b/third_party/blink/public/devtools_protocol/browser_protocol.json @@ -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 @@ ] } ] -} +} \ No newline at end of file diff --git a/third_party/blink/public/devtools_protocol/react_native_domains.pdl b/third_party/blink/public/devtools_protocol/react_native_domains.pdl index 7ad05f5148bc..9f7a5b659fc8 100644 --- a/third_party/blink/public/devtools_protocol/react_native_domains.pdl +++ b/third_party/blink/public/devtools_protocol/react_native_domains.pdl @@ -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