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

Author: hoxyq

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'}

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

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);
-}
+}

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' &&

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 && (

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;

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;

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>
 

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 && (

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>

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>

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 {

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js

@@ -28,6 +28,7 @@ import {logEvent} from 'react-devtools-shared/src/Logger';
 import InspectedElementSourcePanel from './InspectedElementSourcePanel';
 
 import styles from './InspectedElementView.css';
+import inspectedElementSharedStyles from './InspectedElementSharedStyles.css';
 
 import type {
   Element,
@@ -71,71 +72,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 +179,12 @@ export default function InspectedElementView({
         )}
 
         {source != null && (
-          <InspectedElementSourcePanel
-            source={source}
-            symbolicatedSourcePromise={symbolicatedSourcePromise}
-          />
+          <div className={styles.InspectedElementSection}>
+            <InspectedElementSourcePanel
+              source={source}
+              symbolicatedSourcePromise={symbolicatedSourcePromise}
+            />
+          </div>
         )}
       </div>
     </Fragment>