Make style editor inputs more obvious resemble inputs
Brian Vaughn committed
Jul 24, 2019 at 14:43 UTC
2e8b9fad366fa2da4fdc5c26562008f9bdcc8317
2 files changed
+11
-1
src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
+5
-1
@@ -68,8 +68,12 @@ export default function AutoSizeInput({
68
return;
69
}
70
71
+ // Adding an extra pixel avoids a slight horizontal scroll when changing text selection/cursor.
72
+ // Not sure why this is, but the old DevTools did a similar thing.
73
+ const targetWidth = Math.ceil(scrollWidth) + 1;
74
+
75
if (inputRef.current !== null) {
72
- inputRef.current.style.width = `${scrollWidth}px`;
76
+ inputRef.current.style.width = `${targetWidth}px`;
77
}
78
}, [value]);
79
src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
+6
@@ -42,6 +42,12 @@
42
43
.Input {
44
flex: 0 1 auto;
45
+ padding: 1px;
46
+ box-shadow: 0px 1px 3px transparent;
47
+}
48
+.Input:focus {
49
+ color: var(--color-text);
50
+ box-shadow: 0px 1px 3px var(--color-shadow);
51
}
52
53
.Empty {