refactor[devtools]: update css for settings and support css variables in shadow dom scnenario (#33487)
## Summary Minor changes around css and styling of Settings dialog. 1. `:root` selector was updated to `:is(:root, :host)` to make css variables available on Shadow Root 2. CSS tweaks around Settings dialog: removed references to deleted styles, removed unused styles, ironed out styling for cases when input styles are enhanced by user agent stylesheet <!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? --> ## How did you test this change? | Before | After | |--------|--------| |  |  | |  |  | |  |  | |  |  |
Ruslan Lesiutin committed
Jun 9, 2025 at 18:25 UTC
80c03eb7e0f05da5e0de6faebbe8dbb434455454
6 files changed
+88
-80
packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+24
-22
@@ -340,30 +340,35 @@ export default function ComponentsSettings({
340
);
341
342
return (
343
- <div className={styles.Settings}>
344
- <label className={styles.Setting}>
345
- <input
346
- type="checkbox"
347
- checked={!collapseNodesByDefault}
348
- onChange={updateCollapseNodesByDefault}
349
- />{' '}
350
- Expand component tree by default
351
- </label>
343
+ <div className={styles.SettingList}>
344
+ <div className={styles.SettingWrapper}>
345
+ <label className={styles.SettingRow}>
346
+ <input
347
+ type="checkbox"
348
+ checked={!collapseNodesByDefault}
349
+ onChange={updateCollapseNodesByDefault}
350
+ className={styles.SettingRowCheckbox}
351
+ />
352
+ Expand component tree by default
353
+ </label>
354
+ </div>
355
353
- <label className={styles.Setting}>
354
- <input
355
- type="checkbox"
356
- checked={parseHookNames}
357
- onChange={updateParseHookNames}
358
- />{' '}
359
- Always parse hook names from source{' '}
360
- <span className={styles.Warning}>(may be slow)</span>
361
- </label>
356
+ <div className={styles.SettingWrapper}>
357
+ <label className={styles.SettingRow}>
358
+ <input
359
+ type="checkbox"
360
+ checked={parseHookNames}
361
+ onChange={updateParseHookNames}
362
+ className={styles.SettingRowCheckbox}
363
+ />
364
+ Always parse hook names from source
365
+ <span className={styles.Warning}>(may be slow)</span>
366
+ </label>
367
+ </div>
368
369
<label className={styles.OpenInURLSetting}>
370
Open in Editor URL:{' '}
371
<select
366
- className={styles.Select}
372
value={openInEditorURLPreset}
373
onChange={({currentTarget}) => {
374
const selectedValue = currentTarget.value;
@@ -432,7 +437,6 @@ export default function ComponentsSettings({
437
</td>
438
<td className={styles.TableCell}>
439
<select
435
- className={styles.Select}
440
value={componentFilter.type}
441
onChange={({currentTarget}) =>
442
changeFilterType(
@@ -467,7 +471,6 @@ export default function ComponentsSettings({
471
<td className={styles.TableCell}>
472
{componentFilter.type === ComponentFilterElementType && (
473
<select
470
- className={styles.Select}
474
value={componentFilter.value}
475
onChange={({currentTarget}) =>
476
updateFilterValueElementType(
@@ -515,7 +518,6 @@ export default function ComponentsSettings({
518
)}
519
{componentFilter.type === ComponentFilterEnvironmentName && (
520
<select
518
- className={styles.Select}
521
value={componentFilter.value}
522
onChange={({currentTarget}) =>
523
updateFilterValueEnvironmentName(
packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
+20
-16
@@ -57,56 +57,60 @@ export default function DebuggingSettings({
57
]);
58
59
return (
60
- <div className={styles.Settings}>
61
- <div className={styles.Setting}>
62
- <label>
60
+ <div className={styles.SettingList}>
61
+ <div className={styles.SettingWrapper}>
62
+ <label className={styles.SettingRow}>
63
<input
64
type="checkbox"
65
checked={appendComponentStack}
66
onChange={({currentTarget}) =>
67
setAppendComponentStack(currentTarget.checked)
68
}
69
- />{' '}
70
- Append component stacks to console warnings and errors.
69
+ className={styles.SettingRowCheckbox}
70
+ />
71
+ Append component stacks to console warnings and errors
72
</label>
73
</div>
74
74
- <div className={styles.Setting}>
75
- <label>
75
+ <div className={styles.SettingWrapper}>
76
+ <label className={styles.SettingRow}>
77
<input
78
type="checkbox"
79
checked={showInlineWarningsAndErrors}
80
onChange={({currentTarget}) =>
81
setShowInlineWarningsAndErrors(currentTarget.checked)
82
}
82
- />{' '}
83
- Show inline warnings and errors.
83
+ className={styles.SettingRowCheckbox}
84
+ />
85
+ Show inline warnings and errors
86
</label>
87
</div>
88
87
- <div className={styles.Setting}>
88
- <label>
89
+ <div className={styles.SettingWrapper}>
90
+ <label className={styles.SettingRow}>
91
<input
92
type="checkbox"
93
checked={breakOnConsoleErrors}
94
onChange={({currentTarget}) =>
95
setBreakOnConsoleErrors(currentTarget.checked)
96
}
95
- />{' '}
97
+ className={styles.SettingRowCheckbox}
98
+ />
99
Break on warnings
100
</label>
101
</div>
102
100
- <div className={styles.Setting}>
101
- <label>
103
+ <div className={styles.SettingWrapper}>
104
+ <label className={styles.SettingRow}>
105
<input
106
type="checkbox"
107
checked={hideConsoleLogsInStrictMode}
108
onChange={({currentTarget}) =>
109
setHideConsoleLogsInStrictMode(currentTarget.checked)
110
}
108
- />{' '}
109
- Hide logs during additional invocations in{' '}
111
+ className={styles.SettingRowCheckbox}
112
+ />
113
+ Hide logs during additional invocations in
114
<a
115
className={styles.StrictModeLink}
116
target="_blank"
packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
+9
-10
@@ -46,17 +46,16 @@ export default function GeneralSettings(_: {}): React.Node {
46
backendVersion && backendVersion !== frontendVersion;
47
48
return (
49
- <div className={styles.Settings}>
49
+ <div className={styles.SettingList}>
50
{isInternalFacebookBuild && (
51
- <div className={styles.Setting}>
51
+ <div className={styles.SettingWrapper}>
52
This is an internal build of React DevTools for Meta
53
</div>
54
)}
55
56
- <div className={styles.Setting}>
56
+ <div className={styles.SettingWrapper}>
57
<div className={styles.RadioLabel}>Theme</div>
58
<select
59
- className={styles.Select}
59
value={theme}
60
onChange={({currentTarget}) => setTheme(currentTarget.value)}>
61
<option value="auto">Auto</option>
@@ -65,10 +64,9 @@ export default function GeneralSettings(_: {}): React.Node {
64
</select>
65
</div>
66
68
- <div className={styles.Setting}>
67
+ <div className={styles.SettingWrapper}>
68
<div className={styles.RadioLabel}>Display density</div>
69
<select
71
- className={styles.Select}
70
value={displayDensity}
71
onChange={({currentTarget}) =>
72
setDisplayDensity(currentTarget.value)
@@ -79,16 +77,17 @@ export default function GeneralSettings(_: {}): React.Node {
77
</div>
78
79
{supportsTraceUpdates && (
82
- <div className={styles.Setting}>
83
- <label>
80
+ <div className={styles.SettingWrapper}>
81
+ <label className={styles.SettingRow}>
82
<input
83
type="checkbox"
84
checked={traceUpdatesEnabled}
85
onChange={({currentTarget}) =>
86
setTraceUpdatesEnabled(currentTarget.checked)
87
}
90
- />{' '}
91
- Highlight updates when components render.
88
+ className={styles.SettingRowCheckbox}
89
+ />
90
+ Highlight updates when components render
91
</label>
92
</div>
93
)}
packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
+19
-17
@@ -69,35 +69,37 @@ export default function ProfilerSettings(_: {}): React.Node {
69
const minCommitDurationInputRef = useRef<HTMLInputElement | null>(null);
70
71
return (
72
- <div className={styles.Settings}>
73
- <div className={styles.Setting}>
74
- <label>
72
+ <div className={styles.SettingList}>
73
+ <div className={styles.SettingWrapper}>
74
+ <label className={styles.SettingRow}>
75
<input
76
type="checkbox"
77
checked={recordChangeDescriptions}
78
onChange={updateRecordChangeDescriptions}
79
- />{' '}
80
- Record why each component rendered while profiling.
79
+ className={styles.SettingRowCheckbox}
80
+ />
81
+ Record why each component rendered while profiling
82
</label>
83
</div>
84
84
- <div className={styles.Setting}>
85
- <label>
85
+ <div className={styles.SettingWrapper}>
86
+ <label className={styles.SettingRow}>
87
<input
88
checked={isCommitFilterEnabled}
89
onChange={updateIsCommitFilterEnabled}
90
type="checkbox"
90
- />{' '}
91
+ className={styles.SettingRowCheckbox}
92
+ />
93
Hide commits below
92
- </label>{' '}
93
- <input
94
- className={styles.Input}
95
- onChange={updateMinCommitDuration}
96
- ref={minCommitDurationInputRef}
97
- type="number"
98
- value={minCommitDuration}
99
- />{' '}
100
- (ms)
94
+ <input
95
+ className={styles.Input}
96
+ onChange={updateMinCommitDuration}
97
+ ref={minCommitDurationInputRef}
98
+ type="number"
99
+ value={minCommitDuration}
100
+ />
101
+ (ms)
102
+ </label>
103
</div>
104
</div>
105
);
packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
+15
-14
@@ -1,4 +1,4 @@
1
-.Settings {
1
+.SettingList {
2
display: flex;
3
flex-direction: column;
4
align-items: flex-start;
@@ -7,13 +7,25 @@
7
font-size: var(--font-size-sans-normal);
8
}
9
10
-.Setting {
10
+.SettingWrapper {
11
margin-bottom: 0.5rem;
12
}
13
-.Setting:last-of-type {
13
+.SettingWrapper:last-of-type {
14
margin-bottom: 0;
15
}
16
17
+.SettingRow {
18
+ display: inline-flex;
19
+ flex-direction: row;
20
+ align-items: center;
21
+ overflow: hidden;
22
+ text-overflow: ellipsis;
23
+}
24
+
25
+.SettingRowCheckbox {
26
+ margin: 0.125rem 0.25rem 0.125rem 0;
27
+}
28
+
29
.OpenInURLSetting {
30
margin: 0.5rem 0;
31
}
@@ -154,14 +166,3 @@
166
padding: 0;
167
margin: 0;
168
}
157
-
158
-.Setting .Setting {
159
- margin-left: 1rem;
160
- margin-top: 0.5rem;
161
- margin-bottom: 0.5rem;
162
-}
163
-
164
-.Setting label:has(input:disabled) {
165
- opacity: 0.5;
166
- cursor: default;
167
-}
packages/react-devtools-shared/src/devtools/views/root.css
+1
-1
@@ -1,4 +1,4 @@
1
-:root {
1
+:is(:root, :host) {
2
/* Font smoothing */
3
--font-smoothing: auto;
4