Crashes on Firefox Developer Edition with error: TypeError: can't access property "setAttribute", a is undefined

[PsyGik]

Not sure if VisBug is supposed to trigger the React dev more error boundary.

[PsyGik]

works fine on Edge and Chrome, on the same local dev site

[argyleink]

interesting! do you have a url I can go try reproducing the error on? i've got FF dev edition and would love to set some breakpoints to see why a is undefined. from the error log there, looks like all you're doing in launching visbug and hovering around? does it repro in FF stable too?

[PsyGik]

The error shows up on any site, keep the console open. (👆🏽 StackOverflow Homepage)

On dev mode, (at least on react projects), the error triggers the React Error boundary.

More details:

• FF Dev Edition: 90.0b12 (64-bit)
• Extension version: 0.3.21

The error happens at:

class Ve extends HTMLElement {
  constructor() {
    super (),
    this.$shadow = this.attachShadow({
      mode: 'closed'
    })
  }
  connectedCallback() {
    this.$shadow.adoptedStyleSheets = [
      P
    ]
  }
  disconnectedCallback() {
  }
  set position(e) {
    this.$shadow.innerHTML = this.render(e)
  }
  set update({
    width: e,
    height: t,
    top: n,
    left: o
  }) {
    const {
      winHeight: r,
      winWidth: i
    }
    = Be(),
    [
      s
    ] = this.$shadow.children,
    [
      a,
      l,
      c,
      d,
      h
    ] = s.children;
    this.$shadow.host.style.display = 'block',
    s.setAttribute('viewBox', `0 0 ${ i } ${ r }`),
    a.setAttribute('width', e + 'px'), 🐛
    a.setAttribute('x', o),
    a.setAttribute('y', n),
    l.setAttribute('x1', o),
    l.setAttribute('x2', o),
    c.setAttribute('x1', o + e),
    c.setAttribute('x2', o + e),
    d.setAttribute('y1', n + window.scrollY),
    d.setAttribute('y2', n + window.scrollY),
    d.setAttribute('x2', i),
    h.setAttribute('y1', n + window.scrollY + t),
    h.setAttribute('y2', n + window.scrollY + t),
    h.setAttribute('x2', i)
  }
  render({
    x: e,
    y: t,
    width: n,
    height: o,
    top: r,
    left: i
  }) {
    const {
      winWidth: s,
      winHeight: a
    }
    = Be(),
    {
      offsetHeight: l
    }
    = document.body,
    c = t + window.scrollY;
    return `
      <svg
        width="100%"
        viewBox="0 0 ${ s } ${ a }"
        version="1.1" xmlns="http://www.w3.org/2000/svg"
      >
        <rect
          fill="none"
          width="${ n }" height="${ o }"
          x="${ e }" y="${ t }"
          style="display:none;"
        ></rect>
        <line x1="${ e }" y1="0" x2="${ e }" y2="${ l }"></line>
        <line x1="${ e + n }" y1="0" x2="${ e + n }" y2="${ l }"></line>
        <line x1="0" y1="${ c }" x2="${ s }" y2="${ c }"></line>
        <line x1="0" y1="${ c + o }" x2="${ s }" y2="${ c + o }"></line>
      </svg>
    `
  }
}
customElements.define('visbug-gridlines', Ve);

[PsyGik]

Happens on FF Stable as well.

[argyleink]

i see it, i got it. the bug is from destructuring children and assuming there's a certain node at an index, and the node is different in firefox because there's no constructible stylesheets. maybe if i can get the stylesheets to append instead of prepend, the bug will go away. or i can query the children instead of destructure them (the much safer route).

thanks for the report! it looks like it's the dashed guides that are struggling to update due to this bug. i'm on it!

[argyleink]

will be live in FF soon! 👍🏻 ty for the bug report

[PsyGik]

Updated to the latest version. No more errors. Thanks for the quick fix!