dumper.js: initializes lazy dumps on click [Closes #482]

nette · Apr 29, 2021 · dbf409f · dbf409f
1 parent d01a577
commit dbf409f
Showing 1 changed file with 17 additions and 14 deletions.
diff --git a/src/Tracy/Dumper/assets/dumper.js b/src/Tracy/Dumper/assets/dumper.js
@@ -27,23 +27,13 @@ class Dumper
 			el.classList.remove('tracy-collapsed');
 		});
 
-		// lazy
-		(context || document).querySelectorAll('[data-tracy-snapshot]').forEach((el) => { // <pre>
-			let snapshot = JSON.parse(el.getAttribute('data-tracy-snapshot'));
-			el.removeAttribute('data-tracy-snapshot');
-			el.querySelectorAll('[data-tracy-dump]').forEach((el) => { // <span>
-				if (!el.nextSibling) {
-					el.after(document.createTextNode('\n')); // enforce \n after toggler
-				}
-				el.nextSibling.after(buildStruct(JSON.parse(el.getAttribute('data-tracy-dump')), snapshot, el, true, []));
-				el.removeAttribute('data-tracy-dump');
-			});
-		});
-
 		// snapshots
 		(context || document).querySelectorAll('meta[itemprop=tracy-snapshot]').forEach((el) => {
 			let snapshot = JSON.parse(el.getAttribute('content'));
 			el.parentElement.querySelectorAll('[data-tracy-dump]').forEach((el) => { // <pre>
+				if (el.closest('[data-tracy-snapshot]')) { // ignore unrelated <span data-tracy-dump>
+					return;
+				}
 				el.appendChild(build(JSON.parse(el.getAttribute('data-tracy-dump')), snapshot, el.classList.contains('tracy-collapsed')));
 				el.removeAttribute('data-tracy-dump');
 				el.classList.remove('tracy-collapsed');
@@ -55,13 +45,26 @@ class Dumper
 		}
 		Dumper.inited = true;
 
-		// enables <span data-tracy-href=""> & ctrl key
 		document.documentElement.addEventListener('click', (e) => {
 			let el;
+			// enables <span data-tracy-href=""> & ctrl key
 			if (e.ctrlKey && (el = e.target.closest('[data-tracy-href]'))) {
 				location.href = el.getAttribute('data-tracy-href');
 				return false;
 			}
+
+			// initializes lazy <span data-tracy-dump> inside <pre data-tracy-snapshot>
+			if ((el = e.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((el) => {
+					if (!el.nextSibling) {
+						el.after(document.createTextNode('\n')); // enforce \n after toggler
+					}
+					el.nextSibling.after(buildStruct(JSON.parse(el.getAttribute('data-tracy-dump')), snapshot, el, true, []));
+					el.removeAttribute('data-tracy-dump');
+				});
+			}
 		});
 
 		document.documentElement.addEventListener('tracy-toggle', (e) => {