Added stub search row (not connected to anythign yet)
Brian Vaughn committed
Jan 31, 2019 at 09:42 UTC
62f8c985df0e4ce884f24b2e10d8b53a8c1be0ea
5 files changed
+123
-49
src/devtools/store.js
+5
-1
@@ -57,7 +57,11 @@ export default class Store extends EventEmitter {
57
58
getElementAtIndex(index: number): Element {
59
if (index < 0 || index >= this.numElements) {
60
- throw Error(`Invalid index ${index} specified; store contains ${this.numElements} items.`);
60
+ throw Error(
61
+ `Invalid index ${index} specified; store contains ${
62
+ this.numElements
63
+ } items.`
64
+ );
65
}
66
67
// Find wich root this element is in...
src/devtools/views/Elements.css
+47
-41
@@ -1,50 +1,56 @@
1
-:root {
2
- /* TODO */
3
- --color-base00: #ffffff;
4
- --color-base01: #f3f3f3;
5
- --color-base02: #eeeeee;
6
- --color-base03: #dadada;
7
- --color-base04: #333333;
8
- --color-base05: #5a5a5a;
9
- --color-special00: #8155cb;
10
- --color-special01: #222222;
11
- --color-special02: #1a1aa6;
12
- --color-special03: #c80000;
13
- --color-special04: #236e25;
14
- --color-special05: #aa0d91;
15
- --color-special06: #ef6632;
16
- --color-special07: #777d88;
17
- --color-state00: #0088fa;
18
- --color-state01: #dadada;
19
- --color-state02: #ffffff;
20
- --color-state03: #ebf1fb;
21
- --color-state04: #ffff00;
22
- --color-state05: #222222;
23
- --color-state06: #222222;
1
+.Elements {
2
+ width: 100%;
3
+ height: 100%;
4
+ display: flex;
5
+ flex-direction: column;
6
25
- --color-component: var(--color-special00);
26
- --color-tree-tag: var(--color-base04);
27
- --color-tree-attr-name: var(--color-special06);
28
- --color-tree-attr-value: var(--color-special02);
7
+ -webkit-font-smoothing: antialiased;
8
+}
9
30
- --line-height-tree-compact: 1.5;
31
- --line-height-tree-normal: 1.5;
10
+.SearchRow {
11
+ flex: 0 0 auto;
12
+ display: flex;
13
+ align-items: center;
14
+ font-size: 16px;
15
+ border-bottom: 1px solid var(--color-base02);
16
+ padding: 0.5rem;
17
+}
18
33
- /* GitHub.com system fonts */
34
- --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
35
- Courier, monospace;
36
- --font-size-tree-compact: 12px;
37
- --font-size-tree-normal: 14px;
19
+.SearchInput {
20
+ font-size: 1rem;
21
+ flex: 1;
22
+ outline: none;
23
+ border: none;
24
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
25
+ background-repeat: no-repeat;
26
+ background-position: left center;
27
+ background-size: 16px 16px;
28
+ padding-left: 1.5rem;
29
}
30
40
-.Elements {
41
- width: 100%;
42
- height: 100%;
43
- overflow: auto;
31
+.IconButton {
32
+ border: none;
33
+ background: none;
34
+ display: inline-flex;
35
+ align-items: center;
36
+ padding: 0.25rem;
37
+ cursor: pointer;
38
+ color: var(--color-state00);
39
+ flex: 0 0 auto;
40
+}
41
+.IconButton:hover {
42
+ color: var(--color-special02);
43
+}
44
45
- -webkit-font-smoothing: antialiased;
45
+.IconButtonSVG {
46
+ width: 1rem;
47
+ height: 1rem;
48
+ margin-right: 0.25rem;
49
+ fill: currentColor;
50
}
51
48
-* {
49
- box-sizing: border-box;
52
+.Tree {
53
+ width: 100%;
54
+ overflow: auto;
55
+ flex: 1 0 auto;
56
}
src/devtools/views/Elements.js
+28
-6
@@ -6,6 +6,8 @@ import Tree from './Tree';
6
import { StoreContext, TreeContext } from './contexts';
7
import styles from './Elements.css';
8
9
+import './root.css';
10
+
11
import type { Bridge } from '../../types';
12
13
export type Props = {|
@@ -14,11 +16,7 @@ export type Props = {|
16
themeName: string,
17
|};
18
17
-export default function Elements({
18
- bridge,
19
- browserName,
20
- themeName,
21
-}: Props) {
19
+export default function Elements({ bridge, browserName, themeName }: Props) {
20
const store = useMemo<Store>(() => new Store(bridge), []);
21
22
const [treeContext, setTreeContext] = useState({
@@ -43,7 +41,31 @@ export default function Elements({
41
<StoreContext.Provider value={store}>
42
<TreeContext.Provider value={treeContext}>
43
<div className={styles.Elements}>
46
- <Tree />
44
+ <div className={styles.SearchRow}>
45
+ <input
46
+ className={styles.SearchInput}
47
+ placeholder="Search (text or /regex/)"
48
+ />
49
+ <button className={styles.IconButton}>
50
+ <svg
51
+ xmlns="http://www.w3.org/2000/svg"
52
+ className={styles.IconButtonSVG}
53
+ width="24"
54
+ height="24"
55
+ viewBox="0 0 24 24"
56
+ >
57
+ <path d="M0 0h24v24H0z" fill="none" />
58
+ <path
59
+ fill="currentColor"
60
+ d="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 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 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
61
+ />
62
+ </svg>
63
+ Select
64
+ </button>
65
+ </div>
66
+ <div className={styles.Tree}>
67
+ <Tree />
68
+ </div>
69
</div>
70
</TreeContext.Provider>
71
</StoreContext.Provider>
src/devtools/views/Tree.js
+1
-1
@@ -1,6 +1,6 @@
1
// @flow
2
3
-import React, { useContext, useMemo } from 'react';
3
+import React, { useContext } from 'react';
4
import AutoSizer from 'react-virtualized-auto-sizer';
5
import { FixedSizeList } from 'react-window';
6
import Element from './Element';
src/devtools/views/root.css
new
+42
@@ -0,0 +1,42 @@
1
+:root {
2
+ /* TODO */
3
+ --color-base00: #ffffff;
4
+ --color-base01: #f3f3f3;
5
+ --color-base02: #eeeeee;
6
+ --color-base03: #dadada;
7
+ --color-base04: #333333;
8
+ --color-base05: #5a5a5a;
9
+ --color-special00: #8155cb;
10
+ --color-special01: #222222;
11
+ --color-special02: #1a1aa6;
12
+ --color-special03: #c80000;
13
+ --color-special04: #236e25;
14
+ --color-special05: #aa0d91;
15
+ --color-special06: #ef6632;
16
+ --color-special07: #777d88;
17
+ --color-state00: #0088fa;
18
+ --color-state01: #dadada;
19
+ --color-state02: #ffffff;
20
+ --color-state03: #ebf1fb;
21
+ --color-state04: #ffff00;
22
+ --color-state05: #222222;
23
+ --color-state06: #222222;
24
+
25
+ --color-component: var(--color-special00);
26
+ --color-tree-tag: var(--color-base04);
27
+ --color-tree-attr-name: var(--color-special06);
28
+ --color-tree-attr-value: var(--color-special02);
29
+
30
+ --line-height-tree-compact: 1.5;
31
+ --line-height-tree-normal: 1.5;
32
+
33
+ /* GitHub.com system fonts */
34
+ --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
35
+ Courier, monospace;
36
+ --font-size-tree-compact: 12px;
37
+ --font-size-tree-normal: 14px;
38
+}
39
+
40
+* {
41
+ box-sizing: border-box;
42
+}