From 18379f438a9b10efcef3d6ffed721eab5f2df892 Mon Sep 17 00:00:00 2001
From: Edmond Chui <1967998+EdmondChuiHW@users.noreply.github.com>
Date: Mon, 20 May 2024 01:26:53 +0100
Subject: [PATCH] add visibility change perf metrics event

---
 front_end/core/host/RNPerfMetrics.ts           | 18 +++++++++++++++++-
 front_end/entrypoints/rn_fusebox/rn_fusebox.ts |  4 ++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/front_end/core/host/RNPerfMetrics.ts b/front_end/core/host/RNPerfMetrics.ts
index 4da08eacf9d..daa259eb918 100644
--- a/front_end/core/host/RNPerfMetrics.ts
+++ b/front_end/core/host/RNPerfMetrics.ts
@@ -83,6 +83,15 @@ class RNPerfMetrics {
     });
   }
 
+  browserVisibilityChanged(visibilityState: BrowserVisibilityChangeEvent['params']['visibilityState']): void {
+    this.sendEvent({
+      eventName: 'Browser.VisibilityChange',
+      params: {
+        visibilityState,
+      }
+    });
+  }
+
   #decorateEvent(event: ReactNativeChromeDevToolsEvent): Readonly<DecoratedReactNativeChromeDevToolsEvent> {
     const commonFields: CommonEventFields = {
       timestamp: getPerfTimestamp(),
@@ -121,7 +130,14 @@ export type DebuggerReadyEvent = Readonly<{
   eventName: 'Debugger.IsReadyToPause',
 }>;
 
+export type BrowserVisibilityChangeEvent = Readonly<{
+  eventName: 'Browser.VisibilityChange',
+  params: Readonly<{
+    visibilityState: 'hidden' | 'visible',
+  }>,
+}>;
+
 export type ReactNativeChromeDevToolsEvent =
-    EntrypointLoadingStartedEvent|EntrypointLoadingFinishedEvent|DebuggerReadyEvent;
+    EntrypointLoadingStartedEvent|EntrypointLoadingFinishedEvent|DebuggerReadyEvent|BrowserVisibilityChangeEvent;
 
 export type DecoratedReactNativeChromeDevToolsEvent = CommonEventFields&ReactNativeChromeDevToolsEvent;
diff --git a/front_end/entrypoints/rn_fusebox/rn_fusebox.ts b/front_end/entrypoints/rn_fusebox/rn_fusebox.ts
index 947c87ef143..0597131c9aa 100644
--- a/front_end/entrypoints/rn_fusebox/rn_fusebox.ts
+++ b/front_end/entrypoints/rn_fusebox/rn_fusebox.ts
@@ -74,6 +74,10 @@ RNExperiments.RNExperimentsImpl.Instance.enableExperimentsByDefault([
   Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
 ]);
 
+document.addEventListener('visibilitychange', () => {
+  Host.rnPerfMetrics.browserVisibilityChanged(document.visibilityState);
+});
+
 class FuseboxClientMetadataModel extends SDK.SDKModel.SDKModel<void> {
   constructor(target: SDK.Target.Target) {
     super(target);