Add 'panel shown' perf metrics

facebookexperimental · Aug 2, 2024 · e1e818e · e1e818e
1 parent 7b143e5
commit e1e818e
Show file tree

Hide file tree

Showing 2 changed files with 24 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,18 @@ class RNPerfMetrics {
     }
   }
 
+  panelShown(panelName: string): 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;
+  }
+
   #decorateEvent(event: ReactNativeChromeDevToolsEvent): Readonly<DecoratedReactNativeChromeDevToolsEvent> {
     const commonFields: CommonEventFields = {
       timestamp: getPerfTimestamp(),
       launchId: this.#launchId,
+      panelName: this.#currentPanelName,
     };
 
     return {
@@ -221,6 +230,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 +305,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/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 {