diff --git a/src/js/popup.js b/src/js/popup.js index 3665e78..ba9ea2c 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -219,14 +219,16 @@ const Logic = { }, async showPanel(panel, currentIdentity = null, backwards = false) { - // 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); } + // If invalid panel, reset panels. + if (!(panel in this._panels)) { + panel = P_CONTAINERS_LIST; + this._previousPanelPath = []; + } + this._currentPanel = panel; this._currentIdentity = currentIdentity; @@ -348,6 +350,71 @@ const Logic = { }); this._listenerSet = true; } + }, + + shortcutListener(e){ + function openNewContainerTab(identity) { + try { + browser.tabs.create({ + cookieStoreId: identity.cookieStoreId + }); + window.close(); + } catch (e) { + window.close(); + } + } + const identities = Logic.identities(); + if ((e.keyCode >= 49 && e.keyCode <= 57) && + Logic._currentPanel === "containersList") { + const identity = identities[e.keyCode - 49]; + if (identity) { + openNewContainerTab(identity); + } + } + }, + + keyboardNavListener(e){ + const panelSelector = Logic.getPanelSelector(Logic._panels[Logic._currentPanel]); + const selectables = [...document.querySelectorAll(`${panelSelector} .keyboard-nav[tabindex='0']`)]; + const element = document.activeElement; + const backButton = document.querySelector(`${panelSelector} .keyboard-nav-back`); + const index = selectables.indexOf(element) || 0; + function next() { + const nextElement = selectables[index + 1]; + if (nextElement) { + nextElement.focus(); + } + } + function previous() { + const previousElement = selectables[index - 1]; + if (previousElement) { + previousElement.focus(); + } + } + switch (e.keyCode) { + case 40: + next(); + break; + case 38: + previous(); + break; + case 39: + { + if(element){ + element.click(); + } + break; + } + case 37: + { + if(backButton){ + backButton.click(); + } + break; + } + default: + break; + } } }; @@ -560,71 +627,10 @@ Logic.registerPanel(P_CONTAINERS_LIST, { window.close(); } }); - document.addEventListener("keydown", (e) => { - function openNewContainerTab(identity) { - try { - browser.tabs.create({ - cookieStoreId: identity.cookieStoreId - }); - window.close(); - } catch (e) { - window.close(); - } - } - const identities = Logic.identities(); - const selectables = [...document.querySelectorAll(".open-newtab[tabindex='0']")]; - const element = document.activeElement; - const index = selectables.indexOf(element) || 0; - function next() { - const nextElement = selectables[index + 1]; - if (nextElement) { - nextElement.focus(); - } - } - function previous() { - const previousElement = selectables[index - 1]; - if (previousElement) { - previousElement.focus(); - } - } - switch (e.keyCode) { - case 40: - next(); - break; - case 38: - previous(); - break; - case 39: - { - const showTabs = element.parentNode.querySelector(".show-tabs"); - if(showTabs) { - showTabs.click(); - } - break; - } - case 37: - { - const hideTabs = document.querySelector(".panel-back-arrow"); - if(hideTabs) { - hideTabs.click(); - } - break; - } - default: - if ((e.keyCode >= 49 && e.keyCode <= 57) && - Logic._currentPanel === "containersList") { - const identity = identities[e.keyCode - 49]; - if (identity) { - openNewContainerTab(identity); - } - } - break; - } - }); + }, unregister() { - }, // This method is called when the panel is shown. @@ -633,7 +639,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, { Logic.identities().forEach(identity => { const tr = document.createElement("tr"); - tr.classList.add("menu-item", "hover-highlight"); + tr.classList.add("menu-item", "hover-highlight", "keyboard-nav"); tr.setAttribute("tabindex", "0"); const td = document.createElement("td"); const openTabs = identity.numberOfOpenTabs || "" ; @@ -666,22 +672,9 @@ Logic.registerPanel(P_CONTAINERS_LIST, { list.innerHTML = ""; list.appendChild(fragment); - /* Not sure why extensions require a focus for the doorhanger, - however it allows us to have a tabindex before the first selected item - */ - // const focusHandler = () => { - // const identityList = list.querySelector("tr .clickable"); - // if (identityList) { - // // otherwise this throws an error when there are no containers present. - // identityList.focus(); - // document.removeEventListener("focus", focusHandler); - // } - // }; - // document.addEventListener("focus", focusHandler); - // /* If the user mousedown's first then remove the focus handler */ - // document.addEventListener("mousedown", () => { - // document.removeEventListener("focus", focusHandler); - // }); + + document.addEventListener("keydown", Logic.keyboardNavListener); + document.addEventListener("keydown", Logic.shortcutListener); return Promise.resolve(); }, }); @@ -822,7 +815,7 @@ Logic.registerPanel(P_CONTAINER_INFO, { for (let tab of tabs) { // eslint-disable-line prefer-const const tr = document.createElement("tr"); fragment.appendChild(tr); - tr.classList.add("menu-item", "hover-highlight"); + tr.classList.add("menu-item", "hover-highlight", "keyboard-nav"); tr.setAttribute("tabindex", "0"); tr.innerHTML = Utils.escaped` @@ -883,7 +876,7 @@ Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, { Logic.identities().forEach(identity => { const tr = document.createElement("tr"); - tr.classList.add("menu-item", "hover-highlight"); + tr.classList.add("menu-item", "hover-highlight", "keyboard-nav"); tr.setAttribute("tabindex", "0"); const td = document.createElement("td"); @@ -942,7 +935,7 @@ Logic.registerPanel(MANAGE_CONTAINERS_PICKER, { document.getElementById("new-container-div").innerHTML = Utils.escaped` - +