Show occurrences

Author: dadaa

extension/sidebar-pane.html

@@ -14,6 +14,10 @@
       line-height: 1.8;
     }
 
+    a {
+      text-decoration: none;
+    }
+
     header {
       color: #0c0c0d;
       background-color: #f9f9fa;
@@ -26,10 +30,6 @@
       border-top: 1px solid #e0e0e2;
     }
 
-    a {
-      text-decoration: none;
-    }
-
     li {
       margin-block-end: 4px;
       list-style: none;
@@ -127,6 +127,32 @@
       font-weight: 600;
     }
 
+    /* occurrences part */
+    .occurrences details summary {
+      cursor: pointer;
+      color: #b6babf;
+    }
+
+    .occurrences ul {
+      line-height: 1.2;
+      padding-inline-start: 16px;
+      padding-block-start: 2px;
+    }
+
+    .occurrences li {
+      font-family: monospace;
+      font-size: 12px;
+    }
+
+    .occurrences .node-name {
+      color: #0074e8;
+    }
+
+    .occurrences .node-id,
+    .occurrences .node-class {
+      color: #dd00a9;
+    }
+
     #subtree aside {
       display: none;
       padding-block: 12px;

extension/sidebar-pane.js

@@ -163,9 +163,45 @@ function _renderIssue(issue) {
 
   issueEl.classList.add((issue.deprecated ? "warning" : "information"));
 
+  if (issue.nodes) {
+    issueEl.append(_renderOccurrences(issue));
+  }
+
   return issueEl;
 }
 
+function _renderOccurrences({ nodes }) {
+  const occurrencesEl = document.createElement("section");
+  occurrencesEl.classList.add("occurrences");
+
+  const nodelistEl = document.createElement("ul");
+  for (const { id, className, nodeName } of nodes) {
+    const nodeEl = document.createElement("li");
+    nodeEl.append(_renderTerm(nodeName.toLowerCase(), ["node-name"]));
+
+    if (id) {
+      nodeEl.append(_renderTerm(`#${ id }`, ["node-id"]));
+    } else if (className.length) {
+      nodeEl.append(_renderTerm(`.${ className.replace(/\s+/g, ".") }`, ["node-class"]));
+    }
+    nodelistEl.append(nodeEl);
+  }
+
+  if (nodes.length !== 1) {
+    const summaryEl = document.createElement("summary");
+    summaryEl.textContent = `${nodes.length} occurrences`;
+
+    const detailsEl = document.createElement("details");
+    detailsEl.append(summaryEl, nodelistEl);
+
+    occurrencesEl.append(detailsEl);
+  } else {
+    occurrencesEl.append(nodelistEl);
+  }
+
+  return occurrencesEl;
+}
+
 function _renderSubject(issue) {
   const { type, url } = issue;
   const subjectEl = document.createElement("span");