Fix issue where localizaed text was not being correctly set

src/_locales

@@ -1 +1 @@
-Subproject commit 417e6294ed767914b617a5e56ccbe67482df181c
+Subproject commit af8b98937d8445419fa580ffe41738ca832c2ad1

src/js/pageAction.js

@@ -7,17 +7,35 @@ async function init() {
     tr.classList.add("menu-item", "hover-highlight");
     tr.setAttribute("data-cookie-store-id", identity.cookieStoreId);
     const td = document.createElement("td");
-    td.innerHTML = Utils.escaped`
-        <div class="menu-icon">
-          <div class="usercontext-icon"
-            data-identity-icon="${identity.icon}"
-            data-identity-color="${identity.color}">
-          </div>
-        </div>
-        <span class="menu-text">${identity.name}</span>
-        <img alt="" class="page-action-flag flag-img" src="/img/flags/.png"/>
-        `;
 
+    // Create `<div class="menu-icon">`
+    const fragmentDivMenuIcon = document.createElement("div");
+    fragmentDivMenuIcon.classList.add("menu-icon");
+
+    // Create `<div class="usercontext-icon"`
+    const fragmentDivUserContextIcon= document.createElement("div");
+    fragmentDivUserContextIcon.classList.add("usercontext-icon");
+    fragmentDivUserContextIcon.setAttribute("data-identity-icon", identity.icon);
+    fragmentDivUserContextIcon.setAttribute("data-identity-color", identity.color);
+    fragmentDivMenuIcon.appendChild(fragmentDivUserContextIcon);
+
+    // Append both of <td>
+    td.appendChild(fragmentDivMenuIcon);
+    
+    // Create <span class"menu-text">
+    const fragmentSpanMenuText= document.createElement("span");
+    const fragmentSpanMenuTextContent = document.createTextNode(identity.name);
+    fragmentSpanMenuText.classList.add("menu-text");
+    fragmentSpanMenuText.appendChild(fragmentSpanMenuTextContent);
+    td.appendChild(fragmentSpanMenuText);
+
+    // Create <img class"flag-img">
+    // Note: Flag source is dynamically set via mozillaVpn.js
+    const fragmentImgFlag= document.createElement("img");
+    fragmentImgFlag.classList.add("page-action-flag");
+    fragmentImgFlag.classList.add("flag-img");
+
+    td.appendChild(fragmentImgFlag);
     tr.appendChild(td);
     fragment.appendChild(tr);
 
@@ -28,7 +46,7 @@ async function init() {
   }
 
   const list = document.querySelector("#picker-identities-list");
-  list.innerHTML = "";
+  list.textContent = "";
   list.appendChild(fragment);
 
   MozillaVPN.handleContainerList(identities);

src/js/popup.js

@@ -792,34 +792,69 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       const td = document.createElement("td");
       const openTabs = identity.numberOfOpenTabs || "" ;
 
-      // TODO get UX and content decision on how to message and block clicks to containers with Mozilla VPN proxy configs
+      // TODO: Get UX and content decision on how to message and block clicks to containers with Mozilla VPN proxy configs
       // when Mozilla VPN app is disconnected.
 
-      td.innerHTML = Utils.escaped`
+      // Create <div data-moz-proxy-warning="" class="menu-item-name">
-        <div data-moz-proxy-warning="" class="menu-item-name">
+      const divMenuItemName = document.createElement("div");
-          <div class="menu-icon">
+      divMenuItemName.classList.add("menu-item-name");
+      divMenuItemName.setAttribute("data-moz-proxy-warning", "");
 
-            <div class="usercontext-icon"
+      // Create  <div class="menu-icon">
-              data-identity-icon="${identity.icon}"
+      const divMenuIcon = document.createElement("div");
-              data-identity-color="${identity.color}">
+      divMenuIcon.classList.add("menu-icon");
-            </div>
-          </div>
-          <span class="menu-text">${identity.name}</span>
-        </div>
-        <span class="menu-right-float">
-          <img alt="" class="always-open-in-flag flag-img" src="/img/flags/.png"/>
-          <span class="container-count">${openTabs}</span>
-          <span class="menu-arrow">
-            <img alt="Container Info" src="/img/arrow-icon-right.svg" />
-          </span>
 
-        </span>`;
+      // Create <div class="usercontext-icon" data-identity-icon="${identity.icon}" data-identity-color="${identity.color}"></div>
+      const divUsercontextIcon = document.createElement("div");
+      divUsercontextIcon.classList.add("usercontext-icon");
+      divUsercontextIcon.setAttribute("data-identity-icon", identity.icon);
+      divUsercontextIcon.setAttribute("data-identity-color", identity.color);
       
+      // Create <span class="menu-text">${identity.name}</span>`;
+      const spanMenuText = document.createElement("span");
+      spanMenuText.classList.add("menu-text");
+      spanMenuText.textContent = identity.name;
 
+      // Append Children
+      // td > divMenuItemName > divMenuIcon > divUsercontextIcon
+      divMenuIcon.appendChild(divUsercontextIcon);
+      divMenuItemName.appendChild(divMenuIcon);
+      divMenuItemName.appendChild(spanMenuText);
+      td.appendChild(divMenuItemName);      
 
-      fragment.appendChild(tr);
+      // Create <span class="menu-right-float">
+      const spanMenuRightFloat = document.createElement("span");
+      spanMenuRightFloat.classList.add("menu-right-float");
 
+      // Create <img alt="" class="always-open-in-flag flag-img" src="/img/flags/.png"/>
+      const imgFlag = document.createElement("img");
+      // Note - The image src is dynamically set when a specific country/server is set.
+      imgFlag.classList.add("always-open-in-flag");
+      imgFlag.classList.add("flag-img");
+
+      // Create <span class="container-count">${openTabs}</span>
+      const spanContainerCount = document.createElement("span");
+      spanContainerCount.classList.add("container-count");
+      spanContainerCount.textContent = openTabs;
+
+      // Create  <span class="menu-arrow">
+      const spanMenuArrow = document.createElement("span");
+      spanMenuArrow.classList.add("menu-arrow");
+      
+      // Create <img alt="Container Info" src="/img/arrow-icon-right.svg" />
+      const imgArrowRight = document.createElement("img");
+      imgArrowRight.alt = browser.i18n.getMessage("imageAltContainerInfo");
+      imgArrowRight.src = "/img/arrow-icon-right.svg";
+
+      // Append Children
+      // td > spanMenuRightFloat > imgFlag |  spanContainerCount | (spanMenuArrow > imgArrowRight)
+      spanMenuArrow.appendChild(imgArrowRight);
+      spanMenuRightFloat.appendChild(imgFlag);  
+      spanMenuRightFloat.appendChild(spanContainerCount);  
+      spanMenuRightFloat.appendChild(spanMenuArrow);  
+      td.appendChild(spanMenuRightFloat);  
       tr.appendChild(td);
+      fragment.appendChild(tr);
 
       const openInThisContainer = tr.querySelector(".menu-item-name");
       Utils.addEnterHandler(openInThisContainer, (e) => {
@@ -858,7 +893,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
 
     const list = document.querySelector("#identities-list");
 
-    list.innerHTML = "";
+    list.textContent = "";
     list.appendChild(fragment);
 
     document.addEventListener("keydown", Logic.keyboardNavListener);
@@ -1006,17 +1041,37 @@ Logic.registerPanel(P_CONTAINER_INFO, {
     const fragment = document.createDocumentFragment();
     for (let tab of tabs) { // eslint-disable-line prefer-const
       const tr = document.createElement("tr");
-      fragment.appendChild(tr);
       tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
       tr.setAttribute("tabindex", "0");
-      tr.innerHTML = Utils.escaped`
+
-        <td>
+      // Create <td>
-          <div class="favicon"></div>
+      const tdMenuItem = document.createElement("td");
-          <span title="${tab.url}" class="menu-text truncate-text">${tab.title}</span>
+        
-          <img id="${tab.id}" class="trash-button" src="/img/close.svg" />
+      // Create <div class="favicon"></div> and set context via createFavIconElement()
-        </td>`;
+      const divFavIcon = document.createElement("div");
-      tr.querySelector(".favicon").appendChild(Utils.createFavIconElement(tab.favIconUrl));
+      divFavIcon.classList.add("favicon");
-      tr.setAttribute("tabindex", "0");
+      divFavIcon.appendChild(Utils.createFavIconElement(tab.favIconUrl));
+        
+      // Create <span title="${tab.url}" class="menu-text truncate-text">${tab.title}</span>
+      const spanMenuTruncateText = document.createElement("span");
+      spanMenuTruncateText.classList.add("truncate-text");
+      spanMenuTruncateText.classList.add("menu-text");
+      spanMenuTruncateText.textContent = tab.title;
+      spanMenuTruncateText.title = tab.url;
+        
+      // Create <img id="${tab.id}" class="trash-button" src="/img/close.svg" />
+      const imgTrashButton = document.createElement("img");
+      imgTrashButton.classList.add("trash-button");
+      imgTrashButton.src = "/img/close.svg";
+      imgTrashButton.id = tab.id;
+
+      // Append Children
+      // table > fragment > tr > td > divFavIcon | spanMenuTruncateText | imgTrashButton
+      tdMenuItem.appendChild(divFavIcon);  
+      tdMenuItem.appendChild(spanMenuTruncateText);  
+      tdMenuItem.appendChild(imgTrashButton); 
+      tr.appendChild(tdMenuItem);
+      fragment.appendChild(tr);
       table.appendChild(fragment);
 
       // On click, we activate this tab. But only if this tab is active.
@@ -1064,26 +1119,38 @@ Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, {
       }
     };
 
-    document.getElementById("new-container-div").innerHTML = "";
+    document.getElementById("new-container-div").textContent = "";
 
     Logic.identities().forEach(identity => {
       const tr = document.createElement("tr");
       tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
       tr.setAttribute("tabindex", "0");
+      
+      // Create <td>
       const td = document.createElement("td");
       
-      td.innerHTML = Utils.escaped`
+      // Create <div class="menu-icon"> 
-        <div class="menu-icon">
+      const divMenuIcon = document.createElement("div");
-          <div class="usercontext-icon"
+      divMenuIcon.classList.add("menu-icon");
-            data-identity-icon="${identity.icon}"
-            data-identity-color="${identity.color}">
-          </div>
-        </div>
-        <span class="menu-text">${identity.name}</span>`;
 
-      fragment.appendChild(tr);
+      // Create <div class="usercontext-icon" data-identity-icon="${identity.icon}" data-identity-color="${identity.color}"></div>
+      const divUsercontextIcon = document.createElement("div");
+      divUsercontextIcon.classList.add("usercontext-icon");
+      divUsercontextIcon.setAttribute("data-identity-icon", identity.icon);
+      divUsercontextIcon.setAttribute("data-identity-color", identity.color);
 
+      // Create <span class="menu-text">${identity.name}</span>`;
+      const spanMenuText = document.createElement("span");
+      spanMenuText.classList.add("menu-text");
+      spanMenuText.textContent = identity.name;
+      
+      // Append Children
+      // fragment > tr > td > (divMenuIcon > divMenuIcon) | spanMenuText
+      divMenuIcon.appendChild(divUsercontextIcon);
+      td.appendChild(divMenuIcon);
+      td.appendChild(spanMenuText);
       tr.appendChild(td);
+      fragment.appendChild(tr);
 
       Utils.addEnterHandler(tr, () => {
         pickedFunction(identity);
@@ -1093,7 +1160,7 @@ Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, {
 
     const list = document.querySelector("#picker-identities-list");
 
-    list.innerHTML = "";
+    list.textContent = "";
     list.appendChild(fragment);
 
     return Promise.resolve(null);
@@ -1126,18 +1193,48 @@ Logic.registerPanel(MANAGE_CONTAINERS_PICKER, {
       Logic.showPanel(P_CONTAINER_EDIT, identity);
     };
 
-    document.getElementById("new-container-div").innerHTML = Utils.escaped`
+    const divNewContainer = document.getElementById("new-container-div");
-      <table class="menu">
+    
-        <tr class="menu-item hover-highlight keyboard-nav" id="new-container" tabindex="0">
+    // Create <table class="menu">
-          <td>
+    const tableMenu = document.createElement("table");
-            <div class="menu-icon"><img src="/img/new-16.svg" />
+    tableMenu.classList.add("menu");
-            </div>
+
-            <span class="menu-text">${ browser.i18n.getMessage("newContainer") }</span>
+    // Create <tr class="menu-item hover-highlight keyboard-nav" id="new-container" tabindex="0">
-          </td>
+    const tableRowMenuItem = document.createElement("tr");
-        </tr>
+    tableRowMenuItem.classList.add("menu-item");
-      </table>
+    tableRowMenuItem.classList.add("keyboard-nav");
-      <hr>
+    tableRowMenuItem.classList.add("hover-highlight");
-    `;
+    tableRowMenuItem.id = "new-container";
+    tableRowMenuItem.setAttribute("tabindex", "0");
+
+    // Create <td>
+    const tableData = document.createElement("td");
+    
+    // Create <div class="menu-icon">
+    const divMenuIcon = document.createElement("div");
+    divMenuIcon.classList.add("menu-icon");
+
+    // Create <img src="/img/new-16.svg" />
+    const imgNew = document.createElement("img");
+    imgNew.src = "/img/new-16.svg";
+
+    // Create <span class="menu-text">${ browser.i18n.getMessage("newContainer") }</span>
+    const spanMenuText = document.createElement("span");
+    spanMenuText.classList.add("menu-text");
+    spanMenuText.textContent = browser.i18n.getMessage("newContainer");
+
+    // Create <hr /> 
+    const horizontalRule = document.createElement("hr");
+
+    // Append Children
+    // divNewContainer > ( tableMenu | horizontalRule ) > tableRowMenuItem > tableData > ( divMenuIcon > imgNew ) | spanMenuText
+    divMenuIcon.appendChild(imgNew);
+    tableData.appendChild(divMenuIcon);
+    tableData.appendChild(spanMenuText);
+    tableRowMenuItem.appendChild(tableData);
+    tableMenu.appendChild(tableRowMenuItem);
+    divNewContainer.appendChild(tableMenu);
+    divNewContainer.appendChild(horizontalRule);
 
     Utils.addEnterHandler(document.querySelector("#new-container"), () => {
       Logic.showPanel(P_CONTAINER_EDIT, { name: Logic.generateIdentityName() });
@@ -1151,27 +1248,50 @@ Logic.registerPanel(MANAGE_CONTAINERS_PICKER, {
       tr.setAttribute("tabindex", "0");
       tr.setAttribute("data-cookie-store-id", identity.cookieStoreId);
 
+      // Create <td>
       const td = document.createElement("td");
       
-      td.innerHTML = Utils.escaped`
+      // Create <div class="menu-icon hover-highlight">
-        <div class="menu-icon hover-highlight">
+      const divMenuIcon = document.createElement("div");
-          <div class="usercontext-icon"
+      divMenuIcon.classList.add("menu-icon");
-            data-identity-icon="${identity.icon}"
+      divMenuIcon.classList.add("hover-highlight");
-            data-identity-color="${identity.color}">
-          </div>
-        </div>
-        <span class="menu-text">${identity.name}</span>
-        <img alt="" class="flag-img manage-containers-list-flag" src="/img/flags/.png"/>
-        <span class="move-button">
-          <img
-            class="pop-button-image"
-            src="/img/container-move.svg"
-          />
-        </span>`;
 
-      fragment.appendChild(tr);
+      // Create <div class="usercontext-icon" data-identity-icon="${identity.icon}" data-identity-color="${identity.color}"></div>
+      const divUsercontextIcon = document.createElement("div");
+      divUsercontextIcon.classList.add("usercontext-icon");
+      divUsercontextIcon.setAttribute("data-identity-icon", identity.icon);
+      divUsercontextIcon.setAttribute("data-identity-color", identity.color);
 
+      // Create <span class="menu-text">${identity.name}</span>
+      const spanMenuText = document.createElement("span");
+      spanMenuText.classList.add("menu-text");
+      spanMenuText.textContent = identity.name;
+
+      // Create <img alt="" class="flag-img manage-containers-list-flag" src="/img/flags/.png"/>
+      const imgFlag = document.createElement("img");
+      // Note - The image src is dynamically set when a specific country/server is set.
+      imgFlag.classList.add("manage-containers-list-flag");
+      imgFlag.classList.add("flag-img");
+      
+      // Create <span class="move-button">
+      const spanMoveButton = document.createElement("span");
+      spanMoveButton.classList.add("move-button");
+
+      // Create <img class="pop-button-image" src="/img/container-move.svg" />
+      const imgPopButton = document.createElement("img");
+      imgPopButton.classList.add("pop-button-image");
+      imgPopButton.src = "/img/container-move.svg";
+
+      // Append Children
+      // fragment > tr > td > (divMenuIcon > divUsercontextIcon) | spanMenuText | imgFlag | (spanMoveButton > imgPopButton)
+      divMenuIcon.appendChild(divUsercontextIcon);
+      td.appendChild(divMenuIcon);
+      td.appendChild(spanMenuText);
+      td.appendChild(imgFlag);
+      spanMoveButton.appendChild(imgPopButton);
+      td.appendChild(spanMoveButton);
       tr.appendChild(td);
+      fragment.appendChild(tr);
 
       tr.draggable = true;
       tr.dataset.containerId = identity.cookieStoreId;
@@ -1221,7 +1341,7 @@ Logic.registerPanel(MANAGE_CONTAINERS_PICKER, {
 
     const list = document.querySelector("#picker-identities-list");
 
-    list.innerHTML = "";
+    list.textContent = "";
     list.appendChild(fragment);
 
     MozillaVPN.handleContainerList(identities);
@@ -1258,24 +1378,37 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
       window.close();
     };
 
-    document.getElementById("new-container-div").innerHTML = "";
+    document.getElementById("new-container-div").textContent = "";
 
     if (currentTab.cookieStoreId !== "firefox-default") {
       const tr = document.createElement("tr");
       tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
       tr.setAttribute("tabindex", "0");
+
+      // Create <td>
       const td = document.createElement("td");
       
-      td.innerHTML = Utils.escaped`
+      // Create <div class="menu-icon hover-highlight">
-        <div class="menu-icon hover-highlight">
+      const divMenuIcon = document.createElement("div");
-          <div class="mac-icon">
+      divMenuIcon.classList.add("menu-icon");
-          </div>
+      divMenuIcon.classList.add("hover-highlight");
-        </div>
-        <span class="menu-text">Default Container</span>`;
 
-      fragment.appendChild(tr);
+      // Create <div class="mac-icon">
+      const divMacIcon = document.createElement("div");
+      divMacIcon.classList.add("mac-icon");
 
+      // Create <span class="menu-text">Default Container</span>`;
+      const spanMenuText = document.createElement("span");
+      spanMenuText.classList.add("menu-text");
+      spanMenuText.textContent = browser.i18n.getMessage("defaultContainerLabel");
+
+      // Append Children
+      // fragment > td > (divMenuIcon > divMacIcon) | spanMenuText
+      divMenuIcon.appendChild(divMacIcon);
+      td.appendChild(divMenuIcon);
+      td.appendChild(spanMenuText);
       tr.appendChild(td);
+      fragment.appendChild(tr);
 
       Utils.addEnterHandler(tr, () => {
         Utils.reloadInContainer(
@@ -1294,20 +1427,33 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
         const tr = document.createElement("tr");
         tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
         tr.setAttribute("tabindex", "0");
+
+        // Create <td>
         const td = document.createElement("td");
 
-        td.innerHTML = Utils.escaped`
+        // Create <div class="menu-icon hover-highlight">
-        <div class="menu-icon hover-highlight">
+        const divMenuIcon = document.createElement("div");
-          <div class="usercontext-icon"
+        divMenuIcon.classList.add("menu-icon");
-            data-identity-icon="${identity.icon}"
+        divMenuIcon.classList.add("hover-highlight");
-            data-identity-color="${identity.color}">
-          </div>
-        </div>
-        <span class="menu-text">${identity.name}</span>`;
 
-        fragment.appendChild(tr);
+        // Create <div class="usercontext-icon" data-identity-icon="${identity.icon}" data-identity-color="${identity.color}"></div>
+        const divUsercontextIcon = document.createElement("div");
+        divUsercontextIcon.classList.add("usercontext-icon");
+        divUsercontextIcon.setAttribute("data-identity-icon", identity.icon);
+        divUsercontextIcon.setAttribute("data-identity-color", identity.color);
 
+        // Create <span class="menu-text">${identity.name}</span>`;
+        const spanMenuText = document.createElement("span");
+        spanMenuText.classList.add("menu-text");
+        spanMenuText.textContent = identity.name;
+
+        // Append Children
+        // td > (divMenuIcon > divUsercontextIcon) | spanMenuText
+        divMenuIcon.appendChild(divUsercontextIcon);
+        td.appendChild(divMenuIcon);
+        td.appendChild(spanMenuText);
         tr.appendChild(td);
+        fragment.appendChild(tr);
 
         Utils.addEnterHandler(tr, () => {
           pickedFunction(identity);
@@ -1317,7 +1463,7 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
 
     const list = document.querySelector("#picker-identities-list");
 
-    list.innerHTML = "";
+    list.textContent = "";
     list.appendChild(fragment);
 
     return Promise.resolve(null);
@@ -1341,27 +1487,39 @@ Logic.registerPanel(ALWAYS_OPEN_IN_PICKER, {
     document.getElementById("picker-title").textContent = browser.i18n.getMessage("alwaysOpenIn");
     const fragment = document.createDocumentFragment();
 
-    document.getElementById("new-container-div").innerHTML = "";
+    document.getElementById("new-container-div").textContent = "";
 
     for (const identity of identities) {
       const tr = document.createElement("tr");
       tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
       tr.setAttribute("tabindex", "0");
+
+      // Create <td>
       const td = document.createElement("td");
       
-      td.innerHTML = Utils.escaped`
+      // Create <div class="menu-icon hover-highlight">
-        <div class="menu-icon hover-highlight">
+      const divMenuIcon = document.createElement("div");
-          <div class="usercontext-icon"
+      divMenuIcon.classList.add("menu-icon");
-            data-identity-icon="${identity.icon}"
+      divMenuIcon.classList.add("hover-highlight");
-            data-identity-color="${identity.color}">
-          </div>
-        </div>
-        <span class="menu-text">${identity.name}</span>
-        `;
 
-      fragment.appendChild(tr);
+      // Create <div class="usercontext-icon" data-identity-icon="${identity.icon}" data-identity-color="${identity.color}"></div>
+      const divUsercontextIcon = document.createElement("div");
+      divUsercontextIcon.classList.add("usercontext-icon");
+      divUsercontextIcon.setAttribute("data-identity-icon", identity.icon);
+      divUsercontextIcon.setAttribute("data-identity-color", identity.color);
 
+      // Create <span class="menu-text">${identity.name}</span>`;
+      const spanMenuText = document.createElement("span");
+      spanMenuText.classList.add("menu-text");
+      spanMenuText.textContent = identity.name;
+      
+      // Append Children
+      // fragment > tr > td > (divMenuIcon > divMenuIcon) | spanMenuText
+      divMenuIcon.appendChild(divUsercontextIcon);
+      td.appendChild(divMenuIcon);
+      td.appendChild(spanMenuText);
       tr.appendChild(td);
+      fragment.appendChild(tr);
 
       Utils.addEnterHandler(tr, () => {
         Utils.alwaysOpenInContainer(identity);
@@ -1371,7 +1529,7 @@ Logic.registerPanel(ALWAYS_OPEN_IN_PICKER, {
 
     const list = document.querySelector("#picker-identities-list");
 
-    list.innerHTML = "";
+    list.textContent = "";
     list.appendChild(fragment);
 
     return Promise.resolve(null);
@@ -1391,6 +1549,10 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
   async prepare() {
     const identity = Logic.currentIdentity();
 
+    const editContainerAssignments = document.getElementById("edit-container-assignments");
+    const editSitesAssignedSubheader = editContainerAssignments.querySelector(".sub-header");
+    editSitesAssignedSubheader.textContent = browser.i18n.getMessage("sitesAssignedToThisContainer");
+  
     // Populating the panel: name and icon
     document.getElementById("edit-assignments-title").textContent = identity.name;
 
@@ -1420,19 +1582,45 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
       }
       assignmentKeys.forEach((siteKey) => {
         const site = assignments[siteKey];
-        const trElement = document.createElement("tr");
+
         /* As we don't have the full or correct path the best we can assume is the path is HTTPS and then replace with a broken icon later if it doesn't load.
            This is pending a better solution for favicons from web extensions */
         const assumedUrl = `https://${site.hostname}/favicon.ico`;
-        trElement.innerHTML = Utils.escaped`
+
-        <td>
+        // Create <td class="keyboard-nav hover-highlight menu-item"> 
-          <div class="favicon"></div>
+        const trElement = document.createElement("tr");
-          <span title="${site.hostname}" class="menu-text truncate-text">${site.hostname}</span>
+        trElement.classList.add("menu-item", "hover-highlight", "keyboard-nav");
-          <img class="trash-button delete-assignment" src="/img/container-delete.svg" />
+
-        </td>`;
+        // Create <td>
-        trElement.getElementsByClassName("favicon")[0].appendChild(Utils.createFavIconElement(assumedUrl));
+        const tdElement = document.createElement("td");
-        const deleteButton = trElement.querySelector(".trash-button");
+          
-        Utils.addEnterHandler(deleteButton, async () => {
+        // Create <div class="favicon"></div> and set context via createFavIconElement()
+        const divFavIcon = document.createElement("div");
+        divFavIcon.classList.add("favicon");
+        divFavIcon.appendChild(Utils.createFavIconElement(assumedUrl));
+
+        // Create <span title="${site.hostname}" class="menu-text truncate-text">${site.hostname}</span>
+        const spanHostname = document.createElement("span");
+        spanHostname.classList.add("menu-text");
+        spanHostname.classList.add("truncate-text");
+        spanHostname.title = site.hostname;
+        spanHostname.textContent = site.hostname;
+
+        // Create <img id="${tab.id}" class="trash-button" src="/img/close.svg" />
+        const imgTrashButton = document.createElement("img");
+        imgTrashButton.classList.add("trash-button");
+        imgTrashButton.classList.add("delete-assignment");
+        imgTrashButton.src = "/img/container-delete.svg";
+
+        // Append Children
+        //  tableElement > trElement > tdElement > divFavIcon | spanHostname | imgTrashButton
+        tdElement.appendChild(divFavIcon);
+        tdElement.appendChild(spanHostname);
+        tdElement.appendChild(imgTrashButton);
+        trElement.appendChild(tdElement);
+        tableElement.appendChild(trElement);
+
+        Utils.addEnterHandler(imgTrashButton, async () => {
           const userContextId = Logic.currentUserContextId();
           // Lets show the message to the current tab
           // const currentTab = await Utils.currentTab();
@@ -1440,8 +1628,6 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
           delete assignments[siteKey];
           this.showAssignedContainers(assignments);
         });
-        trElement.classList.add("menu-item", "hover-highlight", "keyboard-nav");
-        tableElement.appendChild(trElement);
       });
     }
   },
@@ -1827,30 +2013,73 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
 
   initializeRadioButtons() {
     const colorRadioTemplate = (containerColor) => {
-      return Utils.escaped`<input type="radio" value="${containerColor}" name="container-color" id="edit-container-panel-choose-color-${containerColor}" />
+      
-     <label for="edit-container-panel-choose-color-${containerColor}" class="usercontext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="${containerColor}">`;
+      // Create <div class="radio-container">
+      const divRadioContainer = document.createElement("div");
+      divRadioContainer.classList.add("radio-container");
+
+      // Create <input type="radio" value="${containerColor}" name="container-color" id="edit-container-panel-choose-color-${containerColor}" />
+      const inputContainerColor = document.createElement("input");
+      inputContainerColor.type = "radio";
+      inputContainerColor.value = containerColor;
+      inputContainerColor.name = "container-color";
+      inputContainerColor.id = `edit-container-panel-choose-color-${containerColor}`;
+      
+      // Create <label for="edit-container-panel-choose-color-${containerColor}" class="usercontext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="${containerColor}">
+      const labelContainerColor = document.createElement("label");
+      labelContainerColor.classList.add("usercontext-icon");
+      labelContainerColor.classList.add("choose-color-icon");
+      labelContainerColor.for = `edit-container-panel-choose-color-${containerColor}`;
+      labelContainerColor.setAttribute("data-identity-icon", "circle");
+      labelContainerColor.setAttribute("data-identity-color", containerColor);
+      
+      // Append Children
+      // divRadioContainer >  inputContainerColor | labelContainerColor
+      divRadioContainer.appendChild(inputContainerColor);
+      divRadioContainer.appendChild(labelContainerColor);
+
+      return divRadioContainer;
     };
+
     const colors = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple"];
     const colorRadioFieldset = document.getElementById("edit-container-panel-choose-color");
     colors.forEach((containerColor) => {
-      const templateInstance = document.createElement("div");
+      const templateInstance = colorRadioTemplate(containerColor);
-      templateInstance.classList.add("radio-container");
-      // eslint-disable-next-line no-unsanitized/property
-      templateInstance.innerHTML = colorRadioTemplate(containerColor);
       colorRadioFieldset.appendChild(templateInstance);
     });
 
     const iconRadioTemplate = (containerIcon) => {
-      return Utils.escaped`<input type="radio" value="${containerIcon}" name="container-icon" id="edit-container-panel-choose-icon-${containerIcon}" />
+      // Create <div class="radio-container">
-     <label for="edit-container-panel-choose-icon-${containerIcon}" class="usercontext-icon choose-color-icon" data-identity-color="grey" data-identity-icon="${containerIcon}">`;
+      const divRadioContainer = document.createElement("div");
+      divRadioContainer.classList.add("radio-container");
+
+      // Create <input type="radio" value="${containerIcon}" name="container-icon" id="edit-container-panel-choose-icon-${containerIcon}" />
+      const inputContainerIcon = document.createElement("input");
+      inputContainerIcon.type = "radio";
+      inputContainerIcon.value = containerIcon;
+      inputContainerIcon.name = "container-icon";
+      inputContainerIcon.id = `edit-container-panel-choose-icon-${containerIcon}`;
+      
+      // Create <label for="edit-container-panel-choose-icon-${containerIcon}" class="usercontext-icon choose-color-icon" data-identity-color="grey" data-identity-icon="${containerIcon}">
+      const labelContainerIcon = document.createElement("label");
+      labelContainerIcon.classList.add("usercontext-icon");
+      labelContainerIcon.classList.add("choose-color-icon");
+      labelContainerIcon.for = `edit-container-panel-choose-icon-${containerIcon}`;
+      labelContainerIcon.setAttribute("data-identity-color", "grey");
+      labelContainerIcon.setAttribute("data-identity-icon", containerIcon);
+      
+      // Append Children
+      // divRadioContainer >  inputContainerIcon | labelContainerIcon
+      divRadioContainer.appendChild(inputContainerIcon);
+      divRadioContainer.appendChild(labelContainerIcon);
+
+      return divRadioContainer;
+
     };
     const icons = ["fingerprint", "briefcase", "dollar", "cart", "vacation", "gift", "food", "fruit", "pet", "tree", "chill", "circle", "fence"];
     const iconRadioFieldset = document.getElementById("edit-container-panel-choose-icon");
     icons.forEach((containerIcon) => {
-      const templateInstance = document.createElement("div");
+      const templateInstance = iconRadioTemplate(containerIcon);
-      templateInstance.classList.add("radio-container");
-      // eslint-disable-next-line no-unsanitized/property
-      templateInstance.innerHTML = iconRadioTemplate(containerIcon);
       iconRadioFieldset.appendChild(templateInstance);
     });
   },

src/popup.html

@@ -385,7 +385,9 @@
     <button class="btn-return arrow-left controller" id="close-container-assignment-panel"></button>
     <hr>
     <div class="scrollable edit-sites-assigned">
-      <div class="sub-header" data-i18n-attribute-message-id="sitesAssignedToThisContainer"></div>
+      <div class="sub-header-wrapper">
+        <div class="sub-header" data-i18n-attribute-message-id="sitesAssignedToThisContainer"></div>
+      </div>
       <table class="menu scrollable" id="edit-sites-assigned">
         <tr class="menu-item hover-highlight" tabindex="0">
           <td>