Let's use a DocumentFragment instead innerHTML

webextension/js/popup.js

@@ -3,18 +3,22 @@ const CONTAINER_HIDE_SRC = '/img/container-hide.svg';
 const CONTAINER_UNHIDE_SRC = '/img/container-unhide.svg';
 
 function showOrHideContainerTabs(userContextId, hasHiddenTabs) {
-  return new Promise((resolve, reject) => {
+  // Let's show/hide the tabs
-    const hideorshowIcon = document.querySelector(`#uci-${userContextId}-hideorshow-icon`);
+  return browser.runtime.sendMessage({
-
-    browser.runtime.sendMessage({
     method: hasHiddenTabs ? 'showTabs' : 'hideTabs',
     userContextId: userContextId
-    }).then(() => {
+  })
+  // We need to retrieve the new identity configuration in order to choose the
+  // correct icon.
+  .then(() => {
     return browser.runtime.sendMessage({
       method: 'getIdentity',
       userContextId: userContextId
     });
-    }).then((identity) => {
+  })
+  // Let's update the icon.
+  .then((identity) => {
+    let hideorshowIcon = document.querySelector(`#uci-${identity.userContextId}-hideorshow-icon`);
     if (!identity.hasHiddenTabs && !identity.hasOpenTabs) {
       hideorshowIcon.style.display = "none";
     } else {
@@ -22,12 +26,14 @@ function showOrHideContainerTabs(userContextId, hasHiddenTabs) {
     }
 
     hideorshowIcon.src = hasHiddenTabs ? CONTAINER_HIDE_SRC : CONTAINER_UNHIDE_SRC;
-    }).then(resolve);
+
+    // The new identity is returned.
+    return identity;
   });
 }
 
 if (localStorage.getItem('onboarded2')) {
-  for (const element of document.querySelectorAll('.onboarding')) {
+  for (let element of document.querySelectorAll('.onboarding')) {
     element.classList.add('hide');
   }
   document.querySelector('#container-panel').classList.remove('hide');
@@ -39,32 +45,34 @@ if (localStorage.getItem('onboarded2')) {
   document.querySelector('#container-panel').classList.add('hide');
 }
 
-document.querySelector('#onboarding-next-button').addEventListener('click', ()=> {
+document.querySelector('#onboarding-next-button').addEventListener('click', () => {
   localStorage.setItem('onboarded1', true);
   document.querySelector('.onboarding-panel-2').classList.remove('hide');
   document.querySelector('.onboarding-panel-1').classList.add('hide');
   document.querySelector('#container-panel').classList.add('hide');
 });
 
-document.querySelector('#onboarding-done-button').addEventListener('click', ()=> {
+document.querySelector('#onboarding-done-button').addEventListener('click', () => {
   localStorage.setItem('onboarded2', true);
   document.querySelector('.onboarding-panel-1').classList.add('hide');
   document.querySelector('.onboarding-panel-2').classList.add('hide');
   document.querySelector('#container-panel').classList.remove('hide');
 });
 
-browser.runtime.sendMessage({method: 'queryIdentities'}).then(identities=> {
+browser.runtime.sendMessage({method: 'queryIdentities'}).then(identities => {
-  const identitiesListElement = document.querySelector('.identities-list');
+  let fragment = document.createDocumentFragment();
 
-  identities.forEach(identity=> {
+  identities.forEach(identity => {
     let hideOrShowIconSrc = CONTAINER_HIDE_SRC;
 
     if (identity.hasHiddenTabs) {
       hideOrShowIconSrc = CONTAINER_UNHIDE_SRC;
     }
 
-    const identityRow = `
+    let tr = document.createElement('tr');
-    <tr data-identity-cookie-store-id="${identity.userContextId}" >
+    fragment.appendChild(tr);
+    tr.setAttribute('data-identity-cookie-store-id', identity.userContextId);
+    tr.innerHTML = `
       <td>
         <div class="userContext-icon"
           data-identity-icon="${identity.image}"
@@ -87,58 +95,49 @@ browser.runtime.sendMessage({method: 'queryIdentities'}).then(identities=> {
           src="${hideOrShowIconSrc}"
         />
       </td>
-      <td>&gt;</td>
+      <td>&gt;</td>`;
-    </tr>`;
-
-    identitiesListElement.innerHTML += identityRow;
 
     // No tabs, no icon.
     if (!identity.hasHiddenTabs && !identity.hasOpenTabs) {
-      const hideorshowIcon = document.querySelector(`#uci-${identity.userContextId}-hideorshow-icon`);
+      let hideorshowIcon = fragment.querySelector(`#uci-${identity.userContextId}-hideorshow-icon`);
       hideorshowIcon.style.display = "none";
     }
-  });
-
-  const rows = identitiesListElement.querySelectorAll('tr');
-
-  rows.forEach(row=> {
-    row.addEventListener('click', e=> {
-      const userContextId = e.target.parentElement.parentElement.dataset.identityCookieStoreId;
 
+    tr.addEventListener('click', e => {
       if (e.target.matches('.hideorshow-icon')) {
-        browser.runtime.sendMessage({
+        showOrHideContainerTabs(identity.userContextId,
-          method: 'getIdentity',
+                                identity.hasHiddenTabs).then(i => {
-          userContextId
+          identity = i
-        }).then(identity=> {
-          showOrHideContainerTabs(userContextId, identity.hasHiddenTabs);
         });
       } else if (e.target.matches('.newtab-icon')) {
-        showOrHideContainerTabs(userContextId, true).then(() => {
+        showOrHideContainerTabs(identity.userContextId, true).then(() => {
           browser.runtime.sendMessage({
             method: 'openTab',
-            userContextId: userContextId})
+            userContextId: identity.userContextId,
-          .then(() => {
+          }).then(() => {
             window.close();
           });
         });
       }
     });
   });
+
+  document.querySelector('.identities-list').appendChild(fragment);
 });
 
-document.querySelector('#edit-containers-link').addEventListener('click', ()=> {
+document.querySelector('#edit-containers-link').addEventListener('click', () => {
   browser.runtime.sendMessage({
     method: 'openTab',
     url: "about:preferences#containers"
-  }).then(()=> {
+  }).then(() => {
     window.close();
   });
 });
 
-document.querySelector('#sort-containers-link').addEventListener('click', ()=> {
+document.querySelector('#sort-containers-link').addEventListener('click', () => {
   browser.runtime.sendMessage({
     method: 'sortTabs'
-  }).then(()=> {
+  }).then(() => {
     window.close();
   });
 });