Nemcio/SysTray-X
1
0
Fork 0
mirror of https://github.com/Ximi1970/systray-x.git synced 2025-11-10 15:26:09 +01:00
Code Issues Packages Projects Releases Activity

Prettify

Browse Source
This commit is contained in:
Ximi1970
2020-01-09 21:03:06 +01:00
parent c07fe897f0
commit 7ccbbe0e6b
10 changed files with 341 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
webext/_locales/en-US/messages.json
View File

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

81
webext/css/options.css
View File

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

12
webext/js/i18n.js
View File

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

63
webext/js/options_accounts.js
View File

@@ -1,9 +1,8 @@
var SysTrayX = {}; var SysTrayX = {};
SysTrayX.Accounts = { SysTrayX.Accounts = {
initialized: false, initialized: false,
init: function() { init: function() {
if (this.initialized) { if (this.initialized) {
console.log("Accounts already initialized"); console.log("Accounts already initialized");
@@ -23,57 +22,53 @@ SysTrayX.Accounts = {
getAccounts: async function() { getAccounts: async function() {
return await browser.accounts.list(); return await browser.accounts.list();
}, },
/* /*
* Callback for getAccounts * Callback for getAccounts
*/ */
getAccountsCb: function(mailAccount) { getAccountsCb: function(mailAccount) {
let accounts = new Object(); let accounts = new Object();
let i; 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 ) { for (i = 0; i < mailAccount.length; i++) {
console.debug( prop + ": " + accounts[prop][0].name ); 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"); let p = document.getElementsByClassName("account");
p[0].innerHTML = accounts.imap[0].name; p[0].innerHTML = accounts.imap[0].name;
// Get base // Get base
let treeBase = document.getElementsByClassName("accountstree"); 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 typeLi = document.createElement('li'); let typeSpan = document.createElement("span");
typeSpan.setAttribute("class", "caret");
let typeSpan = document.createElement('span');
typeSpan.setAttribute("class","caret");
let typeText = document.createTextNode(prop); let typeText = document.createTextNode(prop);
typeSpan.appendChild(typeText); typeSpan.appendChild(typeText);
typeLi.appendChild(typeSpan); typeLi.appendChild(typeSpan);
treeBase[0].appendChild(typeLi); treeBase[0].appendChild(typeLi);
}
}; }
},
}; };
SysTrayX.Accounts.init(); SysTrayX.Accounts.init();

34
webext/js/options_tabbutton.js
View File

@@ -1,27 +1,25 @@
function openTab(evt) { function openTab(evt) {
var i, tabcontent, tablinks, tabName; var i, tabcontent, tablinks, tabName;
tabName = evt.currentTarget.id; tabName = evt.currentTarget.id;
tabcontent = document.getElementsByClassName('tabcontent'); tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) { 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++) { 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++) { for (i = 0; i < tablinks.length; i++) {
document.getElementById(tablinks[i].id) document.getElementById(tablinks[i].id).addEventListener("click", openTab);
.addEventListener('click', openTab);
} }
}); });

18
webext/js/options_treetable.js
View File

@@ -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++){ 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 parent = e.target.parentElement;
var classList = parent.classList; var classList = parent.classList;
if(classList.contains("open")) { 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++){ for (var i = 0; i < opensubs.length; i++) {
opensubs[i].classList.remove('open'); opensubs[i].classList.remove("open");
} }
} else { } else {
classList.add('open'); classList.add("open");
} }
e.preventDefault(); e.preventDefault();
}); });

9
webext/js/styles.js
View File

@@ -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", "beforeend",
`<link rel=\"stylesheet\" href=${stylesheet} />`); `<link rel=\"stylesheet\" href=${stylesheet} />`
);

9
webext/manifest.json
View File

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

398
webext/options.html
View File

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

30
webext/options.js
View File

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