Prettify

webext/_locales/en-US/messages.json

@@ -23,4 +23,4 @@
     "message": "Mail",
     "description": "Tab for Mail options"
   }
-}  
+}

webext/css/options.css

@@ -1,43 +1,44 @@
-body {font-family: Arial;}
+body {
+  font-family: Arial;
+}
 
 /* Style the tab */
 .tab {
-    overflow: hidden;
-    border: 1px solid #ccc;
-    background-color: #f1f1f1;
+  overflow: hidden;
+  border: 1px solid #ccc;
+  background-color: #f1f1f1;
 }
 
 /* Style the buttons inside the tab */
 .tab button {
-    background-color: inherit;
-    float: left;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    padding: 14px 16px;
-    transition: 0.3s;
-    font-size: 17px;
+  background-color: inherit;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 14px 16px;
+  transition: 0.3s;
+  font-size: 17px;
 }
 
 /* Change background color of buttons on hover */
 .tab button:hover {
-    background-color: #ddd;
+  background-color: #ddd;
 }
 
 /* Create an active/current tablink class */
 .tab button.active {
-    background-color: #ccc;
+  background-color: #ccc;
 }
 
 /* Style the tab content */
 .tabcontent {
-    display: none;
-    padding: 6px 12px;
-    border: 1px solid #ccc;
-    border-top: none;
+  display: none;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-top: none;
 }
 
-
 /* check box tree view */
 .box {
   cursor: pointer;
@@ -55,12 +56,13 @@ body {font-family: Arial;}
 }
 
 .check-box::before {
-  content: "\2611"; 
+  content: "\2611";
   color: dodgerblue;
 }
 
- /* Remove default bullets */
-ul, #myUL {
+/* Remove default bullets */
+ul,
+#myUL {
   list-style-type: none;
 }
 
@@ -97,42 +99,41 @@ ul, #myUL {
 /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
 .active {
   display: block;
-} 
-
+}
 
 /* Style the tree */
 ul.tree li {
-    list-style-type: none;
-    position: relative;
+  list-style-type: none;
+  position: relative;
 }
 
 ul.tree li ul {
-    display: none;
+  display: none;
 }
 
 ul.tree li.open > ul {
-    display: block;
+  display: block;
 }
 
 ul.tree li a {
-    color: black;
-    text-decoration: none;
+  color: black;
+  text-decoration: none;
 }
 
 ul.tree li a:before {
-    height: 1em;
-    padding:0 .1em;
-    font-size: .8em;
-    display: block;
-    position: absolute;
-    left: -1.3em;
-    top: .2em;
+  height: 1em;
+  padding: 0 0.1em;
+  font-size: 0.8em;
+  display: block;
+  position: absolute;
+  left: -1.3em;
+  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', () => {
-  i18n.updateDocument();
-}, { once: true });
+document.addEventListener(
+  "DOMContentLoaded",
+  () => {
+    i18n.updateDocument();
+  },
+  { once: true }
+);

webext/js/options_accounts.js

