[RPP] Add logs for the timeline navigation setting

Add logs for opening the shortcuts dialog and selecting different navigation options from the dialog.

Bug: 313757601
Change-Id: I3646fbfad73e9f8061c2e9c642f18b00de39b146
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6091588
Commit-Queue: Alina Varkki <[email protected]>
Auto-Submit: Alina Varkki <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>

Author: AlinaVarkki

front_end/panels/timeline/TimelinePanel.ts

@@ -1115,6 +1115,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       this.#setupNavigationSetting();
       this.#shortcutsDialog.prependElement(this.#navigationRadioButtons);
       const dialogToolbarItem = new UI.Toolbar.ToolbarItem(this.#shortcutsDialog);
+      dialogToolbarItem.element.setAttribute(
+          'jslog', `${VisualLogging.action().track({click: true}).context('timeline.shortcuts-dialog-toggle')}`);
       this.panelRightToolbar.appendToolbarItem(dialogToolbarItem);
       // The setting could have been changed from the Devtools Settings. Therefore, we
       // need to update the radio buttons selection when the dialog is open.
@@ -1131,15 +1133,19 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     // Change EventListener is only triggered when the radio button is selected
     this.#modernNavRadioButton.radioElement.addEventListener('change', () => {
       this.#shortcutsDialog.data = {shortcuts: this.#getShortcutsInfo(/* isNavClassic */ false)};
-      Common.Settings.moduleSetting('flamechart-selected-navigation').set('modern');
+      Common.Settings.moduleSetting('timeline.select-modern-navigation').set('modern');
     });
     this.#classicNavRadioButton.radioElement.addEventListener('change', () => {
       this.#shortcutsDialog.data = {shortcuts: this.#getShortcutsInfo(/* isNavClassic */ true)};
-      Common.Settings.moduleSetting('flamechart-selected-navigation').set('classic');
+      Common.Settings.moduleSetting('timeline.select-classic-navigation').set('classic');
     });
 
     this.#navigationRadioButtons.appendChild(this.#modernNavRadioButton);
+    this.#modernNavRadioButton.setAttribute(
+        'jslog', `${VisualLogging.action().track({click: true}).context('flamechart-select-modern-navigation')}`);
     this.#navigationRadioButtons.appendChild(this.#classicNavRadioButton);
+    this.#classicNavRadioButton.setAttribute(
+        'jslog', `${VisualLogging.action().track({click: true}).context('flamechart-select-classic-navigation')}`);
 
     return this.#navigationRadioButtons;
   }

front_end/ui/visual_logging/KnownContextValues.ts

@@ -1420,7 +1420,6 @@ export const knownContextValues = new Set([
   'fix-this-issue',
   'flame',
   'flamechart-selected-navigation',
-  'flamechart-selected-navigation-modern',
   'flex',
   'flex-basis',
   'flex-direction',
@@ -3490,8 +3489,11 @@ export const knownContextValues = new Set([
   'timeline.save-to-file-more-options',
   'timeline.save-to-file-with-annotations',
   'timeline.save-to-file-without-annotations',
+  'timeline.select-classic-navigation',
+  'timeline.select-modern-navigation',
   'timeline.settings',
   'timeline.setup',
+  'timeline.shortcuts-dialog-toggle',
   'timeline.show-history',
   'timeline.sidebar',
   'timeline.sidebar-insights-category-select',