fix(react-devtools-shared): useDebugValue with complex types (#18070)

Co-authored-by: Brian Vaughn <[email protected]>

Author: eps1lon

packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap

@@ -1,5 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`InspectedElementContext display complex values of useDebugValue: DisplayedComplexValue 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": null,
+      "isStateEditable": false,
+      "name": "DebuggableHook",
+      "value": {
+        "foo": 2
+      },
+      "subHooks": [
+        {
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "value": 1,
+          "subHooks": []
+        }
+      ]
+    }
+  ],
+  "props": {},
+  "state": null
+}
+`;
+
 exports[`InspectedElementContext should dehydrate complex nested values when requested: 1: Initially inspect element 1`] = `
 {
   "id": 2,

packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js

@@ -1571,4 +1571,54 @@ describe('InspectedElementContext', () => {
 
     done();
   });
+
+  it('display complex values of useDebugValue', async done => {
+    let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
+    let inspectedElement = null;
+    function Suspender({target}) {
+      const context = React.useContext(InspectedElementContext);
+      getInspectedElementPath = context.getInspectedElementPath;
+      inspectedElement = context.getInspectedElement(target);
+      return null;
+    }
+
+    const container = document.createElement('div');
+
+    function useDebuggableHook() {
+      React.useDebugValue({foo: 2});
+      React.useState(1);
+      return 1;
+    }
+    function DisplayedComplexValue() {
+      useDebuggableHook();
+      return null;
+    }
+
+    await utils.actAsync(() =>
+      ReactDOM.render(<DisplayedComplexValue />, container),
+    );
+
+    const ignoredComplexValueIndex = 0;
+    const ignoredComplexValueId = ((store.getElementIDAtIndex(
+      ignoredComplexValueIndex,
+    ): any): number);
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={ignoredComplexValueId}
+            defaultSelectedElementIndex={ignoredComplexValueIndex}>
+            <React.Suspense fallback={null}>
+              <Suspender target={ignoredComplexValueId} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(getInspectedElementPath).not.toBeNull();
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('DisplayedComplexValue');
+
+    done();
+  });
 });

packages/react-devtools-shared/src/devtools/views/Components/HooksTree.css

@@ -53,6 +53,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: default;
+  white-space: nowrap;
 }
 
 .None {

packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js

@@ -17,7 +17,7 @@ import EditableValue from './EditableValue';
 import ExpandCollapseToggle from './ExpandCollapseToggle';
 import {InspectedElementContext} from './InspectedElementContext';
 import KeyValue from './KeyValue';
-import {serializeHooksForCopy} from '../utils';
+import {getMetaValueLabel, serializeHooksForCopy} from '../utils';
 import styles from './HooksTree.css';
 import useContextMenu from '../../ContextMenu/useContextMenu';
 import {meta} from '../../../hydration';
@@ -202,6 +202,9 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
               className={name !== '' ? styles.Name : styles.NameAnonymous}>
               {name || 'Anonymous'}
             </span>
+            <span className={styles.Value} onClick={toggleIsOpen}>
+              {isOpen || getMetaValueLabel(value)}
+            </span>
           </div>
           <div className={styles.Children} hidden={!isOpen}>
             <KeyValue