diff --git a/front_end/core/common/ResourceType.ts b/front_end/core/common/ResourceType.ts index d3ea34780bb..180d2f19dfb 100644 --- a/front_end/core/common/ResourceType.ts +++ b/front_end/core/common/ResourceType.ts @@ -370,6 +370,14 @@ export const resourceCategories = { Other: new ResourceCategory(i18nLazyString(UIStrings.other), i18nLazyString(UIStrings.other)), }; +export const resourceCategoriesReactNative = { + XHR: new ResourceCategory(i18nLazyString(UIStrings.fetchAndXHR), i18n.i18n.lockedLazyString('Fetch/XHR')), + Script: new ResourceCategory(i18nLazyString(UIStrings.javascript), i18nLazyString(UIStrings.js)), + Image: new ResourceCategory(i18nLazyString(UIStrings.image), i18nLazyString(UIStrings.img)), + Media: new ResourceCategory(i18nLazyString(UIStrings.media), i18nLazyString(UIStrings.media)), + Other: new ResourceCategory(i18nLazyString(UIStrings.other), i18nLazyString(UIStrings.other)), +}; + /** * This enum is a superset of all types defined in WebCore::InspectorPageAgent::resourceTypeJson * For DevTools-only types that are based on MIME-types that are backed by other request types diff --git a/front_end/entrypoints/rn_fusebox/rn_fusebox.ts b/front_end/entrypoints/rn_fusebox/rn_fusebox.ts index ff504ae28ea..6b5672997e9 100644 --- a/front_end/entrypoints/rn_fusebox/rn_fusebox.ts +++ b/front_end/entrypoints/rn_fusebox/rn_fusebox.ts @@ -75,6 +75,7 @@ UI.ViewManager.maybeRemoveViewExtension('throttling-conditions'); RNExperiments.RNExperimentsImpl.setIsReactNativeEntryPoint(true); RNExperiments.RNExperimentsImpl.Instance.enableExperimentsByDefault([ Root.Runtime.ExperimentName.JS_HEAP_PROFILER_ENABLE, + Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN, Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI, ]); diff --git a/front_end/panels/network/NetworkLogView.ts b/front_end/panels/network/NetworkLogView.ts index 85341782a94..f64d439c3b8 100644 --- a/front_end/panels/network/NetworkLogView.ts +++ b/front_end/panels/network/NetworkLogView.ts @@ -521,11 +521,18 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin; + private readonly isReactNative: boolean = false; constructor( filterBar: UI.FilterBar.FilterBar, progressBarContainer: Element, networkLogLargeRowsSetting: Common.Settings.Setting) { super(); + + // [RN] Used to scope down available features for React Native targets + this.isReactNative = Root.Runtime.experiments.isEnabled( + Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI, + ); + this.setMinimumSize(50, 64); this.element.id = 'network-container'; @@ -599,14 +606,17 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin ({ - name: category.title(), - label: () => category.shortTitle(), - title: category.title(), - jslogContext: - Platform.StringUtilities.toKebabCase(key), - })); + const filterItems = Object.entries( + this.isReactNative + ? Common.ResourceType.resourceCategoriesReactNative + : Common.ResourceType.resourceCategories + ).map(([key, category]) => ({ + name: category.title(), + label: () => category.shortTitle(), + title: category.title(), + jslogContext: + Platform.StringUtilities.toKebabCase(key), + })); if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN)) { this.resourceCategoryFilterUI = new DropDownTypesUI(filterItems, this.networkResourceTypeFiltersSetting); @@ -2873,10 +2883,16 @@ export class MoreFiltersDropDownUI extends private activeFiltersCount: HTMLElement; private activeFiltersCountAdorner: Adorners.Adorner.Adorner; private hasChanged = false; + private readonly isReactNative: boolean = false; constructor() { super(); + // [RN] Used to disable web-specific filters + this.isReactNative = Root.Runtime.experiments.isEnabled( + Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI, + ); + this.networkHideDataURLSetting = Common.Settings.Settings.instance().createSetting('network-hide-data-url', false); this.networkHideChromeExtensionsSetting = Common.Settings.Settings.instance().createSetting('network-hide-chrome-extensions', false); @@ -2951,22 +2967,26 @@ export class MoreFiltersDropDownUI extends tooltip: i18nString(UIStrings.hidesDataAndBlobUrls), jslogContext: 'hide-data-urls', }); - this.contextMenu.defaultSection().appendCheckboxItem( - i18nString(UIStrings.chromeExtensions), - () => this.networkHideChromeExtensionsSetting.set(!this.networkHideChromeExtensionsSetting.get()), { - checked: this.networkHideChromeExtensionsSetting.get(), - tooltip: i18nString(UIStrings.hideChromeExtension), - jslogContext: 'hide-extension-urls', - }); - this.contextMenu.defaultSection().appendSeparator(); - - this.contextMenu.defaultSection().appendCheckboxItem( - i18nString(UIStrings.hasBlockedCookies), - () => this.networkShowBlockedCookiesOnlySetting.set(!this.networkShowBlockedCookiesOnlySetting.get()), { - checked: this.networkShowBlockedCookiesOnlySetting.get(), - tooltip: i18nString(UIStrings.onlyShowRequestsWithBlockedCookies), - jslogContext: 'only-blocked-response-cookies', - }); + if (!this.isReactNative) { + this.contextMenu.defaultSection().appendCheckboxItem( + i18nString(UIStrings.chromeExtensions), + () => this.networkHideChromeExtensionsSetting.set(!this.networkHideChromeExtensionsSetting.get()), { + checked: this.networkHideChromeExtensionsSetting.get(), + tooltip: i18nString(UIStrings.hideChromeExtension), + jslogContext: 'hide-extension-urls', + }); + this.contextMenu.defaultSection().appendSeparator(); + } + + if (!this.isReactNative) { + this.contextMenu.defaultSection().appendCheckboxItem( + i18nString(UIStrings.hasBlockedCookies), + () => this.networkShowBlockedCookiesOnlySetting.set(!this.networkShowBlockedCookiesOnlySetting.get()), { + checked: this.networkShowBlockedCookiesOnlySetting.get(), + tooltip: i18nString(UIStrings.onlyShowRequestsWithBlockedCookies), + jslogContext: 'only-blocked-response-cookies', + }); + } this.contextMenu.defaultSection().appendCheckboxItem( i18nString(UIStrings.blockedRequests), () => this.networkOnlyBlockedRequestsSetting.set(!this.networkOnlyBlockedRequestsSetting.get()), { @@ -2974,13 +2994,15 @@ export class MoreFiltersDropDownUI extends tooltip: i18nString(UIStrings.onlyShowBlockedRequests), jslogContext: 'only-blocked-requests', }); - this.contextMenu.defaultSection().appendCheckboxItem( - i18nString(UIStrings.thirdParty), - () => this.networkOnlyThirdPartySetting.set(!this.networkOnlyThirdPartySetting.get()), { - checked: this.networkOnlyThirdPartySetting.get(), - tooltip: i18nString(UIStrings.onlyShowThirdPartyRequests), - jslogContext: 'only-3rd-party-requests', - }); + if (!this.isReactNative) { + this.contextMenu.defaultSection().appendCheckboxItem( + i18nString(UIStrings.thirdParty), + () => this.networkOnlyThirdPartySetting.set(!this.networkOnlyThirdPartySetting.get()), { + checked: this.networkOnlyThirdPartySetting.get(), + tooltip: i18nString(UIStrings.onlyShowThirdPartyRequests), + jslogContext: 'only-3rd-party-requests', + }); + } void this.contextMenu.show(); } diff --git a/front_end/panels/network/NetworkPanel.ts b/front_end/panels/network/NetworkPanel.ts index db7463c1f50..a555023e4c9 100644 --- a/front_end/panels/network/NetworkPanel.ts +++ b/front_end/panels/network/NetworkPanel.ts @@ -36,6 +36,7 @@ import * as Common from '../../core/common/common.js'; import * as Host from '../../core/host/host.js'; import * as i18n from '../../core/i18n/i18n.js'; import * as Platform from '../../core/platform/platform.js'; +import * as Root from '../../core/root/root.js'; import * as SDK from '../../core/sdk/sdk.js'; import * as Bindings from '../../models/bindings/bindings.js'; import type * as Extensions from '../../models/extensions/extensions.js'; @@ -194,10 +195,16 @@ export class NetworkPanel extends UI.Panel.Panel implements recordLogSetting: Common.Settings.Setting; private readonly throttlingSelect: UI.Toolbar.ToolbarComboBox; private readonly displayScreenshotDelay: number; + private readonly isReactNative: boolean = false; constructor(displayScreenshotDelay: number) { super('network'); + // [RN] Used to scope down available features for React Native targets + this.isReactNative = Root.Runtime.experiments.isEnabled( + Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI, + ); + this.displayScreenshotDelay = displayScreenshotDelay; this.networkLogShowOverviewSetting = Common.Settings.Settings.instance().createSetting('network-log-show-overview', true); @@ -417,20 +424,23 @@ export class NetworkPanel extends UI.Panel.Panel implements this.panelToolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox( this.preserveLogSetting, i18nString(UIStrings.doNotClearLogOnPageReload), i18nString(UIStrings.preserveLog))); - this.panelToolbar.appendSeparator(); - const disableCacheCheckbox = new UI.Toolbar.ToolbarSettingCheckbox( - Common.Settings.Settings.instance().moduleSetting('cache-disabled'), - i18nString(UIStrings.disableCacheWhileDevtoolsIsOpen), i18nString(UIStrings.disableCache)); - this.panelToolbar.appendToolbarItem(disableCacheCheckbox); - - this.panelToolbar.appendToolbarItem(this.throttlingSelect); - - const networkConditionsButton = new UI.Toolbar.ToolbarButton( - i18nString(UIStrings.moreNetworkConditions), 'network-settings', undefined, 'network-conditions'); - networkConditionsButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, () => { - void UI.ViewManager.ViewManager.instance().showView('network.config'); - }, this); - this.panelToolbar.appendToolbarItem(networkConditionsButton); + // [RN] Disable cache and network conditions + if (!this.isReactNative) { + this.panelToolbar.appendSeparator(); + const disableCacheCheckbox = new UI.Toolbar.ToolbarSettingCheckbox( + Common.Settings.Settings.instance().moduleSetting('cache-disabled'), + i18nString(UIStrings.disableCacheWhileDevtoolsIsOpen), i18nString(UIStrings.disableCache)); + this.panelToolbar.appendToolbarItem(disableCacheCheckbox); + + this.panelToolbar.appendToolbarItem(this.throttlingSelect); + + const networkConditionsButton = new UI.Toolbar.ToolbarButton( + i18nString(UIStrings.moreNetworkConditions), 'network-settings', undefined, 'network-conditions'); + networkConditionsButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, () => { + void UI.ViewManager.ViewManager.instance().showView('network.config'); + }, this); + this.panelToolbar.appendToolbarItem(networkConditionsButton); + } this.rightToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.progressBarContainer)); this.rightToolbar.appendSeparator(); @@ -452,9 +462,12 @@ export class NetworkPanel extends UI.Panel.Panel implements settingsToolbarRight.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox( Common.Settings.Settings.instance().moduleSetting('network.group-by-frame'), i18nString(UIStrings.groupRequestsByTopLevelRequest), i18nString(UIStrings.groupByFrame))); - settingsToolbarRight.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox( - this.networkRecordFilmStripSetting, i18nString(UIStrings.captureScreenshotsWhenLoadingA), - i18nString(UIStrings.captureScreenshots))); + // [RN] Disable capture screenshots toggle + if (!this.isReactNative) { + settingsToolbarRight.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox( + this.networkRecordFilmStripSetting, i18nString(UIStrings.captureScreenshotsWhenLoadingA), + i18nString(UIStrings.captureScreenshots))); + } this.panelToolbar.appendSeparator(); const importHarButton =