Fixed editing props for memo and forwardRef components

shells/dev/app/EditableProps/index.js

@@ -3,7 +3,9 @@
 import React, {
   createContext,
   Component,
+  forwardRef,
   Fragment,
+  memo,
   useCallback,
   useDebugValue,
   useEffect,
@@ -38,7 +40,7 @@ function StatefulFunction({ name }: StatefulFunctionProps) {
   );
 
   return (
-    <Fragment>
+    <ul>
       <li>Name: {name}</li>
       <li>
         <button onClick={handleUpdateCountClick}>
@@ -51,7 +53,7 @@ function StatefulFunction({ name }: StatefulFunctionProps) {
       <li>
         <button onClick={handleUpdateReducerClick}>Swap reducer values</button>
       </li>
-    </Fragment>
+    </ul>
   );
 }
 
@@ -76,7 +78,7 @@ class StatefulClass extends Component<Props, State> {
 
   render() {
     return (
-      <Fragment>
+      <ul>
         <li>Name: {this.props.name}</li>
         <li>Toggle: {this.props.toggle ? 'true' : 'false'}</li>
         <li>
@@ -84,19 +86,48 @@ class StatefulClass extends Component<Props, State> {
         </li>
         <li>Cities: {this.state.cities.join(', ')}</li>
         <li>Context: {this.context ? 'true' : 'false'}</li>
-      </Fragment>
+      </ul>
     );
   }
 }
 
+const MemoizedStatefulClass = memo(StatefulClass);
+const MemoizedStatefulFunction = memo(StatefulFunction);
+
+const ForwardRef = forwardRef<{| name: string |}, HTMLUListElement>(
+  ({ name }, ref) => {
+    const [count, updateCount] = useState(0);
+    const debouncedCount = useDebounce(count, 1000);
+    const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [
+      count,
+    ]);
+    return (
+      <ul ref={ref}>
+        <li>Name: {name}</li>
+        <li>
+          <button onClick={handleUpdateCountClick}>
+            Debounced count: {debouncedCount}
+          </button>
+        </li>
+      </ul>
+    );
+  }
+);
+
 export default function EditableProps() {
   return (
     <Fragment>
       <h1>Editable props</h1>
-      <ul>
-        <StatefulClass name="Brian" toggle={true} />
-        <StatefulFunction name="Brian" />
-      </ul>
+      <strong>Class</strong>
+      <StatefulClass name="Brian" toggle={true} />
+      <strong>Function</strong>
+      <StatefulFunction name="Brian" />
+      <strong>Memoized Class</strong>
+      <MemoizedStatefulClass name="Brian" toggle={true} />
+      <strong>Memoized Function</strong>
+      <MemoizedStatefulFunction name="Brian" />
+      <strong>Forward Ref</strong>
+      <ForwardRef name="Brian" />
     </Fragment>
   );
 }

src/devtools/views/Components/HooksTree.css

@@ -25,6 +25,11 @@
   color: var(--color-dim);
   flex: 0 0 auto;
 }
