Add custom action for controlling showing system nodes

Summary: This diff uses the new Flipper API to add a custom action in Flipper Desktop app that will allow the developer to turn on/off showing Compose system nodes. Reviewed By: LukeDefeo Differential Revision: D57048841 fbshipit-source-id: 2d3fff0c215a94d95b69892b5f415f26d960c65e
facebook · May 8, 2024 · 934e64e · 934e64e
1 parent fef2ee1
commit 934e64e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/...ose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/UIDebuggerComposeSupport.kt b/...ose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/UIDebuggerComposeSupport.kt
@@ -18,6 +18,7 @@ import com.facebook.flipper.plugins.jetpackcompose.model.ComposeInnerViewNode
 import com.facebook.flipper.plugins.jetpackcompose.model.ComposeNode
 import com.facebook.flipper.plugins.uidebugger.core.UIDContext
 import com.facebook.flipper.plugins.uidebugger.descriptors.DescriptorRegister
+import com.facebook.flipper.plugins.uidebugger.model.ActionIcon
 import com.facebook.soloader.SoLoader
 
 const val JetpackComposeTag = "Compose"
@@ -38,6 +39,7 @@ object UIDebuggerComposeSupport {
   }
 
   fun enable(context: UIDContext) {
+    addCustomActions(context)
     addDescriptors(context.descriptorRegister)
   }
 
@@ -47,6 +49,18 @@ object UIDebuggerComposeSupport {
     register.register(ComposeInnerViewNode::class.java, ComposeInnerViewDescriptor)
   }
 
+  private fun addCustomActions(context: UIDContext) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+      context.addCustomActionGroup("Compose", ActionIcon.Local("icons/compose-logo.png")) {
+        booleanAction("Hide System Nodes", AbstractComposeViewDescriptor.hideSystemNodes) { newValue
+          ->
+          AbstractComposeViewDescriptor.hideSystemNodes = newValue
+          newValue
+        }
+      }
+    }
+  }
+
   private fun enableDebugInspectorInfo() {
     // Set isDebugInspectorInfoEnabled to true via reflection such that Redex and R8 cannot see the
     // assignment. This allows the InspectorInfo lambdas to be stripped from release builds.

diff --git a/.../com/facebook/flipper/plugins/jetpackcompose/descriptors/AbstractComposeViewDescriptor.kt b/.../com/facebook/flipper/plugins/jetpackcompose/descriptors/AbstractComposeViewDescriptor.kt
@@ -24,6 +24,9 @@ import java.io.IOException
 
 @RequiresApi(Build.VERSION_CODES.Q)
 object AbstractComposeViewDescriptor : ChainedDescriptor<AbstractComposeView>() {
+
+  internal var hideSystemNodes: Boolean = true
+
   private val recompositionHandler by lazy {
     RecompositionHandler(DefaultArtTooling("Flipper")).apply {
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
@@ -67,7 +70,7 @@ object AbstractComposeViewDescriptor : ChainedDescriptor<AbstractComposeView>()
 
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
         val layoutInspector = LayoutInspectorTree()
-        layoutInspector.hideSystemNodes = true
+        layoutInspector.hideSystemNodes = hideSystemNodes
         val composeNodes =
             try {
               transform(child, layoutInspector.convert(child), layoutInspector)