added icons next to the labels to display the contextual help

extension/ui/bg/ui-options.js

@@ -21,10 +21,12 @@
  *   Source.
  */
 
-/* global browser, window, document, localStorage, FileReader, location */
+/* global browser, window, document, localStorage, FileReader, location, fetch, TextDecoder, DOMParser, HTMLElement */
 
 (async () => {
 
+	const HELP_ICON_URL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABIUlEQVQ4y+2TsarCMBSGvxTBRdqiUZAWOrhJB9EXcPKFfCvfQYfulUKHDqXg4CYUJSioYO4mSDX3ttzt3n87fMlHTpIjlsulxpDZbEYYhgghSNOUOI5Ny2mZYBAELBYLer0eAJ7ncTweKYri4x7LJJRS0u12n7XrukgpjSc0CpVSXK/XZ32/31FKNW85z3PW6zXT6RSAJEnIsqy5UGvNZrNhu90CcDqd+C6tT6J+v//2Th+PB2VZ1hN2Oh3G4zGTyQTbtl/YbrdjtVpxu91+Ljyfz0RRhG3bzOfzF+Y4TvNXvlwuaK2pE4tfzr/wzwsty0IIURlL0998KxRCMBqN8H2/wlzXJQxD2u12vVkeDoeUZUkURRU+GAw4HA7s9/sK+wK6CWHasQ/S/wAAAABJRU5ErkJggg==";
+	const HELP_PAGE_PATH = "/extension/ui/pages/help.html";
 	const { DEFAULT_PROFILE_NAME, DISABLED_PROFILE_NAME, CURRENT_PROFILE_NAME } = await browser.runtime.sendMessage({ method: "config.getConstants" });
 	const removeHiddenElementsLabel = document.getElementById("removeHiddenElementsLabel");
 	const removeUnusedStylesLabel = document.getElementById("removeUnusedStylesLabel");
@@ -158,6 +160,7 @@
 	});
 	let pendingSave = Promise.resolve();
 	let autoSaveProfileChanged;
+	getHelpContents();
 	ruleProfileInput.onchange = () => {
 		if (!autoSaveProfileChanged && ruleProfileInput.value != CURRENT_PROFILE_NAME) {
 			ruleAutoSaveProfileInput.value = ruleProfileInput.value;
@@ -711,6 +714,40 @@
 		});
 	}
 
+	async function getHelpContents() {
+		const helpPage = await fetch(browser.runtime.getURL(HELP_PAGE_PATH));
+		const content = new TextDecoder().decode(await helpPage.arrayBuffer());
+		const doc = (new DOMParser()).parseFromString(content, "text/html");
+		const items = doc.querySelectorAll("[data-options-label]");
+		items.forEach(itemElement => {
+			const optionLabel = document.getElementById(itemElement.dataset.optionsLabel);
+			const helpIcon = document.createElement("img");
+			helpIcon.className = "help-icon";
+			helpIcon.src = HELP_ICON_URL;
+			helpIcon.onclick = () => {
+				helpContent.hidden = !helpContent.hidden;
+				return false;
+			};
+			optionLabel.appendChild(helpIcon);
+			const helpContent = document.createElement("div");
+			helpContent.hidden = true;
+			helpContent.className = "help-content";
+			itemElement.childNodes.forEach(node => {
+				if (node instanceof HTMLElement && node.className != "option") {
+					helpContent.appendChild(document.importNode(node, true));
+				}
+			});
+			helpContent.querySelectorAll("a[href]").forEach(linkElement => {
+				const hrefValue = linkElement.getAttribute("href");
+				if (hrefValue.startsWith("#")) {
+					linkElement.href = browser.runtime.getURL(HELP_PAGE_PATH + linkElement.getAttribute("href"));
+					linkElement.target = "_blank";
+				}
+			});
+			optionLabel.parentElement.insertAdjacentElement("afterEnd", helpContent);
+		});
+	}
+
 	function getLocalStorageItem(key) {
 		try {
 			return localStorage.getItem(key);

extension/ui/pages/options.css

@@ -89,6 +89,55 @@ h3 a {
     max-width: calc(100% - 115px);
 }
 
+
+.help-icon {
+    border-radius: 50%;
+    border: 1px black solid;
+    opacity: .1;
+    width: 10px;
+    margin-left: 8px;
+    position: relative;
+    top: 2px;
+    transition: opacity;
+    transition-duration: 200ms;
+    cursor: pointer;
+}
+
+.help-icon:hover {
+    opacity: .4;
+}
+
+.help-content {
+    margin-top: 4px;
+    margin-left: 8px;
+    margin-bottom: 12px;
+    border: 1px #bfbfbf dotted;
+    border-radius: 4px;
+    padding: 2px;
+    background-color: #fffcc1;
+    line-height: 1.4em;
+}
+
+.help-content img {
+    max-height: 1em;
+}
+
+.help-content a {
+    padding: 0px;
+}
+
+.help-content p {
+    margin: 6px;
+}
+
+.help-content ul {
+    margin: 4px;
+}
+
+.help-content li {
+    margin: 2px;
+}
+
 .rules-table-container {
     width: 100%;
     border-spacing: 0;
@@ -230,6 +279,7 @@ details {
     color: #555;
     margin-left: 6px;
     margin-right: 12px;
+    margin-bottom: 4px;
     border-top: #bfbfbf 1px dashed;
 }
 
@@ -281,9 +331,11 @@ a {
 }
 
 .option.vertical input {
-    margin-top: 3px;
+    margin-top: 4px;
     align-self: flex-end;
-    width: calc(100% - 3px);
+    width: calc(100% - 6px);
+    margin-bottom: 2px;
+    padding: 2px;
 }
 
 .option:last-of-type {
@@ -420,6 +472,7 @@ html.maximized {
 }
 
 @media (max-width:400px) {
+
     body,
     input,
     select,