show the ::view-transition pseudo elements that the browser inserts

components/VtBotDebug.astro

@@ -161,7 +161,7 @@ const { overlay = false, showProperties = false, production = false } = Astro.pr
 		TRANSITION_AFTER_SWAP,
 		TRANSITION_PAGE_LOAD,
 	} from 'astro:transitions/client';
-	import { captureViewTransitionNamesOfCurrentDocument, deriveCSSSelector, elementsWithStyleProperty } from './css';
+	import { deriveCSSSelector, elementsWithStyleProperty } from './css';
 
 	const enabled = () => !!document.querySelector('meta[name="vtbot-debug"]');
 	const PREFIX = '[vtbot-debug]';
@@ -207,7 +207,7 @@ const { overlay = false, showProperties = false, production = false } = Astro.pr
 		const v = internal.get(html) ?? `${++stringCounter}`;
 		mem.set(obj, a);
 		internal.set(html, v);
-		return `a${a}: v${v} (${(html.length/1024).toFixed(2)} kB)`;
+		return `a${a}: v${v} (${(html.length / 1024).toFixed(2)} kB)`;
 	};
 
 	const logWithStyle = (s: string) => {
@@ -249,21 +249,21 @@ const { overlay = false, showProperties = false, production = false } = Astro.pr
 		} else if (prop === 'swap' || prop === 'loader') {
 			print = (x) => {
 				const s = x ? x.toString() : '(null)';
-				const max = 100;
-				return s.length < max ? s : s.substring(0, max-4) + ' ...';
+				const max = 60;
+				return s.length < max ? s : s.substring(0, max - 4) + ' ...';
 			};
 		}
 
 		let different = () => value(deref(_vtbot_debug.capture[prop])) !== value(deref(e[prop]));
 
 		if (different()) {
 			logWithStyle(
-				`${deltaOnly ? PREFIX + ' ' : ''}${prop} changed from ${bold(
-					print(_vtbot_debug.capture[prop])
-				)} to ${bold(print(e[prop]))}`
+				`${PREFIX} ${prop} changed from ${bold(print(_vtbot_debug.capture[prop]))} to ${bold(
+					print(e[prop])
+				)}`
 			);
 		} else if (!deltaOnly) {
-			logWithStyle(`${prop}: ${bold(print(e[prop]))}`);
+			logWithStyle(`${PREFIX} ${prop}: ${bold(print(e[prop]))}`);
 		}
 	}
 
@@ -349,7 +349,8 @@ const { overlay = false, showProperties = false, production = false } = Astro.pr
 
 	const logTransitions = (
 		originalMap: Map<string, Set<Element>> | undefined,
-	swapEvent: TransitionBeforeSwapEvent) => {
+		swapEvent: TransitionBeforeSwapEvent
+	) => {
 		if (originalMap === undefined) return;
 
 		const errors: string[] = [];
@@ -386,7 +387,9 @@ const { overlay = false, showProperties = false, production = false } = Astro.pr
 		});
 		errors.forEach((s) => logWithStyle(s));
 		if (show()) {
-			console.groupCollapsed(`${PREFIX} Transitions from ${swapEvent.from.pathname} to ${swapEvent.to.pathname}`);
+			console.groupCollapsed(
+				`${PREFIX} Transitions from ${swapEvent.from.pathname} to ${swapEvent.to.pathname}`
+			);
 			transitions.forEach((s) => logWithStyle(s));
 			console.groupEnd();
 		}
@@ -397,21 +400,27 @@ const { overlay = false, showProperties = false, production = false } = Astro.pr
 	 */
 	function beforeSwap(swapEvent: Event) {
 		if (enabled()) {
+			let output = document.querySelector('#debugOutput');
 			if (isTransitionBeforeSwapEvent(swapEvent)) {
 				appendOutputElementToNewDocument(swapEvent.newDocument);
 				if (show()) {
 					console.groupCollapsed(`${PREFIX} Properties of the ${swapEvent.type} event`);
 					show() && logProperties(swapEvent);
 					console.groupEnd();
 				}
-				const originalMap = captureViewTransitionNamesOfCurrentDocument();
+				const originalMap = elementsWithStyleProperty('view-transition-name');
+				originalMap.set(
+					'root',
+					(originalMap.get('root') ?? new Set()).add(document.documentElement)
+				);
 				const originalSwap = swapEvent.swap;
 				swapEvent.swap = async () => {
 					console.log(`${PREFIX} before execution of swap()`);
 					originalSwap();
 					// @ts-ignore
 					show() && logProperties(window._vtbot_debug.capture.event, true);
 					console.log(`${PREFIX} after execution of swap()`);
+					if (!output) console.log(`${PREFIX} %o`, document.documentElement);
 					logTransitions(originalMap, swapEvent);
 				};
 				doCapture(swapEvent);

example/src/pages/library/VtBotDebug.mdx

@@ -4,6 +4,12 @@ title: Reusables
 vtn: vtbotdebug-3
 ---
 
+import { Picture } from 'astro:assets';
+import vtd1_dark from "src/assets/vtd1.dark.png";
+import vtd1_light from "src/assets/vtd1.light.png";
+import vtd2_dark from "src/assets/vtd2.dark.png";
+import vtd2_light from "src/assets/vtd2.light.png";
+
 <h1 style="display: inline-block; view-trans 	ition-name: vtbotdebug-1"><span style="display:inline-block; view-transition-name:vtbotdebug-2">🐛</span> Debug Component</h1>
 
 
@@ -88,6 +94,17 @@ The `<VtBotDebug>` component logs the transition groups that participate in the
    18:09:18.414 [ transition] 6 "a31" from (nowhere) --to-> html > body > p:nth-of-type(3) > a
 ```
 
+#### Pseudo elements (since v1.1.3)
+
+`<VtBotDebug>` now logs the `::view-transition` CSS pseudo-elements that the browser inserts to control the animations of the view transitions. Here an example with collapsed output:
+
+<Picture class="dark" src={vtd1_dark} formats={['avif', 'webp']} alt="Example ::view-transition output" />
+<Picture class="light" src={vtd1_light} formats={['avif', 'webp']} alt="Example ::view-transition output" />
+
+... and with all items exapanded:
+<Picture class="dark" src={vtd2_dark} formats={['avif', 'webp']} alt="Example ::view-transition output" />
+<Picture class="light" src={vtd2_light} formats={['avif', 'webp']} alt="Example ::view-transition output" />
+
 ### View Transition promises
 
 After the view transition got startet, the API provides three promises that can be used to wait for different stages of the transition. The `<VtBotDebug>` component logs when these promises are resolved or rejected. If rejected, the reason is also shown.
@@ -140,3 +157,12 @@ Use these attributes on the `<VtBotDebug>` component e.g. to switch the output t
   ...
 </html>
 ```
+
+
+<style>{`
+
+img {
+	width: 60ch;
+}
+
+`}</style>