Fixed editing props for memo and forwardRef components

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 });