Fix z index plugin in firefox (#540)

* Release 0.3.38

* replace computedStyleMap with getComputedStyle

* clean up console log (e.g. error with color not found)

Co-authored-by: Adam Argyle <[email protected]>

Author: hchiam

app/components/selection/label.element.js

@@ -141,7 +141,7 @@ export class Label extends HTMLElement {
       style.left = Math.max(boundingBox.width, currentPosition.left)
       style.top = boundingBox.height
       style.offscreenText = '↗'
-      createOffscreenLabelIndicator(node_label_id, style.offscreenText, style.hoverText, `calc(100vw - 1.5rem)`, '1rem', color, adjustRightSideToCount)
+      createOffscreenLabelIndicator(node_label_id, style.offscreenText, style.hoverText, `calc(100vw - 1.5rem)`, '1rem', style.color, adjustRightSideToCount)
     } else if (outsideLeft && !outsideTop && !outsideBottom) {
       style.left = boundingBox.width
       style.top = Math.max(boundingBox.height, currentPosition.top)
@@ -151,7 +151,7 @@ export class Label extends HTMLElement {
       style.left = window.innerWidth - boundingBox.width
       style.top = Math.max(boundingBox.height, currentPosition.top)
       style.offscreenText = '→'
-      createOffscreenLabelIndicator(node_label_id, style.offscreenText, style.hoverText, `calc(100vw - 1.5rem)`, 'calc(50vh - 0.5rem)', color, adjustRightSideToCount)
+      createOffscreenLabelIndicator(node_label_id, style.offscreenText, style.hoverText, `calc(100vw - 1.5rem)`, 'calc(50vh - 0.5rem)', style.color, adjustRightSideToCount)
     } else if (outsideBottom && !outsideLeft && !outsideRight) {
       style.left = Math.max(boundingBox.width, currentPosition.left)
       style.top = window.innerHeight - boundingBox.height
@@ -166,7 +166,7 @@ export class Label extends HTMLElement {
       style.left = Math.max(boundingBox.width, currentPosition.left)
       style.top = window.innerHeight - boundingBox.height
       style.offscreenText = '↘'
-      createOffscreenLabelIndicator(node_label_id, style.offscreenText, style.hoverText, `calc(100vw - 1.5rem)`, '100vh', color, adjustRightSideToCount)
+      createOffscreenLabelIndicator(node_label_id, style.offscreenText, style.hoverText, `calc(100vw - 1.5rem)`, '100vh', style.color, adjustRightSideToCount)
     }
   }
 }

app/components/selection/offscreenLabel.element.js

@@ -73,7 +73,7 @@ export class OffscreenLabel extends HTMLElement {
   }
 
   render(node_label_id) {
-    this.$shadow.host.setAttribute('data-label-id', node_label_id)
+    this.$shadow.host.setAttribute('data-label-id', node_label_id || ('label_' + Number(new Date())))
 
     return `<span offscreen-label>${this._text}</span>`
   }
@@ -90,13 +90,12 @@ export function createOffscreenLabelIndicator(node_label_id, text, hoverText, le
     instance.style.setProperty('--left', left)
     instance.style.setProperty('--top', top)
     instance.style.setProperty('--position', 'fixed');
-    if (color) instance.style.setProperty(`--label-bg`, color)
+    if (color) instance.style.setProperty('--label-bg', color)
     instance.seen[node_label_id] = true;
     instance.count = Object.keys(instance.seen).length
     instance.text = text
     instance.style.setProperty('--count', `"\\00a0 ${instance.count}"`);
     instance.style.setProperty('--hover-text', `"\\00a0 ${hoverText ? 'offscreen label: ' + hoverText : instance.count}"`);
-    console.log(hoverText ? 'offscreen label:' + hoverText : 'count: '+instance.count)
     if (adjustRightSideToCount) {
       left = left.includes('calc(') ? left.replace(')', ` - ${instance.count.toString().length}ch)`) : `${instance.count.toString().length}ch`
       instance.style.setProperty('--left', left)
@@ -121,7 +120,7 @@ export function createOffscreenLabelIndicator(node_label_id, text, hoverText, le
   label.style.setProperty('--top', top)
   label.style.setProperty('--count', `"\\00a0 ${label.count}"`)
   label.style.setProperty('--hover-text', `"\\00a0 ${hoverText ? 'offscreen label: ' + hoverText : label.count}"`)
-  if (color) label.style.setProperty(`--label-bg`, color)
+  if (color) label.style.setProperty('--label-bg', color)
 
   if (adjustRightSideToCount) {
     left = left.includes('calc(') ? left.replace(')', ` - 1ch)`) : `1ch`

app/plugins/zindex.js

@@ -14,11 +14,11 @@ export const description = 'show the z-index values of all elements that have z-
 export default function () {
     // Fun prior art https://gist.github.com/paulirish/211209
     Array.from(document.querySelectorAll('*'))
-        .filter(el => el.computedStyleMap().get('z-index').value !== 'auto')
+        .filter(el => window.getComputedStyle(el).getPropertyValue('z-index') !== 'auto')
         .filter(el => el.nodeName !== 'VIS-BUG')
         .forEach(el => {
             const color = colors[numberBetween(0, colors.length)];
-            const zindex = el.computedStyleMap().get('z-index').value
+            const zindex = window.getComputedStyle(el).getPropertyValue('z-index')
 
             const label = document.createElement('visbug-label')