Show which feature is force disabled in the options page
Bug: twpowertools:64
Change-Id: I11ce740d5036ccff832f39d2a0f10290b0b063aa
diff --git a/src/options/optionsCommon.js b/src/options/optionsCommon.js
index c552da2..c76cd6c 100644
--- a/src/options/optionsCommon.js
+++ b/src/options/optionsCommon.js
@@ -117,31 +117,39 @@
for (let option of section.options) {
if (option?.customHTML) {
optionsContainer.insertAdjacentHTML('beforeend', option.customHTML);
- continue;
+ } else {
+ let optionEl = document.createElement('div');
+ optionEl.classList.add('option');
+
+ let checkbox = document.createElement('input');
+ checkbox.setAttribute('type', 'checkbox');
+ checkbox.id = option.codename;
+
+ let label = document.createElement('label');
+ label.setAttribute('for', checkbox.id);
+ label.setAttribute('data-i18n', option.codename);
+
+ optionEl.append(checkbox, ' ', label);
+
+ if (option?.experimental) {
+ let experimental = document.createElement('span');
+ experimental.classList.add('experimental-label');
+ experimental.setAttribute('data-i18n', 'experimental_label');
+
+ optionEl.append(' ', experimental);
+ }
+
+ optionsContainer.append(optionEl);
}
- let optionEl = document.createElement('div');
- optionEl.classList.add('option');
+ // Add kill switch component after each option.
+ let killSwitchComponent = document.createElement('div');
+ killSwitchComponent.classList.add('kill-switch-label');
+ killSwitchComponent.setAttribute('hidden', '');
+ killSwitchComponent.setAttribute('data-feature', option.codename);
+ killSwitchComponent.setAttribute('data-i18n', 'killswitchenabled');
- let checkbox = document.createElement('input');
- checkbox.setAttribute('type', 'checkbox');
- checkbox.id = option.codename;
-
- let label = document.createElement('label');
- label.setAttribute('for', checkbox.id);
- label.setAttribute('data-i18n', option.codename);
-
- optionEl.append(checkbox, ' ', label);
-
- if (option?.experimental) {
- let experimental = document.createElement('span');
- experimental.classList.add('experimental-label');
- experimental.setAttribute('data-i18n', 'experimental_label');
-
- optionEl.append(experimental);
- }
-
- optionsContainer.append(optionEl);
+ optionsContainer.append(killSwitchComponent);
}
}
@@ -234,6 +242,10 @@
}
if (items[opt] === true) document.getElementById(opt).checked = true;
+ if (window.CONTEXT == 'options' &&
+ items?._forceDisabledFeatures?.includes?.(opt))
+ document.querySelector('.kill-switch-label[data-feature="' + opt + '"]')
+ .removeAttribute('hidden');
}
exclusiveOptions.forEach(exclusive => {
diff --git a/src/static/_locales/en/messages.json b/src/static/_locales/en/messages.json
index d4574c0..466dfb6 100644
--- a/src/static/_locales/en/messages.json
+++ b/src/static/_locales/en/messages.json
@@ -19,6 +19,10 @@
"message": "One or more options have been force disabled because they might not be working properly. Please go to the <a href='https://groups.google.com/g/twpowertools-discuss' rel='noreferrer noopener' target='_blank'>twpowertools-discuss Google Group</a> to learn more about why some options have been force disabled.",
"description": "Warning shown in the options page if a feature has been remotely force disabled via the kill switch mechanism. This happens when a feature doesn't work properly and might be doing dangerous things, and the maintainer or an authorized user remotely force disables the feature."
},
+ "options_killswitchenabled": {
+ "message": "The previous option has been force disabled due to an issue.",
+ "description": "Warning shown in the options page below an option, when it has been remotely force disabled via the kill switch mechanism."
+ },
"options_list": {
"message": "Enable infinite scrolling in thread lists.",
"description": "Feature checkbox in the options page"
diff --git a/src/static/options/options.css b/src/static/options/options.css
index a3cd7ab..ce79b81 100644
--- a/src/static/options/options.css
+++ b/src/static/options/options.css
@@ -24,15 +24,20 @@
cursor: pointer;
}
-.option, .kill-switch-text {
+.option, #kill-switch-warning {
margin: 4px 0;
line-height: 1.8em;
}
-.kill-switch-text {
+#kill-switch-warning, .kill-switch-label {
color: red;
}
+.kill-switch-label {
+ margin: 0 0 8px 0;
+ line-height: 1em;
+}
+
.help {
cursor: help;
border-bottom: dashed 1px gray;
diff --git a/src/static/options/options.html b/src/static/options/options.html
index 8dde2a4..8a0915a 100644
--- a/src/static/options/options.html
+++ b/src/static/options/options.html
@@ -39,7 +39,7 @@
</a>
</div>
<form>
- <div class="kill-switch-text" id="kill-switch-warning" hidden data-i18n="killswitchwarning"></div>
+ <div id="kill-switch-warning" hidden data-i18n="killswitchwarning"></div>
<div id="options-container"></div>
<div class="actions"><button id="save" data-i18n="save"></button></div>
</form>