Add 'panel shown' perf metrics

facebookexperimental · Aug 27, 2024 · 658214e · 658214e
1 parent 7f6cfe3
commit 658214e
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/front_end/core/host/RNPerfMetrics.ts b/front_end/core/host/RNPerfMetrics.ts
@@ -23,6 +23,7 @@ class RNPerfMetrics {
   readonly #consoleErrorMethod = 'error';
   #listeners: Set<RNReliabilityEventListener> = new Set();
   #launchId: string|null = null;
+  #currentPanelName: string|null = null;
 
   addEventListener(listener: RNReliabilityEventListener): UnsubscribeFn {
     this.#listeners.add(listener);
@@ -186,10 +187,24 @@ class RNPerfMetrics {
     }
   }
 
+  panelShown(panelName: string, _isLaunching?: boolean): void {
+    // The current panel name would be sent along via #decorateEvent(…)
+    this.sendEvent({eventName: 'PanelShown', params: {newPanelName: panelName}});
+    // So we should only update the current panel name to the new one after sending the event
+    this.#currentPanelName = panelName;
+  }
+
+  panelClosed(_panelName: string): void {
+  }
+
+  panelShownInLocation(_panelName: string, _location: 'main'|'drawer'): void {
+  }
+
   #decorateEvent(event: ReactNativeChromeDevToolsEvent): Readonly<DecoratedReactNativeChromeDevToolsEvent> {
     const commonFields: CommonEventFields = {
       timestamp: getPerfTimestamp(),
       launchId: this.#launchId,
+      panelName: this.#currentPanelName,
     };
 
     return {
@@ -221,6 +236,7 @@ function maybeWrapError(baseMessage: string, error: unknown): [string, Error] {
 type CommonEventFields = Readonly<{
   timestamp: DOMHighResTimeStamp,
   launchId: string | void | null,
+  panelName: string | null,
 }>;
 
 type EntryPoint = 'rn_fusebox'|'rn_inspector';
@@ -295,9 +311,16 @@ export type FuseboxSetClientMetadataFinishedEvent = Readonly<{
   }>,
 }>;
 
-export type ReactNativeChromeDevToolsEvent =
-    EntrypointLoadingStartedEvent|EntrypointLoadingFinishedEvent|DebuggerReadyEvent|BrowserVisibilityChangeEvent|
-    BrowserErrorEvent|RemoteDebuggingTerminatedEvent|DeveloperResourceLoadingStartedEvent|
-    DeveloperResourceLoadingFinishedEvent|FuseboxSetClientMetadataStartedEvent|FuseboxSetClientMetadataFinishedEvent;
+export type PanelShownEvent = Readonly<{
+  eventName: 'PanelShown',
+  params: Readonly<{
+    newPanelName: string,
+  }>,
+}>;
+
+export type ReactNativeChromeDevToolsEvent = EntrypointLoadingStartedEvent|EntrypointLoadingFinishedEvent|
+    DebuggerReadyEvent|BrowserVisibilityChangeEvent|BrowserErrorEvent|RemoteDebuggingTerminatedEvent|
+    DeveloperResourceLoadingStartedEvent|DeveloperResourceLoadingFinishedEvent|FuseboxSetClientMetadataStartedEvent|
+    FuseboxSetClientMetadataFinishedEvent|PanelShownEvent;
 
 export type DecoratedReactNativeChromeDevToolsEvent = CommonEventFields&ReactNativeChromeDevToolsEvent;
diff --git a/front_end/core/host/UserMetrics.ts b/front_end/core/host/UserMetrics.ts
@@ -30,6 +30,7 @@
 
 import {InspectorFrontendHostInstance} from './InspectorFrontendHost.js';
 import {EnumeratedHistogram} from './InspectorFrontendHostAPI.js';
+import * as RNPerfMetrics from './RNPerfMetrics.js';
 
 export class UserMetrics {
   #panelChangedSinceLaunch: boolean;
@@ -67,6 +68,7 @@ export class UserMetrics {
     if (!isLaunching) {
       this.#panelChangedSinceLaunch = true;
     }
+    RNPerfMetrics.getInstance().panelShown(panelName, isLaunching);
   }
 
   /**
@@ -77,6 +79,7 @@ export class UserMetrics {
     InspectorFrontendHostInstance.recordEnumeratedHistogram(EnumeratedHistogram.PanelClosed, code, PanelCodes.MaxValue);
     // Store that the user has changed the panel so we know launch histograms should not be fired.
     this.#panelChangedSinceLaunch = true;
+    RNPerfMetrics.getInstance().panelClosed(panelName);
   }
 
   panelShownInLocation(panelName: string, location: 'main'|'drawer'): void {
@@ -87,6 +90,7 @@ export class UserMetrics {
         panelWithLocation,
         PanelWithLocation.MaxValue,
     );
+    RNPerfMetrics.getInstance().panelShownInLocation(panelName, location);
   }
 
   elementsSidebarTabShown(sidebarPaneName: string): void {

diff --git a/front_end/ui/legacy/InspectorView.ts b/front_end/ui/legacy/InspectorView.ts
@@ -180,6 +180,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     if (this.drawerSplitWidget.showMode() !== ShowMode.OnlyMain && selectedDrawerTab) {
       Host.userMetrics.panelShown(selectedDrawerTab, true);
       Host.userMetrics.panelShownInLocation(selectedDrawerTab, 'drawer');
+      Host.rnPerfMetrics.panelShown(selectedDrawerTab);
     }
     this.drawerTabbedPane.setTabDelegate(this.tabDelegate);
 
@@ -215,6 +216,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     if (selectedTab) {
       Host.userMetrics.panelShown(selectedTab, true);
       Host.userMetrics.panelShownInLocation(selectedTab, 'main');
+      Host.rnPerfMetrics.panelShown(selectedTab);
     }
     this.tabbedPane.setAccessibleName(i18nString(UIStrings.panels));
     this.tabbedPane.setTabDelegate(this.tabDelegate);
@@ -449,6 +451,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   private tabSelected(tabId: string, location: 'main'|'drawer'): void {
     Host.userMetrics.panelShown(tabId);
     Host.userMetrics.panelShownInLocation(tabId, location);
+    Host.rnPerfMetrics.panelShown(tabId);
   }
 
   setOwnerSplit(splitWidget: SplitWidget): void {