Add VE logging for Flag Controls and Cookie Report elements

We will now track clicks on the "Controls" and "Third-party cookies" sidebar elements. Also, tracks clicks on each of the controls tool's checkboxes and the toggle. Bug: 386355192 Change-Id: I7e5f5ce1cf03cb931a47d3e86d29f1e83c568ee5 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6125938 Reviewed-by: Shuran Huang <[email protected]> Commit-Queue: Jalon Thomas <[email protected]> Reviewed-by: Danil Somsikov <[email protected]>
ChromeDevTools · Jan 10, 2025 · 8245ed1 · 8245ed1
1 parent ed19c1e
commit 8245ed1
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 9 deletions.
diff --git a/front_end/panels/security/CookieControlsTreeElement.ts b/front_end/panels/security/CookieControlsTreeElement.ts
@@ -6,8 +6,8 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import {SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
 
 export class CookieControlsTreeElement extends SecurityPanelSidebarTreeElement {
-  constructor(title: string) {
-    super(title);
+  constructor(title: string, jslogContext: string|number) {
+    super(title, false, jslogContext);
     this.setLeadingIcons([IconButton.Icon.create('gear', 'cookie-icon')]);
   }
 

diff --git a/front_end/panels/security/CookieControlsView.ts b/front_end/panels/security/CookieControlsView.ts
@@ -160,7 +160,9 @@ export class CookieControlsView extends UI.Widget.VBox {
             .disabled=${Boolean(enterpriseEnabledSetting.get())}
             @switchchange=${(e: Event)=>{
                 input.inputChanged((e.target as HTMLInputElement).checked, toggleEnabledSetting);
-              }}>
+              }}
+            jslog=${VisualLogging.toggle(toggleEnabledSetting.name).track({click: true})}
+          >
           </devtools-switch>
         </div>
       </div>
@@ -175,6 +177,7 @@ export class CookieControlsView extends UI.Widget.VBox {
             @change=${(e: Event)=>{
               input.inputChanged((e.target as HTMLInputElement).checked, gracePeriodDisabledSetting);
             }}
+            jslog=${VisualLogging.toggle(gracePeriodDisabledSetting.name).track({click: true})}
           >
           <div class="text">
             <div class="body">${i18nString(UIStrings.gracePeriodTitle)}</div>
@@ -197,6 +200,7 @@ export class CookieControlsView extends UI.Widget.VBox {
             @change=${(e: Event)=>{
               input.inputChanged((e.target as HTMLInputElement).checked, heuristicsDisabledSetting);
             }}
+            jslog=${VisualLogging.toggle(heuristicsDisabledSetting.name).track({click: true})}
           >
           <div class="text">
             <div class="body">${i18nString(UIStrings.heuristicTitle)}</div>

diff --git a/front_end/panels/security/CookieReportTreeElement.ts b/front_end/panels/security/CookieReportTreeElement.ts
@@ -6,8 +6,8 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import {SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
 
 export class CookieReportTreeElement extends SecurityPanelSidebarTreeElement {
-  constructor(title: string) {
-    super(title);
+  constructor(title: string, jslogContext: string|number) {
+    super(title, false, jslogContext);
     this.setLeadingIcons([IconButton.Icon.create('cookie', 'cookie-icon')]);
   }
 

diff --git a/front_end/panels/security/SecurityPanelSidebar.ts b/front_end/panels/security/SecurityPanelSidebar.ts
@@ -95,8 +95,9 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
 
     if (Common.Settings.Settings.instance().getHostConfig().devToolsPrivacyUI?.enabled) {
       const privacyTreeSection = this.#addSidebarSection(i18nString(UIStrings.privacy), 'privacy');
-      privacyTreeSection.appendChild(new CookieControlsTreeElement(i18nString(UIStrings.flagControls)));
-      privacyTreeSection.appendChild(new CookieReportTreeElement(i18nString(UIStrings.cookieReport)));
+      privacyTreeSection.appendChild(
+          new CookieControlsTreeElement(i18nString(UIStrings.flagControls), 'cookie-flag-controls'));
+      privacyTreeSection.appendChild(new CookieReportTreeElement(i18nString(UIStrings.cookieReport), 'cookie-report'));
     }
 
     const securitySectionTitle = i18nString(UIStrings.security);

diff --git a/front_end/panels/security/SecurityPanelSidebarTreeElement.ts b/front_end/panels/security/SecurityPanelSidebarTreeElement.ts
@@ -4,8 +4,8 @@
 import * as UI from '../../ui/legacy/legacy.js';
 
 export class SecurityPanelSidebarTreeElement extends UI.TreeOutline.TreeElement {
-  constructor(title: string = '', expandable: boolean = false) {
-    super(title, expandable);
+  constructor(title: string = '', expandable: boolean = false, jslogContext?: string|number) {
+    super(title, expandable, jslogContext);
     UI.ARIAUtils.setLabel(this.listItemElement, title);
   }
 }
diff --git a/front_end/ui/visual_logging/KnownContextValues.ts b/front_end/ui/visual_logging/KnownContextValues.ts
@@ -851,7 +851,9 @@ export const knownContextValues = new Set([
   'converter-puppeteer-firefox',
   'converter-puppeteer-replay',
   'cookie-control-override-enabled',
+  'cookie-flag-controls',
   'cookie-preview',
+  'cookie-report',
   'cookie-view-show-decoded',
   'cookies',
   'cookies-data',