Skip to content

Commit 7dfa076

Browse files
hoxyqhoxyq
committed
fix[react-devtools/InspectedElement]: fixed border stylings when some of the panels are not rendered
1 parent d48603a commit 7dfa076

13 files changed

+81
-88
lines changed

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default function InspectedElementContextTree({
6060
return null;
6161
} else {
6262
return (
63-
<div className={styles.InspectedElementTree}>
63+
<div>
6464
<div className={styles.HeaderRow}>
6565
<div className={styles.Header}>
6666
{hasLegacyContext ? 'legacy context' : 'context'}

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ function Tree({
136136
return null;
137137
}
138138
return (
139-
<div className={`${sharedStyles.InspectedElementTree} ${className}`}>
139+
<div className={className}>
140140
<div className={`${sharedStyles.HeaderRow} ${styles.HeaderRow}`}>
141141
<div className={sharedStyles.Header}>{label}</div>
142142
<Button

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css

+1-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
.HooksTreeView {
2-
padding: 0.25rem;
3-
border-top: 1px solid var(--color-border);
4-
}
5-
6-
.Hook {
7-
}
8-
91
.Children {
102
padding-left: 1rem;
113
}
@@ -85,4 +77,4 @@
8577

8678
.ToggleError {
8779
color: var(--color-error-text);
88-
}
80+
}

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,7 @@ export function InspectedElementHooksTree({
8080
return null;
8181
} else {
8282
return (
83-
<div
84-
className={styles.HooksTreeView}
85-
data-testname="InspectedElementHooksTree">
83+
<div data-testname="InspectedElementHooksTree">
8684
<div className={styles.HeaderRow}>
8785
<div className={styles.Header}>hooks</div>
8886
{typeof hookNamesModuleLoader === 'function' &&

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,7 @@ export default function InspectedElementPropsTree({
6363
const handleCopy = () => copy(serializeDataForCopy(((props: any): Object)));
6464

6565
return (
66-
<div
67-
className={styles.InspectedElementTree}
68-
data-testname="InspectedElementPropsTree">
66+
<div data-testname="InspectedElementPropsTree">
6967
<div className={styles.HeaderRow}>
7068
<div className={styles.Header}>props</div>
7169
{!isEmpty && (

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css

-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
.InspectedElementTree {
2-
padding: 0.25rem;
3-
}
4-
.InspectedElementTree:first-of-type {
5-
border-top: none;
6-
}
7-
81
.HeaderRow {
92
display: flex;
103
align-items: center;

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.css

-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
.Source {
2-
padding: 0.25rem;
3-
border-top: 1px solid var(--color-border);
4-
}
5-
61
.SourceHeaderRow {
72
display: flex;
83
align-items: center;

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function InspectedElementSourcePanel({
2828
symbolicatedSourcePromise,
2929
}: Props): React.Node {
3030
return (
31-
<div className={styles.Source} data-testname="InspectedElementView-Source">
31+
<div data-testname="InspectedElementView-Source">
3232
<div className={styles.SourceHeaderRow}>
3333
<div className={styles.SourceHeader}>source</div>
3434

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default function InspectedElementStateTree({
5353
const handleCopy = () => copy(serializeDataForCopy(((state: any): Object)));
5454

5555
return (
56-
<div className={styles.InspectedElementTree}>
56+
<div>
5757
<div className={styles.HeaderRow}>
5858
<div className={styles.Header}>state</div>
5959
{!isEmpty && (

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default function InspectedElementStyleXPlugin({
4343
const {resolvedStyles, sources} = styleXPlugin;
4444

4545
return (
46-
<div className={sharedStyles.InspectedElementTree}>
46+
<div>
4747
<div className={sharedStyles.HeaderRow}>
4848
<div className={sharedStyles.Header}>stylex</div>
4949
</div>

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default function InspectedElementSuspenseToggle({
5151
};
5252

5353
return (
54-
<div className={styles.InspectedElementTree}>
54+
<div>
5555
<div className={styles.HeaderRow}>
5656
<div className={styles.Header}>suspense</div>
5757
</div>

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css

+5-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
.Owners {
2-
padding: 0.25rem;
3-
border-top: 1px solid var(--color-border);
4-
}
5-
61
.OwnersHeader {
72
font-family: var(--font-family-sans);
83
}
@@ -25,9 +20,12 @@
2520
line-height: var(--line-height-data);
2621
}
2722

28-
.InspectedElementBadgesContainer:not(:empty) {
23+
.InspectedElementSection:not(:empty) {
2924
padding: 0.25rem;
30-
border-bottom: 1px solid var(--color-border);
25+
26+
&:not(:last-of-type) {
27+
border-bottom: 1px solid var(--color-border);
28+
}
3129
}
3230

3331
.Owner {

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

+67-48
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import {logEvent} from 'react-devtools-shared/src/Logger';
2828
import InspectedElementSourcePanel from './InspectedElementSourcePanel';
2929

3030
import styles from './InspectedElementView.css';
31+
import inspectedElementSharedStyles from './InspectedElementSharedStyles.css';
3132

3233
import type {
3334
Element,
@@ -71,71 +72,87 @@ export default function InspectedElementView({
7172
return (
7273
<Fragment>
7374
<div className={styles.InspectedElement}>
74-
<div className={styles.InspectedElementBadgesContainer}>
75+
<div className={styles.InspectedElementSection}>
7576
<InspectedElementBadges
7677
hocDisplayNames={element.hocDisplayNames}
7778
compiledWithForget={element.compiledWithForget}
7879
/>
7980
</div>
8081

81-
<InspectedElementPropsTree
82-
bridge={bridge}
83-
element={element}
84-
inspectedElement={inspectedElement}
85-
store={store}
86-
/>
87-
88-
<InspectedElementSuspenseToggle
89-
bridge={bridge}
90-
inspectedElement={inspectedElement}
91-
store={store}
92-
/>
82+
<div className={styles.InspectedElementSection}>
83+
<InspectedElementPropsTree
84+
bridge={bridge}
85+
element={element}
86+
inspectedElement={inspectedElement}
87+
store={store}
88+
/>
89+
</div>
9390

94-
<InspectedElementStateTree
95-
bridge={bridge}
96-
element={element}
97-
inspectedElement={inspectedElement}
98-
store={store}
99-
/>
91+
<div className={styles.InspectedElementSection}>
92+
<InspectedElementSuspenseToggle
93+
bridge={bridge}
94+
inspectedElement={inspectedElement}
95+
store={store}
96+
/>
97+
</div>
10098

101-
<InspectedElementHooksTree
102-
bridge={bridge}
103-
element={element}
104-
hookNames={hookNames}
105-
inspectedElement={inspectedElement}
106-
parseHookNames={parseHookNames}
107-
store={store}
108-
toggleParseHookNames={toggleParseHookNames}
109-
/>
99+
<div className={styles.InspectedElementSection}>
100+
<InspectedElementStateTree
101+
bridge={bridge}
102+
element={element}
103+
inspectedElement={inspectedElement}
104+
store={store}
105+
/>
106+
</div>
110107

111-
<InspectedElementContextTree
112-
bridge={bridge}
113-
element={element}
114-
inspectedElement={inspectedElement}
115-
store={store}
116-
/>
108+
<div className={styles.InspectedElementSection}>
109+
<InspectedElementHooksTree
110+
bridge={bridge}
111+
element={element}
112+
hookNames={hookNames}
113+
inspectedElement={inspectedElement}
114+
parseHookNames={parseHookNames}
115+
store={store}
116+
toggleParseHookNames={toggleParseHookNames}
117+
/>
118+
</div>
117119

118-
{enableStyleXFeatures && (
119-
<InspectedElementStyleXPlugin
120+
<div className={styles.InspectedElementSection}>
121+
<InspectedElementContextTree
120122
bridge={bridge}
121123
element={element}
122124
inspectedElement={inspectedElement}
123125
store={store}
124126
/>
127+
</div>
128+
129+
{enableStyleXFeatures && (
130+
<div className={styles.InspectedElementSection}>
131+
<InspectedElementStyleXPlugin
132+
bridge={bridge}
133+
element={element}
134+
inspectedElement={inspectedElement}
135+
store={store}
136+
/>
137+
</div>
125138
)}
126139

127-
<InspectedElementErrorsAndWarningsTree
128-
bridge={bridge}
129-
element={element}
130-
inspectedElement={inspectedElement}
131-
store={store}
132-
/>
140+
<div className={styles.InspectedElementSection}>
141+
<InspectedElementErrorsAndWarningsTree
142+
bridge={bridge}
143+
element={element}
144+
inspectedElement={inspectedElement}
145+
store={store}
146+
/>
147+
</div>
133148

134-
<NativeStyleEditor />
149+
<div className={styles.InspectedElementSection}>
150+
<NativeStyleEditor />
151+
</div>
135152

136153
{showRenderedBy && (
137154
<div
138-
className={styles.Owners}
155+
className={styles.InspectedElementSection}
139156
data-testname="InspectedElementView-Owners">
140157
<div className={styles.OwnersHeader}>rendered by</div>
141158

@@ -162,10 +179,12 @@ export default function InspectedElementView({
162179
)}
163180

164181
{source != null && (
165-
<InspectedElementSourcePanel
166-
source={source}
167-
symbolicatedSourcePromise={symbolicatedSourcePromise}
168-
/>
182+
<div className={styles.InspectedElementSection}>
183+
<InspectedElementSourcePanel
184+
source={source}
185+
symbolicatedSourcePromise={symbolicatedSourcePromise}
186+
/>
187+
</div>
169188
)}
170189
</div>
171190
</Fragment>

0 commit comments

Comments
 (0)