Bug 1704027 - Switch to using grid for checkboxes and radiobuttons containers in about:profiling to fix alignment of input and text r=julienw,mconley

Also reset the margin-inline-start for checkboxes, and make the radiobuttons margin-inline-end the same as the checkboxes, as per spec.

Differential Revision: https://phabricator.services.mozilla.com/D111416

devtools/client/performance-new/components/Presets.js

@@ -64,13 +64,10 @@ class Preset extends PureComponent {
         checked: selected,
         onChange: this.onChange,
       }),
-      div(
+      div({ className: "perf-toggle-text-label" }, labelText),
-        { className: "perf-presets-text" },
+      description
-        div({ className: "perf-toggle-text-label" }, labelText),
+        ? div({ className: "perf-toggle-description" }, description)
-        description
+        : null
-          ? div({ className: "perf-toggle-description" }, description)
-          : null
-      )
     );
   }
 }

devtools/client/performance-new/components/Settings.js

@@ -401,24 +401,21 @@ class Settings extends PureComponent {
             disabled: !isSupported,
           }),
           div(
-            { className: "perf-settings-feature-text" },
+            { className: "perf-toggle-text-label" },
-            div(
+            !isSupported && featureDescription.experimental
-              { className: "perf-toggle-text-label" },
+              ? // Note when unsupported features are experimental.
-              !isSupported && featureDescription.experimental
+                `${name} (Experimental)`
-                ? // Note when unsupported features are experimental.
+              : name
-                  `${name} (Experimental)`
+          ),
-                : name
+          div(
-            ),
+            { className: "perf-toggle-description" },
-            div(
+            title,
-              { className: "perf-toggle-description" },
+            !isSupported && disabledReason
-              title,
+              ? div(
-              !isSupported && disabledReason
+                  { className: "perf-settings-feature-disabled-reason" },
-                ? div(
+                  disabledReason
-                    { className: "perf-settings-feature-disabled-reason" },
+                )
-                    disabledReason
+              : null
-                  )
-                : null
-            )
           )
         );
       })

devtools/client/themes/aboutprofiling.css

@@ -48,20 +48,21 @@ h2 {
 
 .perf-toggle-label {
   padding: 7px 0;
-  display: flex;
+  display: grid;
+  grid-template-columns: max-content auto;
   max-width: max-content;
 }
 
 .perf-toggle-text-label {
-  height: 24px; /* checkbox/radio height + their margin-block */
   display: flex;
   align-items: center;
 }
 
 .perf-toggle-description {
   font-size: 13px;
-  line-height: 1.6;
+  line-height: 1.8;
   color: var(--in-content-deemphasized-text);
+  grid-column: 2;
 }
 
 /* Presets section */
@@ -129,7 +130,7 @@ h2 {
   margin-inline: 0;
 }
 
-.perf-settings-checkbox-label-disabled > .perf-settings-feature-text {
+.perf-settings-checkbox-label-disabled > :not(input) {
   /* The checkboxes already get their opacity set to 0.5 in common.inc.css,
      so only target the text. The descriptions get their text deemphasized,
      so set a value a bit higher than 0.5 to compensate for that. */

toolkit/themes/shared/in-content/common.inc.css

@@ -739,7 +739,7 @@ html|input[type="checkbox"] {
   border: 1px solid var(--checkbox-border-color);
   background-color: var(--checkbox-unchecked-bgcolor);
   border-radius: 2px;
-  margin-inline-end: 6px;
+  margin-inline: 0 6px;
   flex-shrink: 0; /* avoid shrinking inside flex container */
 }
 
@@ -796,8 +796,8 @@ xul|*.radio-check {
   padding: 0;
   border: 1px solid var(--in-content-box-border-color);
   border-radius: 100%;
-  margin-block: 3px; /* extend the vertical clicktarget */
+  margin-block: 2px; /* extend the vertical clicktarget */
-  margin-inline: 0 10px;
+  margin-inline: 0 6px;
   background-color: var(--in-content-button-background);
   background-position: center;
   flex-shrink: 0; /* avoid shrinking inside flex container */