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

cherry picked

Browse source
This commit is contained in:
Kendall Werts 2020-02-17 16:43:04 -06:00
parent abc491cb60
commit 4bafb787a3
3 changed files with 254 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
src/css/popup.css
View file

@ -830,9 +830,9 @@ span ~ .panel-header-text {
overflow: hidden; /* Bugfix: issue 948 */ overflow: hidden; /* Bugfix: issue 948 */
} }
#edit-sites-assigned { /*#edit-sites-assigned {
flex: 1000; /* Bugfix: issue 948 */ flex: 1000; /* Bugfix: issue 948
} }*/
#edit-sites-assigned h3 { #edit-sites-assigned h3 {
font-size: 14px; font-size: 14px;
@ -867,7 +867,7 @@ span ~ .panel-header-text {
.radio-choice > .radio-container { .radio-choice > .radio-container {
align-items: center; align-items: center;
block-size: 29px; block-size: 25px;
display: flex; display: flex;
flex: 0 0 calc(100% / var(--icon-fit)); flex: 0 0 calc(100% / var(--icon-fit));
} }
@ -927,7 +927,7 @@ span ~ .panel-header-text {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
inline-size: 100%; inline-size: 80%;
margin-block-end: 10px; margin-block-end: 10px;
margin-inline-end: 0; margin-inline-end: 0;
margin-inline-start: 0; margin-inline-start: 0;
@ -952,10 +952,17 @@ span ~ .panel-header-text {
padding-inline-start: 5px; padding-inline-start: 5px;
} }
.edit-container-panel legend { .edit-container-panel legend,
.options-header{
flex: 1 0; flex: 1 0;
font-size: 14px !important; font-size: 14px !important;
padding-block-end: 6px; margin-block-end: 4px;
margin-block-start: -6px;
}
.options-header {
margin-block-start: 6px;
margin-block-end: 8px;
} }
/* Achievement panel elements */ /* Achievement panel elements */
@ -1106,6 +1113,11 @@ hr {
padding: 0 16px 0 16px; padding: 0 16px 0 16px;
} }
.edit-form {
color: #737373;
padding: 0 16px 0 16px;
}
.identities-list { .identities-list {
margin: 0 0 41px 0; margin: 0 0 41px 0;
} }
@ -1122,6 +1134,28 @@ hr {
width: 100%; width: 100%;
} }
.delete-container {
background-color: #FFFFFF;
border-top: solid 1px #e3e3e3;
cursor: default;
height: 65px;
padding: 9px 18px 27px 17px;
position: fixed;
bottom: 0px;
width: 100%;
}
.delete-btn {
height: 30px;
line-height: 30px;
cursor: pointer;
width: 100%;
border: 0px;
border-radius: 2px;
background-color: rgba(12,12,13,0.1);
text-align: center;
}
.menu-panel { .menu-panel {
justify-content: flex-start; justify-content: flex-start;
} }
@ -1137,3 +1171,36 @@ hr {
background-image: url("/img/arrow-icon-left.svg"); background-image: url("/img/arrow-icon-left.svg");
cursor: pointer; cursor: pointer;
} }
input {
border: solid 1px #BEBEBE;
border-radius: 2px;
}
.form-header {
height: 23px;
line-height: 23px;
padding: 0 0 0 0;
}
#edit-container-panel-name-input {
height: 29px;
}
.container-options {
height: 23px;
}
#site-isolation {
position: fixed;
bottom: auto;
}
.options-label {
padding-inline-start: 25px;
cursor: pointer;
}
#manage-assigned-sites-list {
color: #5A9DE6;
}

198
src/js/popup.js
View file

