rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace innerText method for showAssignedContainers() function

Browse source
This commit is contained in:
Maxx Crawford 2023-02-13 11:20:52 -06:00
parent 5528084474
commit e92a1ac53b
No known key found for this signature in database
GPG key ID: 71DBD3273B65FEF9
1 changed files with 36 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/js/popup.js
View file

@ -1578,19 +1578,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>
<div class="favicon"></div>
<span title="${site.hostname}" class="menu-text truncate-text">${site.hostname}</span>
<img 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 () => {
// Create <td class="keyboard-nav hover-highlight menu-item">
const trElement = document.createElement("tr");
trElement.classList.add("menu-item", "hover-highlight", "keyboard-nav");
// Create <td>
const tdElement = document.createElement("td");
// 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();
@ -1598,8 +1624,6 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
delete assignments[siteKey];
this.showAssignedContainers(assignments);
});
trElement.classList.add("menu-item", "hover-highlight", "keyboard-nav");
tableElement.appendChild(trElement);
});
}
},