From 6d0e7f403f14111ee331ae9466c09d2579dd86cc Mon Sep 17 00:00:00 2001 From: Edmond Chui <1967998+EdmondChuiHW@users.noreply.github.com> Date: Fri, 2 Aug 2024 22:00:19 +0100 Subject: [PATCH] Add 'panel shown' perf metrics --- front_end/core/host/RNPerfMetrics.ts | 31 ++++++++++++++++++++++++---- front_end/core/host/UserMetrics.ts | 4 ++++ front_end/ui/legacy/InspectorView.ts | 3 +++ 3 files changed, 34 insertions(+), 4 deletions(-) diff --git a/front_end/core/host/RNPerfMetrics.ts b/front_end/core/host/RNPerfMetrics.ts index c278aa282a69..52d14f3b9ee3 100644 --- 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 = 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 { 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 index ce3cb6a3dac1..f80330eda05c 100644 --- 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 index ceb18aa781f9..e26a107b1cf6 100644 --- 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 {