move identitiesState to SDK index to preserve it

When a user closes the pop-up, preserve the hidden tabs for the
containers, so they can still quickly re-open the tabs.

index.js

@@ -6,16 +6,26 @@ const webExtension = require('sdk/webextension');
 
 const CONTAINER_STORE = 'firefox-container-';
 
+const identitiesState = {
+};
+
 function getCookieStoreIdForContainer(containerId) {
   return CONTAINER_STORE + containerId;
 }
 
 function convert(identity) {
+  const cookieStoreId = getCookieStoreIdForContainer(identity.userContextId);
+  let hiddenTabUrls = [];
+
+  if (cookieStoreId in identitiesState) {
+    hiddenTabUrls = identitiesState[cookieStoreId].hiddenTabUrls;
+  }
   const result = {
     name: ContextualIdentityService.getUserContextLabel(identity.userContextId),
     icon: identity.icon,
     color: identity.color,
-    cookieStoreId: getCookieStoreIdForContainer(identity.userContextId)
+    cookieStoreId: cookieStoreId,
+    hiddenTabUrls: hiddenTabUrls
   };
 
   return result;
@@ -60,7 +70,12 @@ function queryContainers(details) {
       return;
     }
 
-    identities.push(convert(identity));
+    const convertedIdentity = convert(identity);
+
+    identities.push(convertedIdentity);
+    if (!(convertedIdentity.cookieStoreId in identitiesState)) {
+      identitiesState[convertedIdentity.cookieStoreId] = {hiddenTabUrls: []};
+    }
   });
 
   return Promise.resolve(identities);
@@ -145,10 +160,11 @@ function handleWebExtensionMessage(message, sender, sendReply) {
         sendReply(contextualIdentities.query(message.arguments));
         break;
       case 'hide':
-        sendReply(contextualIdentities.hide(message.arguments));
+        identitiesState[message.cookieStoreId].hiddenTabUrls = message.tabUrlsToSave;
         break;
       case 'show':
-        sendReply(contextualIdentities.show(message.arguments));
+        sendReply(identitiesState[message.cookieStoreId].hiddenTabUrls);
+        identitiesState[message.cookieStoreId].hiddenTabUrls = [];
         break;
       case 'get':
         sendReply(contextualIdentities.get(message.arguments));
@@ -162,6 +178,9 @@ function handleWebExtensionMessage(message, sender, sendReply) {
       case 'remove':
         sendReply(contextualIdentities.remove(message.arguments));
         break;
+      case 'getIdentitiesState':
+        sendReply(identitiesState);
+        break;
       case 'open-containers-preferences':
         tabs.open('about:preferences#containers');
         sendReply({content: 'opened'});

webextension/js/popup.js

@@ -1,39 +1,54 @@
 /* global browser, window, document */
-const identitiesState = {
-};
+const CONTAINER_HIDE_SRC = '/img/container-hide.svg';
+const CONTAINER_UNHIDE_SRC = '/img/container-unhide.svg';
 
 function hideContainerTabs(containerId) {
   const tabIdsToRemove = [];
+  const tabUrlsToSave = [];
   const hideorshowIcon = document.querySelector(`#${containerId}-hideorshow-icon`);
 
   browser.tabs.query({cookieStoreId: containerId}).then(tabs=> {
     tabs.forEach(tab=> {
       tabIdsToRemove.push(tab.id);
-      identitiesState[containerId].hiddenTabUrls.push(tab.url);
+      tabUrlsToSave.push(tab.url);
+    });
+    browser.runtime.sendMessage({
+      method: 'hide',
+      cookieStoreId: containerId,
+      tabUrlsToSave: tabUrlsToSave
+    }).then(()=> {
+      browser.tabs.remove(tabIdsToRemove);
+      hideorshowIcon.src = CONTAINER_UNHIDE_SRC;
     });
-    browser.tabs.remove(tabIdsToRemove);
-    hideorshowIcon.src = '/img/container-unhide.svg';
   });
 }
 
 function showContainerTabs(containerId) {
   const hideorshowIcon = document.querySelector(`#${containerId}-hideorshow-icon`);
 
-  identitiesState[containerId].hiddenTabUrls.forEach(url=> {
-    // Have to use SDK to open tabs in case they are about:* pages
-    browser.tabs.create({
-      url: url,
-      cookieStoreId: containerId
+  browser.runtime.sendMessage({
+    method: 'show',
+    cookieStoreId: containerId
+  }).then(hiddenTabUrls=> {
+    hiddenTabUrls.forEach(url=> {
+      browser.tabs.create({
+        url: url,
+        cookieStoreId: containerId
+      });
     });
   });
-  identitiesState[containerId].hiddenTabUrls = [];
-  hideorshowIcon.src = '/img/container-hide.svg';
+  hideorshowIcon.src = CONTAINER_HIDE_SRC;
 }
 
 browser.runtime.sendMessage({method: 'query'}).then(identities=> {
   const identitiesListElement = document.querySelector('.identities-list');
 
   identities.forEach(identity=> {
+    let hideOrShowIconSrc = CONTAINER_HIDE_SRC;
+
+    if (identity.hiddenTabUrls.length) {
+      hideOrShowIconSrc = CONTAINER_UNHIDE_SRC;
+    }
     const identityRow = `
     <tr data-identity-cookie-store-id="${identity.cookieStoreId}" >
       <td><div class="userContext-icon"
@@ -46,17 +61,13 @@ browser.runtime.sendMessage({method: 'query'}).then(identities=> {
           data-identity-cookie-store-id="${identity.cookieStoreId}"
           id="${identity.cookieStoreId}-hideorshow-icon"
           class="hideorshow-icon"
-          src="/img/container-hide.svg"
+          src="${hideOrShowIconSrc}"
         />
       </td>
       <td>&gt;</td>
     </tr>`;
 
     identitiesListElement.innerHTML += identityRow;
-
-    if (!(identity in identitiesState)) {
-      identitiesState[identity.cookieStoreId] = {hiddenTabUrls: []};
-    }
   });
 
   const rows = identitiesListElement.querySelectorAll('tr');
@@ -66,11 +77,13 @@ browser.runtime.sendMessage({method: 'query'}).then(identities=> {
       if (e.target.matches('.hideorshow-icon')) {
         const containerId = e.target.dataset.identityCookieStoreId;
 
-        if (identitiesState[containerId].hiddenTabUrls.length) {
-          showContainerTabs(containerId);
-        } else {
-          hideContainerTabs(containerId);
-        }
+        browser.runtime.sendMessage({method: 'getIdentitiesState'}).then(identitiesState=> {
+          if (identitiesState[containerId].hiddenTabUrls.length) {
+            showContainerTabs(containerId);
+          } else {
+            hideContainerTabs(containerId);
+          }
+        });
       }
     });
   });