Tweaked colors; Esc key to undo edits

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;
 }

src/devtools/views/InspectedElementTree.css

@@ -8,7 +8,6 @@
 
 .Header {
   font-family: var(--font-family-sans);
-  color: var(--color-dim);
 }
 
 .Item {

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}
         />