cherry picked

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

View file

@ -830,9 +830,9 @@ span ~ .panel-header-text {
overflow: hidden; /* Bugfix: issue 948 */
}
#edit-sites-assigned {
flex: 1000; /* Bugfix: issue 948 */
}
/*#edit-sites-assigned {
flex: 1000; /* Bugfix: issue 948
}*/
#edit-sites-assigned h3 {
font-size: 14px;
@ -867,7 +867,7 @@ span ~ .panel-header-text {
.radio-choice > .radio-container {
align-items: center;
block-size: 29px;
block-size: 25px;
display: flex;
flex: 0 0 calc(100% / var(--icon-fit));
}
@ -927,7 +927,7 @@ span ~ .panel-header-text {
display: flex;
flex-direction: row;
flex-wrap: wrap;
inline-size: 100%;
inline-size: 80%;
margin-block-end: 10px;
margin-inline-end: 0;
margin-inline-start: 0;
@ -952,10 +952,17 @@ span ~ .panel-header-text {
padding-inline-start: 5px;
}
.edit-container-panel legend {
.edit-container-panel legend,
.options-header{
flex: 1 0;
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 */
@ -1106,6 +1113,11 @@ hr {
padding: 0 16px 0 16px;
}
.edit-form {
color: #737373;
padding: 0 16px 0 16px;
}
.identities-list {
margin: 0 0 41px 0;
}
@ -1122,6 +1134,28 @@ hr {
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 {
justify-content: flex-start;
}
@ -1137,3 +1171,36 @@ hr {
background-image: url("/img/arrow-icon-left.svg");
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;
}

View file

@ -25,6 +25,7 @@ const P_CONTAINER_INFO = "containerInfo";
const P_CONTAINER_EDIT = "containerEdit";
const P_CONTAINER_DELETE = "containerDelete";
const P_CONTAINERS_ACHIEVEMENT = "containersAchievement";
const P_CONTAINER_ASSIGNMENTS = "containerAssignments";
async function getExtensionInfo() {
@ -168,19 +169,19 @@ const Logic = {
},
_disableMoveTabs(message) {
const moveTabsEl = document.querySelector("#container-info-movetabs");
// const moveTabsEl = document.querySelector("#container-info-movetabs");
const fragment = document.createDocumentFragment();
const incompatEl = document.createElement("div");
moveTabsEl.classList.remove("clickable");
moveTabsEl.setAttribute("title", message);
// moveTabsEl.classList.remove("clickable");
// moveTabsEl.setAttribute("title", message);
fragment.appendChild(incompatEl);
incompatEl.setAttribute("id", "container-info-movetabs-incompat");
incompatEl.textContent = message;
incompatEl.classList.add("container-info-tab-row");
moveTabsEl.parentNode.insertBefore(fragment, moveTabsEl.nextSibling);
// moveTabsEl.parentNode.insertBefore(fragment, moveTabsEl.nextSibling);
},
async refreshIdentities() {
@ -741,21 +742,6 @@ Logic.registerPanel(P_CONTAINER_INFO, {
Utils.addEnterHandler(closeContEl, () => {
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
let incompatible = false;
@ -766,8 +752,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
} catch (e) {
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();
if (incompatible) {
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.");
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");
Utils.addEnterHandler(manageContainer, async () => {
Logic.showPanel(P_CONTAINER_EDIT, Logic.currentIdentity());
@ -797,21 +775,11 @@ Logic.registerPanel(P_CONTAINER_INFO, {
// Populating the panel: name and icon
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.
for (let trHasTabs of document.getElementsByClassName("container-info-has-tabs")) { // eslint-disable-line prefer-const
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.
const table = document.getElementById("container-info-table");
while (table.firstChild) {
@ -886,9 +854,12 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
// This method is called when the object is registered.
initialize() {
// Utils.addEnterHandler(document.querySelector("#exit-edit-mode-link"), () => {
// Logic.showPanel(P_CONTAINERS_LIST);
// });
const closeContEl = document.querySelector("#close-container-picker-panel");
closeContEl.setAttribute("tabindex", "0");
closeContEl.classList.add("firstTabindex");
Utils.addEnterHandler(closeContEl, () => {
Logic.showPreviousPanel();
});
},
// This method is called when the panel is shown.
@ -897,6 +868,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
let pickedFunction;
switch (Logic.pickerType) {
case OPEN_NEW_CONTAINER_PICKER:
document.getElementById("picker-title").textContent = "Open a New Tab in";
pickedFunction = function (identity) {
try {
browser.tabs.create({
@ -909,11 +881,13 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
};
break;
case MANAGE_CONTAINERS_PICKER:
document.getElementById("picker-title").textContent = "Manage Containers";
pickedFunction = function (identity) {
Logic.showPanel(P_CONTAINER_EDIT, identity);
};
break;
case REOPEN_IN_CONTAINER:
document.getElementById("picker-title").textContent = "Reopen This Site in";
pickedFunction = async function (identity) {
const currentTab = await Utils.currentTab();
const newUserContextId = Utils.userContextId(identity.cookieStoreId);
@ -930,6 +904,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
break;
case ALWAYS_OPEN_IN_PICKER:
default:
document.getElementById("picker-title").textContent = "Always Open This Site in";
pickedFunction = async function (identity) {
const currentTab = await Utils.currentTab();
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_EDIT, {
panelSelector: "#edit-container-panel",
Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
panelSelector: "#edit-container-assignments",
// This method is called when the object is registered.
initialize() {
this.initializeRadioButtons();
Utils.addEnterHandler(document.querySelector("#edit-container-panel-back-arrow"), () => {
const formValues = new FormData(this._editForm);
if (formValues.get("container-id") !== NEW_CONTAINER_ID) {
this._submitForm();
} else {
Logic.showPreviousPanel();
}
});
Utils.addEnterHandler(document.querySelector("#edit-container-cancel-link"), () => {
const closeContEl = document.querySelector("#close-container-assignment-panel");
closeContEl.setAttribute("tabindex", "0");
closeContEl.classList.add("firstTabindex");
Utils.addEnterHandler(closeContEl, () => {
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() {
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,
}
}
// This method is called when the panel is shown.
async prepare() {
const identity = Logic.currentIdentity();
// Populating the panel: name and icon
document.getElementById("container-assignments-title").textContent = identity.name;
const userContextId = Logic.currentUserContextId();
const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
this.showAssignedContainers(assignments);
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();
Logic.showPreviousPanel();
} catch (e) {
Logic.showPanel(P_CONTAINERS_LIST);
}
[...document.querySelectorAll("[name='container-color']")].forEach(colorInput => {
colorInput.checked = colorInput.value === identity.color;
});
[...document.querySelectorAll("[name='container-icon']")].forEach(iconInput => {
iconInput.checked = iconInput.value === identity.icon;
});
return Promise.resolve(null);
},
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() {
const colorRadioTemplate = (containerColor) => {
@ -1114,11 +1117,16 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
async prepare() {
const identity = Logic.currentIdentity();
const userContextId = Logic.currentUserContextId();
const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
this.showAssignedContainers(assignments);
document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId;
// 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;
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");

View file

@ -193,9 +193,10 @@
<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
</h3>
<button class="btn-return arrow-left" id="close-container-picker-panel"></button>
<hr>
<div class="scrollable identities-list">
<table class="menu" id="picker-identities-list">
@ -219,12 +220,13 @@
</div>
<div class="panel edit-container-panel hide" id="edit-container-panel">
<div class="columns">
<div class="panel-back-arrow" id="edit-container-panel-back-arrow">
<img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
</div>
<div class="column-panel-content">
<!-- <div class="panel menu-panel edit-container-panel hide" id="edit-container-panel">
<h3 class="title" id="container-edit-titl">
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>
@ -232,20 +234,68 @@
<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>Choose a color</legend>
<legend>Color</legend>
</fieldset>
<fieldset id="edit-container-panel-choose-icon" class="radio-choice">
<legend>Choose an icon</legend>
<legend>Icon</legend>
</fieldset>
</form>
<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>
</div>
<div class="panel-footer">
<a href="#" class="button secondary expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a>
<a class="button primary expanded footer-button" id="edit-container-ok-link">OK</a>
</div>
<div class="delete-container">
<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>