shadow dom for dumper [WIP]

examples/assets/style.css

@@ -22,10 +22,8 @@ h2 {
 	font-size: 140%;
 }
 
-pre.tracy-dump {
+tracy-dump {
 	border: 1px solid silver;
-	padding: 1em;
-	margin: 1em 0;
 }
 
 a {

src/Tracy/BlueScreen/assets/bluescreen.js

@@ -15,10 +15,11 @@ class BlueScreen
 		}
 
 		blueScreen.addEventListener('tracy-toggle', (e) => {
-			if (e.target.matches('#tracy-bs-toggle')) { // blue screen toggle
+	  		let target = e.composedPath()[0];
+			if (target.matches('#tracy-bs-toggle')) { // blue screen toggle
 				document.documentElement.classList.toggle('tracy-bs-visible', !e.detail.collapsed);
 
-			} else if (!e.target.matches('.tracy-dump *') && e.detail.originalEvent) { // panel toggle
+			} else if (!target.matches('.tracy-dump *') && e.detail.originalEvent) { // panel toggle
 				e.detail.relatedTarget.classList.toggle('tracy-panel-fadein', !e.detail.collapsed);
 			}
 		});

src/Tracy/Debugger/Debugger.php

@@ -495,8 +495,10 @@ public static function dump(mixed $var, bool $return = false): mixed
 				: Helpers::capture(fn() => Dumper::dump($var, $options));
 
 		} elseif (!self::$productionMode) {
-			$html = Helpers::isHtmlMode();
-			echo $html ? '<tracy-div>' : '';
+			if ($html = Helpers::isHtmlMode()) {
+				Dumper::renderAssets();
+				echo '<tracy-dump>';
+			}
 			Dumper::dump($var, [
 				Dumper::DEPTH => self::$maxDepth,
 				Dumper::TRUNCATE => self::$maxLength,
@@ -505,7 +507,7 @@ public static function dump(mixed $var, bool $return = false): mixed
 				Dumper::THEME => self::$dumpTheme,
 				Dumper::KEYS_TO_HIDE => self::$keysToHide,
 			]);
-			echo $html ? '</tracy-div>' : '';
+			echo $html ? '</tracy-dump>' : '';
 		}
 
 		return $var;

src/Tracy/Dumper/Dumper.php

@@ -103,7 +103,6 @@ public static function dump($var, array $options = []): mixed
 
 		} elseif (Helpers::isHtmlMode()) {
 			$options[self::LOCATION] ??= true;
-			self::renderAssets();
 			echo self::toHtml($var, $options);
 
 		} else {
@@ -153,18 +152,18 @@ public static function renderAssets(): void
 
 		$sent = true;
 
+		echo '<template class=tracy-dump-template>';
 		$nonce = Helpers::getNonce();
 		$nonceAttr = $nonce ? ' nonce="' . Helpers::escapeHtml($nonce) . '"' : '';
 		$s = file_get_contents(__DIR__ . '/../assets/toggle.css')
 			. file_get_contents(__DIR__ . '/assets/dumper-light.css')
 			. file_get_contents(__DIR__ . '/assets/dumper-dark.css');
 		echo "<style{$nonceAttr}>", str_replace('</', '<\/', Helpers::minifyCss($s)), "</style>\n";
+		echo "</template>\n";
 
-		if (!Debugger::isEnabled()) {
-			$s = '(function(){' . file_get_contents(__DIR__ . '/../assets/toggle.js') . '})();'
-				. '(function(){' . file_get_contents(__DIR__ . '/../Dumper/assets/dumper.js') . '})();';
-			echo "<script{$nonceAttr}>", str_replace(['<!--', '</s'], ['<\!--', '<\/s'], Helpers::minifyJs($s)), "</script>\n";
-		}
+		$s = '(function(){' . file_get_contents(__DIR__ . '/../assets/toggle.js') . '})();'
+			. '(function(){' . file_get_contents(__DIR__ . '/../Dumper/assets/dumper.js') . '})();';
+		echo "<script{$nonceAttr}>", str_replace(['<!--', '</s'], ['<\!--', '<\/s'], Helpers::minifyJs($s)), "</script>\n";
 	}
 
 

