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(
-        { className: "perf-presets-text" },
       div({ className: "perf-toggle-text-label" }, labelText),
       description
         ? div({ className: "perf-toggle-description" }, description)
         : null
-      )
     );
   }
 }

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

@@ -400,8 +400,6 @@ class Settings extends PureComponent {
             onChange: this._handleFeaturesCheckboxChange,
             disabled: !isSupported,
           }),
-          div(
-            { className: "perf-settings-feature-text" },
           div(
             { className: "perf-toggle-text-label" },
             !isSupported && featureDescription.experimental
@@ -419,7 +417,6 @@ class Settings extends PureComponent {
                 )
               : 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-inline: 0 10px;
+  margin-block: 2px; /* extend the vertical clicktarget */
+  margin-inline: 0 6px;
   background-color: var(--in-content-button-background);
   background-position: center;
   flex-shrink: 0; /* avoid shrinking inside flex container */