Skip to content

Commit 17895f4

Browse files
huntiehuntie
authored
Scope down Network panel features for React Native (#154)
1 parent 7a26672 commit 17895f4

File tree

4 files changed

+92
-48
lines changed

4 files changed

+92
-48
lines changed

‎front_end/core/common/ResourceType.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -370,6 +370,14 @@ export const resourceCategories = {
370370
Other: new ResourceCategory(i18nLazyString(UIStrings.other), i18nLazyString(UIStrings.other)),
371371
};
372372

373+
export const resourceCategoriesReactNative = {
374+
XHR: new ResourceCategory(i18nLazyString(UIStrings.fetchAndXHR), i18n.i18n.lockedLazyString('Fetch/XHR')),
375+
Script: new ResourceCategory(i18nLazyString(UIStrings.javascript), i18nLazyString(UIStrings.js)),
376+
Image: new ResourceCategory(i18nLazyString(UIStrings.image), i18nLazyString(UIStrings.img)),
377+
Media: new ResourceCategory(i18nLazyString(UIStrings.media), i18nLazyString(UIStrings.media)),
378+
Other: new ResourceCategory(i18nLazyString(UIStrings.other), i18nLazyString(UIStrings.other)),
379+
};
380+
373381
/**
374382
* This enum is a superset of all types defined in WebCore::InspectorPageAgent::resourceTypeJson
375383
* For DevTools-only types that are based on MIME-types that are backed by other request types

‎front_end/entrypoints/rn_fusebox/rn_fusebox.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ UI.ViewManager.maybeRemoveViewExtension('throttling-conditions');
7575
RNExperiments.RNExperimentsImpl.setIsReactNativeEntryPoint(true);
7676
RNExperiments.RNExperimentsImpl.Instance.enableExperimentsByDefault([
7777
Root.Runtime.ExperimentName.JS_HEAP_PROFILER_ENABLE,
78+
Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN,
7879
Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
7980
]);
8081

‎front_end/panels/network/NetworkLogView.ts‎

Lines changed: 53 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -521,11 +521,18 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
521521
private readonly summaryToolbarInternal: UI.Toolbar.Toolbar;
522522
private readonly filterBar: UI.FilterBar.FilterBar;
523523
private readonly textFilterSetting: Common.Settings.Setting<string>;
524+
private readonly isReactNative: boolean = false;
524525

525526
constructor(
526527
filterBar: UI.FilterBar.FilterBar, progressBarContainer: Element,
527528
networkLogLargeRowsSetting: Common.Settings.Setting<boolean>) {
528529
super();
530+
531+
// [RN] Used to scope down available features for React Native targets
532+
this.isReactNative = Root.Runtime.experiments.isEnabled(
533+
Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
534+
);
535+
529536
this.setMinimumSize(50, 64);
530537

531538
this.element.id = 'network-container';
@@ -599,14 +606,17 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
599606
filterBar.addFilter(this.invertFilterUI);
600607
filterBar.addDivider();
601608

602-
const filterItems =
603-
Object.entries(Common.ResourceType.resourceCategories).map(([key, category]) => ({
604-
name: category.title(),
605-
label: () => category.shortTitle(),
606-
title: category.title(),
607-
jslogContext:
608-
Platform.StringUtilities.toKebabCase(key),
609-
}));
609+
const filterItems = Object.entries(
610+
this.isReactNative
611+
? Common.ResourceType.resourceCategoriesReactNative
612+
: Common.ResourceType.resourceCategories
613+
).map(([key, category]) => ({
614+
name: category.title(),
615+
label: () => category.shortTitle(),
616+
title: category.title(),
617+
jslogContext:
618+
Platform.StringUtilities.toKebabCase(key),
619+
}));
610620

611621
if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN)) {
612622
this.resourceCategoryFilterUI = new DropDownTypesUI(filterItems, this.networkResourceTypeFiltersSetting);
@@ -2873,10 +2883,16 @@ export class MoreFiltersDropDownUI extends
28732883
private activeFiltersCount: HTMLElement;
28742884
private activeFiltersCountAdorner: Adorners.Adorner.Adorner;
28752885
private hasChanged = false;
2886+
private readonly isReactNative: boolean = false;
28762887

28772888
constructor() {
28782889
super();
28792890

2891+
// [RN] Used to disable web-specific filters
2892+
this.isReactNative = Root.Runtime.experiments.isEnabled(
2893+
Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
2894+
);
2895+
28802896
this.networkHideDataURLSetting = Common.Settings.Settings.instance().createSetting('network-hide-data-url', false);
28812897
this.networkHideChromeExtensionsSetting =
28822898
Common.Settings.Settings.instance().createSetting('network-hide-chrome-extensions', false);
@@ -2951,36 +2967,42 @@ export class MoreFiltersDropDownUI extends
29512967
tooltip: i18nString(UIStrings.hidesDataAndBlobUrls),
29522968
jslogContext: 'hide-data-urls',
29532969
});
2954-
this.contextMenu.defaultSection().appendCheckboxItem(
2955-
i18nString(UIStrings.chromeExtensions),
2956-
() => this.networkHideChromeExtensionsSetting.set(!this.networkHideChromeExtensionsSetting.get()), {
2957-
checked: this.networkHideChromeExtensionsSetting.get(),
2958-
tooltip: i18nString(UIStrings.hideChromeExtension),
2959-
jslogContext: 'hide-extension-urls',
2960-
});
2961-
this.contextMenu.defaultSection().appendSeparator();
2962-
2963-
this.contextMenu.defaultSection().appendCheckboxItem(
2964-
i18nString(UIStrings.hasBlockedCookies),
2965-
() => this.networkShowBlockedCookiesOnlySetting.set(!this.networkShowBlockedCookiesOnlySetting.get()), {
2966-
checked: this.networkShowBlockedCookiesOnlySetting.get(),
2967-
tooltip: i18nString(UIStrings.onlyShowRequestsWithBlockedCookies),
2968-
jslogContext: 'only-blocked-response-cookies',
2969-
});
2970+
if (!this.isReactNative) {
2971+
this.contextMenu.defaultSection().appendCheckboxItem(
2972+
i18nString(UIStrings.chromeExtensions),
2973+
() => this.networkHideChromeExtensionsSetting.set(!this.networkHideChromeExtensionsSetting.get()), {
2974+
checked: this.networkHideChromeExtensionsSetting.get(),
2975+
tooltip: i18nString(UIStrings.hideChromeExtension),
2976+
jslogContext: 'hide-extension-urls',
2977+
});
2978+
this.contextMenu.defaultSection().appendSeparator();
2979+
}
2980+
2981+
if (!this.isReactNative) {
2982+
this.contextMenu.defaultSection().appendCheckboxItem(
2983+
i18nString(UIStrings.hasBlockedCookies),
2984+
() => this.networkShowBlockedCookiesOnlySetting.set(!this.networkShowBlockedCookiesOnlySetting.get()), {
2985+
checked: this.networkShowBlockedCookiesOnlySetting.get(),
2986+
tooltip: i18nString(UIStrings.onlyShowRequestsWithBlockedCookies),
2987+
jslogContext: 'only-blocked-response-cookies',
2988+
});
2989+
}
29702990
this.contextMenu.defaultSection().appendCheckboxItem(
29712991
i18nString(UIStrings.blockedRequests),
29722992
() => this.networkOnlyBlockedRequestsSetting.set(!this.networkOnlyBlockedRequestsSetting.get()), {
29732993
checked: this.networkOnlyBlockedRequestsSetting.get(),
29742994
tooltip: i18nString(UIStrings.onlyShowBlockedRequests),
29752995
jslogContext: 'only-blocked-requests',
29762996
});
2977-
this.contextMenu.defaultSection().appendCheckboxItem(
2978-
i18nString(UIStrings.thirdParty),
2979-
() => this.networkOnlyThirdPartySetting.set(!this.networkOnlyThirdPartySetting.get()), {
2980-
checked: this.networkOnlyThirdPartySetting.get(),
2981-
tooltip: i18nString(UIStrings.onlyShowThirdPartyRequests),
2982-
jslogContext: 'only-3rd-party-requests',
2983-
});
2997+
if (!this.isReactNative) {
2998+
this.contextMenu.defaultSection().appendCheckboxItem(
2999+
i18nString(UIStrings.thirdParty),
3000+
() => this.networkOnlyThirdPartySetting.set(!this.networkOnlyThirdPartySetting.get()), {
3001+
checked: this.networkOnlyThirdPartySetting.get(),
3002+
tooltip: i18nString(UIStrings.onlyShowThirdPartyRequests),
3003+
jslogContext: 'only-3rd-party-requests',
3004+
});
3005+
}
29843006

29853007
void this.contextMenu.show();
29863008
}

‎front_end/panels/network/NetworkPanel.ts‎

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import * as Common from '../../core/common/common.js';
3636
import * as Host from '../../core/host/host.js';
3737
import * as i18n from '../../core/i18n/i18n.js';
3838
import * as Platform from '../../core/platform/platform.js';
39+
import * as Root from '../../core/root/root.js';
3940
import * as SDK from '../../core/sdk/sdk.js';
4041
import * as Bindings from '../../models/bindings/bindings.js';
4142
import type * as Extensions from '../../models/extensions/extensions.js';
@@ -194,10 +195,16 @@ export class NetworkPanel extends UI.Panel.Panel implements
194195
recordLogSetting: Common.Settings.Setting<boolean>;
195196
private readonly throttlingSelect: UI.Toolbar.ToolbarComboBox;
196197
private readonly displayScreenshotDelay: number;
198+
private readonly isReactNative: boolean = false;
197199

198200
constructor(displayScreenshotDelay: number) {
199201
super('network');
200202

203+
// [RN] Used to scope down available features for React Native targets
204+
this.isReactNative = Root.Runtime.experiments.isEnabled(
205+
Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
206+
);
207+
201208
this.displayScreenshotDelay = displayScreenshotDelay;
202209
this.networkLogShowOverviewSetting =
203210
Common.Settings.Settings.instance().createSetting('network-log-show-overview', true);
@@ -417,20 +424,23 @@ export class NetworkPanel extends UI.Panel.Panel implements
417424
this.panelToolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
418425
this.preserveLogSetting, i18nString(UIStrings.doNotClearLogOnPageReload), i18nString(UIStrings.preserveLog)));
419426

420-
this.panelToolbar.appendSeparator();
421-
const disableCacheCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
422-
Common.Settings.Settings.instance().moduleSetting('cache-disabled'),
423-
i18nString(UIStrings.disableCacheWhileDevtoolsIsOpen), i18nString(UIStrings.disableCache));
424-
this.panelToolbar.appendToolbarItem(disableCacheCheckbox);
425-
426-
this.panelToolbar.appendToolbarItem(this.throttlingSelect);
427-
428-
const networkConditionsButton = new UI.Toolbar.ToolbarButton(
429-
i18nString(UIStrings.moreNetworkConditions), 'network-settings', undefined, 'network-conditions');
430-
networkConditionsButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, () => {
431-
void UI.ViewManager.ViewManager.instance().showView('network.config');
432-
}, this);
433-
this.panelToolbar.appendToolbarItem(networkConditionsButton);
427+
// [RN] Disable cache and network conditions
428+
if (!this.isReactNative) {
429+
this.panelToolbar.appendSeparator();
430+
const disableCacheCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
431+
Common.Settings.Settings.instance().moduleSetting('cache-disabled'),
432+
i18nString(UIStrings.disableCacheWhileDevtoolsIsOpen), i18nString(UIStrings.disableCache));
433+
this.panelToolbar.appendToolbarItem(disableCacheCheckbox);
434+
435+
this.panelToolbar.appendToolbarItem(this.throttlingSelect);
436+
437+
const networkConditionsButton = new UI.Toolbar.ToolbarButton(
438+
i18nString(UIStrings.moreNetworkConditions), 'network-settings', undefined, 'network-conditions');
439+
networkConditionsButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, () => {
440+
void UI.ViewManager.ViewManager.instance().showView('network.config');
441+
}, this);
442+
this.panelToolbar.appendToolbarItem(networkConditionsButton);
443+
}
434444

435445
this.rightToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.progressBarContainer));
436446
this.rightToolbar.appendSeparator();
@@ -452,9 +462,12 @@ export class NetworkPanel extends UI.Panel.Panel implements
452462
settingsToolbarRight.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
453463
Common.Settings.Settings.instance().moduleSetting('network.group-by-frame'),
454464
i18nString(UIStrings.groupRequestsByTopLevelRequest), i18nString(UIStrings.groupByFrame)));
455-
settingsToolbarRight.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
456-
this.networkRecordFilmStripSetting, i18nString(UIStrings.captureScreenshotsWhenLoadingA),
457-
i18nString(UIStrings.captureScreenshots)));
465+
// [RN] Disable capture screenshots toggle
466+
if (!this.isReactNative) {
467+
settingsToolbarRight.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
468+
this.networkRecordFilmStripSetting, i18nString(UIStrings.captureScreenshotsWhenLoadingA),
469+
i18nString(UIStrings.captureScreenshots)));
470+
}
458471

459472
this.panelToolbar.appendSeparator();
460473
const importHarButton =

0 commit comments

Comments
 (0)