Merge pull request #1950 from mozilla/version-bump

Bump version from 7.2.0 to 7.3.0

package.json

@@ -2,7 +2,7 @@
   "name": "testpilot-containers",
   "title": "Multi-Account Containers",
   "description": "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.",
-  "version": "7.0.2",
+  "version": "7.3.0",
   "author": "Andrea Marchesini, Luke Crouch and Jonathan Kingston",
   "bugs": {
     "url": "https://github.com/mozilla/multi-account-containers/issues"
@@ -22,10 +22,10 @@
     "nyc": "^15.0.0",
     "sinon": "^7.5.0",
     "sinon-chai": "^3.3.0",
-    "stylelint-order": "^4.0.0",
     "stylelint": "^13.5.0",
     "stylelint-config-standard": "^20.0.0",
-    "web-ext": "^2.9.3",
+    "stylelint-order": "^4.0.0",
+    "web-ext": "^5.4.1",
     "webextensions-jsdom": "^1.2.1"
   },
   "homepage": "https://github.com/mozilla/multi-account-containers#readme",

src/css/confirm-page.css

@@ -18,7 +18,6 @@ main {
 button .container-name,
 #current-container-name {
   font-weight: bold;
-  text-transform: capitalize;
 }
 
 @media only screen and (max-width: 1300px) {

src/css/popup.css

@@ -691,6 +691,10 @@ h3.title {
   max-inline-size: 300px;
 }
 
+.menu-item.drag-over td {
+  border-block-start: 2px solid var(--text-normal-color);
+}
+
 .disabled-menu-item {
   color: grey;
   cursor: default;
@@ -931,3 +935,115 @@ tr > td > .trash-button {
 tr:hover > td > .trash-button {
   display: block;
 }
+
+.move-button {
+  cursor: move;
+  display: inline-block;
+  height: 100%;
+  inline-size: 16px;
+  margin-block-end: 4px;
+  margin-block-start: 4px;
+  margin-inline-end: 10px;
+  margin-inline-start: auto;
+  text-align: center;
+}
+
+.move-button > img {
+  height: 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --title-text-color: #fff;
+    --text-normal-color: #f9f9fa;
+    --text-heading-color: #fff;
+  }
+
+  html {
+    background-color: #4a4a4a;
+  }
+
+  body {
+    color: #fff;
+
+    --hr-grey: #38383d;
+    --text-grey: #f9f9fa;
+  }
+
+  h3.title {
+    color: #fff;
+  }
+
+  .bottom-btn {
+    background-color: #737373;
+    border: solid 1px #737373;
+  }
+
+  .btn-return.arrow-left {
+    background-color: transparent;
+  }
+
+  .onboarding-title,
+  .delete-container-confirm-title {
+    color: #ededf0;
+  }
+
+  input {
+    border: solid 1px #737373;
+  }
+
+  #edit-container-panel-name-input {
+    background-color: #38383d;
+    color: #fff;
+  }
+
+  .delete-container {
+    background-color: #4a4a4a;
+  }
+
+  .delete-btn {
+    background-color: #737373;
+    color: #f9f9fa;
+  }
+
+  .cancel-button,
+  .grey-button {
+    background-color: #737373;
+    color: #fff;
+  }
+
+  .button.secondary:hover,
+  .button.secondary:focus {
+    background-color: #676767;
+  }
+
+  .panel-footer {
+    border-block-end: solid 1px #4a4a4a;
+  }
+
+  img.menu-icon,
+  .menu-icon > img,
+  .menu-arrow > img,
+  .info-icon > img,
+  .btn-return.arrow-left {
+    filter: invert(1);
+  }
+
+  #edit-sites-assigned .menu-icon,
+  #container-info-table .menu-icon {
+    filter: invert(0);
+  }
+
+  .truncate-text::after {
+    background: #4a4a4a;
+    mask-image: linear-gradient(to right, transparent, #4a4a4a 70%);
+  }
+
+  [data-identity-color="grey"] {
+    --identity-icon-color: #ededf0;
+  }
+
+  [type="radio"]:checked + [data-identity-color="grey"] {
+    --identity-icon-color: #616161;
+  }
+}

src/img/container-move.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><script xmlns=""/>
+    <defs/>
+    <g id="All" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="hamburger-menu" fill="#858585">
+            <g id="Group" transform="translate(2.000000, 6.000000)">
+                <rect id="Rectangle-path" x="0" y="0" width="26" height="2"/>
+                <rect id="Rectangle-path" x="0" y="8" width="26" height="2"/>
+                <rect id="Rectangle-path" x="0" y="16" width="26" height="2"/>
+            </g>
+        </g>
+    </g>
+</svg>

src/js/background/assignManager.js

@@ -51,6 +51,11 @@ window.assignManager = {
       return !!syncEnabled;
     },
 
+    async getReplaceTabEnabled() {
+      const { replaceTabEnabled } = await browser.storage.local.get("replaceTabEnabled");
+      return !!replaceTabEnabled;
+    },
+
     getByUrlKey(siteStoreKey) {
       return new Promise((resolve, reject) => {
         this.area.get([siteStoreKey]).then((storageResponse) => {
@@ -233,9 +238,11 @@ window.assignManager = {
         return {};
       }
     }
+    const replaceTabEnabled = await this.storageArea.getReplaceTabEnabled();
     const removeTab = backgroundLogic.NEW_TAB_PAGES.has(tab.url)
       || (messageHandler.lastCreatedTab
-        && messageHandler.lastCreatedTab.id === tab.id);
+        && messageHandler.lastCreatedTab.id === tab.id)
+      || replaceTabEnabled;
     const openTabId = removeTab ? tab.openerTabId : tab.id;
 
     if (!this.canceledRequests[tab.id]) {

src/js/options.js

@@ -16,25 +16,24 @@ async function requestPermissions() {
 
 async function enableDisableSync() {
   const checkbox = document.querySelector("#syncCheck");
-  if (checkbox.checked) {
-    await browser.storage.local.set({syncEnabled: true});
-  } else {
-    await browser.storage.local.set({syncEnabled: false});
-  }
+  await browser.storage.local.set({syncEnabled: !!checkbox.checked});
   browser.runtime.sendMessage({ method: "resetSync" });
 }
 
+async function enableDisableReplaceTab() {
+  const checkbox = document.querySelector("#replaceTabCheck");
+  await browser.storage.local.set({replaceTabEnabled: !!checkbox.checked});
+}
+
 async function setupOptions() {
   const hasPermission = await browser.permissions.contains({permissions: ["bookmarks"]});
   const { syncEnabled } = await browser.storage.local.get("syncEnabled");
+  const { replaceTabEnabled } = await browser.storage.local.get("replaceTabEnabled");
   if (hasPermission) {
     document.querySelector("#bookmarksPermissions").checked = true;
   }
-  if (syncEnabled) {
-    document.querySelector("#syncCheck").checked = true;
-  } else {
-    document.querySelector("#syncCheck").checked = false;
-  }
+  document.querySelector("#syncCheck").checked = !!syncEnabled;
+  document.querySelector("#replaceTabCheck").checked = !!replaceTabEnabled;
   setupContainerShortcutSelects();
 }
 
@@ -82,6 +81,7 @@ function resetOnboarding() {
 document.addEventListener("DOMContentLoaded", setupOptions);
 document.querySelector("#bookmarksPermissions").addEventListener( "change", requestPermissions);
 document.querySelector("#syncCheck").addEventListener( "change", enableDisableSync);
+document.querySelector("#replaceTabCheck").addEventListener( "change", enableDisableReplaceTab);
 document.querySelector("button").addEventListener("click", resetOnboarding);
 
 for (let i=0; i < NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {

src/js/popup.js

@@ -10,6 +10,8 @@ const DEFAULT_ICON = "circle";
 const NEW_CONTAINER_ID = "new";
 
 const ONBOARDING_STORAGE_KEY = "onboarding-stage";
+const CONTAINER_ORDER_STORAGE_KEY = "container-order";
+const CONTAINER_DRAG_DATA_TYPE = "firefox-container";
 
 // List of panels
 const P_ONBOARDING_1 = "onboarding1";
@@ -192,16 +194,29 @@ const Logic = {
     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] = await Promise.all([
+    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) {
@@ -211,8 +226,11 @@ const Logic = {
         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) {
@@ -1006,12 +1024,59 @@ Logic.registerPanel(MANAGE_CONTAINERS_PICKER, {
             data-identity-color="${identity.color}">
           </div>
         </div>
-        <span class="menu-text">${identity.name}</span>`;
+        <span class="menu-text">${identity.name}</span>
+        <span class="move-button">
+          <img
+            class="pop-button-image"
+            src="/img/container-move.svg"
+          />
+        </span>`;
 
       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);
       });

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Firefox Multi-Account Containers",
-  "version": "7.0.2",
+  "version": "7.3.0",
   "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": {

src/options.html

@@ -20,6 +20,13 @@
         Enable Sync
       </label>
       <p><em>This setting allows you to sync your containers and site assignments across devices.</em></p>
+      <h3>Tab behaviour:</h3>
+      <label>
+        <input type="checkbox" id="replaceTabCheck">
+        Replace tab instead of creating a new one
+      </label>
+      <p><em>Replace the current tab if a page which is assigned to another container is opened (instead of keeping the current tab open).
+        Opening tabs with middle mouse button is not affected.</em></p>
       <h3>Keyboard Shortcuts:</h3>
       <p><em>Edit which container is opened when using the numbered shortcuts.</em></p>
       <p><label>

test/common.js

@@ -87,7 +87,8 @@ const initializeWithTab = async (details = {
             "browserActionBadgesClicked": [],
             "onboarding-stage": 7,
             "achievements": [], 
-            "syncEnabled": true
+            "syncEnabled": true,
+            "replaceTabEnabled": false
           });
           window.browser.storage.local.set.resetHistory();
           window.browser.storage.sync.clear();