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

Now can reopen in default container. Added an 'OK' button to new container panel. Fixed some css

Browse source
This commit is contained in:
Kendall Werts 2020-02-20 17:08:59 -06:00
parent 1e1f558b0e
commit 150c4a35b1
4 changed files with 144 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/css/popup.css
View file

@ -91,6 +91,7 @@ table {
}
.scrollable {
flex: 1;
inline-size: 100%;
max-block-size: 400px;
overflow: auto;
@ -656,6 +657,14 @@ span ~ .panel-header-text {
filter: url('/img/filters.svg#fill');
}
.mac-icon {
background-image: url('/img/multiaccountcontainer-16.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 16px 16px;
block-size: 100%;
}
.container-panel-row:hover .clickable .usercontext-icon,
.container-panel-row:focus .clickable .usercontext-icon,
.container-panel-row .clickable:focus .usercontext-icon {
@ -1116,6 +1125,7 @@ hr {
.edit-form {
color: #737373;
flex: 1;
padding-block-end: 0;
padding-block-start: 0;
padding-inline-end: 16px;
@ -1148,14 +1158,14 @@ hr {
background-color: #fff;
border-block-start: solid 1px #e3e3e3;
cursor: default;
display: flex;
height: 65px;
inline-size: 100%;
inset-block-end: 0;
justify-content: space-between;
padding-block-end: 27px;
padding-block-start: 9px;
padding-inline-end: 18px;
padding-inline-start: 17px;
position: fixed;
}
.delete-btn {
@ -1169,10 +1179,6 @@ hr {
text-align: center;
}
.menu-panel {
justify-content: flex-start;
}
.btn-return.arrow-left {
background-color: rgba(255, 255, 255, 1);
background-image: url("/img/arrow-icon-left.svg");
@ -1263,3 +1269,8 @@ tr > td > .trash-button {
tr:hover > td > .trash-button {
display: block;
}
.new-container-icon {
font-size: 24px;
margin-block-start: -2px;
}

1
src/js/background/backgroundLogic.js
View file

@ -329,6 +329,7 @@ const backgroundLogic = {
},
cookieStoreId(userContextId) {
if(userContextId === 0) return "firefox-default";
return `firefox-container-${userContextId}`;
}
};

143
src/js/popup.js
View file

@ -173,14 +173,16 @@ const Logic = {
_disableMenuItem(message, elementToDisable = document.querySelector("#move-to-new-window")) {
elementToDisable.setAttribute("title", message);
elementToDisable.removeAttribute("tabindex");
elementToDisable.classList.remove("hover-highlight");
elementToDisable.classList.add("disabled-menu-item");
},
_enableMenuItems(elementToDisable = document.querySelector("#move-to-new-window")) {
elementToDisable.removeAttribute("title");
elementToDisable.classList.add("hover-highlight");
elementToDisable.classList.remove("disabled-menu-item");
_enableMenuItems(elementToEnable = document.querySelector("#move-to-new-window")) {
elementToEnable.removeAttribute("title");
elementToEnable.setAttribute("tabindex", "0");
elementToEnable.classList.add("hover-highlight");
elementToEnable.classList.remove("disabled-menu-item");
},
async refreshIdentities() {
@ -222,7 +224,6 @@ const Logic = {
}
if (!backwards || !this._currentPanel) {
this._previousPanelPath.push(this._currentPanel);
console.log(this._previousPanelPath);
}
this._currentPanel = panel;
@ -337,6 +338,16 @@ const Logic = {
const panelItem = this._panels[this._currentPanel];
return document.querySelector(this.getPanelSelector(panelItem));
},
listenToPickerBackButton() {
const closeContEl = document.querySelector("#close-container-picker-panel");
if (!this._listenerSet) {
Utils.addEnterHandler(closeContEl, () => {
Logic.showPreviousPanel();
});
this._listenerSet = true;
}
}
};
// P_ONBOARDING_1: First page for Onboarding.
@ -743,7 +754,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
async initialize() {
const closeContEl = document.querySelector("#close-container-info-panel");
Utils.addEnterHandler(closeContEl, () => {
Logic.showPanel(P_CONTAINERS_LIST);
Logic.showPreviousPanel();
});
// Check if the user has incompatible add-ons installed
@ -897,14 +908,11 @@ Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, {
// This method is called when the object is registered.
initialize() {
const closeContEl = document.querySelector("#close-container-picker-panel");
Utils.addEnterHandler(closeContEl, () => {
Logic.showPanel(P_CONTAINERS_LIST);
});
},
// This method is called when the panel is shown.
prepare() {
Logic.listenToPickerBackButton();
document.getElementById("picker-title").textContent = "Open a New Tab in";
const fragment = document.createDocumentFragment();
const pickedFunction = function (identity) {
@ -918,13 +926,16 @@ Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, {
}
};
document.getElementById("new-container-div").innerHTML = "";
Logic.identities().forEach(identity => {
const tr = document.createElement("tr");
tr.classList.add("menu-item");
tr.classList.add("menu-item", "hover-highlight");
tr.setAttribute("tabindex", "0");
const td = document.createElement("td");
td.innerHTML = Utils.escaped`
<div class="menu-icon hover-highlight">
<div class="menu-icon">
<div class="usercontext-icon"
data-identity-icon="${identity.icon}"
data-identity-color="${identity.color}">
@ -958,23 +969,45 @@ Logic.registerPanel(MANAGE_CONTAINERS_PICKER, {
// This method is called when the object is registered.
initialize() {
const closeContEl = document.querySelector("#close-container-picker-panel");
Utils.addEnterHandler(closeContEl, () => {
Logic.showPanel(P_CONTAINERS_LIST);
});
},
// This method is called when the panel is shown.
prepare() {
Logic.listenToPickerBackButton();
const closeContEl = document.querySelector("#close-container-picker-panel");
if (!this._listenerSet) {
Utils.addEnterHandler(closeContEl, () => {
Logic.showPreviousPanel();
});
this._listenerSet = true;
}
document.getElementById("picker-title").textContent = "Manage Containers";
const fragment = document.createDocumentFragment();
const pickedFunction = function (identity) {
Logic.showPanel(P_CONTAINER_EDIT, identity);
};
document.getElementById("new-container-div").innerHTML = Utils.escaped`
<table class="menu">
<tr class="menu-item hover-highlight" id="new-container" tabindex="0">
<td>
<div class="menu-icon new-container-icon">+
</div>
<span class="menu-text">New Container</span>
</td>
</tr>
</table>
<hr>
`;
Utils.addEnterHandler(document.querySelector("#new-container"), () => {
Logic.showPanel(P_CONTAINER_EDIT, { name: Logic.generateIdentityName() });
});
Logic.identities().forEach(identity => {
const tr = document.createElement("tr");
tr.classList.add("menu-item");
tr.classList.add("menu-item", "hover-highlight");
tr.setAttribute("tabindex", "0");
const td = document.createElement("td");
td.innerHTML = Utils.escaped`
@ -1012,18 +1045,16 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
// This method is called when the object is registered.
initialize() {
const closeContEl = document.querySelector("#close-container-picker-panel");
Utils.addEnterHandler(closeContEl, () => {
Logic.showPanel(P_CONTAINERS_LIST);
});
},
// This method is called when the panel is shown.
prepare() {
async prepare() {
Logic.listenToPickerBackButton();
document.getElementById("picker-title").textContent = "Reopen This Site in";
const fragment = document.createDocumentFragment();
const pickedFunction = async function (identity) {
const currentTab = await Utils.currentTab();
console.log(currentTab);
const pickedFunction = function (identity) {
const newUserContextId = Utils.userContextId(identity.cookieStoreId);
Utils.reloadInContainer(
currentTab.url,
@ -1035,9 +1066,41 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
window.close();
};
Logic.identities().forEach(identity => {
document.getElementById("new-container-div").innerHTML = "";
if (currentTab.cookieStoreId !== "firefox-default") {
const tr = document.createElement("tr");
tr.classList.add("menu-item");
tr.classList.add("menu-item", "hover-highlight");
const td = document.createElement("td");
td.innerHTML = Utils.escaped`
<div class="menu-icon hover-highlight">
<div class="mac-icon">
</div>
</div>
<span class="menu-text">Default Container</span>`;
fragment.appendChild(tr);
tr.appendChild(td);
Utils.addEnterHandler(tr, () => {
Utils.reloadInContainer(
currentTab.url,
false,
0,
currentTab.index + 1,
currentTab.active
);
window.close();
});
}
Logic.identities().forEach(identity => {
if (currentTab.cookieStoreId !== identity.cookieStoreId) {
const tr = document.createElement("tr");
tr.classList.add("menu-item", "hover-highlight");
tr.setAttribute("tabindex", "0");
const td = document.createElement("td");
td.innerHTML = Utils.escaped`
@ -1056,6 +1119,7 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
Utils.addEnterHandler(tr, () => {
pickedFunction(identity);
});
}
});
const list = document.querySelector("#picker-identities-list");
@ -1075,19 +1139,20 @@ Logic.registerPanel(ALWAYS_OPEN_IN_PICKER, {
// This method is called when the object is registered.
initialize() {
const closeContEl = document.querySelector("#close-container-picker-panel");
Utils.addEnterHandler(closeContEl, () => {
Logic.showPanel(P_CONTAINERS_LIST);
});
},
// This method is called when the panel is shown.
prepare() {
Logic.listenToPickerBackButton();
document.getElementById("picker-title").textContent = "Reopen This Site in";
const fragment = document.createDocumentFragment();
document.getElementById("new-container-div").innerHTML = "";
Logic.identities().forEach(identity => {
const tr = document.createElement("tr");
tr.classList.add("menu-item");
tr.classList.add("menu-item", "hover-highlight");
tr.setAttribute("tabindex", "0");
const td = document.createElement("td");
td.innerHTML = Utils.escaped`
@ -1127,8 +1192,6 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
// This method is called when the object is registered.
initialize() {
const closeContEl = document.querySelector("#close-container-assignment-panel");
closeContEl.setAttribute("tabindex", "0");
closeContEl.classList.add("firstTabindex");
Utils.addEnterHandler(closeContEl, () => {
Logic.showPreviousPanel();
});
@ -1270,13 +1333,23 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
// Populating the panel: name and icon
document.getElementById("container-edit-title").textContent = identity.name;
const userContextId = Logic.currentUserContextId();
// const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
// this.showAssignedContainers(assignments);
// document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId;
document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId;
document.querySelector("#edit-container-panel .delete-container").hidden = !userContextId;
Utils.addEnterHandler(document.querySelector("#create-container-cancel-link"), () => {
Logic.showPreviousPanel();
});
Utils.addEnterHandler(document.querySelector("#create-container-ok-link"), () => {
this._submitForm();
});
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-usercontext-input").value = userContextId || NEW_CONTAINER_ID;
const containerName = document.querySelector("#edit-container-panel-name-input");

5
src/popup.html
View file

@ -251,6 +251,7 @@
</h3>
<button class="btn-return arrow-left" id="close-container-picker-panel" tabindex="0"></button>
<hr>
<div id="new-container-div"></div>
<div class="scrollable identities-list">
<table class="menu" id="picker-identities-list">
<tr class="menu-item hover-highlight">
@ -303,6 +304,10 @@
<div class="delete-container">
<button class="delete-btn" id="delete-container-button">Delete This Container</button>
</div>
<div class="panel-footer">
<a href="#" class="button expanded secondary footer-button cancel-button" id="create-container-cancel-link">Cancel</a>
<a href="#" class="button expanded primary footer-button" id="create-container-ok-link">OK</a>
</div>
</div>
<div class="panel menu-panel edit-container-assignments hide" id="edit-container-assignments">