From 0371b26fb91051813f8e4a2e523cd47c88658d9d Mon Sep 17 00:00:00 2001 From: Kendall Werts Date: Tue, 18 Feb 2020 16:46:26 -0600 Subject: [PATCH] fixed info panel --- src/css/popup.css | 12 ++++--- src/js/popup.js | 85 +++++++++++++++++++++++++++++++++++------------ src/popup.html | 28 ++++++++-------- 3 files changed, 85 insertions(+), 40 deletions(-) diff --git a/src/css/popup.css b/src/css/popup.css index c9b9969..b6ae266 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -1029,13 +1029,15 @@ h3.title { cursor: pointer; } -.menu-item:hover { - background: #1296F8; - color: #FFFFFF; +.disabled-menu-item { + font-style: italic; + color: grey; + cursor: default; } -.hover-highlight { - +.hover-highlight:hover { + background: #1296F8; + color: #FFFFFF; } .menu-text { diff --git a/src/js/popup.js b/src/js/popup.js index c3a7cd2..7e1e687 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -2,8 +2,8 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ -const CONTAINER_HIDE_SRC = "/img/container-hide.svg"; -const CONTAINER_UNHIDE_SRC = "/img/container-unhide.svg"; +const CONTAINER_HIDE_SRC = "/img/password-hide.svg"; +const CONTAINER_UNHIDE_SRC = "/img/password-hide.svg"; const DEFAULT_COLOR = "blue"; const DEFAULT_ICON = "circle"; @@ -172,20 +172,16 @@ const Logic = { return activeTabs.length; }, - _disableMoveTabs(message) { - // const moveTabsEl = document.querySelector("#container-info-movetabs"); - const fragment = document.createDocumentFragment(); - const incompatEl = document.createElement("div"); + _disableMenuItem(message, elementToDisable = document.querySelector("#move-to-new-window")) { + elementToDisable.setAttribute("title", message); + elementToDisable.classList.remove("hover-highlight"); + elementToDisable.classList.add("disabled-menu-item"); + }, - // 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); + _enableMenuItems(elementToDisable = document.querySelector("#move-to-new-window")) { + elementToDisable.removeAttribute("title"); + elementToDisable.classList.add("hover-highlight"); + elementToDisable.classList.remove("disabled-menu-item"); }, async refreshIdentities() { @@ -624,6 +620,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, { Logic.identities().forEach(identity => { const tr = document.createElement("tr"); tr.classList.add("menu-item"); + tr.setAttribute("tabindex", "0"); const td = document.createElement("td"); const openTabs = identity.numberOfOpenTabs || "" ; @@ -685,10 +682,11 @@ Logic.registerPanel(P_CONTAINER_INFO, { async initialize() { const closeContEl = document.querySelector("#close-container-info-panel"); Utils.addEnterHandler(closeContEl, () => { - Logic.showPreviousPanel(); + Logic.showPanel(P_CONTAINERS_LIST); }); // Check if the user has incompatible add-ons installed + // Note: this is not implemented in messageHandler.js let incompatible = false; try { incompatible = await browser.runtime.sendMessage({ @@ -698,15 +696,25 @@ Logic.registerPanel(P_CONTAINER_INFO, { throw new Error("Could not check for incompatible add-ons."); } + const moveTabsEl = document.querySelector("#move-to-new-window"); const numTabs = await Logic.numTabs(); if (incompatible) { - Logic._disableMoveTabs("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs."); + Logic._disableMenuItem("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs."); return; } else if (numTabs === 1) { - Logic._disableMoveTabs("Cannot move a tab from a single-tab window."); + Logic._disableMenuItem("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()); @@ -730,6 +738,14 @@ Logic.registerPanel(P_CONTAINER_INFO, { trHasTabs.style.display = !identity.hasHiddenTabs && !identity.hasOpenTabs ? "none" : ""; } + if (identity.numberOfOpenTabs === 0) { + Logic._disableMenuItem("No tabs available for this container"); + } else { + Logic._enableMenuItems(); + } + + this.intializeShowHide(identity); + // Let's remove all the previous tabs. const table = document.getElementById("container-info-table"); while (table.firstChild) { @@ -745,6 +761,35 @@ Logic.registerPanel(P_CONTAINER_INFO, { return this.buildInfoTable(tabs); }, + intializeShowHide(identity) { + const hideContEl = document.querySelector("#hideorshow-container"); + if (identity.numberOfOpenTabs === 0 && !identity.hasHiddenTabs) { + return Logic._disableMenuItem("No tabs available for this container", hideContEl); + } else { + Logic._enableMenuItems(hideContEl); + } + + Utils.addEnterHandler(hideContEl, async () => { + try { + browser.runtime.sendMessage({ + method: identity.hasHiddenTabs ? "showTabs" : "hideTabs", + windowId: browser.windows.WINDOW_ID_CURRENT, + cookieStoreId: Logic.currentCookieStoreId() + }); + window.close(); + } catch (e) { + window.close(); + } + }); + + 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"; + return; + }, + buildInfoTable(tabs) { // For each one, let's create a new line. const fragment = document.createDocumentFragment(); @@ -805,10 +850,8 @@ Logic.registerPanel(P_CONTAINER_PICKER, { // This method is called when the object is registered. initialize() { const closeContEl = document.querySelector("#close-container-picker-panel"); - closeContEl.setAttribute("tabindex", "0"); - closeContEl.classList.add("firstTabindex"); Utils.addEnterHandler(closeContEl, () => { - Logic.showPreviousPanel(); + Logic.showPanel(P_CONTAINERS_LIST); }); }, diff --git a/src/popup.html b/src/popup.html index fbd8440..3079899 100644 --- a/src/popup.html +++ b/src/popup.html @@ -119,10 +119,10 @@

Multi-Account Containers

- i + i
- + - +
- + - +