diff --git a/webext/_locales/en-US/messages.json b/webext/_locales/en-US/messages.json index dc02b4a..53d755b 100644 --- a/webext/_locales/en-US/messages.json +++ b/webext/_locales/en-US/messages.json @@ -23,4 +23,4 @@ "message": "Mail", "description": "Tab for Mail options" } -} +} diff --git a/webext/css/options.css b/webext/css/options.css index 33b9524..09a6463 100644 --- a/webext/css/options.css +++ b/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: "-"; +} diff --git a/webext/js/i18n.js b/webext/js/i18n.js index d4a1afc..424fcc6 100644 --- a/webext/js/i18n.js +++ b/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 } +); diff --git a/webext/js/options_accounts.js b/webext/js/options_accounts.js index a496a73..0096664 100644 --- a/webext/js/options_accounts.js +++ b/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(); diff --git a/webext/js/options_tabbutton.js b/webext/js/options_tabbutton.js index c4ab10c..66d82d0 100644 --- a/webext/js/options_tabbutton.js +++ b/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); } }); - diff --git a/webext/js/options_treetable.js b/webext/js/options_treetable.js index 4a1fb13..9f505b7 100644 --- a/webext/js/options_treetable.js +++ b/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(); }); diff --git a/webext/js/styles.js b/webext/js/styles.js index 901b69e..4303d46 100644 --- a/webext/js/styles.js +++ b/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", - ``); + `` + ); diff --git a/webext/manifest.json b/webext/manifest.json index 7a0c9d0..9e852e5 100644 --- a/webext/manifest.json +++ b/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" } diff --git a/webext/options.html b/webext/options.html index 0525644..b799205 100644 --- a/webext/options.html +++ b/webext/options.html @@ -1,221 +1,243 @@ - - - - - + + + + + + + - - +
+ + + +
-
- - - -
+
+
+

Windows

+

Windows options here

-
- -

Windows

-

Windows options here

+

Please select your opton:

+ Option 1
+ Option 2
+ Option 3
-

Please select your opton:

- Option 1
- Option 2
- Option 3
+

Please check the boxes:

+ Check 1
+ Check 2
+ Check 3
+ +
-

Please check the boxes:

- Check 1
- Check 2
- Check 3
+
+
+

Icon

+

Icon options here.

-
-
- -
-
-

Icon

-

Icon options here.

- -
    -
  • Beverages -
      -
    • Water
      • -
    • Coffee
      • -
    • Tea +
        +
      • + Beverages
          +
        • Water
          • +
        • Coffee
        • - Black Tea
          -
          • -
        • - White Tea
          -
          • -
        • Green Tea + Tea
            -
          • Sencha
            • -
          • Gyokuro
            • -
          • Matcha
            • -
          • Pi Lo Chun
            • +
          • + Black Tea
            +
            • +
          • + White Tea
            +
            • +
          • + Green Tea +
              +
            • Sencha
              • +
            • Gyokuro
              • +
            • Matcha
              • +
            • Pi Lo Chun
              • +
            +
      -
      • -
    +
    • +
- -
+
+
+

Mail

+

Mail options here.

-
-
  • Part 2 - -
    • +
    + + +
    -
  • Part 3 - -
    • - - - -
    + + + -
    - - -
    + - - - - - - - - - - - + + + diff --git a/webext/options.js b/webext/options.js index 832aa63..86ca917 100644 --- a/webext/options.js +++ b/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);