DevTools: Improve function props display for inspected elements (#17789)

Author: Brian Vaughn

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

@@ -485,11 +485,13 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
   "context": null,
   "hooks": null,
   "props": {
+    "anonymous_fn": {},
     "array_buffer": {},
     "array_of_arrays": [
       {}
     ],
     "big_int": {},
+    "bound_fn": {},
     "data_view": {},
     "date": {},
     "fn": {},

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

@@ -538,14 +538,21 @@ describe('InspectedElementContext', () => {
       },
     });
 
+    class Class {
+      anonymousFunction = () => {};
+    }
+    const instance = new Class();
+
     const container = document.createElement('div');
     await utils.actAsync(() =>
       ReactDOM.render(
         <Example
+          anonymous_fn={instance.anonymousFunction}
           array_buffer={arrayBuffer}
           array_of_arrays={arrayOfArrays}
           // eslint-disable-next-line no-undef
           big_int={BigInt(123)}
+          bound_fn={exampleFunction.bind(this)}
           data_view={dataView}
           date={new Date(exampleDateISO)}
           fn={exampleFunction}
@@ -593,9 +600,11 @@ describe('InspectedElementContext', () => {
     expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
 
     const {
+      anonymous_fn,
       array_buffer,
       array_of_arrays,
       big_int,
+      bound_fn,
       data_view,
       date,
       fn,
@@ -612,6 +621,12 @@ describe('InspectedElementContext', () => {
       typed_array,
     } = (inspectedElement: any).props;
 
+    expect(anonymous_fn[meta.inspectable]).toBe(false);
+    expect(anonymous_fn[meta.name]).toBe('function');
+    expect(anonymous_fn[meta.type]).toBe('function');
+    expect(anonymous_fn[meta.preview_long]).toBe('ƒ () {}');
+    expect(anonymous_fn[meta.preview_short]).toBe('ƒ () {}');
+
     expect(array_buffer[meta.size]).toBe(3);
     expect(array_buffer[meta.inspectable]).toBe(false);
     expect(array_buffer[meta.name]).toBe('ArrayBuffer');
@@ -632,6 +647,12 @@ describe('InspectedElementContext', () => {
     expect(big_int[meta.preview_long]).toBe('123n');
     expect(big_int[meta.preview_short]).toBe('123n');
 
+    expect(bound_fn[meta.inspectable]).toBe(false);
+    expect(bound_fn[meta.name]).toBe('bound exampleFunction');
+    expect(bound_fn[meta.type]).toBe('function');
+    expect(bound_fn[meta.preview_long]).toBe('ƒ bound exampleFunction() {}');
+    expect(bound_fn[meta.preview_short]).toBe('ƒ bound exampleFunction() {}');
+
     expect(data_view[meta.size]).toBe(3);
     expect(data_view[meta.inspectable]).toBe(false);
     expect(data_view[meta.name]).toBe('DataView');
@@ -651,8 +672,8 @@ describe('InspectedElementContext', () => {
     expect(fn[meta.inspectable]).toBe(false);
     expect(fn[meta.name]).toBe('exampleFunction');
     expect(fn[meta.type]).toBe('function');
-    expect(fn[meta.preview_long]).toBe('exampleFunction');
-    expect(fn[meta.preview_short]).toBe('exampleFunction');
+    expect(fn[meta.preview_long]).toBe('ƒ exampleFunction() {}');
+    expect(fn[meta.preview_short]).toBe('ƒ exampleFunction() {}');
 
     expect(html_element[meta.inspectable]).toBe(false);
     expect(html_element[meta.name]).toBe('DIV');

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

@@ -126,11 +126,13 @@ Object {
   "context": {},
   "hooks": null,
   "props": {
+    "anonymous_fn": {},
     "array_buffer": {},
     "array_of_arrays": [
       {}
     ],
     "big_int": {},
+    "bound_fn": {},
     "data_view": {},
     "date": {},
     "fn": {},

packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js

@@ -169,13 +169,20 @@ describe('InspectedElementContext', () => {
       },
     });
 
+    class Class {
+      anonymousFunction = () => {};
+    }
+    const instance = new Class();
+
     act(() =>
       ReactDOM.render(
         <Example
+          anonymous_fn={instance.anonymousFunction}
           array_buffer={arrayBuffer}
           array_of_arrays={arrayOfArrays}
           // eslint-disable-next-line no-undef
           big_int={BigInt(123)}
+          bound_fn={exampleFunction.bind(this)}
           data_view={dataView}
           date={new Date(123)}
           fn={exampleFunction}
@@ -201,9 +208,11 @@ describe('InspectedElementContext', () => {
     expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
 
     const {
+      anonymous_fn,
       array_buffer,
       array_of_arrays,
       big_int,
+      bound_fn,
       data_view,
       date,
       fn,
@@ -220,6 +229,12 @@ describe('InspectedElementContext', () => {
       typed_array,
     } = inspectedElement.value.props;
 
+    expect(anonymous_fn[meta.inspectable]).toBe(false);
+    expect(anonymous_fn[meta.name]).toBe('function');
+    expect(anonymous_fn[meta.type]).toBe('function');
+    expect(anonymous_fn[meta.preview_long]).toBe('ƒ () {}');
+    expect(anonymous_fn[meta.preview_short]).toBe('ƒ () {}');
+
     expect(array_buffer[meta.size]).toBe(3);
     expect(array_buffer[meta.inspectable]).toBe(false);
     expect(array_buffer[meta.name]).toBe('ArrayBuffer');
@@ -238,6 +253,12 @@ describe('InspectedElementContext', () => {
     expect(big_int[meta.name]).toBe('123');
     expect(big_int[meta.type]).toBe('bigint');
 
+    expect(bound_fn[meta.inspectable]).toBe(false);
+    expect(bound_fn[meta.name]).toBe('bound exampleFunction');
+    expect(bound_fn[meta.type]).toBe('function');
+    expect(bound_fn[meta.preview_long]).toBe('ƒ bound exampleFunction() {}');
+    expect(bound_fn[meta.preview_short]).toBe('ƒ bound exampleFunction() {}');
+
     expect(data_view[meta.size]).toBe(3);
     expect(data_view[meta.inspectable]).toBe(false);
     expect(data_view[meta.name]).toBe('DataView');
@@ -249,6 +270,8 @@ describe('InspectedElementContext', () => {
     expect(fn[meta.inspectable]).toBe(false);
     expect(fn[meta.name]).toBe('exampleFunction');
     expect(fn[meta.type]).toBe('function');
+    expect(fn[meta.preview_long]).toBe('ƒ exampleFunction() {}');
+    expect(fn[meta.preview_short]).toBe('ƒ exampleFunction() {}');
 
     expect(html_element[meta.inspectable]).toBe(false);
     expect(html_element[meta.name]).toBe('DIV');

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

@@ -151,7 +151,7 @@ export function dehydrate(
         inspectable: false,
         preview_short: formatDataForPreview(data, false),
         preview_long: formatDataForPreview(data, true),
-        name: data.name,
+        name: data.name || 'function',
         type,
       };
 

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

@@ -502,7 +502,7 @@ export function formatDataForPreview(
     case 'html_element':
       return `<${truncateForDisplay(data.tagName.toLowerCase())} />`;
     case 'function':
-      return truncateForDisplay(data.name);
+      return truncateForDisplay(`ƒ ${data.name}() {}`);
     case 'string':
       return `"${data}"`;
     case 'bigint':

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

@@ -7,26 +7,32 @@
  * @flow
  */
 
-import React from 'react';
+import React, {Component} from 'react';
 
 function noop() {}
 
-export default function SimpleValues() {
-  return (
-    <ChildComponent
-      string="abc"
-      emptyString=""
-      number={123}
-      undefined={undefined}
-      null={null}
-      nan={NaN}
-      infinity={Infinity}
-      true={true}
-      false={false}
-      function={noop}
-      regex={/abc[123]+/i}
-    />
-  );
+export default class SimpleValues extends Component {
+  anonymousFunction = () => {};
+
+  render() {
+    return (
+      <ChildComponent
+        string="abc"
+        emptyString=""
+        number={123}
+        undefined={undefined}
+        null={null}
+        nan={NaN}
+        infinity={Infinity}
+        true={true}
+        false={false}
+        function={noop}
+        anonymousFunction={this.anonymousFunction}
+        boundFunction={noop.bind(this)}
+        regex={/abc[123]+/i}
+      />
+    );
+  }
 }
 
 function ChildComponent(props: any) {