container-locking - add lock icons to container list panel

container-locking - fix linting errors from last commit

container-locking - Fix linting errors with previous commit

container-locking - change assignManager function to getNumbersOfAssignments

package.json

@@ -7,7 +7,6 @@
   "bugs": {
     "url": "https://github.com/mozilla/multi-account-containers/issues"
   },
-  "dependencies": {},
   "devDependencies": {
     "addons-linter": "^1.3.2",
     "ajv": "^6.6.2",

src/css/popup.css

@@ -593,7 +593,6 @@ span ~ .panel-header-text {
 }
 
 .userContext-wrapper {
-  align-items: center;
   display: flex;
   flex: 1 1;
   transition: background-color 75ms;
@@ -610,6 +609,23 @@ span ~ .panel-header-text {
   margin-inline-start: var(--inline-icon-space-size);
 }
 
+.userContext-name-wrapper {
+  align-self: center;
+  flex: 1;
+}
+
+.container-panel-row .container-lockorunlock {
+  align-items: center;
+  display: flex;
+  flex: 0 0 var(--icon-button-size);
+}
+
+.container-panel-row .container-lockorunlock img {
+  align-self: center;
+  block-size: 20px;
+  flex: 1;
+}
+
 /* .userContext-icon is used natively, Bug 1333811 was raised to fix */
 .usercontext-icon {
   background-image: var(--identity-icon);
@@ -926,12 +942,24 @@ span ~ .panel-header-text {
 }
 
 /* https://github.com/mozilla/multi-account-containers/issues/847 */
-.container-lockorunlock.container-locked * {
-  filter: invert(0.5) sepia(1) saturate(127) hue-rotate(360deg);
+.container-lockorunlock * {
+  fill: #979797;
+  filter: url('/img/filters.svg#fill');
 }
 
-.container-lockorunlock.container-unlocked * {
-  filter: invert(0.5);
+.container-lockorunlock:hover * {
+  fill: black;
+  filter: url('/img/filters.svg#fill');
+}
+
+.container-lockorunlock.container-locked * {
+  fill: red;
+  filter: url('/img/filters.svg#fill');
+}
+
+.container-lockorunlock.container-locked:hover * {
+  fill: #ba1111;
+  filter: url('/img/filters.svg#fill');
 }
 
 /* Achievement panel elements */

src/js/background/assignManager.js

@@ -92,6 +92,16 @@ const assignManager = {
         }
       });
       return sites;
+    },
+
+    async getNumbersOfAssignments() {
+      return Object.values(await this.area.get()).reduce((result, site) => {
+        const userContextId = site.userContextId;
+        if (userContextId !== undefined) {
+          result[userContextId] = (result[userContextId] || 0) + 1;
+        }
+        return result;
+      }, {});
     }
   },
 

src/js/background/backgroundLogic.js

@@ -251,6 +251,15 @@ const backgroundLogic = {
       return;
     });
     await Promise.all(identitiesPromise);
+
+    // Add number of assignments for each identity
+    const numbersOfAssignments = await assignManager.storageArea.getNumbersOfAssignments();
+    Object.keys(numbersOfAssignments).forEach(userContextId => {
+      const cookieStoreId = backgroundLogic.cookieStoreId(userContextId);
+      const identity = identitiesOutput[cookieStoreId];
+      if (identity) { identity.numberOfAssignments = numbersOfAssignments[userContextId]; }
+    });
+
     return identitiesOutput;
   },
 

src/js/popup.js

@@ -254,6 +254,7 @@ const Logic = {
         identity.hasHiddenTabs = stateObject.hasHiddenTabs;
         identity.numberOfHiddenTabs = stateObject.numberOfHiddenTabs;
         identity.numberOfOpenTabs = stateObject.numberOfOpenTabs;
+        identity.numberOfAssignments = stateObject.numberOfAssignments;
         identity.isLocked = stateObject.isLocked;
       }
       return identity;
@@ -381,6 +382,29 @@ const Logic = {
     });
   },
 
