Merge branch 'master' into duplicated-tabs

README.md

@@ -22,7 +22,15 @@ For more info, see:
 2. `./node_modules/.bin/web-ext run -s src/`
 
 ### Testing
-TBD
+`npm run test`
+
+or 
+
+`npm run lint` 
+
+for just the linter
+
+There is a timeout test that sometimes fails on certain machines, so make sure to run the tests on your clone before you make any changes to see if you have this problem.
 
 ### Distributing
 #### Make the new version

package.json

@@ -9,8 +9,8 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "ajv": "^6.6.2",
     "addons-linter": "^1.3.2",
+    "ajv": "^6.6.2",
     "chai": "^4.1.2",
     "eslint": "^3.17.1",
     "eslint-plugin-no-unsanitized": "^2.0.0",
@@ -25,7 +25,7 @@
     "stylelint": "^7.9.0",
     "stylelint-config-standard": "^16.0.0",
     "stylelint-order": "^0.3.0",
-    "web-ext": "^2.2.2"
+    "web-ext": "^2.9.3"
   },
   "homepage": "https://github.com/mozilla/multi-account-containers#readme",
   "license": "MPL-2.0",

src/css/confirm-page.css

@@ -60,6 +60,7 @@ html {
 @media (prefers-color-scheme: dark) {
   #redirect-url {
     background: #38383d; /* Grey 70 */
+    color: #eee; /* White 20 */
   }
 }
 /* stylelint-enable */

src/js/background/assignManager.js

