From 9a9e564dbf1f244552fba6789e22e100730007cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81ron=20Hegymegi-Kiss?= <hegymegi@outlook.com>
Date: Mon, 13 Dec 2021 12:14:51 +0100
Subject: [PATCH] show version + clickable labels

---
 public/options/options.css  |  16 +++--
 public/options/options.html | 125 ++++++++++++++++++------------------
 src/options.ts              |  29 +++++----
 3 files changed, 88 insertions(+), 82 deletions(-)

diff --git a/public/options/options.css b/public/options/options.css
index e49cda32..7a7984d3 100644
--- a/public/options/options.css
+++ b/public/options/options.css
@@ -18,7 +18,7 @@ body {
 .tab-heading:hover {
     outline: 3px solid white;
 }
-.medium-description, .switch-container, .text-label-container, .categoryTableElement {
+.medium-description, .switch-container, .optionLabel, .categoryTableElement {
     color: white;
 }
 .small-description, p,li {
@@ -61,7 +61,7 @@ h1,h2,h3,h4,h5,h6 {
     .tab-heading:hover {
         outline: 3px solid #2e2e2e;
     }
-    .medium-description, .switch-container, .text-label-container, .categoryTableElement {
+    .medium-description, .switch-container, .optionLabel, .categoryTableElement {
         color: black;
     }
     .small-description, p,li {
@@ -119,6 +119,9 @@ html, body {
     margin: 0 auto;
     border-radius: 15px;
     cursor: pointer;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 .tab-heading.selected {
@@ -135,7 +138,7 @@ html, body {
     border-bottom: inherit;
 }
 
-.optionLabel {
+.optionLabel, #version {
     font-size: 14px;
 }
 
@@ -247,10 +250,6 @@ input[type='number'] {
     padding: 4px;
 }
 
-.text-label-container {
-    font-size: 14px;
-}
-
 .switch {
     position: relative;
     display: inline-block;
@@ -529,6 +528,9 @@ svg {
         margin: unset;
         width: 100%;
     }
+    #version {
+        font-size: 10px;
+    }
   }
 
   @media only screen and (max-width: 800px) {
diff --git a/public/options/options.html b/public/options/options.html
index f3fd3cd1..720b1eba 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -20,6 +20,7 @@
 			<div id="title" class="titleBar">
 				<img src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
 				SponsorBlock
+				<div id="version"></div>
 			</div>
 
 			<div class="tab-heading selected" data-for="segment-options">
@@ -59,7 +60,7 @@
 
 		</div>
 
-		<div id="options">
+		<div id="options" class="hidden">
 
 			<div id="segment-options" class="option-group">
 
@@ -74,31 +75,30 @@
 				<div data-type="toggle" data-sync="autoSkipOnMusicVideos">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="autoSkipOnMusicVideos" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="autoSkipOnMusicVideos">
 							__MSG_autoSkipOnMusicVideos__
-						</div>
+						</label>
 					</div>
 				</div>
 	
 				<div data-type="toggle" data-sync="muteSegments">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="muteSegments" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="muteSegments">
 							__MSG_muteSegments__
-						</div>
+						</label>
 					</div>
 				</div>
 
 				<div data-type="number-change" data-sync="minDuration">
-					<span class="optionLabel">__MSG_minDuration__</span>
-
 					<label class="number-container">
+						<span class="optionLabel">__MSG_minDuration__</span>
 						<input type="number" step="0.1" min="0">
 					</label>
 	
@@ -108,12 +108,12 @@
 				<div data-type="toggle" data-sync="forceChannelCheck">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="forceChannelCheck" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="forceChannelCheck">
 							__MSG_forceChannelCheck__
-						</div>
+						</label>
 					</div>
 	
 					<div class="small-description">__MSG_whatForceChannelCheck__</div>
@@ -122,12 +122,12 @@
 				<div data-type="toggle" data-sync="refetchWhenNotFound">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="refetchWhenNotFound" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="refetchWhenNotFound">
 							__MSG_enableRefetchWhenNotFound__
-						</div>
+						</label>
 					</div>
 	
 					<div class="small-description">__MSG_whatRefetchWhenNotFound__</div>
@@ -138,9 +138,8 @@
 			<div id="interface-options" class="option-group hidden">
 
 				<div data-type="number-change" data-sync="skipNoticeDuration">
-					<span class="optionLabel">__MSG_skipNoticeDuration__</span>
-
 					<label class="number-container">
+						<span class="optionLabel">__MSG_skipNoticeDuration__</span>
 						<input type="number" step="1" min="1">
 					</label>
 	
@@ -150,19 +149,19 @@
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="dontShowNotice">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="dontShowNotice" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="dontShowNotice">
 							__MSG_showSkipNotice__
-						</div>
+						</label>
 					</div>
 				</div>
 	
 				<div data-type="selector" data-sync="noticeVisibilityMode">
-					<span class="optionLabel">__MSG_noticeVisibilityLabel__</span>
+					<label class="optionLabel" for="noticeVisibilityMode">__MSG_noticeVisibilityLabel__</label>
 
-					<select class="selector-element optionsSelector" >
+					<select id="noticeVisibilityMode" class="selector-element optionsSelector" >
 						<option value="0">__MSG_noticeVisibilityMode0__</option>
 						<option value="1">__MSG_noticeVisibilityMode1__</option>
 						<option value="2">__MSG_noticeVisibilityMode2__</option>
@@ -174,12 +173,12 @@
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="hideVideoPlayerControls">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="hideVideoPlayerControls" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="hideVideoPlayerControls">
 							__MSG_showButtons__
-						</div>
+						</label>
 					</div>
 	
 					<div class="small-description">__MSG_hideButtonsDescription__</div>
@@ -188,72 +187,72 @@
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="hideDeleteButtonPlayerControls" data-dependent-on="hideVideoPlayerControls">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="hideDeleteButtonPlayerControls" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="hideDeleteButtonPlayerControls">
 							__MSG_showDeleteButton__
-						</div>
+						</label>
 					</div>
 				</div>
 	
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="hideUploadButtonPlayerControls" data-dependent-on="hideVideoPlayerControls">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="hideUploadButtonPlayerControls" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="hideUploadButtonPlayerControls">
 							__MSG_showUploadButton__
-						</div>
+						</label>
 					</div>
 				</div>
 	
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="hideSkipButtonPlayerControls">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="hideSkipButtonPlayerControls" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="hideSkipButtonPlayerControls">
 							__MSG_showSkipButton__
-						</div>
+						</label>
 					</div>
 				</div>
 	
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="hideInfoButtonPlayerControls">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="hideInfoButtonPlayerControls" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="hideInfoButtonPlayerControls">
 							__MSG_showInfoButton__
-						</div>
+						</label>
 					</div>
 				</div>
 	
 				<div data-type="toggle" data-sync="autoHideInfoButton" data-dependent-on="hideInfoButtonPlayerControls">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="autoHideInfoButton" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="autoHideInfoButton">
 							__MSG_autoHideInfoButton__
-						</div>
+						</label>
 					</div>
 				</div>
 	
 				<div data-type="toggle" data-sync="audioNotificationOnSkip">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="audioNotificationOnSkip" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="audioNotificationOnSkip">
 							__MSG_audioNotification__
-						</div>
+						</label>
 					</div>
 	
 					<div class="small-description">__MSG_audioNotificationDescription__</div>
@@ -262,12 +261,12 @@
 				<div data-type="toggle" data-sync="showTimeWithSkips">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="showTimeWithSkips" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="showTimeWithSkips">
 							__MSG_showTimeWithSkips__
-						</div>
+						</label>
 					</div>
 	
 					<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
@@ -276,12 +275,12 @@
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="showDonationLink" data-no-safari="true">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="showDonationLink" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="showDonationLink">
 							__MSG_hideDonationLink__
-						</div>
+						</label>
 					</div>
 				</div>
 
@@ -346,12 +345,12 @@
 				<div data-type="toggle" data-sync="trackViewCount">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="trackViewCount" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="trackViewCount">
 							__MSG_enableViewTracking__
-						</div>
+						</label>
 					</div>
 	
 					<div class="small-description">__MSG_whatViewTracking__</div>
@@ -360,12 +359,12 @@
 				<div data-type="toggle" data-sync="trackViewCountInPrivate" data-dependent-on="trackViewCount" data-private-only="true">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox" checked>
+							<input id="trackViewCountInPrivate" type="checkbox" checked>
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="trackViewCountInPrivate">
 							__MSG_enableViewTrackingInPrivate__
-						</div>
+						</label>
 					</div>
 				</div>
 
@@ -412,12 +411,12 @@
 				<div id="support-invidious" data-type="toggle" data-sync="supportInvidious" data-no-safari="true">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox">
+							<input id="supportInvidious" type="checkbox">
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="supportInvidious">
 							__MSG_supportOtherSites__
-						</div>
+						</label>
 					</div>
 	
 					<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube)</div>
@@ -463,23 +462,23 @@
 				<div data-type="toggle" data-sync="testingServer" data-confirm-message="testingServerWarning" data-no-safari="true">
 					<div class="switch-container">
 						<label class="switch">
-							<input type="checkbox">
+							<input id="testingServer" type="checkbox">
 							<span class="slider round"></span>
 						</label>
-						<div class="switch-label">
+						<label class="switch-label" for="testingServer">
 							__MSG_enableTestingServer__
-						</div>
+						</label>
 					</div>
 	
 					<div class="small-description">__MSG_whatEnableTestingServer__</div>
 				</div>
 	
 				<div data-type="text-change" data-sync="serverAddress" data-dependent-on="testingServer" data-dependent-on-inverted="true">
-					<div class="text-label-container inline">
+					<label class="optionLabel inline">
 						<span class="optionLabel">__MSG_customServerAddress__:</span>
 	
 						<input class="option-text-box" type="text" style="margin-right:10px">
-					</div>
+					</label>
 	
 					<div class="option-button text-change-set inline low-profile">
 						__MSG_save__
diff --git a/src/options.ts b/src/options.ts
index a32a2b8f..4925de2a 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -44,9 +44,7 @@ async function init() {
         if (dependentOn)
             isDependentOnReversed = dependentOn.getAttribute("data-toggle-type") === "reverse" || optionsElements[i].getAttribute("data-dependent-on-inverted") === "true";
 
-        if ((optionsElements[i].getAttribute("data-private-only") === "true" && !(await isIncognitoAllowed()))
-            || (optionsElements[i].getAttribute("data-no-safari") === "true" && navigator.vendor === "Apple Computer, Inc.")
-            || (dependentOn && (isDependentOnReversed ? Config.config[dependentOnName] : !Config.config[dependentOnName]))) {
+        if (await shouldHideOption(optionsElements[i]) || (dependentOn && (isDependentOnReversed ? Config.config[dependentOnName] : !Config.config[dependentOnName]))) {
             optionsElements[i].classList.add("hidden");
             if (!dependentOn)
                 continue;
@@ -74,7 +72,7 @@ async function init() {
                 }
 
                 // Add click listener
-                checkbox.addEventListener("click", () => {
+                checkbox.addEventListener("click", async () => {
                     // Confirm if required
                     if (checkbox.checked && confirmMessage && !confirm(chrome.i18n.getMessage(confirmMessage))){
                         checkbox.checked = false;
@@ -105,20 +103,15 @@ async function init() {
                             break;
                     }
 
-                    // If other options depend on this, hide and disable them
+                    // If other options depend on this, hide/show them
                     const dependents = optionsContainer.querySelectorAll(`[data-dependent-on='${option}']`);
                     for (let j = 0; j < dependents.length; j++) {
-                        const isDependentReversed = dependents[j].getAttribute("data-toggle-type") === "reverse";
                         const disableWhenChecked = dependents[j].getAttribute("data-dependent-on-inverted") === "true";
-                        if (!disableWhenChecked && checkbox.checked || disableWhenChecked && !checkbox.checked) {
+                        if (!await shouldHideOption(dependents[j]) && (!disableWhenChecked && checkbox.checked || disableWhenChecked && !checkbox.checked)) {
                             dependents[j].classList.remove("hidden");
                         } else {
-                            if (dependents[j].getAttribute("data-type") === "toggle") {
-                                (dependents[j].querySelector("div > label > input") as HTMLInputElement).checked = false;
-                                Config.config[dependents[j].getAttribute("data-sync")] = isDependentReversed;
-                            }
                             dependents[j].classList.add("hidden");
-                        }                        
+                        }
                     }
                 });
                 break;
@@ -254,10 +247,22 @@ async function init() {
         });
     }
 
+    document.getElementById("version").innerText = "v. " + chrome.runtime.getManifest().version;
+
     optionsContainer.classList.remove("hidden");
     optionsContainer.classList.add("animated");
 }
 
+/**
+ * Handle special cases where an option shouldn't show
+ * 
+ * @param {String} element 
+ */
+async function shouldHideOption(element: Element): Promise<boolean> {
+    return (element.getAttribute("data-private-only") === "true" && !(await isIncognitoAllowed()))
+            || (element.getAttribute("data-no-safari") === "true" && navigator.vendor === "Apple Computer, Inc.");
+}
+
 /**
  * Called when the config is updated
  *