[RPP] Update Devtools Setting for Navigation and Make it sync with the one in the dialog

The state of the navigation radio buttons was only updated when they were initiated. Instead, update the checked radio button every time the dialog is open since it can also be updated from the Devtools Settings.

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

Author: AlinaVarkki

front_end/panels/timeline/TimelinePanel.ts

@@ -459,6 +459,12 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
   #eventToRelatedInsights: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap = new Map();
   #shortcutsDialog: Dialogs.ShortcutDialog.ShortcutDialog = new Dialogs.ShortcutDialog.ShortcutDialog();
+  /**
+   * Navigation radio buttons located in the shortcuts dialog.
+   */
+  #navigationRadioButtons = document.createElement('form');
+  #modernNavRadioButton = UI.UIUtils.createRadioLabel('flamechart-selected-navigation', 'Modern');
+  #classicNavRadioButton = UI.UIUtils.createRadioLabel('flamechart-selected-navigation', 'Classic');
 
   #onMainEntryHovered: (event: Common.EventTarget.EventTargetEvent<number>) => void;
 
@@ -1106,37 +1112,45 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
 
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ALTERNATIVE_NAVIGATION)) {
-      this.#shortcutsDialog.prependElement(this.#getNavigationSetting());
+      this.#setupNavigationSetting();
+      this.#shortcutsDialog.prependElement(this.#navigationRadioButtons);
       const dialogToolbarItem = new UI.Toolbar.ToolbarItem(this.#shortcutsDialog);
       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.
+      this.#shortcutsDialog.addEventListener('click', this.#updateNavigationSettingSelection.bind(this));
     }
   }
 
-  #getNavigationSetting(): HTMLElement {
+  #setupNavigationSetting(): HTMLElement {
     const currentNavSetting = Common.Settings.moduleSetting('flamechart-selected-navigation').get();
     this.#shortcutsDialog.data = {shortcuts: this.#getShortcutsInfo(currentNavSetting === 'classic')};
 
-    const navigationRadioButtons = document.createElement('form');
-    navigationRadioButtons.classList.add('nav-radio-buttons');
-    UI.ARIAUtils.markAsRadioGroup(navigationRadioButtons);
-    const modernNavRadioButton = UI.UIUtils.createRadioLabel(
-        'flamechart-selected-navigation', 'Modern', /* checked */ currentNavSetting === 'modern');
+    this.#navigationRadioButtons.classList.add('nav-radio-buttons');
+    UI.ARIAUtils.markAsRadioGroup(this.#navigationRadioButtons);
     // Change EventListener is only triggered when the radio button is selected
-    modernNavRadioButton.radioElement.addEventListener('change', () => {
+    this.#modernNavRadioButton.radioElement.addEventListener('change', () => {
       this.#shortcutsDialog.data = {shortcuts: this.#getShortcutsInfo(/* isNavClassic */ false)};
       Common.Settings.moduleSetting('flamechart-selected-navigation').set('modern');
     });
-    const classicNavRadioButton = UI.UIUtils.createRadioLabel(
-        'flamechart-selected-navigation', 'Classic', /* checked */ currentNavSetting === 'classic');
-    classicNavRadioButton.radioElement.addEventListener('change', () => {
+    this.#classicNavRadioButton.radioElement.addEventListener('change', () => {
       this.#shortcutsDialog.data = {shortcuts: this.#getShortcutsInfo(/* isNavClassic */ true)};
       Common.Settings.moduleSetting('flamechart-selected-navigation').set('classic');
     });
 
-    navigationRadioButtons.appendChild(modernNavRadioButton);
-    navigationRadioButtons.appendChild(classicNavRadioButton);
+    this.#navigationRadioButtons.appendChild(this.#modernNavRadioButton);
+    this.#navigationRadioButtons.appendChild(this.#classicNavRadioButton);
+
+    return this.#navigationRadioButtons;
+  }
 
-    return navigationRadioButtons;
+  #updateNavigationSettingSelection(): void {
+    const currentNavSetting = Common.Settings.moduleSetting('flamechart-selected-navigation').get();
+    if (currentNavSetting === 'classic') {
+      this.#classicNavRadioButton.radioElement.checked = true;
+    } else if (currentNavSetting === 'modern') {
+      this.#modernNavRadioButton.radioElement.checked = true;
+    }
   }
 
   #getShortcutsInfo(isNavClassic: boolean): Dialogs.ShortcutDialog.Shortcut[] {

front_end/ui/legacy/components/perf_ui/perf_ui-meta.ts

@@ -11,17 +11,19 @@ import type * as PerfUI from './perf_ui.js';
 
 const UIStrings = {
   /**
-   *@description Title of a setting under the Performance category in Settings
+   *@description Title of a setting under the Performance category in Settings.
+   * Selected navigation allows switching between 2 different sets of shortcuts
+   * and actions (like zoom on scroll or crtl/cmd + scroll) for navigating the performance panel.
    */
-  flamechartMouseWheelAction: 'Flamechart mouse wheel action:',
+  flamechartSelectedNavigation: 'Flamechart navigation:',
   /**
-   *@description The action to scroll
+   *@description Modern navigation option in the Performance Panel.
    */
-  scroll: 'Scroll',
+  modern: 'Modern',
   /**
-   *@description Text for zooming in
+   *@description Classic navigation option in the Performance Panel.
    */
-  zoom: 'Zoom',
+  classic: 'Classic',
   /**
    * @description Title of a setting under the Memory category in Settings. Live memory is memory
    * that is still in-use by the program (not dead). Allocation of live memory is when the program
@@ -69,19 +71,19 @@ UI.ActionRegistration.registerActionExtension({
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.PERFORMANCE,
   storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.flamechartMouseWheelAction),
+  title: i18nLazyString(UIStrings.flamechartSelectedNavigation),
   settingName: 'flamechart-selected-navigation',
   settingType: Common.Settings.SettingType.ENUM,
   defaultValue: 'classic',
   options: [
     {
-      title: i18nLazyString(UIStrings.scroll),
-      text: i18nLazyString(UIStrings.scroll),
+      title: i18nLazyString(UIStrings.modern),
+      text: i18nLazyString(UIStrings.modern),
       value: 'modern',
     },
     {
-      title: i18nLazyString(UIStrings.zoom),
-      text: i18nLazyString(UIStrings.zoom),
+      title: i18nLazyString(UIStrings.classic),
+      text: i18nLazyString(UIStrings.classic),
       value: 'classic',
     },
   ],