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).
Brian Vaughn committed
Dec 21, 2021 at 15:26 UTC
bcd24a6706cd802e49e9c0a509a42893ddceca7b
1 file changed
+5
-1
packages/react-devtools-shared/src/devtools/views/Components/Element.js
+5
-1
@@ -118,6 +118,10 @@ export default function Element({data, index, style}: Props) {
118
type,
119
} = ((element: any): ElementType);
120
121
+ // Only show strict mode non-compliance badges for top level elements.
122
+ // Showing an inline badge for every element in the tree would be noisy.
123
+ const showStrictModeBadge = isStrictModeNonCompliant && depth === 0;
124
+
125
let className = styles.Element;
126
if (isSelected) {
127
className = treeFocused
@@ -194,7 +198,7 @@ export default function Element({data, index, style}: Props) {
198
}
199
/>
200
)}
197
- {isStrictModeNonCompliant && (
201
+ {showStrictModeBadge && (
202
<Icon
203
className={
204
isSelected && treeFocused