Skip to content

Commit 69a92b1

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

13 files changed

+80
-85
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-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
.HooksTreeView {
2-
padding: 0.25rem;
3-
border-top: 1px solid var(--color-border);
4-
}
5-
61
.Hook {
72
}
83

@@ -85,4 +80,4 @@
8580

8681
.ToggleError {
8782
color: var(--color-error-text);
88-
}
83+
}

‎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

+66-48
Original file line numberDiff line numberDiff line change
@@ -71,71 +71,87 @@ export default function InspectedElementView({
7171
return (
7272
<Fragment>
7373
<div className={styles.InspectedElement}>
74-
<div className={styles.InspectedElementBadgesContainer}>
74+
<div className={styles.InspectedElementSection}>
7575
<InspectedElementBadges
7676
hocDisplayNames={element.hocDisplayNames}
7777
compiledWithForget={element.compiledWithForget}
7878
/>
7979
</div>
8080

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-
/>
81+
<div className={styles.InspectedElementSection}>
82+
<InspectedElementPropsTree
83+
bridge={bridge}
84+
element={element}
85+
inspectedElement={inspectedElement}
86+
store={store}
87+
/>
88+
</div>
9389

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

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

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

118-
{enableStyleXFeatures && (
119-
<InspectedElementStyleXPlugin
119+
<div className={styles.InspectedElementSection}>
120+
<InspectedElementContextTree
120121
bridge={bridge}
121122
element={element}
122123
inspectedElement={inspectedElement}
123124
store={store}
124125
/>
126+
</div>
127+
128+
{enableStyleXFeatures && (
129+
<div className={styles.InspectedElementSection}>
130+
<InspectedElementStyleXPlugin
131+
bridge={bridge}
132+
element={element}
133+
inspectedElement={inspectedElement}
134+
store={store}
135+
/>
136+
</div>
125137
)}
126138

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

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

136152
{showRenderedBy && (
137153
<div
138-
className={styles.Owners}
154+
className={styles.InspectedElementSection}
139155
data-testname="InspectedElementView-Owners">
140156
<div className={styles.OwnersHeader}>rendered by</div>
141157

@@ -162,10 +178,12 @@ export default function InspectedElementView({
162178
)}
163179

164180
{source != null && (
165-
<InspectedElementSourcePanel
166-
source={source}
167-
symbolicatedSourcePromise={symbolicatedSourcePromise}
168-
/>
181+
<div className={styles.InspectedElementSection}>
182+
<InspectedElementSourcePanel
183+
source={source}
184+
symbolicatedSourcePromise={symbolicatedSourcePromise}
185+
/>
186+
</div>
169187
)}
170188
</div>
171189
</Fragment>

0 commit comments

Comments
 (0)