showAssignedContainers()

in src/js/popup.js [1433:1493]

• 54 lines of code
• 5 McCabe index (conditional complexity)

  showAssignedContainers(assignments) {
    const closeContEl = document.querySelector("#close-container-assignment-panel");
    Utils.addEnterHandler(closeContEl, () => {
      const identity = Logic.currentIdentity();
      Logic.showPanel(P_CONTAINER_EDIT, identity, false, false);
    });

    const assignmentPanel = document.getElementById("edit-sites-assigned");
    const assignmentKeys = Object.keys(assignments);
    assignmentPanel.hidden = !(assignmentKeys.length > 0);
    if (assignments) {
      const tableElement = document.querySelector("#edit-sites-assigned");
      /* Remove previous assignment list,
         after removing one we rerender the list */
      while (tableElement.firstChild) {
        tableElement.firstChild.remove();
      }
      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`;
        const resetSiteCookiesInfo = browser.i18n.getMessage("clearSiteCookiesTooltipInfo");
        const deleteSiteInfo = browser.i18n.getMessage("deleteSiteTooltipInfo");
        trElement.innerHTML = Utils.escaped`
        <td>
          <div class="favicon"></div>
          <span title="${site.hostname}" class="menu-text truncate-text">${site.hostname}</span>
          <img title="${resetSiteCookiesInfo}" class="reset-button reset-assignment" src="/img/refresh-16.svg" />
          <img title="${deleteSiteInfo}" class="trash-button delete-assignment"  src="/img/container-delete.svg" />
        </td>`;
        trElement.getElementsByClassName("favicon")[0].appendChild(Utils.createFavIconElement(assumedUrl));
        const deleteButton = trElement.querySelector(".trash-button");
        Utils.addEnterHandler(deleteButton, async () => {
          const userContextId = Logic.currentUserContextId();
          // Lets show the message to the current tab
          // const currentTab = await Utils.currentTab();
          Utils.setOrRemoveAssignment(false, assumedUrl, userContextId, true);
          delete assignments[siteKey];
          this.showAssignedContainers(assignments);
        });
        const resetButton = trElement.querySelector(".reset-button");
        Utils.addEnterHandler(resetButton, async () => {
          const cookieStoreId = Logic.currentCookieStoreId();
          const granted = await browser.permissions.request({ permissions: ["browsingData"] });
          if (!granted) {
            return;
          }
          const result = await Utils.resetCookiesForSite(site.hostname, cookieStoreId);
          if (result === true) {
            Logic.notify({messageId: "cookiesClearedSuccess", placeholders: [site.hostname]});
          } else {
            Logic.notify({messageId: "cookiesCouldNotBeCleared", placeholders: [site.hostname]});
          }
        });
        trElement.classList.add("menu-item", "hover-highlight", "keyboard-nav");
        tableElement.appendChild(trElement);
      });
    }
  },