Adding in hide/show API for containers

.gitignore

@@ -2,3 +2,4 @@
 node_modules
 README.html
 *.xpi
+*.swp

webextension-experiment/schema.json

@@ -25,8 +25,34 @@
         "parameters": [
           {
             "type": "string",
-            "name": "cookieStoreId",
-            "description": "The ID of the contextual identity cookie store. "
+            "name": "cookiestoreid",
+            "description": "the id of the contextual identity cookie store. "
+          }
+        ]
+      },
+      {
+        "name": "hide",
+        "type": "function",
+        "description": "hides all of a contextual identity.",
+        "async": true,
+        "parameters": [
+          {
+            "type": "string",
+            "name": "cookiestoreid",
+            "description": "the id of the contextual identity cookie store. "
+          }
+        ]
+      },
+      {
+        "name": "show",
+        "type": "function",
+        "description": "unhides all of a contextual identity.",
+        "async": true,
+        "parameters": [
+          {
+            "type": "string",
+            "name": "cookiestoreid",
+            "description": "the id of the contextual identity cookie store. "
           }
         ]
       },

webextension/js/popup.js

@@ -1,24 +1,58 @@
+const identityState = {
+};
+
 browser.contextualIdentities.query({}).then(identites=> {
   let customContainerStyles = '';
   const identitiesListElement = document.querySelector('.identities-list');
 
-  identites.forEach(identity=> {
+  identites.forEach(identity => {
     const identityRow = `
-    <tr>
+    <tr data-identity-id="${identity.cookieStoreId}" >
       <td><div class="userContext-icon"
         data-identity-icon="${identity.icon}"
         data-identity-color="${identity.color}"
       ></div></td>
       <td>${identity.name}</td>
+      <td class="hideorshow" >H/S</td>
       <td>&gt;</td>
     </tr>`;
 
     identitiesListElement.innerHTML += identityRow;
+
+  });
+
+  const rows = identitiesListElement.querySelectorAll('tr');
+  rows.forEach(row => {
+    row.addEventListener('click', (e) => {
+      if (e.target.matches('.hideorshow')) {
+        const containerId = e.target.parentElement.dataset.identityId;
+        if (!(containerId in identityState)) {
+          identityState[containerId] = true;
+        }
+        if (identityState[containerId]) {
+          hideContainer(containerId);
+          identityState[containerId] = false;
+        } else {
+          showContainer(containerId);
+          identityState[containerId] = true;
+        }
+      }
+    });
   });
 });
 
+
 document.querySelector('#edit-containers-link').addEventListener('click', ()=> {
   browser.runtime.sendMessage('open-containers-preferences').then(()=> {
     window.close();
   });
 });
+
+
+function hideContainer(containerId) {
+  browser.contextualIdentities.hide(containerId);
+}
+
+function showContainer(containerId) {
+  browser.contextualIdentities.show(containerId);
+}

webextension/manifest.json

@@ -20,6 +20,7 @@
   "homepage_url": "https://testpilot.firefox.com/",
 
   "permissions": [
+    "cookies",
     "experiments.contextualidentities",
     "contextualidentities"
   ],