From 3c2ac729553d654b9c55fbd8529e99d7d3b53c68 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 21 Dec 2021 12:45:23 -0500
Subject: [PATCH 1/2] 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          | 11 ++++++++++-
 1 file changed, 10 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 206dabbab4d48..df0f416352276 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,15 @@ export default function Element({data, index, style}: Props) {
     type,
   } = ((element: any): ElementType);
 
+  let showStrictModeBadge = isStrictModeNonCompliant;
+  if (depth > 0) {
+    const parent =
+      element.parentID !== null ? store.getElementByID(element.parentID) : null;
+    if (parent !== null && parent.isStrictModeNonCompliant) {
+      showStrictModeBadge = false;
+    }
+  }
+
   let className = styles.Element;
   if (isSelected) {
     className = treeFocused
@@ -194,7 +203,7 @@ export default function Element({data, index, style}: Props) {
             }
           />
         )}
-        {isStrictModeNonCompliant && (
+        {showStrictModeBadge && (
           <Icon
             className={
               isSelected && treeFocused

From 97cdafa45a0915b6d76405ea1789b1ddb57b35d4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 21 Dec 2021 12:50:29 -0500
Subject: [PATCH 2/2] Simplified code and added inline comment

---
 .../src/devtools/views/Components/Element.js          | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

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 df0f416352276..ed6f00055bc17 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -118,14 +118,9 @@ export default function Element({data, index, style}: Props) {
     type,
   } = ((element: any): ElementType);
 
-  let showStrictModeBadge = isStrictModeNonCompliant;
-  if (depth > 0) {
-    const parent =
-      element.parentID !== null ? store.getElementByID(element.parentID) : null;
-    if (parent !== null && parent.isStrictModeNonCompliant) {
-      showStrictModeBadge = false;
-    }
-  }
+  // 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) {