Add filter UI for third-party requests
See https://imgur.com/a/7cXareV
Bug: 1057457
Change-Id: Iab186b9cf42cf4b488b6c6045cbcfdc0ac089a25
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3009815
Auto-Submit: Danil Somsikov <[email protected]>
Commit-Queue: Wolfgang Beyer <[email protected]>
Reviewed-by: Wolfgang Beyer <[email protected]>
diff --git a/front_end/panels/network/NetworkLogView.ts b/front_end/panels/network/NetworkLogView.ts
index 8a88f59..b446e75 100644
--- a/front_end/panels/network/NetworkLogView.ts
+++ b/front_end/panels/network/NetworkLogView.ts
@@ -91,6 +91,14 @@
*/
onlyShowBlockedRequests: 'Only show blocked requests',
/**
+ *@description Label for a filter in the Network panel
+ */
+ thirdParty: '3rd-party requests',
+ /**
+ *@description Tooltip for a filter in the Network panel
+ */
+ onlyShowThirdPartyRequests: 'Shows only requests with origin different from page origin',
+ /**
*@description Text that appears when user drag and drop something (for example, a file) in Network Log View of the Network panel
*/
dropHarFilesHere: 'Drop HAR files here',
@@ -334,6 +342,7 @@
_networkHideDataURLSetting: Common.Settings.Setting<boolean>;
_networkShowIssuesOnlySetting: Common.Settings.Setting<boolean>;
_networkOnlyBlockedRequestsSetting: Common.Settings.Setting<boolean>;
+ _networkOnlyThirdPartySetting: Common.Settings.Setting<boolean>;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_networkResourceTypeFiltersSetting: Common.Settings.Setting<any>;
@@ -368,6 +377,7 @@
_resourceCategoryFilterUI: UI.FilterBar.NamedBitSetFilterUI;
_onlyIssuesFilterUI: UI.FilterBar.CheckboxFilterUI;
_onlyBlockedRequestsUI: UI.FilterBar.CheckboxFilterUI;
+ _onlyThirdPartyFilterUI: UI.FilterBar.CheckboxFilterUI;
_filterParser: TextUtils.TextUtils.FilterParser;
_suggestionBuilder: UI.FilterSuggestionBuilder.FilterSuggestionBuilder;
_dataGrid: DataGrid.SortableDataGrid.SortableDataGrid<NetworkNode>;
@@ -390,6 +400,8 @@
Common.Settings.Settings.instance().createSetting('networkShowIssuesOnly', false);
this._networkOnlyBlockedRequestsSetting =
Common.Settings.Settings.instance().createSetting('networkOnlyBlockedRequests', false);
+ this._networkOnlyThirdPartySetting =
+ Common.Settings.Settings.instance().createSetting('networkOnlyThirdPartySetting', false);
this._networkResourceTypeFiltersSetting =
Common.Settings.Settings.instance().createSetting('networkResourceTypeFilters', {});
@@ -479,6 +491,14 @@
UI.Tooltip.Tooltip.install(this._onlyBlockedRequestsUI.element(), i18nString(UIStrings.onlyShowBlockedRequests));
filterBar.addFilter(this._onlyBlockedRequestsUI);
+ this._onlyThirdPartyFilterUI = new UI.FilterBar.CheckboxFilterUI(
+ 'only-show-third-party', i18nString(UIStrings.thirdParty), true, this._networkOnlyThirdPartySetting);
+ this._onlyThirdPartyFilterUI.addEventListener(
+ UI.FilterBar.FilterUI.Events.FilterChanged, this._filterChanged.bind(this), this);
+ UI.Tooltip.Tooltip.install(
+ this._onlyThirdPartyFilterUI.element(), i18nString(UIStrings.onlyShowThirdPartyRequests));
+ filterBar.addFilter(this._onlyThirdPartyFilterUI);
+
this._filterParser = new TextUtils.TextUtils.FilterParser(_searchKeys);
this._suggestionBuilder =
new UI.FilterSuggestionBuilder.FilterSuggestionBuilder(_searchKeys, NetworkLogView._sortSearchValues);
@@ -1663,6 +1683,9 @@
if (this._onlyBlockedRequestsUI.checked() && !request.wasBlocked() && !request.corsErrorStatus()) {
return false;
}
+ if (this._onlyThirdPartyFilterUI.checked() && request.isSameSite()) {
+ return false;
+ }
for (let i = 0; i < this._filters.length; ++i) {
if (!this._filters[i](request)) {
return false;
