Changed style and position of search-for-element button to more closely matchin Chrome ( based on user testing)
Brian Vaughn committed
Apr 20, 2019 at 10:44 UTC
4b9082eea14a71a5c709a35236f226fea5be1585
6 files changed
+20
-13
src/devtools/views/ButtonIcon.js
+2
-3
@@ -172,9 +172,8 @@ const PATH_RELOAD = `
172
`;
173
174
const PATH_SEARCH = `
175
- M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46
176
- 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87
177
- 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z
175
+ M8.5,22H3.7l-1.4-1.5V3.8l1.3-1.5h17.2l1,1.5v4.9h-1.3V4.3l-0.4-0.6H4.2L3.6,4.3V20l0.7,0.7h4.2V22z
176
+ M23,13.9l-4.6,3.6l4.6,4.6l-1.1,1.1l-4.7-4.4l-3.3,4.4l-3.2-12.3L23,13.9z
177
`;
178
179
const PATH_UNDO = `
src/devtools/views/Components/OwnersStack.js
+8
-8
@@ -50,14 +50,6 @@ export default function OwnerStack() {
50
51
return (
52
<div className={styles.OwnerStack}>
53
- <Button
54
- className={styles.IconButton}
55
- onClick={resetOwnerStack}
56
- title="Back to tree view"
57
- >
58
- <ButtonIcon type="close" />
59
- </Button>
60
- <div className={styles.VRule} />
53
<div className={styles.Bar} ref={elementsBarRef}>
54
{isOverflowing && (
55
<ElementsDropdown
@@ -76,6 +68,14 @@ export default function OwnerStack() {
68
))
69
)}
70
</div>
71
+ <div className={styles.VRule} />
72
+ <Button
73
+ className={styles.IconButton}
74
+ onClick={resetOwnerStack}
75
+ title="Back to tree view"
76
+ >
77
+ <ButtonIcon type="close" />
78
+ </Button>
79
</div>
80
);
81
}
src/devtools/views/Components/SearchInput.css
+1
@@ -18,6 +18,7 @@
18
.InputIcon {
19
pointer-events: none;
20
z-index: 2;
21
+ color: var(--color-dim);
22
}
23
24
.IndexLabel {
src/devtools/views/Components/SearchInput.js
-1
@@ -127,7 +127,6 @@ export default function SearchInput(props: Props) {
127
>
128
<ButtonIcon type="close" />
129
</Button>
130
- <div className={styles.RightVRule} />
130
</div>
131
);
132
}
src/devtools/views/Components/Tree.css
+7
@@ -29,3 +29,10 @@
29
font-size: var(--font-size-monospace-normal);
30
line-height: var(--line-height-data);
31
}
32
+
33
+.VRule {
34
+ height: 20px;
35
+ width: 1px;
36
+ margin: 0 0.5rem;
37
+ background-color: var(--color-border);
38
+}
src/devtools/views/Components/Tree.js
+2
-1
@@ -290,8 +290,9 @@ export default function Tree(props: Props) {
290
return (
291
<div className={styles.Tree} ref={treeRef}>
292
<div className={styles.SearchInput}>
293
- {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
293
<InspectHostNodesToggle />
294
+ <div className={styles.VRule} />
295
+ {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
296
</div>
297
<div
298
className={styles.AutoSizerWrapper}