restore show/hide functionality in WebExtension

index.js

@@ -2,7 +2,6 @@
 const {ContextualIdentityService} = require('resource://gre/modules/ContextualIdentityService.jsm');
 
 const tabs = require('sdk/tabs');
-const windows = require('sdk/windows');
 const webExtension = require('sdk/webextension');
 
 const CONTAINER_STORE = 'firefox-container-';
@@ -22,49 +21,6 @@ function convert(identity) {
   return result;
 }
 
-function query(queryInfo) {
-
-  function matches(window, tab) {
-    if (queryInfo.cookieStoreId !== null &&
-        tab.cookieStoreId !== queryInfo.cookieStoreId) {
-      return false;
-    }
-
-    return true;
-  }
-
-  const result = [];
-
-  for (const window of windows.browserWindows) {
-    for (const tab of tabs) {
-      if (matches(window, tab)) {
-        result.push(tab);
-      }
-    }
-  }
-
-  return Promise.resolve(result);
-}
-
-function hideContainerTabs(cookieStoreId) {
-  query({cookieStoreId}).then(containerTabs=> {
-    containerTabs.forEach(tab=> {
-      gBrowser.hideTab(tab);
-    });
-  })
-  .catch(e=> {
-    throw e;
-  });
-}
-
-function showContainterTabs(cookieStoreId) {
-  query({cookieStoreId}).then(containerTabs=> {
-    containerTabs.forEach(tab=> {
-      gBrowser.showTab(tab);
-    });
-  });
-}
-
 function isContainerCookieStoreId(storeId) {
   return storeId !== null && storeId.startsWith(CONTAINER_STORE);
 }
@@ -96,7 +52,6 @@ function getContainer(cookieStoreId) {
 }
 
 function queryContainers(details) {
-  console.log('queryContainers, details: ', details);
   const identities = [];
 
   ContextualIdentityService.getIdentities().forEach(identity=> {
@@ -112,7 +67,6 @@ function queryContainers(details) {
 }
 
 function createContainer(details) {
-  console.log('createContainer, details: ', details);
   const identity = ContextualIdentityService.create(details.name,
                                                   details.icon,
                                                   details.color);
@@ -121,7 +75,6 @@ function createContainer(details) {
 }
 
 function updateContainer(cookieStoreId, details) {
-  console.log(`updateContainer, cookieStoreId: ${cookieStoreId}, details: ${details}`);
   const containerId = getContainerForCookieStoreId(cookieStoreId);
 
   if (!containerId) {
@@ -156,7 +109,6 @@ function updateContainer(cookieStoreId, details) {
 }
 
 function removeContainer(cookieStoreId) {
-  console.log(`removeContainer, cookieStoreId: ${cookieStoreId}`);
   const containerId = getContainerForCookieStoreId(cookieStoreId);
 
   if (!containerId) {
@@ -180,8 +132,6 @@ function removeContainer(cookieStoreId) {
 }
 
 const contextualIdentities = {
-  hide: hideContainerTabs,
-  show: showContainterTabs,
   get: getContainer,
   query: queryContainers,
   create: createContainer,

webextension/js/popup.js

@@ -1,23 +1,36 @@
 /* global browser, window, document */
-const identityState = {
+const identitiesState = {
 };
 
-function hideContainer(containerId) {
+function hideContainerTabs(containerId) {
+  const tabIdsToRemove = [];
   const hideorshowIcon = document.querySelector(`#${containerId}-hideorshow-icon`);
 
-  hideorshowIcon.src = '/img/container-unhide.svg';
-  browser.runtime.sendMessage({method: 'hide', arguments: containerId});
+  browser.tabs.query({cookieStoreId: containerId}).then(tabs=> {
+    tabs.forEach(tab=> {
+      tabIdsToRemove.push(tab.id);
+      identitiesState[containerId].hiddenTabUrls.push(tab.url);
+    });
+    browser.tabs.remove(tabIdsToRemove);
+    hideorshowIcon.src = '/img/container-unhide.svg';
+  });
 }
 
-function showContainer(containerId) {
+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
+    });
+  });
+  identitiesState[containerId].hiddenTabUrls = [];
   hideorshowIcon.src = '/img/container-hide.svg';
-  browser.runtime.sendMessage({method: 'show', arguments: containerId});
 }
 
 browser.runtime.sendMessage({method: 'query'}).then(identities=> {
-  console.log('query identities: ', identities);
   const identitiesListElement = document.querySelector('.identities-list');
 
   identities.forEach(identity=> {
@@ -41,6 +54,9 @@ browser.runtime.sendMessage({method: 'query'}).then(identities=> {
 
     identitiesListElement.innerHTML += identityRow;
 
+    if (!(identity in identitiesState)) {
+      identitiesState[identity.cookieStoreId] = {hiddenTabUrls: []};
+    }
   });
 
   const rows = identitiesListElement.querySelectorAll('tr');
@@ -50,15 +66,10 @@ browser.runtime.sendMessage({method: 'query'}).then(identities=> {
       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;
+        if (identitiesState[containerId].hiddenTabUrls.length) {
+          showContainerTabs(containerId);
         } else {
-          showContainer(containerId);
-          identityState[containerId] = true;
+          hideContainerTabs(containerId);
         }
       }
     });