Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scope down Network panel features for React Native #154

Merged
merged 1 commit into from
Mar 5, 2025
+92 −48
Merged

Scope down Network panel features for React Native #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions front_end/core/common/ResourceType.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions front_end/entrypoints/rn_fusebox/rn_fusebox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
]);

Expand Down
84 changes: 53 additions & 31 deletions front_end/panels/network/NetworkLogView.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -521,11 +521,18 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
private readonly summaryToolbarInternal: UI.Toolbar.Toolbar;
private readonly filterBar: UI.FilterBar.FilterBar;
private readonly textFilterSetting: Common.Settings.Setting<string>;
private readonly isReactNative: boolean = false;

constructor(
filterBar: UI.FilterBar.FilterBar, progressBarContainer: Element,
networkLogLargeRowsSetting: Common.Settings.Setting<boolean>) {
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';
Expand Down Expand Up @@ -599,14 +606,17 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
filterBar.addFilter(this.invertFilterUI);
filterBar.addDivider();

const filterItems =
Object.entries(Common.ResourceType.resourceCategories).map(([key, category]) => ({
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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -2951,36 +2967,42 @@ 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()), {
checked: this.networkOnlyBlockedRequestsSetting.get(),
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();
}
Expand Down
47 changes: 30 additions & 17 deletions front_end/panels/network/NetworkPanel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -194,10 +195,16 @@ export class NetworkPanel extends UI.Panel.Panel implements
recordLogSetting: Common.Settings.Setting<boolean>;
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);
Expand Down Expand Up @@ -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();
Expand All @@ -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 =
Expand Down
Loading