(resizing = true)} />
+
+
+
+
+
diff --git a/src/lib/components/Toolbar.svelte b/src/lib/components/Toolbar.svelte
new file mode 100644
index 0000000..54e4e6f
--- /dev/null
+++ b/src/lib/components/Toolbar.svelte
@@ -0,0 +1,18 @@
+
+
+
diff --git a/src/lib/nodes/Block.svelte b/src/lib/nodes/Block.svelte
new file mode 100644
index 0000000..85310f0
--- /dev/null
+++ b/src/lib/nodes/Block.svelte
@@ -0,0 +1,38 @@
+
+
+
+
(expanded = !expanded)}>
+ {#if source}
+ {source}
+ {:else}
+
+ {/if}
+ {#if !expanded}
+ (expanded = true)} />
+
+ {/if}
+
+{#if expanded}
+
+
+
+
+
+{/if}
+
+
diff --git a/src/lib/nodes/Element.svelte b/src/lib/nodes/Element.svelte
new file mode 100644
index 0000000..3c4c03e
--- /dev/null
+++ b/src/lib/nodes/Element.svelte
@@ -0,0 +1,98 @@
+
+
+{#if empty}
+
+ <
+
+
+
+
+ />
+
+{:else}
+
(expanded = !expanded)}>
+ <
+
+
+
+
+ >
+ {#if !expanded}
+ (expanded = true)} />
+
+ </
+
+
+
+ >
+ {/if}
+
+ {#if expanded}
+
+
+ </
+
+
+
+ >
+
+ {/if}
+{/if}
+
+
diff --git a/src/lib/nodes/ElementAttributes.svelte b/src/lib/nodes/ElementAttributes.svelte
new file mode 100644
index 0000000..c76a41e
--- /dev/null
+++ b/src/lib/nodes/ElementAttributes.svelte
@@ -0,0 +1,64 @@
+
+
+{#each attributes as { key, value, bounded, flash } (key)}
+ {@const prefix = bounded ? 'bind:' : ''}
+
+
+
+
+
+
+ =
+
+
+
+
+{/each}
+
+{#each listeners as { event, handler, modifiers }}
+ {@const suffix = modifiers?.length ? `|${modifiers.join('|')}` : ''}
+
+
+
+
+
+{/each}
+
+
diff --git a/src/lib/nodes/Ellipsis.svelte b/src/lib/nodes/Ellipsis.svelte
new file mode 100644
index 0000000..9edc0e8
--- /dev/null
+++ b/src/lib/nodes/Ellipsis.svelte
@@ -0,0 +1,17 @@
+
+
+
diff --git a/src/lib/nodes/Iteration.svelte b/src/lib/nodes/Iteration.svelte
new file mode 100644
index 0000000..d838ec8
--- /dev/null
+++ b/src/lib/nodes/Iteration.svelte
@@ -0,0 +1,17 @@
+
+
+
+
(expanded = !expanded)}>
+ ↪
+ {#if !expanded}
+ (expanded = true)} />
+ {/if}
+
+
+{#if expanded}
+
+{/if}
diff --git a/src/lib/nodes/Node.svelte b/src/lib/nodes/Node.svelte
new file mode 100644
index 0000000..3133ad4
--- /dev/null
+++ b/src/lib/nodes/Node.svelte
@@ -0,0 +1,161 @@
+
+
+{#if $visibility[node.type]}
+
+
+
(flash = false)}
+ on:click|stopPropagation={() => selected.set(node)}
+ on:mousemove|stopPropagation={() => {
+ if ($hovered?.id === node.id) return;
+ background.send('ext/highlight', node.id);
+ hovered.set(node);
+ }}
+ >
+ {#if node.type === 'component' || node.type === 'element'}
+
+
+ {#each node.children as child (child.id)}
+
+ {/each}
+
+
+ {:else if node.type === 'block'}
+
+
+ {#each node.children as child (child.id)}
+
+ {/each}
+
+
+ {:else if node.type === 'iteration'}
+
+
+ {#each node.children as child (child.id)}
+
+ {/each}
+
+
+ {:else if node.type === 'slot'}
+
+
+ {#each node.children as child (child.id)}
+
+ {/each}
+
+
+ {:else if node.type === 'text'}
+
+
+
+ {:else if node.type === 'anchor'}
+ #anchor
+ {/if}
+
+{:else}
+ {#each node.children as child (child.id)}
+
+ {/each}
+{/if}
+
+
diff --git a/src/lib/nodes/Slot.svelte b/src/lib/nodes/Slot.svelte
new file mode 100644
index 0000000..ff8073e
--- /dev/null
+++ b/src/lib/nodes/Slot.svelte
@@ -0,0 +1,24 @@
+
+
+
+
(expanded = !expanded)}>
+ `} color="#c586c0" />
+
+ {#if !expanded}
+ (expanded = true)} />
+ `} color="#c586c0" />
+ {/if}
+
+{#if expanded}
+
+
+
+ `} color="#c586c0" />
+
+{/if}
diff --git a/src/lib/panel/Editable.svelte b/src/lib/panel/Editable.svelte
new file mode 100644
index 0000000..8ae7566
--- /dev/null
+++ b/src/lib/panel/Editable.svelte
@@ -0,0 +1,69 @@
+
+
+{#if editing}
+
{
+ editing = false;
+ // @ts-expect-error - target and value exists
+ const updated = target.value;
+ value = JSON.parse(updated);
+ dispatch('change', updated);
+ }}
+ on:keydown={({ key, target }) => {
+ if (key !== 'Enter') return;
+ editing = false;
+ // @ts-expect-error - target and value exists
+ const updated = target.value;
+ value = JSON.parse(updated);
+ dispatch('change', updated);
+ }}
+ />
+{:else}
+
+
+
(editing = !readonly)}>
+ {JSON.stringify(value)}
+
+{/if}
+
+
diff --git a/src/lib/panel/Expandable.svelte b/src/lib/panel/Expandable.svelte
new file mode 100644
index 0000000..c3a3d71
--- /dev/null
+++ b/src/lib/panel/Expandable.svelte
@@ -0,0 +1,141 @@
+
+
+
+
+
(expanded = !expanded)}
+>
+ {key}:
+
+
+ {#if type === 'string'}
+
+ {:else if value == null || value !== value}
+
+ {:else if type === 'number' || type === 'boolean'}
+
+ {:else if Array.isArray(value)}
+ Array [{value.length || ''}]
+
+ {#if value.length && expanded}
+
+ {#each value as v, key}
+ dispatch('change', stringify(value, key, e.detail))}
+ />
+ {/each}
+
+ {/if}
+ {:else if type === 'object'}
+ {#if value.__is === 'function'}
+ function {value.name || ''}()
+ {#if expanded}{value.source}{/if}
+ {:else if value.__is === 'symbol'}
+ {value.name || 'Symbol()'}
+ {:else if Object.keys(value).length}
+ Object {…}
+ {#if expanded}
+
+ {#each Object.entries(value) as [key, v] (key)}
+ dispatch('change', stringify(value, key, e.detail))}
+ />
+ {/each}
+
+ {/if}
+ {:else}
+ Object { }
+ {/if}
+ {/if}
+
+
+
diff --git a/src/lib/panel/PropertyList.svelte b/src/lib/panel/PropertyList.svelte
new file mode 100644
index 0000000..b4618d1
--- /dev/null
+++ b/src/lib/panel/PropertyList.svelte
@@ -0,0 +1,45 @@
+
+
+{#if entries.length}
+
+ {#each entries as { key, value } (key)}
+ change(key, e.detail)}
+ />
+ {/each}
+
+{:else}
+
None
+{/if}
+
+
diff --git a/src/lib/runtime.ts b/src/lib/runtime.ts
new file mode 100644
index 0000000..993ed27
--- /dev/null
+++ b/src/lib/runtime.ts
@@ -0,0 +1,115 @@
+import { type DebugNode, hovered, root, selected } from './store';
+
+const tabId = chrome.devtools.inspectedWindow.tabId;
+const port = chrome.runtime.connect({ name: `${tabId}` });
+
+port.postMessage({ source: 'svelte-devtools', tabId, type: 'ext/init' });
+
+export const background = {
+ send(type: `${'ext' | 'page'}/${string}`, payload?: any) {
+ port.postMessage({ source: 'svelte-devtools', tabId, type, payload });
+ },
+};
+
+const nodes = new Map
();
+
+function resolveEventBubble(node: any) {
+ if (!node.detail || !node.detail.listeners) return;
+
+ for (const listener of node.detail.listeners) {
+ if (!listener.handler.includes('bubble($$self, event)')) continue;
+
+ listener.handler = () => {
+ let target = node;
+ while ((target = target.parent)) if (target.type === 'component') break;
+
+ const listeners = target.detail.listeners;
+ if (!listeners) return null;
+
+ const parentListener = listeners.find((o: any) => o.event === listener.event);
+ if (!parentListener) return null;
+
+ const handler = parentListener.handler;
+ if (!handler) return null;
+
+ return `// From parent\n${handler}`;
+ };
+ }
+}
+
+port.onMessage.addListener(({ type, payload }) => {
+ switch (type) {
+ case 'ext/clear': {
+ selected.set(undefined);
+ hovered.set(undefined);
+ return root.set([]);
+ }
+
+ case 'ext/inspect': {
+ const current = nodes.get(payload.node.id);
+ return selected.set(current);
+ }
+
+ case 'courier/node:add': {
+ const { node, target, anchor } = payload as {
+ node: DebugNode;
+ target: null | number;
+ anchor: null | number;
+ };
+
+ node.children = [];
+ node.expanded = false;
+ node.invalidate = () => {};
+ resolveEventBubble(node);
+
+ const parent = nodes.get(target);
+ nodes.set(node.id, node);
+ if (!parent) return root.update((n) => [...n, node]);
+
+ const index = parent.children.findIndex((n) => n.id === anchor);
+ if (index === -1) parent.children.push(node);
+ else parent.children.splice(index, 0, node);
+
+ return (node.parent = parent).invalidate();
+ }
+
+ case 'courier/node:remove': {
+ const node = payload.node as SvelteBlockDetail;
+ const current = nodes.get(node.id);
+ if (current) nodes.delete(current.id);
+ if (!current?.parent) return;
+
+ const index = current.parent.children.findIndex((o) => o.id === current.id);
+ current.parent.children.splice(index, 1);
+ return current.parent.invalidate();
+ }
+
+ case 'courier/node:update': {
+ const node = payload.node as SvelteBlockDetail;
+ const current = nodes.get(node.id);
+ if (!current) return;
+ Object.assign(current, payload.node);
+ resolveEventBubble(current);
+
+ selected.update((o) => o);
+ return current.invalidate();
+ }
+
+ // case 'courier/profile:update': {
+ // resolveFrame(frame);
+ // profileFrame.set(frame);
+ // break;
+
+ // function resolveFrame(frame) {
+ // frame.children.forEach(resolveFrame);
+
+ // if (!frame.node) return;
+
+ // frame.node = nodes.get(frame.node) || {
+ // type: 'Unknown',
+ // tagName: 'Unknown',
+ // };
+ // }
+ // }
+ }
+});
diff --git a/src/lib/store.ts b/src/lib/store.ts
new file mode 100644
index 0000000..3f0e6e9
--- /dev/null
+++ b/src/lib/store.ts
@@ -0,0 +1,56 @@
+import { writable } from 'svelte/store';
+
+type Overwrite = Omit & B;
+
+export type DebugNode = Overwrite<
+ SvelteBlockDetail,
+ {
+ invalidate(): void;
+ expanded: boolean;
+ detail: {
+ attributes?: Array<{
+ key: string;
+ value: string;
+ bounded?: boolean;
+ flash?: boolean;
+ }>;
+ listeners?: Array<{
+ event: any;
+ handler: any;
+ modifiers: any;
+ }>;
+ ctx: any;
+ source: string;
+ nodeValue: string;
+ };
+
+ tagName: string;
+ parent: DebugNode;
+ children: DebugNode[];
+ dom?: HTMLLIElement;
+ }
+>;
+export const selected = writable(undefined);
+export const hovered = writable(undefined);
+export const root = writable([]);
+export const visibility = writable<{ [key: string]: boolean }>({
+ component: true,
+ element: true,
+ block: true,
+ iteration: true,
+ slot: true,
+ text: true,
+ anchor: false,
+});
+
+export const query = writable('');
+
+export type Profiler = {
+ type: 'mount' | 'patch' | 'detach';
+ node: DebugNode;
+ duration: number;
+ start: number;
+ end: number;
+ children: Profiler[];
+};
+export const profileFrame = writable(undefined);
diff --git a/src/nodes/Anchor.svelte b/src/nodes/Anchor.svelte
deleted file mode 100644
index 462f652..0000000
--- a/src/nodes/Anchor.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-#anchor
diff --git a/src/nodes/Block.svelte b/src/nodes/Block.svelte
deleted file mode 100644
index b9b7381..0000000
--- a/src/nodes/Block.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-
-
-
-
- (collapsed = !collapsed)}>
-
- {#if source}
- {source}
- {:else}
- {#
-
- }
- {/if}
- {#if collapsed}
- …{/
-
- }
- {/if}
-
-{#if !collapsed}
-
-
- {/
-
- }
-
-{/if}
diff --git a/src/nodes/Collapse.svelte b/src/nodes/Collapse.svelte
deleted file mode 100644
index da360e5..0000000
--- a/src/nodes/Collapse.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-
-
-
-
- (collapsed = !collapsed)} />
diff --git a/src/nodes/Element.svelte b/src/nodes/Element.svelte
deleted file mode 100644
index 5a53bf3..0000000
--- a/src/nodes/Element.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-
-
-
-
-{#if hasChildren}
- (collapsed = !collapsed)}>
-
- <
-
-
-
-
- >
- {#if collapsed}
- …</
-
-
-
- >
- {/if}
-
- {#if !collapsed}
-
-
- </
-
-
-
- >
-
- {/if}
-{:else}
-
- <
-
-
-
-
- />
-
-{/if}
diff --git a/src/nodes/ElementAttributes.svelte b/src/nodes/ElementAttributes.svelte
deleted file mode 100644
index 45688d5..0000000
--- a/src/nodes/ElementAttributes.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-
-
-
-
-{#each attributes as { key, value, isBound, flash } (key)}
-
-
-
- {#if isBound}bind:{/if}
-
-
- =
-
-
-
-
-{/each}
-
-{#each listeners as { event, handler, modifiers }}
-
-
- on:
-
- {#if modifiers && modifiers.length}|{modifiers.join('|')}{/if}
-
-{/each}
diff --git a/src/nodes/Iteration.svelte b/src/nodes/Iteration.svelte
deleted file mode 100644
index 07a84f9..0000000
--- a/src/nodes/Iteration.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
-↪
-
diff --git a/src/nodes/Node.svelte b/src/nodes/Node.svelte
deleted file mode 100644
index 8f9287f..0000000
--- a/src/nodes/Node.svelte
+++ /dev/null
@@ -1,128 +0,0 @@
-
-
-
-
-{#if $visibility[node.type]}
- (flash = false)}
- on:mouseover|stopPropagation={e => ($hoveredNodeId = node.id)}
- on:click|stopPropagation={e => ($selectedNode = node)}>
-
- {#if $selectedNode.id == node.id}
-
- {/if}
-
- {#each node.children as child (child.id)}
-
- {/each}
-
-
-
-{:else}
- {#each node.children as node (node.id)}
-
- {/each}
-{/if}
diff --git a/src/nodes/SearchTerm.svelte b/src/nodes/SearchTerm.svelte
deleted file mode 100644
index dd76974..0000000
--- a/src/nodes/SearchTerm.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-{#if i == -1 || $searchValue.length < 2}
- {text}
-{:else}{pre}{highlight}{post}{/if}
diff --git a/src/nodes/Slot.svelte b/src/nodes/Slot.svelte
deleted file mode 100644
index ab1b3dd..0000000
--- a/src/nodes/Slot.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-
-
-
-
- (collapsed = !collapsed)}>
-
- <
-
- >
- {#if collapsed}
- …</
-
- >
- {/if}
-
-{#if !collapsed}
-
-
- </
-
- >
-
-{/if}
diff --git a/src/nodes/Text.svelte b/src/nodes/Text.svelte
deleted file mode 100644
index 7a8674f..0000000
--- a/src/nodes/Text.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
-
-
diff --git a/src/panel/CollapsableValue.svelte b/src/panel/CollapsableValue.svelte
deleted file mode 100644
index d99d655..0000000
--- a/src/panel/CollapsableValue.svelte
+++ /dev/null
@@ -1,156 +0,0 @@
-
-
-
-
- (collapsed = !collapsed)}>
- {#if type == 'string'}
- {key}:
-
-
- {:else if value == null || value == undefined || value != value}
- {key}:
-
-
- {:else if type == 'number' || type == 'boolean'}
- {key}:
-
-
- {:else if Array.isArray(value)}
- {#if value.length}
-
- {key}:
- Array [{value.length}]
- {#if !collapsed}
-
- {#each value as v, key}
- dispatch('change', stringify(value, key, e.detail))} />
- {/each}
-
- {/if}
- {:else}{key}: Array []{/if}
- {:else if type == 'object'}
- {#if value.__isFunction}
-
- {key}:
- function {value.name || ''} ()
- {#if !collapsed}
- {value.source}
- {/if}
- {:else if value.__isSymbol}
- {key}:
- {value.name || 'Symbol()'}
- {:else if Object.keys(value).length}
-
- {key}:
- Object {…}
- {#if !collapsed}
-
- {#each Object.entries(value) as [key, v] (key)}
- dispatch('change', stringify(value, key, e.detail))} />
- {/each}
-
- {/if}
- {:else}
- {key}:
- Object { }
- {/if}
- {/if}
- {#if errorMessage}!{/if}
-
diff --git a/src/panel/ComponentView.svelte b/src/panel/ComponentView.svelte
deleted file mode 100644
index efe5957..0000000
--- a/src/panel/ComponentView.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-
-
-
-
-
-
-
-
-
-
- {#if $selectedNode.type == 'component'}
-
-
- {:else if $selectedNode.type == 'block' || $selectedNode.type == 'iteration'}
-
- {:else if $selectedNode.type == 'element'}
-
- {/if}
-
-
(isResizing = true)} />
-
-
diff --git a/src/panel/PropertyList.svelte b/src/panel/PropertyList.svelte
deleted file mode 100644
index 0d33519..0000000
--- a/src/panel/PropertyList.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-
-
-
-
-
{header}
-
-{#if entries.length}
-
- {#each entries as { key, value } (key)}
- change(key, e.detail)} />
- {/each}
-
-{:else}
-
None
-{/if}
diff --git a/src/profiler/Frame.svelte b/src/profiler/Frame.svelte
deleted file mode 100644
index e6dca49..0000000
--- a/src/profiler/Frame.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
-
-{#if children}
-
- {#each children as child, i}
- -
-
-
-
- {/each}
-
-{/if}
diff --git a/src/profiler/Operation.svelte b/src/profiler/Operation.svelte
deleted file mode 100644
index 24b30c7..0000000
--- a/src/profiler/Operation.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
-
-
dispatch('click', frame)}>
-
- {frame.node.tagName}
-
diff --git a/src/profiler/Profiler.svelte b/src/profiler/Profiler.svelte
deleted file mode 100644
index 07af9e2..0000000
--- a/src/profiler/Profiler.svelte
+++ /dev/null
@@ -1,102 +0,0 @@
-
-
-
-
-
- {#if top}
-
- {:else}
-
- {/if}
-
-
-
- {#if children.length}
-
- {:else}
-
Nothing to display. Perform an action or refresh the page.
- {/if}
-
-{#if selected}
-
-
-
- Tag name
- {selected.node.tagName} (#{selected.node.id})
-
-
Start {round(selected.start)}ms
-
Operation {selected.type}
-
Block type {selected.node.type}
-
End {round(selected.end)}ms
-
- Duration
- {round(selected.children.reduce((acc, o) => acc - o.duration, selected.duration))}ms
- of {round(selected.duration)}ms
-
-
-{/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..02b5166
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,178 @@
+
+
+
{
+ if (target !== document.body || !$selected) return;
+
+ if (key === 'Enter') {
+ $selected.expanded = !$selected.expanded;
+ $selected.invalidate();
+ } else if (key === 'ArrowRight') {
+ if (!$selected) $selected = $root[0];
+ $selected.expanded = true;
+ $selected.invalidate();
+ } else if (key === 'ArrowLeft') {
+ $selected.expanded = false;
+ $selected.invalidate();
+ } else if (key === 'ArrowUp') {
+ let nodes = ($selected.parent?.children || $root).filter((n) => $visibility[n.type]);
+ let sibling = nodes[nodes.findIndex((o) => o.id === $selected?.id) - 1];
+ while (sibling?.expanded) {
+ nodes = sibling.children.filter((n) => $visibility[n.type]);
+ sibling = nodes[nodes.length - 1];
+ }
+ $selected = sibling ?? $selected.parent ?? $selected;
+ } else if (key === 'ArrowDown') {
+ const children = $selected.children.filter((n) => $visibility[n.type]);
+
+ if (!$selected.expanded || children.length === 0) {
+ let next = $selected;
+ let current = $selected;
+ do {
+ const nodes = current.parent ? current.parent.children : $root;
+ const siblings = nodes.filter((n) => $visibility[n.type]);
+ const index = siblings.findIndex((o) => o.id === current.id);
+ next = siblings[index + 1];
+ current = current.parent;
+ } while (!next && current);
+
+ $selected = next ?? $selected;
+ } else {
+ $selected = children[0];
+ }
+ }
+ }}
+/>
+
+{#if $root.length}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#each $root as node (node.id)}
+
+ {/each}
+
+
+
+
+
+
+
+ {@const events = $selected?.detail.listeners?.map((l) => {
+ const suffix = l.modifiers?.length ? `|${l.modifiers.join('|')}` : '';
+ const value = { __is: 'function', source: l.handler };
+ return { key: l.event + suffix, value };
+ })}
+
+ {#if $selected?.type === 'component'}
+ Props
+
+
+
+
+ Events
+
+
+
+
+ State
+
+ {:else if $selected?.type === 'block' || $selected?.type === 'iteration'}
+ State
+
+ {:else if $selected?.type === 'element'}
+ Attributes
+
+
+
+
+ Events
+
+ {/if}
+
+{:else}
+
+{/if}
+
+
diff --git a/src/routes/Breadcrumbs.svelte b/src/routes/Breadcrumbs.svelte
new file mode 100644
index 0000000..6087997
--- /dev/null
+++ b/src/routes/Breadcrumbs.svelte
@@ -0,0 +1,63 @@
+
+
+{#if breadcrumbs.length}
+
+ {#each breadcrumbs as node}
+ {#if $visibility[node.type]}
+
+ {/if}
+ {/each}
+
+{/if}
+
+
diff --git a/src/routes/ConnectMessage.svelte b/src/routes/ConnectMessage.svelte
new file mode 100644
index 0000000..753cdb8
--- /dev/null
+++ b/src/routes/ConnectMessage.svelte
@@ -0,0 +1,62 @@
+
+
+
+ Svelte DevTools
+
+ No Svelte app detected
+
+
+
+
+
+
+
+
diff --git a/src/routes/PickerButton.svelte b/src/routes/PickerButton.svelte
new file mode 100644
index 0000000..e792d86
--- /dev/null
+++ b/src/routes/PickerButton.svelte
@@ -0,0 +1,40 @@
+
+
+
diff --git a/src/routes/ProfileButton.svelte b/src/routes/ProfileButton.svelte
new file mode 100644
index 0000000..2ef7830
--- /dev/null
+++ b/src/routes/ProfileButton.svelte
@@ -0,0 +1,18 @@
+
+
+
diff --git a/src/routes/Profiler.svelte b/src/routes/Profiler.svelte
new file mode 100644
index 0000000..7ab8ef9
--- /dev/null
+++ b/src/routes/Profiler.svelte
@@ -0,0 +1,124 @@
+
+
+
+ {#if top}
+
+ {:else}
+
+ {/if}
+
+
+
+ {#if children.length}
+
{
+ if (selected === detail) top = detail;
+ else selected = detail;
+ }}
+ />
+ {:else}
+ Nothing to display. Perform an action or refresh the page.
+ {/if}
+
+
+ Tag name
+ {selected.node.tagName}
+ (#{selected.node.id})
+
+
+ Start
+ {round(selected.start)}ms
+
+
+ Operation
+ {selected.type}
+
+
+ Block type
+ {selected.node.type}
+
+
+ End
+ {round(selected.end)}ms
+
+
+ Duration
+
+ {round(selected.children.reduce((acc, o) => acc - o.duration, selected.duration))}ms
+
+ of
+ {round(selected.duration)}ms
+
+
+ {#each children as frame}
+ -
+
+
+ dispatch('click', frame)} />
+
+ {/each}
+
+{/if}
+
+
diff --git a/src/routes/SearchBox.svelte b/src/routes/SearchBox.svelte
new file mode 100644
index 0000000..71d6a4d
--- /dev/null
+++ b/src/routes/SearchBox.svelte
@@ -0,0 +1,98 @@
+
+
+
+
+
diff --git a/src/routes/VisibilitySelection.svelte b/src/routes/VisibilitySelection.svelte
new file mode 100644
index 0000000..f68ffff
--- /dev/null
+++ b/src/routes/VisibilitySelection.svelte
@@ -0,0 +1,76 @@
+
+
+
+
+
+ {#if opened}
+
+ {/if}
+
+
+
diff --git a/src/store.js b/src/store.js
deleted file mode 100644
index f36f840..0000000
--- a/src/store.js
+++ /dev/null
@@ -1,299 +0,0 @@
-import { writable, get, derived } from 'svelte/store'
-
-export const visibility = writable({
- component: true,
- element: true,
- block: true,
- iteration: true,
- slot: true,
- text: true,
- anchor: false,
-})
-export const selectedNode = writable({})
-export const hoveredNodeId = writable(null)
-export const rootNodes = writable([])
-export const searchValue = writable('')
-export const profilerEnabled = writable(false)
-export const profileFrame = writable({})
-
-// #if process.env.TARGET === 'firefox'
-// Zoom workaround
-let fontSize = 11
-window.addEventListener('keyup', e => {
- if (!e.ctrlKey) return
-
- switch (e.key) {
- case '=':
- fontSize = Math.min(fontSize + 1.1, 22)
- break
- case '-':
- fontSize = Math.max(fontSize - 1.1, 5.5)
- break
- case '0':
- fontSize = 11
- break
- }
-
- document.documentElement.style.fontSize = fontSize + 'px'
-})
-// #endif
-
-function interactableNodes(list) {
- const _visibility = get(visibility)
- return list.filter(
- o => _visibility[o.type] && o.type !== 'text' && o.type !== 'anchor'
- )
-}
-
-window.addEventListener('keydown', e => {
- if (e.target !== document.body) return
-
- selectedNode.update(node => {
- if (node.invalidate === undefined) return node
- switch (e.key) {
- case 'Enter':
- node.collapsed = !node.collapsed
- node.invalidate()
- return node
-
- case 'ArrowRight':
- node.collapsed = false
- node.invalidate()
- return node
-
- case 'ArrowDown': {
- const children = interactableNodes(node.children)
-
- if (node.collapsed || children.length === 0) {
- var next = node
- var current = node
- do {
- const siblings = interactableNodes(
- current.parent === undefined
- ? get(rootNodes)
- : current.parent.children
- )
- const index = siblings.findIndex(o => o.id === current.id)
- next = siblings[index + 1]
-
- current = current.parent
- } while (next === undefined && current !== undefined)
-
- return next ?? node
- } else {
- return children[0]
- }
- }
-
- case 'ArrowLeft':
- node.collapsed = true
- node.invalidate()
- return node
-
- case 'ArrowUp': {
- const siblings = interactableNodes(
- node.parent === undefined ? get(rootNodes) : node.parent.children
- )
- const index = siblings.findIndex(o => o.id === node.id)
- return index > 0 ? siblings[index - 1] : node.parent ?? node
- }
-
- default:
- return node
- }
- })
-})
-
-const nodeMap = new Map()
-
-const port = chrome.runtime.connect()
-port.postMessage({
- type: 'init',
- tabId: chrome.devtools.inspectedWindow.tabId,
-})
-
-export function reload() {
- port.postMessage({
- type: 'reload',
- tabId: chrome.devtools.inspectedWindow.tabId,
- })
-}
-
-export function startPicker() {
- port.postMessage({
- type: 'startPicker',
- tabId: chrome.devtools.inspectedWindow.tabId,
- })
-}
-
-export function stopPicker() {
- port.postMessage({
- type: 'stopPicker',
- tabId: chrome.devtools.inspectedWindow.tabId,
- })
-}
-
-selectedNode.subscribe(node => {
- port.postMessage({
- type: 'setSelected',
- tabId: chrome.devtools.inspectedWindow.tabId,
- nodeId: node.id,
- })
-
- let invalid = null
- while (node.parent) {
- node = node.parent
- if (node.collapsed) {
- invalid = node
- node.collapsed = false
- }
- }
-
- if (invalid) invalid.invalidate()
-})
-
-hoveredNodeId.subscribe(nodeId =>
- port.postMessage({
- type: 'setHover',
- tabId: chrome.devtools.inspectedWindow.tabId,
- nodeId,
- })
-)
-
-profilerEnabled.subscribe(o =>
- port.postMessage({
- type: o ? 'startProfiler' : 'stopProfiler',
- tabId: chrome.devtools.inspectedWindow.tabId,
- })
-)
-
-function noop() {}
-
-function insertNode(node, target, anchorId) {
- node.parent = target
-
- let index = -1
- if (anchorId) index = target.children.findIndex(o => o.id == anchorId)
-
- if (index != -1) {
- target.children.splice(index, 0, node)
- } else {
- target.children.push(node)
- }
-
- target.invalidate()
-}
-
-function resolveFrame(frame) {
- frame.children.forEach(resolveFrame)
-
- if (!frame.node) return
-
- frame.node = nodeMap.get(frame.node) || {
- tagName: 'Unknown',
- type: 'Unknown',
- }
-}
-
-function resolveEventBubble(node) {
- if (!node.detail || !node.detail.listeners) return
-
- for (const listener of node.detail.listeners) {
- if (!listener.handler.includes('bubble($$self, event)')) continue
-
- listener.handler = () => {
- let target = node
- while ((target = target.parent)) if (target.type == 'component') break
-
- const listeners = target.detail.listeners
- if (!listeners) return null
-
- const parentListener = listeners.find(o => o.event == listener.event)
- if (!parentListener) return null
-
- const handler = parentListener.handler
- if (!handler) return null
-
- return (
- '// From parent\n' +
- (typeof handler == 'function' ? handler() : handler)
- )
- }
- }
-}
-
-port.onMessage.addListener(msg => {
- switch (msg.type) {
- case 'clear': {
- selectedNode.set({})
- hoveredNodeId.set(null)
- rootNodes.set([])
-
- break
- }
-
- case 'addNode': {
- const node = msg.node
- node.children = []
- node.collapsed = true
- node.invalidate = noop
- resolveEventBubble(node)
-
- const targetNode = nodeMap.get(msg.target)
- nodeMap.set(node.id, node)
-
- if (targetNode) {
- insertNode(node, targetNode, msg.anchor)
- return
- }
-
- if (node._timeout) return
-
- node._timeout = setTimeout(() => {
- delete node._timeout
- const targetNode = nodeMap.get(msg.target)
- if (targetNode) insertNode(node, targetNode, msg.anchor)
- else rootNodes.update(o => (o.push(node), o))
- }, 100)
-
- break
- }
-
- case 'removeNode': {
- const node = nodeMap.get(msg.node.id)
- const index = node.parent.children.findIndex(o => o.id == node.id)
- node.parent.children.splice(index, 1)
- nodeMap.delete(node.id)
-
- node.parent.invalidate()
-
- break
- }
-
- case 'updateNode': {
- const node = nodeMap.get(msg.node.id)
- Object.assign(node, msg.node)
- resolveEventBubble(node)
-
- const selected = get(selectedNode)
- if (selected && selected.id == msg.node.id) selectedNode.update(o => o)
-
- node.invalidate()
-
- break
- }
-
- case 'inspect': {
- let node = nodeMap.get(msg.node.id)
- selectedNode.set(node)
-
- break
- }
-
- case 'updateProfile': {
- resolveFrame(msg.frame)
- profileFrame.set(msg.frame)
- break
- }
- }
-})
diff --git a/src/toolbar/Button.svelte b/src/toolbar/Button.svelte
deleted file mode 100644
index f59f91f..0000000
--- a/src/toolbar/Button.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-
-
-
-
-
diff --git a/src/toolbar/PickerButton.svelte b/src/toolbar/PickerButton.svelte
deleted file mode 100644
index dcfd1d6..0000000
--- a/src/toolbar/PickerButton.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-
-
-
diff --git a/src/toolbar/ProfileButton.svelte b/src/toolbar/ProfileButton.svelte
deleted file mode 100644
index 63b4d04..0000000
--- a/src/toolbar/ProfileButton.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
diff --git a/src/toolbar/Search.svelte b/src/toolbar/Search.svelte
deleted file mode 100644
index ba4bb0a..0000000
--- a/src/toolbar/Search.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-
-
-
-
-
diff --git a/src/toolbar/Toolbar.svelte b/src/toolbar/Toolbar.svelte
deleted file mode 100644
index bf73101..0000000
--- a/src/toolbar/Toolbar.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
diff --git a/src/toolbar/VisibilityButton.svelte b/src/toolbar/VisibilityButton.svelte
deleted file mode 100644
index 99ebf02..0000000
--- a/src/toolbar/VisibilityButton.svelte
+++ /dev/null
@@ -1,139 +0,0 @@
-
-
-
-
-