From 11e3194208a9e83b291e5bf333b21e66f1e4c419 Mon Sep 17 00:00:00 2001
From: Jonathan Kingston <jonathan@jooped.co.uk>
Date: Wed, 31 May 2017 15:03:29 +0100
Subject: [PATCH] Fixing favicon loading for all icons. Part of #561

---
 .eslintrc.js                    |  1 +
 webextension/confirm-page.html  |  1 +
 webextension/js/confirm-page.js |  9 ++++-----
 webextension/js/popup.js        | 23 +++++------------------
 webextension/js/utils.js        | 23 +++++++++++++++++++++++
 webextension/popup.html         |  2 +-
 6 files changed, 35 insertions(+), 24 deletions(-)
 create mode 100644 webextension/js/utils.js

diff --git a/.eslintrc.js b/.eslintrc.js
index f2a79574..d9f72703 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -9,6 +9,7 @@ module.exports = {
     "webextensions": true
   },
   "globals": {
+    "Utils": true,
     "CustomizableUI": true,
     "CustomizableWidgets": true,
     "SessionStore": true,
diff --git a/webextension/confirm-page.html b/webextension/confirm-page.html
index 09d4852f..20d11c83 100644
--- a/webextension/confirm-page.html
+++ b/webextension/confirm-page.html
@@ -27,6 +27,7 @@ <h1 class="title-text">Open this site in your assigned container?</h1>
     </form>
   </main>
 
+  <script src="js/utils.js"></script>
   <script src="js/confirm-page.js"></script>
 </body>
 </html>
diff --git a/webextension/js/confirm-page.js b/webextension/js/confirm-page.js
index 5c5038b3..83a8435f 100644
--- a/webextension/js/confirm-page.js
+++ b/webextension/js/confirm-page.js
@@ -5,7 +5,7 @@ async function load() {
   const currentCookieStoreId = searchParams.get("currentCookieStoreId");
   const redirectUrlElement = document.getElementById("redirect-url");
   redirectUrlElement.textContent = redirectUrl;
-  createFavicon(redirectUrl, redirectUrlElement);
+  appendFavicon(redirectUrl, redirectUrlElement);
 
   const container = await browser.contextualIdentities.get(cookieStoreId);
   [...document.querySelectorAll(".container-name")].forEach((containerNameElement) => {
@@ -32,12 +32,11 @@ async function load() {
   });
 }
 
-function createFavicon(pageUrl, redirectUrlElement) {
+function appendFavicon(pageUrl, redirectUrlElement) {
   const origin = new URL(pageUrl).origin;
-  const imageElement = document.createElement("img");
-  imageElement.src = `${origin}/favicon.ico`;
+  const favIconElement = Utils.createFavIconElement(`${origin}/favicon.ico`);
 
-  redirectUrlElement.prepend(imageElement);
+  redirectUrlElement.prepend(favIconElement);
 }
 
 function confirmSubmit(redirectUrl, cookieStoreId) {
diff --git a/webextension/js/popup.js b/webextension/js/popup.js
index 12ca2990..7c43e5d3 100644
--- a/webextension/js/popup.js
+++ b/webextension/js/popup.js
@@ -18,7 +18,6 @@ const P_CONTAINERS_EDIT  = "containersEdit";
 const P_CONTAINER_INFO   = "containerInfo";
 const P_CONTAINER_EDIT   = "containerEdit";
 const P_CONTAINER_DELETE = "containerDelete";
-const DEFAULT_FAVICON = "moz-icon://goat?size=16";
 
 /**
  * Escapes any occurances of &, ", <, > or / with XML entities.
@@ -446,22 +445,9 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       const siteSettings = await Logic.getAssignment(currentTab);
       this.setupAssignmentCheckbox(siteSettings);
       const currentPage = document.getElementById("current-page");
-      const favIconUrl = currentTab.favIconUrl || "";
-      currentPage.innerHTML = escaped`
-        <img class="offpage" src="${favIconUrl}" /> ${currentTab.title}
-      `;
-
-      const imageElement = currentPage.querySelector("img");
-      const loadListener = (e) => {
-        e.target.classList.remove("offpage");
-        e.target.removeEventListener("load", loadListener);
-        e.target.removeEventListener("error", errorListener);
-      };
-      const errorListener = (e) => {
-        e.target.src = DEFAULT_FAVICON;
-      };
-      imageElement.addEventListener("error", errorListener);
-      imageElement.addEventListener("load", loadListener);
+      currentPage.innerHTML = escaped`${currentTab.title}`;
+      const favIconElement = Utils.createFavIconElement(currentTab.favIconUrl || "");
+      currentPage.prepend(favIconElement);
 
       const currentContainer = document.getElementById("current-container");
       currentContainer.innerText = identity.name;
@@ -645,8 +631,9 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       fragment.appendChild(tr);
       tr.classList.add("container-info-tab-row");
       tr.innerHTML = escaped`
-        <td><img class="icon" src="${tab.favicon}" /></td>
+        <td></td>
         <td class="container-info-tab-title truncate-text">${tab.title}</td>`;
+      tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favicon));
 
       // On click, we activate this tab. But only if this tab is active.
       if (tab.active) {
diff --git a/webextension/js/utils.js b/webextension/js/utils.js
new file mode 100644
index 00000000..5d5046bb
--- /dev/null
+++ b/webextension/js/utils.js
@@ -0,0 +1,23 @@
+const DEFAULT_FAVICON = "moz-icon://goat?size=16";
+
+// TODO use export here instead of globals
+window.Utils = {
+
+  createFavIconElement(url) {
+    const imageElement = document.createElement("img");
+    imageElement.classList.add("icon", "offpage");
+    imageElement.src = url;
+    const loadListener = (e) => {
+      e.target.classList.remove("offpage");
+      e.target.removeEventListener("load", loadListener);
+      e.target.removeEventListener("error", errorListener);
+    };
+    const errorListener = (e) => {
+      e.target.src = DEFAULT_FAVICON;
+    };
+    imageElement.addEventListener("error", errorListener);
+    imageElement.addEventListener("load", loadListener);
+    return imageElement;
+  }
+
+};
diff --git a/webextension/popup.html b/webextension/popup.html
index 25a7d0d1..a524f7eb 100644
--- a/webextension/popup.html
+++ b/webextension/popup.html
@@ -148,7 +148,7 @@ <h4 class="delete-container-confirm-title">Remove This Container</h4>
     </div>
   </div>
 
-
+  <script src="js/utils.js"></script>
   <script src="js/popup.js"></script>
 </body>
 </html>