From a4638033b791e0eda18c4f06ce5fd688cd83b90e Mon Sep 17 00:00:00 2001
From: Benjamin Pankow <bbp@fb.com>
Date: Tue, 31 Jul 2018 14:52:00 -0700
Subject: [PATCH] Improve styling of Hprof Analysis for Memory Tools plugin

Summary:
Improves the look of analyzed Hprof data for the Memory Tools plugin. Adds an expandable/collapsable tree using ElementsInspector and groups large objects/leaked objects.
https://pxl.cl/fxNs

Reviewed By: danielbuechele

Differential Revision: D8721141

fbshipit-source-id: f78fe32bd2ca1f11ce39b9e696f48a56dc5c9bff
---
 .../elements-inspector/ElementsInspector.js           |  6 ++++++
 src/ui/components/elements-inspector/elements.js      | 11 ++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/ui/components/elements-inspector/ElementsInspector.js b/src/ui/components/elements-inspector/ElementsInspector.js
index f765bd3d9..ca820f652 100644
--- a/src/ui/components/elements-inspector/ElementsInspector.js
+++ b/src/ui/components/elements-inspector/ElementsInspector.js
@@ -61,7 +61,11 @@ export default class ElementsInspector extends Component<{
   root: ?ElementID,
   elements: {[key: ElementID]: Element},
   useAppSidebar?: boolean,
+  alternateRowColor?: boolean,
 }> {
+  static defaultProps = {
+    alternateRowColor: true,
+  };
   render() {
     const {
       selected,
@@ -71,6 +75,7 @@ export default class ElementsInspector extends Component<{
       onElementSelected,
       onElementHovered,
       searchResults,
+      alternateRowColor,
     } = this.props;
 
     return (
@@ -83,6 +88,7 @@ export default class ElementsInspector extends Component<{
           searchResults={searchResults}
           root={root}
           elements={elements}
+          alternateRowColor={alternateRowColor}
         />
       </FlexRow>
     );
diff --git a/src/ui/components/elements-inspector/elements.js b/src/ui/components/elements-inspector/elements.js
index b9690b8c5..710b9f3b6 100644
--- a/src/ui/components/elements-inspector/elements.js
+++ b/src/ui/components/elements-inspector/elements.js
@@ -391,6 +391,7 @@ type ElementsProps = {|
   onElementSelected: (key: ElementID) => void,
   onElementExpanded: (key: ElementID, deep: boolean) => void,
   onElementHovered: ?(key: ?ElementID) => void,
+  alternateRowColor?: boolean,
 |};
 
 type ElementsState = {|
@@ -400,6 +401,9 @@ type ElementsState = {|
 |};
 
 export class Elements extends PureComponent<ElementsProps, ElementsState> {
+  static defaultProps = {
+    alternateRowColor: true,
+  };
   constructor(props: ElementsProps, context: Object) {
     super(props, context);
     this.state = {
@@ -566,12 +570,17 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
       }
     }
 
+    let isEven = false;
+    if (this.props.alternateRowColor) {
+      isEven = index % 2 === 0;
+    }
+
     return (
       <ElementsRow
         level={row.level}
         id={row.key}
         key={row.key}
-        even={index % 2 === 0}
+        even={isEven}
         onElementExpanded={onElementExpanded}
         onElementHovered={onElementHovered}
         onElementSelected={onElementSelected}