Fix network category filters when using locales other than en-US

The CL https://crrev.com/c/5938364 changed resource categories to
use an un-localized name as a key, as this was messsing with VE
logging.

This broke the filter UI for non-english locales, as the
NetworkLogView would retrieve the "title" instead of the "name" from
each NetworkRequest to check if a filter applies.

This CL fixes this and adds a regression test.

[email protected]

Fixed: 382596366
Change-Id: I039614285a99b948ea21b224255be557ad5a5fb4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6085916
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Simon Zünd <[email protected]>

Author: szuend

front_end/panels/network/BUILD.gn

@@ -162,6 +162,7 @@ ts_library("unittests") {
     ":bundle",
     ":meta",
     "../../core/common:bundle",
+    "../../core/i18n:bundle",
     "../../core/platform:bundle",
     "../../core/sdk:bundle",
     "../../generated:protocol",

front_end/panels/network/NetworkLogView.test.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 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 type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -703,6 +704,37 @@ describeWithMockConnection('NetworkLogView', () => {
     ]);
   });
 
+  it('filters localized resource categories', async () => {
+    // "simulate" other locale by stubbing out resource categories with a different text
+    sinon.stub(Common.ResourceType.resourceCategories.Document, 'title')
+        .returns(i18n.i18n.lockedString('<localized document>'));
+    sinon.stub(Common.ResourceType.resourceCategories.XHR, 'title').returns(i18n.i18n.lockedString('<localized xhr>'));
+
+    const documentRequest = createNetworkRequest('urlDocument', {finished: true});
+    documentRequest.setResourceType(Common.ResourceType.resourceTypes.Document);
+    const fetchRequest = createNetworkRequest('urlFetch', {finished: true});
+    fetchRequest.setResourceType(Common.ResourceType.resourceTypes.Fetch);
+
+    const filterBar = new UI.FilterBar.FilterBar('network-panel', true);
+    networkLogView = createNetworkLogView(filterBar);
+
+    networkLogView.markAsRoot();
+    networkLogView.show(document.body);
+    const rootNode = networkLogView.columns().dataGrid().rootNode();
+    const shownRequestUrls = () => rootNode.children.map(
+        n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url() as string | undefined);
+
+    const setting = Common.Settings.Settings.instance().createSetting('network-resource-type-filters', {});
+    setting.set({all: true});
+    assert.deepEqual(shownRequestUrls(), ['urlDocument', 'urlFetch']);
+
+    setting.set({[Common.ResourceType.resourceCategories.Document.name]: true});
+    assert.deepEqual(shownRequestUrls(), ['urlDocument']);
+
+    setting.set({[Common.ResourceType.resourceCategories.XHR.name]: true});
+    assert.deepEqual(shownRequestUrls(), ['urlFetch']);
+  });
+
   it('"Copy all" commands respects filters', async () => {
     createOverrideRequests();
 

front_end/panels/network/NetworkLogView.ts

@@ -1999,7 +1999,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     if (this.timeFilter && !this.timeFilter(request)) {
       return false;
     }
-    const categoryName = request.resourceType().category().title();
+    const categoryName = request.resourceType().category().name;
     if (!this.resourceCategoryFilterUI.accept(categoryName)) {
       return false;
     }