Wire up background tracing and actions in Perf Monitor (#53460)

Summary:
Pull Request resolved: #53460

Completes the first pass of adding background performance trace controls in the V2 Perf Monitor UI.

Key changes:
- Initiates background trace on `PerfMonitorOverlayManager::init`.
- Wires up background trace recording states in button dialog, and connects `pauseAndAnalyzeBackgroundTrace` and `resumeBackgroundTrace` actions.
- Moves UI manager/view classes into `perfmonitor` subpackage.
- Fixes `responsivenessScore` determination/UI coloring.
- Adds tooltip UI to the overlay view.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D80807554

fbshipit-source-id: 53360c2d454adfbba40fd795d400b28d90ff9e61

Author: huntie

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/BridgelessDevSupportManager.kt

@@ -83,6 +83,6 @@ internal class BridgelessDevSupportManager(
   }
 
   fun tracingState(): TracingState {
-    return TracingState.DISABLED
+    return TracingState.ENABLEDINCDPMODE
   }
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevSupportManagerBase.kt

@@ -68,6 +68,7 @@ import com.facebook.react.devsupport.interfaces.StackFrame
 import com.facebook.react.devsupport.interfaces.TracingState
 import com.facebook.react.devsupport.interfaces.TracingStateProvider
 import com.facebook.react.devsupport.perfmonitor.PerfMonitorDevHelper
+import com.facebook.react.devsupport.perfmonitor.PerfMonitorOverlayManager
 import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
 import com.facebook.react.internal.featureflags.ReactNativeNewArchitectureFeatureFlags
 import com.facebook.react.modules.core.RCTNativeAppEventEmitter
@@ -77,6 +78,7 @@ import java.io.File
 import java.net.MalformedURLException
 import java.net.URL
 import java.util.Locale
+import javax.inject.Provider
 
 public abstract class DevSupportManagerBase(
     protected val applicationContext: Context,
@@ -182,7 +184,7 @@ public abstract class DevSupportManagerBase(
           null
         }
 
-  private var perfMonitorOverlayManager: PerfMonitorOverlayViewManager? = null
+  private var perfMonitorOverlayManager: PerfMonitorOverlayManager? = null
   private var tracingStateProvider: TracingStateProvider? = null
 
   init {
@@ -215,19 +217,19 @@ public abstract class DevSupportManagerBase(
     if (
         ReactNativeNewArchitectureFeatureFlags.enableBridgelessArchitecture() &&
             ReactNativeFeatureFlags.perfMonitorV2Enabled() &&
-            reactInstanceDevHelper is PerfMonitorDevHelper &&
-            perfMonitorOverlayManager == null
+            reactInstanceDevHelper is PerfMonitorDevHelper
     ) {
       perfMonitorOverlayManager =
-          PerfMonitorOverlayViewManager(
-              Supplier {
+          PerfMonitorOverlayManager(
+              reactInstanceDevHelper,
+              Provider {
                 val context = reactInstanceDevHelper.currentActivity
                 if (context == null || context.isFinishing) {
-                  return@Supplier null
+                  return@Provider null
                 }
                 context
               },
-              reactInstanceDevHelper.inspectorTarget,
+              { openDebugger(DebuggerFrontendPanelName.PERFORMANCE.toString()) },
           )
     }
   }
@@ -548,10 +550,11 @@ public abstract class DevSupportManagerBase(
   override fun onNewReactContextCreated(reactContext: ReactContext) {
     resetCurrentContext(reactContext)
 
-    if (perfMonitorOverlayManager != null && reactInstanceDevHelper is PerfMonitorDevHelper) {
+    if (reactInstanceDevHelper is PerfMonitorDevHelper) {
       perfMonitorOverlayManager?.let { manager ->
         reactInstanceDevHelper.inspectorTarget?.addPerfMonitorListener(manager)
       }
+      perfMonitorOverlayManager?.enable()
     }
   }
 
@@ -882,6 +885,7 @@ public abstract class DevSupportManagerBase(
 
             override fun onPackagerDisconnected() {
               isPackagerConnected = false
+              perfMonitorOverlayManager?.disable()
             }
 
             override fun onPackagerReloadCommand() {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/interfaces/PerfMonitorOverlayManager.kt

@@ -7,11 +7,16 @@
 
 package com.facebook.react.devsupport.perfmonitor
 
+import com.facebook.react.devsupport.interfaces.TracingState
+
 /**
  * [Experimental] Interface implemented by [com.facebook.react.runtime.ReactHostInspectorTarget]
  * exposing actions for the V2 Perf Monitor.
  */
 internal interface PerfMonitorInspectorTargetBinding {
+  /** Get the current CDP or background performance tracing state. */
+  public fun getTracingState(): TracingState
+
   /** Attempt to pause the current background performance trace, and open in DevTools. */
   public fun pauseAndAnalyzeBackgroundTrace()
 

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/perfmonitor/PerfMonitorInspectorTargetBinding.kt

@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.devsupport.perfmonitor
+
+import android.content.Context
+import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.devsupport.interfaces.TracingState
+import javax.inject.Provider
+
+internal class PerfMonitorOverlayManager(
+    private val devHelper: PerfMonitorDevHelper,
+    private val contextProvider: Provider<Context?>,
+    private val onRequestOpenDevTools: () -> Unit,
+) : PerfMonitorUpdateListener {
+  private var enabled: Boolean = false
+  private var initialized: Boolean = false
+  private var view: PerfMonitorOverlayView? = null
+  private var tracingState: TracingState = TracingState.ENABLEDINCDPMODE
+
+  private fun init() {
+    if (initialized || !enabled) {
+      return
+    }
+
+    UiThreadUtil.runOnUiThread {
+      val context = contextProvider.get() ?: return@runOnUiThread
+      view = PerfMonitorOverlayView(context, ::handleRecordingButtonPress)
+
+      // Start background tracing
+      devHelper.inspectorTarget?.resumeBackgroundTrace()
+
+      view?.show()
+      initialized = true
+    }
+  }
+
+  /** Enable the Perf Monitor overlay. Will be shown when updates are received. */
+  fun enable() {
+    enabled = true
+    init()
+    UiThreadUtil.runOnUiThread { view?.show() }
+  }
+
+  /** Disable the Perf Monitor overlay. Will remain hidden when updates are received. */
+  fun disable() {
+    UiThreadUtil.runOnUiThread { view?.hide() }
+    enabled = false
+  }
+
+  /** Reset the Perf Monitor overlay, e.g. after a reload. */
+  fun reset() {
+    UiThreadUtil.runOnUiThread { view?.resetState() }
+
+    // Update with current recording state
+    onRecordingStateChanged(
+        devHelper.inspectorTarget?.getTracingState() ?: TracingState.ENABLEDINCDPMODE
+    )
+  }
+
+  override fun onNewFocusedEvent(data: PerfMonitorUpdateListener.LongTaskEventData) {
+    view?.updateFocusedEvent(data)
+  }
+
+  override fun onRecordingStateChanged(state: TracingState) {
+    tracingState = state
+    view?.updateRecordingState(state)
+  }
+
+  private fun handleRecordingButtonPress() {
+    when (tracingState) {
+      TracingState.ENABLEDINBACKGROUNDMODE -> {
+        devHelper.inspectorTarget?.pauseAndAnalyzeBackgroundTrace()
+        onRequestOpenDevTools()
+      }
+      TracingState.DISABLED -> {
+        devHelper.inspectorTarget?.resumeBackgroundTrace()
+      }
+      TracingState.ENABLEDINCDPMODE -> Unit
+    }
+  }
+}