fix[react-devtools/InspectedElement]: fixed border stylings when some of the panels are not rendered (#30676)
Alternative to https://github.com/facebook/react/pull/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.
Ruslan Lesiutin committed
Aug 14, 2024 at 13:35 UTC
fbfe08de6126f04777da805a493e819989151edf
13 files changed
+80
-85
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
+1
-1
@@ -60,7 +60,7 @@ export default function InspectedElementContextTree({
60
return null;
61
} else {
62
return (
63
- <div className={styles.InspectedElementTree}>
63
+ <div>
64
<div className={styles.HeaderRow}>
65
<div className={styles.Header}>
66
{hasLegacyContext ? 'legacy context' : 'context'}
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
+1
-1
@@ -136,7 +136,7 @@ function Tree({
136
return null;
137
}
138
return (
139
- <div className={`${sharedStyles.InspectedElementTree} ${className}`}>
139
+ <div className={className}>
140
<div className={`${sharedStyles.HeaderRow} ${styles.HeaderRow}`}>
141
<div className={sharedStyles.Header}>{label}</div>
142
<Button
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
+1
-6
@@ -1,8 +1,3 @@
1
-.HooksTreeView {
2
- padding: 0.25rem;
3
- border-top: 1px solid var(--color-border);
4
-}
5
-
1
.Hook {
2
}
3
@@ -85,4 +80,4 @@
80
81
.ToggleError {
82
color: var(--color-error-text);
88
-}
\ No newline at end of file
83
+}
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+1
-3
@@ -80,9 +80,7 @@ export function InspectedElementHooksTree({
80
return null;
81
} else {
82
return (
83
- <div
84
- className={styles.HooksTreeView}
85
- data-testname="InspectedElementHooksTree">
83
+ <div data-testname="InspectedElementHooksTree">
84
<div className={styles.HeaderRow}>
85
<div className={styles.Header}>hooks</div>
86
{typeof hookNamesModuleLoader === 'function' &&
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
+1
-3
@@ -63,9 +63,7 @@ export default function InspectedElementPropsTree({
63
const handleCopy = () => copy(serializeDataForCopy(((props: any): Object)));
64
65
return (
66
- <div
67
- className={styles.InspectedElementTree}
68
- data-testname="InspectedElementPropsTree">
66
+ <div data-testname="InspectedElementPropsTree">
67
<div className={styles.HeaderRow}>
68
<div className={styles.Header}>props</div>
69
{!isEmpty && (
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
-7
@@ -1,10 +1,3 @@
1
-.InspectedElementTree {
2
- padding: 0.25rem;
3
-}
4
-.InspectedElementTree:first-of-type {
5
- border-top: none;
6
-}
7
-
1
.HeaderRow {
2
display: flex;
3
align-items: center;
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.css
-5
@@ -1,8 +1,3 @@
1
-.Source {
2
- padding: 0.25rem;
3
- border-top: 1px solid var(--color-border);
4
-}
5
-
1
.SourceHeaderRow {
2
display: flex;
3
align-items: center;
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js
+1
-1
@@ -28,7 +28,7 @@ function InspectedElementSourcePanel({
28
symbolicatedSourcePromise,
29
}: Props): React.Node {
30
return (
31
- <div className={styles.Source} data-testname="InspectedElementView-Source">
31
+ <div data-testname="InspectedElementView-Source">
32
<div className={styles.SourceHeaderRow}>
33
<div className={styles.SourceHeader}>source</div>
34
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
+1
-1
@@ -53,7 +53,7 @@ export default function InspectedElementStateTree({
53
const handleCopy = () => copy(serializeDataForCopy(((state: any): Object)));
54
55
return (
56
- <div className={styles.InspectedElementTree}>
56
+ <div>
57
<div className={styles.HeaderRow}>
58
<div className={styles.Header}>state</div>
59
{!isEmpty && (
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
+1
-1
@@ -43,7 +43,7 @@ export default function InspectedElementStyleXPlugin({
43
const {resolvedStyles, sources} = styleXPlugin;
44
45
return (
46
- <div className={sharedStyles.InspectedElementTree}>
46
+ <div>
47
<div className={sharedStyles.HeaderRow}>
48
<div className={sharedStyles.Header}>stylex</div>
49
</div>
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
+1
-1
@@ -51,7 +51,7 @@ export default function InspectedElementSuspenseToggle({
51
};
52
53
return (
54
- <div className={styles.InspectedElementTree}>
54
+ <div>
55
<div className={styles.HeaderRow}>
56
<div className={styles.Header}>suspense</div>
57
</div>
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css
+5
-7
@@ -1,8 +1,3 @@
1
-.Owners {
2
- padding: 0.25rem;
3
- border-top: 1px solid var(--color-border);
4
-}
5
-
1
.OwnersHeader {
2
font-family: var(--font-family-sans);
3
}
@@ -25,9 +20,12 @@
20
line-height: var(--line-height-data);
21
}
22
28
-.InspectedElementBadgesContainer:not(:empty) {
23
+.InspectedElementSection:not(:empty) {
24
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
+ }
29
}
30
31
.Owner {
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+66
-48
@@ -71,71 +71,87 @@ export default function InspectedElementView({
71
return (
72
<Fragment>
73
<div className={styles.InspectedElement}>
74
- <div className={styles.InspectedElementBadgesContainer}>
74
+ <div className={styles.InspectedElementSection}>
75
<InspectedElementBadges
76
hocDisplayNames={element.hocDisplayNames}
77
compiledWithForget={element.compiledWithForget}
78
/>
79
</div>
80
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>
89
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>
97
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>
106
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>
118
118
- {enableStyleXFeatures && (
119
- <InspectedElementStyleXPlugin
119
+ <div className={styles.InspectedElementSection}>
120
+ <InspectedElementContextTree
121
bridge={bridge}
122
element={element}
123
inspectedElement={inspectedElement}
124
store={store}
125
/>
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>
137
)}
138
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>
147
134
- <NativeStyleEditor />
148
+ <div className={styles.InspectedElementSection}>
149
+ <NativeStyleEditor />
150
+ </div>
151
152
{showRenderedBy && (
153
<div
138
- className={styles.Owners}
154
+ className={styles.InspectedElementSection}
155
data-testname="InspectedElementView-Owners">
156
<div className={styles.OwnersHeader}>rendered by</div>
157
@@ -162,10 +178,12 @@ export default function InspectedElementView({
178
)}
179
180
{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>
187
)}
188
</div>
189
</Fragment>