Tweaked colors; Esc key to undo edits
Brian Vaughn committed
Feb 21, 2019 at 14:11 UTC
4f64c9ef9ecdac2deb7251b3f147c4d66ac0a691
3 files changed
+13
-9
src/devtools/views/HooksTree.css
+2
-2
@@ -9,7 +9,6 @@
9
10
.Header {
11
font-family: var(--font-family-sans);
12
- color: var(--color-dim);
12
}
13
14
.NameValueRow {
@@ -17,10 +16,11 @@
16
}
17
18
.Name {
20
- color: var(--color-text-color);
19
+ color: var(--color-dim);
20
flex: 0 0 auto;
21
}
22
.Name:after {
23
+ color: var(--color-text-color);
24
content: ': ';
25
margin-right: 0.5rem;
26
}
src/devtools/views/InspectedElementTree.css
-1
@@ -8,7 +8,6 @@
8
9
.Header {
10
font-family: var(--font-family-sans);
11
- color: var(--color-dim);
11
}
12
13
.Item {
src/devtools/views/InspectedElementTree.js
+11
-6
@@ -200,21 +200,27 @@ export function EditableValue({
200
setHasPendingChanges(false);
201
}, [value]);
202
203
- const handleKeyPress = useCallback(
204
- ({ key }) => {
203
+ const handleKeyDown = useCallback(
204
+ event => {
205
+ // Prevent keydown events from e.g. change selected element in the tree
206
+ event.stopPropagation();
207
+
208
+ const { key } = event;
209
+
210
if (key === 'Enter') {
211
overrideValueFn(path, editableValue);
212
213
// Don't reset the pending change flag here.
214
// The inspected fiber won't be updated until after the next "inspectElement" message.
215
// We'll reset that flag during a subsequent render.
216
+ } else if (key === 'Escape') {
217
+ setEditableValue(value);
218
+ setHasPendingChanges(false);
219
}
220
},
213
- [path, editableValue, overrideValueFn]
221
+ [path, editableValue, overrideValueFn, value]
222
);
223
216
- const handleKeyDown = useCallback(event => event.stopPropagation(), []);
217
-
224
// Render different input types based on the dataType
225
let type = 'text';
226
if (dataType === 'boolean') {
@@ -236,7 +242,6 @@ export function EditableValue({
242
className={styles.ValueInput}
243
onChange={handleChange}
244
onKeyDown={handleKeyDown}
239
- onKeyPress={handleKeyPress}
245
type={type}
246
value={dataType === 'boolean' ? undefined : inputValue}
247
/>