Separate the highlighter layer

src/content_scripts/content.css

@@ -2,17 +2,13 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-[__devtools_highlighted] {
-  outline: 2px solid #f06;
-  position: relative;
+#__devtools_highlighter {
+  position: absolute; 
+  background-color: #4aa9fab8;
+  display: block; 
+  z-index: 9999;
 }
 
-[__devtools_highlighted]::before {
-  position: absolute;
-  content: "";
-  background: #0006;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+#__devtools_highlighter.hide {
+  display: none;
 }

src/content_scripts/content.js

@@ -10,12 +10,10 @@ const NODE_LIMIT = 100;
 
 // Special attributes used by the extension. These attributes are added to nodes in the
 // page.
-const STYLING_ATTRIBUTE = "__devtools_highlighted";
 const UNIQUE_ATTRIBUTE = "__devtools_unique";
 
-// Global var to store the outline color
-// used for highlighting elements
-let outlineColor = "#f06";
+// Id of the higlighter layer used to highlight the node
+const HIGHLIGHTER_LAYER_ID = "__devtools_highlighter";
 
 // Open the port to communicate with the background script.
 const browser = window.browser || chrome;
@@ -39,19 +37,9 @@ port.onMessage.addListener(message => {
     case "clear":
       clear();
       break;
-    case "updateOutlineColor":
-      updateOutlineColor(message.options.color);
-      break;
   }
 });
 
-/**
- * Updates the global `outlineColor` variable with the new color
- */
-function updateOutlineColor(color) {
-  outlineColor = color;
-}
-
 // Helper to send messages back to the background script.
 function sendResponse(message) {
   port.postMessage(message);
@@ -73,8 +61,9 @@ function clear() {
  * Unhighlight all nodes at once, but keep the list so we can highlight them again later.
  */
 function unhighlightAll() {
-  for (let node of currentNodes) {
-    unhighlightNode(node);
+  let highlighterLayer;
+  if (highlighterLayer = document.querySelector(`#${HIGHLIGHTER_LAYER_ID}`)) {
+    highlighterLayer.classList.add('hide');
   }
 }
 
@@ -97,7 +86,6 @@ function highlight(index) {
     return;
   }
 
-  unhighlightAll();
   highlightNode(currentNodes[index]);
 }
 
@@ -285,17 +273,25 @@ let nextUnique = (function uniqueNumberGenerator() {
  * @param {DOMNode} node The node to be highlighted.
  */
 function highlightNode(node) {
-  node.setAttribute(STYLING_ATTRIBUTE, true);
-  updateOutline(node);
+  const {top, left, width, height} = node.getBoundingClientRect();
+  const styles = ` 
+    top: ${top}px;
+    left: ${left}px;
+    width: ${width}px;
+    height: ${height}px;`;
+
+  let highlighterLayer;
+  if (!(highlighterLayer = document.querySelector(`#${HIGHLIGHTER_LAYER_ID}`))) {
+    const body = document.querySelector('body');    
+    highlighterLayer = document.createElement('div');
+    highlighterLayer.setAttribute('id', HIGHLIGHTER_LAYER_ID);
+    body.appendChild(highlighterLayer);
+  } else {
+    highlighterLayer.classList.remove('hide');
+  }
+  highlighterLayer.setAttribute('style', styles);
 }
 
-/**
- * Update the outline of the node
- * @param {DOMNode} node  The node whose outline needs to be updated 
- */
-function updateOutline(node) {
-  node.style.outline = `2px solid ${outlineColor}`
-}
 
 /**
  * Tag one node in the page, so we can then select it in the inspector.
@@ -305,22 +301,6 @@ function tagNode(node) {
   node.setAttribute(UNIQUE_ATTRIBUTE, nextUnique());
 }
 
-/**
- * Unhighlight one node in the page.
- * @param {DOMNode} node The node to be unhighlighted.
- */
-function unhighlightNode(node) {
-  node.removeAttribute(STYLING_ATTRIBUTE);
-  resetOutline(node);
-}
-
-/**
- * Removes the outline from the node
- * @param {DOMNode} node  The node whose outline has to be removed 
- */
-function resetOutline(node) {
-  node.style.outline = "none";
-}
 
 /**
  * Untag one node in the page.
@@ -347,7 +327,7 @@ function createNodeResponse(node) {
 
   // Filtering the attributes to remove the special ones the extension is adding.
   attributes = attributes.filter(({ name }) => {
-    return name !== UNIQUE_ATTRIBUTE && name !== STYLING_ATTRIBUTE;
+    return name !== UNIQUE_ATTRIBUTE;
   });
 
   return {

src/devtools/panel/devtools-panel.js

@@ -25,7 +25,6 @@ const outputEl = document.querySelector(".output");
 const nodeListEl = document.querySelector("#nodes");
 const countEl = document.querySelector(".count");
 const clearButtonEl = document.querySelector(".clear");
-const outlineColorSelectorEl = document.querySelector("#color-selector")
 
 // Start listening for events in the panel, to handle user inputs.
 inputEl.addEventListener("input", find);
@@ -35,21 +34,6 @@ clearButtonEl.addEventListener("click", clear);
 window.addEventListener("click", handleButtonClick);
 window.addEventListener("mouseover", handleNodeOver);
 window.addEventListener("mouseout", handleNodeOut);
-outlineColorSelectorEl.addEventListener("input", updateOutlineColor);
-
-/**
- * Notifies the content script to update the color
- * when the user selects a new color
- */
-function updateOutlineColor() {
-  browser.runtime.sendMessage({
-    tabId: browser.devtools.inspectedWindow.tabId,
-    action: "updateOutlineColor",
-    options: {
-      color: outlineColorSelectorEl.value
-    },
-  });
-}
 
 /**
  * Execute the current query by sending a message to the content script, which will find

src/devtools/panel/panel.html

@@ -15,9 +15,6 @@
     </select>
   </label>
   <label><input type="checkbox" id="unlimited"> Unlimited results</label>
-  <label>Outline Color
-    <input id="color-selector" type="color">
-  </label>
 </div>
 <div class="output">
   <div id="message"></div>

src/devtools/panel/style.css

@@ -28,7 +28,7 @@ body {
   background: var(--theme-toolbar-background);
   border-block-end: 1px solid var(--theme-splitter-color);
   display: grid;
-  grid-template-columns: 30px 1fr auto auto auto auto;
+  grid-template-columns: 30px 1fr auto auto auto;
 }
 
 @supports not (border-block-end:test) {
@@ -70,10 +70,6 @@ body {
   border-inline-end: 1px solid var(--theme-splitter-color);
 }
 
-.toolbar #color-selector {
-  cursor: pointer;
-}
-
 @supports not (border-inline-end:test) {
   .toolbar .clear { border-right: 1px solid var(--theme-splitter-color); }
 }