Highlight bounding rects on node hover

Author: Timothy Johnson

src/client/index.js

@@ -10,13 +10,85 @@ window.__svelte_devtools_select_element = function(element) {
   if (node) window.postMessage({ type: 'inspect', node: serializeNode(node) })
 }
 
+const hoverArea = document.createElement('div')
+hoverArea.style.position = 'fixed'
+hoverArea.style.backgroundColor = 'rgba(0, 136, 204, 0.2)'
+hoverArea.style.zIndex = '2147483647'
+
+const hoverX = document.createElement('div')
+hoverX.style.position = 'fixed'
+hoverX.style.borderStyle = 'dashed'
+hoverX.style.borderColor = 'rgb(0, 136, 204)'
+hoverX.style.borderWidth = '1px 0'
+hoverX.style.zIndex = '2147483647'
+hoverX.style.left = '0'
+hoverX.style.width = '100vw'
+
+const hoverY = document.createElement('div')
+hoverY.style.position = 'fixed'
+hoverY.style.borderStyle = 'dashed'
+hoverY.style.borderColor = 'rgb(0, 136, 204)'
+hoverY.style.borderWidth = '0 1px'
+hoverY.style.zIndex = '2147483647'
+hoverY.style.top = '0'
+hoverY.style.height = '100vh'
+
+function getBoundingRect(node) {
+  if (node.type == 'element') return node.detail.getBoundingClientRect()
+
+  const maxRect = {
+    top: Infinity,
+    left: Infinity,
+    bottom: -Infinity,
+    right: -Infinity
+  }
+
+  for (const child of node.children) {
+    const rect = getBoundingRect(child)
+    if (rect.top < maxRect.top) maxRect.top = rect.top
+    if (rect.left < maxRect.left) maxRect.left = rect.left
+    if (rect.bottom > maxRect.bottom) maxRect.bottom = rect.bottom
+    if (rect.right > maxRect.right) maxRect.right = rect.right
+  }
+
+  maxRect.width = maxRect.right - maxRect.left
+  maxRect.height = maxRect.bottom - maxRect.top
+
+  return maxRect
+}
+
 window.addEventListener('message', e => handleMessage(e.data), false)
 
 function handleMessage(msg) {
+  const node = getNode(msg.nodeId)
+
   switch (msg.type) {
     case 'setSelected':
-      const node = getNode(msg.nodeId)
       if (node) window.$s = node.detail
+      break
+
+    case 'setHover':
+      if (!node) {
+        hoverArea.remove()
+        hoverX.remove()
+        hoverY.remove()
+        break
+      }
+
+      const box = getBoundingRect(node)
+      hoverArea.style.top = box.top + 'px'
+      hoverArea.style.left = box.left + 'px'
+      hoverArea.style.width = box.width + 'px'
+      hoverArea.style.height = box.height + 'px'
+      document.body.append(hoverArea)
+
+      hoverX.style.top = box.top + 'px'
+      hoverX.style.height = box.height - 2 + 'px'
+      document.body.append(hoverX)
+
+      hoverY.style.left = box.left + 'px'
+      hoverY.style.width = box.width - 2 + 'px'
+      document.body.append(hoverY)
 
       break
   }

src/store.js

@@ -48,6 +48,14 @@ selectedNode.subscribe(node => {
   if (invalid) invalid.invalidate()
 })
 
+hoveredNodeId.subscribe(nodeId =>
+  port.postMessage({
+    type: 'setHover',
+    tabId: chrome.devtools.inspectedWindow.tabId,
+    nodeId
+  })
+)
+
 function noop() {}
 
 function insertNode(node, target, anchorId) {