for #11 and #12: Show/Hide container UI & implementation (#24)

* Adding in hide/show API for containers
* fix #12: [un]hide icons in the pop-up UI

.eslintrc.js

@@ -1,4 +1,8 @@
 module.exports = {
-    "extends": "nightmare-mode",
-    "installedESLint": true
+  "extends": "nightmare-mode",
+  "installedESLint": true,
+  "rules": {
+// Consider moving to this as is FF default
+//    "quotes": ["error", "double"]
+  }
 };

.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/css/popup.css

@@ -39,6 +39,12 @@ table.unstriped tbody tr {
   height: 32px;
 }
 
+.hideorshow-icon {
+  max-width: 16px;
+  height: 16px;
+  margin: 4px;
+}
+
 .edit-identities {
   background: #DCDBDC;
 }

webextension/js/popup.js

@@ -1,22 +1,70 @@
+/* global browser, window, document */
+const identityState = {
+};
+
+function hideContainer(containerId) {
+  const hideorshowIcon = document.querySelector(`#${containerId}-hideorshow-icon`);
+
+  hideorshowIcon.src = '/img/container-unhide.svg';
+  browser.contextualIdentities.hide(containerId);
+}
+
+function showContainer(containerId) {
+  const hideorshowIcon = document.querySelector(`#${containerId}-hideorshow-icon`);
+
+  hideorshowIcon.src = '/img/container-hide.svg';
+  browser.contextualIdentities.show(containerId);
+}
+
 browser.contextualIdentities.query({}).then(identites=> {
-  let customContainerStyles = '';
   const identitiesListElement = document.querySelector('.identities-list');
 
   identites.forEach(identity=> {
     const identityRow = `
-    <tr>
+    <tr data-identity-cookie-store-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" >
+        <img
+          data-identity-cookie-store-id="${identity.cookieStoreId}"
+          id="${identity.cookieStoreId}-hideorshow-icon"
+          class="hideorshow-icon"
+          src="/img/container-hide.svg"
+        />
+      </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-icon')) {
+        const containerId = e.target.dataset.identityCookieStoreId;
+
+        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();

webextension/manifest.json

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