feat: extension design overhaul

README.md

@@ -12,7 +12,7 @@ After installing you will see a new tab in Developer Tools. This tab displays a
 
 The `svelte-devtools` extension requires your Svelte application to be compiled with the `dev` option set to `true`. If you're using [SvelteKit](https://kit.svelte.dev/), this is done automatically, outside of that you will need to set it manually.
 
-This extensions officially supports Svelte 4.0 and above.
+This extension officially supports Svelte 4.0 and above.
 
 ## Development
 

src/app.css

@@ -1,76 +1,99 @@
+:root {
+	--background: rgb(255, 255, 255);
+	--color: rgb(74, 74, 79);
+
+	--t-duration: 240ms;
+}
+
 html {
 	height: 100%;
-	font-size: 12px;
 }
 
 body {
 	display: flex;
 	margin: 0;
 	height: 100%;
-	color: rgb(74, 74, 79);
+	background: var(--background);
+	color: var(--color);
 	font-family: monospace;
 }
-
 body.dark {
-	background-color: rgb(36, 36, 36);
-	color: rgb(177, 177, 179);
+	--color: rgb(177, 177, 179);
+	--background: rgb(36, 36, 36);
 	scrollbar-color: rgb(115, 115, 115) rgb(60, 60, 61);
 }
 
+/* dark mode scrollbar */
 body.dark ::-webkit-scrollbar {
-	width: 14px;
-	height: 14px;
+	width: 0.875rem;
+	height: 0.875rem;
 	background-color: transparent;
-	box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
 }
