Maybe fixed checkbox alignment issue Dan reported?

src/devtools/views/EditableValue.css

@@ -1,12 +1,16 @@
-.ValueInputLabel {
+.CheckboxLabel {
   flex: 1 1 100%;
   display: flex;
 }
-.ValueInputLabel:focus-within {
+.CheckboxLabel:focus-within {
   background-color: var(--color-button-background-focus);
 }
 
-.ValueInput {
+.Checkbox:focus {
+  outline: none;
+}
+
+.Input {
   flex: 1 1;
   background: none;
   border: 1px solid transparent;
@@ -15,11 +19,11 @@
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
 }
-
-.ValueInput:focus {
+.Input:focus {
   background-color: var(--color-button-background-focus);
   outline: none;
 }
+
 .ResetButton {
   flex: 0 0 auto;
   padding: 0 0.5rem;

src/devtools/views/EditableValue.js

@@ -88,17 +88,28 @@ export default function EditableValue({
 
   return (
     <Fragment>
-      <label className={styles.ValueInputLabel}>
+      {dataType === 'boolean' && (
+        <label className={styles.CheckboxLabel}>
+          <input
+            checked={inputValue}
+            className={styles.Checkbox}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            ref={inputRef}
+            type={type}
+          />
+        </label>
+      )}
+      {dataType !== 'boolean' && (
         <input
-          checked={dataType === 'boolean' ? inputValue : undefined}
-          className={styles.ValueInput}
+          className={styles.Input}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           ref={inputRef}
           type={type}
-          value={dataType === 'boolean' ? undefined : inputValue}
+          value={inputValue}
         />
-      </label>
+      )}
       {hasPendingChanges && dataType !== 'boolean' && (
         <Button
           className={styles.ResetButton}