+ td.innerHTML = Utils.escaped`
+
-
`;
- context.querySelector(".container-name").textContent = identity.name;
- manage.innerHTML = "
";
+
+ `;
fragment.appendChild(tr);
- tr.appendChild(context);
+ tr.appendChild(td);
- if (hasTabs) {
- tr.appendChild(manage);
- }
-
- Logic.addEnterHandler(tr, async (e) => {
- if (e.target.matches(".open-newtab")
- || e.target.parentNode.matches(".open-newtab")
- || e.type === "keydown") {
- try {
- browser.tabs.create({
- cookieStoreId: identity.cookieStoreId
- });
- window.close();
- } catch (e) {
- window.close();
- }
- } else if (hasTabs) {
- Logic.showPanel(P_CONTAINER_INFO, identity);
- }
+ Utils.addEnterHandler(tr, () => {
+ Logic.showPanel(P_CONTAINER_INFO, identity);
});
});
- const list = document.querySelector(".identities-list tbody");
+ const list = document.querySelector("#identities-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);
- });
- /* If no container is present disable the Edit Containers button */
- const editContainer = document.querySelector("#edit-containers-link");
- if (Logic.identities().length === 0) {
- editContainer.classList.add("disable-edit-containers");
- } else {
- editContainer.classList.remove("disable-edit-containers");
- }
-
+ // 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);
+ // });
return Promise.resolve();
},
});
@@ -817,15 +695,101 @@ Logic.registerPanel(P_CONTAINER_INFO, {
// This method is called when the object is registered.
async initialize() {
const closeContEl = document.querySelector("#close-container-info-panel");
- closeContEl.setAttribute("tabindex", "0");
- closeContEl.classList.add("firstTabindex");
- Logic.addEnterHandler(closeContEl, () => {
+ Utils.addEnterHandler(closeContEl, () => {
Logic.showPreviousPanel();
});
- const hideContEl = document.querySelector("#container-info-hideorshow");
- hideContEl.setAttribute("tabindex", "0");
- Logic.addEnterHandler(hideContEl, async () => {
- const identity = Logic.currentIdentity();
+
+ // 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({
+ method: "checkIncompatibleAddons"
+ });
+ } catch (e) {
+ 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._disableMenuItem("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs.");
+ return;
+ } else if (numTabs === 1) {
+ 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();
+ });
+
+
+ },
+
+ // This method is called when the panel is shown.
+ async prepare() {
+ const identity = Logic.currentIdentity();
+
+ const newTab = document.querySelector("#open-new-tab-in-info");
+ Utils.addEnterHandler(newTab, () => {
+ try {
+ browser.tabs.create({
+ cookieStoreId: identity.cookieStoreId
+ });
+ window.close();
+ } catch (e) {
+ window.close();
+ }
+ });
+ // Populating the panel: name and icon
+ document.getElementById("container-info-title").textContent = identity.name;
+
+ const alwaysOpen = document.querySelector("#always-open-in-info-panel");
+ Utils.addEnterHandler(alwaysOpen, async () => {
+ Utils.alwaysOpenInContainer(identity);
+ window.close();
+ });
+ // 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" : "";
+ }
+
+ if (identity.numberOfOpenTabs === 0) {
+ Logic._disableMenuItem("No tabs available for this container");
+ } else {
+ Logic._enableMenuItems();
+ }
+
+ this.intializeShowHide(identity);
+
+ // 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
+ });
+ const manageContainer = document.querySelector("#manage-container-link");
+ Utils.addEnterHandler(manageContainer, async () => {
+ Logic.showPanel(P_CONTAINER_EDIT, identity);
+ });
+ return this.buildOpenTabTable(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",
@@ -838,114 +802,48 @@ Logic.registerPanel(P_CONTAINER_INFO, {
}
});
- // Check if the user has incompatible add-ons installed
- let incompatible = false;
- try {
- incompatible = await browser.runtime.sendMessage({
- method: "checkIncompatibleAddons"
- });
- } 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.");
- return;
- } else if (numTabs === 1) {
- Logic._disableMoveTabs("Cannot move a tab from a single-tab window.");
- return;
- }
- Logic.addEnterHandler(moveTabsEl, async () => {
- await browser.runtime.sendMessage({
- method: "moveTabsToWindow",
- windowId: browser.windows.WINDOW_ID_CURRENT,
- cookieStoreId: Logic.currentIdentity().cookieStoreId,
- });
- window.close();
- });
- },
-
- // This method is called when the panel is shown.
- async prepare() {
- const identity = Logic.currentIdentity();
-
- // Populating the panel: name and icon
- document.getElementById("container-info-name").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";
+ return;
+ },
+ buildOpenTabTable(tabs) {
// 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);
- },
-
- buildInfoTable(tabs) {
// 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 = 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`
+
+
+
+ 
+ | `;
+ 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");
- Logic.addEnterHandler(tr, async () => {
+ 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) {
- Logic.addEnterHandler(closeTab, async (e) => {
+ Utils.addEnterHandler(closeTab, async (e) => {
await browser.tabs.remove(Number(e.target.id));
window.close();
});
@@ -955,67 +853,353 @@ Logic.registerPanel(P_CONTAINER_INFO, {
},
});
-// P_CONTAINERS_EDIT: Makes the list editable.
+// OPEN_NEW_CONTAINER_PICKER: Opens a new container tab.
// ----------------------------------------------------------------------------
-Logic.registerPanel(P_CONTAINERS_EDIT, {
- panelSelector: "#edit-containers-panel",
+Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, {
+ panelSelector: "#container-picker-panel",
// This method is called when the object is registered.
initialize() {
- Logic.addEnterHandler(document.querySelector("#exit-edit-mode-link"), () => {
- Logic.showPanel(P_CONTAINERS_LIST);
- });
},
// This method is called when the panel is shown.
prepare() {
+ Logic.listenToPickerBackButton();
+ document.getElementById("picker-title").textContent = "Open a New Tab in";
const fragment = document.createDocumentFragment();
+ const pickedFunction = function (identity) {
+ try {
+ browser.tabs.create({
+ cookieStoreId: identity.cookieStoreId
+ });
+ window.close();
+ } catch (e) {
+ window.close();
+ }
+ };
+
+ document.getElementById("new-container-div").innerHTML = "";
+
Logic.identities().forEach(identity => {
const tr = document.createElement("tr");
- fragment.appendChild(tr);
- tr.classList.add("container-panel-row");
- tr.innerHTML = escaped`
-
-
-
-
+ tr.classList.add("menu-item", "hover-highlight");
+ tr.setAttribute("tabindex", "0");
+ const td = document.createElement("td");
+
+ td.innerHTML = Utils.escaped`
+ |
-
- 
- |
-
- 
- | `;
- tr.querySelector(".container-name").textContent = identity.name;
- tr.querySelector(".edit-container").setAttribute("title", `Edit ${identity.name} container`);
- tr.querySelector(".remove-container").setAttribute("title", `Remove ${identity.name} container`);
+