From bcd24a6706cd802e49e9c0a509a42893ddceca7b Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 21 Dec 2021 15:26:42 -0500 Subject: [PATCH] DevTools: Only show StrictMode badge on root elements (#23012) * DevTools: Only show StrictMode badge on root elements Showing an inline non-compliance badge for every element in the tree is noisy. This commit changes it so that we only show inline icons for root elements (although we continue to show an icon for inspected elements regardless). --- .../src/devtools/views/Components/Element.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js index 206dabbab4..ed6f00055b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js @@ -118,6 +118,10 @@ export default function Element({data, index, style}: Props) { type, } = ((element: any): ElementType); + // Only show strict mode non-compliance badges for top level elements. + // Showing an inline badge for every element in the tree would be noisy. + const showStrictModeBadge = isStrictModeNonCompliant && depth === 0; + let className = styles.Element; if (isSelected) { className = treeFocused @@ -194,7 +198,7 @@ export default function Element({data, index, style}: Props) { } /> )} - {isStrictModeNonCompliant && ( + {showStrictModeBadge && (