diff --git a/firefox/css/options.css b/firefox/css/options.css
index b23d7a8..bd61c76 100644
--- a/firefox/css/options.css
+++ b/firefox/css/options.css
@@ -1,11 +1,59 @@
-body {
- border-width: 4.5px;
- border-style: solid;
- border-color: black;
-
- padding: 2px 2px 2px 2px;
+.active {
+ display: inline;
}
+/* Setting is enabled. */
+html[remove_homepage="true"] .remove_homepage .inactive,
+html[remove_sidebar="true"] .remove_sidebar .inactive,
+html[remove_sidebar="true"] .remove_sidebar .inactive,
+html[remove_end_of_video="true"] .remove_end_of_video .inactive,
+html[remove_info_cards="true"] .remove_info_cards .inactive,
+html[remove_trending="true"] .remove_trending .inactive,
+html[remove_trending="true"] .remove_trending .inactive,
+html[remove_comments="true"] .remove_comments .inactive,
+html[remove_chat="true"] .remove_chat .inactive,
+html[redirect_off="true"] .redirect_off .inactive,
+html[redirect_to_subs="true"] .redirect_to_subs .inactive,
+html[redirect_to_wl="true"] .redirect_to_wl .inactive,
+html[foo=bar]
+{
+ display: none;
+}
+
+/* Setting is not enabled. */
+html[remove_homepage="false"] .remove_homepage .active,
+html[remove_sidebar="false"] .remove_sidebar .active,
+html[remove_sidebar="false"] .remove_sidebar .active,
+html[remove_end_of_video="false"] .remove_end_of_video .active,
+html[remove_info_cards="false"] .remove_info_cards .active,
+html[remove_trending="false"] .remove_trending .active,
+html[remove_trending="false"] .remove_trending .active,
+html[remove_comments="false"] .remove_comments .active,
+html[remove_chat="false"] .remove_chat .active,
+html[global_enable="false"] .active,
+html[foo=bar]
+{
+ display: none;
+}
+
+html[redirect_off="false"] .redirect_off .active,
+html[redirect_to_subs="false"] .redirect_to_subs .active,
+html[redirect_to_wl="false"] .redirect_to_wl .active,
+html[foo=bar]
+{
+ visibility: hidden;
+}
+
+html[global_enable="false"] input.global_enable.enabled,
+html[global_enable="true"] input.global_enable.disabled,
+
+html[foo=bar]
+{
+ display: none !important;
+ background-color: gray;
+}
+
+
html[global_enable="false"] #primary_options
{
background-color: gray;
@@ -14,9 +62,19 @@ html[global_enable="false"] #primary_options
html[global_enable="false"] #primary_options *
{
+ background-color: gray;
+ color: white;
pointer-events: none;
}
+body {
+ border-width: 4.5px;
+ border-style: solid;
+ border-color: black;
+
+ padding: 2px 2px 2px 2px;
+}
+
#header_legend {
font-size: larger;
text-align: center;
diff --git a/firefox/js/options.js b/firefox/js/options.js
index e6e23ba..99d9d64 100644
--- a/firefox/js/options.js
+++ b/firefox/js/options.js
@@ -1,16 +1,16 @@
const HTML = document.documentElement;
const SETTINGS_LIST = {
"global_enable": { default: true, eventType: 'click' },
- "remove_homepage": { default: true, eventType: 'change' },
- "remove_sidebar": { default: true, eventType: 'change' },
- "remove_end_of_video": { default: true, eventType: 'change' },
- "remove_info_cards": { default: false, eventType: 'change' },
- "remove_trending": { default: false, eventType: 'change' },
- "remove_comments": { default: false, eventType: 'change' },
- "remove_chat": { default: false, eventType: 'change' },
- "redirect_off": { default: true, eventType: 'change' },
- "redirect_to_subs": { default: false, eventType: 'change' },
- "redirect_to_wl": { default: false, eventType: 'change' },
+ "remove_homepage": { default: true, eventType: 'click' },
+ "remove_sidebar": { default: true, eventType: 'click' },
+ "remove_end_of_video": { default: true, eventType: 'click' },
+ "remove_info_cards": { default: false, eventType: 'click' },
+ "remove_trending": { default: false, eventType: 'click' },
+ "remove_comments": { default: false, eventType: 'click' },
+ "remove_chat": { default: false, eventType: 'click' },
+ "redirect_off": { default: true, eventType: 'click' },
+ "redirect_to_subs": { default: false, eventType: 'click' },
+ "redirect_to_wl": { default: false, eventType: 'click' },
};
const REDIRECT_URLS = {
@@ -24,13 +24,7 @@ document.addEventListener("DOMContentLoaded", () => {
Object.keys(localSettings).forEach(key => {
const value = localSettings[key];
if (!Object.keys(SETTINGS_LIST).includes(key)) return;
- const settingButton = document.getElementById(key);
- settingButton.checked = value;
-
- if (key === 'global_enable') {
- settingButton.value = value ? 'Disable' : 'Enable';
- HTML.setAttribute(key, value);
- }
+ HTML.setAttribute(key, value);
});
});
});
@@ -40,11 +34,12 @@ document.addEventListener("DOMContentLoaded", () => {
// 2. Send messages to main.js which updates the HTML attributes.
// 3. (optional) Dynamically change options.html.
Object.keys(SETTINGS_LIST).forEach(key => {
- const settingButton = document.getElementById(key);
const { eventType } = SETTINGS_LIST[key];
- settingButton.addEventListener(eventType, async e => {
- const key = e.target.id;
- const value = e.target.checked;
+ const settingElements = Array.from(document.getElementsByClassName(key));
+ settingElements.forEach(button => button.addEventListener(eventType, async e => {
+
+ const value = !(String(HTML.getAttribute(key)).toLowerCase() === "true");
+ HTML.setAttribute(key, value);
// Handle changes to a standard option.
if (key.includes('remove')) {
@@ -68,8 +63,10 @@ Object.keys(SETTINGS_LIST).forEach(key => {
filter(key => key.includes('redirect'));
const saveObj = redirectKeys.reduce((acc, curr) => {
acc[curr] = false;
+ HTML.setAttribute(curr, false);
return acc;
}, { redirect: false });
+ HTML.setAttribute(key, true);
saveObj[key] = true;
// Set the redirect URL.
@@ -81,7 +78,6 @@ Object.keys(SETTINGS_LIST).forEach(key => {
// Handle changes to a global option.
if (key === 'global_enable') {
- const value = settingButton.value === "Enable";
const saveObj = { [key]: value };
browser.storage.local.set(saveObj);
@@ -92,11 +88,7 @@ Object.keys(SETTINGS_LIST).forEach(key => {
tabs.forEach(tab => {
browser.tabs.sendMessage(tab.id, messageObj);
});
-
- // Update button text, and change option page's HTML attribute.
- settingButton.value = value ? "Disable" : "Enable";
- HTML.setAttribute(key, value);
return;
}
- });
+ }));
});
diff --git a/firefox/options.html b/firefox/options.html
index b836ed0..4328ab3 100644
--- a/firefox/options.html
+++ b/firefox/options.html
@@ -14,7 +14,8 @@
-
+
+
@@ -23,71 +24,81 @@