Add collapsible icon for object and array types

src/devtools/views/Components/KeyValue.css

@@ -26,3 +26,13 @@
   color: var(--color-dimmer);
   font-style: italic;
 }
+
+.Opener {
+  padding: 0.125rem;
+  margin-left: -1rem;
+}
+
+.Opener svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}

src/devtools/views/Components/KeyValue.js

@@ -1,7 +1,9 @@
 // @flow
 
-import React from 'react';
+import React, { useState } from 'react';
 import EditableValue from './EditableValue';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
 import { getMetaValueLabel } from '../utils';
 import { meta } from '../../../hydration';
 import styles from './KeyValue.css';
@@ -23,6 +25,12 @@ export default function KeyValue({
   path = [],
   value,
 }: KeyValueProps) {
+  const [open, setOpen] = useState(false);
+
+  const handleToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+
   const dataType = typeof value;
   const isSimpleType =
     dataType === 'number' ||
@@ -72,45 +80,57 @@ export default function KeyValue({
       </div>
     );
   } else {
+    const opener = (
+      <Button className={styles.Opener} onClick={handleToggle}>
+        <ButtonIcon type={open ? 'up' : 'down'} />
+      </Button>
+    );
+
     if (Array.isArray(value)) {
-      children = value.map((innerValue, index) => (
-        <KeyValue
-          key={index}
-          depth={depth + 1}
-          name={index}
-          overrideValueFn={overrideValueFn}
-          path={path.concat(index)}
-          value={value[index]}
-        />
-      ));
+      children = open
+        ? value.map((innerValue, index) => (
+            <KeyValue
+              key={index}
+              depth={depth + 1}
+              name={index}
+              overrideValueFn={overrideValueFn}
+              path={path.concat(index)}
+              value={value[index]}
+            />
+          ))
+        : [];
       children.unshift(
         <div
           key={`${depth}-root`}
           className={styles.Item}
           style={{ paddingLeft }}
         >
+          {value.length > 0 && opener}
           <span className={styles.Name}>{name}</span>
           <span>Array</span>
         </div>
       );
     } else {
-      // $FlowFixMe "Missing type annotation for U" whatever that means
-      children = Object.entries(value).map(([name, value]) => (
-        <KeyValue
-          key={name}
-          depth={depth + 1}
-          name={name}
-          overrideValueFn={overrideValueFn}
-          path={path.concat(name)}
-          value={value}
-        />
-      ));
+      children = open
+        ? // $FlowFixMe "Missing type annotation for U" whatever that means
+          Object.entries(value).map(([name, value]) => (
+            <KeyValue
+              key={name}
+              depth={depth + 1}
+              name={name}
+              overrideValueFn={overrideValueFn}
+              path={path.concat(name)}
+              value={value}
+            />
+          ))
+        : [];
       children.unshift(
         <div
           key={`${depth}-root`}
           className={styles.Item}
           style={{ paddingLeft }}
         >
+          {Object.entries(value).length > 0 && opener}
           <span className={styles.Name}>{name}</span>
           <span>Object</span>
         </div>