@ -25,6 +25,7 @@ const P_CONTAINER_INFO = "containerInfo";
const P_CONTAINER_EDIT = "containerEdit"; const P_CONTAINER_EDIT = "containerEdit";
const P_CONTAINER_DELETE = "containerDelete"; const P_CONTAINER_DELETE = "containerDelete";
const P_CONTAINERS_ACHIEVEMENT = "containersAchievement"; const P_CONTAINERS_ACHIEVEMENT = "containersAchievement";
const P_CONTAINER_ASSIGNMENTS = "containerAssignments";
async function getExtensionInfo() { async function getExtensionInfo() {
@ -168,19 +169,19 @@ const Logic = {
}, },
_disableMoveTabs(message) { _disableMoveTabs(message) {
const moveTabsEl = document.querySelector("#container-info-movetabs"); // const moveTabsEl = document.querySelector("#container-info-movetabs");
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();
const incompatEl = document.createElement("div"); const incompatEl = document.createElement("div");
moveTabsEl.classList.remove("clickable"); // moveTabsEl.classList.remove("clickable");
moveTabsEl.setAttribute("title", message); // moveTabsEl.setAttribute("title", message);
fragment.appendChild(incompatEl); fragment.appendChild(incompatEl);
incompatEl.setAttribute("id", "container-info-movetabs-incompat"); incompatEl.setAttribute("id", "container-info-movetabs-incompat");
incompatEl.textContent = message; incompatEl.textContent = message;
incompatEl.classList.add("container-info-tab-row"); incompatEl.classList.add("container-info-tab-row");
moveTabsEl.parentNode.insertBefore(fragment, moveTabsEl.nextSibling); // moveTabsEl.parentNode.insertBefore(fragment, moveTabsEl.nextSibling);
}, },
async refreshIdentities() { async refreshIdentities() {
@ -741,21 +742,6 @@ Logic.registerPanel(P_CONTAINER_INFO, {
Utils.addEnterHandler(closeContEl, () => { Utils.addEnterHandler(closeContEl, () => {
Logic.showPreviousPanel(); Logic.showPreviousPanel();
}); });
// const hideContEl = document.querySelector("#container-info-hideorshow");
// hideContEl.setAttribute("tabindex", "0");
// Utils.addEnterHandler(hideContEl, async () => {
// const identity = Logic.currentIdentity();
// try {
// browser.runtime.sendMessage({
// method: identity.hasHiddenTabs ? "showTabs" : "hideTabs",
// windowId: browser.windows.WINDOW_ID_CURRENT,
// cookieStoreId: Logic.currentCookieStoreId()
// });
// window.close();
// } catch (e) {
// window.close();
// }
// });
// Check if the user has incompatible add-ons installed // Check if the user has incompatible add-ons installed
let incompatible = false; let incompatible = false;
@ -766,8 +752,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
} catch (e) { } catch (e) {
throw new Error("Could not check for incompatible add-ons."); throw new Error("Could not check for incompatible add-ons.");
} }
// const moveTabsEl = document.querySelector("#container-info-movetabs");
// moveTabsEl.setAttribute("tabindex","0");
const numTabs = await Logic.numTabs(); const numTabs = await Logic.numTabs();
if (incompatible) { if (incompatible) {
Logic._disableMoveTabs("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs."); Logic._disableMoveTabs("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs.");
@ -776,14 +761,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
Logic._disableMoveTabs("Cannot move a tab from a single-tab window."); Logic._disableMoveTabs("Cannot move a tab from a single-tab window.");
return; return;
} }
// Utils.addEnterHandler(moveTabsEl, async () => {
// await browser.runtime.sendMessage({
// method: "moveTabsToWindow",
// windowId: browser.windows.WINDOW_ID_CURRENT,
// cookieStoreId: Logic.currentIdentity().cookieStoreId,
// });
// window.close();
// });
const manageContainer = document.querySelector("#manage-container-link"); const manageContainer = document.querySelector("#manage-container-link");
Utils.addEnterHandler(manageContainer, async () => { Utils.addEnterHandler(manageContainer, async () => {
Logic.showPanel(P_CONTAINER_EDIT, Logic.currentIdentity()); Logic.showPanel(P_CONTAINER_EDIT, Logic.currentIdentity());
@ -797,21 +775,11 @@ Logic.registerPanel(P_CONTAINER_INFO, {
// Populating the panel: name and icon // Populating the panel: name and icon
document.getElementById("container-info-title").textContent = identity.name; document.getElementById("container-info-title").textContent = identity.name;
// const icon = document.getElementById("container-info-icon");
// icon.setAttribute("data-identity-icon", identity.icon);
// icon.setAttribute("data-identity-color", identity.color);
// Show or not the has-tabs section. // Show or not the has-tabs section.
for (let trHasTabs of document.getElementsByClassName("container-info-has-tabs")) { // eslint-disable-line prefer-const for (let trHasTabs of document.getElementsByClassName("container-info-has-tabs")) { // eslint-disable-line prefer-const
trHasTabs.style.display = !identity.hasHiddenTabs && !identity.hasOpenTabs ? "none" : ""; trHasTabs.style.display = !identity.hasHiddenTabs && !identity.hasOpenTabs ? "none" : "";
} }
// const hideShowIcon = document.getElementById("container-info-hideorshow-icon");
// hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC;
// const hideShowLabel = document.getElementById("container-info-hideorshow-label");
// hideShowLabel.textContent = identity.hasHiddenTabs ? "Show this container" : "Hide this container";
// Let's remove all the previous tabs. // Let's remove all the previous tabs.
const table = document.getElementById("container-info-table"); const table = document.getElementById("container-info-table");
while (table.firstChild) { while (table.firstChild) {
@ -886,9 +854,12 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
// This method is called when the object is registered. // This method is called when the object is registered.
initialize() { initialize() {
// Utils.addEnterHandler(document.querySelector("#exit-edit-mode-link"), () => { const closeContEl = document.querySelector("#close-container-picker-panel");
// Logic.showPanel(P_CONTAINERS_LIST); closeContEl.setAttribute("tabindex", "0");
// }); closeContEl.classList.add("firstTabindex");
Utils.addEnterHandler(closeContEl, () => {
Logic.showPreviousPanel();
});
}, },
// This method is called when the panel is shown. // This method is called when the panel is shown.
@ -897,6 +868,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
let pickedFunction; let pickedFunction;
switch (Logic.pickerType) { switch (Logic.pickerType) {
case OPEN_NEW_CONTAINER_PICKER: case OPEN_NEW_CONTAINER_PICKER:
document.getElementById("picker-title").textContent = "Open a New Tab in";
pickedFunction = function (identity) { pickedFunction = function (identity) {
try { try {
browser.tabs.create({ browser.tabs.create({
@ -909,11 +881,13 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
}; };
break; break;
case MANAGE_CONTAINERS_PICKER: case MANAGE_CONTAINERS_PICKER:
document.getElementById("picker-title").textContent = "Manage Containers";
pickedFunction = function (identity) { pickedFunction = function (identity) {
Logic.showPanel(P_CONTAINER_EDIT, identity); Logic.showPanel(P_CONTAINER_EDIT, identity);
}; };
break; break;
case REOPEN_IN_CONTAINER: case REOPEN_IN_CONTAINER:
document.getElementById("picker-title").textContent = "Reopen This Site in";
pickedFunction = async function (identity) { pickedFunction = async function (identity) {
const currentTab = await Utils.currentTab(); const currentTab = await Utils.currentTab();
const newUserContextId = Utils.userContextId(identity.cookieStoreId); const newUserContextId = Utils.userContextId(identity.cookieStoreId);
@ -930,6 +904,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
break; break;
case ALWAYS_OPEN_IN_PICKER: case ALWAYS_OPEN_IN_PICKER:
default: default:
document.getElementById("picker-title").textContent = "Always Open This Site in";
pickedFunction = async function (identity) { pickedFunction = async function (identity) {
const currentTab = await Utils.currentTab(); const currentTab = await Utils.currentTab();
const assignedUserContextId = Utils.userContextId(identity.cookieStoreId); const assignedUserContextId = Utils.userContextId(identity.cookieStoreId);
@ -976,63 +951,45 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
}, },
}); });
// P_CONTAINER_EDIT: Editor for a container. Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
// ---------------------------------------------------------------------------- panelSelector: "#edit-container-assignments",
Logic.registerPanel(P_CONTAINER_EDIT, {
panelSelector: "#edit-container-panel",
// This method is called when the object is registered. // This method is called when the object is registered.
initialize() { initialize() {
this.initializeRadioButtons(); const closeContEl = document.querySelector("#close-container-assignment-panel");
closeContEl.setAttribute("tabindex", "0");
Utils.addEnterHandler(document.querySelector("#edit-container-panel-back-arrow"), () => { closeContEl.classList.add("firstTabindex");
const formValues = new FormData(this._editForm); Utils.addEnterHandler(closeContEl, () => {
if (formValues.get("container-id") !== NEW_CONTAINER_ID) {
this._submitForm();
} else {
Logic.showPreviousPanel();
}
});
Utils.addEnterHandler(document.querySelector("#edit-container-cancel-link"), () => {
Logic.showPreviousPanel(); Logic.showPreviousPanel();
}); });
this._editForm = document.getElementById("edit-container-panel-form");
const editLink = document.querySelector("#edit-container-ok-link");
Utils.addEnterHandler(editLink, () => {
this._submitForm();
});
editLink.addEventListener("submit", () => {
this._submitForm();
});
this._editForm.addEventListener("submit", () => {
this._submitForm();
});
}, },
async _submitForm() { // This method is called when the panel is shown.
const formValues = new FormData(this._editForm); async prepare() {
try { const identity = Logic.currentIdentity();
await browser.runtime.sendMessage({
method: "createOrUpdateContainer", // Populating the panel: name and icon
message: { document.getElementById("container-assignments-title").textContent = identity.name;
userContextId: formValues.get("container-id") || NEW_CONTAINER_ID,
params: { const userContextId = Logic.currentUserContextId();
name: document.getElementById("edit-container-panel-name-input").value || Logic.generateIdentityName(), const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
icon: formValues.get("container-icon") || DEFAULT_ICON, this.showAssignedContainers(assignments);
color: formValues.get("container-color") || DEFAULT_COLOR,
} document.querySelector("#edit-container-panel-name-input").value = identity.name || "";
} document.querySelector("#edit-container-panel-usercontext-input").value = userContextId || NEW_CONTAINER_ID;
const containerName = document.querySelector("#edit-container-panel-name-input");
window.requestAnimationFrame(() => {
containerName.select();
containerName.focus();
}); });
await Logic.refreshIdentities(); [...document.querySelectorAll("[name='container-color']")].forEach(colorInput => {
Logic.showPreviousPanel(); colorInput.checked = colorInput.value === identity.color;
} catch (e) { });
Logic.showPanel(P_CONTAINERS_LIST); [...document.querySelectorAll("[name='container-icon']")].forEach(iconInput => {
} iconInput.checked = iconInput.value === identity.icon;
});
return Promise.resolve(null);
}, },
showAssignedContainers(assignments) { showAssignedContainers(assignments) {
@ -1079,6 +1036,52 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
}); });
} }
}, },
});
// P_CONTAINER_EDIT: Editor for a container.
// ----------------------------------------------------------------------------
Logic.registerPanel(P_CONTAINER_EDIT, {
panelSelector: "#edit-container-panel",
// This method is called when the object is registered.
initialize() {
this.initializeRadioButtons();
Utils.addEnterHandler(document.querySelector("#close-container-edit-panel"), () => {
const formValues = new FormData(this._editForm);
if (formValues.get("container-id") !== NEW_CONTAINER_ID) {
this._submitForm();
} else {
Logic.showPreviousPanel();
}
});
this._editForm = document.getElementById("edit-container-panel-form");
this._editForm.addEventListener("submit", () => {
this._submitForm();
});
},
async _submitForm() {
const formValues = new FormData(this._editForm);
try {
await browser.runtime.sendMessage({
method: "createOrUpdateContainer",
message: {
userContextId: formValues.get("container-id") || NEW_CONTAINER_ID,
params: {
name: document.getElementById("edit-container-panel-name-input").value || Logic.generateIdentityName(),
icon: formValues.get("container-icon") || DEFAULT_ICON,
color: formValues.get("container-color") || DEFAULT_COLOR,
}
}
});
await Logic.refreshIdentities();
Logic.showPreviousPanel();
} catch (e) {
Logic.showPanel(P_CONTAINERS_LIST);
}
},
initializeRadioButtons() { initializeRadioButtons() {
const colorRadioTemplate = (containerColor) => { const colorRadioTemplate = (containerColor) => {
@ -1114,11 +1117,16 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
async prepare() { async prepare() {
const identity = Logic.currentIdentity(); const identity = Logic.currentIdentity();
const userContextId = Logic.currentUserContextId(); // Populating the panel: name and icon
const assignments = await Logic.getAssignmentObjectByContainer(userContextId); document.getElementById("container-edit-title").textContent = identity.name;
this.showAssignedContainers(assignments);
document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId;
const userContextId = Logic.currentUserContextId();
// const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
// this.showAssignedContainers(assignments);
// document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId;
Utils.addEnterHandler(document.querySelector("#manage-assigned-sites-list"), () => {
Logic.showPanel(P_CONTAINER_ASSIGNMENTS, identity);
});
document.querySelector("#edit-container-panel-name-input").value = identity.name || ""; document.querySelector("#edit-container-panel-name-input").value = identity.name || "";
document.querySelector("#edit-container-panel-usercontext-input").value = userContextId || NEW_CONTAINER_ID; document.querySelector("#edit-container-panel-usercontext-input").value = userContextId || NEW_CONTAINER_ID;
const containerName = document.querySelector("#edit-container-panel-name-input"); const containerName = document.querySelector("#edit-container-panel-name-input");

76
src/popup.html
View file

@ -193,9 +193,10 @@
<div class="panel menu-panel container-picker-panel hide" id="container-picker-panel"> <div class="panel menu-panel container-picker-panel hide" id="container-picker-panel">
<h3 class="title"> <h3 class="title" id="picker-title">
Multi-Account Containers Multi-Account Containers
</h3> </h3>
<button class="btn-return arrow-left" id="close-container-picker-panel"></button>
<hr> <hr>
<div class="scrollable identities-list"> <div class="scrollable identities-list">
<table class="menu" id="picker-identities-list"> <table class="menu" id="picker-identities-list">
@ -219,12 +220,13 @@
</div> </div>
<div class="panel edit-container-panel hide" id="edit-container-panel"> <!-- <div class="panel menu-panel edit-container-panel hide" id="edit-container-panel">
<div class="columns"> <h3 class="title" id="container-edit-titl">
<div class="panel-back-arrow" id="edit-container-panel-back-arrow"> Default
<img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" /> </h3>
</div> <button class="btn-return arrow-left" id="close-container-edit-panel"></button>
<div class="column-panel-content"> <hr>
<div class="scrollable edit-form">
<form id="edit-container-panel-form"> <form id="edit-container-panel-form">
<input type="hidden" name="container-id" id="edit-container-panel-usercontext-input" /> <input type="hidden" name="container-id" id="edit-container-panel-usercontext-input" />
<fieldset> <fieldset>
@ -232,20 +234,68 @@
<input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/> <input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/>
</fieldset> </fieldset>
<fieldset id="edit-container-panel-choose-color" class="radio-choice"> <fieldset id="edit-container-panel-choose-color" class="radio-choice">
<legend>Choose a color</legend> <legend>Color</legend>
</fieldset> </fieldset>
<fieldset id="edit-container-panel-choose-icon" class="radio-choice"> <fieldset id="edit-container-panel-choose-icon" class="radio-choice">
<legend>Choose an icon</legend> <legend>Icon</legend>
</fieldset> </fieldset>
</form> </form>
<div id="edit-sites-assigned" class="scrollable" hidden> <div id="edit-sites-assigned" class="scrollable" hidden>
<h3>Sites assigned to this container</h3> <div class="assigned-sites">Sites assigned to this container</div>
<div class="assigned-sites-list"> <div class="assigned-sites-list">
</div> </div>
</div> </div>
<div class="panel-footer"> </div>
<a href="#" class="button secondary expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a> <div class="delete-container">
<a class="button primary expanded footer-button" id="edit-container-ok-link">OK</a> <button class="delete-btn">Delete This Container</button>
</div>
</div> -->
<div class="panel menu-panel edit-container-panel hide" id="edit-container-panel">
<h3 class="title" id="container-edit-title">
Default
</h3>
<button class="btn-return arrow-left" id="close-container-edit-panel"></button>
<hr>
<div class="scrollable edit-form">
<form id="edit-container-panel-form">
<input type="hidden" name="container-id" id="edit-container-panel-usercontext-input" />
<fieldset>
<legend class="form-header">Name</legend>
<input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/>
</fieldset>
<fieldset id="edit-container-panel-choose-color" class="radio-choice">
<legend class="form-header">Color</legend>
</fieldset>
<fieldset id="edit-container-panel-choose-icon" class="radio-choice">
<legend class="form-header">Icon</legend>
</fieldset>
</form>
<div id="edit-sites-assigned" class="scrollable">
<div class="options-header">Options</div>
<div class="container-options">
<input type="checkbox" id="site-isolation" name="site-isolation">
<label for="site-isolation" class="options-label">Limit to Designated Sites</label>
</div>
<div class="container-options options-label" id="manage-assigned-sites-list">Manage Site List...
</div>
</div>
</div>
<div class="delete-container">
<button class="delete-btn">Delete This Container</button>
</div>
</div>
<div class="panel menu-panel edit-container-assignments hide" id="edit-container-assignments">
<h3 class="title" id="edit-assignments-title">
Default
</h3>
<button class="btn-return arrow-left" id="close-container-assignment-panel"></button>
<hr>
<div class="scrollable edit-form">
<div id="edit-sites-assigned" class="scrollable" hidden>
<div class="assigned-sites">Sites assigned to this container</div>
<div class="assigned-sites-list">
</div> </div>
</div> </div>
</div> </div>