Add control logic

webext/background.html

@@ -9,9 +9,7 @@
     <h3>Background</h3>
     <p>Background HTML</p>
 
-    <div id="accounts" data-accounts="[]">
+    <div id="filters" data-filters="undefined"></div>
-      <div id="filters" data-filters=undefined></div>
-    </div>
 
     <script src="js/defaults.js"></script>
     <div id="icon" data-icon-mime="" data-icon=""></div>

webext/background.js

@@ -1,6 +1,4 @@
 var SysTrayX = {
-  debugAccounts: false,
-
   startupState: undefined,
 
   pollTiming: {
@@ -16,14 +14,11 @@ var SysTrayX = {
 };
 
 SysTrayX.Messaging = {
-  unreadFiltersTest: [
+  accounts: [],
-    { unread: true },
-    { unread: true, folder: { accountId: "account1", path: "/INBOX" } },
-  ],
 
   init: function () {
-    //  Get the accounts from the storage
+    //  Get the filters from the storage
-    SysTrayX.Messaging.getAccounts();
+    SysTrayX.Messaging.getFilters();
 
     // Lookout for storage changes
     browser.storage.onChanged.addListener(SysTrayX.Messaging.storageChanged);
@@ -43,8 +38,7 @@ SysTrayX.Messaging = {
     //  Send preferences to app
     SysTrayX.Messaging.sendPreferences();
 
-    //    this.unReadMessages(this.unreadFiltersTest).then(this.unreadCb);
+    //  Start polling the accounts
-    //    window.setInterval(SysTrayX.Messaging.pollAccounts, 1000);
     window.setTimeout(
       SysTrayX.Messaging.pollAccounts,
       SysTrayX.pollTiming.pollStartupDelay * 1000
@@ -59,7 +53,7 @@ SysTrayX.Messaging = {
   //
   storageChanged: function (changes, area) {
     //  Get the new preferences
-    SysTrayX.Messaging.getAccounts();
+    SysTrayX.Messaging.getFilters();
 
     if ("pollStartupDelay" in changes && changes["pollStartupDelay"].newValue) {
       SysTrayX.pollTiming = {
@@ -109,9 +103,34 @@ SysTrayX.Messaging = {
         SysTrayX.Link.postSysTrayXMessage({ unreadMail: 0 });
       }
     } else {
-      SysTrayX.Messaging.unReadMessages([{ unread: true }]).then(
+      //  Never saved anything, construct temporary filters
-        SysTrayX.Messaging.unreadCb
+      if (SysTrayX.Messaging.accounts.length > 0) {
-      );
+        //  Construct inbox filters for all accounts
+        let filters = [];
+        SysTrayX.Messaging.accounts.forEach((account) => {
+          const inbox = account.folders.filter(
+            (folder) => folder.type == "inbox"
+          );
+
+          if (inbox.length > 0) {
+            filters.push({
+              unread: true,
+              folder: inbox[0],
+            });
+          }
+        });
+
+        //  Store them in the background HTML
+        const filtersDiv = document.getElementById("filters");
+        filtersDiv.setAttribute("data-filters", JSON.stringify(filters));
+
+        SysTrayX.Messaging.unReadMessages(filters).then(
+          SysTrayX.Messaging.unreadCb
+        );
+      } else {
+        //  No accounts, no mail
+        SysTrayX.Link.postSysTrayXMessage({ unreadMail: 0 });
+      }
     }
 
     // Next round...
@@ -227,34 +246,18 @@ SysTrayX.Messaging = {
   },
 
   //
-  //  Get the accounts from the storage
+  //  Get the filters from the storage
   //
-  getAccounts: function () {
+  getFilters: function () {
-    const getter = browser.storage.sync.get(["accounts", "filters"]);
+    const getter = browser.storage.sync.get("filters");
-    getter.then(this.getAccountsStorage, this.onGetAccountsStorageError);
+    getter.then(this.getFiltersStorage, this.onGetFiltersStorageError);
-
-    if (SysTrayX.debugAccounts) {
-      const accountsDiv = document.getElementById("accounts");
-
-      const accountsAttr = accountsDiv.getAttribute("data-accounts");
-      console.debug(`Accounts attr: ${accountsAttr}`);
-
-      const accounts = JSON.parse(accountsAttr);
-      console.debug(`Accounts poll: ${accounts.length}`);
-    }
   },
 
   //
-  //  Get the accounts from the storage and
+  //  Get the filters from the storage and
   //  make them available in the background HTML
   //
-  getAccountsStorage: function (result) {
+  getFiltersStorage: function (result) {
-    const accounts = result.accounts || undefined;
-
-    //  Store them in the background HTML
-    const accountsDiv = document.getElementById("accounts");
-    accountsDiv.setAttribute("data-accounts", JSON.stringify(accounts));
-
     const filters = result.filters || undefined;
 
     //  Store them in the background HTML
@@ -448,6 +451,9 @@ async function start() {
     .getCurrent()
     .then((currentWindow) => currentWindow);
 
+  //  Get all accounts
+  SysTrayX.Messaging.accounts = await browser.accounts.list();
+
   //  Setup the link first
   SysTrayX.Link.init();
 

webext/css/options.css

@@ -88,7 +88,7 @@ ul,
 }
 
 /* Style the caret/arrow filler */
-.noncaret::before {
+.caretfiller::before {
   user-select: none; /* Prevent text selection */
   content: "\25B6";
   visibility: hidden;

webext/js/options_accounts.js

@@ -30,7 +30,12 @@ SysTrayX.Accounts = {
           .reduce((r, name, i, a) => {
             if (!r[name]) {
               r[name] = { result: [] };
-              r.result.push({ name: folder.name, children: r[name].result });
+              r.result.push({
+                name: folder.name,
+                accountId: folder.accountId,
+                path: folder.path,
+                children: r[name].result,
+              });
             }
 
             return r[name];
@@ -43,7 +48,7 @@ SysTrayX.Accounts = {
     let accounts = new Object();
 
     for (let i = 0; i < mailAccount.length; i++) {
-      if (true) {
+      if (false) {
         console.debug("SysTrayX accounts id: " + mailAccount[i].id);
         console.debug("SysTrayX accounts name: " + mailAccount[i].name);
         console.debug("SysTrayX accounts type: " + mailAccount[i].type);
@@ -98,11 +103,8 @@ SysTrayX.Accounts = {
 
           const typeInput = document.createElement("input");
           typeInput.setAttribute("type", "checkbox");
-          typeInput.setAttribute("name", accounts[prop][i].id);
           typeInput.setAttribute("value", JSON.stringify(accounts[prop][i]));
-
+          typeInput.setAttribute("name", accounts[prop][i].id);
-          //          typeInput.setAttribute("checked", "true");
-          //          typeInput.setAttribute("indeterminate", "true");
 
           typeLi.appendChild(typeInput);
           const typeText = document.createTextNode(
@@ -119,23 +121,31 @@ SysTrayX.Accounts = {
             typeLevelUl.setAttribute("class", "nested");
 
             level.forEach((element) => {
-              console.debug("Name: " + element.name);
-
               const typeEleLi = document.createElement("li");
 
               const typeEleSpan = document.createElement("span");
               if (element.children.length > 0) {
                 typeEleSpan.setAttribute("class", "caret");
               } else {
-                typeEleSpan.setAttribute("class", "noncaret");
+                typeEleSpan.setAttribute("class", "caretfiller");
               }
               typeEleLi.appendChild(typeEleSpan);
 
               const typeEleInput = document.createElement("input");
               typeEleInput.setAttribute("type", "checkbox");
-              typeEleInput.setAttribute("name", element.name);
+              typeEleInput.setAttribute(
-              //              typeEleInput.setAttribute("value", JSON.stringify(element.name));
+                "value",
-              //              typeEleInput.setAttribute("checked", "true");
+                JSON.stringify({
+                  accountId: element.accountId,
+                  path: element.path,
+                })
+              );
+              if (element.children.length > 0) {
+                typeEleInput.setAttribute("name", "parent-" + element.name);
+              } else {
+                typeEleInput.setAttribute("name", "child-" + element.name);
+              }
+
               typeEleLi.appendChild(typeEleInput);
               const typeEleText = document.createTextNode(" " + element.name);
               typeEleLi.appendChild(typeEleText);
@@ -160,35 +170,11 @@ SysTrayX.Accounts = {
 
       treeBase.appendChild(typeLi);
 
-      // Restore saved selection
+      //  Setup checkbox control
-
+      let checkboxes = treeBase.querySelectorAll('input[type="checkbox"]');
-      function setAccounts(result) {
-        const treeBase = document.getElementById("accountsTree");
-        const accounts = result.accounts || [];
-        for (let i = 0; i < accounts.length; ++i) {
-          const checkbox = treeBase.querySelector(
-            `input[name=${accounts[i].id}]`
-          );
-          if (checkbox) {
-            checkbox.checked = accounts[i].checked;
-          }
-        }
-      }
-
-      function onError(error) {
-        console.log(`GetAccounts Error: ${error}`);
-      }
-      /*
-      const getAccounts = browser.storage.sync.get("accounts");
-      getAccounts.then(setAccounts, onError);
-      */
-
-      let checkboxes = document.querySelectorAll('input[type="checkbox"]');
 
       for (let x = 0; x < checkboxes.length; x++) {
         checkboxes[x].addEventListener("change", function (e) {
-          console.debug("Change detect");
-
           let parentNode = this.parentNode;
 
           const cbDescendants = parentNode.querySelectorAll(

webext/options.html

@@ -176,6 +176,8 @@
         </table>
       </form>
 
+      <div id="filters" data-filters="undefined"></div>
+
       <script src="js/options_mailform.js"></script>
     </div>
 

webext/options.js

@@ -12,33 +12,38 @@ SysTrayX.SaveOptions = {
     // Save accounts and filters
     //
     const treeBase = document.getElementById("accountsTree");
-    const inputs = treeBase.querySelectorAll("input");
+    const accounts = treeBase.querySelectorAll(
-    let accounts = [];
+      'input[type="checkbox"][name*="account"]'
-    let filters = [];
+    );
-    for (let i = 0; i < inputs.length; ++i) {
-      const account = JSON.parse(inputs[i].value);
-      const checked = inputs[i].checked;
-      accounts.push({ ...account, checked: checked });
 
-      if (checked) {
+    let checkedFolders = [];
-        let inboxMailFolder = account.folders.find(
+    accounts.forEach((account) => {
-          (obj) => obj.type === "inbox"
+      if (account.checked || account.indeterminate) {
-        );
+        //  Find all selected folders
+        const folders = Array.from(
+          account.parentNode.querySelectorAll(
+            'input[type="checkbox"]:not([name^="account"]):not([name^="parent-"])'
+          )
+        ).filter((folder) => folder.checked);
 
-        if (inboxMailFolder) {
+        checkedFolders = checkedFolders.concat(folders);
-          filters.push({
-            unread: true,
-            folder: inboxMailFolder,
-          });
-        }
       }
-    }
-
-    //  Store accounts
-    browser.storage.sync.set({
-      accounts: accounts,
     });
 
+    let filters = [];
+    checkedFolders.forEach((folder) => {
+      const mailFolder = JSON.parse(folder.value);
+
+      filters.push({
+        unread: true,
+        folder: mailFolder,
+      });
+    });
+
+    //  Store them in the options HTML
+    const filtersDiv = document.getElementById("filters");
+    filtersDiv.setAttribute("data-filters", JSON.stringify(filters));
+
     //  Store query filters
     browser.storage.sync.set({
       filters: filters,
@@ -186,6 +191,15 @@ SysTrayX.RestoreOptions = {
       SysTrayX.RestoreOptions.onIconError
     );
 
+    //
+    //  Restore filters
+    //
+    const getFilters = browser.storage.sync.get("filters");
+    getFilters.then(
+      SysTrayX.RestoreOptions.setFilters,
+      SysTrayX.RestoreOptions.onFiltersError
+    );
+
     //
     //  Restore poll startup delay state
     //
@@ -373,6 +387,79 @@ SysTrayX.RestoreOptions = {
     console.log(`numberColor Error: ${error}`);
   },
 
+  //
+  //  Restore filters callbacks
+  //
+  setFilters: function (result) {
+    let filters = result.filters || undefined;
+
+    //  No filters stored?
+    if (filters == undefined) {
+      //  Create default filters
+
+      const treeBase = document.getElementById("accountsTree");
+      const accountsBoxes = treeBase.querySelectorAll(
+        'input[type="checkbox"][name*="account"]'
+      );
+
+      let accounts = [];
+      accountsBoxes.forEach((acoountbox) => {
+        const value = JSON.parse(acoountbox.value);
+        accounts.push({ folders: value.folders });
+      });
+
+      filters = [];
+      accounts.forEach((account) => {
+        const inbox = account.folders.filter(
+          (folder) => folder.type == "inbox"
+        );
+
+        if (inbox.length > 0) {
+          filters.push({
+            unread: true,
+            folder: inbox[0],
+          });
+        }
+      });
+    }
+
+    if (filters) {
+      const treeBase = document.getElementById("accountsTree");
+
+      filters.forEach((filter) => {
+        const folder = filter.folder;
+
+        const account = treeBase.querySelector(
+          `input[name=${folder.accountId}]`
+        );
+        const checkboxes = Array.from(
+          account.parentNode.querySelectorAll(
+            'input[type="checkbox"]:not([name^="account"]):not([name^="parent-"])'
+          )
+        );
+
+        checkboxes.forEach((checkbox) => {
+          const value = JSON.parse(checkbox.value);
+          if (value.path === folder.path) {
+            checkbox.checked = true;
+
+            const event = document.createEvent("HTMLEvents");
+            event.initEvent("change", false, true);
+            checkbox.dispatchEvent(event);
+          }
+        });
+      });
+    }
+
+    //  Store them in the options HTML
+    const filtersDiv = document.getElementById("filters");
+    filtersDiv.setAttribute("data-filters", JSON.stringify(filters));
+  },
+
+  onFiltersError: function (error) {
+    console.log(`Filters Error: ${error}`);
+  },
+
   //
   //  Restore poll startup delay state callbacks
   //