From 4f64c9ef9ecdac2deb7251b3f147c4d66ac0a691 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Feb 2019 14:11:06 -0800
Subject: [PATCH] Tweaked colors; Esc key to undo edits

---
 src/devtools/views/HooksTree.css            |  4 ++--
 src/devtools/views/InspectedElementTree.css |  1 -
 src/devtools/views/InspectedElementTree.js  | 17 +++++++++++------
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/devtools/views/HooksTree.css b/src/devtools/views/HooksTree.css
index ac326a90fb..1fbc785e13 100644
--- a/src/devtools/views/HooksTree.css
+++ b/src/devtools/views/HooksTree.css
@@ -9,7 +9,6 @@
 
 .Header {
   font-family: var(--font-family-sans);
-  color: var(--color-dim);
 }
 
 .NameValueRow {
@@ -17,10 +16,11 @@
 }
 
 .Name {
-  color: var(--color-text-color);
+  color: var(--color-dim);
   flex: 0 0 auto;
 }
 .Name:after {
+  color: var(--color-text-color);
   content: ': ';
   margin-right: 0.5rem;
 }
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/InspectedElementTree.css
index 9b4f89584a..653213c857 100644
--- a/src/devtools/views/InspectedElementTree.css
+++ b/src/devtools/views/InspectedElementTree.css
@@ -8,7 +8,6 @@
 
 .Header {
   font-family: var(--font-family-sans);
-  color: var(--color-dim);
 }
 
 .Item {
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index dde2899a6e..157befb357 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -200,21 +200,27 @@ export function EditableValue({
     setHasPendingChanges(false);
   }, [value]);
 
-  const handleKeyPress = useCallback(
-    ({ key }) => {
+  const handleKeyDown = useCallback(
+    event => {
+      // Prevent keydown events from e.g. change selected element in the tree
+      event.stopPropagation();
+
+      const { key } = event;
+
       if (key === 'Enter') {
         overrideValueFn(path, editableValue);
 
         // Don't reset the pending change flag here.
         // The inspected fiber won't be updated until after the next "inspectElement" message.
         // We'll reset that flag during a subsequent render.
+      } else if (key === 'Escape') {
+        setEditableValue(value);
+        setHasPendingChanges(false);
       }
     },
-    [path, editableValue, overrideValueFn]
+    [path, editableValue, overrideValueFn, value]
   );
 
-  const handleKeyDown = useCallback(event => event.stopPropagation(), []);
-
   // Render different input types based on the dataType
   let type = 'text';
   if (dataType === 'boolean') {
@@ -236,7 +242,6 @@ export function EditableValue({
           className={styles.ValueInput}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
-          onKeyPress={handleKeyPress}
           type={type}
           value={dataType === 'boolean' ? undefined : inputValue}
         />