Highlight repeated or circular addresses

diff --git a/index.html b/index.html
index cf3a60f2e3bea0e716e28e58ce0d0a633b619244..88cb93a540dba9447a3a573567292db7d51785a4 100644 (file)
--- a/index.html
+++ b/index.html
@@ -138,12 +138,17 @@
         border-radius: 8px;
         background: hsl(216deg 50% 60%);
       }
+
+      &::highlight(yellow) {
+        background-color: yellow;
+      }
     }
 
     svg {
       inline-size: 20px;
       vertical-align: middle;
       margin-inline-start: 4px;
+      cursor: pointer;
     }
   </style>
 </head>
@@ -234,6 +239,21 @@
       }
     }
 
+    function highlightAddress(tree, address) {
+      const highlight = new Highlight();
+      for (const e of [...tree.querySelectorAll('*')]) {
+        if (e.tagName !== 'LI' || e.textContent.substring(0, 42) !== address) {
+          continue;
+        }
+        const textNode = e.childNodes[0];
+        const range = new Range();
+        range.setStart(textNode, 0);
+        range.setEnd(textNode, 42);
+        highlight.add(range);
+      }
+      CSS.highlights.set('yellow', highlight);
+    }
+
     form.addEventListener('submit', async e => {
       e.preventDefault();
 
@@ -246,6 +266,10 @@
       tree.innerHTML = '';
       allAddresses.length = 0;
       await insertTreeNode(tree, safe.replace(/^.+:/, '').toLowerCase(), rpc);
+      document.querySelectorAll('svg').forEach(svg => {
+        svg.addEventListener('mouseover', e => highlightAddress(tree, svg.closest('li').textContent.substring(0, 42)));
+        svg.addEventListener('mouseout', e => CSS.highlights.clear());
+      });
 
       e.target.removeAttribute('data-loading');
     });