[DevTools] Show Props as Read-only for Suspense/Activity but below

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js

@@ -20,6 +20,7 @@ import styles from './InspectedElementSharedStyles.css';
 import {
   ElementTypeClass,
   ElementTypeSuspense,
+  ElementTypeActivity,
 } from 'react-devtools-shared/src/frontend/types';
 import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
 
@@ -50,20 +51,15 @@ export default function InspectedElementPropsTree({
     type,
   } = inspectedElement;
 
-  if (type === ElementTypeSuspense) {
-    // Skip showing the props for Suspense. We want to give more real estate to the
-    // "Suspended by" for Suspense boundaries. We could maybe show it further below
-    // but in practice, the props of Suspense boundaries are not very useful to
-    // inspect because the name shows in the tree already. The children in the tree
-    // will be either the "fallback" or "children" prop which you can already inspect
-    // but resuspending the tree.
-    return null;
-  }
-
   const canDeletePaths =
     type === ElementTypeClass || canEditFunctionPropsDeletePaths;
   const canEditValues =
-    !readOnly && (type === ElementTypeClass || canEditFunctionProps);
+    !readOnly &&
+    (type === ElementTypeClass || canEditFunctionProps) &&
+    // Make it read-only for Suspense to make it a bit cleaner. It's not
+    // useful to edit children anyway.
+    type !== ElementTypeSuspense &&
+    type !== ElementTypeActivity;
   const canRenamePaths =
     type === ElementTypeClass || canEditFunctionPropsRenamePaths;
 

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js

@@ -24,6 +24,10 @@ import InspectedElementSourcePanel from './InspectedElementSourcePanel';
 import StackTraceView from './StackTraceView';
 import OwnerView from './OwnerView';
 import Skeleton from './Skeleton';
+import {
+  ElementTypeSuspense,
+  ElementTypeActivity,
+} from 'react-devtools-shared/src/frontend/types';
 
 import styles from './InspectedElementView.css';
 
@@ -60,6 +64,7 @@ export default function InspectedElementView({
     rootType,
     source,
     nativeTag,
+    type,
   } = inspectedElement;
 
   const bridge = useContext(BridgeContext);
@@ -74,6 +79,17 @@ export default function InspectedElementView({
   const showRenderedBy =
     showStack || showOwnersList || rendererLabel !== null || rootType !== null;
 
+  const propsSection = (
+    <div className={styles.InspectedElementSection}>
+      <InspectedElementPropsTree
+        bridge={bridge}
+        element={element}
+        inspectedElement={inspectedElement}
+        store={store}
+      />
+    </div>
+  );
+
   return (
     <Fragment>
       <div className={styles.InspectedElement}>
@@ -85,14 +101,12 @@ export default function InspectedElementView({
           />
         </div>
 
-        <div className={styles.InspectedElementSection}>
-          <InspectedElementPropsTree
-            bridge={bridge}
-            element={element}
-            inspectedElement={inspectedElement}
-            store={store}
-          />
-        </div>
+        {
+          // For Suspense and Activity we show the props further down.
+          type !== ElementTypeSuspense && type !== ElementTypeActivity
+            ? propsSection
+            : null
+        }
 
         <div className={styles.InspectedElementSection}>
           <InspectedElementStateTree
@@ -157,6 +171,13 @@ export default function InspectedElementView({
           />
         </div>
 
+        {
+          // For Suspense and Activity we show the props below suspended by to give that more priority.
+          type !== ElementTypeSuspense && type !== ElementTypeActivity
+            ? null
+            : propsSection
+        }
+
         {showRenderedBy && (
           <div
             className={styles.InspectedElementSection}