feat: effectively store tools status in browser for #292

webextension/scripts/a11ycss.js

@@ -1,27 +1,27 @@
 // collection of radio buttons
 let level = document.getElementsByName('level');
+let button = document.getElementById("a11ycssBtnApply");
 
 
 /**
  * Helper function for browser storage
  * @param {String} strLevel
  */
 function storeA11ycss(strLevel) {
-	let a11ycss = { level: strLevel };
-	let setting = browser.storage.local.set({ a11ycss });
+	let a11ycssLevel = { level: strLevel };
+	let setting = browser.storage.local.set({ a11ycssLevel });
 	setting.then(null, onError); // just in case
 }
 
 // store choice when one radio button is chosen
 level.forEach(function (key) {
-	key.addEventListener('click', function (event ) {
+	key.addEventListener('click', function (event) {
 		storeA11ycss(event.target.value);
 	});
 });
 
 
 // --------------------------------------
-
 function addA11ycss() {
 	let currentLevel = '';
 	level.forEach(function (key) {
@@ -51,29 +51,36 @@ function removeA11ycss() {
 	browser.tabs.executeScript({ code: code });
 }
 
-document.getElementById("a11ycssBtnApply").addEventListener('click', function () {
-	var checked = this.getAttribute('aria-checked') === 'true' || false;
+function storeStatus(strStatus) {
+	let a11ycssStatus = { status: strStatus };
+	let setting = browser.storage.local.set({ a11ycssStatus });
+	setting.then(null, onError); // just in case
+}
 
+button.addEventListener('click', function () {
+	var checked = this.getAttribute('aria-checked') === 'true' || false;
 	if (checked) {
 		removeA11ycss();
+		storeStatus('false');
 	} else {
 		addA11ycss();
+		storeStatus('true');
 	}
 	this.setAttribute('aria-checked', !checked);
-
 });
 // --------------------------------------
 
 // on document load, if we have already chosen a level, give it back
 // (the first option is checked in the popup's HTML by default)
 function a11ycssOnload() {
-	let gettingItem = browser.storage.local.get("a11ycss");
-	gettingItem.then(
+	let getLevel = browser.storage.local.get("a11ycssLevel");
+	getLevel.then(
 		// when we got something
 		function (item) {
-			if (item && item.a11ycss && item.a11ycss.level) { // a level was set already
+			if (item && item.a11ycssLevel && item.a11ycssLevel.level) {
+				// a level was set already
 				level.forEach(function (key) {
-					if (key.value === item.a11ycss.level) {
+					if (key.value === item.a11ycssLevel.level) {
 						key.checked = true;
 					} else {
 						key.checked = false;
@@ -84,5 +91,17 @@ function a11ycssOnload() {
 		// we got nothing
 		onError
 	);
+
+	let getStatus = browser.storage.local.get("a11ycssStatus");
+	getStatus.then(
+		// when we got something
+		function (item) {
+			if (item && item.a11ycssStatus && item.a11ycssStatus.status) {
+				button.setAttribute('aria-checked', item.a11ycssStatus.status);
+			}
+		},
+		// we got nothing
+		onError
+	);
 }
 a11ycssOnload();

webextension/scripts/checkalts.js

@@ -1,4 +1,11 @@
 let btnCheckalts = document.getElementById('btnCheckalts');
+
+function storeCheckAltsStatus(strStatus) {
+	let checkAltsStatus = { status: strStatus };
+	let setting = browser.storage.local.set({ checkAltsStatus });
+	setting.then(null, onError); // just in case
+}
+
 btnCheckalts.addEventListener('click', function () {
 	let icons = {
 		ok: browser.extension.getURL("/icons/ok.svg"),
@@ -19,4 +26,20 @@ btnCheckalts.addEventListener('click', function () {
 	});
 	var checked = this.getAttribute('aria-checked') === 'true' || false;
 	this.setAttribute('aria-checked', !checked);
+	storeCheckAltsStatus(!checked);
 });
+
+function checkAltsOnload() {
+	let getCheckAltsStatus = browser.storage.local.get("checkAltsStatus");
+	getCheckAltsStatus.then(
+		// when we got something
+		function (item) {
+			if (item && item.checkAltsStatus && item.checkAltsStatus.status) {
+				btnCheckalts.setAttribute('aria-checked', item.checkAltsStatus.status);
+			}
+		},
+		// we got nothing
+		onError
+	);
+}
+checkAltsOnload();

webextension/scripts/outline.js

@@ -20,18 +20,35 @@ function removeOutline() {
 	`;
 	browser.tabs.executeScript({ code: code });
 }
-/**
- * Helper function for browser storage
- * @param {Boolean} bOutline
- */
-function storeOutline(bOutline) {
-	let outline = { isSet: bOutline };
-	let setting = BROWSER.storage.local.set({ outline });
+
+function storeOutlineStatus(strStatus) {
+	let outlineStatus = { status: strStatus };
+	let setting = BROWSER.storage.local.set({ outlineStatus });
 	setting.then(null, onError); // just in case
 }
 
 btnOutline.addEventListener('click', function() {
-	addOutline();
 	var checked = this.getAttribute('aria-checked') === 'true' || false;
+	if (checked) {
+		removeOutline();
+	} else {
+		addOutline();
+	}
 	this.setAttribute('aria-checked', !checked);
+	storeOutlineStatus(!checked);
 });
+
+function outlineOnload() {
+	let getOutlineStatus = browser.storage.local.get("outlineStatus");
+	getOutlineStatus.then(
+		// when we got something
+		function (item) {
+			if (item && item.outlineStatus && item.outlineStatus.status) {
+				btnOutline.setAttribute('aria-checked', item.outlineStatus.status);
+			}
+		},
+		// we got nothing
+		onError
+	);
+}
+outlineOnload();

webextension/scripts/showlangattribute.js

@@ -1,6 +1,12 @@
 let btnShowLangAttribute = document.getElementById('btnShowLangAttribute');
 
-btnShowLangAttribute.addEventListener('click', function () {
+function storeShowLangStatus(strStatus) {
+	let showLangStatus = { status: strStatus };
+	let setting = BROWSER.storage.local.set({ showLangStatus });
+	setting.then(null, onError); // just in case
+}
+
+function showLangAttribute() {
 	const code = `
 		var oldStylesheet = document.getElementById("${EXTENSION_PREFIX}showlangattribute");
 		if ( oldStylesheet ) { oldStylesheet.parentNode.removeChild(oldStylesheet) }
@@ -11,6 +17,38 @@ btnShowLangAttribute.addEventListener('click', function () {
 		document.getElementsByTagName("head")[0].appendChild(stylesheet);
 	`;
 	browser.tabs.executeScript({ code: code });
+}
+
+function hideLangAttribute() {
+	const code = `
+		var oldStylesheet = document.getElementById("${EXTENSION_PREFIX}showlangattribute");
+		if ( oldStylesheet ) { stylesheet.parentNode.removeChild(oldStylesheet) }
+	`;
+	browser.tabs.executeScript({ code: code });
+}
+
+btnShowLangAttribute.addEventListener('click', function () {
 	var checked = this.getAttribute('aria-checked') === 'true' || false;
+	if (checked) {
+		hideLangAttribute();
+	} else {
+		showLangAttribute();
+	}
 	this.setAttribute('aria-checked', !checked);
+	storeShowLangStatus(!checked);
 });
+
+function showLangOnload() {
+	let getShowLangStatus = browser.storage.local.get("showLangStatus");
+	getShowLangStatus.then(
+		// when we got something
+		function (item) {
+			if (item && item.showLangStatus && item.showLangStatus.status) {
+				btnShowLangAttribute.setAttribute('aria-checked', item.showLangStatus.status);
+			}
+		},
+		// we got nothing
+		onError
+	);
+}
+showLangOnload();

webextension/scripts/textspacing.js

@@ -1,4 +1,11 @@
 let btnTextspacing = document.getElementById('btnTextspacing');
+
+function storeTextSpacingStatus(strStatus) {
+	let textSpacingStatus = { status: strStatus };
+	let setting = BROWSER.storage.local.set({ textSpacingStatus });
+	setting.then(null, onError); // just in case
+}
+
 btnTextspacing.addEventListener('click', function () {
 	browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
 		browser.tabs.sendMessage(tabs[0].id, {
@@ -7,4 +14,20 @@ btnTextspacing.addEventListener('click', function () {
 	});
 	var checked = this.getAttribute('aria-checked') === 'true' || false;
 	this.setAttribute('aria-checked', !checked);
+	storeTextSpacingStatus(!checked);
 });
+
+function textSpacingOnload() {
+	let getTextSpacingStatus = browser.storage.local.get("textSpacingStatus");
+	getTextSpacingStatus.then(
+		// when we got something
+		function (item) {
+			if (item && item.textSpacingStatus && item.textSpacingStatus.status) {
+				btnTextspacing.setAttribute('aria-checked', item.textSpacingStatus.status);
+			}
+		},
+		// we got nothing
+		onError
+	);
+}
+textSpacingOnload();