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

Merge pull request #204 from mozilla/restyle-popup

Browse Source 
Clean up panel for launch
This commit is contained in:
luke crouch
2017-02-19 19:08:19 -06:00
committed by GitHub
parent d82dfb0a57 7f6b37db94
commit fb0fb45f79
4 changed files with 484 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webextension/js/popup.js
+36 -29
View File
@@ -105,7 +105,7 @@ const Logic = {
},
generateIdentityName() {
const defaultName = "Container";
const defaultName = "Container #";
const ids = [];
// This loop populates the 'ids' array with all the already-used ids.
@@ -227,25 +227,33 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
Logic.identities().forEach(identity => {
const hasTabs = (identity.hasHiddenTabs || identity.hasOpenTabs);
const arrowClass = hasTabs ? "show-tabs-img" : "no-tabs-img";
const tr = document.createElement("tr");
fragment.appendChild(tr);
const context = document.createElement("td");
const manage = document.createElement("td");
tr.classList.add("container-panel-row");
if (hasTabs) {
tr.classList.add("container-panel-row", "clickable");
}
tr.innerHTML = `
<td>
<div class="userContext-icon open-newtab"
context.classList.add("userContext-wrapper", "open-newtab", "clickable");
manage.classList.add("show-tabs", "pop-button");
context.innerHTML = `
<div class="userContext-icon-wrapper open-newtab">
<div class="userContext-icon"
data-identity-icon="${identity.image}"
data-identity-color="${identity.color}">
</div>
</td>
<td class="container-name">${identity.name}</td>
<td class="show-tabs"><img src="/img/container-arrow.svg" class="show-tabs ${arrowClass}" /></td>`;
</div>
<div class="container-name">${identity.name}</div>`;
manage.innerHTML = "<img src='/img/container-arrow.svg' class='show-tabs pop-button-image-small' />";
fragment.appendChild(tr);
tr.appendChild(context);
if (hasTabs) {
tr.appendChild(manage);
}
tr.addEventListener("click", e => {
if (e.target.matches(".open-newtab")) {
if (e.target.matches(".open-newtab") || e.target.parentNode.matches(".open-newtab")) {
browser.runtime.sendMessage({
method: "openTab",
userContextId: identity.userContextId,
@@ -324,7 +332,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC;
const hideShowLabel = document.getElementById("container-info-hideorshow-label");
hideShowLabel.innerText = identity.hasHiddenTabs ? "Show these container tabs" : "Hide these container tabs";
hideShowLabel.innerText = identity.hasHiddenTabs ? "Show this container" : "Hide this container";
// Let's remove all the previous tabs.
const table = document.getElementById("container-info-table");
@@ -378,10 +386,6 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
// This method is called when the object is registered.
initialize() {
document.querySelector("#edit-containers-add-link").addEventListener("click", () => {
Logic.showPanel(P_CONTAINER_EDIT, { name: Logic.generateIdentityName() });
});
document.querySelector("#exit-edit-mode-link").addEventListener("click", () => {
Logic.showPanel(P_CONTAINERS_LIST);
});
@@ -393,32 +397,35 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
Logic.identities().forEach(identity => {
const tr = document.createElement("tr");
fragment.appendChild(tr);
tr.classList.add("container-panel-row");
tr.innerHTML = `
<td>
<div class="userContext-icon"
data-identity-icon="${identity.image}"
data-identity-color="${identity.color}">
<td class="userContext-wrapper">
<div class="userContext-icon-wrapper">
<div class="userContext-icon"
data-identity-icon="${identity.image}"
data-identity-color="${identity.color}">
</div>
</div>
<div class="container-name">${identity.name}</div>
</td>
<td class="container-name">${identity.name}</td>
<td class="edit-container">
<td class="edit-container pop-button edit-container-icon">
<img
title="Edit ${identity.name} container"
src="/img/container-edit.svg"
class="icon edit-container-icon clickable" />
class="pop-button-image" />
</td>
<td class="remove-container" >
<td class="remove-container pop-button delete-container-icon" >
<img
title="Remove ${identity.name} container"
class="icon delete-container-icon clickable"
class="pop-button-image"
src="/img/container-delete.svg"
/>
</td>`;
tr.addEventListener("click", e => {
if (e.target.matches(".edit-container-icon")) {
if (e.target.matches(".edit-container-icon") || e.target.parentNode.matches(".edit-container-icon")) {
Logic.showPanel(P_CONTAINER_EDIT, identity);
} else if (e.target.matches(".delete-container-icon")) {
} else if (e.target.matches(".delete-container-icon") || e.target.parentNode.matches(".delete-container-icon")) {
Logic.showPanel(P_CONTAINER_DELETE, identity);
}
});