@@ -4,7 +4,7 @@ const assignManager = {
   MENU_SEPARATOR_ID: "separator",
   MENU_HIDE_ID: "hide-container",
   MENU_MOVE_ID: "move-to-new-window-container",
-
+  OPEN_IN_CONTAINER: "open-bookmark-in-container-tab",
   storageArea: {
     area: browser.storage.local,
     exemptedTabs: {},
@@ -143,7 +143,6 @@ const assignManager = {
     const userContextId = this.getUserContextIdFromCookieStore(tab);
     if (!siteSettings
         || userContextId === siteSettings.userContextId
-        || tab.incognito
         || this.storageArea.isExempted(options.url, tab.id)) {
       return {};
     }
@@ -221,7 +220,7 @@ const assignManager = {
 
   init() {
     browser.contextMenus.onClicked.addListener((info, tab) => {
-      this._onClickedHandler(info, tab);
+      info.bookmarkId ? this._onClickedBookmark(info) : this._onClickedHandler(info, tab);
     });
 
     // Before a request is handled by the browser we decide if we should route through a different container
@@ -241,7 +240,39 @@ const assignManager = {
         delete this.canceledRequests[options.tabId];
       }
     },{urls: ["<all_urls>"], types: ["main_frame"]});
+    this.getPermissions();
+  },
 
+  async getPermissions() {
+    const {permissions} = await browser.permissions.getAll();
+    permissions.includes("bookmarks") ? this.makeBookmarksMenu() : browser.contextMenus.remove(this.OPEN_IN_CONTAINER);
+  },
+
+  makeBookmarksMenu() {
+    this.initBookmarksMenu();
+    browser.contextualIdentities.onCreated.addListener(this.contextualIdentityCreated);
+    browser.contextualIdentities.onUpdated.addListener(this.contextualIdentityUpdated);
+    browser.contextualIdentities.onRemoved.addListener(this.contextualIdentityRemoved);
+  },
+
+  contextualIdentityCreated(changeInfo) {
+    browser.contextMenus.create({
+      parentId: assignManager.OPEN_IN_CONTAINER,
+      id: changeInfo.contextualIdentity.cookieStoreId,
+      title: changeInfo.contextualIdentity.name,
+      icons: { "16": `img/usercontext.svg#${changeInfo.contextualIdentity.icon}` }
+    });
+  },
+
+  contextualIdentityUpdated(changeInfo) {
+    browser.contextMenus.update(changeInfo.contextualIdentity.cookieStoreId, {
+      title: changeInfo.contextualIdentity.name,
+      icons: { "16": `img/usercontext.svg#${changeInfo.contextualIdentity.icon}` }
+    });
+  },
+
+  contextualIdentityRemoved(changeInfo) {
+    browser.contextMenus.remove(changeInfo.contextualIdentity.cookieStoreId);
   },
 
   async _onClickedHandler(info, tab) {
@@ -275,6 +306,38 @@ const assignManager = {
     }
   },
 
+  async _onClickedBookmark(info) {
+
+    async function _getBookmarksFromInfo(info) {
+      const [bookmarkTreeNode] = await browser.bookmarks.get(info.bookmarkId);
+      if (bookmarkTreeNode.type === "folder") {
+        return await browser.bookmarks.getChildren(bookmarkTreeNode.id);
+      }
+      return [bookmarkTreeNode];
+    }
+
+    const bookmarks = await _getBookmarksFromInfo(info);
+    for (const bookmark of bookmarks) {
+      // Some checks on the urls from https://github.com/Rob--W/bookmark-container-tab/ thanks!
+      if ( !/^(javascript|place):/i.test(bookmark.url) && bookmark.type !== "folder") {
+        const openInReaderMode = bookmark.url.startsWith("about:reader");
+        if(openInReaderMode) {
+          try {
+            const parsed = new URL(bookmark.url);
+            bookmark.url = parsed.searchParams.get("url") + parsed.hash; // can't believe const lets me do this ...
+          } catch (err) {
+            return err.message;
+          }
+        }
+        browser.tabs.create({
+          cookieStoreId: info.menuItemId,
+          url: bookmark.url,
+          openInReaderMode: openInReaderMode
+        });
+      }
+    }
+  },
+
 
   deleteContainer(userContextId) {
     this.storageArea.deleteContainer(userContextId);
@@ -289,11 +352,9 @@ const assignManager = {
 
   isTabPermittedAssign(tab) {
     // Ensure we are not an important about url
-    // Ensure we are not in incognito mode
     const url = new URL(tab.url);
     if (url.protocol === "about:"
-        || url.protocol === "moz-extension:"
+        || url.protocol === "moz-extension:") {
-        || tab.incognito) {
       return false;
     }
     return true;
@@ -442,6 +503,24 @@ const assignManager = {
         throw e;
       });
     }
+  },
+
+  async initBookmarksMenu() {
+    browser.contextMenus.create({
+      id: this.OPEN_IN_CONTAINER,
+      title: "Open Bookmark in Container Tab",
+      contexts: ["bookmark"],
+    });
+
+    const identities = await browser.contextualIdentities.query({});
+    for (const identity of identities) {
+      browser.contextMenus.create({
+        parentId: this.OPEN_IN_CONTAINER,
+        id: identity.cookieStoreId,
+        title: identity.name,
+        icons: { "16": `img/usercontext.svg#${identity.icon}` }
+      });
+    }
   }
 };
 

src/js/background/backgroundLogic.js

@@ -46,15 +46,13 @@ const backgroundLogic = {
       donePromise = browser.contextualIdentities.create(options.params);
     }
     await donePromise;
-    browser.runtime.sendMessage({
-      method: "refreshNeeded"
-    });
   },
 
   async openNewTab(options) {
     let url = options.url || undefined;
     const userContextId = ("userContextId" in options) ? options.userContextId : 0;
     const active = ("nofocus" in options) ? options.nofocus : true;
+    const discarded = ("noload" in options) ? options.noload : false;
 
     const cookieStoreId = backgroundLogic.cookieStoreId(userContextId);
     // Autofocus url bar will happen in 54: https://bugzilla.mozilla.org/show_bug.cgi?id=1295072
@@ -71,6 +69,7 @@ const backgroundLogic = {
     return browser.tabs.create({
       url,
       active,
+      discarded,
       pinned: options.pinned || false,
       cookieStoreId
     });
@@ -316,10 +315,10 @@ const backgroundLogic = {
           userContextId: userContextId,
           url: object.url,
           nofocus: options.nofocus || false,
+          noload: true,
           pinned: object.pinned,
         }));
       }
-
     }
 
     containerState.hiddenTabs = [];
@@ -331,4 +330,4 @@ const backgroundLogic = {
   cookieStoreId(userContextId) {
     return `firefox-container-${userContextId}`;
   }
-};
+};

src/js/background/badge.js

