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>