Skip to content

Commit fd9be3d

Browse files
author
Timothy Johnson
committed
Better search
1 parent 3a43943 commit fd9be3d

File tree

9 files changed

+165
-98
lines changed

9 files changed

+165
-98
lines changed

‎dest/devtools/search.svg

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎src/App.svelte

Lines changed: 11 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
<script>
2-
import {
3-
searchResult,
4-
searchValue,
5-
hoveredNodeId,
6-
rootNodes
7-
} from './store.js'
2+
import { hoveredNodeId, rootNodes } from './store.js'
3+
import Toolbar from './toolbar/Toolbar.svelte'
4+
import Search from './toolbar/Search.svelte'
5+
import VisibilityButton from './toolbar/VisibilityButton.svelte'
86
import ComponentView from './ComponentView.svelte'
9-
import Toolbar from './Toolbar.svelte'
10-
import VisibilityButton from './VisibilityButton.svelte'
117
import Breadcrumbs from './Breadcrumbs.svelte'
128
import ConnectMessage from './ConnectMessage.svelte'
139
import Node from './nodes/Node.svelte'
@@ -20,19 +16,6 @@
2016
flex-direction: column;
2117
}
2218
23-
input {
24-
display: inline-block;
25-
margin-right: 5px;
26-
padding: 0 10px 0 22px;
27-
height: 22px;
28-
border: 1px solid rgb(224, 224, 226);
29-
border-radius: 2px;
30-
background: 6px center / 12px no-repeat url('/devtools/search.svg')
31-
transparent;
32-
color: inherit;
33-
font-size: inherit;
34-
}
35-
3619
ul {
3720
overflow: auto;
3821
flex-grow: 1;
@@ -63,30 +46,15 @@
6346
{#if $rootNodes.length}
6447
<div class="node-tree">
6548
<Toolbar>
66-
<input
67-
type="search"
68-
placeholder="Search Tree"
69-
bind:value={$searchValue} />
49+
<Search />
7050
<VisibilityButton />
7151
</Toolbar>
72-
{#if $searchResult}
73-
{#if $searchResult.length}
74-
<ul class="results" on:mouseleave={e => ($hoveredNodeId = null)}>
75-
{#each $searchResult as node (node.id)}
76-
<Node {node} forceCollapsed={true} />
77-
{/each}
78-
</ul>
79-
{:else}
80-
<div>No results</div>
81-
{/if}
82-
{:else}
83-
<ul on:mouseleave={e => ($hoveredNodeId = null)}>
84-
{#each $rootNodes as node (node.id)}
85-
<Node {node} />
86-
{/each}
87-
</ul>
88-
<Breadcrumbs />
89-
{/if}
52+
<ul on:mouseleave={e => ($hoveredNodeId = null)}>
53+
{#each $rootNodes as node (node.id)}
54+
<Node {node} />
55+
{/each}
56+
</ul>
57+
<Breadcrumbs />
9058
</div>
9159
<ComponentView />
9260
{:else}

‎src/ComponentView.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script>
22
import { devtools } from 'chrome'
33
import { selectedNode } from './store.js'
4+
import Toolbar from './toolbar/Toolbar.svelte'
5+
import Button from './toolbar/Button.svelte'
46
import PropertyList from './PropertyList.svelte'
5-
import Toolbar from './Toolbar.svelte'
6-
import IconButton from './IconButton.svelte'
77
88
let isResizing = false
99
let width = 300
@@ -52,7 +52,7 @@
5252
<div class="root" style={`width: ${width}px`}>
5353
<div class="resize" on:mousedown={e => (isResizing = true)} />
5454
<Toolbar>
55-
<IconButton
55+
<Button
5656
disabled={$selectedNode.id === undefined}
5757
on:click={e => devtools.inspectedWindow.eval('inspect(window.$s)')}>
5858
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
@@ -63,7 +63,7 @@
6363
1H2v-1H.5zM14 7.5h1.5a.5.5 0 0 1 0 1H14v-1zM8 0c.28 0
6464
.5.22.5.5V2h-1V.5c0-.28.22-.5.5-.5zM8.5 14v1.5a.5.5 0 0 1-1 0V14h1z" />
6565
</svg>
66-
</IconButton>
66+
</Button>
6767
</Toolbar>
6868
{#if $selectedNode.type == 'component'}
6969
<PropertyList

‎src/nodes/Node.svelte

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,6 @@
99
1010
export let node
1111
export let depth = 1
12-
export let forceCollapsed
13-
14-
let _collapsed = forceCollapsed || node.collapsed
1512
1613
let _timeout = null
1714
node.invalidate = () => {
@@ -39,8 +36,6 @@
3936
flash = flash || node.children.length != lastLength
4037
lastLength = node.children.length
4138
}
42-
43-
$: if (!forceCollapsed) node.collapsed = _collapsed
4439
</script>
4540

4641
<style>
@@ -107,7 +102,7 @@
107102
<svelte:component
108103
this={nodeType}
109104
tagName={node.tagName}
110-
bind:collapsed={_collapsed}
105+
bind:collapsed={node.collapsed}
111106
{...node.detail}
112107
hasChildren={node.children.length != 0}
113108
hover={$hoveredNodeId == node.id}

‎src/store.js

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,6 @@ export const selectedNode = writable({})
1313
export const hoveredNodeId = writable(null)
1414
export const rootNodes = writable([])
1515
export const searchValue = writable('')
16-
export const searchResult = derived(searchValue, value =>
17-
value.length < 2
18-
? null
19-
: Array.from(nodeMap.values()).filter(
20-
node =>
21-
node.tagName.includes(value) ||
22-
(node.detail && JSON.stringify(node.detail).includes(value))
23-
)
24-
)
2516

2617
const nodeMap = new Map()
2718

@@ -38,13 +29,24 @@ export function reload() {
3829
})
3930
}
4031

41-
selectedNode.subscribe(node =>
32+
selectedNode.subscribe(node => {
4233
port.postMessage({
4334
type: 'setSelected',
4435
tabId: chrome.devtools.inspectedWindow.tabId,
4536
nodeId: node.id
4637
})
47-
)
38+
39+
let invalid = null
40+
while (node.parent) {
41+
node = node.parent
42+
if (node.collapsed) {
43+
invalid = node
44+
node.collapsed = false
45+
}
46+
}
47+
48+
if (invalid) invalid.invalidate()
49+
})
4850

4951
function noop() {}
5052

@@ -125,12 +127,6 @@ port.onMessage.addListener(msg => {
125127
case 'inspect': {
126128
let node = nodeMap.get(msg.node.id)
127129
selectedNode.set(node)
128-
while (node.parent) {
129-
node = node.parent
130-
node.collapsed = false
131-
}
132-
133-
node.invalidate()
134130

135131
break
136132
}

‎src/IconButton.svelte renamed to ‎src/toolbar/Button.svelte

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script>
22
export let disabled
3+
export let type = 'button'
34
</script>
45

56
<style>
@@ -12,6 +13,7 @@
1213
border: none;
1314
border-radius: 2px;
1415
background-color: transparent;
16+
color: rgb(12, 12, 13);
1517
line-height: 0;
1618
cursor: pointer;
1719
}
@@ -24,45 +26,44 @@
2426
color: inherit;
2527
}
2628
27-
button:active :global(svg) {
28-
fill: rgba(12, 12, 13, 0.8);
29+
button:active {
30+
color: rgba(12, 12, 13, 0.8);
2931
}
3032
31-
button:disabled :global(svg) {
32-
fill: rgba(12, 12, 13, 0.2);
33-
}
34-
35-
:global(svg) {
36-
width: 16px;
37-
height: 16px;
38-
vertical-align: middle;
39-
opacity: 0.8;
40-
fill: rgb(12, 12, 13);
33+
button:disabled {
34+
color: rgba(12, 12, 13, 0.2);
4135
}
4236
4337
:global(.dark) button:hover {
4438
background-color: rgb(37, 37, 38);
4539
}
4640
47-
:global(.dark) :global(svg) {
48-
fill: rgba(249, 249, 250, 0.7);
41+
:global(.dark) {
42+
color: rgba(249, 249, 250, 0.7);
4943
}
5044
51-
:global(.dark) button:active :global(svg) {
52-
fill: rgba(249, 249, 250, 0.8);
45+
:global(.dark) button:active {
46+
color: rgba(249, 249, 250, 0.8);
5347
}
5448
55-
:global(.dark) button:disabled :global(svg) {
56-
fill: rgba(249, 249, 250, 0.2);
49+
:global(.dark) button:disabled {
50+
color: rgba(249, 249, 250, 0.2);
5751
}
5852
5953
:global(.dark) button:disabled,
6054
button:disabled {
6155
background-color: transparent;
6256
cursor: default;
6357
}
58+
59+
button :global(svg) {
60+
width: 16px;
61+
height: 16px;
62+
vertical-align: middle;
63+
fill: currentColor;
64+
}
6465
</style>
6566

66-
<button on:click {disabled}>
67+
<button on:click {disabled} {type}>
6768
<slot />
6869
</button>

‎src/toolbar/Search.svelte

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<script>
2+
import { rootNodes, selectedNode } from '../store.js'
3+
import Button from './Button.svelte'
4+
5+
function next() {
6+
if (resultsPosition >= results.length - 1) resultsPosition = -1
7+
selectedNode.set(results[++resultsPosition])
8+
}
9+
10+
function prev() {
11+
if (resultsPosition <= 0) resultsPosition = results.length
12+
selectedNode.set(results[--resultsPosition])
13+
}
14+
15+
function search(nodeList = $rootNodes) {
16+
for (const node of nodeList) {
17+
if (
18+
node.tagName.includes(value) ||
19+
(node.detail && JSON.stringify(node.detail).includes(value))
20+
)
21+
results.push(node)
22+
search(node.children)
23+
}
24+
}
25+
26+
let value
27+
let results
28+
let resultsPosition
29+
30+
$: {
31+
value
32+
results = []
33+
resultsPosition = -1
34+
if (value && value.length > 1) search()
35+
}
36+
</script>
37+
38+
<style>
39+
form {
40+
display: flex;
41+
align-items: center;
42+
flex-grow: 1;
43+
}
44+
45+
svg {
46+
margin: 4px 4px 4px 6px;
47+
width: 12px;
48+
}
49+
50+
input {
51+
flex-grow: 1;
52+
outline: none;
53+
border: none;
54+
background: none;
55+
color: inherit;
56+
font-size: inherit;
57+
}
58+
59+
.separator {
60+
margin: 0 5px;
61+
width: 1px;
62+
height: calc(100% - 10px);
63+
background-color: rgb(224, 224, 226);
64+
}
65+
66+
.next,
67+
.prev {
68+
position: relative;
69+
display: block;
70+
margin: 5px;
71+
width: 5px;
72+
height: 5px;
73+
border-style: solid;
74+
transform: rotate(45deg);
75+
}
76+
77+
.next {
78+
bottom: 2px;
79+
border-width: 0 1px 1px 0;
80+
}
81+
82+
.prev {
83+
top: 2px;
84+
border-width: 1px 0 0 1px;
85+
}
86+
</style>
87+
88+
<form on:submit|preventDefault={next}>
89+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
90+
<path
91+
fill="rgba(135, 135, 137, 0.9)"
92+
d="M15.707 14.293l-5-5-1.414 1.414 5 5a1 1 0 0 0 1.414-1.414z" />
93+
<path
94+
fill="rgba(135, 135, 137, 0.9)"
95+
fill-rule="evenodd"
96+
d="M6 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2A6 6 0 1 0 6 0a6 6 0 0 0 0 12z" />
97+
</svg>
98+
<input placeholder="Search" bind:value />
99+
{#if resultsPosition > -1}
100+
{resultsPosition + 1}&nbsp;of&nbsp;{results.length}&nbsp;
101+
{/if}
102+
<Button type="submit" disabled={!results.length}>
103+
<div class="next" />
104+
</Button>
105+
<Button on:click={prev} disabled={!results.length}>
106+
<div class="prev" />
107+
</Button>
108+
<div class="separator" />
109+
</form>

‎src/Toolbar.svelte renamed to ‎src/toolbar/Toolbar.svelte

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<style>
22
div {
3+
display: flex;
4+
align-items: stretch;
5+
justify-content: flex-end;
36
padding: 0 5px;
47
border-bottom: 1px solid rgb(224, 224, 226);
58
background-color: rgb(249, 249, 250);
6-
text-align: right;
79
}
810
911
:global(.dark) div {

0 commit comments

Comments
 (0)