[RPP] UMA histogram for the Timeline navigation setting

Let's log the setting state every time that the first timeline is loaded in a new session. Logging on the first timeline load will make sure the navigation selection is only logged for people who use the performance panel.
Logging on each first timeline load will allow us to get a number of people actually using either option instead of just the ones who try it out by toggling the setting.

Bug: 313757601
Change-Id: If8a6a926e57c667f1e47eb3160cb17a3c547b2e6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6099210
Auto-Submit: Alina Varkki <alinavarkki@chromium.org>
Reviewed-by: Andres Olivares <andoli@chromium.org>
Commit-Queue: Alina Varkki <alinavarkki@chromium.org>

front_end/core/host/InspectorFrontendHostAPI.ts

@@ -478,6 +478,7 @@ export const enum EnumeratedHistogram {
   SourcesPanelFileDebugged = 'DevTools.SourcesPanelFileDebugged',
   SourcesPanelFileOpened = 'DevTools.SourcesPanelFileOpened',
   NetworkPanelResponsePreviewOpened = 'DevTools.NetworkPanelResponsePreviewOpened',
+  TimelineNavigationSettingState = 'DevTools.TimelineNavigationSettingState',
   StyleTextCopied = 'DevTools.StyleTextCopied',
   CSSHintShown = 'DevTools.CSSHintShown',
   LighthouseModeRun = 'DevTools.LighthouseModeRun',

front_end/core/host/UserMetrics.ts

@@ -182,6 +182,11 @@ export class UserMetrics {
         EnumeratedHistogram.ExperimentEnabledAtLaunch, experiment, DevtoolsExperiments.MAX_VALUE);
   }
 
+  navigationSettingAtFirstTimelineLoad(state: TimelineNavigationSetting): void {
+    InspectorFrontendHostInstance.recordEnumeratedHistogram(
+        EnumeratedHistogram.TimelineNavigationSettingState, state, TimelineNavigationSetting.MAX_VALUE);
+  }
+
   experimentDisabledAtLaunch(experimentId: string): void {
     const experiment = DevtoolsExperiments[experimentId as keyof typeof DevtoolsExperiments];
     if (experiment === undefined) {
@@ -1431,3 +1436,13 @@ export const enum AnimationPointDragType {
   OTHER = 4,
   MAX_VALUE = 5,
 }
+
+export const enum TimelineNavigationSetting {
+  // Setting is set to classic when the first trace of the session is recorded or loaded.
+  CLASSIC_AT_SESSION_FIRST_TRACE = 0,
+  // Setting is set to modern when the first trace of the session is recorded or loaded.
+  MODERN_AT_SESSION_FIRST_TRACE = 1,
+  SWITCHED_TO_CLASSIC = 2,
+  SWITCHED_TO_MODERN = 3,
+  MAX_VALUE = 4,
+}

front_end/devtools_compatibility.js

@@ -438,6 +438,7 @@ const EnumeratedHistogram = {
   SourcesPanelFileDebugged: 'DevTools.SourcesPanelFileDebugged',
   SourcesPanelFileOpened: 'DevTools.SourcesPanelFileOpened',
   NetworkPanelResponsePreviewOpened: 'DevTools.NetworkPanelResponsePreviewOpened',
+  TimelineNavigationSettingState: 'DevTools.TimelineNavigationSettingState',
   StyleTextCopied: 'DevTools.StyleTextCopied',
   SyncSetting: 'DevTools.SyncSetting',
   CSSPropertyDocumentation: 'DevTools.CSSPropertyDocumentation',

front_end/panels/timeline/TimelinePanel.ts

@@ -1167,8 +1167,12 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     const currentNavSetting = Common.Settings.moduleSetting('flamechart-selected-navigation').get();
     if (currentNavSetting === 'classic') {
       this.#classicNavRadioButton.radioElement.checked = true;
+      Host.userMetrics.navigationSettingAtFirstTimelineLoad(
+          Host.UserMetrics.TimelineNavigationSetting.SWITCHED_TO_CLASSIC);
     } else if (currentNavSetting === 'modern') {
       this.#modernNavRadioButton.radioElement.checked = true;
+      Host.userMetrics.navigationSettingAtFirstTimelineLoad(
+          Host.UserMetrics.TimelineNavigationSetting.SWITCHED_TO_MODERN);
     }
   }
 
@@ -2048,6 +2052,18 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
 
     this.#showSidebarIfRequired();
+
+    // When the timeline is loaded for the first time, log what navigation setting is selected.
+    // This will allow us to get an estimate number of people using each option.
+    if (this.#traceEngineModel.size() === 1) {
+      if (Common.Settings.moduleSetting('flamechart-selected-navigation').get() === 'classic') {
+        Host.userMetrics.navigationSettingAtFirstTimelineLoad(
+            Host.UserMetrics.TimelineNavigationSetting.CLASSIC_AT_SESSION_FIRST_TRACE);
+      } else {
+        Host.userMetrics.navigationSettingAtFirstTimelineLoad(
+            Host.UserMetrics.TimelineNavigationSetting.MODERN_AT_SESSION_FIRST_TRACE);
+      }
+    }
   }
 
   /**