Improved selection and toggling for props/hooks/state (#17588)

1. Enable nested values to be expanded/collapsed by clicking on values as well as keys.
2. Enable keys and values to be selectable (for copy-pasting purposes)

Author: Brian Vaughn

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 {

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}

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 {

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>,
       );
     }