+  showLockState(element, identity) {
+    const icon = element.querySelector(".icon");
+    const label = element.querySelector(".label");
+    const titled = label || element;
+
+    if (icon) { icon.src = identity.isLocked ? CONTAINER_LOCKED_SRC : CONTAINER_UNLOCKED_SRC; }
+    if (label) { label.innerText = identity.isLocked ? "Locked" : "Unlocked"; }
+    titled.setAttribute("title", `${identity.isLocked ? "Lock" : "Unlock"} ${identity.name} container`);
+
+    element.classList.remove("container-locked", "container-unlocked");
+    element.classList.add("container-lockorunlock", identity.isLocked ? "container-locked" : "container-unlocked");
+  },
+
+  async toggleLock(element, identity) {
+    try {
+      await Logic.lockOrUnlockContainer(Logic.userContextId(identity.cookieStoreId), !identity.isLocked);
+      identity.isLocked = !identity.isLocked;
+      this.showLockState(element, identity);
+    } catch (e) {
+      throw new Error("Failed to lock/unlock container: " + e.message);
+    }
+  },
+
   generateIdentityName() {
     const defaultName = "Container #";
     const ids = [];
@@ -678,9 +702,11 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
 
     Logic.identities().forEach(identity => {
       const hasTabs = (identity.hasHiddenTabs || identity.hasOpenTabs);
+      const hasAssignments = identity.numberOfAssignments > 0;
       const tr = document.createElement("tr");
       const context = document.createElement("td");
       const manage = document.createElement("td");
+      const lock = document.createElement("div");
 
       tr.classList.add("container-panel-row");
 
@@ -696,9 +722,13 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
             data-identity-color="${identity.color}">
           </div>
         </div>
-        <div class="container-name truncate-text"></div>`;
+        <div class="userContext-name-wrapper">
+          <div class="container-name truncate-text"></div>
+        </div>`;
       context.querySelector(".container-name").textContent = identity.name;
       manage.innerHTML = "<img src='/img/container-arrow.svg' class='show-tabs pop-button-image-small' />";
+      lock.innerHTML = "<img class='icon' />";
+      Logic.showLockState(lock, identity);
 
       fragment.appendChild(tr);
 
@@ -708,9 +738,15 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
         tr.appendChild(manage);
       }
 
+      if (hasAssignments) {
+        context.appendChild(lock);
+      }
+
       Logic.addEnterHandler(tr, async (e) => {
-        if (e.target.matches(".open-newtab")
-          || e.target.parentNode.matches(".open-newtab")
+        if (e.target.closest(".container-lockorunlock")) {
+          const lock = e.target.closest(".container-lockorunlock");
+          Logic.toggleLock(lock, identity);
+        } else if (e.target.closest(".open-newtab")
           || e.type === "keydown") {
           try {
             browser.tabs.create({
@@ -929,7 +965,9 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
               data-identity-color="${identity.color}">
             </div>
           </div>
-          <div class="container-name truncate-text"></div>
+          <div class="userContext-name-wrapper">
+            <div class="container-name truncate-text"></div>
+          </div>
         </td>
         <td class="edit-container pop-button edit-container-icon">
           <img
@@ -1024,7 +1062,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     }
   },
 
-  showAssignedContainers(assignments, isLocked) {
+  showAssignedContainers(assignments, identity) {
     const assignmentPanel = document.getElementById("edit-sites-assigned");
     const assignmentKeys = Object.keys(assignments);
     assignmentPanel.hidden = !(assignmentKeys.length > 0);
@@ -1037,25 +1075,16 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
       }
 
       /* Container locking: https://github.com/mozilla/multi-account-containers/issues/847 */
-      const lockOrUnlockIcon = isLocked ? CONTAINER_LOCKED_SRC : CONTAINER_UNLOCKED_SRC;
-      const lockOrUnlockLabel = isLocked ? "Locked" : "Unlocked";
-      const lockOrUnlockClass = isLocked ? "container-locked" : "container-unlocked";
-      const lockElement = document.createElement("div");
-      lockElement.innerHTML = escaped`
-        <img class="icon" src="${lockOrUnlockIcon}">
-        <div title="${lockOrUnlockLabel}">
-          ${lockOrUnlockLabel}
-        </div>`;
-      lockElement.classList.add("container-info-tab-row", "clickable", "container-lockorunlock", lockOrUnlockClass);
-      tableElement.appendChild(lockElement);
+      const lock = document.createElement("div");
+      lock.innerHTML = escaped`
+        <img class="icon">
+        <div class="label">`;
+      lock.classList.add("container-info-tab-row", "clickable");
+      Logic.showLockState(lock, identity);
+      tableElement.appendChild(lock);
 
-      Logic.addEnterHandler(lockElement, async () => {
-        try {
-          await Logic.lockOrUnlockContainer(Logic.currentUserContextId(), !isLocked);
-          this.showAssignedContainers(assignments, !isLocked);
-        } catch (e) {
-          throw new Error("Failed to lock/unlock container: " + e.message);
-        }
+      Logic.addEnterHandler(lock, () => {
+        Logic.toggleLock(lock, identity);
       });
       /* Container locking end */
 
@@ -1085,7 +1114,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
           const currentTab = await Logic.currentTab();
           Logic.setOrRemoveAssignment(currentTab.id, assumedUrl, userContextId, true);
           delete assignments[siteKey];
-          that.showAssignedContainers(assignments, isLocked);
+          that.showAssignedContainers(assignments, identity);
         });
         trElement.classList.add("container-info-tab-row", "clickable");
         tableElement.appendChild(trElement);
@@ -1129,7 +1158,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
 
     const userContextId = Logic.currentUserContextId();
     const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
-    this.showAssignedContainers(assignments, identity.isLocked);
+    this.showAssignedContainers(assignments, identity);
     document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId;
 
     document.querySelector("#edit-container-panel-name-input").value = identity.name || "";