[network] Fix VE context values for filter bar resource categories

Currently we use localized resource category names for the VE context,
which breaks when using locales other than en-US.

This CL fixes the problem by using en-US consistently as the underlying
name for the category, while the label in the UI still gets transalted.

Note that ideally we'd just use the enum variant name, but to stay
backwards compatible with the already logged context names, we use the
english UI strings.

[email protected]

Bug: None
Change-Id: I94929e0157482cd37f44174df4a53a33cf7181f7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5938364
Commit-Queue: Simon Zünd <[email protected]>
Auto-Submit: Simon Zünd <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: szuend

front_end/core/common/ResourceType.test.ts

@@ -18,15 +18,15 @@ const typeTestTitle = () => 'Type Test Title' as Platform.UIString.LocalizedStri
 
 describe('ResourceCategory class', () => {
   it('is able to be instantiated successfully', () => {
-    const resourceCategory = new ResourceCategory(testTitle, testShortTitle);
+    const resourceCategory = new ResourceCategory('category name', testTitle, testShortTitle);
     assert.strictEqual(resourceCategory.title(), 'Test Title', 'title is not correct');
     assert.strictEqual(resourceCategory.shortTitle(), 'Test Short Title', 'short title is not correct');
   });
 });
 
 describeWithEnvironment('ResourceType class', () => {
   it('is able to be instantiated successfully', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(resourceType.name(), 'Type Test Name', 'name was not set correctly');
     assert.strictEqual(resourceType.title(), 'Type Test Title', 'title was not set correctly');
@@ -234,153 +234,153 @@ describeWithEnvironment('ResourceType class', () => {
   });
 
   it('is able to return its title successfully', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(resourceType.title(), 'Type Test Title', 'title was not returned correctly');
   });
 
   it('is able to return its isTextType value successfully', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isTextType(), 'isTextType was not returned correctly');
   });
 
   it('is able to return whether or not its a script if its name equals the value "script"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('script', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isScript(), 'the resource should be considered as a script');
   });
 
   it('is able to return whether or not its a script if its name equals the value "sm-script"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('sm-script', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isScript(), 'the resource should be considered as a script');
   });
 
   it('is able to return whether or not its a script if its name is not equal to the values "script" or "sm-script"',
      () => {
-       const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+       const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
        const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
        assert.isFalse(resourceType.isScript(), 'the resource should not be considered as a script');
      });
 
   it('is able to return whether or not its a document if its name equals the value "document"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('document', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isDocument(), 'the resource should be considered as a document');
   });
 
   it('is able to return whether or not its a document if its name does not equal the value "document"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isFalse(resourceType.isDocument(), 'the resource should not be considered as a document');
   });
 
   it('is able to determine if a resource has scripts if it is a script', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('script', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.hasScripts(), 'the resource should be considered as a having scripts');
   });
 
   it('is able to determine if a resource has scripts if it is a document', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('document', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.hasScripts(), 'the resource should be considered as a having scripts');
   });
 
   it('is able to determine if a resource has scripts if it is not a script or a document', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isFalse(resourceType.hasScripts(), 'the resource should not be considered as a having scripts');
   });
 
   it('is able to return whether or not its a stylesheet if its name equals the value "stylesheet"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('stylesheet', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isStyleSheet(), 'the resource should be considered as a stylesheet');
   });
 
   it('is able to return whether or not its a stylesheet if its name equals the value "sm-stylesheet"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('sm-stylesheet', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isStyleSheet(), 'the resource should be considered as a stylesheet');
   });
 
   it('is able to return whether or not its a stylesheet if its name is not equal to the values "stylesheet" or "sm-stylesheet"',
      () => {
-       const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+       const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
        const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
        assert.isFalse(resourceType.isStyleSheet(), 'the resource should not be considered as a stylesheet');
      });
 
   it('is able to return whether it is a document, a script or a stylesheet if it was a document', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('document', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isDocumentOrScriptOrStyleSheet(), 'the resource should be considered as a document');
   });
 
   it('is able to return whether it is a document, a script or a stylesheet if it was a script', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('script', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isDocumentOrScriptOrStyleSheet(), 'the resource should be considered as a script');
   });
 
   it('is able to return whether it is a document, a script or a stylesheet if it was a stylesheet', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('stylesheet', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isDocumentOrScriptOrStyleSheet(), 'the resource should be considered as a stylesheet');
   });
 
   it('is able to return whether it is a document, a script or a stylesheet if it was none of those things', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isFalse(
         resourceType.isDocumentOrScriptOrStyleSheet(),
         'the resource should be considered as a doucment, a script or a stylesheet');
   });
 
   it('is able to determine if it is from source map if it began with "sm-"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('sm-Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isFromSourceMap(), 'the resource should be considered to be from source map');
   });
 
   it('is able to determine if it is from source map if it did not begin with "sm-"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isFalse(resourceType.isFromSourceMap(), 'the resource should not be considered to be from source map');
   });
 
   it('is able to be converted to a string by returning its name', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(
         resourceType.toString(), 'Type Test Name', 'the resource type was not converted to a string correctly');
   });
 
   it('is able to return the canonical mime type of a document', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('document', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(
         resourceType.canonicalMimeType(), 'text/html', 'the canonical mime type was not returned correctly');
   });
 
   it('is able to return the canonical mime type of a script', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('script', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(
         resourceType.canonicalMimeType(), 'text/javascript', 'the canonical mime type was not returned correctly');
   });
 
   it('is able to return the canonical mime type of a stylesheet', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('stylesheet', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(
         resourceType.canonicalMimeType(), 'text/css', 'the canonical mime type was not returned correctly');
   });
 
   it('returns an empty string as a canonical mime type if it was not a document, a script or a stylesheet', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(resourceType.canonicalMimeType(), '', 'the canonical mime type was not returned correctly');
   });

