Merge remote-tracking branch 'origin/develop' into settings-and-filtering

* origin/develop: (169 commits)
  Improve the user card for deactivated users
  Update CHANGELOG.md
  Update CHANGELOG.md
  Allow canceling a follow request
  Simple policy reasons for instance specific policies
  entity_normalizer: Escape name when parsing user
  Translated using Weblate (Spanish)
  Translated using Weblate (Catalan)
  Translated using Weblate (Korean)
  Translated using Weblate (Japanese (ja_PEDANTIC))
  Translated using Weblate (Indonesian)
  Translated using Weblate (Esperanto)
  Translated using Weblate (Vietnamese)
  Translated using Weblate (Italian)
  Translated using Weblate (Vietnamese)
  Translated using Weblate (Indonesian)
  Translated using Weblate (Italian)
  Translated using Weblate (Vietnamese)
  Translated using Weblate (Indonesian)
  Translated using Weblate (Chinese (Simplified))
  ...

1 files changed, 38 insertions, 32 deletions

diff --git a/src/services/favicon_service/favicon_service.js b/src/services/favicon_service/favicon_service.js
index d1ddee41..7e19629d 100644
--- a/src/services/favicon_service/favicon_service.js
+++ b/src/services/favicon_service/favicon_service.js
@@ -1,52 +1,58 @@
-import { find } from 'lodash'
-
 const createFaviconService = () => {
-  let favimg, favcanvas, favcontext, favicon
+  const favicons = []
   const faviconWidth = 128
   const faviconHeight = 128
   const badgeRadius = 32
 
   const initFaviconService = () => {
-    const nodes = document.getElementsByTagName('link')
-    favicon = find(nodes, node => node.rel === 'icon')
-    if (favicon) {
-      favcanvas = document.createElement('canvas')
-      favcanvas.width = faviconWidth
-      favcanvas.height = faviconHeight
-      favimg = new Image()
-      favimg.src = favicon.href
-      favcontext = favcanvas.getContext('2d')
-    }
+    const nodes = document.querySelectorAll('link[rel="icon"]')
+    nodes.forEach(favicon => {
+      if (favicon) {
+        const favcanvas = document.createElement('canvas')
+        favcanvas.width = faviconWidth
+        favcanvas.height = faviconHeight
+        const favimg = new Image()
+        favimg.crossOrigin = 'anonymous'
+        favimg.src = favicon.href
+        const favcontext = favcanvas.getContext('2d')
+        favicons.push({ favcanvas, favimg, favcontext, favicon })
+      }
+    })
   }
 
   const isImageLoaded = (img) => img.complete && img.naturalHeight !== 0
 
   const clearFaviconBadge = () => {
-    if (!favimg || !favcontext || !favicon) return
+    if (favicons.length === 0) return
+    favicons.forEach(({ favimg, favcanvas, favcontext, favicon }) => {
+      if (!favimg || !favcontext || !favicon) return
 
-    favcontext.clearRect(0, 0, faviconWidth, faviconHeight)
-    if (isImageLoaded(favimg)) {
-      favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
-    }
-    favicon.href = favcanvas.toDataURL('image/png')
+      favcontext.clearRect(0, 0, faviconWidth, faviconHeight)
+      if (isImageLoaded(favimg)) {
+        favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
+      }
+      favicon.href = favcanvas.toDataURL('image/png')
+    })
   }
 
   const drawFaviconBadge = () => {
-    if (!favimg || !favcontext || !favcontext) return
-
+    if (favicons.length === 0) return
     clearFaviconBadge()
+    favicons.forEach(({ favimg, favcanvas, favcontext, favicon }) => {
+      if (!favimg || !favcontext || !favcontext) return
+
+      const style = getComputedStyle(document.body)
+      const badgeColor = `${style.getPropertyValue('--badgeNotification') || 'rgb(240, 100, 100)'}`
 
-    const style = getComputedStyle(document.body)
-    const badgeColor = `${style.getPropertyValue('--badgeNotification') || 'rgb(240, 100, 100)'}`
-
-    if (isImageLoaded(favimg)) {
-      favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
-    }
-    favcontext.fillStyle = badgeColor
-    favcontext.beginPath()
-    favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false)
-    favcontext.fill()
-    favicon.href = favcanvas.toDataURL('image/png')
+      if (isImageLoaded(favimg)) {
+        favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
+      }
+      favcontext.fillStyle = badgeColor
+      favcontext.beginPath()
+      favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false)
+      favcontext.fill()
+      favicon.href = favcanvas.toDataURL('image/png')
+    })
   }
 
   return {