From aca1f166bd6ec7a8c12e1d0b459520c2161f71b8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 10 Sep 2019 14:01:54 -0700
Subject: [PATCH 1/3] Fix DevTools new prop input size

---
 .../src/devtools/views/Components/EditableValue.js            | 4 +++-
 .../src/devtools/views/Components/InspectedElementTree.css    | 4 ++++
 .../src/devtools/views/Components/InspectedElementTree.js     | 1 +
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
index 96f505c20f188..c196a8d83b74e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
@@ -16,6 +16,7 @@ import {useEditableValue} from '../hooks';
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;
 
 type EditableValueProps = {|
+  className?: string,
   dataType: string,
   initialValue: any,
   overrideValueFn: OverrideValueFn,
@@ -23,6 +24,7 @@ type EditableValueProps = {|
 |};
 
 export default function EditableValue({
+  className = '',
   dataType,
   initialValue,
   overrideValueFn,
@@ -74,7 +76,7 @@ export default function EditableValue({
     <Fragment>
       <input
         autoComplete="new-password"
-        className={isValid ? styles.Input : styles.Invalid}
+        className={`${isValid ? styles.Input : styles.Invalid} ${className}`}
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.css
index 76c1e40761019..4547a814d0524 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.css
@@ -53,3 +53,7 @@
   display: flex;
   align-items: center;
 }
+
+.EditableValue {
+  min-width: 1rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
index edfb5f2c5679e..898fb528e415b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
@@ -104,6 +104,7 @@ export default function InspectedElementTree({
             />
             :&nbsp;
             <EditableValue
+              className={styles.EditableValue}
               initialValue={''}
               overrideValueFn={handleNewEntryValue}
               path={[newPropName]}

From e699a2043466f530ada9cdce72c270ebb1aa473d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 10 Sep 2019 14:15:11 -0700
Subject: [PATCH 2/3] Don't allow adding new values unless an overridePropsFn
 function has been provided.

---
 .../src/devtools/views/Components/SelectedElement.js            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
index 46af47c1d7773..08d15104ec8e5 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
@@ -358,7 +358,7 @@ function InspectedElementView({
         inspectPath={inspectPropsPath}
         overrideValueFn={overridePropsFn}
         showWhenEmpty={true}
-        canAddEntries={true}
+        canAddEntries={typeof overridePropsFn === 'function'}
       />
       {type === ElementTypeSuspense ? (
         <InspectedElementTree

From 4ee7d915423b0d9c7d97520d47d4be97cb3e74a9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 10 Sep 2019 14:24:24 -0700
Subject: [PATCH 3/3] Do not show empty 'none' label ablve a new prop input

---
 .../src/devtools/views/Components/InspectedElementTree.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
index 898fb528e415b..9c81c3f952fdb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
@@ -82,7 +82,7 @@ export default function InspectedElementTree({
             </Button>
           )}
         </div>
-        {isEmpty && <div className={styles.Empty}>None</div>}
+        {isEmpty && !canAddEntries && <div className={styles.Empty}>None</div>}
         {!isEmpty &&
           (entries: any).map(([name, value]) => (
             <KeyValue