-
-
-
- 
- `;
-
- tr.appendChild(td);
- fragment.appendChild(tr);
-
- Utils.addEnterHandler(tr, async () => {
- Utils.alwaysOpenInContainer(identity);
- window.close();
- });
- }
-
- const list = document.querySelector("#picker-identities-list");
- list.innerHTML = "";
- list.appendChild(fragment);
-
- MozillaVPN.handleContainerList(identities);
-}
-
-init();
diff --git a/src/js/popup.js b/src/js/popup.js
deleted file mode 100644
index 4ad1501..0000000
--- a/src/js/popup.js
+++ /dev/null
@@ -1,2283 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * 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/password-hide.svg";
-const CONTAINER_UNHIDE_SRC = "/img/password-hide.svg";
-
-const DEFAULT_COLOR = "blue";
-const DEFAULT_ICON = "circle";
-const NEW_CONTAINER_ID = "new";
-
-const ONBOARDING_STORAGE_KEY = "onboarding-stage";
-const CONTAINER_DRAG_DATA_TYPE = "firefox-container";
-
-// List of panels
-const P_ONBOARDING_1 = "onboarding1";
-const P_ONBOARDING_2 = "onboarding2";
-const P_ONBOARDING_3 = "onboarding3";
-const P_ONBOARDING_4 = "onboarding4";
-const P_ONBOARDING_5 = "onboarding5";
-const P_ONBOARDING_6 = "onboarding6";
-const P_ONBOARDING_7 = "onboarding7";
-const P_ONBOARDING_8 = "onboarding8";
-
-const P_CONTAINERS_LIST = "containersList";
-const OPEN_NEW_CONTAINER_PICKER = "new-tab";
-const MANAGE_CONTAINERS_PICKER = "manage";
-const REOPEN_IN_CONTAINER_PICKER = "reopen-in";
-const ALWAYS_OPEN_IN_PICKER = "always-open-in";
-const P_CONTAINER_INFO = "containerInfo";
-const P_CONTAINER_EDIT = "containerEdit";
-const P_CONTAINER_DELETE = "containerDelete";
-const P_CONTAINERS_ACHIEVEMENT = "containersAchievement";
-const P_CONTAINER_ASSIGNMENTS = "containerAssignments";
-
-const P_MOZILLA_VPN_SERVER_LIST = "moz-vpn-server-list";
-const P_ADVANCED_PROXY_SETTINGS = "advanced-proxy-settings-panel";
-
-function addRemoveSiteIsolation() {
- const identity = Logic.currentIdentity();
- browser.runtime.sendMessage({
- method: "addRemoveSiteIsolation",
- cookieStoreId: identity.cookieStoreId
- });
-}
-
-async function getExtensionInfo() {
- const manifestPath = browser.runtime.getURL("manifest.json");
- const response = await fetch(manifestPath);
- const extensionInfo = await response.json();
- return extensionInfo;
-}
-
-// This object controls all the panels, identities and many other things.
-const Logic = {
- _identities: [],
- _currentIdentity: null,
- _currentPanel: null,
- _previousPanelPath: [],
- _panels: {},
- _onboardingVariation: null,
-
- async init() {
- browser.runtime.sendMessage({
- method: "MozillaVPN_attemptPort"
- }),
-
- // Remove browserAction "upgraded" badge when opening panel
- this.clearBrowserActionBadge();
-
- // Retrieve the list of identities.
- const identitiesPromise = this.refreshIdentities();
-
- try {
- await identitiesPromise;
- } catch (e) {
- throw new Error("Failed to retrieve the identities or variation. We cannot continue. ", e.message);
- }
-
- // Routing to the correct panel.
- // If localStorage is disabled, we don't show the onboarding.
- const onboardingData = await browser.storage.local.get([ONBOARDING_STORAGE_KEY]);
- let onboarded = onboardingData[ONBOARDING_STORAGE_KEY];
- if (!onboarded) {
- onboarded = 9;
- this.setOnboardingStage(onboarded);
- }
-
- switch (onboarded) {
- case 8:
- this.showAchievementOrContainersListPanel();
- break;
- case 7:
- this.showPanel(P_ONBOARDING_8);
- break;
- case 6:
- this.showPanel(P_ONBOARDING_8);
- break;
- case 5:
- this.showPanel(P_ONBOARDING_6);
- break;
- case 4:
- this.showPanel(P_ONBOARDING_5);
- break;
- case 3:
- this.showPanel(P_ONBOARDING_4);
- break;
- case 2:
- this.showPanel(P_ONBOARDING_3);
- break;
- case 1:
- this.showPanel(P_ONBOARDING_2);
- break;
- case 0:
- default:
- this.showPanel(P_ONBOARDING_1);
- break;
- }
-
- },
-
- async showAchievementOrContainersListPanel() {
- // Do we need to show an achievement panel?
- let showAchievements = false;
- const achievementsStorage = await browser.storage.local.get({ achievements: [] });
- for (const achievement of achievementsStorage.achievements) {
- if (!achievement.done) {
- showAchievements = true;
- }
- }
- if (showAchievements) {
- this.showPanel(P_CONTAINERS_ACHIEVEMENT);
- } else {
- this.showPanel(P_CONTAINERS_LIST);
- }
- },
-
- // In case the user wants to click multiple actions,
- // they have to click the "Done" button to stop the panel
- // from showing
- async setAchievementDone(achievementName) {
- const achievementsStorage = await browser.storage.local.get({ achievements: [] });
- const achievements = achievementsStorage.achievements;
- achievements.forEach((achievement, index, achievementsArray) => {
- if (achievement.name === achievementName) {
- achievement.done = true;
- achievementsArray[index] = achievement;
- }
- });
- browser.storage.local.set({ achievements });
- },
-
- setOnboardingStage(stage) {
- return browser.storage.local.set({
- [ONBOARDING_STORAGE_KEY]: stage
- });
- },
-
- async clearBrowserActionBadge() {
- const extensionInfo = await getExtensionInfo();
- const storage = await browser.storage.local.get({ browserActionBadgesClicked: [] });
- browser.browserAction.setBadgeBackgroundColor({ color: "#ffffff" });
- browser.browserAction.setBadgeText({ text: "" });
- storage.browserActionBadgesClicked.push(extensionInfo.version);
- // use set and spread to create a unique array
- const browserActionBadgesClicked = [...new Set(storage.browserActionBadgesClicked)];
- browser.storage.local.set({
- browserActionBadgesClicked
- });
- },
-
- async identity(cookieStoreId) {
- const defaultContainer = {
- name: "Default",
- cookieStoreId,
- icon: "default-tab",
- color: "default-tab",
- numberOfHiddenTabs: 0,
- numberOfOpenTabs: 0
- };
- // Handle old style rejection with null and also Promise.reject new style
- try {
- return await browser.contextualIdentities.get(cookieStoreId) || defaultContainer;
- } catch (e) {
- return defaultContainer;
- }
- },
-
- async numTabs() {
- const activeTabs = await browser.tabs.query({ windowId: browser.windows.WINDOW_ID_CURRENT });
- return activeTabs.length;
- },
-
- _disableMenuItem(message, elementToDisable = document.querySelector("#move-to-new-window")) {
- elementToDisable.setAttribute("title", message);
- elementToDisable.removeAttribute("tabindex");
- elementToDisable.classList.remove("hover-highlight");
- elementToDisable.classList.add("disabled-menu-item");
- },
-
- _enableMenuItems(elementToEnable = document.querySelector("#move-to-new-window")) {
- elementToEnable.removeAttribute("title");
- elementToEnable.setAttribute("tabindex", "0");
- elementToEnable.classList.add("hover-highlight");
- elementToEnable.classList.remove("disabled-menu-item");
- },
-
- async saveContainerOrder(rows) {
- const containerOrder = {};
- rows.forEach((node, index) => {
- return containerOrder[node.dataset.containerId] = index;
- });
- await browser.storage.local.set({
- [CONTAINER_ORDER_STORAGE_KEY]: containerOrder
- });
- },
-
- async refreshIdentities() {
- const [identities, state, containerOrderStorage] = await Promise.all([
- browser.contextualIdentities.query({}),
- browser.runtime.sendMessage({
- method: "queryIdentitiesState",
- message: {
- windowId: browser.windows.WINDOW_ID_CURRENT
- }
- }),
- browser.storage.local.get([CONTAINER_ORDER_STORAGE_KEY])
- ]);
- const containerOrder =
- containerOrderStorage && containerOrderStorage[CONTAINER_ORDER_STORAGE_KEY];
- this._identities = identities.map((identity) => {
- const stateObject = state[identity.cookieStoreId];
- if (stateObject) {
- identity.hasOpenTabs = stateObject.hasOpenTabs;
- identity.hasHiddenTabs = stateObject.hasHiddenTabs;
- identity.numberOfHiddenTabs = stateObject.numberOfHiddenTabs;
- identity.numberOfOpenTabs = stateObject.numberOfOpenTabs;
- identity.isIsolated = stateObject.isIsolated;
- }
- if (containerOrder) {
- identity.order = containerOrder[identity.cookieStoreId];
- }
- return identity;
- }).sort((i1, i2) => i1.order - i2.order);
- },
-
- getPanelSelector(panel) {
- if (this._onboardingVariation === "securityOnboarding" &&
- // eslint-disable-next-line no-prototype-builtins
- panel.hasOwnProperty("securityPanelSelector")) {
- return panel.securityPanelSelector;
- } else {
- return panel.panelSelector;
- }
- },
-
- async showPanel(panel, currentIdentity = null, backwards = false, addToPreviousPanelPath = true) {
- if ((!backwards && addToPreviousPanelPath) || !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;
-
- // Initialize the panel before showing it.
- await this._panels[panel].prepare();
- Object.keys(this._panels).forEach((panelKey) => {
- const panelItem = this._panels[panelKey];
- const panelElement = document.querySelector(this.getPanelSelector(panelItem));
- if (!panelElement.classList.contains("hide")) {
- panelElement.classList.add("hide");
- if ("unregister" in panelItem) {
- panelItem.unregister();
- }
- }
- });
- const panelEl = document.querySelector(this.getPanelSelector(this._panels[panel]));
- panelEl.classList.remove("hide");
-
- const focusEl = panelEl.querySelector(".firstTabindex");
- if(focusEl) {
- focusEl.focus();
- }
- },
-
- showPreviousPanel() {
- if (!this._previousPanelPath) {
- throw new Error("Current panel not set!");
- }
- this.showPanel(this._previousPanelPath.pop(), this._currentIdentity, true);
- },
-
- registerPanel(panelName, panelObject) {
- this._panels[panelName] = panelObject;
- panelObject.initialize();
- },
-
- identities() {
- return this._identities;
- },
-
- currentIdentity() {
- if (!this._currentIdentity) {
- throw new Error("CurrentIdentity must be set before calling Logic.currentIdentity.");
- }
- return this._currentIdentity;
- },
-
- currentUserContextId() {
- const identity = Logic.currentIdentity();
- return Utils.userContextId(identity.cookieStoreId);
- },
-
- cookieStoreId(userContextId) {
- return `firefox-container-${userContextId}`;
- },
-
- currentCookieStoreId() {
- const identity = Logic.currentIdentity();
- return identity.cookieStoreId;
- },
-
- removeIdentity(userContextId) {
- if (!userContextId) {
- return Promise.reject("removeIdentity must be called with userContextId argument.");
- }
-
- return browser.runtime.sendMessage({
- method: "deleteContainer",
- message: { userContextId }
- });
- },
-
- getAssignment(tab) {
- return browser.runtime.sendMessage({
- method: "getAssignment",
- tabId: tab.id
- });
- },
-
- getAssignmentObjectByContainer(userContextId) {
- if (!userContextId) {
- return {};
- }
- return browser.runtime.sendMessage({
- method: "getAssignmentObjectByContainer",
- message: { userContextId }
- });
- },
-
- generateIdentityName() {
- const defaultName = "Container #";
- const ids = [];
-
- // This loop populates the 'ids' array with all the already-used ids.
- this._identities.forEach(identity => {
- if (identity.name.startsWith(defaultName)) {
- const id = parseInt(identity.name.substr(defaultName.length), 10);
- if (id) {
- ids.push(id);
- }
- }
- });
-
- // Here we find the first valid id.
- for (let id = 1; ; ++id) {
- if (ids.indexOf(id) === -1) {
- return defaultName + (id < 10 ? "0" : "") + id;
- }
- }
- },
-
- getCurrentPanelElement() {
- const panelItem = this._panels[this._currentPanel];
- return document.querySelector(this.getPanelSelector(panelItem));
- },
-
- listenToPickerBackButton() {
- const closeContEl = document.querySelector("#close-container-picker-panel");
- if (!this._listenerSet) {
- Utils.addEnterHandler(closeContEl, () => {
- Logic.showPanel(P_CONTAINERS_LIST);
- });
- 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();
- }
-
- // If one Container is highlighted,
- if (element.classList.contains("keyboard-right-arrow-override")) {
- element.querySelector(".menu-right-float").click();
- }
-
- break;
- }
- case 37:
- {
- if(backButton){
- backButton.click();
- }
- break;
- }
- default:
- break;
- }
- }
-};
-
-// P_ONBOARDING_1: First page for Onboarding.
-// ----------------------------------------------------------------------------
-
-Logic.registerPanel(P_ONBOARDING_1, {
- panelSelector: ".onboarding-panel-1",
- securityPanelSelector: ".security-onboarding-panel-1",
-
- // This method is called when the object is registered.
- initialize() {
- // Let's move to the next panel.
- [...document.querySelectorAll(".onboarding-start-button")].forEach(startElement => {
- Utils.addEnterHandler(startElement, async () => {
- await Logic.setOnboardingStage(1);
- Logic.showPanel(P_ONBOARDING_2);
- });
- });
- },
-
- // This method is called when the panel is shown.
- prepare() {
- return Promise.resolve(null);
- },
-});
-
-// P_ONBOARDING_2: Second page for Onboarding.
-// ----------------------------------------------------------------------------
-
-Logic.registerPanel(P_ONBOARDING_2, {
- panelSelector: ".onboarding-panel-2",
- securityPanelSelector: ".security-onboarding-panel-2",
-
- // This method is called when the object is registered.
- initialize() {
- // Let's move to the containers list panel.
- [...document.querySelectorAll(".onboarding-next-button")].forEach(nextElement => {
- Utils.addEnterHandler(nextElement, async () => {
- await Logic.setOnboardingStage(2);
- Logic.showPanel(P_ONBOARDING_3);
- });
- });
- },
-
- // This method is called when the panel is shown.
- prepare() {
- return Promise.resolve(null);
- },
-});
-
-// P_ONBOARDING_3: Third page for Onboarding.
-// ----------------------------------------------------------------------------
-
-Logic.registerPanel(P_ONBOARDING_3, {
- panelSelector: ".onboarding-panel-3",
- securityPanelSelector: ".security-onboarding-panel-3",
-
- // This method is called when the object is registered.
- initialize() {
- // Let's move to the containers list panel.
- [...document.querySelectorAll(".onboarding-almost-done-button")].forEach(almostElement => {
- Utils.addEnterHandler(almostElement, async () => {
- await Logic.setOnboardingStage(3);
- Logic.showPanel(P_ONBOARDING_4);
- });
- });
- },
-
- // This method is called when the panel is shown.
- prepare() {
- return Promise.resolve(null);
- },
-});
-
-// P_ONBOARDING_4: Fourth page for Onboarding.
-// ----------------------------------------------------------------------------
-
-Logic.registerPanel(P_ONBOARDING_4, {
- panelSelector: ".onboarding-panel-4",
-
- // This method is called when the object is registered.
- initialize() {
- // Let's move to the containers list panel.
- Utils.addEnterHandler(document.querySelector("#onboarding-done-button"), async () => {
- await Logic.setOnboardingStage(4);
- Logic.showPanel(P_ONBOARDING_5);
- });
- },
-
- // This method is called when the panel is shown.
- prepare() {
- return Promise.resolve(null);
- },
-});
-
-// P_ONBOARDING_5: Fifth page for Onboarding: new tab long-press behavior
-// ----------------------------------------------------------------------------
-
-Logic.registerPanel(P_ONBOARDING_5, {
- panelSelector: ".onboarding-panel-5",
-
- // This method is called when the object is registered.
- initialize() {
- // Let's move to the containers list panel.
- Utils.addEnterHandler(document.querySelector("#onboarding-longpress-button"), async () => {
- await Logic.setOnboardingStage(5);
- Logic.showPanel(P_ONBOARDING_6);
- });
- },
-
- // This method is called when the panel is shown.
- prepare() {
- return Promise.resolve(null);
- },
-});
-
-// P_ONBOARDING_6: Sixth page for Onboarding: new tab long-press behavior
-// ----------------------------------------------------------------------------
-
-Logic.registerPanel(P_ONBOARDING_6, {
- panelSelector: ".onboarding-panel-6",
-
- // This method is called when the object is registered.
- initialize() {
- // Let's move to the containers list panel.
- Utils.addEnterHandler(document.querySelector("#start-sync-button"), async () => {
- await Logic.setOnboardingStage(6);
- await browser.storage.local.set({syncEnabled: true});
- await browser.runtime.sendMessage({
- method: "resetSync"
- });
- Logic.showPanel(P_ONBOARDING_7);
- });
- Utils.addEnterHandler(document.querySelector("#no-sync"), async () => {
- await Logic.setOnboardingStage(6);
- await browser.storage.local.set({syncEnabled: false});
- await browser.runtime.sendMessage({
- method: "resetSync"
- });
- Logic.showPanel(P_ONBOARDING_8);
- });
- },
-
- // This method is called when the panel is shown.
- prepare() {
- return Promise.resolve(null);
- },
-});
-// -----------------------------------------------------------------------
-
-Logic.registerPanel(P_ONBOARDING_7, {
- panelSelector: ".onboarding-panel-7",
-
- // This method is called when the object is registered.
- initialize() {
- // Let's move to the containers list panel.
- Utils.addEnterHandler(document.querySelector("#sign-in"), async () => {
- browser.tabs.create({
- url: "https://accounts.firefox.com/?service=sync&action=email&context=fx_desktop_v3&entrypoint=multi-account-containers&utm_source=addon&utm_medium=panel&utm_campaign=container-sync",
- });
- await Logic.setOnboardingStage(7);
- Logic.showPanel(P_ONBOARDING_8);
- });
- Utils.addEnterHandler(document.querySelector("#no-sign-in"), async () => {
- await Logic.setOnboardingStage(7);
- Logic.showPanel(P_ONBOARDING_8);
- });
- },
-
- // This method is called when the panel is shown.
- prepare() {
- return Promise.resolve(null);
- },
-});
-
-Logic.registerPanel(P_ONBOARDING_8, {
- panelSelector: ".onboarding-panel-8",
-
- // This method is called when the object is registered.
- initialize() {
- document.querySelectorAll(".onboarding-done").forEach(el => {
- Utils.addEnterHandler(el, async () => {
- await Logic.setOnboardingStage(8);
- Logic.showPanel(P_CONTAINERS_LIST);
- });
- });
-
- },
-
- // This method is called when the panel is shown.
- async prepare() {
- const mozillaVpnPermissionsEnabled = await MozillaVPN.bothPermissionsEnabled();
- if (!mozillaVpnPermissionsEnabled) {
- const panel = document.querySelector(".onboarding-panel-8");
- panel.classList.add("optional-permissions-disabled");
-
- Utils.addEnterHandler(panel.querySelector("#onboarding-enable-permissions"), async () => {
- const granted = await browser.permissions.request({ permissions: ["proxy", "nativeMessaging"] });
- if (granted) {
- await Logic.setOnboardingStage(8);
- }
- });
- }
- return Promise.resolve(null);
- },
-});
-// P_CONTAINERS_LIST: The list of containers. The main page.
-// ----------------------------------------------------------------------------
-
-Logic.registerPanel(P_CONTAINERS_LIST, {
- panelSelector: "#container-panel",
-
- // This method is called when the object is registered.
- async initialize() {
- await browser.runtime.sendMessage({ method: "MozillaVPN_queryStatus" });
- Utils.addEnterHandler(document.querySelector("#manage-containers-link"), (e) => {
- if (!e.target.classList.contains("disable-edit-containers")) {
- Logic.showPanel(MANAGE_CONTAINERS_PICKER);
- }
- });
- Utils.addEnterHandler(document.querySelector("#open-new-tab-in"), () => {
- Logic.showPanel(OPEN_NEW_CONTAINER_PICKER);
- });
- Utils.addEnterHandler(document.querySelector("#reopen-site-in"), () => {
- Logic.showPanel(REOPEN_IN_CONTAINER_PICKER);
- });
- Utils.addEnterHandler(document.querySelector("#always-open-in"), () => {
- Logic.showPanel(ALWAYS_OPEN_IN_PICKER);
- });
- Utils.addEnterHandler(document.querySelector("#sort-containers-link"), async () => {
- try {
- await browser.runtime.sendMessage({
- method: "sortTabs"
- });
- window.close();
- } catch (e) {
- window.close();
- }
- });
-
- const mozillaVpnToutName = "moz-tout-main-panel";
- const mozillaVpnPermissionsWarningDotName = "moz-permissions-warning-dot";
-
- let { mozillaVpnHiddenToutsList } = await browser.storage.local.get("mozillaVpnHiddenToutsList");
- if (typeof(mozillaVpnHiddenToutsList) === "undefined") {
- await browser.storage.local.set({ "mozillaVpnHiddenToutsList": [] });
- mozillaVpnHiddenToutsList = [];
- }
-
- // Decide whether to show Mozilla VPN tout
- const mozVpnTout = document.getElementById("moz-vpn-tout");
- const mozillaVpnInstalled = await browser.runtime.sendMessage({ method: "MozillaVPN_getInstallationStatus" });
- const mozillaVpnToutShouldBeHidden = mozillaVpnHiddenToutsList.find(tout => tout.name === mozillaVpnToutName);
- if (mozillaVpnInstalled || mozillaVpnToutShouldBeHidden) {
- mozVpnTout.remove();
- }
-
- // Add handlers if tout is visible
- const mozVpnDismissTout = document.querySelector(".dismiss-moz-vpn-tout");
- if (mozVpnDismissTout) {
- Utils.addEnterHandler((mozVpnDismissTout), async() => {
- mozVpnTout.remove();
- mozillaVpnHiddenToutsList.push({
- name: mozillaVpnToutName
- });
- await browser.storage.local.set({ mozillaVpnHiddenToutsList });
- });
-
- Utils.addEnterHandler(document.querySelector("#moz-vpn-learn-more"), () => {
- MozillaVPN.handleMozillaCtaClick("mac-main-panel-btn");
- window.close();
- });
- }
-
- // Badge Options icon if both nativeMessaging and/or proxy permissions are disabled
- const bothMozillaVpnPermissionsEnabled = await MozillaVPN.bothPermissionsEnabled();
- const warningDotShouldBeHidden = mozillaVpnHiddenToutsList.find(tout => tout.name === mozillaVpnPermissionsWarningDotName);
- const optionsIcon = document.getElementById("info-icon");
- if (optionsIcon && !bothMozillaVpnPermissionsEnabled && !warningDotShouldBeHidden) {
- optionsIcon.classList.add("info-icon-alert");
- }
-
- Utils.addEnterHandler((document.querySelector("#info-icon")), async() => {
- browser.runtime.openOptionsPage();
- if (!mozillaVpnHiddenToutsList.find(tout => tout.name === mozillaVpnPermissionsWarningDotName)) {
- optionsIcon.classList.remove("info-icon-alert");
- mozillaVpnHiddenToutsList.push({
- name: mozillaVpnPermissionsWarningDotName
- });
- }
- await browser.storage.local.set({ mozillaVpnHiddenToutsList });
- });
- },
-
- unregister() {
- },
-
- // This method is called when the panel is shown.
- async prepare() {
- const fragment = document.createDocumentFragment();
- const identities = Logic.identities();
-
- for (const identity of identities) {
- const tr = document.createElement("tr");
- tr.classList.add("menu-item", "hover-highlight", "keyboard-nav", "keyboard-right-arrow-override");
- tr.setAttribute("tabindex", "0");
- tr.setAttribute("data-cookie-store-id", identity.cookieStoreId);
- const td = document.createElement("td");
- const openTabs = identity.numberOfOpenTabs || "" ;
-
- // TODO get UX and content decision on how to message and block clicks to containers with Mozilla VPN proxy configs
- // when Mozilla VPN app is disconnected.
-
- td.innerHTML = Utils.escaped`
-
-
-
- ${openTabs}
-
- 
-
-
- `;
-
-
-
- fragment.appendChild(tr);
-
- tr.appendChild(td);
-
- const openInThisContainer = tr.querySelector(".menu-item-name");
- Utils.addEnterHandler(openInThisContainer, (e) => {
- e.preventDefault();
- if (openInThisContainer.dataset.mozProxyWarning === "proxy-unavailable") {
- return;
- }
- try {
- browser.tabs.create({
- cookieStoreId: identity.cookieStoreId
- });
- window.close();
- } catch (e) {
- window.close();
- }
- });
-
- Utils.addEnterOnlyHandler(tr, () => {
- try {
- browser.tabs.create({
- cookieStoreId: identity.cookieStoreId
- });
- window.close();
- } catch (e) {
- window.close();
- }
- });
-
- // Select only the ">" from the container list
- const showPanelButton = tr.querySelector(".menu-right-float");
-
- Utils.addEnterHandler(showPanelButton, () => {
- Logic.showPanel(P_CONTAINER_INFO, identity);
- });
- }
-
- const list = document.querySelector("#identities-list");
-
- list.innerHTML = "";
- list.appendChild(fragment);
-
- document.addEventListener("keydown", Logic.keyboardNavListener);
- document.addEventListener("keydown", Logic.shortcutListener);
-
- MozillaVPN.handleContainerList(identities);
-
- // reset path
- this._previousPanelPath = [];
- return Promise.resolve();
- },
-});
-
-// P_CONTAINER_INFO: More info about a container.
-// ----------------------------------------------------------------------------
-
-Logic.registerPanel(P_CONTAINER_INFO, {
- panelSelector: "#container-info-panel",
-
- // This method is called when the object is registered.
- async initialize() {
- const closeContEl = document.querySelector("#close-container-info-panel");
- Utils.addEnterHandler(closeContEl, () => {
- 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({
- 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",
- 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 = browser.i18n.getMessage(identity.hasHiddenTabs ? "showThisContainer" : "hideThisContainer");
- return;
- },
-
- 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("menu-item", "hover-highlight", "keyboard-nav");
- tr.setAttribute("tabindex", "0");
- tr.innerHTML = Utils.escaped`
- 
-
- 
- |
-
- `; - - Utils.addEnterHandler(document.querySelector("#new-container"), () => { - Logic.showPanel(P_CONTAINER_EDIT, { name: Logic.generateIdentityName() }); - }); - - const identities = Logic.identities(); - - for (const identity of identities) { - const tr = document.createElement("tr"); - tr.classList.add("menu-item", "hover-highlight", "keyboard-nav"); - tr.setAttribute("tabindex", "0"); - tr.setAttribute("data-cookie-store-id", identity.cookieStoreId); - - const td = document.createElement("td"); - - td.innerHTML = Utils.escaped` - - -
-
- 
- `;
-
- fragment.appendChild(tr);
-
- tr.appendChild(td);
-
- tr.draggable = true;
- tr.dataset.containerId = identity.cookieStoreId;
- tr.addEventListener("dragstart", (e) => {
- e.dataTransfer.setData(CONTAINER_DRAG_DATA_TYPE, identity.cookieStoreId);
- });
- tr.addEventListener("dragover", (e) => {
- if (e.dataTransfer.types.includes(CONTAINER_DRAG_DATA_TYPE)) {
- tr.classList.add("drag-over");
- e.preventDefault();
- }
- });
- tr.addEventListener("dragenter", (e) => {
- if (e.dataTransfer.types.includes(CONTAINER_DRAG_DATA_TYPE)) {
- e.preventDefault();
- tr.classList.add("drag-over");
- }
- });
- tr.addEventListener("dragleave", (e) => {
- if (e.dataTransfer.types.includes(CONTAINER_DRAG_DATA_TYPE)) {
- e.preventDefault();
- tr.classList.remove("drag-over");
- }
- });
- tr.addEventListener("drop", async (e) => {
- e.preventDefault();
- const parent = tr.parentNode;
- const containerId = e.dataTransfer.getData(CONTAINER_DRAG_DATA_TYPE);
- let droppedElement;
- parent.childNodes.forEach((node) => {
- if (node.dataset.containerId === containerId) {
- droppedElement = node;
- }
- });
- if (droppedElement && droppedElement !== tr) {
- tr.classList.remove("drag-over");
- parent.insertBefore(droppedElement, tr);
- await Logic.saveContainerOrder(parent.childNodes);
- await Logic.refreshIdentities();
- }
- });
-
- Utils.addEnterHandler(tr, () => {
- pickedFunction(identity);
- });
- }
-
- const list = document.querySelector("#picker-identities-list");
-
- list.innerHTML = "";
- list.appendChild(fragment);
-
- MozillaVPN.handleContainerList(identities);
-
- return Promise.resolve();
- }
-});
-
-// REOPEN_IN_CONTAINER_PICKER: Makes the list editable.
-// ----------------------------------------------------------------------------
-
-Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
- panelSelector: "#container-picker-panel",
-
- // This method is called when the object is registered.
- initialize() {
- },
-
- // This method is called when the panel is shown.
- async prepare() {
- Logic.listenToPickerBackButton();
- document.getElementById("picker-title").textContent = browser.i18n.getMessage("reopenThisSiteIn");
- const fragment = document.createDocumentFragment();
- const currentTab = await Utils.currentTab();
- const pickedFunction = function (identity) {
- const newUserContextId = Utils.userContextId(identity.cookieStoreId);
- Utils.reloadInContainer(
- currentTab.url,
- false,
- newUserContextId,
- currentTab.index + 1,
- currentTab.active
- );
- window.close();
- };
-
- document.getElementById("new-container-div").innerHTML = "";
-
- if (currentTab.cookieStoreId !== "firefox-default") {
- const tr = document.createElement("tr");
- tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
- tr.setAttribute("tabindex", "0");
- const td = document.createElement("td");
-
- td.innerHTML = Utils.escaped`
-
- `;
-
- fragment.appendChild(tr);
-
- tr.appendChild(td);
-
- Utils.addEnterHandler(tr, () => {
- Utils.reloadInContainer(
- currentTab.url,
- false,
- 0,
- currentTab.index + 1,
- currentTab.active
- );
- window.close();
- });
- }
-
- Logic.identities().forEach(identity => {
- if (currentTab.cookieStoreId !== identity.cookieStoreId) {
- const tr = document.createElement("tr");
- tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
- tr.setAttribute("tabindex", "0");
- const td = document.createElement("td");
-
- td.innerHTML = Utils.escaped`
-
- `;
-
- fragment.appendChild(tr);
-
- tr.appendChild(td);
-
- Utils.addEnterHandler(tr, () => {
- pickedFunction(identity);
- });
- }
- });
-
- const list = document.querySelector("#picker-identities-list");
-
- list.innerHTML = "";
- list.appendChild(fragment);
-
- return Promise.resolve(null);
- }
-});
-
-// ALWAYS_OPEN_IN_PICKER: Makes the list editable.
-// ----------------------------------------------------------------------------
-
-Logic.registerPanel(ALWAYS_OPEN_IN_PICKER, {
- panelSelector: "#container-picker-panel",
-
- // This method is called when the object is registered.
- initialize() {
- },
-
- // This method is called when the panel is shown.
- async prepare() {
- const identities = Logic.identities();
- Logic.listenToPickerBackButton();
- document.getElementById("picker-title").textContent = browser.i18n.getMessage("alwaysOpenIn");
- const fragment = document.createDocumentFragment();
-
- document.getElementById("new-container-div").innerHTML = "";
-
- for (const identity of identities) {
- const tr = document.createElement("tr");
- tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
- tr.setAttribute("tabindex", "0");
- const td = document.createElement("td");
-
- td.innerHTML = Utils.escaped`
-
-
- `;
-
- fragment.appendChild(tr);
-
- tr.appendChild(td);
-
- Utils.addEnterHandler(tr, () => {
- Utils.alwaysOpenInContainer(identity);
- window.close();
- });
- }
-
- const list = document.querySelector("#picker-identities-list");
-
- list.innerHTML = "";
- list.appendChild(fragment);
-
- return Promise.resolve(null);
- }
-});
-
-// P_CONTAINER_ASSIGNMENTS: Shows Site Assignments and allows editing.
-// ----------------------------------------------------------------------------
-
-Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
- panelSelector: "#edit-container-assignments",
-
- // This method is called when the object is registered.
- initialize() { },
-
- // This method is called when the panel is shown.
- async prepare() {
- const identity = Logic.currentIdentity();
-
- // Populating the panel: name and icon
- document.getElementById("edit-assignments-title").textContent = identity.name;
-
- const userContextId = Logic.currentUserContextId();
- const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
- this.showAssignedContainers(assignments);
-
- return Promise.resolve(null);
- },
-
- showAssignedContainers(assignments) {
- const closeContEl = document.querySelector("#close-container-assignment-panel");
- Utils.addEnterHandler(closeContEl, () => {
- const identity = Logic.currentIdentity();
- Logic.showPanel(P_CONTAINER_EDIT, identity, false, false);
- });
-
- const assignmentPanel = document.getElementById("edit-sites-assigned");
- const assignmentKeys = Object.keys(assignments);
- assignmentPanel.hidden = !(assignmentKeys.length > 0);
- if (assignments) {
- 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("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`
- 
-