@@ -2,22 +2,17 @@ const MAJOR_VERSIONS = ["2.3.0", "2.4.0"];
 const badge = {
   async init() {
     const currentWindow = await browser.windows.getCurrent();
-    this.displayBrowserActionBadge(currentWindow.incognito);
+    this.displayBrowserActionBadge(currentWindow);
-  },
-
-  disableAddon(tabId) {
-    browser.browserAction.disable(tabId);
-    browser.browserAction.setTitle({ tabId, title: "Containers disabled in Private Browsing Mode" });
   },
 
   async displayBrowserActionBadge() {
     const extensionInfo = await backgroundLogic.getExtensionInfo();
-    const storage = await browser.storage.local.get({browserActionBadgesClicked: []});
+    const storage = await browser.storage.local.get({ browserActionBadgesClicked: [] });
 
     if (MAJOR_VERSIONS.indexOf(extensionInfo.version) > -1 &&
-        storage.browserActionBadgesClicked.indexOf(extensionInfo.version) < 0) {
+      storage.browserActionBadgesClicked.indexOf(extensionInfo.version) < 0) {
-      browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"});
+      browser.browserAction.setBadgeBackgroundColor({ color: "rgba(0,217,0,255)" });
-      browser.browserAction.setBadgeText({text: "NEW"});
+      browser.browserAction.setBadgeText({ text: "NEW" });
     }
   }
 };

src/js/background/messageHandler.js

