Fabric: Modernizing debug printing in View module

Summary: This is continue of the work started in D7797561.

Reviewed By: fkgozali

Differential Revision: D7901244

fbshipit-source-id: 2f7a5cd9fa8c0079787e26e19c7c6c4255e54b42

ReactCommon/fabric/view/debugStringConvertibleUtils.h

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <fabric/debug/debugStringConvertibleUtils.h>
+#include <fabric/view/yogaValuesConversions.h>
+
+// Yoga does not have this as part of the library, so we have to implement it
+// here ouside of `facebook::react::` namespace.
+inline bool operator==(const YGValue &lhs, const YGValue &rhs) {
+  if (
+    (lhs.unit == YGUnitUndefined && rhs.unit == YGUnitUndefined) ||
+    (lhs.unit == YGUnitAuto && rhs.unit == YGUnitAuto)
+  ) {
+    return true;
+  }
+
+  return
+    lhs.unit == rhs.unit &&
+    ((isnan(lhs.value) && isnan(rhs.value)) || (lhs.value == rhs.value));
+}
+
+namespace facebook {
+namespace react {
+
+using YogaDimentionsType = std::array<YGValue, YGDimensionCount>;
+using YogaEdgesType = std::array<YGValue, YGEdgeCount>;
+
+DEBUG_STRING_CONVERTIBLE_TEMPLATE(YogaDimentionsType, stringFromYogaStyleDimensions)
+DEBUG_STRING_CONVERTIBLE_TEMPLATE(YogaEdgesType, stringFromYogaStyleEdges)
+DEBUG_STRING_CONVERTIBLE_TEMPLATE(YGDirection, stringFromYogaStyleDirection)
+DEBUG_STRING_CONVERTIBLE_TEMPLATE(YGFlexDirection, stringFromYogaStyleFlexDirection)
+DEBUG_STRING_CONVERTIBLE_TEMPLATE(YGJustify, stringFromYogaStyleJustify)
+DEBUG_STRING_CONVERTIBLE_TEMPLATE(YGAlign, stringFromYogaStyleAlign)
+DEBUG_STRING_CONVERTIBLE_TEMPLATE(YGPositionType, stringFromYogaStylePositionType)
+DEBUG_STRING_CONVERTIBLE_TEMPLATE(YGWrap, stringFromYogaStyleWrap)
+DEBUG_STRING_CONVERTIBLE_TEMPLATE(YGOverflow, stringFromYogaStyleOverflow)
+DEBUG_STRING_CONVERTIBLE_TEMPLATE(YGDisplay, stringFromYogaStyleDisplay)
+DEBUG_STRING_CONVERTIBLE_TEMPLATE(YGValue, stringFromYogaStyleValue)
+DEBUG_STRING_CONVERTIBLE_TEMPLATE_EX(YGFloatOptional, stringFromYogaStyleOptionalFloat, YGFloatOptional(), IS_EQUAL)
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/view/yoga/YogaStylableProps.cpp

@@ -9,6 +9,7 @@
 
 #include <fabric/core/propsConversions.h>
 #include <fabric/debug/DebugStringConvertibleItem.h>
+#include <fabric/view/debugStringConvertibleUtils.h>
 #include <fabric/view/propsConversions.h>
 #include <yoga/YGNode.h>
 #include <yoga/Yoga.h>
@@ -27,46 +28,31 @@ YogaStylableProps::YogaStylableProps(const YogaStylableProps &sourceProps, const
 #pragma mark - DebugStringConvertible
 
 SharedDebugStringConvertibleList YogaStylableProps::getDebugProps() const {
-  SharedDebugStringConvertibleList list = {};
+  YGStyle defaultYogaStyle;
-
+  return {
-  YGStyle defaultYogaStyle = YGStyle();
+    debugStringConvertibleItem("direction", yogaStyle.direction, defaultYogaStyle.direction),
-  YGStyle currentYogaStyle = yogaStyle;
+    debugStringConvertibleItem("flexDirection", yogaStyle.flexDirection, defaultYogaStyle.flexDirection),
-
+    debugStringConvertibleItem("justifyContent", yogaStyle.justifyContent, defaultYogaStyle.justifyContent),
-#define YOGA_STYLE_PROPS_ADD_TO_SET(stringName, propertyName, accessor, convertor) \
+    debugStringConvertibleItem("alignContent", yogaStyle.alignContent, defaultYogaStyle.alignContent),
-  { \
+    debugStringConvertibleItem("alignItems", yogaStyle.alignItems, defaultYogaStyle.alignItems),
-    auto currentValueString = convertor(currentYogaStyle.propertyName accessor); \
+    debugStringConvertibleItem("alignSelf", yogaStyle.alignSelf, defaultYogaStyle.alignSelf),
-    auto defaultValueString = convertor(defaultYogaStyle.propertyName accessor); \
+    debugStringConvertibleItem("positionType", yogaStyle.positionType, defaultYogaStyle.positionType),
-    if (currentValueString != defaultValueString) { \
+    debugStringConvertibleItem("flexWrap", yogaStyle.flexWrap, defaultYogaStyle.flexWrap),
-      list.push_back(std::make_shared<DebugStringConvertibleItem>(#stringName, currentValueString)); \
+    debugStringConvertibleItem("overflow", yogaStyle.overflow, defaultYogaStyle.overflow),
-    } \
+    debugStringConvertibleItem("display", yogaStyle.display, defaultYogaStyle.display),
-  }
+    debugStringConvertibleItem("flex", yogaStyle.flex, defaultYogaStyle.flex),
-
+    debugStringConvertibleItem("flexGrow", yogaStyle.flexGrow, defaultYogaStyle.flexGrow),
-  YOGA_STYLE_PROPS_ADD_TO_SET(direction, direction, , stringFromYogaStyleDirection)
+    debugStringConvertibleItem("flexShrink", yogaStyle.flexShrink, defaultYogaStyle.flexShrink),
-
+    debugStringConvertibleItem("flexBasis", yogaStyle.flexBasis, defaultYogaStyle.flexBasis),
-  YOGA_STYLE_PROPS_ADD_TO_SET(flexDirection, flexDirection, , stringFromYogaStyleFlexDirection)
+    debugStringConvertibleItem("margin", yogaStyle.margin, defaultYogaStyle.margin),
-  YOGA_STYLE_PROPS_ADD_TO_SET(justifyContent, justifyContent, , stringFromYogaStyleJustify)
+    debugStringConvertibleItem("position", yogaStyle.position, defaultYogaStyle.position),
-  YOGA_STYLE_PROPS_ADD_TO_SET(alignItems, alignItems, , stringFromYogaStyleAlign)
+    debugStringConvertibleItem("padding", yogaStyle.padding, defaultYogaStyle.padding),
-  YOGA_STYLE_PROPS_ADD_TO_SET(alignSelf, alignSelf, , stringFromYogaStyleAlign)
+    debugStringConvertibleItem("border", yogaStyle.border, defaultYogaStyle.border),
-  YOGA_STYLE_PROPS_ADD_TO_SET(positionType, positionType, , stringFromYogaStylePositionType)
+    debugStringConvertibleItem("dimensions", yogaStyle.dimensions, defaultYogaStyle.dimensions),
-  YOGA_STYLE_PROPS_ADD_TO_SET(flexWrap, flexWrap, , stringFromYogaStyleWrap)
+    debugStringConvertibleItem("minDimensions", yogaStyle.minDimensions, defaultYogaStyle.minDimensions),
-  YOGA_STYLE_PROPS_ADD_TO_SET(overflow, overflow, , stringFromYogaStyleOverflow)
+    debugStringConvertibleItem("maxDimensions", yogaStyle.maxDimensions, defaultYogaStyle.maxDimensions),
-
+    debugStringConvertibleItem("aspectRatio", yogaStyle.aspectRatio, defaultYogaStyle.aspectRatio),
-  YOGA_STYLE_PROPS_ADD_TO_SET(flex, flex, , stringFromYogaStyleOptionalFloat)
+  };
-  YOGA_STYLE_PROPS_ADD_TO_SET(flexGrow, flexGrow, , stringFromYogaStyleOptionalFloat)
-  YOGA_STYLE_PROPS_ADD_TO_SET(flexShrink, flexShrink, , stringFromYogaStyleOptionalFloat)
-  YOGA_STYLE_PROPS_ADD_TO_SET(flexBasis, flexBasis, , stringFromYogaStyleValue)
-  YOGA_STYLE_PROPS_ADD_TO_SET(margin, margin, , stringFromYogaStyleEdge)
-  YOGA_STYLE_PROPS_ADD_TO_SET(position, position, , stringFromYogaStyleEdge)
-  YOGA_STYLE_PROPS_ADD_TO_SET(padding, padding, , stringFromYogaStyleEdge)
-  YOGA_STYLE_PROPS_ADD_TO_SET(border, border, , stringFromYogaStyleEdge)
-
-  YOGA_STYLE_PROPS_ADD_TO_SET(size, dimensions, , stringFromYogaStyleDimensions)
-  YOGA_STYLE_PROPS_ADD_TO_SET(minSize, minDimensions, , stringFromYogaStyleDimensions)
-  YOGA_STYLE_PROPS_ADD_TO_SET(maxSize, maxDimensions, , stringFromYogaStyleDimensions)
-
-  YOGA_STYLE_PROPS_ADD_TO_SET(aspectRatio, aspectRatio, , stringFromYogaStyleOptionalFloat)
-
-  return list;
 }
 
 } // namespace react

ReactCommon/fabric/view/yoga/YogaStylableProps.h

@@ -19,8 +19,7 @@ class YogaStylableProps;
 
 typedef std::shared_ptr<const YogaStylableProps> SharedYogaStylableProps;
 
-class YogaStylableProps:
+class YogaStylableProps {
-  public virtual DebugStringConvertible {
 
 public:
 
@@ -32,9 +31,9 @@ public:
 
   const YGStyle yogaStyle {};
 
-#pragma mark - DebugStringConvertible
+#pragma mark - DebugStringConvertible (Partial)
 
-  SharedDebugStringConvertibleList getDebugProps() const override;
+  SharedDebugStringConvertibleList getDebugProps() const;
 };
 
 } // namespace react

ReactCommon/fabric/view/yoga/yogaValuesConversions.cpp

@@ -220,7 +220,7 @@ YGFloatOptional yogaStyleOptionalFloatFromDynamic(const folly::dynamic &value) {
   abort();
 }
 
-std::string stringFromYogaDimensions(std::array<float, 2> dimensions) {
+std::string stringFromYogaDimensions(std::array<float, YGDimensionCount> dimensions) {
   return "{" + folly::to<std::string>(dimensions[0]) + ", " + folly::to<std::string>(dimensions[1]) + "}";
 }
 
@@ -228,7 +228,7 @@ std::string stringFromYogaPosition(std::array<float, 4> position) {
   return "{" + folly::to<std::string>(position[0]) + ", " + folly::to<std::string>(position[1]) + "}";
 }
 
-std::string stringFromYogaEdges(std::array<float, 6> edges) {
+std::string stringFromYogaEdges(std::array<float, YGEdgeCount> edges) {
   return "{" +
     folly::to<std::string>(edges[0]) + ", " +
     folly::to<std::string>(edges[1]) + ", " +
@@ -324,18 +324,23 @@ std::string stringFromYogaStyleOptionalFloat(YGFloatOptional value) {
   return folly::to<std::string>(fabricFloatFromYogaFloat(value.getValue()));
 }
 
-std::string stringFromYogaStyleDimensions(std::array<YGValue, 2> value) {
+std::string stringFromYogaStyleDimensions(std::array<YGValue, YGDimensionCount> value) {
   return "{" +
     stringFromYogaStyleValue(value[0]) + ", " +
     stringFromYogaStyleValue(value[1]) + "}";
 }
 
-std::string stringFromYogaStyleEdge(std::array<YGValue, YGEdgeCount> value) {
+std::string stringFromYogaStyleEdges(std::array<YGValue, YGEdgeCount> value) {
   return "{" +
     stringFromYogaStyleValue(value[0]) + ", " +
     stringFromYogaStyleValue(value[1]) + ", " +
     stringFromYogaStyleValue(value[2]) + ", " +
-    stringFromYogaStyleValue(value[3]) + "}";
+    stringFromYogaStyleValue(value[3]) + ", " +
+    stringFromYogaStyleValue(value[4]) + ", " +
+    stringFromYogaStyleValue(value[5]) + ", " +
+    stringFromYogaStyleValue(value[6]) + ", " +
+    stringFromYogaStyleValue(value[7]) + ", " +
+    stringFromYogaStyleValue(value[8]) + "}";
 }
 
 } // namespace react

ReactCommon/fabric/view/yoga/yogaValuesConversions.h

@@ -39,9 +39,9 @@ YGDisplay yogaStyleDisplayFromDynamic(const folly::dynamic &value);
 YGValue yogaStyleValueFromDynamic(const folly::dynamic &value);
 YGFloatOptional yogaStyleOptionalFloatFromDynamic(const folly::dynamic &value);
 
-std::string stringFromYogaDimensions(std::array<float, 2> dimensions);
+std::string stringFromYogaDimensions(std::array<float, YGDimensionCount> dimensions);
 std::string stringFromYogaPosition(std::array<float, 4> position);
-std::string stringFromYogaEdges(std::array<float, 6> edges);
+std::string stringFromYogaEdges(std::array<float, YGEdgeCount> edges);
 std::string stringFromYogaStyleDirection(YGDirection direction);
 std::string stringFromYogaStyleFlexDirection(YGFlexDirection value);
 std::string stringFromYogaStyleJustify(YGJustify value);
@@ -52,8 +52,8 @@ std::string stringFromYogaStyleOverflow(YGOverflow value);
 std::string stringFromYogaStyleDisplay(YGDisplay value);
 std::string stringFromYogaStyleValue(YGValue value);
 std::string stringFromYogaStyleOptionalFloat(YGFloatOptional value);
-std::string stringFromYogaStyleDimensions(std::array<YGValue, 2> value);
+std::string stringFromYogaStyleDimensions(std::array<YGValue, YGDimensionCount> value);
-std::string stringFromYogaStyleEdge(std::array<YGValue, YGEdgeCount> value);
+std::string stringFromYogaStyleEdges(std::array<YGValue, YGEdgeCount> value);
 
 } // namespace react
 } // namespace facebook