Show Section props in flipper

Summary:
as title.
Refactored the getPropsData from DebugComponentDescriptor and extracted it to separate class so we can use it for SectionComponentDescriptor as well.
Will follow up with adding state info

Reviewed By: passy

Differential Revision: D14386744

fbshipit-source-id: c6b9887aa9d0c8d2333e7e64fa0954e56b505e51

android/build.gradle

@@ -51,6 +51,7 @@ android {
         implementation deps.okhttp3
         implementation deps.lithoCore
         implementation deps.lithoSectionsDebug
+        implementation deps.lithoSectionsCore
         implementation deps.lithoWidget
         implementation deps.rhino
         implementation deps.fresco

android/src/main/java/com/facebook/flipper/plugins/litho/DataUtils.java

@@ -0,0 +1,113 @@
+package com.facebook.flipper.plugins.litho;
+
+import static com.facebook.flipper.plugins.inspector.InspectorValue.Type.Color;
+
+import android.graphics.drawable.ColorDrawable;
+import android.graphics.drawable.Drawable;
+import com.facebook.flipper.core.FlipperObject;
+import com.facebook.flipper.plugins.inspector.InspectorValue;
+import com.facebook.flipper.plugins.inspector.Named;
+import com.facebook.litho.annotations.Prop;
+import java.lang.reflect.Field;
+import java.util.AbstractMap;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+import javax.annotation.Nullable;
+
+public class DataUtils {
+
+  @Nullable
+  static List<com.facebook.flipper.plugins.inspector.Named<com.facebook.flipper.core.FlipperObject>>
+      getPropData(Object node) throws Exception {
+    final FlipperObject.Builder props = new FlipperObject.Builder();
+    List<Named<FlipperObject>> data = new ArrayList<>();
+
+    boolean hasProps = false;
+
+    for (Field f : node.getClass().getDeclaredFields()) {
+      f.setAccessible(true);
+
+      final Prop annotation = f.getAnnotation(Prop.class);
+      if (annotation != null) {
+        if (f.get(node) != null
+            && PropWithInspectorSection.class.isAssignableFrom(f.get(node).getClass())) {
+          final AbstractMap.SimpleEntry<String, String> datum =
+              ((PropWithInspectorSection) f.get(node)).getFlipperLayoutInspectorSection();
+          if (datum != null) {
+            data.add(new Named<>(datum.getKey(), new FlipperObject(datum.getValue())));
+          }
+        }
+
+        switch (annotation.resType()) {
+          case COLOR:
+            props.put(f.getName(), fromColor((Integer) f.get(node)));
+            break;
+          case DRAWABLE:
+            props.put(f.getName(), fromDrawable((Drawable) f.get(node)));
+            break;
+          default:
+            if (f.get(node) != null
+                && PropWithDescription.class.isAssignableFrom(f.get(node).getClass())) {
+              final Object description =
+                  ((PropWithDescription) f.get(node)).getFlipperLayoutInspectorPropDescription();
+              // Treat the description as immutable for now, because it's a "translation" of the
+              // actual prop,
+              // mutating them is not going to change the original prop.
+              if (description instanceof Map<?, ?>) {
+                final Map<?, ?> descriptionMap = (Map<?, ?>) description;
+                for (Map.Entry<?, ?> entry : descriptionMap.entrySet()) {
+                  props.put(entry.getKey().toString(), InspectorValue.immutable(entry.getValue()));
+                }
+              } else {
+                props.put(f.getName(), InspectorValue.immutable(description));
+              }
+            } else {
+              if (isTypeMutable(f.getType())) {
+                props.put(f.getName(), InspectorValue.mutable(f.get(node)));
+              } else {
+                props.put(f.getName(), InspectorValue.immutable(f.get(node)));
+              }
+            }
+            break;
+        }
+        hasProps = true;
+      }
+    }
+
+    if (hasProps) {
+      data.add(new Named<>("Props", props.build()));
+    }
+
+    return data;
+  }
+
+  static boolean isTypeMutable(Class<?> type) {
+    if (type == int.class || type == Integer.class) {
+      return true;
+    } else if (type == long.class || type == Long.class) {
+      return true;
+    } else if (type == float.class || type == Float.class) {
+      return true;
+    } else if (type == double.class || type == Double.class) {
+      return true;
+    } else if (type == boolean.class || type == Boolean.class) {
+      return true;
+    } else if (type.isAssignableFrom(String.class)) {
+      return true;
+    }
+    return false;
+  }
+
+  static com.facebook.flipper.plugins.inspector.InspectorValue fromDrawable(Drawable d) {
+    if (d instanceof ColorDrawable) {
+      return com.facebook.flipper.plugins.inspector.InspectorValue.mutable(
+          Color, ((ColorDrawable) d).getColor());
+    }
+    return com.facebook.flipper.plugins.inspector.InspectorValue.mutable(Color, 0);
+  }
+
+  static com.facebook.flipper.plugins.inspector.InspectorValue fromColor(int color) {
+    return com.facebook.flipper.plugins.inspector.InspectorValue.mutable(Color, color);
+  }
+}

android/src/main/java/com/facebook/flipper/plugins/litho/DebugComponentDescriptor.java

@@ -7,12 +7,10 @@
  */
 package com.facebook.flipper.plugins.litho;
 
-import static com.facebook.flipper.plugins.inspector.InspectorValue.Type.Color;
 import static com.facebook.flipper.plugins.inspector.InspectorValue.Type.Enum;
 import static com.facebook.flipper.plugins.inspector.InspectorValue.Type.Number;
 
 import android.graphics.Rect;
-import android.graphics.drawable.ColorDrawable;
 import android.graphics.drawable.Drawable;
 import android.view.View;
 import androidx.core.util.Pair;
@@ -29,7 +27,6 @@ import com.facebook.litho.DebugComponent;
 import com.facebook.litho.DebugLayoutNode;
 import com.facebook.litho.LithoView;
 import com.facebook.litho.StateContainer;
-import com.facebook.litho.annotations.Prop;
 import com.facebook.litho.annotations.State;
 import com.facebook.yoga.YogaAlign;
 import com.facebook.yoga.YogaDirection;
@@ -39,7 +36,6 @@ import com.facebook.yoga.YogaJustify;
 import com.facebook.yoga.YogaPositionType;
 import com.facebook.yoga.YogaValue;
 import java.lang.reflect.Field;
-import java.util.AbstractMap;
 import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.HashMap;
@@ -178,8 +174,8 @@ public class DebugComponentDescriptor extends NodeDescriptor<DebugComponent> {
     }
 
     final FlipperObject.Builder data = new FlipperObject.Builder();
-    data.put("background", fromDrawable(layout.getBackground()));
+    data.put("background", DataUtils.fromDrawable(layout.getBackground()));
-    data.put("foreground", fromDrawable(layout.getForeground()));
+    data.put("foreground", DataUtils.fromDrawable(layout.getForeground()));
 
     data.put("direction", InspectorValue.mutable(Enum, layout.getLayoutDirection().toString()));
     data.put("flex-direction", InspectorValue.mutable(Enum, layout.getFlexDirection().toString()));
@@ -260,76 +256,13 @@ public class DebugComponentDescriptor extends NodeDescriptor<DebugComponent> {
   }
 
   @Nullable
-  private static List<Named<FlipperObject>> getPropData(DebugComponent node) {
+  private static List<Named<FlipperObject>> getPropData(DebugComponent node) throws Exception {
     if (node.canResolve()) {
       return null;
     }
 
     final Component component = node.getComponent();
-    final FlipperObject.Builder props = new FlipperObject.Builder();
+    return DataUtils.getPropData(component);
-    List<Named<FlipperObject>> data = new ArrayList<>();
-
-    boolean hasProps = false;
-    for (Field f : component.getClass().getDeclaredFields()) {
-      try {
-        f.setAccessible(true);
-
-        final Prop annotation = f.getAnnotation(Prop.class);
-        if (annotation != null) {
-          if (f.get(component) != null
-              && PropWithInspectorSection.class.isAssignableFrom(f.get(component).getClass())) {
-            final AbstractMap.SimpleEntry<String, String> datum =
-                ((PropWithInspectorSection) f.get(component)).getFlipperLayoutInspectorSection();
-            if (datum != null) {
-              data.add(new Named<>(datum.getKey(), new FlipperObject(datum.getValue())));
-            }
-          }
-
-          switch (annotation.resType()) {
-            case COLOR:
-              props.put(f.getName(), fromColor((Integer) f.get(component)));
-              break;
-            case DRAWABLE:
-              props.put(f.getName(), fromDrawable((Drawable) f.get(component)));
-              break;
-            default:
-              if (f.get(component) != null
-                  && PropWithDescription.class.isAssignableFrom(f.get(component).getClass())) {
-                final Object description =
-                    ((PropWithDescription) f.get(component))
-                        .getFlipperLayoutInspectorPropDescription();
-                // Treat the description as immutable for now, because it's a "translation" of the
-                // actual prop,
-                // mutating them is not going to change the original prop.
-                if (description instanceof Map<?, ?>) {
-                  final Map<?, ?> descriptionMap = (Map<?, ?>) description;
-                  for (Map.Entry<?, ?> entry : descriptionMap.entrySet()) {
-                    props.put(
-                        entry.getKey().toString(), InspectorValue.immutable(entry.getValue()));
-                  }
-                } else {
-                  props.put(f.getName(), InspectorValue.immutable(description));
-                }
-              } else {
-                if (isTypeMutable(f.getType())) {
-                  props.put(f.getName(), InspectorValue.mutable(f.get(component)));
-                } else {
-                  props.put(f.getName(), InspectorValue.immutable(f.get(component)));
-                }
-              }
-              break;
-          }
-          hasProps = true;
-        }
-      } catch (Exception ignored) {
-      }
-    }
-
-    if (hasProps) {
-      data.add(new Named<>("Props", props.build()));
-    }
-
-    return data;
   }
 
   @Nullable
@@ -352,7 +285,7 @@ public class DebugComponentDescriptor extends NodeDescriptor<DebugComponent> {
 
         final State annotation = f.getAnnotation(State.class);
         if (annotation != null) {
-          if (isTypeMutable(f.getType())) {
+          if (DataUtils.isTypeMutable(f.getType())) {
             state.put(f.getName(), InspectorValue.mutable(f.get(stateContainer)));
           } else {
             state.put(f.getName(), InspectorValue.immutable(f.get(stateContainer)));
@@ -366,23 +299,6 @@ public class DebugComponentDescriptor extends NodeDescriptor<DebugComponent> {
     return hasState ? state.build() : null;
   }
 
-  private static boolean isTypeMutable(Class<?> type) {
-    if (type == int.class || type == Integer.class) {
-      return true;
-    } else if (type == long.class || type == Long.class) {
-      return true;
-    } else if (type == float.class || type == Float.class) {
-      return true;
-    } else if (type == double.class || type == Double.class) {
-      return true;
-    } else if (type == boolean.class || type == Boolean.class) {
-      return true;
-    } else if (type.isAssignableFrom(String.class)) {
-      return true;
-    }
-    return false;
-  }
-
   @Override
   public void setValue(DebugComponent node, String[] path, FlipperDynamic value) {
     List<Pair<String[], FlipperDynamic>> overrides = mOverrides.get(node.getGlobalKey());
@@ -622,14 +538,6 @@ public class DebugComponentDescriptor extends NodeDescriptor<DebugComponent> {
     }
   }
 
-  private static InspectorValue fromDrawable(Drawable d) {
-    if (d instanceof ColorDrawable) {
-      return InspectorValue.mutable(Color, ((ColorDrawable) d).getColor());
-    }
-    return InspectorValue.mutable(Color, 0);
-  }
-
-
   private static InspectorValue fromFloat(float f) {
     if (Float.isNaN(f)) {
       return InspectorValue.mutable(Enum, "undefined");
@@ -637,12 +545,9 @@ public class DebugComponentDescriptor extends NodeDescriptor<DebugComponent> {
     return InspectorValue.mutable(Number, f);
   }
 
-  private static InspectorValue fromYogaValue(YogaValue v) {
+  static InspectorValue fromYogaValue(YogaValue v) {
     // TODO add support for Type.Dimension or similar
     return InspectorValue.mutable(Enum, v.toString());
   }
 
-  private static InspectorValue fromColor(int color) {
-    return InspectorValue.mutable(Color, color);
-  }
 }

android/src/main/java/com/facebook/flipper/plugins/litho/DebugSectionDescriptor.java

@@ -18,9 +18,11 @@ import com.facebook.flipper.plugins.inspector.HighlightedOverlay;
 import com.facebook.flipper.plugins.inspector.Named;
 import com.facebook.flipper.plugins.inspector.NodeDescriptor;
 import com.facebook.flipper.plugins.inspector.Touch;
+import com.facebook.litho.sections.Section;
 import com.facebook.litho.sections.debug.DebugSection;
 import java.util.ArrayList;
 import java.util.List;
+import javax.annotation.Nullable;
 
 public class DebugSectionDescriptor extends NodeDescriptor<DebugSection> {
 
@@ -67,8 +69,20 @@ public class DebugSectionDescriptor extends NodeDescriptor<DebugSection> {
   @Override
   public List<Named<FlipperObject>> getData(DebugSection node) throws Exception {
     // TODO T39526148 add changeset info
-    final List<Named<FlipperObject>> attrs = new ArrayList<>();
+    final List<Named<FlipperObject>> data = new ArrayList<>();
-    return attrs;
+
+    final List<Named<FlipperObject>> propData = getPropData(node);
+    if (propData != null) {
+      data.addAll(propData);
+    }
+
+    return data;
+  }
+
+  private static @Nullable List<Named<FlipperObject>> getPropData(DebugSection node)
+      throws Exception {
+    final Section section = node.getSection();
+    return DataUtils.getPropData(section);
   }
 
   @Override

build.gradle

@@ -63,6 +63,7 @@ ext.deps = [
         lithoAnnotations   : "com.facebook.litho:litho-annotations:$LITHO_VERSION",
         lithoCore          : "com.facebook.litho:litho-core:$LITHO_VERSION",
         lithoSectionsDebug : "com.facebook.litho:litho-sections-debug:$LITHO_VERSION",
+        lithoSectionsCore  : "com.facebook.litho:litho-sections-core:$LITHO_VERSION",
         lithoWidget        : "com.facebook.litho:litho-widget:$LITHO_VERSION",
         lithoProcessor     : "com.facebook.litho:litho-processor:$LITHO_VERSION",
         lithoFresco        : "com.facebook.litho:litho-fresco:$LITHO_VERSION",