src/Tracy/Dumper/assets/dumper-dark.css

@@ -2,13 +2,18 @@
  * This file is part of the Tracy (https://tracy.nette.org)
  */
 
+:host {
+	display: block;
+	margin: 1em 0;
+	border-radius: 4px;
+}
+
 .tracy-dump.tracy-dark {
 	text-align: left;
 	color: #f8f8f2;
 	background: #29292e;
-	border-radius: 4px;
+	margin: 0;
 	padding: 1em;
-	margin: 1em 0;
 	word-break: break-all;
 	white-space: pre-wrap;
 }

src/Tracy/Dumper/assets/dumper-light.css

@@ -2,13 +2,18 @@
  * This file is part of the Tracy (https://tracy.nette.org)
  */
 
+:host {
+	display: block;
+	margin: 1em 0;
+	border-radius: 4px;
+}
+
 .tracy-dump.tracy-light {
 	text-align: left;
 	color: #444;
 	background: #fdf9e2;
-	border-radius: 4px;
+	margin: 0;
 	padding: 1em;
-	margin: 1em 0;
 	word-break: break-all;
 	white-space: pre-wrap;
 }

src/Tracy/Dumper/assets/dumper.js

@@ -48,8 +48,9 @@ class Dumper
 
 		document.documentElement.addEventListener('click', (e) => {
 			let el;
+	  		let target = e.composedPath()[0];
 			// enables <span data-tracy-href=""> & ctrl key
-			if (e.ctrlKey && (el = e.target.closest('[data-tracy-href]'))) {
+			if (e.ctrlKey && (el = target.closest('[data-tracy-href]'))) {
 				location.href = el.getAttribute('data-tracy-href');
 				return false;
 			}
@@ -59,7 +60,7 @@ class Dumper
 		document.documentElement.addEventListener('tracy-beforetoggle', (e) => {
 			let el;
 			// initializes lazy <span data-tracy-dump> inside <pre data-tracy-snapshot>
-			if ((el = e.target.closest('[data-tracy-snapshot]'))) {
+			if ((el = target.closest('[data-tracy-snapshot]'))) {
 				let snapshot = JSON.parse(el.getAttribute('data-tracy-snapshot'));
 				el.removeAttribute('data-tracy-snapshot');
 				el.querySelectorAll('[data-tracy-dump]').forEach((toggler) => {
@@ -73,7 +74,8 @@ class Dumper
 		});
 
 		document.documentElement.addEventListener('tracy-toggle', (e) => {
-			if (!e.target.matches('.tracy-dump *')) {
+	  		let target = e.composedPath()[0];
+			if (!target.matches('.tracy-dump *')) {
 				return;
 			}
 
@@ -86,12 +88,12 @@ class Dumper
 
 			} else if (origE && origE.altKey && cont.querySelector('.tracy-toggle')) { // triggered by alt key
 				if (e.detail.collapsed) { // reopen
-					e.target.classList.toggle('tracy-collapsed', false);
+					target.classList.toggle('tracy-collapsed', false);
 					cont.classList.toggle('tracy-collapsed', false);
 					e.detail.collapsed = false;
 				}
 
-				let expand = e.target.tracyAltExpand = !e.target.tracyAltExpand;
+				let expand = target.tracyAltExpand = !target.tracyAltExpand;
 				toggleChildren(cont, expand ? {} : false);
 			}
 
@@ -100,33 +102,36 @@ class Dumper
 
 		document.documentElement.addEventListener('animationend', (e) => {
 			if (e.animationName === 'tracy-dump-flash') {
-				e.target.classList.toggle('tracy-dump-flash', false);
+		  		let target = e.composedPath()[0];
+				target.classList.toggle('tracy-dump-flash', false);
 			}
 		});
 
 		document.addEventListener('mouseover', (e) => {
-			if (!e.target.matches('.tracy-dump *')) {
+	  		let target = e.composedPath()[0];
+			if (!target.matches('.tracy-dump *')) {
 				return;
 			}
 
 			let el;
 
-			if (e.target.matches('.tracy-dump-hash') && (el = e.target.closest('tracy-div'))) {
+			if (target.matches('.tracy-dump-hash') && (el = target.closest('tracy-div'))) {
 				el.querySelectorAll('.tracy-dump-hash').forEach((el) => {
-					if (el.textContent === e.target.textContent) {
+					if (el.textContent === target.textContent) {
 						el.classList.add('tracy-dump-highlight');
 					}
 				});
 				return;
 			}
 
-			if ((el = e.target.closest('.tracy-toggle')) && !el.title) {
+			if ((el = target.closest('.tracy-toggle')) && !el.title) {
 				el.title = HINT_ALT;
 			}
 		});
 
 		document.addEventListener('mouseout', (e) => {
-			if (e.target.matches('.tracy-dump-hash')) {
+	  		let target = e.composedPath()[0];
+			if (target.matches('.tracy-dump-hash')) {
 				document.querySelectorAll('.tracy-dump-hash.tracy-dump-highlight').forEach((el) => {
 					el.classList.remove('tracy-dump-highlight');
 				});
@@ -379,6 +384,26 @@ function toggleChildren(cont, usedIds) {
 function UnknownEntityException() {}
 
 
+class TracyDumpElement extends HTMLElement {
+	constructor() {
+		super();
+		let templateContent = document.querySelector('.tracy-dump-template').content;
+		this.attachShadow({mode: 'open'});
+		this.shadowRoot.appendChild(templateContent.cloneNode(true));
+	}
+
+	connectedCallback() {
+		setTimeout(() => {
+			while (this.firstElementChild) {
+				this.shadowRoot.appendChild(this.firstElementChild);
+			}
+		});
+	}
+}
+
+window.customElements.define('tracy-dump', TracyDumpElement);
+
+
 let Tracy = window.Tracy = window.Tracy || {};
 Tracy.Dumper = Tracy.Dumper || Dumper;
 

src/Tracy/assets/table-sort.js

@@ -7,8 +7,9 @@ class TableSort
 {
 	static init() {
 		document.documentElement.addEventListener('click', (e) => {
-			if (e.target.matches('.tracy-sortable > :first-child > tr:first-child *')) {
-				TableSort.sort(e.target.closest('td,th'));
+	  		let target = e.composedPath()[0];
+			if (target.matches('.tracy-sortable > :first-child > tr:first-child *')) {
+				TableSort.sort(target.closest('td,th'));
 			}
 		});
 

src/Tracy/assets/tabs.js

@@ -8,10 +8,11 @@ class Tabs
 	static init() {
 		document.documentElement.addEventListener('click', (e) => {
 			let label, context;
+	  		let target = e.composedPath()[0];
 			if (
 				!e.shiftKey && !e.ctrlKey && !e.metaKey
-				&& (label = e.target.closest('.tracy-tab-label'))
-				&& (context = e.target.closest('.tracy-tabs'))
+				&& (label = target.closest('.tracy-tab-label'))
+				&& (context = target.closest('.tracy-tabs'))
 			) {
 				Tabs.toggle(context, label);
 				e.preventDefault();

src/Tracy/assets/toggle.js

@@ -14,10 +14,10 @@ class Toggle
 		});
 
 		document.documentElement.addEventListener('click', (e) => {
-			let el;
+	  		let target = e.composedPath()[0];
+			let el = target.closest('.tracy-toggle');
 			if (
-				!e.shiftKey && !e.ctrlKey && !e.metaKey
-				&& (el = e.target.closest('.tracy-toggle'))
+				el && !e.shiftKey && !e.ctrlKey && !e.metaKey
 				&& Math.pow(start[0] - e.clientX, 2) + Math.pow(start[1] - e.clientY, 2) < MOVE_THRESHOLD
 			) {
 				Toggle.toggle(el, undefined, e);
@@ -69,8 +69,9 @@ class Toggle
 	static persist(baseEl, restore) {
 		let saved = [];
 		baseEl.addEventListener('tracy-toggle', (e) => {
-			if (saved.indexOf(e.target) < 0) {
-				saved.push(e.target);
+	  		let target = e.composedPath()[0];
+			if (saved.indexOf(target) < 0) {
+				saved.push(target);
 			}
 		});