Don't highlight all elements, only the hovered element

src/content_scripts/content.js

@@ -20,14 +20,14 @@ const port = browser.runtime.connect({ name: "cs-port" });
 // Handle background script messages.
 port.onMessage.addListener(message => {
   switch (message.action) {
-    case "findAndHighlight":
-      findAndHighlight(message);
+    case "find":
+      find(message);
       break;
-    case "highlightOne":
-      highlightOne(message.index);
+    case "highlight":
+      highlight(message.index);
       break;
-    case "highlightAll":
-      reHighlightAll();
+    case "unhighlight":
+      unhighlightAll();
       break;
     case "scrollIntoView":
       scrollIntoView(message.index);
@@ -44,22 +44,22 @@ function sendResponse(message) {
 }
 
 // Keep track of all highlighted elements so we can un-highlight them later.
-let currentlyHighlighted = [];
+let currentNodes = [];
 
 /**
  * Clear all found nodes.
  */
 function clear() {
   unhighlightAll();
   untagAll();
-  currentlyHighlighted = [];
+  currentNodes = [];
 }
 
 /**
  * Unhighlight all nodes at once, but keep the list so we can highlight them again later.
  */
 function unhighlightAll() {
-  for (let node of currentlyHighlighted) {
+  for (let node of currentNodes) {
     unhighlightNode(node);
   }
 }
@@ -69,53 +69,44 @@ function unhighlightAll() {
  * later.
  */
 function untagAll() {
-  for (let node of currentlyHighlighted) {
+  for (let node of currentNodes) {
     untagNode(node);
   }
 }
 
 /**
  * Highlight just one node. So, unhighlight all others, and highlight just this one.
- * @param {Number} index The index of the node in the currentlyHighlighted array.
+ * @param {Number} index The index of the node in the currentNodes array.
  */
-function highlightOne(index) {
-  if (!currentlyHighlighted || !currentlyHighlighted[index]) {
+function highlight(index) {
+  if (!currentNodes || !currentNodes[index]) {
     return;
   }
 
   unhighlightAll();
-  highlightNode(currentlyHighlighted[index]);
-}
-
-/**
- * Highlight all known nodes again.
- */
-function reHighlightAll() {
-  for (let node of currentlyHighlighted) {
-    highlightNode(node);
-  }
+  highlightNode(currentNodes[index]);
 }
 
 /**
  * Scroll one of the known nodes into view.
- * @param {Number} index The index of the node in the currentlyHighlighted array.
+ * @param {Number} index The index of the node in the currentNodes array.
  */
 function scrollIntoView(index) {
-  if (!currentlyHighlighted || !currentlyHighlighted[index]) {
+  if (!currentNodes || !currentNodes[index]) {
     return;
   }
 
-  currentlyHighlighted[index].scrollIntoView({ behavior: "smooth" });
+  currentNodes[index].scrollIntoView({ behavior: "smooth" });
 }
 
 /**
- * Execute a query (of any supported type) to find nodes and then highlight them.
+ * Execute a query (of any supported type) to find nodes.
  * @param {Object} data The properties required here are:
  * - type {String} The type of query to run. Either computed or selector.
  * - query {String} The query itself
  * - options {Object} Options for executing the query, like unlimited {Boolean}
  */
-function findAndHighlight({ type, query, options }) {
+function find({ type, query, options }) {
   clear();
 
   let nodes = [];
@@ -136,9 +127,8 @@ function findAndHighlight({ type, query, options }) {
   }
 
   for (let node of nodes) {
-    highlightNode(node);
     tagNode(node);
-    currentlyHighlighted.push(node);
+    currentNodes.push(node);
   }
 
   let responseType = error ? "error" : "ok";

src/devtools/panel/devtools-panel.js

@@ -27,19 +27,19 @@ const countEl = document.querySelector(".count");
 const clearButtonEl = document.querySelector(".clear");
 
 // Start listening for events in the panel, to handle user inputs.
-inputEl.addEventListener("input", findAndHighlight);
-unlimitedCheckboxEl.addEventListener("input", findAndHighlight);
-typeSelectEl.addEventListener("input", findAndHighlight);
+inputEl.addEventListener("input", find);
+unlimitedCheckboxEl.addEventListener("input", find);
+typeSelectEl.addEventListener("input", find);
 clearButtonEl.addEventListener("click", clear);
 window.addEventListener("click", handleButtonClick);
 window.addEventListener("mouseover", handleNodeOver);
 window.addEventListener("mouseout", handleNodeOut);
 
 /**
  * Execute the current query by sending a message to the content script, which will find
- * all matching nodes and highlight them (or may send an error message back).
+ * all matching nodes (or may send an error message back).
  */
-function findAndHighlight() {
+function find() {
   let query = inputEl.value.trim();
   if (!query) {
     clear();
@@ -48,7 +48,7 @@ function findAndHighlight() {
 
   browser.runtime.sendMessage({
     tabId: browser.devtools.inspectedWindow.tabId,
-    action: "findAndHighlight",
+    action: "find",
     type: typeSelectEl.value,
     options: {
       unlimited: unlimitedCheckboxEl.checked
@@ -278,14 +278,14 @@ function handleNodeOver({ target }) {
 
   browser.runtime.sendMessage({
     tabId: browser.devtools.inspectedWindow.tabId,
-    action: "highlightOne",
+    action: "highlight",
     index
   });
 }
 
 /**
  * Handle a mouseout in the panel. Only process events on node previews in the output,
- * and use this event to re-highlight all nodes in the page.
+ * and use this event to un-highlight the node in the page.
  * @param {DOMEvent} event.
  */
 function handleNodeOut({ target }) {
@@ -296,12 +296,12 @@ function handleNodeOut({ target }) {
 
   browser.runtime.sendMessage({
     tabId: browser.devtools.inspectedWindow.tabId,
-    action: "highlightAll"
+    action: "unhighlight"
   });
 }
 
 /**
- * Clear the output and unhighlight everything.
+ * Clear the output.
  */
 function clear() {
   displayNodes([]);