diff --git a/front_end/core/rn_experiments/experimentsImpl.ts b/front_end/core/rn_experiments/experimentsImpl.ts index b4f02ac26e4b..751a2d9353dd 100644 --- a/front_end/core/rn_experiments/experimentsImpl.ts +++ b/front_end/core/rn_experiments/experimentsImpl.ts @@ -189,5 +189,4 @@ Instance.register({ name: RNExperimentName.ENABLE_TIMELINE_FRAMES, title: 'Enable performance frames track', unstable: true, - enabledByDefault: () => globalThis.enableTimelineFrames ?? false, }); diff --git a/front_end/entrypoints/rn_fusebox/FuseboxFeatureObserver.ts b/front_end/entrypoints/rn_fusebox/FuseboxFeatureObserver.ts index 4587238338e7..7e9dd3525895 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 frame timings in the Performance panel. + */ + reloadRequiredForTimelineFramesMessage: + 'Frame timings and screenshots are now available in the Performance panel. Please reload to enable.', /** * @description Detail message shown when a feature is disabled due to multiple React Native hosts. */ @@ -75,7 +81,7 @@ export class FuseboxFeatureObserver implements #handleMetadataUpdated( event: Common.EventTarget.EventTargetEvent): void { // eslint-disable-next-line @typescript-eslint/naming-convention - const {unstable_isProfilingBuild, unstable_networkInspectionEnabled} = event.data; + const {unstable_isProfilingBuild, unstable_networkInspectionEnabled, unstable_frameRecordingEnabled} = event.data; if (unstable_isProfilingBuild) { FuseboxWindowTitleManager.instance().setSuffix('[PROFILING]'); @@ -87,6 +93,10 @@ export class FuseboxFeatureObserver implements if (!unstable_networkInspectionEnabled && !Root.Runtime.conditions.reactNativeExpoNetworkPanel()) { this.#hideNetworkPanel(); } + + if (unstable_frameRecordingEnabled) { + void this.#ensureTimelineFramesEnabled(); + } } #handleSystemStateChanged( @@ -132,6 +142,14 @@ export class FuseboxFeatureObserver implements }); } + async #ensureTimelineFramesEnabled(): Promise { + if (!Root.Runtime.experiments.isEnabled(Root.Runtime.RNExperimentName.ENABLE_TIMELINE_FRAMES)) { + Root.Runtime.experiments.setEnabled(Root.Runtime.RNExperimentName.ENABLE_TIMELINE_FRAMES, true); + UI.InspectorView?.InspectorView?.instance()?.displayReloadRequiredWarning( + i18nString(UIStrings.reloadRequiredForTimelineFramesMessage)); + } + } + #disableSingleHostOnlyFeatures(): void { if (this.#singleHostFeaturesDisabled) { return; diff --git a/front_end/generated/protocol.ts b/front_end/generated/protocol.ts index cf8325c6e0ca..5b88cf57fd4a 100644 --- a/front_end/generated/protocol.ts +++ b/front_end/generated/protocol.ts @@ -61,6 +61,11 @@ export namespace ReactNativeApplication { * Enables the Network Panel. */ unstable_networkInspectionEnabled?: boolean; + /** + * Whether Frame Timings and screenshots are supported in performance + * traces. + */ + unstable_frameRecordingEnabled?: boolean; } /** diff --git a/front_end/panels/timeline/TimelinePanel.ts b/front_end/panels/timeline/TimelinePanel.ts index ccbb67e111c7..45e3c43a8ee2 100644 --- a/front_end/panels/timeline/TimelinePanel.ts +++ b/front_end/panels/timeline/TimelinePanel.ts @@ -712,14 +712,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod SDK.ReactNativeApplicationModel.ReactNativeApplicationModel, { modelAdded: (model: SDK.ReactNativeApplicationModel.ReactNativeApplicationModel) => { - model.addEventListener( - SDK.ReactNativeApplicationModel.Events.METADATA_UPDATED, - (event: Common.EventTarget.EventTargetEvent) => { - if (event.data.platform === 'android') { - this.showScreenshotsToolbarCheckbox?.setVisible(true); - } - } - ); model.addEventListener( SDK.ReactNativeApplicationModel.Events.TRACE_REQUESTED, () => this.rnPrepareForTraceCapturedInBackground()); }, @@ -1200,17 +1192,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod if (!isNode && (Root.Runtime.experiments.isEnabled(Root.Runtime.RNExperimentName.ENABLE_TIMELINE_FRAMES) || !isReactNative)) { this.showScreenshotsToolbarCheckbox = this.createSettingCheckbox(this.showScreenshotsSetting, i18nString(UIStrings.captureScreenshots)); - - let showScreenshotsToggle = false; - - const reactNativeApplicationModel = SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(SDK.ReactNativeApplicationModel.ReactNativeApplicationModel); - if (reactNativeApplicationModel !== null && reactNativeApplicationModel !== undefined) { - showScreenshotsToggle = reactNativeApplicationModel.metadataCached?.platform === 'android'; - } - - // Only show this toggle if we are on android, to address a possible race condition with the platform metadata, - // this is also checked again on SDK.ReactNativeApplicationModel.Events.METADATA_UPDATED - this.showScreenshotsToolbarCheckbox.setVisible(showScreenshotsToggle); this.panelToolbar.appendToolbarItem(this.showScreenshotsToolbarCheckbox); } diff --git a/third_party/blink/public/devtools_protocol/browser_protocol.json b/third_party/blink/public/devtools_protocol/browser_protocol.json index 6e66ec5277e1..6543679373e1 100644 --- a/third_party/blink/public/devtools_protocol/browser_protocol.json +++ b/third_party/blink/public/devtools_protocol/browser_protocol.json @@ -69,6 +69,12 @@ "description": "Enables the Network Panel.", "optional": true, "type": "boolean" + }, + { + "name": "unstable_frameRecordingEnabled", + "description": "Whether Frame Timings and screenshots are supported in performance traces.", + "optional": true, + "type": "boolean" } ] }, 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 03fe397e4067..7ad05f5148bc 100644 --- a/third_party/blink/public/devtools_protocol/react_native_domains.pdl +++ b/third_party/blink/public/devtools_protocol/react_native_domains.pdl @@ -30,6 +30,8 @@ experimental domain ReactNativeApplication optional boolean unstable_isProfilingBuild # Enables the Network Panel. optional boolean unstable_networkInspectionEnabled + # Whether Frame Timings and screenshots are supported in performance traces. + optional boolean unstable_frameRecordingEnabled # Emitted when assertions about the debugger backend have changed. event systemStateChanged