DevTools: Add root and renderer version to inspected props panel (#18963)

* DevTools: Add root and renderer version to inspected props panel
* Removed redundant .length check

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

@@ -26,12 +26,12 @@ export default function Badge({
   type,
   children,
 }: Props) {
-  let totalBadgeCount = 0;
-
-  if (hocDisplayNames !== null) {
-    totalBadgeCount += hocDisplayNames.length;
+  if (hocDisplayNames === null) {
+    return null;
   }
 
+  const totalBadgeCount = hocDisplayNames.length;
+
   return (
     <Fragment>
       <div className={`${styles.Badge} ${className || ''}`}>{children}</div>

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

@@ -208,6 +208,9 @@ function InspectedElementContextController({children}: Props) {
             context,
             hooks,
             props,
+            rendererPackageName,
+            rendererVersion,
+            rootType,
             state,
             key,
           } = ((data.value: any): InspectedElementBackend);
@@ -220,6 +223,9 @@ function InspectedElementContextController({children}: Props) {
             hasLegacyContext,
             id,
             key,
+            rendererPackageName,
+            rendererVersion,
+            rootType,
             source,
             type,
             owners:

packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css

@@ -153,3 +153,10 @@
 .ContextMenuIcon {
   margin-right: 0.5rem;
 }
+
+.OwnersMetaField {
+  padding-left: 1.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -45,7 +45,7 @@ import type {
   InspectedElementContextType,
   StoreAsGlobal,
 } from './InspectedElementContext';
-import type {Element, InspectedElement} from './types';
+import type {Element, InspectedElement, Owner} from './types';
 import type {ElementType} from 'react-devtools-shared/src/types';
 
 export type Props = {||};
@@ -291,11 +291,13 @@ function InspectedElementView({
     hooks,
     owners,
     props,
+    rendererPackageName,
+    rendererVersion,
+    rootType,
     source,
     state,
   } = inspectedElement;
 
-  const {ownerID} = useContext(TreeStateContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -374,6 +376,14 @@ function InspectedElementView({
     };
   }
 
+  const rendererLabel =
+    rendererPackageName !== null && rendererVersion !== null
+      ? `${rendererPackageName}@${rendererVersion}`
+      : null;
+  const showOwnersList = owners !== null && owners.length > 0;
+  const showRenderedBy =
+    showOwnersList || rendererLabel !== null || rootType !== null;
+
   return (
     <Fragment>
       <div className={styles.InspectedElement}>
@@ -415,19 +425,26 @@ function InspectedElementView({
 
         <NativeStyleEditor />
 
-        {ownerID === null && owners !== null && owners.length > 0 && (
+        {showRenderedBy && (
           <div className={styles.Owners}>
             <div className={styles.OwnersHeader}>rendered by</div>
-            {owners.map(owner => (
-              <OwnerView
-                key={owner.id}
-                displayName={owner.displayName || 'Anonymous'}
-                hocDisplayNames={owner.hocDisplayNames}
-                id={owner.id}
-                isInStore={store.containsElement(owner.id)}
-                type={owner.type}
-              />
-            ))}
+            {showOwnersList &&
+              ((owners: any): Array<Owner>).map(owner => (
+                <OwnerView
+                  key={owner.id}
+                  displayName={owner.displayName || 'Anonymous'}
+                  hocDisplayNames={owner.hocDisplayNames}
+                  id={owner.id}
+                  isInStore={store.containsElement(owner.id)}
+                  type={owner.type}
+                />
+              ))}
+            {rootType !== null && (
+              <div className={styles.OwnersMetaField}>{rootType}</div>
+            )}
+            {rendererLabel !== null && (
+              <div className={styles.OwnersMetaField}>{rendererLabel}</div>
+            )}
           </div>
         )}
 

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

@@ -88,6 +88,13 @@ export type InspectedElement = {|
   source: Source | null,
 
   type: ElementType,
+
+  // Meta information about the root this element belongs to.
+  rootType: string | null,
+
+  // Meta information about the renderer that created this element.
+  rendererPackageName: string | null,
+  rendererVersion: string | null,
 |};
 
 // TODO: Add profiling type