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

Replace innerText method for MANAGE_CONTAINERS_PICKER function

Browse source
This commit is contained in:
Maxx Crawford 2023-02-13 10:57:44 -06:00
parent 4651dfe2eb
commit c9d8c1bb74
No known key found for this signature in database
GPG key ID: 71DBD3273B65FEF9
1 changed files with 81 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
src/js/popup.js
View file

@ -1193,18 +1193,48 @@ Logic.registerPanel(MANAGE_CONTAINERS_PICKER, {
Logic.showPanel(P_CONTAINER_EDIT, identity); 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"), () => { Utils.addEnterHandler(document.querySelector("#new-container"), () => {
Logic.showPanel(P_CONTAINER_EDIT, { name: Logic.generateIdentityName() }); Logic.showPanel(P_CONTAINER_EDIT, { name: Logic.generateIdentityName() });
@ -1218,27 +1248,50 @@ Logic.registerPanel(MANAGE_CONTAINERS_PICKER, {
tr.setAttribute("tabindex", "0"); tr.setAttribute("tabindex", "0");
tr.setAttribute("data-cookie-store-id", identity.cookieStoreId); tr.setAttribute("data-cookie-store-id", identity.cookieStoreId);
// Create <td>
const td = document.createElement("td"); const td = document.createElement("td");
// Create <div class="menu-icon hover-highlight">
const divMenuIcon = document.createElement("div");
divMenuIcon.classList.add("menu-icon");
divMenuIcon.classList.add("hover-highlight");
td.innerHTML = Utils.escaped` // Create <div class="usercontext-icon" data-identity-icon="${identity.icon}" data-identity-color="${identity.color}"></div>
<div class="menu-icon hover-highlight"> const divUsercontextIcon = document.createElement("div");
<div class="usercontext-icon" divUsercontextIcon.classList.add("usercontext-icon");
data-identity-icon="${identity.icon}" divUsercontextIcon.setAttribute("data-identity-icon", identity.icon);
data-identity-color="${identity.color}"> divUsercontextIcon.setAttribute("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 <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); tr.appendChild(td);
fragment.appendChild(tr);
tr.draggable = true; tr.draggable = true;
tr.dataset.containerId = identity.cookieStoreId; tr.dataset.containerId = identity.cookieStoreId;