😳 Prevent accidental favicon overrides (#46)

* Fixes issue where FF overrides icons it shouldn't
* Update canvas-prebuilt for testing

globals.d.ts

@@ -15,3 +15,8 @@ declare namespace Window {
     chrome: any;
   }
 }
+
+declare module "canvas" {
+  var x: any;
+  export = x;
+}

jestsetup.js

@@ -1,4 +1,4 @@
-import "canvas-prebuilt"
+import "canvas"
 import Enzyme from "enzyme"
 import Adapter from "enzyme-adapter-react-16"
 import { JSDOM } from "jsdom"

package.json

@@ -36,17 +36,17 @@
     "@babel/plugin-transform-runtime": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
-    "@types/chrome": "0.0.74",
+    "@types/chrome": "0.0.75",
     "@types/enzyme": "^3.1.14",
     "@types/enzyme-adapter-react-16": "^1.0.3",
     "@types/jest": "^23.3.5",
     "@types/jsdom": "^12.2.0",
     "babel-core": "^7.0.0-bridge.0",
-    "canvas-prebuilt": "^1.6.11",
+    "canvas": "^2.0.1",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
     "enzyme-to-json": "^3.3.4",
-    "husky": "^1.1.2",
+    "husky": "^1.1.3",
     "jest": "^23.6.0",
     "node-pre-gyp": "^0.11.0",
     "npm-run-all": "^4.1.2",

source/utilities/faviconHelpers/faviconHelpers.js

@@ -11,7 +11,9 @@ const PIXEL_GRID = 16
 const verticalOffset = (isBrowser("FIREFOX") ? 40 : 0)
 
 // Initialize canvas and context to render emojis
-const canvas = document.createElement("canvas")
+const canvas = (typeof global !== "undefined")
+  ? require("canvas").createCanvas()
+  : document.createElement("canvas")
 canvas.width = canvas.height = EMOJI_SIZE
 
 const context = (typeof global !== "undefined" && global.testContext) || canvas.getContext("2d")
@@ -20,22 +22,30 @@ context.textAlign = "center"
 context.textBaseline = "middle"
 
 let settings = {}
-getOptions().then(options => settings = options)
+let hasFavicon = false
+
+/** @type {?HTMLElement} */
+let existingFavicon = null
+
+
+getOptions().then(options => {
+  settings = options
+  hasFavicon = Boolean(isBrowser("FIREFOX") && getAllIconLinks().length)
+})
 
 
 /**
  * Given an emoji string, append it to the document head
  * @param {string} name
  * @param {boolean} shouldOverride
  */
-let existingFavicon = null
-
 export function appendFaviconLink(name, shouldOverride) {
   const href = createEmojiUrl(name)
+  if (!href) return
 
   if (existingFavicon) {
     existingFavicon.setAttribute("href", href)
-  } else {
+  } else if (!hasFavicon || shouldOverride) {
     const link = createLink(href, EMOJI_SIZE, "image/png")
     existingFavicon = documentHead.appendChild(link)
 
@@ -47,12 +57,20 @@ export function appendFaviconLink(name, shouldOverride) {
 }
 
 /**
- * Removes all icon link tags
+ * Return an array of link tags that have an icon rel
+ * @returns {Array.<HTMLElement>}
  */
-export function removeAllFaviconLinks() {
-  Array.prototype
+export function getAllIconLinks() {
+  return Array.prototype
     .slice.call(document.getElementsByTagName("link"))
     .filter(isIconLink)
+}
+
+/**
+ * Removes all icon link tags
+ */
+export function removeAllFaviconLinks() {
+  getAllIconLinks()
     .forEach(link => link.remove())
 
   existingFavicon = null
@@ -64,7 +82,7 @@ export function removeAllFaviconLinks() {
  * @returns {string}
  */
 function createEmojiUrl(emoji) {
-  if (!emoji) return
+  if (!emoji) return ""
 
   // Calculate sizing
   const char = String(emoji)