From 80c03eb7e0f05da5e0de6faebbe8dbb434455454 Mon Sep 17 00:00:00 2001
From: Ruslan Lesiutin <rdlesyutin@gmail.com>
Date: Mon, 9 Jun 2025 18:25:19 +0100
Subject: [PATCH] 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)
|
---
 .../views/Settings/ComponentsSettings.js      | 46 ++++++++++---------
 .../views/Settings/DebuggingSettings.js       | 36 ++++++++-------
 .../views/Settings/GeneralSettings.js         | 19 ++++----
 .../views/Settings/ProfilerSettings.js        | 36 ++++++++-------
 .../views/Settings/SettingsShared.css         | 29 ++++++------
 .../src/devtools/views/root.css               |  2 +-
 6 files changed, 88 insertions(+), 80 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
index 4309b0e5fb..106538cad3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
@@ -340,30 +340,35 @@ export default function ComponentsSettings({
   );
 
   return (
-    <div className={styles.Settings}>
-      <label className={styles.Setting}>
-        <input
-          type="checkbox"
-          checked={!collapseNodesByDefault}
-          onChange={updateCollapseNodesByDefault}
-        />{' '}
-        Expand component tree by default
-      </label>
+    <div className={styles.SettingList}>
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
+          <input
+            type="checkbox"
+            checked={!collapseNodesByDefault}
+            onChange={updateCollapseNodesByDefault}
+            className={styles.SettingRowCheckbox}
+          />
+          Expand component tree by default
+        </label>
+      </div>
 
-      <label className={styles.Setting}>
-        <input
-          type="checkbox"
-          checked={parseHookNames}
-          onChange={updateParseHookNames}
-        />{' '}
-        Always parse hook names from source{' '}
-        <span className={styles.Warning}>(may be slow)</span>
-      </label>
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
+          <input
+            type="checkbox"
+            checked={parseHookNames}
+            onChange={updateParseHookNames}
+            className={styles.SettingRowCheckbox}
+          />
+          Always parse hook names from source&nbsp;
+          <span className={styles.Warning}>(may be slow)</span>
+        </label>
+      </div>
 
       <label className={styles.OpenInURLSetting}>
         Open in Editor URL:{' '}
         <select
-          className={styles.Select}
           value={openInEditorURLPreset}
           onChange={({currentTarget}) => {
             const selectedValue = currentTarget.value;
@@ -432,7 +437,6 @@ export default function ComponentsSettings({
               </td>
               <td className={styles.TableCell}>
                 <select
-                  className={styles.Select}
                   value={componentFilter.type}
                   onChange={({currentTarget}) =>
                     changeFilterType(
@@ -467,7 +471,6 @@ export default function ComponentsSettings({
               <td className={styles.TableCell}>
                 {componentFilter.type === ComponentFilterElementType && (
                   <select
-                    className={styles.Select}
                     value={componentFilter.value}
                     onChange={({currentTarget}) =>
                       updateFilterValueElementType(
@@ -515,7 +518,6 @@ export default function ComponentsSettings({
                 )}
                 {componentFilter.type === ComponentFilterEnvironmentName && (
                   <select
-                    className={styles.Select}
                     value={componentFilter.value}
                     onChange={({currentTarget}) =>
                       updateFilterValueEnvironmentName(
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
index c48cdb58e3..5dfce3a6dc 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
@@ -57,56 +57,60 @@ export default function DebuggingSettings({
   ]);
 
   return (
-    <div className={styles.Settings}>
-      <div className={styles.Setting}>
-        <label>
+    <div className={styles.SettingList}>
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
           <input
             type="checkbox"
             checked={appendComponentStack}
             onChange={({currentTarget}) =>
               setAppendComponentStack(currentTarget.checked)
             }
-          />{' '}
-          Append component stacks to console warnings and errors.
+            className={styles.SettingRowCheckbox}
+          />
+          Append component stacks to console warnings and errors
         </label>
       </div>
 
-      <div className={styles.Setting}>
-        <label>
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
           <input
             type="checkbox"
             checked={showInlineWarningsAndErrors}
             onChange={({currentTarget}) =>
               setShowInlineWarningsAndErrors(currentTarget.checked)
             }
-          />{' '}
-          Show inline warnings and errors.
+            className={styles.SettingRowCheckbox}
+          />
+          Show inline warnings and errors
         </label>
       </div>
 
-      <div className={styles.Setting}>
-        <label>
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
           <input
             type="checkbox"
             checked={breakOnConsoleErrors}
             onChange={({currentTarget}) =>
               setBreakOnConsoleErrors(currentTarget.checked)
             }
-          />{' '}
+            className={styles.SettingRowCheckbox}
+          />
           Break on warnings
         </label>
       </div>
 
-      <div className={styles.Setting}>
-        <label>
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
           <input
             type="checkbox"
             checked={hideConsoleLogsInStrictMode}
             onChange={({currentTarget}) =>
               setHideConsoleLogsInStrictMode(currentTarget.checked)
             }
-          />{' '}
-          Hide logs during additional invocations in{' '}
+            className={styles.SettingRowCheckbox}
+          />
+          Hide logs during additional invocations in&nbsp;
           <a
             className={styles.StrictModeLink}
             target="_blank"
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
index 098845a5fb..264cc05e60 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
@@ -46,17 +46,16 @@ export default function GeneralSettings(_: {}): React.Node {
     backendVersion && backendVersion !== frontendVersion;
 
   return (
-    <div className={styles.Settings}>
+    <div className={styles.SettingList}>
       {isInternalFacebookBuild && (
-        <div className={styles.Setting}>
+        <div className={styles.SettingWrapper}>
           This is an internal build of React DevTools for Meta
         </div>
       )}
 
-      <div className={styles.Setting}>
+      <div className={styles.SettingWrapper}>
         <div className={styles.RadioLabel}>Theme</div>
         <select
-          className={styles.Select}
           value={theme}
           onChange={({currentTarget}) => setTheme(currentTarget.value)}>
           <option value="auto">Auto</option>
@@ -65,10 +64,9 @@ export default function GeneralSettings(_: {}): React.Node {
         </select>
       </div>
 
-      <div className={styles.Setting}>
+      <div className={styles.SettingWrapper}>
         <div className={styles.RadioLabel}>Display density</div>
         <select
-          className={styles.Select}
           value={displayDensity}
           onChange={({currentTarget}) =>
             setDisplayDensity(currentTarget.value)
@@ -79,16 +77,17 @@ export default function GeneralSettings(_: {}): React.Node {
       </div>
 
       {supportsTraceUpdates && (
-        <div className={styles.Setting}>
-          <label>
+        <div className={styles.SettingWrapper}>
+          <label className={styles.SettingRow}>
             <input
               type="checkbox"
               checked={traceUpdatesEnabled}
               onChange={({currentTarget}) =>
                 setTraceUpdatesEnabled(currentTarget.checked)
               }
-            />{' '}
-            Highlight updates when components render.
+              className={styles.SettingRowCheckbox}
+            />
+            Highlight updates when components render
           </label>
         </div>
       )}
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
index 25bc08d7ad..604fe4cba1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
@@ -69,35 +69,37 @@ export default function ProfilerSettings(_: {}): React.Node {
   const minCommitDurationInputRef = useRef<HTMLInputElement | null>(null);
 
   return (
-    <div className={styles.Settings}>
-      <div className={styles.Setting}>
-        <label>
+    <div className={styles.SettingList}>
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
           <input
             type="checkbox"
             checked={recordChangeDescriptions}
             onChange={updateRecordChangeDescriptions}
-          />{' '}
-          Record why each component rendered while profiling.
+            className={styles.SettingRowCheckbox}
+          />
+          Record why each component rendered while profiling
         </label>
       </div>
 
-      <div className={styles.Setting}>
-        <label>
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
           <input
             checked={isCommitFilterEnabled}
             onChange={updateIsCommitFilterEnabled}
             type="checkbox"
-          />{' '}
+            className={styles.SettingRowCheckbox}
+          />
           Hide commits below
-        </label>{' '}
-        <input
-          className={styles.Input}
-          onChange={updateMinCommitDuration}
-          ref={minCommitDurationInputRef}
-          type="number"
-          value={minCommitDuration}
-        />{' '}
-        (ms)
+          <input
+            className={styles.Input}
+            onChange={updateMinCommitDuration}
+            ref={minCommitDurationInputRef}
+            type="number"
+            value={minCommitDuration}
+          />
+          &nbsp;(ms)
+        </label>
       </div>
     </div>
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
index ce27e83a3f..31a5bf993c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
@@ -1,4 +1,4 @@
-.Settings {
+.SettingList {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -7,13 +7,25 @@
   font-size: var(--font-size-sans-normal);
 }
 
-.Setting {
+.SettingWrapper {
   margin-bottom: 0.5rem;
 }
-.Setting:last-of-type {
+.SettingWrapper:last-of-type {
   margin-bottom: 0;
 }
 
+.SettingRow {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.SettingRowCheckbox {
+  margin: 0.125rem 0.25rem 0.125rem 0;
+}
+
 .OpenInURLSetting {
   margin: 0.5rem 0;
 }
@@ -154,14 +166,3 @@
   padding: 0;
   margin: 0;
 }
-
-.Setting .Setting {
-  margin-left: 1rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.Setting label:has(input:disabled) {
-  opacity: 0.5;
-  cursor: default;
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index cbf8ece006..db1bd7b01d 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -1,4 +1,4 @@
-:root {
+:is(:root, :host) {
   /* Font smoothing */
   --font-smoothing: auto;