+.EditableName {
+  color: var(--color-attribute-name);
+  flex: 0 0 auto;
+}
+.EditableName:after,
 .Name:after {
   color: var(--color-text-color);
   content: ': ';

src/devtools/views/Components/HooksTree.js

@@ -110,12 +110,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
           <div className={styles.NameValueRow}>
             <span className={styles.Name}>{name}</span>
           </div>
-          <KeyValue
-            depth={1}
-            name="DebugValue"
-            nameClassName={styles.Name}
-            value={value}
-          />
+          <KeyValue depth={1} name="DebugValue" value={value} />
           <InnerHooksTreeView
             canEditHooks={canEditHooks}
             hooks={subHooks}
@@ -160,7 +155,6 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
           <KeyValue
             depth={0}
             name={name}
-            nameClassName={styles.Name}
             overrideValueFn={overrideValueFn}
             value={value}
           />
@@ -170,7 +164,15 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
       return (
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
-            <span className={styles.Name}>{name}</span>
+            <span
+              className={
+                typeof overrideValueFn === 'function'
+                  ? styles.EditableName
+                  : styles.Name
+              }
+            >
+              {name}
+            </span>
             {typeof overrideValueFn === 'function' ? (
               <EditableValue
                 dataType={type}

src/devtools/views/Components/KeyValue.css

@@ -3,9 +3,14 @@
 }
 
 .Name {
+  color: var(--color-dim);
+  flex: 0 0 auto;
+}
+.EditableName {
   color: var(--color-attribute-name);
   flex: 0 0 auto;
 }
+.EditableName:after,
 .Name:after {
   content: ': ';
   color: var(--color-text-color);

src/devtools/views/Components/KeyValue.js

@@ -11,7 +11,6 @@ type OverrideValueFn = (path: Array<string | number>, value: any) => void;
 type KeyValueProps = {|
   depth: number,
   name: string,
-  nameClassName?: string,
   overrideValueFn?: ?OverrideValueFn,
   path?: Array<any>,
   value: any,
@@ -20,7 +19,6 @@ type KeyValueProps = {|
 export default function KeyValue({
   depth,
   name,
-  nameClassName = styles.Name,
   overrideValueFn,
   path = [],
   value,
@@ -47,6 +45,9 @@ export default function KeyValue({
       displayValue = 'undefined';
     }
 
+    const nameClassName =
+      typeof overrideValueFn === 'function' ? styles.EditableName : styles.Name;
+
     children = (
       <div key="root" className={styles.Item} style={{ paddingLeft }}>
         <span className={nameClassName}>{name}</span>
@@ -66,7 +67,7 @@ export default function KeyValue({
     // TODO Is this type even necessary? Can we just drop it?
     children = (
       <div key="root" className={styles.Item} style={{ paddingLeft }}>
-        <span className={nameClassName}>{name}</span>
+        <span className={styles.Name}>{name}</span>
         <span className={styles.Value}>{getMetaValueLabel(value)}</span>
       </div>
     );
@@ -88,7 +89,7 @@ export default function KeyValue({
           className={styles.Item}
           style={{ paddingLeft }}
         >
-          <span className={nameClassName}>{name}</span>
+          <span className={styles.Name}>{name}</span>
           <span>Array</span>
         </div>
       );
@@ -110,7 +111,7 @@ export default function KeyValue({
           className={styles.Item}
           style={{ paddingLeft }}
         >
-          <span className={nameClassName}>{name}</span>
+          <span className={styles.Name}>{name}</span>
           <span>Object</span>
         </div>
       );

src/devtools/views/Components/SelectedElement.js

@@ -15,7 +15,12 @@ import HooksTree from './HooksTree';
 import InspectedElementTree from './InspectedElementTree';
 import { hydrate } from 'src/hydration';
 import styles from './SelectedElement.css';
-import { ElementTypeClass, ElementTypeFunction } from '../../types';
+import {
+  ElementTypeClass,
+  ElementTypeForwardRef,
+  ElementTypeFunction,
+  ElementTypeMemo,
+} from '../../types';
 
 import type { InspectedElement } from './types';
 import type { DehydratedData, Element } from './types';
@@ -145,7 +150,12 @@ function InspectedElementView({
       const rendererID = store.getRendererIDForElement(id);
       bridge.send('overrideState', { id, path, rendererID, value });
     };
-  } else if (type === ElementTypeFunction && canEditFunctionProps) {
+  } else if (
+    (type === ElementTypeFunction ||
+      type === ElementTypeMemo ||
+      type === ElementTypeForwardRef) &&
+    canEditFunctionProps
+  ) {
     overridePropsFn = (path: Array<string | number>, value: any) => {
       const rendererID = store.getRendererIDForElement(id);
       bridge.send('overrideProps', { id, path, rendererID, value });