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/backend/legacy/renderer.js

@@ -802,6 +802,10 @@ export function attach(
 
       // Location of component in source coude.
       source,
+
+      rootType: null,
+      rendererPackageName: null,
+      rendererVersion: null,
     };
   }
 

packages/react-devtools-shared/src/backend/renderer.js

@@ -2278,6 +2278,16 @@ export function attach(
       }
     }
 
+    let rootType = null;
+    let current = fiber;
+    while (current.return !== null) {
+      current = current.return;
+    }
+    const fiberRoot = current.stateNode;
+    if (fiberRoot != null && fiberRoot._debugRootType !== null) {
+      rootType = fiberRoot._debugRootType;
+    }
+
     return {
       id,
 
@@ -2318,6 +2328,10 @@ export function attach(
 
       // Location of component in source coude.
       source: _debugSource || null,
+
+      rootType,
+      rendererPackageName: renderer.rendererPackageName,
+      rendererVersion: renderer.version,
     };
   }
 

packages/react-devtools-shared/src/backend/types.js

@@ -87,6 +87,7 @@ export type ReactProviderType<T> = {
 export type ReactRenderer = {
   findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber,
   version: string,
+  rendererPackageName: string,
   bundleType: BundleType,
   // 16.9+
   overrideHookState?: ?(
@@ -207,10 +208,17 @@ export type InspectedElement = {|
   // List of owners
   owners: Array<Owner> | null,
 
-  // Location of component in source coude.
+  // Location of component in source code.
   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,
 |};
 
 export const InspectElementFullDataType = 'full-data';