From fd9edc8a0ee69c6b70d5abaf8a7dac56c6621609 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 12 Dec 2019 11:03:40 -0800
Subject: [PATCH] Improved selection and toggling for props/hooks/state

1. Enable nested values to be expanded/collapsed by clicking on values as well as keys.
2. Enable keys and values to be seletable (for copy-pasting purposes)
---
 .../devtools/views/Components/HooksTree.css    |  5 +++--
 .../src/devtools/views/Components/HooksTree.js |  4 +++-
 .../src/devtools/views/Components/KeyValue.css |  5 +++--
 .../src/devtools/views/Components/KeyValue.js  | 18 +++++++++++++++---
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.css b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.css
index 1304c276cc711..37e0d9dbd5e00 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.css
@@ -27,7 +27,7 @@
 .Name,
 .NameAnonymous {
   flex: 0 0 auto;
-  user-select: none;
+  cursor: default;
 }
 .Name {
   color: var(--color-dim);
@@ -39,7 +39,7 @@
 .EditableName {
   color: var(--color-attribute-name);
   flex: 0 0 auto;
-  user-select: none;
+  cursor: default;
 }
 .EditableName:after,
 .Name:after {
@@ -52,6 +52,7 @@
   color: var(--color-attribute-value);
   overflow: hidden;
   text-overflow: ellipsis;
+  cursor: default;
 }
 
 .None {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
index b02e8faa95f39..a59a0cad25950 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
@@ -208,7 +208,9 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
               {name || 'Anonymous'}
             </span>{' '}
             {/* $FlowFixMe */}
-            <span className={styles.Value}>{displayValue}</span>
+            <span className={styles.Value} onClick={toggleIsOpen}>
+              {displayValue}
+            </span>
           </div>
           <div className={styles.Children} hidden={!isOpen}>
             {subHooksView}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
index ca523c1506492..a984ac76df530 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
@@ -5,12 +5,12 @@
 .Name {
   color: var(--color-dim);
   flex: 0 0 auto;
-  user-select: none;
+  cursor: default;
 }
 .EditableName {
   color: var(--color-attribute-name);
   flex: 0 0 auto;
-  user-select: none;
+  cursor: default;
 }
 .EditableName:after,
 .Name:after {
@@ -24,6 +24,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  cursor: default;
 }
 
 .None {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index 07e7337d501c5..8e9543f31c9c7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -127,7 +127,11 @@ export default function KeyValue({
           onClick={isInspectable ? toggleIsOpen : undefined}>
           {name}
         </span>
-        <span className={styles.Value}>{getMetaValueLabel(value)}</span>
+        <span
+          className={styles.Value}
+          onClick={isInspectable ? toggleIsOpen : undefined}>
+          {getMetaValueLabel(value)}
+        </span>
       </div>
     );
   } else {
@@ -165,7 +169,11 @@ export default function KeyValue({
             onClick={hasChildren ? toggleIsOpen : undefined}>
             {name}
           </span>
-          <span className={styles.Value}>{displayName}</span>
+          <span
+            className={styles.Value}
+            onClick={hasChildren ? toggleIsOpen : undefined}>
+            {displayName}
+          </span>
         </div>,
       );
     } else {
@@ -211,7 +219,11 @@ export default function KeyValue({
             onClick={hasChildren ? toggleIsOpen : undefined}>
             {name}
           </span>
-          <span className={styles.Value}>{displayName}</span>
+          <span
+            className={styles.Value}
+            onClick={hasChildren ? toggleIsOpen : undefined}>
+            {displayName}
+          </span>
         </div>,
       );
     }