Create tree basics

webext/js/options_accounts.js

@@ -0,0 +1,79 @@
+var SysTrayX = {};
+
+SysTrayX.Accounts = {
+  
+  initialized: false,
+  
+  init: function() {
+    if (this.initialized) {
+      console.log("Accounts already initialized");
+      return;
+    }
+    console.log("Enabling Accounts");
+
+    this.getAccounts().then(this.getAccountsCb);
+
+    this.initialized = true;
+  },
+
+  /*
+   * Use the messages API to get the unread messages (Promise)
+   * Be aware that the data is only avaiable inside the callback
+   */
+  getAccounts: async function() {
+    return await browser.accounts.list();
+  },
+  
+  /*
+   * Callback for getAccounts
+   */
+  getAccountsCb: function(mailAccount) {
+    let accounts = new Object();
+    let i;
+    
+    for (i=0 ; i < mailAccount.length; i++) {
+      console.debug("SysTrayX accounts id: "+mailAccount[i].id);
+      console.debug("SysTrayX accounts name: "+mailAccount[i].name);
+      console.debug("SysTrayX accounts type: "+mailAccount[i].type);
+      
+      accounts[mailAccount[i].type] = [];
+      accounts[mailAccount[i].type].push({id: mailAccount[i].id, name: mailAccount[i].name});
+    };
+    
+    console.debug("SysTrayX Storage: "+accounts.imap[0].name);
+
+    for (let prop in accounts ) {
+      console.debug( prop + ": " + accounts[prop][0].name );
+    }
+    
+    let p = document.getElementsByClassName("account");
+    p[0].innerHTML = accounts.imap[0].name;
+
+    
+      
+    // Get base
+    let treeBase = document.getElementsByClassName("accountstree");
+
+    for (let prop in accounts ) {
+
+      console.debug( "Tree: " + prop + ": " + accounts[prop][0].name );
+      
+      let typeLi = document.createElement('li');
+      
+      let typeSpan = document.createElement('span');
+      typeSpan.setAttribute("class","caret");
+      let typeText = document.createTextNode(prop);
+      typeSpan.appendChild(typeText);
+      
+      typeLi.appendChild(typeSpan);
+      
+      
+      treeBase[0].appendChild(typeLi);
+
+    };
+
+  },
+
+};
+
+SysTrayX.Accounts.init();

webext/js/options_treeview.js

@@ -10,7 +10,7 @@ for (i = 0; i < toggler.length; i++) {
 
 var togglerBox = document.getElementsByClassName("box");
 
-for (i = 0; i < toggler.length; i++) {
+for (i = 0; i < togglerBox.length; i++) {
   togglerBox[i].addEventListener("click", function() {
     this.classList.toggle("check-box");
   });

webext/options.html

@@ -41,8 +41,8 @@
     <ul id="myUL">
       <li><span class="caret">Beverages</span>
         <ul class="nested">
-          <li><span class="box">Water</li>
+          <li><span class="box">Water</span></li>
-          <li><span class="box">Coffee</li>
+          <li><span class="box">Coffee</span></li>
           <li><span class="caret">Tea</span>
             <ul class="nested">
               <li>
@@ -73,6 +73,11 @@
     <h3>Mail</h3>
     <p>Mail options here.</p>
     
+    <p class="account">Account</p>
+    
+    <ul class="accountstree">
+    </ul>
+
     <ul class="tree">
       <li><a href="#">Part 1</a>
         <ul>
@@ -207,6 +212,8 @@
 <script src='js/options_treetable.js'></script>
 <script src='js/options_treeview.js'></script>
 
+<script src="js/options_accounts.js"></script>
+
 <script src="options.js"></script>
 
 </body>