front_end/core/common/ResourceType.ts

@@ -354,9 +354,13 @@ export class ResourceType {
 }
 
 export class ResourceCategory {
+  readonly name: string;
   title: () => Platform.UIString.LocalizedString;
   shortTitle: () => Platform.UIString.LocalizedString;
-  constructor(title: () => Platform.UIString.LocalizedString, shortTitle: () => Platform.UIString.LocalizedString) {
+  constructor(
+      name: string, title: () => Platform.UIString.LocalizedString,
+      shortTitle: () => Platform.UIString.LocalizedString) {
+    this.name = name;
     this.title = title;
     this.shortTitle = shortTitle;
   }
@@ -368,17 +372,22 @@ export class ResourceCategory {
 }
 
 export const resourceCategories = {
-  XHR: new ResourceCategory(i18nLazyString(UIStrings.fetchAndXHR), i18n.i18n.lockedLazyString('Fetch/XHR')),
-  Document: new ResourceCategory(i18nLazyString(UIStrings.document), i18nLazyString(UIStrings.doc)),
-  Stylesheet: new ResourceCategory(i18nLazyString(UIStrings.css), i18nLazyString(UIStrings.css)),
-  Script: new ResourceCategory(i18nLazyString(UIStrings.javascript), i18nLazyString(UIStrings.js)),
-  Font: new ResourceCategory(i18nLazyString(UIStrings.font), i18nLazyString(UIStrings.font)),
-  Image: new ResourceCategory(i18nLazyString(UIStrings.image), i18nLazyString(UIStrings.img)),
-  Media: new ResourceCategory(i18nLazyString(UIStrings.media), i18nLazyString(UIStrings.media)),
-  Manifest: new ResourceCategory(i18nLazyString(UIStrings.manifest), i18nLazyString(UIStrings.manifest)),
-  WebSocket: new ResourceCategory(i18nLazyString(UIStrings.websocket), i18nLazyString(UIStrings.ws)),
-  Wasm: new ResourceCategory(i18nLazyString(UIStrings.webassembly), i18nLazyString(UIStrings.wasm)),
-  Other: new ResourceCategory(i18nLazyString(UIStrings.other), i18nLazyString(UIStrings.other)),
+  XHR: new ResourceCategory(
+      'Fetch and XHR', i18nLazyString(UIStrings.fetchAndXHR), i18n.i18n.lockedLazyString('Fetch/XHR')),
+  Document: new ResourceCategory(UIStrings.document, i18nLazyString(UIStrings.document), i18nLazyString(UIStrings.doc)),
+  Stylesheet: new ResourceCategory(UIStrings.css, i18nLazyString(UIStrings.css), i18nLazyString(UIStrings.css)),
+  Script:
+      new ResourceCategory(UIStrings.javascript, i18nLazyString(UIStrings.javascript), i18nLazyString(UIStrings.js)),
+  Font: new ResourceCategory(UIStrings.font, i18nLazyString(UIStrings.font), i18nLazyString(UIStrings.font)),
+  Image: new ResourceCategory(UIStrings.image, i18nLazyString(UIStrings.image), i18nLazyString(UIStrings.img)),
+  Media: new ResourceCategory(UIStrings.media, i18nLazyString(UIStrings.media), i18nLazyString(UIStrings.media)),
+  Manifest:
+      new ResourceCategory(UIStrings.manifest, i18nLazyString(UIStrings.manifest), i18nLazyString(UIStrings.manifest)),
+  WebSocket:
+      new ResourceCategory(UIStrings.websocket, i18nLazyString(UIStrings.websocket), i18nLazyString(UIStrings.ws)),
+  Wasm: new ResourceCategory(
+      UIStrings.webassembly, i18nLazyString(UIStrings.webassembly), i18nLazyString(UIStrings.wasm)),
+  Other: new ResourceCategory(UIStrings.other, i18nLazyString(UIStrings.other), i18nLazyString(UIStrings.other)),
 };
 
 /**

front_end/panels/network/NetworkLogView.ts

@@ -587,7 +587,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
     const filterItems =
         Object.entries(Common.ResourceType.resourceCategories).map(([key, category]) => ({
-                                                                     name: category.title(),
+                                                                     name: category.name,
                                                                      label: () => category.shortTitle(),
                                                                      title: category.title(),
                                                                      jslogContext: