From 69a92b15933da59273ff3f50fae14cfd7d4c69ae Mon Sep 17 00:00:00 2001
From: Ruslan Lesiutin <rdlesyutin@gmail.com>
Date: Tue, 13 Aug 2024 19:29:16 +0100
Subject: [PATCH] fix[react-devtools/InspectedElement]: fixed border stylings
 when some of the panels are not rendered

---
 .../Components/InspectedElementContextTree.js |   2 +-
 .../InspectedElementErrorsAndWarningsTree.js  |   2 +-
 .../Components/InspectedElementHooksTree.css  |   7 +-
 .../Components/InspectedElementHooksTree.js   |   4 +-
 .../Components/InspectedElementPropsTree.js   |   4 +-
 .../InspectedElementSharedStyles.css          |   7 --
 .../InspectedElementSourcePanel.css           |   5 -
 .../Components/InspectedElementSourcePanel.js |   2 +-
 .../Components/InspectedElementStateTree.js   |   2 +-
 .../InspectedElementStyleXPlugin.js           |   2 +-
 .../InspectedElementSuspenseToggle.js         |   2 +-
 .../views/Components/InspectedElementView.css |  12 +-
 .../views/Components/InspectedElementView.js  | 114 ++++++++++--------
 13 files changed, 80 insertions(+), 85 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
