Prettify

webext/css/options.css

@@ -1,4 +1,6 @@
-body {font-family: Arial;}
+body {
+  font-family: Arial;
+}
 
 /* Style the tab */
 .tab {
@@ -37,7 +39,6 @@ body {font-family: Arial;}
   border-top: none;
 }
 
-
 /* check box tree view */
 .box {
   cursor: pointer;
@@ -60,7 +61,8 @@ body {font-family: Arial;}
 }
 
 /* Remove default bullets */
-ul, #myUL {
+ul,
+#myUL {
   list-style-type: none;
 }
 
@@ -99,7 +101,6 @@ ul, #myUL {
   display: block;
 }
 
-
 /* Style the tree */
 ul.tree li {
   list-style-type: none;
@@ -121,18 +122,18 @@ ul.tree li a {
 
 ul.tree li a:before {
   height: 1em;
-    padding:0 .1em;
+  padding: 0 0.1em;
-    font-size: .8em;
+  font-size: 0.8em;
   display: block;
   position: absolute;
   left: -1.3em;
-    top: .2em;
+  top: 0.2em;
 }
 
 ul.tree li > a:not(:last-child):before {
-    content: '+';
+  content: "+";
 }
 
 ul.tree li.open > a:not(:last-child):before {
-    content: '-';
+  content: "-";
 }

webext/js/i18n.js

@@ -5,7 +5,7 @@
 */
 var i18n = {
   updateString(aString) {
-    return aString.replace(/__MSG_(.+?)__/g, (aMatched) => {
+    return aString.replace(/__MSG_(.+?)__/g, aMatched => {
       const key = aMatched.slice(6, -2);
       return browser.i18n.getMessage(key) || aMatched;
     });
@@ -38,6 +38,10 @@ var i18n = {
   }
 };
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener(
+  "DOMContentLoaded",
+  () => {
     i18n.updateDocument();
-}, { once: true });
+  },
+  { once: true }
+);

webext/js/options_accounts.js

@@ -1,7 +1,6 @@
 var SysTrayX = {};
 
 SysTrayX.Accounts = {
-  
   initialized: false,
 
   init: function() {
@@ -37,8 +36,11 @@ SysTrayX.Accounts = {
       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});
+      accounts[mailAccount[i].type].push({
-    };
+        id: mailAccount[i].id,
+        name: mailAccount[i].name
+      });
+    }
 
     console.debug("SysTrayX Storage: " + accounts.imap[0].name);
 
@@ -49,31 +51,24 @@ SysTrayX.Accounts = {
     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 typeLi = document.createElement("li");
 
-      let typeSpan = document.createElement('span');
+      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_tabbutton.js

@@ -2,26 +2,24 @@ function openTab(evt) {
   var i, tabcontent, tablinks, tabName;
   tabName = evt.currentTarget.id;
 
-    tabcontent = document.getElementsByClassName('tabcontent');
+  tabcontent = document.getElementsByClassName("tabcontent");
   for (i = 0; i < tabcontent.length; i++) {
-        tabcontent[i].style.display = 'none';
+    tabcontent[i].style.display = "none";
   }
-    tablinks = document.getElementsByClassName('tablinks');
+  tablinks = document.getElementsByClassName("tablinks");
   for (i = 0; i < tablinks.length; i++) {
-        tablinks[i].className = tablinks[i].className.replace(' active', '');
+    tablinks[i].className = tablinks[i].className.replace(" active", "");
   }
 
-    let el = document.getElementById(tabName+'Content');
+  let el = document.getElementById(tabName + "Content");
-    el.style.display = 'block';
+  el.style.display = "block";
 
-    evt.currentTarget.className += ' active';
+  evt.currentTarget.className += " active";
 }
 
-document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener("DOMContentLoaded", function() {
-  let tablinks = document.getElementsByClassName('tablinks');
+  let tablinks = document.getElementsByClassName("tablinks");
   for (i = 0; i < tablinks.length; i++) {
-    document.getElementById(tablinks[i].id)
+    document.getElementById(tablinks[i].id).addEventListener("click", openTab);
-      .addEventListener('click', openTab);
   }
 });
-

webext/js/options_treetable.js

@@ -1,16 +1,16 @@
-var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
+var tree = document.querySelectorAll("ul.tree a:not(:last-child)");
 for (var i = 0; i < tree.length; i++) {
-  tree[i].addEventListener('click', function(e) {
+  tree[i].addEventListener("click", function(e) {
     var parent = e.target.parentElement;
     var classList = parent.classList;
     if (classList.contains("open")) {
-      classList.remove('open');
+      classList.remove("open");
-      var opensubs = parent.querySelectorAll(':scope .open');
+      var opensubs = parent.querySelectorAll(":scope .open");
       for (var i = 0; i < opensubs.length; i++) {
-        opensubs[i].classList.remove('open');
+        opensubs[i].classList.remove("open");
       }
     } else {
-      classList.add('open');
+      classList.add("open");
     }
     e.preventDefault();
   });

webext/js/styles.js

@@ -1,4 +1,7 @@
-var stylesheet = document.currentScript.getAttribute('stylesheet'); 
+var stylesheet = document.currentScript.getAttribute("stylesheet");
-document.getElementsByTagName("head")[0].insertAdjacentHTML(
+document
+  .getElementsByTagName("head")[0]
+  .insertAdjacentHTML(
     "beforeend",
-    `<link rel=\"stylesheet\" href=${stylesheet} />`);
+    `<link rel=\"stylesheet\" href=${stylesheet} />`
+  );

webext/manifest.json

@@ -19,10 +19,7 @@
 
   "default_locale": "en-US",
 
-  "permissions": [
+  "permissions": ["accountsRead", "storage"],
-    "accountsRead",
-    "storage"
-  ],
 
   "background": {
     "scripts": ["background.js"]

webext/options.html

@@ -1,13 +1,12 @@
 <!DOCTYPE html>
 <html>
   <head>
-<meta charset="utf-8">
+    <meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
-
     <script src="js/styles.js" stylesheet="css/options.css"></script>
-<script src='js/i18n.js'></script>
+    <script src="js/i18n.js"></script>
 
     <div class="tab">
       <button class="tablinks active" id="Windows">__MSG_tabWindows__</button>
@@ -21,15 +20,14 @@
         <p>Windows options here</p>
 
         <p>Please select your opton:</p>
-      <input type="radio" name="options_test" value="Option1"> Option 1<br>
+        <input type="radio" name="options_test" value="Option1" /> Option 1<br />
-      <input type="radio" name="options_test" value="Option2"> Option 2<br>
+        <input type="radio" name="options_test" value="Option2" /> Option 2<br />
-      <input type="radio" name="options_test" value="Option3"> Option 3<br>  
+        <input type="radio" name="options_test" value="Option3" /> Option 3<br />
 
         <p>Please check the boxes:</p>
-      <input type="checkbox" name="check1" value="Check1"> Check 1<br>
+        <input type="checkbox" name="check1" value="Check1" /> Check 1<br />
-      <input type="checkbox" name="check2" value="Check2"> Check 2<br>
+        <input type="checkbox" name="check2" value="Check2" /> Check 2<br />
-      <input type="checkbox" name="check3" value="Check3"> Check 3<br>  
+        <input type="checkbox" name="check3" value="Check3" /> Check 3<br />
-
       </form>
     </div>
 
@@ -39,19 +37,30 @@
         <p>Icon options here.</p>
 
         <ul id="myUL">
-      <li><span class="caret">Beverages</span>
+          <li>
+            <span class="caret">Beverages</span>
             <ul class="nested">
               <li><span class="box">Water</span></li>
               <li><span class="box">Coffee</span></li>
-          <li><span class="caret">Tea</span>
+              <li>
+                <span class="caret">Tea</span>
                 <ul class="nested">
                   <li>
-                <input type="checkbox" name="blacktea" value="BlackTea">Black Tea<br>
+                    <input
+                      type="checkbox"
+                      name="blacktea"
+                      value="BlackTea"
+                    />Black Tea<br />
                   </li>
                   <li>
-                <input type="checkbox" name="blacktea" value="BlackTea">White Tea<br>
+                    <input
+                      type="checkbox"
+                      name="blacktea"
+                      value="BlackTea"
+                    />White Tea<br />
                   </li>
-              <li><span class="caret">Green Tea</span>
+                  <li>
+                    <span class="caret">Green Tea</span>
                     <ul class="nested">
                       <li>Sencha</li>
                       <li>Gyokuro</li>
@@ -64,7 +73,6 @@
             </ul>
           </li>
         </ul>
-
       </form>
     </div>
 
@@ -75,41 +83,46 @@
 
         <p class="account">Account</p>
 
-    <ul class="accountstree">
+        <ul class="accountstree"></ul>
-    </ul>
 
         <ul class="tree">
-      <li><a href="#">Part 1</a>
+          <li>
+            <a href="#">Part 1</a>
             <ul>
-          <li><a href="#">Item A</a>
+              <li>
+                <a href="#">Item A</a>
                 <ul>
                   <li><a href="#">Sub-item 1</a></li>
                   <li><a href="#">Sub-item 2</a></li>
                   <li><a href="#">Sub-item 3</a></li>
                 </ul>
               </li>
-          <li><a href="#">Item B</a>
+              <li>
+                <a href="#">Item B</a>
                 <ul>
                   <li><a href="#">Sub-item 1</a></li>
                   <li><a href="#">Sub-item 2</a></li>
                   <li><a href="#">Sub-item 3</a></li>
                 </ul>
               </li>
-          <li><a href="#">Item C</a>
+              <li>
+                <a href="#">Item C</a>
                 <ul>
                   <li><a href="#">Sub-item 1</a></li>
                   <li><a href="#">Sub-item 2</a></li>
                   <li><a href="#">Sub-item 3</a></li>
                 </ul>
               </li>
-          <li><a href="#">Item D</a>
+              <li>
+                <a href="#">Item D</a>
                 <ul>
                   <li><a href="#">Sub-item 1</a></li>
                   <li><a href="#">Sub-item 2</a></li>
                   <li><a href="#">Sub-item 3</a></li>
                 </ul>
               </li>
-          <li><a href="#">Item E</a>
+              <li>
+                <a href="#">Item E</a>
                 <ul>
                   <li><a href="#">Sub-item 1</a></li>
                   <li><a href="#">Sub-item 2</a></li>
@@ -119,37 +132,43 @@
             </ul>
           </li>
 
-      <li><a href="#">Part 2</a>
+          <li>
+            <a href="#">Part 2</a>
             <ul>
-          <li><a href="#">Item A</a>
+              <li>
+                <a href="#">Item A</a>
                 <ul>
                   <li><a href="#">Sub-item 1</a></li>
                   <li><a href="#">Sub-item 2</a></li>
                   <li><a href="#">Sub-item 3</a></li>
                 </ul>
               </li>
-          <li><a href="#">Item B</a>
+              <li>
+                <a href="#">Item B</a>
                 <ul>
                   <li><a href="#">Sub-item 1</a></li>
                   <li><a href="#">Sub-item 2</a></li>
                   <li><a href="#">Sub-item 3</a></li>
                 </ul>
               </li>
-          <li><a href="#">Item C</a>
+              <li>
+                <a href="#">Item C</a>
                 <ul>
                   <li><a href="#">Sub-item 1</a></li>
                   <li><a href="#">Sub-item 2</a></li>
                   <li><a href="#">Sub-item 3</a></li>
                 </ul>
               </li>
-          <li><a href="#">Item D</a>
+              <li>
+                <a href="#">Item D</a>
                 <ul>
                   <li><a href="#">Sub-item 1</a></li>
                   <li><a href="#">Sub-item 2</a></li>
                   <li><a href="#">Sub-item 3</a></li>
                 </ul>
               </li>
-          <li><a href="#">Item E</a>
+              <li>
+                <a href="#">Item E</a>
                 <ul>
                   <li><a href="#">Sub-item 1</a></li>
                   <li><a href="#">Sub-item 2</a></li>
@@ -159,37 +178,43 @@
             </ul>
           </li>
 
-      <li><a href="#">Part 3</a>
+          <li>
+            <a href="#">Part 3</a>
             <ul>
-          <li><a href="#">Item A</a>
+              <li>
+                <a href="#">Item A</a>
                 <ul>
                   <li><a href="#">Sub-item 1</a></li>
                   <li><a href="#">Sub-item 2</a></li>
                   <li><a href="#">Sub-item 3</a></li>
                 </ul>
               </li>
-          <li><a href="#">Item B</a>
+              <li>
+                <a href="#">Item B</a>
                 <ul>
                   <li><a href="#">Sub-item 1</a></li>
                   <li><a href="#">Sub-item 2</a></li>
                   <li><a href="#">Sub-item 3</a></li>
                 </ul>
               </li>
-          <li><a href="#">Item C</a>
+              <li>
+                <a href="#">Item C</a>
                 <ul>
                   <li><a href="#">Sub-item 1</a></li>
                   <li><a href="#">Sub-item 2</a></li>
                   <li><a href="#">Sub-item 3</a></li>
                 </ul>
               </li>
-          <li><a href="#">Item D</a>
+              <li>
+                <a href="#">Item D</a>
                 <ul>
                   <li><a href="#">Sub-item 1</a></li>
                   <li><a href="#">Sub-item 2</a></li>
                   <li><a href="#">Sub-item 3</a></li>
                 </ul>
               </li>
-          <li><a href="#">Item E</a>
+              <li>
+                <a href="#">Item E</a>
                 <ul>
                   <li><a href="#">Sub-item 1</a></li>
                   <li><a href="#">Sub-item 2</a></li>
@@ -199,7 +224,6 @@
             </ul>
           </li>
         </ul>
-    
       </form>
     </div>
 
@@ -208,14 +232,12 @@
       <button type="submit">Save</button>
     </form>
 
-<script src='js/options_tabbutton.js'></script>
+    <script src="js/options_tabbutton.js"></script>
-<script src='js/options_treetable.js'></script>
+    <script src="js/options_treetable.js"></script>
-<script src='js/options_treeview.js'></script>
+    <script src="js/options_treeview.js"></script>
 
     <script src="js/options_accounts.js"></script>
 
     <script src="options.js"></script>
-
   </body>
 </html>
- 

webext/options.js

@@ -4,7 +4,9 @@ function saveOptions(e) {
   console.debug("Save preferences");
 
   browser.storage.sync.set({
-    optionsRadioTest: document.querySelector('input[name="options_test"]:checked').value,
+    optionsRadioTest: document.querySelector(
+      'input[name="options_test"]:checked'
+    ).value,
     optionsCheck1: document.querySelector('input[name="check1"]').checked,
     optionsCheck2: document.querySelector('input[name="check2"]').checked,
     optionsCheck3: document.querySelector('input[name="check3"]').checked
@@ -12,22 +14,21 @@ function saveOptions(e) {
 }
 
 function restoreOptions() {
-
   console.debug("Restore preferences");
 
   function setCurrentRadioChoice(result) {
     let selector = result.optionsRadioTest || "Option1";
-    let radioButton = document.querySelector(`[value=${selector}]`)
+    let radioButton = document.querySelector(`[value=${selector}]`);
     radioButton.checked = true;
   }
 
   function setCurrentCheckChoice(result) {
     let checkbox1 = document.querySelector('[name="check1"]');
-    checkbox1.checked = result.optionsCheck1 || false;;
+    checkbox1.checked = result.optionsCheck1 || false;
     let checkbox2 = document.querySelector('[name="check2"]');
-    checkbox2.checked = result.optionsCheck2 || false;;
+    checkbox2.checked = result.optionsCheck2 || false;
     let checkbox3 = document.querySelector('[name="check3"]');
-    checkbox3.checked = result.optionsCheck3 || false;;
+    checkbox3.checked = result.optionsCheck3 || false;
   }
 
   function onError(error) {
@@ -37,10 +38,15 @@ function restoreOptions() {
   var getting = browser.storage.sync.get("optionsRadioTest");
   getting.then(setCurrentRadioChoice, onError);
 
-  var getting = browser.storage.sync.get(["optionsCheck1", "optionsCheck2", "optionsCheck3"]);
+  var getting = browser.storage.sync.get([
+    "optionsCheck1",
+    "optionsCheck2",
+    "optionsCheck3"
+  ]);
   getting.then(setCurrentCheckChoice, onError);
-
 }
 
 document.addEventListener("DOMContentLoaded", restoreOptions);
-document.querySelector('[name="saveform"]').addEventListener("submit", saveOptions);
+document
+  .querySelector('[name="saveform"]')
+  .addEventListener("submit", saveOptions);