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();
 }
 }