rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1524 from dnahol/1009-arrows

Browse source 
added right and left arrow shortcuts for container submenu tabs
This commit is contained in:
luke crouch 2019-10-25 10:42:57 -05:00 • committed by GitHub
commit 3e5334e9b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/js/popup.js
View file

@ -289,7 +289,13 @@ const Logic = {
} }
} }
}); });
document.querySelector(this.getPanelSelector(this._panels[panel])).classList.remove("hide"); const panelEl = document.querySelector(this.getPanelSelector(this._panels[panel]));
panelEl.classList.remove("hide");
const focusEl = panelEl.querySelector(".firstTabindex");
if(focusEl) {
focusEl.focus();
}
}, },
showPreviousPanel() { showPreviousPanel() {
@ -550,6 +556,22 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
case 38: case 38:
previous(); previous();
break; 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: default:
if ((e.keyCode >= 49 && e.keyCode <= 57) && if ((e.keyCode >= 49 && e.keyCode <= 57) &&
Logic._currentPanel === "containersList") { Logic._currentPanel === "containersList") {
@ -635,7 +657,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
tr.classList.add("container-panel-row"); tr.classList.add("container-panel-row");
context.classList.add("userContext-wrapper", "open-newtab", "clickable"); context.classList.add("userContext-wrapper", "open-newtab", "clickable", "firstTabindex");
manage.classList.add("show-tabs", "pop-button"); manage.classList.add("show-tabs", "pop-button");
manage.setAttribute("title", `View ${identity.name} container`); manage.setAttribute("title", `View ${identity.name} container`);
context.setAttribute("tabindex", "0"); context.setAttribute("tabindex", "0");
@ -713,11 +735,15 @@ Logic.registerPanel(P_CONTAINER_INFO, {
// This method is called when the object is registered. // This method is called when the object is registered.
async initialize() { async initialize() {
Logic.addEnterHandler(document.querySelector("#close-container-info-panel"), () => { const closeContEl = document.querySelector("#close-container-info-panel");
closeContEl.setAttribute("tabindex", "0");
closeContEl.classList.add("firstTabindex");
Logic.addEnterHandler(closeContEl, () => {
Logic.showPreviousPanel(); Logic.showPreviousPanel();
}); });
const hideContEl = document.querySelector("#container-info-hideorshow");
Logic.addEnterHandler(document.querySelector("#container-info-hideorshow"), async () => { hideContEl.setAttribute("tabindex", "0");
Logic.addEnterHandler(hideContEl, async () => {
const identity = Logic.currentIdentity(); const identity = Logic.currentIdentity();
try { try {
browser.runtime.sendMessage({ browser.runtime.sendMessage({
@ -741,6 +767,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
throw new Error("Could not check for incompatible add-ons."); throw new Error("Could not check for incompatible add-ons.");
} }
const moveTabsEl = document.querySelector("#container-info-movetabs"); const moveTabsEl = document.querySelector("#container-info-movetabs");
moveTabsEl.setAttribute("tabindex","0");
const numTabs = await Logic.numTabs(); const numTabs = await Logic.numTabs();
if (incompatible) { if (incompatible) {
Logic._disableMoveTabs("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs."); Logic._disableMoveTabs("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs.");
@ -807,6 +834,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
<td></td> <td></td>
<td class="container-info-tab-title truncate-text" title="${tab.url}" ><div class="container-tab-title">${tab.title}</div></td>`; <td class="container-info-tab-title truncate-text" title="${tab.url}" ><div class="container-tab-title">${tab.title}</div></td>`;
tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl)); tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl));
tr.setAttribute("tabindex", "0");
document.getElementById("container-info-table").appendChild(fragment); document.getElementById("container-info-table").appendChild(fragment);
// On click, we activate this tab. But only if this tab is active. // On click, we activate this tab. But only if this tab is active.
@ -1154,4 +1182,4 @@ window.addEventListener("resize", function () {
root.style.setProperty("--overflow-size", difference + "px"); root.style.setProperty("--overflow-size", difference + "px");
root.style.setProperty("--icon-fit", "12"); root.style.setProperty("--icon-fit", "12");
} }
}); });