Dumper: hash highlighting on mouseover

Author: dg

src/Tracy/Bar/assets/bar.css

@@ -401,6 +401,14 @@ body#tracy-debug .tracy-panel { /* in popup window */
 	display: none;
 }
 
+#tracy-debug .tracy-dump-highlight {
+	background: #C22;
+	color: white;
+	border-radius: 2px;
+	padding: 0 2px;
+	margin: 0 -2px;
+}
+
 
 /* toggle */
 #tracy-debug .tracy-toggle:after {

src/Tracy/Dumper/assets/dumper.css

@@ -55,6 +55,14 @@ pre.tracy-dump a:focus {
 	display: none;
 }
 
+.tracy-dump-highlight {
+	background: #C22;
+	color: white;
+	border-radius: 2px;
+	padding: 0 2px;
+	margin: 0 -2px;
+}
+
 span[data-tracy-href] {
 	border-bottom: 1px dotted rgba(0, 0, 0, .2);
 }

src/Tracy/Dumper/assets/dumper.js

@@ -66,6 +66,25 @@
 				}
 			});
 
+			document.addEventListener('mouseover', (e) => {
+				let dump;
+				if (e.target.matches('.tracy-dump-hash') && (dump = e.target.closest('.tracy-dump'))) {
+					dump.querySelectorAll('.tracy-dump-hash').forEach((el) => {
+						if (el.textContent === e.target.textContent) {
+							el.classList.add('tracy-dump-highlight');
+						}
+					});
+				}
+			});
+
+			document.addEventListener('mouseout', (e) => {
+				if (e.target.matches('.tracy-dump-hash')) {
+					document.querySelectorAll('.tracy-dump-hash.tracy-dump-highlight').forEach((el) => {
+						el.classList.remove('tracy-dump-highlight');
+					});
+				}
+			});
+
 			Tracy.Toggle.init();
 		}
 	}