diff --git a/src/css/popup.css b/src/css/popup.css index 3783a33..3e81f12 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -812,9 +812,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; @@ -849,7 +849,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)); } @@ -909,7 +909,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; @@ -934,10 +934,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 */ @@ -1088,6 +1095,11 @@ hr { padding: 0 16px 0 16px; } +.edit-form { + color: #737373; + padding: 0 16px 0 16px; +} + .identities-list { margin: 0 0 41px 0; } @@ -1104,6 +1116,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; } @@ -1118,4 +1152,37 @@ hr { background-color: rgba(255, 255, 255, 1); 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; } \ No newline at end of file diff --git a/src/js/popup.js b/src/js/popup.js index 18fa05c..1b1be17 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -29,6 +29,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() { @@ -172,19 +173,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() { @@ -685,21 +686,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; @@ -710,8 +696,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."); @@ -720,14 +705,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()); @@ -741,21 +719,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) { @@ -830,9 +798,12 @@ Logic.registerPanel(P_CONTAINER_PICKER, { // 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. @@ -841,6 +812,7 @@ Logic.registerPanel(P_CONTAINER_PICKER, { 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({ @@ -853,11 +825,13 @@ Logic.registerPanel(P_CONTAINER_PICKER, { }; 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); @@ -874,6 +848,7 @@ Logic.registerPanel(P_CONTAINER_PICKER, { 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); @@ -920,63 +895,45 @@ Logic.registerPanel(P_CONTAINER_PICKER, { } }); -// 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, - } - } - }); - await Logic.refreshIdentities(); - Logic.showPreviousPanel(); - } catch (e) { - Logic.showPanel(P_CONTAINERS_LIST); - } + // 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(); + }); + [...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) { @@ -1023,6 +980,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) => { @@ -1058,11 +1061,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"); diff --git a/src/popup.html b/src/popup.html index 3eb102f..a01af66 100644 --- a/src/popup.html +++ b/src/popup.html @@ -238,9 +238,10 @@