Fix Impact Report Known Context Values to suppress errors

When the "Allowed by exception" filter chip is displayed, an "Unknown
VE Context" error is emitted.

1. Change filter bar to use jslogContext instead of name for visual
logging.

2. Use kebab-case in the Impact Report's jslogContext values, and
modify Known Context Values accordingly.

3. Change the impression values for the network helper filter-bar items
to align with the new jslogContext values

Bug: 396112906
Change-Id: Ia10d5836450f2122f4948f3351c6050a07254ab2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6190047
Reviewed-by: Danil Somsikov <[email protected]>
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Jalon Thomas <[email protected]>

Author: jalonthomas

front_end/panels/security/CookieReportView.ts

@@ -352,15 +352,15 @@ export class CookieReportView extends UI.Widget.VBox {
         name: UIStrings.blocked,
         label: () => i18nString(UIStrings.blocked),
         title: UIStrings.blocked,
-        jslogContext: UIStrings.blocked,
+        jslogContext: 'blocked',
       });
     }
     if (this.#cookieRows.values().some(n => n.status === IssuesManager.CookieIssue.CookieStatus.ALLOWED)) {
       filterItems.push({
         name: UIStrings.allowed,
         label: () => i18nString(UIStrings.allowed),
         title: UIStrings.allowed,
-        jslogContext: UIStrings.allowed,
+        jslogContext: 'allowed',
       });
     }
     if (this.#cookieRows.values().some(
@@ -370,7 +370,7 @@ export class CookieReportView extends UI.Widget.VBox {
         name: UIStrings.allowedByException,
         label: () => i18nString(UIStrings.allowedByException),
         title: UIStrings.allowedByException,
-        jslogContext: UIStrings.allowedByException,
+        jslogContext: 'allowed-by-exception',
       });
     }
 

front_end/ui/legacy/FilterBar.ts

@@ -341,12 +341,12 @@ export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper<Filt
     this.typeFilterElementTypeNames = new WeakMap();
     this.allowedTypes = new Set();
     this.typeFilterElements = [];
-    this.addBit(NamedBitSetFilterUI.ALL_TYPES, i18nString(UIStrings.allStrings));
+    this.addBit(NamedBitSetFilterUI.ALL_TYPES, i18nString(UIStrings.allStrings), NamedBitSetFilterUI.ALL_TYPES);
     this.typeFilterElements[0].tabIndex = 0;
     this.filtersElement.createChild('div', 'filter-bitset-filter-divider');
 
     for (let i = 0; i < items.length; ++i) {
-      this.addBit(items[i].name, items[i].label(), items[i].title);
+      this.addBit(items[i].name, items[i].label(), items[i].jslogContext, items[i].title);
     }
 
     if (setting) {
@@ -400,7 +400,7 @@ export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper<Filt
     this.dispatchEventToListeners(FilterUIEvents.FILTER_CHANGED);
   }
 
-  private addBit(name: string, label: string, title?: string): void {
+  private addBit(name: string, label: string, jslogContext: string, title?: string): void {
     const typeFilterElement = this.filtersElement.createChild('span', name);
     typeFilterElement.tabIndex = -1;
     this.typeFilterElementTypeNames.set(typeFilterElement, name);
@@ -411,7 +411,7 @@ export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper<Filt
     }
     typeFilterElement.addEventListener('click', this.onTypeFilterClicked.bind(this), false);
     typeFilterElement.addEventListener('keydown', this.onTypeFilterKeydown.bind(this), false);
-    typeFilterElement.setAttribute('jslog', `${VisualLogging.item(name).track({click: true})}`);
+    typeFilterElement.setAttribute('jslog', `${VisualLogging.item(jslogContext).track({click: true})}`);
     this.typeFilterElements.push(typeFilterElement);
   }
 

front_end/ui/visual_logging/KnownContextValues.ts

@@ -211,15 +211,11 @@ export const knownContextValues = new Set([
   '75%',
   '8',
   '9',
-  'Allowed By Exception',
-  'Allowed',
-  'AllowedByException',
   'ArrowDown',
   'ArrowLeft',
   'ArrowRight',
   'ArrowUp',
   'Backspace',
-  'Blocked',
   'CSS',
   'CoLoR',
   'Delete',
@@ -359,6 +355,8 @@ export const knownContextValues = new Set([
   'allow-pasting',
   'allow-scroll-past-eof',
   'allow-scroll-past-eof-false',
+  'allowed',
+  'allowed-by-exception',
   'alpha',
   'alt-!',
   'alt-:',
@@ -548,6 +546,7 @@ export const knownContextValues = new Set([
   'block-request-domain',
   'block-request-url',
   'block-size',
+  'blocked',
   'blocked-by-response-details',
   'blocking',
   'blur',
@@ -3740,6 +3739,7 @@ export const knownContextValues = new Set([
   'waiting',
   'waiting-entry-inspect',
   'warning',
+  'wasm',
   'wasm-auto-stepping',
   'wasm-auto-stepping-false',
   'watch-test-expression',

test/e2e/helpers/network-helpers.ts

@@ -186,17 +186,17 @@ export function veImpressionForNetworkPanel(options?: {newFilterBar?: boolean})
             'Section', 'filter-bitset',
             [
               veImpression('Item', 'all'),
-              veImpression('Item', 'FetchandXHR'),
-              veImpression('Item', 'Document'),
-              veImpression('Item', 'CSS'),
-              veImpression('Item', 'JavaScript'),
-              veImpression('Item', 'Font'),
-              veImpression('Item', 'Image'),
-              veImpression('Item', 'Media'),
-              veImpression('Item', 'Manifest'),
-              veImpression('Item', 'WebSocket'),
-              veImpression('Item', 'WebAssembly'),
-              veImpression('Item', 'Other'),
+              veImpression('Item', 'xhr'),
+              veImpression('Item', 'document'),
+              veImpression('Item', 'stylesheet'),
+              veImpression('Item', 'script'),
+              veImpression('Item', 'font'),
+              veImpression('Item', 'image'),
+              veImpression('Item', 'media'),
+              veImpression('Item', 'manifest'),
+              veImpression('Item', 'web-socket'),
+              veImpression('Item', 'wasm'),
+              veImpression('Item', 'other'),
             ]),
         veImpression('TextField', 'filter'),
         veImpression('Toggle', 'invert-filter'),