fix[react-devtools/InspectedElement]: fixed border stylings when some of the panels are not rendered (#30676)

hoxyq · web-flow · commit fbfe08de6126 · 2024-08-14T13:35:06.000+01:00
Alternative to #30667. Basically wrap every section in a `div` with the same class, and only apply `border-bottom` for every instance, except for the last child. We are paying some cost by having more divs, but thats more explicit.
diff --git 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
@@ -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
@@ -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);
-}
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>

Original file line number	Diff line number	Diff line change
`@@ -136,7 +136,7 @@ function Tree({`
`136`	`136`	`return null;`
`137`	`137`	`}`
`138`	`138`	`return (`
`139`		- <div className={`${sharedStyles.InspectedElementTree} ${className}`}>
	`139`	`+ <div className={className}>`
`140`	`140`	<div className={`${sharedStyles.HeaderRow} ${styles.HeaderRow}`}>
`141`	`141`	`<div className={sharedStyles.Header}>{label}</div>`
`142`	`142`	`<Button`