@@ -1,9 +1,8 @@
 var SysTrayX = {};
 
 SysTrayX.Accounts = {
-  
   initialized: false,
-  
+
   init: function() {
     if (this.initialized) {
       console.log("Accounts already initialized");
@@ -23,57 +22,53 @@ SysTrayX.Accounts = {
   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 );
+    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 ) {
+    for (let prop in accounts) {
+      console.debug("Tree: " + prop + ": " + accounts[prop][0].name);
 
-      console.debug( "Tree: " + prop + ": " + accounts[prop][0].name );
-      
-      let typeLi = document.createElement('li');
-      
-      let typeSpan = document.createElement('span');
-      typeSpan.setAttribute("class","caret");
+      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_tabbutton.js

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

webext/js/options_treetable.js

@@ -1,16 +1,16 @@
-var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
-for(var i = 0; i < tree.length; i++){
-  tree[i].addEventListener('click', function(e) {
+var tree = document.querySelectorAll("ul.tree a:not(:last-child)");
+for (var i = 0; i < tree.length; i++) {
+  tree[i].addEventListener("click", function(e) {
     var parent = e.target.parentElement;
     var classList = parent.classList;
-    if(classList.contains("open")) {
-      classList.remove('open');
-      var opensubs = parent.querySelectorAll(':scope .open');
-      for(var i = 0; i < opensubs.length; i++){
-        opensubs[i].classList.remove('open');
+    if (classList.contains("open")) {
+      classList.remove("open");
+      var opensubs = parent.querySelectorAll(":scope .open");
+      for (var i = 0; i < opensubs.length; i++) {
+        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'); 
-document.getElementsByTagName("head")[0].insertAdjacentHTML(
+var stylesheet = document.currentScript.getAttribute("stylesheet");
+document
+  .getElementsByTagName("head")[0]
+  .insertAdjacentHTML(
     "beforeend",
-    `<link rel=\"stylesheet\" href=${stylesheet} />`);
+    `<link rel=\"stylesheet\" href=${stylesheet} />`
+  );

webext/manifest.json

@@ -19,15 +19,12 @@
 
   "default_locale": "en-US",
 
-  "permissions": [
-    "accountsRead",
-    "storage"
-  ],
-  
+  "permissions": ["accountsRead", "storage"],
+
   "background": {
     "scripts": ["background.js"]
   },
-  
+
   "options_ui": {
     "page": "options.html"
   }

webext/options.html

@@ -1,221 +1,243 @@
 <!DOCTYPE html>
 <html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
-<body>
+  <head>
+    <meta charset="utf-8" />
+    <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/styles.js" stylesheet="css/options.css"></script>
-<script src='js/i18n.js'></script>
+    <div class="tab">
+      <button class="tablinks active" id="Windows">__MSG_tabWindows__</button>
+      <button class="tablinks" id="Icon">__MSG_tabIcon__</button>
+      <button class="tablinks" id="Mail">__MSG_tabMail__</button>
+    </div>
 
-<div class="tab">
-  <button class="tablinks active" id="Windows">__MSG_tabWindows__</button>
-  <button class="tablinks" id="Icon">__MSG_tabIcon__</button>
-  <button class="tablinks" id="Mail">__MSG_tabMail__</button>
-</div>
+    <div id="WindowsContent" class="tabcontent" style="display:block">
+      <form>
+        <h3>Windows</h3>
+        <p>Windows options here</p>
 
-<div id="WindowsContent" class="tabcontent" style="display:block">
-  <form>
-    <h3>Windows</h3>
-    <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="Option2" /> Option 2<br />
+        <input type="radio" name="options_test" value="Option3" /> Option 3<br />
 
-    <p>Please select your opton:</p>
-      <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="Option3"> Option 3<br>  
+        <p>Please check the boxes:</p>
+        <input type="checkbox" name="check1" value="Check1" /> Check 1<br />
+        <input type="checkbox" name="check2" value="Check2" /> Check 2<br />
+        <input type="checkbox" name="check3" value="Check3" /> Check 3<br />
+      </form>
+    </div>
 
-    <p>Please check the boxes:</p>
-      <input type="checkbox" name="check1" value="Check1"> Check 1<br>
-      <input type="checkbox" name="check2" value="Check2"> Check 2<br>
-      <input type="checkbox" name="check3" value="Check3"> Check 3<br>  
+    <div id="IconContent" class="tabcontent">
+      <form>
+        <h3>Icon</h3>
+        <p>Icon options here.</p>
 
-  </form>
-</div>
-
-<div id="IconContent" class="tabcontent">
-  <form>
-    <h3>Icon</h3>
-    <p>Icon options here.</p>
-    
-    <ul id="myUL">
-      <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>
+        <ul id="myUL">
+          <li>
+            <span class="caret">Beverages</span>
             <ul class="nested">
+              <li><span class="box">Water</span></li>
+              <li><span class="box">Coffee</span></li>
               <li>
-                <input type="checkbox" name="blacktea" value="BlackTea">Black Tea<br>
-              </li>
-              <li>
-                <input type="checkbox" name="blacktea" value="BlackTea">White Tea<br>
-              </li>
-              <li><span class="caret">Green Tea</span>
+                <span class="caret">Tea</span>
                 <ul class="nested">
-                  <li>Sencha</li>
-                  <li>Gyokuro</li>
-                  <li>Matcha</li>
-                  <li>Pi Lo Chun</li>
+                  <li>
+                    <input
+                      type="checkbox"
+                      name="blacktea"
+                      value="BlackTea"
+                    />Black Tea<br />
+                  </li>
+                  <li>
+                    <input
+                      type="checkbox"
+                      name="blacktea"
+                      value="BlackTea"
+                    />White Tea<br />
+                  </li>
+                  <li>
+                    <span class="caret">Green Tea</span>
+                    <ul class="nested">
+                      <li>Sencha</li>
+                      <li>Gyokuro</li>
+                      <li>Matcha</li>
+                      <li>Pi Lo Chun</li>
+                    </ul>
+                  </li>
                 </ul>
               </li>
             </ul>
           </li>
         </ul>
-      </li>
-    </ul>
+      </form>
+    </div>
 
-  </form>
-</div>
+    <div id="MailContent" class="tabcontent">
+      <form>
+        <h3>Mail</h3>
+        <p>Mail options here.</p>
 
-<div id="MailContent" class="tabcontent">
-  <form>
-    <h3>Mail</h3>
-    <p>Mail options here.</p>
-    
-    <p class="account">Account</p>
-    
-    <ul class="accountstree">
-    </ul>
+        <p class="account">Account</p>
 
-    <ul class="tree">
-      <li><a href="#">Part 1</a>
-        <ul>
-          <li><a href="#">Item A</a>
+        <ul class="accountstree"></ul>
+
+        <ul class="tree">
+          <li>
+            <a href="#">Part 1</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>
+              <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>
+                <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>
+                <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>
+                <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>
+                <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>
             </ul>
           </li>
-          <li><a href="#">Item B</a>
+
+          <li>
+            <a href="#">Part 2</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>
+              <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>
+                <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>
+                <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>
+                <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>
+                <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>
             </ul>
           </li>
-          <li><a href="#">Item C</a>
+
+          <li>
+            <a href="#">Part 3</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>
-            <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>
-            <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>
+              <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>
+                <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>
+                <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>
+                <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>
+                <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>
             </ul>
           </li>
         </ul>
-      </li>
+      </form>
+    </div>
 
-      <li><a href="#">Part 2</a>
-        <ul>
-          <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>
-            <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>
-            <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>
-            <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>
-            <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>
-        </ul>
-      </li>
+    <form name="saveform">
+      <label>Save preferences</label>
+      <button type="submit">Save</button>
+    </form>
 
-      <li><a href="#">Part 3</a>
-        <ul>
-          <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>
-            <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>
-            <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>
-            <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>
-            <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>
-        </ul>
-      </li>
-    </ul>  
-    
-  </form>
-</div>
+    <script src="js/options_tabbutton.js"></script>
+    <script src="js/options_treetable.js"></script>
+    <script src="js/options_treeview.js"></script>
 
-<form name="saveform">
-  <label>Save preferences</label>
-  <button type="submit">Save</button>
-</form>
+    <script src="js/options_accounts.js"></script>
 
-<script src='js/options_tabbutton.js'></script>
-<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>
-</html> 
- 
+    <script src="options.js"></script>
+  </body>
+</html>

webext/options.js

@@ -2,9 +2,11 @@ function saveOptions(e) {
   e.preventDefault();
 
   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) {
@@ -35,12 +36,17 @@ function restoreOptions() {
   }
 
   var getting = browser.storage.sync.get("optionsRadioTest");
-  getting.then(setCurrentRadioChoice, onError);  
-  
-  var getting = browser.storage.sync.get(["optionsCheck1", "optionsCheck2", "optionsCheck3"]);
-  getting.then(setCurrentCheckChoice, onError);  
+  getting.then(setCurrentRadioChoice, onError);
 
+  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);