Remove Network-Panel-Filter-Bar-Redesign experiment
Doc: go/chrome-devtools-remove-filterbar-experiment:design
Bug: 362672528
Change-Id: I7d9497f58a2458e5bc7b5b8e65de0f2fd1506677
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6507932
Commit-Queue: Wolfgang Beyer <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>
Auto-Submit: Wolfgang Beyer <[email protected]>
diff --git a/front_end/panels/network/NetworkLogView.test.ts b/front_end/panels/network/NetworkLogView.test.ts
index 753e76e..ad5236b 100644
--- a/front_end/panels/network/NetworkLogView.test.ts
+++ b/front_end/panels/network/NetworkLogView.test.ts
@@ -6,7 +6,6 @@
import * as i18n from '../../core/i18n/i18n.js';
import * as Platform from '../../core/platform/platform.js';
import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
import * as SDK from '../../core/sdk/sdk.js';
import * as Protocol from '../../generated/protocol.js';
import * as HAR from '../../models/har/har.js';
@@ -360,25 +359,7 @@
[request1, request2, request3]);
});
- it('hide Chrome extension requests from checkbox', async () => {
- createNetworkRequest('chrome-extension://url1', {target});
- createNetworkRequest('url2', {target});
- let rootNode;
- let filterBar;
- ({rootNode, filterBar, networkLogView} = createEnvironment());
- const hideExtCheckbox = getCheckbox(filterBar, 'Hide \'chrome-extension://\' URLs');
-
- assert.deepEqual(
- rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()),
- [urlString`chrome-extension://url1`, urlString`url2`]);
-
- clickCheckbox(hideExtCheckbox);
- assert.deepEqual(
- rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()), [urlString`url2`]);
- });
-
- it('can hide Chrome extension requests from dropdown', async () => {
- Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN);
+ it('can hide Chrome extension requests', async () => {
createNetworkRequest('chrome-extension://url1', {target});
createNetworkRequest('url2', {target});
let rootNode;
@@ -410,7 +391,6 @@
});
it('displays correct count for more filters', async () => {
- Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN);
let filterBar;
({filterBar, networkLogView} = createEnvironment());
const dropdown = await getMoreTypesDropdown(filterBar);
@@ -430,27 +410,7 @@
softMenu.discard();
});
- it('can filter requests with blocked response cookies from checkbox', async () => {
- const request1 = createNetworkRequest('url1', {target});
- request1.blockedResponseCookies = () => [{
- blockedReasons: [Protocol.Network.SetCookieBlockedReason.SameSiteNoneInsecure],
- cookie: null,
- cookieLine: 'foo=bar; SameSite=None',
- }];
- createNetworkRequest('url2', {target});
- let rootNode;
- let filterBar;
- ({rootNode, filterBar, networkLogView} = createEnvironment());
- const blockedCookiesCheckbox = getCheckbox(filterBar, 'Show only requests with blocked response cookies');
- clickCheckbox(blockedCookiesCheckbox);
- assert.deepEqual(rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()), [
- urlString`url1`,
- ]);
- });
-
- it('can filter requests with blocked response cookies from dropdown', async () => {
- Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN);
-
+ it('can filter requests with blocked response cookies', async () => {
const request1 = createNetworkRequest('url1', {target});
request1.blockedResponseCookies = () => [{
blockedReasons: [Protocol.Network.SetCookieBlockedReason.SameSiteNoneInsecure],
@@ -488,7 +448,6 @@
});
it('lists selected options in more filters tooltip', async () => {
- Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN);
let filterBar;
({filterBar, networkLogView} = createEnvironment());
@@ -507,7 +466,6 @@
});
it('updates tooltip to default when more filters option deselected', async () => {
- Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN);
let filterBar;
({filterBar, networkLogView} = createEnvironment());
@@ -985,20 +943,6 @@
sinon.assert.calledOnce(spy);
}
-function clickCheckbox(checkbox: HTMLInputElement) {
- checkbox.checked = true;
- const event = new Event('change', {bubbles: true, composed: true});
- checkbox.dispatchEvent(event);
-}
-
-function getCheckbox(filterBar: UI.FilterBar.FilterBar, title: string) {
- const checkbox =
- filterBar.element.querySelector(`[title="${title}"] devtools-checkbox`)?.shadowRoot?.querySelector('input') ||
- null;
- assert.instanceOf(checkbox, HTMLInputElement);
- return checkbox;
-}
-
async function getMoreTypesDropdown(filterBar: UI.FilterBar.FilterBar): Promise<HTMLElement> {
return filterBar.element.querySelector('[aria-label="Show only/hide requests dropdown"]')
?.querySelector('.toolbar-button') as HTMLElement;
diff --git a/front_end/panels/network/NetworkLogView.ts b/front_end/panels/network/NetworkLogView.ts
index c220bd6..523505a 100644
--- a/front_end/panels/network/NetworkLogView.ts
+++ b/front_end/panels/network/NetworkLogView.ts
@@ -39,7 +39,6 @@
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 Protocol from '../../generated/protocol.js';
import * as Bindings from '../../models/bindings/bindings.js';
@@ -611,65 +610,16 @@
jslogContext:
Platform.StringUtilities.toKebabCase(key),
}));
+ this.moreFiltersDropDownUI = new MoreFiltersDropDownUI();
+ this.moreFiltersDropDownUI.addEventListener(UI.FilterBar.FilterUIEvents.FILTER_CHANGED, this.filterChanged, this);
+ filterBar.addFilter(this.moreFiltersDropDownUI);
- if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN)) {
- this.moreFiltersDropDownUI = new MoreFiltersDropDownUI();
- this.moreFiltersDropDownUI.addEventListener(UI.FilterBar.FilterUIEvents.FILTER_CHANGED, this.filterChanged, this);
- filterBar.addFilter(this.moreFiltersDropDownUI);
-
- this.resourceCategoryFilterUI =
- new UI.FilterBar.NamedBitSetFilterUI(filterItems, this.networkResourceTypeFiltersSetting);
- UI.ARIAUtils.setLabel(this.resourceCategoryFilterUI.element(), i18nString(UIStrings.requestTypesToInclude));
- this.resourceCategoryFilterUI.addEventListener(
- UI.FilterBar.FilterUIEvents.FILTER_CHANGED, this.filterChanged.bind(this), this);
- filterBar.addFilter(this.resourceCategoryFilterUI);
- } else {
- this.dataURLFilterUI = new UI.FilterBar.CheckboxFilterUI(
- i18nString(UIStrings.hideDataUrls), true, this.networkHideDataURLSetting, 'hide-data-urls');
- this.dataURLFilterUI.addEventListener(
- UI.FilterBar.FilterUIEvents.FILTER_CHANGED, this.filterChanged.bind(this), this);
- UI.Tooltip.Tooltip.install(this.dataURLFilterUI.element(), i18nString(UIStrings.hidesDataAndBlobUrls));
- filterBar.addFilter(this.dataURLFilterUI);
-
- this.hideChromeExtensionsUI = new UI.FilterBar.CheckboxFilterUI(
- i18nString(UIStrings.chromeExtensions), true, this.networkHideChromeExtensions, 'hide-extension-urls');
- this.hideChromeExtensionsUI.addEventListener(
- UI.FilterBar.FilterUIEvents.FILTER_CHANGED, this.filterChanged.bind(this), this);
- UI.Tooltip.Tooltip.install(this.hideChromeExtensionsUI.element(), i18nString(UIStrings.hideChromeExtension));
- filterBar.addFilter(this.hideChromeExtensionsUI);
-
- this.resourceCategoryFilterUI =
- new UI.FilterBar.NamedBitSetFilterUI(filterItems, this.networkResourceTypeFiltersSetting);
- UI.ARIAUtils.setLabel(this.resourceCategoryFilterUI.element(), i18nString(UIStrings.requestTypesToInclude));
- this.resourceCategoryFilterUI.addEventListener(
- UI.FilterBar.FilterUIEvents.FILTER_CHANGED, this.filterChanged.bind(this), this);
- filterBar.addFilter(this.resourceCategoryFilterUI);
-
- this.onlyBlockedResponseCookiesFilterUI = new UI.FilterBar.CheckboxFilterUI(
- i18nString(UIStrings.hasBlockedCookies), true, this.networkShowBlockedCookiesOnlySetting,
- 'only-show-blocked-cookies');
- this.onlyBlockedResponseCookiesFilterUI.addEventListener(
- UI.FilterBar.FilterUIEvents.FILTER_CHANGED, this.filterChanged.bind(this), this);
- UI.Tooltip.Tooltip.install(
- this.onlyBlockedResponseCookiesFilterUI.element(), i18nString(UIStrings.onlyShowRequestsWithBlockedCookies));
- filterBar.addFilter(this.onlyBlockedResponseCookiesFilterUI);
-
- this.onlyBlockedRequestsUI = new UI.FilterBar.CheckboxFilterUI(
- i18nString(UIStrings.blockedRequests), true, this.networkOnlyBlockedRequestsSetting,
- 'only-show-blocked-requests');
- this.onlyBlockedRequestsUI.addEventListener(
- UI.FilterBar.FilterUIEvents.FILTER_CHANGED, this.filterChanged.bind(this), this);
- UI.Tooltip.Tooltip.install(this.onlyBlockedRequestsUI.element(), i18nString(UIStrings.onlyShowBlockedRequests));
- filterBar.addFilter(this.onlyBlockedRequestsUI);
-
- this.onlyThirdPartyFilterUI = new UI.FilterBar.CheckboxFilterUI(
- i18nString(UIStrings.thirdParty), true, this.networkOnlyThirdPartySetting, 'only-show-third-party');
- this.onlyThirdPartyFilterUI.addEventListener(
- UI.FilterBar.FilterUIEvents.FILTER_CHANGED, this.filterChanged.bind(this), this);
- UI.Tooltip.Tooltip.install(
- this.onlyThirdPartyFilterUI.element(), i18nString(UIStrings.onlyShowThirdPartyRequests));
- filterBar.addFilter(this.onlyThirdPartyFilterUI);
- }
+ this.resourceCategoryFilterUI =
+ new UI.FilterBar.NamedBitSetFilterUI(filterItems, this.networkResourceTypeFiltersSetting);
+ UI.ARIAUtils.setLabel(this.resourceCategoryFilterUI.element(), i18nString(UIStrings.requestTypesToInclude));
+ this.resourceCategoryFilterUI.addEventListener(
+ UI.FilterBar.FilterUIEvents.FILTER_CHANGED, this.filterChanged.bind(this), this);
+ filterBar.addFilter(this.resourceCategoryFilterUI);
this.filterParser = new TextUtils.TextUtils.FilterParser(searchKeys);
this.suggestionBuilder =
@@ -1617,19 +1567,11 @@
// TODO(crbug.com/1477668)
setTextFilterValue(filterString: string): void {
this.textFilterUI.setValue(filterString);
- if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN)) {
- this.networkHideDataURLSetting.set(false);
- this.networkShowBlockedCookiesOnlySetting.set(false);
- this.networkOnlyBlockedRequestsSetting.set(false);
- this.networkOnlyThirdPartySetting.set(false);
- this.networkHideChromeExtensions.set(false);
- } else {
- this.dataURLFilterUI?.setChecked(false);
- this.onlyBlockedResponseCookiesFilterUI?.setChecked(false);
- this.onlyBlockedRequestsUI?.setChecked(false);
- this.onlyThirdPartyFilterUI?.setChecked(false);
- this.hideChromeExtensionsUI?.setChecked(false);
- }
+ this.networkHideDataURLSetting.set(false);
+ this.networkShowBlockedCookiesOnlySetting.set(false);
+ this.networkOnlyBlockedRequestsSetting.set(false);
+ this.networkOnlyThirdPartySetting.set(false);
+ this.networkHideChromeExtensions.set(false);
this.resourceCategoryFilterUI.reset();
}
@@ -2019,22 +1961,13 @@
if (!this.resourceCategoryFilterUI.accept(categoryName)) {
return false;
}
- const [hideDataURL, blockedCookies, blockedRequests, thirdParty, hideExtensionURL] =
- Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN) ?
- [
- this.networkHideDataURLSetting.get(),
- this.networkShowBlockedCookiesOnlySetting.get(),
- this.networkOnlyBlockedRequestsSetting.get(),
- this.networkOnlyThirdPartySetting.get(),
- this.networkHideChromeExtensions.get(),
- ] :
- [
- this.dataURLFilterUI?.checked(),
- this.onlyBlockedResponseCookiesFilterUI?.checked(),
- this.onlyBlockedRequestsUI?.checked(),
- this.onlyThirdPartyFilterUI?.checked(),
- this.hideChromeExtensionsUI?.checked(),
- ];
+ const [hideDataURL, blockedCookies, blockedRequests, thirdParty, hideExtensionURL] = [
+ this.networkHideDataURLSetting.get(),
+ this.networkShowBlockedCookiesOnlySetting.get(),
+ this.networkOnlyBlockedRequestsSetting.get(),
+ this.networkOnlyThirdPartySetting.get(),
+ this.networkHideChromeExtensions.get(),
+ ];
if (hideDataURL && (request.parsedURL.isDataURL() || request.parsedURL.isBlobURL())) {
return false;
