{"body":"* DevTools: Add root and renderer version to inspected props panel\r\n* Removed redundant .length check","parents":["74394aa8cbb7a1c18c34018b099a9b5ab10ef11c"],"patch":"diff --git a\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js\nindex bf8f809c85..d68ee86c62 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js\n@@ -802,6 +802,10 @@ export function attach(\n \n \/\/ Location of component in source coude.\n source,\n+\n+ rootType: null,\n+ rendererPackageName: null,\n+ rendererVersion: null,\n };\n }\n \ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/renderer.js\nindex ec3cf61b65..d39ec771ca 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/renderer.js\n@@ -2278,6 +2278,16 @@ export function attach(\n }\n }\n \n+ let rootType = null;\n+ let current = fiber;\n+ while (current.return !== null) {\n+ current = current.return;\n+ }\n+ const fiberRoot = current.stateNode;\n+ if (fiberRoot != null && fiberRoot._debugRootType !== null) {\n+ rootType = fiberRoot._debugRootType;\n+ }\n+\n return {\n id,\n \n@@ -2318,6 +2328,10 @@ export function attach(\n \n \/\/ Location of component in source coude.\n source: _debugSource || null,\n+\n+ rootType,\n+ rendererPackageName: renderer.rendererPackageName,\n+ rendererVersion: renderer.version,\n };\n }\n \ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/types.js b\/packages\/react-devtools-shared\/src\/backend\/types.js\nindex 4b5091e3bf..024a4876b5 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/types.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/types.js\n@@ -87,6 +87,7 @@ export type ReactProviderType = {\n export type ReactRenderer = {\n findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber,\n version: string,\n+ rendererPackageName: string,\n bundleType: BundleType,\n \/\/ 16.9+\n overrideHookState?: ?(\n@@ -207,10 +208,17 @@ export type InspectedElement = {|\n \/\/ List of owners\n owners: Array | null,\n \n- \/\/ Location of component in source coude.\n+ \/\/ Location of component in source code.\n source: Source | null,\n \n type: ElementType,\n+\n+ \/\/ Meta information about the root this element belongs to.\n+ rootType: string | null,\n+\n+ \/\/ Meta information about the renderer that created this element.\n+ rendererPackageName: string | null,\n+ rendererVersion: string | null,\n |};\n \n export const InspectElementFullDataType = 'full-data';\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Badge.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Badge.js\nindex a2c37b801e..aad4848426 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Badge.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Badge.js\n@@ -26,12 +26,12 @@ export default function Badge({\n type,\n children,\n }: Props) {\n- let totalBadgeCount = 0;\n-\n- if (hocDisplayNames !== null) {\n- totalBadgeCount += hocDisplayNames.length;\n+ if (hocDisplayNames === null) {\n+ return null;\n }\n \n+ const totalBadgeCount = hocDisplayNames.length;\n+\n return (\n \n

{children}<\/div>\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementContext.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementContext.js\nindex c88cc35438..4354bc5399 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementContext.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementContext.js\n@@ -208,6 +208,9 @@ function InspectedElementContextController({children}: Props) {\n context,\n hooks,\n props,\n+ rendererPackageName,\n+ rendererVersion,\n+ rootType,\n state,\n key,\n } = ((data.value: any): InspectedElementBackend);\n@@ -220,6 +223,9 @@ function InspectedElementContextController({children}: Props) {\n hasLegacyContext,\n id,\n key,\n+ rendererPackageName,\n+ rendererVersion,\n+ rootType,\n source,\n type,\n owners:\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/SelectedElement.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/SelectedElement.css\nindex 377a428e96..32a6c344cc 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/SelectedElement.css\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/SelectedElement.css\n@@ -153,3 +153,10 @@\n .ContextMenuIcon {\n margin-right: 0.5rem;\n }\n+\n+.OwnersMetaField {\n+ padding-left: 1.25rem;\n+ white-space: nowrap;\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+}\n\\ No newline at end of file\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/SelectedElement.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/SelectedElement.js\nindex 40f45334e6..e3cc5d6375 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/SelectedElement.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/SelectedElement.js\n@@ -45,7 +45,7 @@ import type {\n InspectedElementContextType,\n StoreAsGlobal,\n } from '.\/InspectedElementContext';\n-import type {Element, InspectedElement} from '.\/types';\n+import type {Element, InspectedElement, Owner} from '.\/types';\n import type {ElementType} from 'react-devtools-shared\/src\/types';\n \n export type Props = {||};\n@@ -291,11 +291,13 @@ function InspectedElementView({\n hooks,\n owners,\n props,\n+ rendererPackageName,\n+ rendererVersion,\n+ rootType,\n source,\n state,\n } = inspectedElement;\n \n- const {ownerID} = useContext(TreeStateContext);\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n \n@@ -374,6 +376,14 @@ function InspectedElementView({\n };\n }\n \n+ const rendererLabel =\n+ rendererPackageName !== null && rendererVersion !== null\n+ ? `${rendererPackageName}@${rendererVersion}`\n+ : null;\n+ const showOwnersList = owners !== null && owners.length > 0;\n+ const showRenderedBy =\n+ showOwnersList || rendererLabel !== null || rootType !== null;\n+\n return (\n \n

\n@@ -415,19 +425,26 @@ function InspectedElementView({\n \n \n \n- {ownerID === null && owners !== null && owners.length > 0 && (\n+ {showRenderedBy && (\n

rendered by<\/div>\n- {owners.map(owner => (\n- \n- ))}\n+ {showOwnersList &&\n+ ((owners: any): Array).map(owner => (\n+ \n+ ))}\n+ {rootType !== null && (\n+

{rootType}<\/div>\n+ )}\n+ {rendererLabel !== null && (\n+

{rendererLabel}<\/div>\n+ )}\n <\/div>\n )}\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/types.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/types.js\nindex cb50af783e..dc3a3f6a54 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/types.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/types.js\n@@ -88,6 +88,13 @@ export type InspectedElement = {|\n source: Source | null,\n \n type: ElementType,\n+\n+ \/\/ Meta information about the root this element belongs to.\n+ rootType: string | null,\n+\n+ \/\/ Meta information about the renderer that created this element.\n+ rendererPackageName: string | null,\n+ rendererVersion: string | null,\n |};\n \n \/\/ TODO: Add profiling type\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js b\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js\nindex 96f795cbdf..4585fd05ce 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js\n@@ -24,6 +24,7 @@ import {\n } from 'shared\/ReactFeatureFlags';\n import {unstable_getThreadID} from 'scheduler\/tracing';\n import {initializeUpdateQueue} from '.\/ReactUpdateQueue.new';\n+import {LegacyRoot, BlockingRoot, ConcurrentRoot} from '.\/ReactRootTags';\n \n function FiberRootNode(containerInfo, tag, hydrate) {\n this.tag = tag;\n@@ -60,6 +61,20 @@ function FiberRootNode(containerInfo, tag, hydrate) {\n if (enableSuspenseCallback) {\n this.hydrationCallbacks = null;\n }\n+\n+ if (__DEV__) {\n+ switch (tag) {\n+ case BlockingRoot:\n+ this._debugRootType = 'createBlockingRoot()';\n+ break;\n+ case ConcurrentRoot:\n+ this._debugRootType = 'createRoot()';\n+ break;\n+ case LegacyRoot:\n+ this._debugRootType = 'createLegacyRoot()';\n+ break;\n+ }\n+ }\n }\n \n export function createFiberRoot(\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js b\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js\nindex 72d03a5969..03e33b13fb 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js\n@@ -22,6 +22,7 @@ import {unstable_getThreadID} from 'scheduler\/tracing';\n import {NoPriority} from '.\/SchedulerWithReactIntegration.old';\n import {initializeUpdateQueue} from '.\/ReactUpdateQueue.old';\n import {clearPendingUpdates as clearPendingMutableSourceUpdates} from '.\/ReactMutableSource.old';\n+import {LegacyRoot, BlockingRoot, ConcurrentRoot} from '.\/ReactRootTags';\n \n function FiberRootNode(containerInfo, tag, hydrate) {\n this.tag = tag;\n@@ -54,6 +55,20 @@ function FiberRootNode(containerInfo, tag, hydrate) {\n if (enableSuspenseCallback) {\n this.hydrationCallbacks = null;\n }\n+\n+ if (__DEV__) {\n+ switch (tag) {\n+ case BlockingRoot:\n+ this._debugRootType = 'createBlockingRoot()';\n+ break;\n+ case ConcurrentRoot:\n+ this._debugRootType = 'createRoot()';\n+ break;\n+ case LegacyRoot:\n+ this._debugRootType = 'createLegacyRoot()';\n+ break;\n+ }\n+ }\n }\n \n export function createFiberRoot(\n","commit":{"authoredAt":"2020-05-21T14:40:49-07:00","authorEmail":"bvaughn@fb.com","authorName":"Brian Vaughn","revision":"aefb97e6bb2874e48a08cb87366bc4ca3aa99a7d","shortRevision":"aefb97e6bb","subject":"DevTools: Add root and renderer version to inspected props panel (#18963)"},"files":[{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/renderer.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/types.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Badge.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementContext.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/SelectedElement.css"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/SelectedElement.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/types.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberRoot.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberRoot.old.js"}]}

dillon1000/react

Files changed