devtools: Add ref to inspect element view

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

@@ -1993,6 +1993,10 @@ describe('InspectedElement', () => {
             "preview_short": ƒ () {},
             "preview_long": ƒ () {},
           },
+          "Symbol(Symbol.toStringTag)": Dehydrated {
+            "preview_short": ƒ () {},
+            "preview_long": ƒ () {},
+          },
           "constructor": Dehydrated {
             "preview_short": ƒ () {},
             "preview_long": ƒ () {},
@@ -2898,4 +2902,66 @@ describe('InspectedElement', () => {
       );
     });
   });
+
+  describe('refs', () => {
+    it('has no ref by default', async () => {
+      const container = document.createElement('div');
+      function Example() {
+        return <div />;
+      }
+      await utils.actAsync(() => legacyRender(<Example />, container));
+
+      const inspectedElement = await inspectElementAtIndex(0);
+      expect(inspectedElement.ref).toEqual(null);
+    });
+
+    it('supports useRef on host components', async () => {
+      const container = document.createElement('div');
+      const ForwardRefComponent = React.forwardRef((props, ref) => (
+        <div ref={ref} />
+      ));
+      function Example() {
+        const ref = React.useRef(null);
+        return <ForwardRefComponent ref={ref} />;
+      }
+      await utils.actAsync(() => legacyRender(<Example />, container));
+
+      const inspectedElement = await inspectElementAtIndex(1);
+      expect(inspectedElement.ref).toMatchInlineSnapshot(
+        `"{current: <div />}"`,
+      );
+    });
+
+    it('supports useRef on class components', async () => {
+      const container = document.createElement('div');
+      class ClassComponent extends React.Component {
+        render() {
+          return null;
+        }
+      }
+      function Example() {
+        const ref = React.useRef(null);
+        return <ClassComponent ref={ref} />;
+      }
+      await utils.actAsync(() => legacyRender(<Example />, container));
+
+      const inspectedElement = await inspectElementAtIndex(1);
+      expect(inspectedElement.ref).toEqual('{current: {…}}');
+    });
+
+    it('supports ref callbacks', async () => {
+      const container = document.createElement('div');
+      const ForwardRefComponent = React.forwardRef((props, ref) => (
+        <div ref={ref} />
+      ));
+      function Example() {
+        const ref = () => {};
+        return <ForwardRefComponent ref={ref} />;
+      }
+      await utils.actAsync(() => legacyRender(<Example />, container));
+
+      const inspectedElement = await inspectElementAtIndex(1);
+      expect(inspectedElement.ref).toMatchInlineSnapshot(`"ƒ ref() {}"`);
+    });
+  });
 });

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -830,6 +830,9 @@ export function attach(
 
       key: key != null ? key : null,
 
+      // TODO: Support in legacy versions?
+      ref: null,
+
       // Inspectable properties.
       context,
       hooks: null,

packages/react-devtools-shared/src/backend/renderer.js

@@ -38,6 +38,7 @@ import {
   utfEncodeString,
 } from 'react-devtools-shared/src/utils';
 import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
+import {formatDataForPreview} from 'react-devtools-shared/src/utils';
 import {
   cleanForBridge,
   copyToClipboard,
@@ -3174,6 +3175,7 @@ export function attach(
       memoizedProps,
       memoizedState,
       dependencies,
+      ref,
       tag,
       type,
     } = fiber;
@@ -3378,6 +3380,8 @@ export function attach(
 
       key: key != null ? key : null,
 
+      ref,
+
       displayName: getDisplayNameForFiber(fiber),
       type: elementType,
 
@@ -3710,6 +3714,14 @@ export function attach(
       createIsPathAllowed('state', null),
     );
 
+    // Ref is a special case;
+    // don't dehydrate it in the same way (because it's not hydratable/inspectable).
+    // Just stringify it instead...
+    cleanedInspectedElement.ref = formatDataForPreview(
+      mostRecentlyInspectedElement.ref,
+      true,
+    );
+
     return {
       id,
       responseID: requestID,

packages/react-devtools-shared/src/backend/types.js

@@ -258,6 +258,7 @@ export type InspectedElement = {|
   props: Object | null,
   state: Object | null,
   key: number | string | null,
+  ref: Object | Function | null,
   errors: Array<[string, number]>,
   warnings: Array<[string, number]>,
 

packages/react-devtools-shared/src/backendAPI.js

@@ -212,6 +212,7 @@ export function convertInspectedElementBackendToFrontend(
     props,
     rendererPackageName,
     rendererVersion,
+    ref,
     rootType,
     state,
     key,
@@ -258,6 +259,7 @@ export function convertInspectedElementBackendToFrontend(
     hooks: hydrateHelper(hooks),
     props: hydrateHelper(props),
     state: hydrateHelper(state),
+    ref,
     errors,
     warnings,
   };

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

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import sharedStyles from './InspectedElementSharedStyles.css';
+
+// This is a little janky but it keeps the visual styles in sync.
+import keyValueStyles from './KeyValue.css';
+
+import type {InspectedElement} from './types';
+
+type Props = {|
+  inspectedElement: InspectedElement,
+|};
+
+export default function InspectedElementSpecialPropsTree({
+  inspectedElement,
+}: Props) {
+  const {ref} = inspectedElement;
+
+  if (ref === null) {
+    return null;
+  }
+
+  return (
+    <div className={sharedStyles.InspectedElementTree}>
+      {ref && (
+        <div className={keyValueStyles.Item} style={{paddingLeft: '1rem'}}>
+          ref
+          <div className={keyValueStyles.AfterName}>:</div>
+          <span className={keyValueStyles.Value}>{ref}</span>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -22,6 +22,7 @@ import InspectedElementContextTree from './InspectedElementContextTree';
 import InspectedElementErrorsAndWarningsTree from './InspectedElementErrorsAndWarningsTree';
 import InspectedElementHooksTree from './InspectedElementHooksTree';
 import InspectedElementPropsTree from './InspectedElementPropsTree';
+import InspectedElementSpecialPropsTree from './InspectedElementSpecialPropsTree';
 import InspectedElementStateTree from './InspectedElementStateTree';
 import InspectedElementStyleXPlugin from './InspectedElementStyleXPlugin';
 import InspectedElementSuspenseToggle from './InspectedElementSuspenseToggle';
@@ -89,6 +90,13 @@ export default function InspectedElementView({
       <div className={styles.InspectedElement}>
         <HocBadges element={element} />
 
+        <InspectedElementSpecialPropsTree
+          bridge={bridge}
+          element={element}
+          inspectedElement={inspectedElement}
+          store={store}
+        />
+
         <InspectedElementPropsTree
           bridge={bridge}
           element={element}

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

@@ -101,6 +101,7 @@ export type InspectedElement = {|
   props: Object | null,
   state: Object | null,
   key: number | string | null,
+  ref: string | null,
   errors: Array<[string, number]>,
   warnings: Array<[string, number]>,
 

packages/react-devtools-shared/src/utils.js

@@ -592,7 +592,11 @@ export function getDataType(data: Object): DataType {
     return 'react_element';
   }
 
-  if (typeof HTMLElement !== 'undefined' && data instanceof HTMLElement) {
+  if (
+    (typeof HTMLElement !== 'undefined' && data instanceof HTMLElement) ||
+    // cross-realm HTMLElement?
+    /^\[object HTML.+Element\]$/.test(Object.prototype.toString.call(data))
+  ) {
     return 'html_element';
   }
 

packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js

@@ -18,6 +18,7 @@ import EdgeCaseObjects from './EdgeCaseObjects.js';
 import NestedProps from './NestedProps';
 import SimpleValues from './SimpleValues';
 import SymbolKeys from './SymbolKeys';
+import Refs from './Refs';
 
 // TODO Add Immutable JS example
 
@@ -34,6 +35,7 @@ export default function InspectableElements() {
       <EdgeCaseObjects />
       <CircularReferences />
       <SymbolKeys />
+      <Refs />
     </Fragment>
   );
 }

packages/react-devtools-shell/src/app/InspectableElements/Refs.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+
+const ForwardRefComponent = React.forwardRef(function ForwardRefComponent(
+  props,
+  ref,
+) {
+  return <div ref={ref} />;
+});
+
+class ClassComponent extends React.Component {
+  render() {
+    return null;
+  }
+}
+
+export default function Refs() {
+  const hostRef = React.useRef(null);
+  const classComponentRef = React.useRef(null);
+  const forwardRefComponentRef = React.useRef(null);
+
+  return (
+    <React.Fragment>
+      <div data-testid="has-no-ref" />
+      <div ref={hostRef} />
+      <div ref={() => {}} />
+      <ClassComponent ref={classComponentRef} />
+      <ForwardRefComponent ref={forwardRefComponentRef} />
+      <ClassComponent ref={() => {}} />
+      <ClassComponent
+        key={0}
+        ref={function namedRefCallback() {}}
+        foo="foo"
+        bar={123}
+        baz={function namedProp() {}}
+      />
+    </React.Fragment>
+  );
+}