Skip to content

Commit cf5b654

Browse files
author
Timothy Johnson
committed
Node visibility options
1 parent 672506a commit cf5b654

File tree

6 files changed

+202
-27
lines changed

6 files changed

+202
-27
lines changed

‎dest/devtools/check.svg

Lines changed: 6 additions & 0 deletions
Loading

‎dest/devtools/visibility.svg

Lines changed: 35 additions & 0 deletions
Loading

‎src/ComponentView.svelte

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { devtools } from 'chrome'
33
import { selectedNode } from './store.js'
44
import EditableList from './EditableList.svelte'
5+
import VisibilityButton from './VisibilityButton.svelte'
56
67
let isResizing = false
78
let width = 300
@@ -35,7 +36,7 @@
3536
text-align: right;
3637
}
3738
38-
.toolbar button {
39+
.toolbar :global(button) {
3940
margin: 1px;
4041
padding: 5px;
4142
border: none;
@@ -45,11 +46,11 @@
4546
cursor: pointer;
4647
}
4748
48-
.toolbar button:hover {
49+
.toolbar :global(button:hover) {
4950
background-color: rgb(237, 237, 240);
5051
}
5152
52-
.toolbar img {
53+
.toolbar :global(img) {
5354
width: 16px;
5455
height: 16px;
5556
vertical-align: middle;
@@ -85,6 +86,7 @@
8586
<div class="root" style={`width: ${width}px`}>
8687
<div class="resize" on:mousedown={e => (isResizing = true)} />
8788
<div class="toolbar">
89+
<VisibilityButton />
8890
<button
8991
on:click={e => devtools.inspectedWindow.eval('inspect(window.$s)')}
9092
>

‎src/VisibilityButton.svelte

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<script>
2+
import { visibility } from './store.js'
3+
4+
let isOpen = false
5+
</script>
6+
7+
<style>
8+
button {
9+
position: relative;
10+
}
11+
12+
div {
13+
position: fixed;
14+
top: 0;
15+
right: 0;
16+
bottom: 0;
17+
left: 0;
18+
z-index: 1;
19+
cursor: default;
20+
}
21+
22+
ul {
23+
position: absolute;
24+
top: 32px;
25+
right: -20px;
26+
z-index: 2;
27+
padding: 6px 0;
28+
border: 1px solid rgb(224, 224, 226);
29+
border-radius: 2px;
30+
background-color: #ffffff;
31+
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
32+
text-align: left;
33+
line-height: 1;
34+
}
35+
36+
span {
37+
position: absolute;
38+
top: -12px;
39+
right: 20px;
40+
display: block;
41+
overflow: hidden;
42+
width: 23px;
43+
height: 12px;
44+
}
45+
46+
span::before {
47+
position: absolute;
48+
top: 3px;
49+
left: 2px;
50+
display: block;
51+
width: 16px;
52+
height: 16px;
53+
border: 1px solid rgb(224, 224, 226);
54+
background-color: #ffffff;
55+
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
56+
content: '';
57+
transform: rotate(45deg);
58+
}
59+
60+
li {
61+
position: relative;
62+
padding: 4px 10px 4px 28px;
63+
}
64+
65+
li:hover {
66+
background-color: rgb(239, 239, 242);
67+
}
68+
69+
li.checked::before {
70+
position: absolute;
71+
top: 0;
72+
left: 10px;
73+
display: block;
74+
width: 11px;
75+
height: 100%;
76+
background: center / contain no-repeat url('/devtools/check.svg');
77+
content: '';
78+
}
79+
</style>
80+
81+
<button on:click={e => (isOpen = true)}>
82+
<img src="/devtools/visibility.svg" alt="Filter" title="Filter" />
83+
{#if isOpen}
84+
<div on:click|stopPropagation={e => (isOpen = false)} />
85+
<ul>
86+
<span />
87+
<li
88+
class:checked={$visibility.component}
89+
on:click={e => ($visibility.component = !$visibility.component)}
90+
>
91+
Components
92+
</li>
93+
<li
94+
class:checked={$visibility.element}
95+
on:click={e => ($visibility.element = !$visibility.element)}
96+
>
97+
Elements
98+
</li>
99+
<li
100+
class:checked={$visibility.block}
101+
on:click={e => ($visibility.block = !$visibility.block)}
102+
>
103+
Blocks
104+
</li>
105+
<li
106+
class:checked={$visibility.anchor}
107+
on:click={e => ($visibility.anchor = !$visibility.anchor)}
108+
>
109+
Anchors
110+
</li>
111+
<li
112+
class:checked={$visibility.text}
113+
on:click={e => ($visibility.text = !$visibility.text)}
114+
>
115+
Text
116+
</li>
117+
</ul>
118+
{/if}
119+
</button>

‎src/nodes/Node.svelte

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import { hoveredNodeId, selectedNode } from '../store.js'
2+
import { visibility, hoveredNodeId, selectedNode } from '../store.js'
33
import Element from './Element.svelte'
44
import Block from './Block.svelte'
55
import Text from './Text.svelte'
@@ -47,27 +47,33 @@
4747
}
4848
</style>
4949

50-
<li
51-
on:mouseover|stopPropagation={e => ($hoveredNodeId = node.id)}
52-
on:click|stopPropagation={e => ($selectedNode = node)}
53-
>
54-
<svelte:component
55-
this={nodeType}
56-
tagName={node.tagName}
57-
bind:collapsed={node.collapsed}
58-
{...node.detail}
59-
hasChildren={node.children.length != 0}
60-
hover={$hoveredNodeId == node.id}
61-
selected={$selectedNode.id == node.id}
62-
style={`padding-left: ${depth * 12}px`}
50+
{#if $visibility[node.type]}
51+
<li
52+
on:mouseover|stopPropagation={e => ($hoveredNodeId = node.id)}
53+
on:click|stopPropagation={e => ($selectedNode = node)}
6354
>
64-
{#if $selectedNode.id == node.id}
65-
<span style={`left: ${depth * 12 + 2}px`} />
66-
{/if}
67-
<ul>
68-
{#each node.children as node (node.id)}
69-
<svelte:self {node} depth={depth + 1} />
70-
{/each}
71-
</ul>
72-
</svelte:component>
73-
</li>
55+
<svelte:component
56+
this={nodeType}
57+
tagName={node.tagName}
58+
bind:collapsed={node.collapsed}
59+
{...node.detail}
60+
hasChildren={node.children.length != 0}
61+
hover={$hoveredNodeId == node.id}
62+
selected={$selectedNode.id == node.id}
63+
style={`padding-left: ${depth * 12}px`}
64+
>
65+
{#if $selectedNode.id == node.id}
66+
<span style={`left: ${depth * 12 + 2}px`} />
67+
{/if}
68+
<ul>
69+
{#each node.children as node (node.id)}
70+
<svelte:self {node} depth={depth + 1} />
71+
{/each}
72+
</ul>
73+
</svelte:component>
74+
</li>
75+
{:else}
76+
{#each node.children as node (node.id)}
77+
<svelte:self {node} {depth} />
78+
{/each}
79+
{/if}

‎src/store.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import { writable, get } from 'svelte/store'
22

3+
export const visibility = writable({
4+
component: true,
5+
element: true,
6+
block: true,
7+
text: true,
8+
anchor: false
9+
})
310
export const selectedNode = writable({})
411
export const hoveredNodeId = writable(null)
512
export const rootNodes = writable([])

0 commit comments

Comments
 (0)