diff --git a/src/css/popup.css b/src/css/popup.css index c382e01..7b04c04 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -110,6 +110,7 @@ table { mask-image: linear-gradient(to left, transparent, black 1em); overflow: hidden; white-space: nowrap; + width: 100%; } /* Color and icon helpers */ @@ -273,6 +274,7 @@ table { .panel-content { flex: 1; + padding: 16px; } /* Column panels for edit screens */ @@ -443,6 +445,7 @@ manage things like container crud */ block-size: 48px; display: flex; justify-content: space-between; + padding: 16px; } .panel-header .usercontext-icon { @@ -762,17 +765,6 @@ span ~ .panel-header-text { margin-inline-end: 0; } -.container-info-list { - display: flex; - flex-direction: column; - margin-block-start: 4px; - padding-block-start: 4px; -} - -.container-info-list tbody { - display: contents; -} - .clickable { cursor: pointer; } @@ -853,14 +845,6 @@ span ~ .panel-header-text { margin-inline-end: 10px; } -.assigned-sites-list > div > .delete-assignment { - display: none; -} - -.assigned-sites-list > div:hover > .delete-assignment { - display: block; -} - .assigned-sites-list > div > .hostname { flex: 1; } @@ -1021,7 +1005,6 @@ body { font-size: 13px; letter-spacing: -0.1px; width: 320px; - /* remove in prodcution*/ } h3.title { @@ -1065,10 +1048,10 @@ h3.title { .menu-icon { float: left; text-align: center; - width: 40px; + width: 16px; display: block; - height: 24px; - padding: 0 8px 0 16px; + height: 16px; + margin: 4px 8px 4px 16px; } .menu-right-float { @@ -1222,3 +1205,24 @@ input { text-decoration: none; font-weight: bold; } + +.delete-warning { + padding: 8px 0 8px 0; +} + +.trash-button { + float: right; + text-align: center; + width: 16px; + display: inline-block; + height: 16px; + margin: 4px 10px 4px 0; +} + +tr > td > .trash-button { + display: none; +} + +tr:hover > td > .trash-button { + display: block; +} diff --git a/src/img/container-close-tab.svg b/src/img/container-close-tab.svg index a36fa01..a6cd019 100644 --- a/src/img/container-close-tab.svg +++ b/src/img/container-close-tab.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/img/container-delete.svg b/src/img/container-delete.svg index 1e685d5..b284b1d 100644 --- a/src/img/container-delete.svg +++ b/src/img/container-delete.svg @@ -3,7 +3,7 @@ diff --git a/src/js/pageAction.js b/src/js/pageAction.js index 0a58c46..42654ca 100644 --- a/src/js/pageAction.js +++ b/src/js/pageAction.js @@ -9,7 +9,7 @@ async function init() { const td = document.createElement("td"); td.innerHTML = Utils.escaped` -
+
diff --git a/src/js/popup.js b/src/js/popup.js index 1a8dfd3..ab309b2 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -40,7 +40,7 @@ const Logic = { _identities: [], _currentIdentity: null, _currentPanel: null, - _previousPanel: null, + _previousPanelPath: [], _panels: {}, _onboardingVariation: null, @@ -212,13 +212,20 @@ const Logic = { } }, +<<<<<<< HEAD async showPanel(panel, currentIdentity = null) { +======= + async showPanel(panel, currentIdentity = null, pickerType = null, backwards = false) { +>>>>>>> b83e63e... some edits to panels // Invalid panel... ?!? if (!(panel in this._panels)) { throw new Error("Something really bad happened. Unknown panel: " + panel); } + if (!backwards || !this._currentPanel) { + this._previousPanelPath.push(this._currentPanel); + console.log(this._previousPanelPath); + } - this._previousPanel = this._currentPanel; this._currentPanel = panel; this._currentIdentity = currentIdentity; @@ -245,11 +252,10 @@ const Logic = { }, showPreviousPanel() { - if (!this._previousPanel) { + if (!this._previousPanelPath) { throw new Error("Current panel not set!"); } - - this.showPanel(this._previousPanel, this._currentIdentity); + this.showPanel(this._previousPanelPath.pop(), this._currentIdentity, null, true); }, registerPanel(panelName, panelObject) { @@ -671,7 +677,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, { Logic.identities().forEach(identity => { const hasTabs = (identity.hasHiddenTabs || identity.hasOpenTabs); 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"); const openTabs = identity.numberOfOpenTabs || "" ; @@ -802,19 +808,13 @@ Logic.registerPanel(P_CONTAINER_INFO, { this.intializeShowHide(identity); - // Let's remove all the previous tabs. - const table = document.getElementById("container-info-table"); - while (table.firstChild) { - table.firstChild.remove(); - } - // Let's retrieve the list of tabs. const tabs = await browser.runtime.sendMessage({ method: "getTabs", windowId: browser.windows.WINDOW_ID_CURRENT, cookieStoreId: Logic.currentIdentity().cookieStoreId }); - return this.buildInfoTable(tabs); + return this.buildOpenTabTable(tabs); }, intializeShowHide(identity) { @@ -846,46 +846,38 @@ Logic.registerPanel(P_CONTAINER_INFO, { return; }, - buildInfoTable(tabs) { + buildOpenTabTable(tabs) { + // Let's remove all the previous tabs. + const table = document.getElementById("container-info-table"); + while (table.firstChild) { + table.firstChild.remove(); + } + // For each one, let's create a new line. const fragment = document.createDocumentFragment(); for (let tab of tabs) { // eslint-disable-line prefer-const const tr = document.createElement("tr"); fragment.appendChild(tr); - tr.classList.add("container-info-tab-row"); - tr.innerHTML = Utils.escaped` - -
${tab.title}
`; - tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl)); + tr.classList.add("menu-item", "hover-highlight"); tr.setAttribute("tabindex", "0"); - document.getElementById("container-info-table").appendChild(fragment); + tr.innerHTML = Utils.escaped` + +
+ ${tab.title} + + `; + tr.querySelector(".favicon").appendChild(Utils.createFavIconElement(tab.favIconUrl)); + tr.setAttribute("tabindex", "0"); + table.appendChild(fragment); // On click, we activate this tab. But only if this tab is active. if (!tab.hiddenState) { - const closeImage = document.createElement("img"); - closeImage.src = "/img/container-close-tab.svg"; - closeImage.className = "container-close-tab"; - closeImage.title = "Close tab"; - closeImage.id = tab.id; - const tabTitle = tr.querySelector(".container-info-tab-title"); - tabTitle.appendChild(closeImage); - - // On hover, we add truncate-text class to add close-tab-image after tab title truncates - const tabTitleHoverEvent = () => { - tabTitle.classList.toggle("truncate-text"); - tr.querySelector(".container-tab-title").classList.toggle("truncate-text"); - }; - - tr.addEventListener("mouseover", tabTitleHoverEvent); - tr.addEventListener("mouseout", tabTitleHoverEvent); - - tr.classList.add("clickable"); Utils.addEnterHandler(tr, async () => { await browser.tabs.update(tab.id, { active: true }); window.close(); }); - const closeTab = document.getElementById(tab.id); + const closeTab = document.querySelector(".trash-button"); if (closeTab) { Utils.addEnterHandler(closeTab, async (e) => { await browser.tabs.remove(Number(e.target.id)); @@ -966,7 +958,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, { const td = document.createElement("td"); td.innerHTML = Utils.escaped` -
+
@@ -992,6 +984,9 @@ Logic.registerPanel(P_CONTAINERS_EDIT, { }, }); +// P_CONTAINER_ASSIGNMENTS: Shows Site Assignments and allows editing. +// ---------------------------------------------------------------------------- + Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, { panelSelector: "#edit-container-assignments", @@ -1010,26 +1005,12 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, { const identity = Logic.currentIdentity(); // Populating the panel: name and icon - document.getElementById("container-assignments-title").textContent = identity.name; + document.getElementById("edit-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); }, @@ -1038,41 +1019,35 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, { const assignmentKeys = Object.keys(assignments); assignmentPanel.hidden = !(assignmentKeys.length > 0); if (assignments) { - const tableElement = assignmentPanel.querySelector(".assigned-sites-list"); + const tableElement = document.querySelector("#edit-sites-assigned"); /* Remove previous assignment list, after removing one we rerender the list */ while (tableElement.firstChild) { tableElement.firstChild.remove(); } - assignmentKeys.forEach((siteKey) => { const site = assignments[siteKey]; - const trElement = document.createElement("div"); + const trElement = document.createElement("tr"); /* As we don't have the full or correct path the best we can assume is the path is HTTPS and then replace with a broken icon later if it doesn't load. This is pending a better solution for favicons from web extensions */ const assumedUrl = `https://${site.hostname}/favicon.ico`; trElement.innerHTML = Utils.escaped` -
-
- ${site.hostname} -
- `; + +
+ ${site.hostname} + + `; trElement.getElementsByClassName("favicon")[0].appendChild(Utils.createFavIconElement(assumedUrl)); - const deleteButton = trElement.querySelector(".delete-assignment"); - const that = this; + const deleteButton = trElement.querySelector(".trash-button"); Utils.addEnterHandler(deleteButton, async () => { const userContextId = Logic.currentUserContextId(); // Lets show the message to the current tab - // TODO remove then when firefox supports arrow fn async const currentTab = await Utils.currentTab(); Utils.setOrRemoveAssignment(currentTab.id, assumedUrl, userContextId, true); delete assignments[siteKey]; - that.showAssignedContainers(assignments); + this.showAssignedContainers(assignments); }); - trElement.classList.add("container-info-tab-row", "clickable"); + trElement.classList.add("menu-item", "hover-highlight"); tableElement.appendChild(trElement); }); } @@ -1182,6 +1157,10 @@ Logic.registerPanel(P_CONTAINER_EDIT, { iconInput.checked = iconInput.value === identity.icon; }); + const deleteButton = document.getElementById("delete-container-button"); + Utils.addEnterHandler(deleteButton, () => { + Logic.showPanel(P_CONTAINER_DELETE, identity); + }); return Promise.resolve(null); }, @@ -1198,7 +1177,9 @@ Logic.registerPanel(P_CONTAINER_DELETE, { Utils.addEnterHandler(document.querySelector("#delete-container-cancel-link"), () => { Logic.showPreviousPanel(); }); - + Utils.addEnterHandler(document.querySelector("#close-container-delete-panel"), () => { + Logic.showPreviousPanel(); + }); Utils.addEnterHandler(document.querySelector("#delete-container-ok-link"), async () => { /* This promise wont resolve if the last tab was removed from the window. as the message async callback stops listening, this isn't an issue for us however it might be in future @@ -1208,7 +1189,7 @@ Logic.registerPanel(P_CONTAINER_DELETE, { try { await Logic.removeIdentity(Utils.userContextId(Logic.currentIdentity().cookieStoreId)); await Logic.refreshIdentities(); - Logic.showPreviousPanel(); + Logic.showPanel(P_CONTAINERS_LIST); } catch (e) { Logic.showPanel(P_CONTAINERS_LIST); } @@ -1220,7 +1201,7 @@ Logic.registerPanel(P_CONTAINER_DELETE, { const identity = Logic.currentIdentity(); // Populating the panel: name, icon, and warning message - document.getElementById("delete-container-name").textContent = identity.name; + document.getElementById("container-delete-title").textContent = identity.name; const totalNumberOfTabs = identity.numberOfHiddenTabs + identity.numberOfOpenTabs; let warningMessage = ""; @@ -1230,10 +1211,6 @@ Logic.registerPanel(P_CONTAINER_DELETE, { } document.getElementById("delete-container-tab-warning").textContent = warningMessage; - const icon = document.getElementById("delete-container-icon"); - icon.setAttribute("data-identity-icon", identity.icon); - icon.setAttribute("data-identity-color", identity.color); - return Promise.resolve(null); }, }); diff --git a/src/js/utils.js b/src/js/utils.js index 65480f3..161e3d0 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -5,7 +5,7 @@ const Utils = { createFavIconElement(url) { const imageElement = document.createElement("img"); - imageElement.classList.add("icon", "offpage"); + imageElement.classList.add("icon", "offpage", "menu-icon"); imageElement.src = url; const loadListener = (e) => { e.target.classList.remove("offpage"); diff --git a/src/pageActionPopup.html b/src/pageActionPopup.html index 999218e..547ae4a 100644 --- a/src/pageActionPopup.html +++ b/src/pageActionPopup.html @@ -14,7 +14,7 @@
- +