refactor[devtools]: update css for settings and support css variables in shadow dom scnenario

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(

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"

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>
       )}

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>
   );

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;
-}

packages/react-devtools-shared/src/devtools/views/root.css

@@ -1,4 +1,4 @@
-:root {
+:is(:root, :host) {
   /* Font smoothing */
   --font-smoothing: auto;