Skip to content

Commit 80c03eb

Browse files
hoxyqhoxyq
authored
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 | |--------|--------| | ![Screenshot 2025-06-09 at 15 35 55](https://github.com/user-attachments/assets/1ac5d002-744b-4b10-9501-d4f2a7c827d2) | ![Screenshot 2025-06-09 at 15 26 12](https://github.com/user-attachments/assets/8cc07cda-99a5-4930-973b-b139b193e349) | | ![Screenshot 2025-06-09 at 15 36 02](https://github.com/user-attachments/assets/1af4257c-928d-4ec6-a614-801cc1936f4b) | ![Screenshot 2025-06-09 at 15 26 25](https://github.com/user-attachments/assets/7a3a0f7c-5f3d-4567-a782-dd37368a15ae) | | ![Screenshot 2025-06-09 at 15 36 05](https://github.com/user-attachments/assets/a1e00381-2901-4e22-b1c6-4a3f66ba78c9) | ![Screenshot 2025-06-09 at 15 26 30](https://github.com/user-attachments/assets/bdefce68-cbb5-4b88-b44c-a74f28533f7d) | | ![Screenshot 2025-06-09 at 15 36 12](https://github.com/user-attachments/assets/4eda6234-0ef0-40ca-ad9d-5990a2b1e8b4) | ![Screenshot 2025-06-09 at 15 26 37](https://github.com/user-attachments/assets/5cac305e-fd29-460c-b0b8-30e477b8c26e) |
1 parent b6c0aa8 commit 80c03eb

File tree

6 files changed

+88
-80
lines changed

6 files changed

+88
-80
lines changed

‎packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -340,30 +340,35 @@ export default function ComponentsSettings({
340340
);
341341

342342
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>
352355

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&nbsp;
365+
<span className={styles.Warning}>(may be slow)</span>
366+
</label>
367+
</div>
362368

363369
<label className={styles.OpenInURLSetting}>
364370
Open in Editor URL:{' '}
365371
<select
366-
className={styles.Select}
367372
value={openInEditorURLPreset}
368373
onChange={({currentTarget}) => {
369374
const selectedValue = currentTarget.value;
@@ -432,7 +437,6 @@ export default function ComponentsSettings({
432437
</td>
433438
<td className={styles.TableCell}>
434439
<select
435-
className={styles.Select}
436440
value={componentFilter.type}
437441
onChange={({currentTarget}) =>
438442
changeFilterType(
@@ -467,7 +471,6 @@ export default function ComponentsSettings({
467471
<td className={styles.TableCell}>
468472
{componentFilter.type === ComponentFilterElementType && (
469473
<select
470-
className={styles.Select}
471474
value={componentFilter.value}
472475
onChange={({currentTarget}) =>
473476
updateFilterValueElementType(
@@ -515,7 +518,6 @@ export default function ComponentsSettings({
515518
)}
516519
{componentFilter.type === ComponentFilterEnvironmentName && (
517520
<select
518-
className={styles.Select}
519521
value={componentFilter.value}
520522
onChange={({currentTarget}) =>
521523
updateFilterValueEnvironmentName(

‎packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -57,56 +57,60 @@ export default function DebuggingSettings({
5757
]);
5858

5959
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}>
6363
<input
6464
type="checkbox"
6565
checked={appendComponentStack}
6666
onChange={({currentTarget}) =>
6767
setAppendComponentStack(currentTarget.checked)
6868
}
69-
/>{' '}
70-
Append component stacks to console warnings and errors.
69+
className={styles.SettingRowCheckbox}
70+
/>
71+
Append component stacks to console warnings and errors
7172
</label>
7273
</div>
7374

74-
<div className={styles.Setting}>
75-
<label>
75+
<div className={styles.SettingWrapper}>
76+
<label className={styles.SettingRow}>
7677
<input
7778
type="checkbox"
7879
checked={showInlineWarningsAndErrors}
7980
onChange={({currentTarget}) =>
8081
setShowInlineWarningsAndErrors(currentTarget.checked)
8182
}
82-
/>{' '}
83-
Show inline warnings and errors.
83+
className={styles.SettingRowCheckbox}
84+
/>
85+
Show inline warnings and errors
8486
</label>
8587
</div>
8688

87-
<div className={styles.Setting}>
88-
<label>
89+
<div className={styles.SettingWrapper}>
90+
<label className={styles.SettingRow}>
8991
<input
9092
type="checkbox"
9193
checked={breakOnConsoleErrors}
9294
onChange={({currentTarget}) =>
9395
setBreakOnConsoleErrors(currentTarget.checked)
9496
}
95-
/>{' '}
97+
className={styles.SettingRowCheckbox}
98+
/>
9699
Break on warnings
97100
</label>
98101
</div>
99102

100-
<div className={styles.Setting}>
101-
<label>
103+
<div className={styles.SettingWrapper}>
104+
<label className={styles.SettingRow}>
102105
<input
103106
type="checkbox"
104107
checked={hideConsoleLogsInStrictMode}
105108
onChange={({currentTarget}) =>
106109
setHideConsoleLogsInStrictMode(currentTarget.checked)
107110
}
108-
/>{' '}
109-
Hide logs during additional invocations in{' '}
111+
className={styles.SettingRowCheckbox}
112+
/>
113+
Hide logs during additional invocations in&nbsp;
110114
<a
111115
className={styles.StrictModeLink}
112116
target="_blank"

‎packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -46,17 +46,16 @@ export default function GeneralSettings(_: {}): React.Node {
4646
backendVersion && backendVersion !== frontendVersion;
4747

4848
return (
49-
<div className={styles.Settings}>
49+
<div className={styles.SettingList}>
5050
{isInternalFacebookBuild && (
51-
<div className={styles.Setting}>
51+
<div className={styles.SettingWrapper}>
5252
This is an internal build of React DevTools for Meta
5353
</div>
5454
)}
5555

56-
<div className={styles.Setting}>
56+
<div className={styles.SettingWrapper}>
5757
<div className={styles.RadioLabel}>Theme</div>
5858
<select
59-
className={styles.Select}
6059
value={theme}
6160
onChange={({currentTarget}) => setTheme(currentTarget.value)}>
6261
<option value="auto">Auto</option>
@@ -65,10 +64,9 @@ export default function GeneralSettings(_: {}): React.Node {
6564
</select>
6665
</div>
6766

68-
<div className={styles.Setting}>
67+
<div className={styles.SettingWrapper}>
6968
<div className={styles.RadioLabel}>Display density</div>
7069
<select
71-
className={styles.Select}
7270
value={displayDensity}
7371
onChange={({currentTarget}) =>
7472
setDisplayDensity(currentTarget.value)
@@ -79,16 +77,17 @@ export default function GeneralSettings(_: {}): React.Node {
7977
</div>
8078

8179
{supportsTraceUpdates && (
82-
<div className={styles.Setting}>
83-
<label>
80+
<div className={styles.SettingWrapper}>
81+
<label className={styles.SettingRow}>
8482
<input
8583
type="checkbox"
8684
checked={traceUpdatesEnabled}
8785
onChange={({currentTarget}) =>
8886
setTraceUpdatesEnabled(currentTarget.checked)
8987
}
90-
/>{' '}
91-
Highlight updates when components render.
88+
className={styles.SettingRowCheckbox}
89+
/>
90+
Highlight updates when components render
9291
</label>
9392
</div>
9493
)}

‎packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -69,35 +69,37 @@ export default function ProfilerSettings(_: {}): React.Node {
6969
const minCommitDurationInputRef = useRef<HTMLInputElement | null>(null);
7070

7171
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}>
7575
<input
7676
type="checkbox"
7777
checked={recordChangeDescriptions}
7878
onChange={updateRecordChangeDescriptions}
79-
/>{' '}
80-
Record why each component rendered while profiling.
79+
className={styles.SettingRowCheckbox}
80+
/>
81+
Record why each component rendered while profiling
8182
</label>
8283
</div>
8384

84-
<div className={styles.Setting}>
85-
<label>
85+
<div className={styles.SettingWrapper}>
86+
<label className={styles.SettingRow}>
8687
<input
8788
checked={isCommitFilterEnabled}
8889
onChange={updateIsCommitFilterEnabled}
8990
type="checkbox"
90-
/>{' '}
91+
className={styles.SettingRowCheckbox}
92+
/>
9193
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+
&nbsp;(ms)
102+
</label>
101103
</div>
102104
</div>
103105
);

‎packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.Settings {
1+
.SettingList {
22
display: flex;
33
flex-direction: column;
44
align-items: flex-start;
@@ -7,13 +7,25 @@
77
font-size: var(--font-size-sans-normal);
88
}
99

10-
.Setting {
10+
.SettingWrapper {
1111
margin-bottom: 0.5rem;
1212
}
13-
.Setting:last-of-type {
13+
.SettingWrapper:last-of-type {
1414
margin-bottom: 0;
1515
}
1616

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+
1729
.OpenInURLSetting {
1830
margin: 0.5rem 0;
1931
}
@@ -154,14 +166,3 @@
154166
padding: 0;
155167
margin: 0;
156168
}
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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
:root {
1+
:is(:root, :host) {
22
/* Font smoothing */
33
--font-smoothing: auto;
44

0 commit comments

Comments
 (0)