Add placeholders to clarify between empty string, null, and undefined

Author: Codeboy0127

shells/dev/app/InspectableElements/Contexts.js

@@ -13,6 +13,8 @@ const contextData = {
   object: { outer: { inner: {} } },
   string: 'abc',
   symbol: Symbol.for('symbol'),
+  null: null,
+  undefined: undefined,
 };
 
 class LegacyContextProvider extends Component<any> {
@@ -24,6 +26,8 @@ class LegacyContextProvider extends Component<any> {
     object: PropTypes.object,
     string: PropTypes.string,
     symbol: PropTypes.symbol,
+    null: PropTypes.any,
+    undefined: PropTypes.any,
   };
 
   getChildContext() {
@@ -44,6 +48,8 @@ class LegacyContextConsumer extends Component<any> {
     object: PropTypes.object,
     string: PropTypes.string,
     symbol: PropTypes.symbol,
+    null: PropTypes.any,
+    undefined: PropTypes.any,
   };
 
   render() {

shells/dev/app/InspectableElements/NestedProps.js

@@ -2,26 +2,26 @@
 
 import React from 'react';
 
+const object = {
+  string: 'abc',
+  longString: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKJLMNOPQRSTUVWXYZ1234567890',
+  emptyString: '',
+  number: 123,
+  boolean: true,
+  undefined: undefined,
+  null: null,
+};
+
 export default function ObjectProps() {
   return (
     <ChildComponent
       object={{
         outer: {
-          inner: {
-            string: 'abc',
-            number: 123,
-            boolean: true,
-          },
+          inner: object,
         },
       }}
       array={['first', 'second', 'third']}
-      objectInArray={[
-        {
-          string: 'abc',
-          number: 123,
-          boolean: true,
-        },
-      ]}
+      objectInArray={[object]}
       arrayInObject={{ array: ['first', 'second', 'third'] }}
     />
   );

src/devtools/views/EditableValue.js

@@ -86,6 +86,15 @@ export default function EditableValue({
     inputValue = editableValue == null ? '' : editableValue;
   }
 
+  let placeholder = '';
+  if (value === null) {
+    placeholder = '(null)';
+  } else if (value === undefined) {
+    placeholder = '(undefined)';
+  } else if (dataType === 'string') {
+    placeholder = '(string)';
+  }
+
   return (
     <Fragment>
       {dataType === 'boolean' && (
@@ -105,6 +114,7 @@ export default function EditableValue({
           className={styles.Input}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
+          placeholder={placeholder}
           ref={inputRef}
           type={type}
           value={inputValue}