Fixing favicon loading for all icons. Part of mozilla#561

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     "webextensions": true
   },
   "globals": {
+    "Utils": true,
     "CustomizableUI": true,
     "CustomizableWidgets": true,
     "SessionStore": true,

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>

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) {

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) {

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;
+  }
+
+};

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>