missing labels, hide options when sth they depend on gets turned off

public/_locales/en/messages.json

@@ -873,5 +873,9 @@
     "optionsTabAdvanced" : {
         "message": "Advanced",
         "description": "Appears in Options as a tab header for advanced/niche options"
+    },
+    "noticeVisibilityLabel" : {
+        "message": "Notice appearance:",
+        "description": "Option label"
     }
 }

public/options/options.css

@@ -135,6 +135,20 @@ html, body {
     border-bottom: inherit;
 }
 
+.optionLabel {
+    font-size: 14px;
+}
+
+input[type='number'] {
+    width: 50px;
+}
+
+.low-profile {
+    height: 23px;
+    line-height: 5px;
+    vertical-align: middle;
+}
+
 .center {
     text-align: center;
 }

public/options/options.html

@@ -96,6 +96,8 @@
 				</div>
 
 				<div data-type="number-change" data-sync="minDuration">
+					<span class="optionLabel">__MSG_minDuration__</span>
+
 					<label class="number-container">
 						<input type="number" step="0.1" min="0">
 					</label>
@@ -136,6 +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">
 						<input type="number" step="1" min="1">
 					</label>
@@ -156,6 +160,8 @@
 				</div>
 	
 				<div data-type="selector" data-sync="noticeVisibilityMode">
+					<span class="optionLabel">__MSG_noticeVisibilityLabel__</span>
+
 					<select class="selector-element optionsSelector" >
 						<option value="0">__MSG_noticeVisibilityMode0__</option>
 						<option value="1">__MSG_noticeVisibilityMode1__</option>
@@ -179,6 +185,30 @@
 					<div class="small-description">__MSG_hideButtonsDescription__</div>
 				</div>
 
+				<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>
+							<span class="slider round"></span>
+						</label>
+						<div class="switch-label">
+							__MSG_showDeleteButton__
+						</div>
+					</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>
+							<span class="slider round"></span>
+						</label>
+						<div class="switch-label">
+							__MSG_showUploadButton__
+						</div>
+					</div>
+				</div>
+	
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="hideSkipButtonPlayerControls">
 					<div class="switch-container">
 						<label class="switch">
@@ -215,30 +245,6 @@
 					</div>
 				</div>
 	
-				<div data-type="toggle" data-toggle-type="reverse" data-sync="hideDeleteButtonPlayerControls">
-					<div class="switch-container">
-						<label class="switch">
-							<input type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<div class="switch-label">
-							__MSG_showDeleteButton__
-						</div>
-					</div>
-				</div>
-	
-				<div data-type="toggle" data-toggle-type="reverse" data-sync="hideUploadButtonPlayerControls">
-					<div class="switch-container">
-						<label class="switch">
-							<input type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<div class="switch-label">
-							__MSG_showUploadButton__
-						</div>
-					</div>
-				</div>
-	
 				<div data-type="toggle" data-sync="audioNotificationOnSkip">
 					<div class="switch-container">
 						<label class="switch">
@@ -351,7 +357,7 @@
 					<div class="small-description">__MSG_whatViewTracking__</div>
 				</div>
 	
-				<div data-type="toggle" data-sync="trackViewCountInPrivate" data-private-only="true">
+				<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>
@@ -468,18 +474,18 @@
 					<div class="small-description">__MSG_whatEnableTestingServer__</div>
 				</div>
 	
-				<div data-type="text-change" data-sync="serverAddress">
+				<div data-type="text-change" data-sync="serverAddress" data-dependent-on="testingServer" data-dependent-on-inverted="true">
 					<div class="text-label-container inline">
-						<div>__MSG_customServerAddress__</div>
+						<span class="optionLabel">__MSG_customServerAddress__:</span>
 	
-						<input class="option-text-box" type="text">
+						<input class="option-text-box" type="text" style="margin-right:10px">
 					</div>
 	
-					<div class="option-button text-change-set inline">
+					<div class="option-button text-change-set inline low-profile">
 						__MSG_save__
 					</div>
 	
-					<div class="option-button text-change-reset inline">
+					<div class="option-button text-change-reset inline low-profile">
 						__MSG_reset__
 					</div>
 	

src/options.ts

@@ -30,7 +30,7 @@ async function init() {
     await utils.wait(() => Config.config !== null);
 
     if (!showDonationLink()) {
-        document.getElementById("sbDonate").style.visibility = "hidden";
+        document.getElementById("sbDonate").style.display = "none";
     }
 
     // Set all of the toggle options to the correct option
@@ -38,10 +38,17 @@ async function init() {
     const optionsElements = optionsContainer.querySelectorAll("*");
 
     for (let i = 0; i < optionsElements.length; i++) {
+        const dependentOnName = optionsElements[i].getAttribute("data-dependent-on");
+        const dependentOn = optionsContainer.querySelector(`[data-sync='${dependentOnName}']`);
+        let isDependentOnReversed = false;
+        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.")
-            || (optionsElements[i].getAttribute("data-dependent-on") && Config.config[optionsElements[i].getAttribute("data-dependent-on")])) {
+            || (dependentOn && (isDependentOnReversed ? Config.config[dependentOnName] : !Config.config[dependentOnName]))) {
             optionsElements[i].classList.add("hidden");
+            if (!dependentOn)
                 continue;
         }
 
@@ -56,13 +63,8 @@ async function init() {
 
                 const confirmMessage = optionsElements[i].getAttribute("data-confirm-message");
 
-                if (optionResult != undefined) {
-                    checkbox.checked = optionResult;
-
-                    if (reverse) {
-                        optionsElements[i].querySelector("input").checked = !optionResult;
-                    }
-                }
+                if (optionResult != undefined)
+                    checkbox.checked =  reverse ? !optionResult : optionResult;
 
                 // See if anything extra should be run first time
                 switch (option) {
@@ -94,8 +96,29 @@ async function init() {
                                 const showNoticeSwitch = <HTMLInputElement> document.querySelector("[data-sync='dontShowNotice'] > div > label > input");
                                 showNoticeSwitch.checked = true;
                             }
-
                             break;
+                        case "showDonationLink":
+                            if (checkbox.checked)
+                                document.getElementById("sbDonate").style.display = "none";
+                            else
+                                document.getElementById("sbDonate").style.display = "unset";
+                            break;
+                    }
+
+                    // If other options depend on this, hide and disable 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) {
+                            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;