for #9: start tab sorting code

for #9: nested callbacks are better than promise abuse

webextension/js/popup.js

@@ -16,10 +16,10 @@ function showContainer(containerId) {
   browser.contextualIdentities.show(containerId);
 }
 
-browser.contextualIdentities.query({}).then(identites=> {
+browser.contextualIdentities.query({}).then(identities=> {
   const identitiesListElement = document.querySelector('.identities-list');
 
-  identites.forEach(identity=> {
+  identities.forEach(identity=> {
     const identityRow = `
     <tr data-identity-cookie-store-id="${identity.cookieStoreId}" >
       <td><div class="userContext-icon"
@@ -70,3 +70,29 @@ document.querySelector('#edit-containers-link').addEventListener('click', ()=> {
     window.close();
   });
 });
+
+function moveTabs(sortedTabsArray) {
+  console.log('sortedTabsArray: ', sortedTabsArray);
+}
+
+document.querySelector('#sort-containers-link').addEventListener('click', ()=> {
+  browser.contextualIdentities.query({}).then(identities=> {
+    identities.unshift({cookieStoreId: 'firefox-default'});
+    console.log('identities: ', identities);
+
+    browser.tabs.query({}).then(tabsArray=> {
+      console.log('tabsArray: ', tabsArray);
+      const sortedTabsArray = [];
+
+      identities.forEach(identity=> {
+        tabsArray.forEach(tab=> {
+          if (tab.cookieStoreId === identity.cookieStoreId) {
+            sortedTabsArray.push(tab.id);
+          }
+        });
+      });
+
+      moveTabs(sortedTabsArray);
+    });
+  });
+});

webextension/manifest.json

@@ -22,7 +22,9 @@
   "permissions": [
     "cookies",
     "experiments.contextualidentities",
-    "contextualidentities"
+    "contextualidentities",
+    "tabs",
+    "cookies"
   ],
 
   "browser_action": {

webextension/popup.html

@@ -14,7 +14,7 @@
       <h4>Containers</h4>
     </div>
     <div class="small-2 columns header-column">
-      <img alt="Sort Containers" class="header-icon" src="/img/container-sort.svg">
+      <a id="sort-containers-link"><img alt="Sort Containers" class="header-icon" src="/img/container-sort.svg"></a>
     </div>
   </div>
   <table class="unstriped hover">