-
 body.dark ::-webkit-scrollbar-thumb {
 	background-color: rgb(51, 51, 51);
-	box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
+	border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
+/* basic resets */
 ul {
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
 
+/* expandable arrows */
+.expandable::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: calc(var(--left, 3px) - 3px);
+
+	border-top: 0.375rem solid rgba(135, 135, 137, 0.9);
+	border-right: 0.25rem solid transparent;
+	border-left: 0.25rem solid transparent;
+	transition-duration: var(--t-duration);
+	transform: translate3d(0%, calc(50% + 0.25rem + var(--y-pad, 0px)), 0) rotate(-90deg);
+	/* transform: translate3d(-150%, calc(50% + 0.25rem + var(--y-pad, 0px)), 0) rotate(-90deg); */
+}
+.expandable.expanded::before {
+	transform: translate3d(0%, calc(50% + 0.25rem + var(--y-pad, 0px)), 0) rotate(0deg);
+	/* transform: translate3d(-150%, calc(50% + 0.25rem + var(--y-pad, 0px)), 0) rotate(0deg); */
+}
+
+/* tooltip pseudo-elements */
 [data-tooltip]:hover::after,
 [data-tooltip]:hover::before {
 	opacity: 1;
 	pointer-events: auto;
 }
+[data-tooltip]::before {
+	content: '';
+	opacity: 0;
+	pointer-events: none;
 
-[data-tooltip]::after {
 	position: absolute;
-	bottom: -0.167rem /* -2px */;
-	left: 0;
-	z-index: 1;
-	display: block;
-	padding: 0.5rem /* 6px */ 1.333rem /* 16px */;
-	border-radius: 0.417rem /* 5px */;
-	background-color: rgb(48, 64, 81);
-	color: white;
+	bottom: -0.2rem;
+	left: 2.5rem;
+	border-right: 0.5rem solid transparent;
+	border-bottom: 0.5rem solid rgb(48, 64, 81);
+	border-left: 0.5rem solid transparent;
+	transition: opacity 0.2s;
+}
+[data-tooltip]::after {
 	content: attr(data-tooltip);
-	white-space: pre;
 	opacity: 0;
-	transition: opacity 0.2s;
-	transform: translateY(100%);
 	pointer-events: none;
-}
-
-[data-tooltip]::before {
+	z-index: 1;
 	position: absolute;
-	bottom: -0.167rem /* -2px */;
-	left: 2.5rem /* 30px */;
-	display: block;
-	width: 0;
-	height: 0;
-	border-right: 0.417rem /* 5px */ solid transparent;
-	border-bottom: 0.417rem /* 5px */ solid rgb(48, 64, 81);
-	border-left: 0.417rem /* 5px */ solid transparent;
-	content: '';
-	opacity: 0;
+	bottom: 0;
+	left: 0;
+
+	display: flex;
+	padding: 0.25rem 0.375rem;
+	border-radius: 0.25rem;
 	transition: opacity 0.2s;
-	pointer-events: none;
+	transform: translateY(100%);
+
+	background-color: rgb(48, 64, 81);
+	color: white;
 }

src/client/index.js

@@ -1,49 +1,80 @@
-import { highlight, startPicker, stopPicker } from './highlight.js';
+import { highlight } from './highlight.js';
 import { addListener } from './listener.js';
-import { profiler } from './profiler.js';
+// import { profiler } from './profiler.js';
 import { getNode } from './svelte.js';
 
-// @ts-expect-error - possibly find an alternative
+// @ts-ignore - possibly find an alternative
 window.__svelte_devtools_inject_state = function (id, key, value) {
 	const { detail: component } = getNode(id) || {};
 	component && component.$inject_state({ [key]: value });
 };
 
-// @ts-expect-error - possibly find an alternative
+// @ts-ignore - possibly find an alternative
 window.__svelte_devtools_select_element = function (element) {
 	const node = getNode(element);
-	if (node) send('inspect', { node: serializeNode(node) });
+	if (node) send('inspect', { node: serialize(node) });
 };
 
-window.addEventListener('message', ({ data }) => {
-	const node = getNode(data.nodeId);
-
-	switch (data.type) {
-		case 'setSelected':
-			// @ts-expect-error - saved for `inspect()`
-			if (node) window.$s = node.detail;
-			break;
-
-		case 'setHover':
-			highlight(node);
-			break;
-
-		case 'startPicker':
-			startPicker();
-			break;
-
-		case 'stopPicker':
-			stopPicker();
-			break;
-
-		case 'startProfiler':
-			profiler.start();
-			break;
-
-		case 'stopProfiler':
-			profiler.stop();
-			break;
+window.addEventListener('message', ({ data, source }) => {
+	// only accept messages from our application or script
+	if (source !== window || data?.source !== 'svelte-devtools') return;
+
+	if (data.type === 'ext/select') {
+		const node = getNode(data.payload);
+		// @ts-expect-error - saved for `inspect()`
+		if (node) window.$s = node.detail;
+	} else if (data.type === 'ext/highlight') {
+		const node = getNode(data.payload);
+		return highlight(node);
 	}
+
+	// --- TODO: cleanup/implement below ---
+
+	// case 'ext/inspect': {
+	// 	console.log(data.payload, data.payload instanceof HTMLElement);
+	// 	/** @param {MouseEvent} event  */
+	// 	const move = ({ target }) => highlight({ type: 'element', detail: target });
+	// 	if (data.payload instanceof HTMLElement) {
+	// 		const node = getNode(data.payload);
+	// 		if (node) window.postMessage({ type: 'inspect', node: serialize(node) });
+	// 	} else if (data.payload === 'start') {
+	// 		document.addEventListener('mousemove', move, true);
+	// 		document.addEventListener(
+	// 			'click',
+	// 			({ target }) => {
+	// 				document.removeEventListener('mousemove', move, true);
+	// 				const node = getNode(/** @type {Node} */ (target));
+	// 				if (node) window.postMessage({ type: 'inspect', node: serialize(node) });
+	// 			},
+	// 			{ capture: true, once: true },
+	// 		);
+	// 		return;
+	// 	}
+	// 	document.removeEventListener('mousemove', move, true);
+	// 	return highlight(undefined);
+	// }
+
+	// case 'ext/profiler': {
+	// 	return data.payload ? startProfiler() : stopProfiler();
+	// }
+
+	// switch (data.type) {
+
+	// 	case 'startPicker':
+	// 		startPicker();
+	// 		break;
+
+	// 	case 'stopPicker':
+	// 		stopPicker();
+	// 		break;
+
+	// 	case 'startProfiler':
+	// 		profiler.start();
+	// 		break;
+
+	// 	case 'stopProfiler':
+	// 		profiler.stop();
+	// 		break;
 });
 
 /**
@@ -53,9 +84,9 @@ window.addEventListener('message', ({ data }) => {
 function clone(value, seen = new Map()) {
 	switch (typeof value) {
 		case 'function':
-			return { __isFunction: true, source: value.toString(), name: value.name };
+			return { __is: 'function', source: value.toString(), name: value.name };
 		case 'symbol':
-			return { __isSymbol: true, name: value.toString() };
+			return { __is: 'symbol', name: value.toString() };
 		case 'object': {
 			if (value === window || value === null) return null;
 			if (Array.isArray(value)) return value.map((o) => clone(o, seen));
@@ -64,11 +95,9 @@ function clone(value, seen = new Map()) {
 			/** @type {Record<string, any>} */
 			const o = {};
 			seen.set(value, o);
-
 			for (const [key, v] of Object.entries(value)) {
 				o[key] = clone(v, seen);
 			}
-
 			return o;
 		}
 		default:
@@ -77,7 +106,7 @@ function clone(value, seen = new Map()) {
 }
 
 /** @param {SvelteBlockDetail} node  */
-function serializeNode(node) {
+function serialize(node) {
 	const res = /** @type {SvelteBlockDetail} */ ({
 		id: node.id,
 		type: node.type,
@@ -114,7 +143,6 @@ function serializeNode(node) {
 				attributes: attributes.map(({ name: key, value }) => ({ key, value })),
 				listeners: listeners.map((o) => ({ ...o, handler: o.handler.toString() })),
 			};
-
 			break;
 		}
 
@@ -133,6 +161,7 @@ function serializeNode(node) {
 				ctx: cloned.map(([key, value]) => ({ key, value })),
 				source: source.slice(source.indexOf('{'), source.indexOf('}') + 1),
 			};
+			break;
 		}
 	}
 
@@ -144,33 +173,27 @@ function serializeNode(node) {
  * @param {Record<string, any>} [payload]
  */
 function send(type, payload) {
-	window.postMessage({ source: 'svelte-devtools', type, ...payload });
+	window.postMessage({ source: 'svelte-devtools', type, payload });
 }
 
 addListener({
 	add(node, anchor) {
-		send('addNode', {
-			target: node.parent ? node.parent.id : null,
-			anchor: anchor ? anchor.id : null,
-			node: serializeNode(node),
+		send('courier/node:add', {
+			node: serialize(node),
+			target: node.parent?.id ?? null,
+			anchor: anchor?.id ?? null,
 		});
 	},
 
 	remove(node) {
-		send('removeNode', {
-			node: serializeNode(node),
-		});
+		send('courier/node:remove', { node: serialize(node) });
 	},
 
 	update(node) {
-		send('updateNode', {
-			node: serializeNode(node),
-		});
+		send('courier/node:update', { node: serialize(node) });
 	},
 
-	profile(frame) {
-		send('updateProfile', {
-			frame,
-		});
+	profile(/** frame */) {
+		// send('courier/profile:update', { frame });
 	},
 });

src/client/svelte.js

@@ -90,7 +90,7 @@ document.addEventListener('SvelteRegisterBlock', ({ detail }) => {
 		block.m = (target, anchor) => {
 			const parent = current_block;
 
-			// @ts-expect-error - don't need 'block' | 'source' | 'ctx'
+			// @ts-expect-error - only the necessities
 			const node = /** @type {SvelteBlockDetail} */ ({
 				id: current_node_id,
 				type: 'block',
@@ -152,7 +152,7 @@ document.addEventListener('SvelteRegisterBlock', ({ detail }) => {
 				node.parentBlock = group;
 				node.type = 'iteration';
 
-				// @ts-expect-error - try to fix
+				// @ts-expect-error - overloaded nodes
 				nodes.add({ node, target: group, anchor });
 			} else {
 				nodes.add({ node, target, anchor });

src/entry.ts

@@ -1,5 +1,5 @@
 import './app.css';
-import App from './routes/App.svelte';
+import App from './routes/+layout.svelte';
 
 if (chrome.devtools.panels.themeName === 'dark') {
 	document.body.classList.add('dark');