export default class NotificationCounter {
  constructor() {
    const link = document.querySelector('link[rel=icon]')
    this.origIcon = link ? link.href : '/favicon.ico'
    this.canvas = document.createElement('canvas')
    this.context = this.canvas.getContext('2d')
  }

  getIcon(cb) {
    if (this.image) {
      cb(this.image)
      return
    }

    const image = new window.Image()
    image.onload = () => {
      this.image = image
      this.canvas.width = image.width
      this.canvas.height = image.height
      cb(this.image)
    }
    image.onerror = err => {
      console.log('Error loading favicon: ' + err)
      cb(null)
    }
    image.src = this.origIcon
  }

  setCount(count) {
    this.getIcon(icon => {
      const fontSize = this._rel16(11)
      const c = this.context

      c.clearRect(0, 0, this.canvas.width, this.canvas.height)
      c.drawImage(icon, 0, 0, this.canvas.width, this.canvas.height)
      c.font = `${fontSize}px monospace`
      c.fillStyle = 'rgb(255, 255, 255)'
      c.textAlign = 'left'
      c.textBaseline = 'top'
      c.strokeStyle = 'rgba(2, 136, 209, 0.95)'
      c.lineWidth = this._rel16(4)
      const startX = this._rel16(2)
      const startY = this._rel16(1)
      const countStr = count < 10 ? '' + count : '*'
      c.strokeText(countStr, startX, startY)
      c.fillText(countStr, startX, startY)
      this._setIcon(this.canvas.toDataURL('image/png'))
    })
  }

  clear() {
    this._revert()
  }

  _revert() {
    this._setIcon(this.origIcon)
  }

  _setIcon(iconHref) {
    let link = document.querySelector('link[rel=icon]')
    while (link) {
      if (link.href === iconHref) {
        return
      } else {
        link.parentNode.removeChild(link)
      }
      link = document.querySelector('link[rel=icon]')
    }

    link = document.createElement('link')
    link.type = 'image/x-icon'
    link.rel = 'icon'
    link.href = iconHref
    document.getElementsByTagName('head')[0].appendChild(link)
  }

  _rel16(val) {
    return Math.round((val * this.canvas.width) / 16)
  }
}

@@ -179,97 +179,20 @@
 his.
-canvas = document.createElement('canvas')%0A    this.context = this.canvas.getContext('2d')
+image = null
 %0A  %7D
@@ -365,86 +365,8 @@
 age%0A
-      this.canvas.width = image.width%0A      this.canvas.height = image.height%0A
     
@@ -552,162 +552,560 @@
     
-this.getIcon(icon =%3E %7B%0A      const fontSize = this._rel16(11)%0A      const c = this.context%0A%0A      c.clearRect(0, 0, this.canvas.width, this.canvas.height)
+// NOTE: we throw away the canvas and create a new one every time because Chrome seems to like%0A    // to not draw to canvases when the tab is backgrounded (and thus would leave the previously%0A    // drawn contents intact, leading to incorrect counts a lot of the time). New canvases always%0A    // seem to draw correctly%0A    const canvas = document.createElement('canvas')%0A    this.getIcon(icon =%3E %7B%0A      canvas.width = icon.width%0A      canvas.height = icon.height%0A      const fontSize = this._rel16(11, canvas)%0A      const c = canvas.getContext('2d')%0A
 %0A   
@@ -1131,21 +1131,16 @@
 , 0, 0, 
-this.
 canvas.w
@@ -1145,21 +1145,16 @@
 .width, 
-this.
 canvas.h
@@ -1379,16 +1379,24 @@
 _rel16(4
+, canvas
 )%0A      
@@ -1423,16 +1423,24 @@
 _rel16(2
+, canvas
 )%0A      
@@ -1467,16 +1467,24 @@
 _rel16(1
+, canvas
 )%0A      
@@ -1638,21 +1638,16 @@
 setIcon(
-this.
 canvas.t
@@ -2244,16 +2244,24 @@
 el16(val
+, canvas
 ) %7B%0A    
@@ -2285,21 +2285,16 @@
 ((val * 
-this.
 canvas.w

Fix issue with favicon displaying stale unread message count.