From 53b852dbe62cc8a48b0ca067831d9ae115437a7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Wed, 29 May 2019 09:16:24 -0700
Subject: [PATCH] fix undefined colors on litho components

Summary:
When a color was changed on a litho component, the changes were made, but the display in Flipper's layout sidebar always showed `rgba(0,0,0,0)` as a color. This was because reading the color failed for `ComparableColorDrawable` and it sent `0` as fallback value.

This diff adds an additional check if the value is an instance of `ComparableColorDrawable` and reads the color from it.

Reviewed By: passy

Differential Revision: D15469093

fbshipit-source-id: 7f1aaf1c4981815605aca5ba735fa09e80deaa42
---
 .../facebook/flipper/plugins/litho/DataUtils.java    | 12 ++++++++----
 src/ui/components/data-inspector/DataDescription.js  |  4 +++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/android/src/main/java/com/facebook/flipper/plugins/litho/DataUtils.java b/android/src/main/java/com/facebook/flipper/plugins/litho/DataUtils.java
index 1ef5f0999..e2cdab1f9 100644
--- a/android/src/main/java/com/facebook/flipper/plugins/litho/DataUtils.java
+++ b/android/src/main/java/com/facebook/flipper/plugins/litho/DataUtils.java
@@ -16,6 +16,7 @@ import com.facebook.flipper.plugins.inspector.Named;
 import com.facebook.litho.StateContainer;
 import com.facebook.litho.annotations.Prop;
 import com.facebook.litho.annotations.State;
+import com.facebook.litho.drawable.ComparableColorDrawable;
 import java.lang.reflect.Field;
 import java.util.AbstractMap;
 import java.util.ArrayList;
@@ -51,7 +52,8 @@ public class DataUtils {
             props.put(f.getName(), f.get(node) == null ? "null" : fromColor((Integer) f.get(node)));
             break;
           case DRAWABLE:
-            props.put(f.getName(), f.get(node) == null ? "null" : fromDrawable((Drawable) f.get(node)));
+            props.put(
+                f.getName(), f.get(node) == null ? "null" : fromDrawable((Drawable) f.get(node)));
             break;
           default:
             if (f.get(node) != null
@@ -133,11 +135,13 @@ public class DataUtils {
   }
 
   static com.facebook.flipper.plugins.inspector.InspectorValue fromDrawable(Drawable d) {
+    int color = 0;
     if (d instanceof ColorDrawable) {
-      return com.facebook.flipper.plugins.inspector.InspectorValue.mutable(
-          Color, ((ColorDrawable) d).getColor());
+      color = ((ColorDrawable) d).getColor();
+    } else if (d instanceof ComparableColorDrawable) {
+      color = ((ComparableColorDrawable) d).getColor();
     }
-    return com.facebook.flipper.plugins.inspector.InspectorValue.mutable(Color, 0);
+    return com.facebook.flipper.plugins.inspector.InspectorValue.mutable(Color, color);
   }
 
   static com.facebook.flipper.plugins.inspector.InspectorValue fromColor(int color) {
diff --git a/src/ui/components/data-inspector/DataDescription.js b/src/ui/components/data-inspector/DataDescription.js
index d8609a6e1..fd18ac072 100644
--- a/src/ui/components/data-inspector/DataDescription.js
+++ b/src/ui/components/data-inspector/DataDescription.js
@@ -447,7 +447,9 @@ class DataDescriptionContainer extends Component<{
 
       case 'color': {
         const colorInfo = parseColor(val);
-        if (colorInfo) {
+        if (typeof val === 'number' && val === 0) {
+          return <UndefinedValue>(not set)</UndefinedValue>;
+        } else if (colorInfo) {
           const {a, b, g, r} = colorInfo;
           return [
             <ColorBox key="color-box" color={`rgba(${r}, ${g}, ${b}, ${a})`} />,