From 13ca37384d99610ccbc8b1bf07fcafa97405d6d2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 27 Feb 2019 13:54:53 -0800
Subject: [PATCH] Maybe fixed checkbox alignment issue Dan reported?

---
 src/devtools/views/EditableValue.css | 14 +++++++++-----
 src/devtools/views/EditableValue.js  | 21 ++++++++++++++++-----
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/devtools/views/EditableValue.css b/src/devtools/views/EditableValue.css
index 12dd20cc25..3087b85261 100644
--- a/src/devtools/views/EditableValue.css
+++ b/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;
diff --git a/src/devtools/views/EditableValue.js b/src/devtools/views/EditableValue.js
index b590419f52..7659057d2b 100644
--- a/src/devtools/views/EditableValue.js
+++ b/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}