feat: add inspector button (#182)

Author: ignatiusmb

src/client/index.js

@@ -15,66 +15,81 @@ window.__svelte_devtools_select_element = function (element) {
 if (node) send('inspect', { node: serialize(node) });
 };
 
+const previous = {
+/** @type {HTMLElement | null} */
+target: null,
+style: {
+cursor: '',
+background: '',
+outline: '',
+},
+
+clear() {
+if (this.target) {
+this.target.style.cursor = this.style.cursor;
+this.target.style.background = this.style.background;
+this.target.style.outline = this.style.outline;
+}
+this.target = null;
+},
+};
+
+const inspect = {
+/** @param {MouseEvent} event */
+handle({ target }) {
+const same = previous.target && previous.target === target;
+const html = target instanceof HTMLElement;
+if (same || !html) return;
+
+if (previous.target) previous.clear();
+previous.target = target;
+previous.style = {
+cursor: target.style.cursor,
+background: target.style.background,
+outline: target.style.outline,
+};
+target.style.cursor = 'pointer';
+target.style.background = 'rgba(0, 136, 204, 0.2)';
+target.style.outline = '1px dashed rgb(0, 136, 204)';
+},
+/** @param {MouseEvent} event */
+click(event) {
+event.preventDefault();
+document.removeEventListener('mousemove', inspect.handle, true);
+const node = getNode(/** @type {Node} */ (event.target));
+if (node) send('bridge::ext/inspect', { node: serialize(node) });
+previous.clear();
+},
+};
+
 window.addEventListener('message', ({ data, source }) => {
 // only accept messages from our application or script
 if (source !== window || data?.source !== 'svelte-devtools') return;
 
 if (data.type === 'bridge::ext/select') {
 const node = getNode(data.payload);
-// @ts-expect-error - saved for `inspect()`
+// @ts-expect-error - saved for `devtools.inspect()`
 if (node) window.$n = node.detail;
 } else if (data.type === 'bridge::ext/highlight') {
 const node = getNode(data.payload);
 return highlight(node);
+} else if (data.type === 'bridge::ext/inspect') {
+switch (data.payload) {
+case 'start': {
+document.addEventListener('mousemove', inspect.handle, true);
+document.addEventListener('click', inspect.click, {
+capture: true,
+once: true,
+});
+break;
+}
+default: {
+document.removeEventListener('mousemove', inspect.handle, true);
+document.removeEventListener('click', inspect.click, true);
+previous.clear();
+}
+}
 }
-
-// --- TODO: cleanup/implement below ---
-
-// case 'bridge::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 'bridge::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;
 });
 
 /**

src/routes/+layout.svelte

@@ -8,7 +8,7 @@
 
 import Breadcrumbs from './Breadcrumbs.svelte';
 import ConnectMessage from './ConnectMessage.svelte';
-// import PickerButton from './PickerButton.svelte';
+import Inspector from './Inspector.svelte';
 // import ProfileButton from './ProfileButton.svelte';
 // import Profiler from './Profiler.svelte';
 import SearchBox from './SearchBox.svelte';
@@ -93,10 +93,7 @@
 <!-- TODO: reenable profiler -->
 <!-- <ProfileButton /> -->
 
-<!-- toggle highlighting page elements -->
-<!-- TODO: reenable picker -->
-<!-- <PickerButton /> -->
-
+<Inspector />
 <VisibilitySelection />
 
 <Divider type="vertical" spacing="0.25rem" />

src/routes/PickerButton.svelte renamed to src/routes/Inspector.svelte

@@ -4,27 +4,14 @@
 import { selected } from '$lib/store';
 
 let active = false;
-let unsub = () => {};
 
 function click() {
-if (active) {
-active = false;
-background.send('bridge::ext/inspect', 'stop');
-return;
-}
-
-unsub();
-unsub = selected.subscribe((node) => {
-if (!active) return;
-active = false;
-unsub();
+active = !active;
+background.send('bridge::ext/inspect', active ? 'start' : 'stop');
+}
 
-setTimeout(() => {
-node?.dom?.scrollIntoView({ block: 'center' });
-}, 120);
-});
-active = true;
-background.send('bridge::ext/inspect', 'start');
+$: if (active && $selected) {
+$selected.dom?.scrollIntoView({ block: 'center' });
 }
 </script>