@@ -10,6 +10,9 @@ const messageHandler = {
       let response;
 
       switch (m.method) {
+      case "resetBookmarksContext":
+        response = assignManager.getPermissions();
+        break;
       case "deleteContainer":
         response = backgroundLogic.deleteContainer(m.message.userContextId);
         break;
@@ -141,9 +144,6 @@ const messageHandler = {
     }, {urls: ["<all_urls>"], types: ["main_frame"]});
 
     browser.tabs.onCreated.addListener((tab) => {
-      if (tab.incognito) {
-        badge.disableAddon(tab.id);
-      }
       // lets remember the last tab created so we can close it if it looks like a redirect
       this.lastCreatedTab = tab;
       if (tab.cookieStoreId) {

src/js/confirm-page.js

@@ -1,6 +1,6 @@
 async function load() {
   const searchParams = new URL(window.location).searchParams;
-  const redirectUrl = decodeURIComponent(searchParams.get("url"));
+  const redirectUrl = searchParams.get("url");
   const cookieStoreId = searchParams.get("cookieStoreId");
   const currentCookieStoreId = searchParams.get("currentCookieStoreId");
   const redirectUrlElement = document.getElementById("redirect-url");

src/js/options.js

@@ -0,0 +1,41 @@
+
+function requestPermissions() {
+  const checkbox = document.querySelector("#bookmarksPermissions");
+  if (checkbox.checked) {
+    browser.permissions.request({permissions: ["bookmarks"]}).
+    then((response) => {
+      if (response) {
+        browser.runtime.sendMessage({ method: "resetBookmarksContext" });
+      } else {
+        checkbox.checked = false;
+      }
+    }).
+    catch((err) => {
+      return err.message;
+    });
+  } else {
+    browser.permissions.remove({permissions: ["bookmarks"]}).
+    then(() => {
+      browser.runtime.sendMessage({ method: "resetBookmarksContext" });
+    }).
+    catch((err) => {
+      return err.message;
+    });
+  }
+}
+
+function restoreOptions() {
+  browser.permissions.getAll()
+    .then((permissions) => {
+      if (permissions.permissions.includes("bookmarks")) {
+        document.querySelector("#bookmarksPermissions").checked = true;
+      }
+    }).
+    catch((err) => {
+      return err.message;
+    });
+}
+
+
+document.addEventListener("DOMContentLoaded", restoreOptions);
+document.querySelector("#bookmarksPermissions").addEventListener( "change", requestPermissions);

src/js/popup.js

@@ -12,15 +12,15 @@ const NEW_CONTAINER_ID = "new";
 const ONBOARDING_STORAGE_KEY = "onboarding-stage";
 
 // List of panels
-const P_ONBOARDING_1     = "onboarding1";
+const P_ONBOARDING_1 = "onboarding1";
-const P_ONBOARDING_2     = "onboarding2";
+const P_ONBOARDING_2 = "onboarding2";
-const P_ONBOARDING_3     = "onboarding3";
+const P_ONBOARDING_3 = "onboarding3";
-const P_ONBOARDING_4     = "onboarding4";
+const P_ONBOARDING_4 = "onboarding4";
-const P_ONBOARDING_5     = "onboarding5";
+const P_ONBOARDING_5 = "onboarding5";
-const P_CONTAINERS_LIST  = "containersList";
+const P_CONTAINERS_LIST = "containersList";
-const P_CONTAINERS_EDIT  = "containersEdit";
+const P_CONTAINERS_EDIT = "containersEdit";
-const P_CONTAINER_INFO   = "containerInfo";
+const P_CONTAINER_INFO = "containerInfo";
-const P_CONTAINER_EDIT   = "containerEdit";
+const P_CONTAINER_EDIT = "containerEdit";
 const P_CONTAINER_DELETE = "containerDelete";
 const P_CONTAINERS_ACHIEVEMENT = "containersAchievement";
 
@@ -32,7 +32,7 @@ const P_CONTAINERS_ACHIEVEMENT = "containersAchievement";
  * @return {string} The escaped string.
  */
 function escapeXML(str) {
-  const replacements = {"&": "&amp;", "\"": "&quot;", "'": "&apos;", "<": "&lt;", ">": "&gt;", "/": "&#x2F;"};
+  const replacements = { "&": "&amp;", "\"": "&quot;", "'": "&apos;", "<": "&lt;", ">": "&gt;", "/": "&#x2F;" };
   return String(str).replace(/[&"'<>/]/g, m => replacements[m]);
 }
 
@@ -85,7 +85,7 @@ const Logic = {
 
     try {
       await identitiesPromise;
-    } catch(e) {
+    } catch (e) {
       throw new Error("Failed to retrieve the identities or variation. We cannot continue. ", e.message);
     }
 
@@ -125,7 +125,7 @@ const Logic = {
   async showAchievementOrContainersListPanel() {
     // Do we need to show an achievement panel?
     let showAchievements = false;
-    const achievementsStorage = await browser.storage.local.get({achievements: []});
+    const achievementsStorage = await browser.storage.local.get({ achievements: [] });
     for (const achievement of achievementsStorage.achievements) {
       if (!achievement.done) {
         showAchievements = true;
@@ -142,7 +142,7 @@ const Logic = {
   // 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 achievementsStorage = await browser.storage.local.get({ achievements: [] });
     const achievements = achievementsStorage.achievements;
     achievements.forEach((achievement, index, achievementsArray) => {
       if (achievement.name === achievementName) {
@@ -150,7 +150,7 @@ const Logic = {
         achievementsArray[index] = achievement;
       }
     });
-    browser.storage.local.set({achievements});
+    browser.storage.local.set({ achievements });
   },
 
   setOnboardingStage(stage) {
@@ -161,9 +161,9 @@ const Logic = {
 
   async clearBrowserActionBadge() {
     const extensionInfo = await getExtensionInfo();
-    const storage = await browser.storage.local.get({browserActionBadgesClicked: []});
+    const storage = await browser.storage.local.get({ browserActionBadgesClicked: [] });
-    browser.browserAction.setBadgeBackgroundColor({color: null});
+    browser.browserAction.setBadgeBackgroundColor({ color: null });
-    browser.browserAction.setBadgeText({text: ""});
+    browser.browserAction.setBadgeText({ text: "" });
     storage.browserActionBadgesClicked.push(extensionInfo.version);
     // use set and spread to create a unique array
     const browserActionBadgesClicked = [...new Set(storage.browserActionBadgesClicked)];
@@ -184,7 +184,7 @@ const Logic = {
     // Handle old style rejection with null and also Promise.reject new style
     try {
       return await browser.contextualIdentities.get(cookieStoreId) || defaultContainer;
-    } catch(e) {
+    } catch (e) {
       return defaultContainer;
     }
   },
@@ -207,7 +207,7 @@ const Logic = {
   },
 
   async currentTab() {
-    const activeTabs = await browser.tabs.query({active: true, windowId: browser.windows.WINDOW_ID_CURRENT});
+    const activeTabs = await browser.tabs.query({ active: true, windowId: browser.windows.WINDOW_ID_CURRENT });
     if (activeTabs.length > 0) {
       return activeTabs[0];
     }
@@ -215,7 +215,7 @@ const Logic = {
   },
 
   async numTabs() {
-    const activeTabs = await browser.tabs.query({windowId: browser.windows.WINDOW_ID_CURRENT});
+    const activeTabs = await browser.tabs.query({ windowId: browser.windows.WINDOW_ID_CURRENT });
     return activeTabs.length;
   },
 
@@ -259,7 +259,7 @@ const Logic = {
 
   getPanelSelector(panel) {
     if (this._onboardingVariation === "securityOnboarding" &&
-        panel.hasOwnProperty("securityPanelSelector")) {
+      panel.hasOwnProperty("securityPanelSelector")) {
       return panel.securityPanelSelector;
     } else {
       return panel.panelSelector;
@@ -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() {
@@ -333,7 +339,7 @@ const Logic = {
 
     return browser.runtime.sendMessage({
       method: "deleteContainer",
-      message: {userContextId}
+      message: { userContextId }
     });
   },
 
@@ -347,7 +353,7 @@ const Logic = {
   getAssignmentObjectByContainer(userContextId) {
     return browser.runtime.sendMessage({
       method: "getAssignmentObjectByContainer",
-      message: {userContextId}
+      message: { userContextId }
     });
   },
 
@@ -376,7 +382,7 @@ const Logic = {
     });
 
     // Here we find the first valid id.
-    for (let id = 1;; ++id) {
+    for (let id = 1; ; ++id) {
       if (ids.indexOf(id) === -1) {
         return defaultName + (id < 10 ? "0" : "") + id;
       }
@@ -511,7 +517,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
     });
 
     Logic.addEnterHandler(document.querySelector("#edit-containers-link"), (e) => {
-      if (!e.target.classList.contains("disable-edit-containers")){
+      if (!e.target.classList.contains("disable-edit-containers")) {
         Logic.showPanel(P_CONTAINERS_EDIT);
       }
     });
@@ -550,6 +556,22 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       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") {
@@ -635,11 +657,11 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
 
       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.title = escaped`View ${identity.name} container`;
+      manage.setAttribute("title", `View ${identity.name} container`);
       context.setAttribute("tabindex", "0");
-      context.title = escaped`Create ${identity.name} tab`;
+      context.setAttribute("title", `Create ${identity.name} tab`);
       context.innerHTML = escaped`
         <div class="userContext-icon-wrapper open-newtab">
           <div class="usercontext-icon"
@@ -661,8 +683,8 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
 
       Logic.addEnterHandler(tr, async (e) => {
         if (e.target.matches(".open-newtab")
-            || e.target.parentNode.matches(".open-newtab")
+          || e.target.parentNode.matches(".open-newtab")
-            || e.type === "keydown") {
+          || e.type === "keydown") {
           try {
             browser.tabs.create({
               cookieStoreId: identity.cookieStoreId
@@ -713,11 +735,15 @@ Logic.registerPanel(P_CONTAINER_INFO, {
 
   // This method is called when the object is registered.
   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();
     });
-
+    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();
       try {
         browser.runtime.sendMessage({
@@ -741,13 +767,14 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       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; 
+      return;
     }
     Logic.addEnterHandler(moveTabsEl, async () => {
       await browser.runtime.sendMessage({
@@ -807,8 +834,9 @@ Logic.registerPanel(P_CONTAINER_INFO, {
         <td></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.setAttribute("tabindex", "0");
       document.getElementById("container-info-table").appendChild(fragment);
-      
+
       // On click, we activate this tab. But only if this tab is active.
       if (!tab.hiddenState) {
         const closeImage = document.createElement("img");
@@ -830,7 +858,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
 
         tr.classList.add("clickable");
         Logic.addEnterHandler(tr, async () => {
-          await browser.tabs.update(tab.id, {active: true});
+          await browser.tabs.update(tab.id, { active: true });
           window.close();
         });
 
@@ -842,7 +870,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
           });
         }
       }
-    } 
+    }
   },
 });
 
@@ -1018,7 +1046,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
       return escaped`<input type="radio" value="${containerColor}" name="container-color" id="edit-container-panel-choose-color-${containerColor}" />
      <label for="edit-container-panel-choose-color-${containerColor}" class="usercontext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="${containerColor}">`;
     };
-    const colors = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple" ];
+    const colors = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple"];
     const colorRadioFieldset = document.getElementById("edit-container-panel-choose-color");
     colors.forEach((containerColor) => {
       const templateInstance = document.createElement("div");
@@ -1093,7 +1121,7 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
         await Logic.removeIdentity(Logic.userContextId(Logic.currentIdentity().cookieStoreId));
         await Logic.refreshIdentities();
         Logic.showPreviousPanel();
-      } catch(e) {
+      } catch (e) {
         Logic.showPanel(P_CONTAINERS_LIST);
       }
     });
@@ -1154,4 +1182,4 @@ window.addEventListener("resize", function () {
     root.style.setProperty("--overflow-size", difference + "px");
     root.style.setProperty("--icon-fit", "12");
   }
-});
+});

src/manifest.json

@@ -2,22 +2,19 @@
   "manifest_version": 2,
   "name": "Firefox Multi-Account Containers",
   "version": "6.1.1",
-
+  "incognito": "not_allowed",
   "description": "Multi-Account Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate.",
   "icons": {
     "48": "img/container-site-d-48.png",
     "96": "img/container-site-d-96.png"
   },
-
   "applications": {
     "gecko": {
       "id": "@testpilot-containers",
-      "strict_min_version": "57.0"
+      "strict_min_version": "67.0"
     }
   },
-
   "homepage_url": "https://github.com/mozilla/multi-account-containers#readme",
-
   "permissions": [
     "<all_urls>",
     "activeTab",
@@ -32,7 +29,9 @@
     "webRequestBlocking",
     "webRequest"
   ],
-
+  "optional_permissions": [
+    "bookmarks"
+  ],
   "commands": {
     "_execute_browser_action": {
       "suggested_key": {
@@ -42,33 +41,40 @@
       "description": "Open containers panel"
     }
   },
-
   "browser_action": {
     "browser_style": true,
     "default_icon": "img/container-site.svg",
     "default_title": "Multi-Account Containers",
     "default_popup": "popup.html",
-    "theme_icons": [{
+    "theme_icons": [
+      {
         "light": "img/container-site-light.svg",
         "dark": "img/container-site.svg",
         "size": 32
-    }]
+      }
+    ]
   },
-
   "background": {
     "page": "js/background/index.html"
   },
-
   "content_scripts": [
     {
-      "matches": ["<all_urls>"],
+      "matches": [
-      "js": ["js/content-script.js"],
+        "<all_urls>"
-      "css": ["css/content.css"],
+      ],
+      "js": [
+        "js/content-script.js"
+      ],
+      "css": [
+        "css/content.css"
+      ],
       "run_at": "document_start"
     }
   ],
-
   "web_accessible_resources": [
     "/img/container-site-d-24.png"
-  ]
+  ],
-}
+  "options_ui": {
+    "page": "options.html"
+  }
+}

src/options.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+  </head>
+
+  <body>
+    <form>
+      <input type="checkbox" id="bookmarksPermissions"/>
+      <label>Enable Bookmark Menus</label>
+      <p>This setting allows you to open a bookmark or folder of bookmarks in a container.</p>
+    </form>
+    <script src="js/options.js"></script>
+  </body>
+</html>

test/browser.mock.js

@@ -58,7 +58,16 @@ module.exports = () => {
     contextualIdentities: {
       create: sinon.stub(),
       get: sinon.stub(),
-      query: sinon.stub().resolves([])
+      query: sinon.stub().resolves([]),
+      onCreated: {
+        addListener: sinon.stub()
+      },
+      onUpdated: {
+        addListener: sinon.stub()
+      },
+      onRemoved: {
+        addListener: sinon.stub()
+      }
     },
     contextMenus: {
       create: sinon.stub(),
@@ -82,6 +91,9 @@ module.exports = () => {
     },
     extension: {
       getURL: sinon.stub().returns("moz-extension://multi-account-containers/confirm-page.html")
+    },
+    permissions: {
+      getAll: sinon.stub().returns({"permissions": ["bookmarks"]})
     }
   };