From 40469a190e79ea13cb482620055c05e221f64c17 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 12:47:51 -0700
Subject: [PATCH] Fixed horizontal alignment for collapsable hooks

---
 src/devtools/views/Components/HooksTree.css |  9 +++++-
 src/devtools/views/Components/HooksTree.js  | 31 +++++++++++++--------
 src/devtools/views/Components/KeyValue.css  |  5 +++-
 src/devtools/views/Components/KeyValue.js   |  8 +++---
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/devtools/views/Components/HooksTree.css b/src/devtools/views/Components/HooksTree.css
index a1acc5a493..67bd155b90 100644
--- a/src/devtools/views/Components/HooksTree.css
+++ b/src/devtools/views/Components/HooksTree.css
@@ -4,7 +4,10 @@
 }
 
 .Hook {
-  padding-left: 0.75rem;
+}
+
+.Children {
+  padding-left: 1rem;
 }
 
 .HeaderRow {
@@ -50,3 +53,7 @@
 .TruncationIndicator {
   color: var(--color-dimmer);
 }
+
+.ExpandCollapseToggleSpacer {
+  width: 1rem;
+}
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index f89bd93cbc..cb27a2ee67 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -121,28 +121,34 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
       return (
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
+            <span className={styles.ExpandCollapseToggleSpacer} />
             <span className={styles.Name}>{name}</span>
           </div>
-          <KeyValue depth={1} name="DebugValue" value={value} />
-          <InnerHooksTreeView
-            canEditHooks={canEditHooks}
-            hooks={subHooks}
-            id={id}
-          />
+          <div className={styles.Children}>
+            <KeyValue depth={1} name="DebugValue" value={value} />
+            <InnerHooksTreeView
+              canEditHooks={canEditHooks}
+              hooks={subHooks}
+              id={id}
+            />
+          </div>
         </div>
       );
     } else {
       return (
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
+            <span className={styles.ExpandCollapseToggleSpacer} />
             <span className={styles.Name}>{name}</span> {/* $FlowFixMe */}
             <span className={styles.Value}>{displayValue}</span>
           </div>
-          <InnerHooksTreeView
-            canEditHooks={canEditHooks}
-            hooks={subHooks}
-            id={id}
-          />
+          <div className={styles.Children}>
+            <InnerHooksTreeView
+              canEditHooks={canEditHooks}
+              hooks={subHooks}
+              id={id}
+            />
+          </div>
         </div>
       );
     }
@@ -166,7 +172,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
       return (
         <div className={styles.Hook}>
           <KeyValue
-            depth={0}
+            depth={1}
             name={name}
             overrideValueFn={overrideValueFn}
             value={value}
@@ -177,6 +183,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
       return (
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
+            <span className={styles.ExpandCollapseToggleSpacer} />
             <span
               className={
                 typeof overrideValueFn === 'function'
diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index 2c47ed23c9..565e7fbe27 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -30,9 +30,12 @@
 }
 
 .ExpandCollapseToggle {
-  display: inline-flex;
   width: 1rem;
   height: 1rem;
   padding: 0;
   color: var(--color-expand-collapse-toggle);
 }
+
+.ExpandCollapseToggleSpacer {
+  width: 1rem;
+}
diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index ee9d0b965b..ed965943f5 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -62,7 +62,7 @@ export default function KeyValue({
 
     children = (
       <div key="root" className={styles.Item} style={style}>
-        <div className={styles.ExpandCollapseToggle} />
+        <div className={styles.ExpandCollapseToggleSpacer} />
         <span className={nameClassName}>{name}</span>
         {typeof overrideValueFn === 'function' ? (
           <EditableValue
@@ -80,7 +80,7 @@ export default function KeyValue({
     // TODO Is this type even necessary? Can we just drop it?
     children = (
       <div key="root" className={styles.Item} style={style}>
-        <div className={styles.ExpandCollapseToggle} />
+        <div className={styles.ExpandCollapseToggleSpacer} />
         <span className={styles.Name}>{name}</span>
         <span className={styles.Value}>{getMetaValueLabel(value)}</span>
       </div>
@@ -106,7 +106,7 @@ export default function KeyValue({
           {hasChildren ? (
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
           ) : (
-            <div className={styles.ExpandCollapseToggle} />
+            <div className={styles.ExpandCollapseToggleSpacer} />
           )}
           <span
             className={styles.Name}
@@ -137,7 +137,7 @@ export default function KeyValue({
           {hasChildren ? (
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
           ) : (
-            <div className={styles.ExpandCollapseToggle} />
+            <div className={styles.ExpandCollapseToggleSpacer} />
           )}
           <span
             className={styles.Name}