index 5e7276b1698..044a6d9b48d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
@@ -60,7 +60,7 @@ export default function InspectedElementContextTree({
     return null;
   } else {
     return (
-      <div className={styles.InspectedElementTree}>
+      <div>
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>
             {hasLegacyContext ? 'legacy context' : 'context'}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
index 4e192d027e8..48b81103cfe 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
@@ -136,7 +136,7 @@ function Tree({
     return null;
   }
   return (
-    <div className={`${sharedStyles.InspectedElementTree} ${className}`}>
+    <div className={className}>
       <div className={`${sharedStyles.HeaderRow} ${styles.HeaderRow}`}>
         <div className={sharedStyles.Header}>{label}</div>
         <Button
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
index 09cb48c06b9..066b29c66a4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
@@ -1,8 +1,3 @@
-.HooksTreeView {
-  padding: 0.25rem;
-  border-top: 1px solid var(--color-border);
-}
-
 .Hook {
 }
 
@@ -85,4 +80,4 @@
 
 .ToggleError {
   color: var(--color-error-text);
-}
\ No newline at end of file
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index 5fd1a0a1ee7..c7821991220 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -80,9 +80,7 @@ export function InspectedElementHooksTree({
     return null;
   } else {
     return (
-      <div
-        className={styles.HooksTreeView}
-        data-testname="InspectedElementHooksTree">
+      <div data-testname="InspectedElementHooksTree">
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>hooks</div>
           {typeof hookNamesModuleLoader === 'function' &&
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
index f0bc91afb3f..808824816d1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
@@ -63,9 +63,7 @@ export default function InspectedElementPropsTree({
   const handleCopy = () => copy(serializeDataForCopy(((props: any): Object)));
 
   return (
-    <div
-      className={styles.InspectedElementTree}
-      data-testname="InspectedElementPropsTree">
+    <div data-testname="InspectedElementPropsTree">
       <div className={styles.HeaderRow}>
         <div className={styles.Header}>props</div>
         {!isEmpty && (
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
index 1d8f6071544..e9916d467cf 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
@@ -1,10 +1,3 @@
-.InspectedElementTree {
-  padding: 0.25rem;
-}
-.InspectedElementTree:first-of-type {
-  border-top: none;
-}
-
 .HeaderRow {
   display: flex;
   align-items: center;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.css
index 0fab548c8c4..444e070c37e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.css
@@ -1,8 +1,3 @@
-.Source {
-  padding: 0.25rem;
-  border-top: 1px solid var(--color-border);
-}
-
 .SourceHeaderRow {
   display: flex;
   align-items: center;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js
index b051e94ee20..a5f0c7c8695 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js
@@ -28,7 +28,7 @@ function InspectedElementSourcePanel({
   symbolicatedSourcePromise,
 }: Props): React.Node {
   return (
-    <div className={styles.Source} data-testname="InspectedElementView-Source">
+    <div data-testname="InspectedElementView-Source">
       <div className={styles.SourceHeaderRow}>
         <div className={styles.SourceHeader}>source</div>
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
index 76e02856b22..b8fe8a89a30 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
@@ -53,7 +53,7 @@ export default function InspectedElementStateTree({
   const handleCopy = () => copy(serializeDataForCopy(((state: any): Object)));
 
   return (
-    <div className={styles.InspectedElementTree}>
+    <div>
       <div className={styles.HeaderRow}>
         <div className={styles.Header}>state</div>
         {!isEmpty && (
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
index e4f9c4c4d71..828b11a50c5 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
@@ -43,7 +43,7 @@ export default function InspectedElementStyleXPlugin({
   const {resolvedStyles, sources} = styleXPlugin;
 
   return (
-    <div className={sharedStyles.InspectedElementTree}>
+    <div>
       <div className={sharedStyles.HeaderRow}>
         <div className={sharedStyles.Header}>stylex</div>
       </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
index 4b60af34dfb..3b445505cbc 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
@@ -51,7 +51,7 @@ export default function InspectedElementSuspenseToggle({
   };
 
   return (
-    <div className={styles.InspectedElementTree}>
+    <div>
       <div className={styles.HeaderRow}>
         <div className={styles.Header}>suspense</div>
       </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css
index ac8e2729661..57dc15d8b3d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css
@@ -1,8 +1,3 @@
-.Owners {
-  padding: 0.25rem;
-  border-top: 1px solid var(--color-border);
-}
-
 .OwnersHeader {
   font-family: var(--font-family-sans);
 }
@@ -25,9 +20,12 @@
   line-height: var(--line-height-data);
 }
 
-.InspectedElementBadgesContainer:not(:empty) {
+.InspectedElementSection:not(:empty) {
   padding: 0.25rem;
-  border-bottom: 1px solid var(--color-border);
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid var(--color-border);
+  }
 }
 
 .Owner {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index f3427410b49..8eec4114929 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -71,71 +71,87 @@ export default function InspectedElementView({
   return (
     <Fragment>
       <div className={styles.InspectedElement}>
-        <div className={styles.InspectedElementBadgesContainer}>
+        <div className={styles.InspectedElementSection}>
           <InspectedElementBadges
             hocDisplayNames={element.hocDisplayNames}
             compiledWithForget={element.compiledWithForget}
           />
         </div>
 
-        <InspectedElementPropsTree
-          bridge={bridge}
-          element={element}
-          inspectedElement={inspectedElement}
-          store={store}
-        />
-
-        <InspectedElementSuspenseToggle
-          bridge={bridge}
-          inspectedElement={inspectedElement}
-          store={store}
-        />
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementPropsTree
+            bridge={bridge}
+            element={element}
+            inspectedElement={inspectedElement}
+            store={store}
+          />
+        </div>
 
-        <InspectedElementStateTree
-          bridge={bridge}
-          element={element}
-          inspectedElement={inspectedElement}
-          store={store}
-        />
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementSuspenseToggle
+            bridge={bridge}
+            inspectedElement={inspectedElement}
+            store={store}
+          />
+        </div>
 
-        <InspectedElementHooksTree
-          bridge={bridge}
-          element={element}
-          hookNames={hookNames}
-          inspectedElement={inspectedElement}
-          parseHookNames={parseHookNames}
-          store={store}
-          toggleParseHookNames={toggleParseHookNames}
-        />
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementStateTree
+            bridge={bridge}
+            element={element}
+            inspectedElement={inspectedElement}
+            store={store}
+          />
+        </div>
 
-        <InspectedElementContextTree
-          bridge={bridge}
-          element={element}
-          inspectedElement={inspectedElement}
-          store={store}
-        />
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementHooksTree
+            bridge={bridge}
+            element={element}
+            hookNames={hookNames}
+            inspectedElement={inspectedElement}
+            parseHookNames={parseHookNames}
+            store={store}
+            toggleParseHookNames={toggleParseHookNames}
+          />
+        </div>
 
-        {enableStyleXFeatures && (
-          <InspectedElementStyleXPlugin
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementContextTree
             bridge={bridge}
             element={element}
             inspectedElement={inspectedElement}
             store={store}
           />
+        </div>
+
+        {enableStyleXFeatures && (
+          <div className={styles.InspectedElementSection}>
+            <InspectedElementStyleXPlugin
+              bridge={bridge}
+              element={element}
+              inspectedElement={inspectedElement}
+              store={store}
+            />
+          </div>
         )}
 
-        <InspectedElementErrorsAndWarningsTree
-          bridge={bridge}
-          element={element}
-          inspectedElement={inspectedElement}
-          store={store}
-        />
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementErrorsAndWarningsTree
+            bridge={bridge}
+            element={element}
+            inspectedElement={inspectedElement}
+            store={store}
+          />
+        </div>
 
-        <NativeStyleEditor />
+        <div className={styles.InspectedElementSection}>
+          <NativeStyleEditor />
+        </div>
 
         {showRenderedBy && (
           <div
-            className={styles.Owners}
+            className={styles.InspectedElementSection}
             data-testname="InspectedElementView-Owners">
             <div className={styles.OwnersHeader}>rendered by</div>
 
@@ -162,10 +178,12 @@ export default function InspectedElementView({
         )}
 
         {source != null && (
-          <InspectedElementSourcePanel
-            source={source}
-            symbolicatedSourcePromise={symbolicatedSourcePromise}
-          />
+          <div className={styles.InspectedElementSection}>
+            <InspectedElementSourcePanel
+              source={source}
+              symbolicatedSourcePromise={symbolicatedSourcePromise}
+            />
+          </div>
         )}
       </div>
     </Fragment>