design fixes

public/_locales/en/messages.json

@@ -848,34 +848,34 @@
     },
     "optionsTabCategories" : {
         "message": "Categories",
-        "description": "Appears in Options as a tab header for setting up categories."
+        "description": "Appears in Options as a tab header for setting up categories. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
     },
     "optionsTabBehavior" : {
         "message": "Behavior",
-        "description": "Appears in Options as a tab header for options related to the general behavior of the extension."
+        "description": "Appears in Options as a tab header for options related to the general behavior of the extension. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
     },
     "optionsTabInterface" : {
         "message": "Interface",
-        "description": "Appears in Options as a tab header for options related to GUI and sounds"
+        "description": "Appears in Options as a tab header for options related to GUI and sounds. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
     },
     "optionsTabKeyBinds" : {
         "message": "Key Bindings",
-        "description": "Appears in Options as a tab header for keybinds"
+        "description": "Appears in Options as a tab header for keybinds. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
     },
     "optionsTabPrivacy" : {
         "message": "Privacy",
-        "description": "Appears in Options as a tab header for options related to privacy (data stored/sent to server)"
+        "description": "Appears in Options as a tab header for options related to privacy (data stored/sent to server). To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
     },
     "optionsTabBackup" : {
         "message": "Backup/Restore",
-        "description": "Appears in Options as a tab header for options related to saving/restoring your settings"
+        "description": "Appears in Options as a tab header for options related to saving/restoring your settings. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
     },
     "optionsTabAdvanced" : {
         "message": "Advanced",
-        "description": "Appears in Options as a tab header for advanced/niche options"
+        "description": "Appears in Options as a tab header for advanced/niche options. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
     },
     "noticeVisibilityLabel" : {
-        "message": "Notice appearance:",
+        "message": "Skip notice appearance",
         "description": "Option label"
     }
 }

public/help/styles.css

@@ -60,6 +60,8 @@ body {
   
   text-decoration: none;
 
+  border-radius: 15px;
+
   transition: font-size 1s;
 }
 
@@ -200,3 +202,22 @@ svg {
     text-align: center;
   }
 }
+
+/* Light mode, if requested */
+@media only screen and (prefers-color-scheme: light) {
+  html {
+      color-scheme: light;
+  }
+  body {
+      background-color: #f9f9f9;
+  }
+  p,li,a {
+      color: #262626;
+  }
+  h1,h2,h3,h4,h5,h6 {
+      color: #707070;
+  }
+  #title {
+    color: white;
+  }
+}

public/options/options.css

@@ -89,6 +89,7 @@ h1,h2,h3,h4,h5,h6 {
 html, body {
     font-family: sans-serif;
     margin: 0;
+    font-size: 14px;
 }
 
 * {
@@ -109,6 +110,7 @@ html, body {
     max-width: 600px;
     border-radius: 15px;
     margin: 15px;
+    z-index: 10;
 }
 
 .tab-heading {
@@ -129,6 +131,10 @@ html, body {
     color: white;
 }
 
+.tab-heading:active {
+    background-color: #950000;
+}
+
 .option-group > div {
     min-height: 50px;
     padding: 20px 0;
@@ -168,6 +174,10 @@ input[type='number'] {
     display: none !important;
 }
 
+.spacing {
+    margin-top: 15px;
+}
+
 .keybind-status {
     display: inline;
 }
@@ -181,6 +191,10 @@ input[type='number'] {
     padding: 10px 0 20px 20px;
 }
 
+.indent {
+    padding-left: 20px;
+}
+
 .categoryTableElement td {
     padding-top: 10px;
 }
@@ -511,9 +525,11 @@ svg {
     }
     .tab-heading {
         width: unset;
-        min-width: 150px;
+        min-width: unset;
-        height: 40px;
+        height: 35px;
-        line-height: 40px;
+        line-height: 35px;
+        font-size: 16px;
+        padding: 0 10px;
         margin: 0;
         flex-grow: 1;
     }
@@ -531,6 +547,15 @@ svg {
     #version {
         font-size: 10px;
     }
+    .sticky #navigation {
+        position: fixed;
+        left: 0;
+        right: 0;
+        margin: 0 15px;
+    }
+    .sticky #title, .sticky #createdBy {
+        display: none;
+    }
   }
 
   @media only screen and (max-width: 800px) {

public/options/options.html

@@ -23,7 +23,7 @@
 				<div id="version"></div>
 			</div>
 
-			<div class="tab-heading selected" data-for="segment-options">
+			<div class="tab-heading" data-for="segment-options">
 				__MSG_optionsTabCategories__
 			</div>
 
@@ -62,7 +62,7 @@
 
 		<div id="options" class="hidden">
 
-			<div id="segment-options" class="option-group">
+			<div id="segment-options" class="option-group hidden">
 
 				<div id="category-type" data-type="react-CategoryChooserComponent">
 
@@ -159,7 +159,7 @@
 				</div>
 	
 				<div data-type="selector" data-sync="noticeVisibilityMode">
-					<label class="optionLabel" for="noticeVisibilityMode">__MSG_noticeVisibilityLabel__</label>
+					<label class="optionLabel" for="noticeVisibilityMode">__MSG_noticeVisibilityLabel__:</label>
 
 					<select id="noticeVisibilityMode" class="selector-element optionsSelector" >
 						<option value="0">__MSG_noticeVisibilityMode0__</option>
@@ -379,10 +379,10 @@
 	
 					<div class="small-description">__MSG_whatChangeUserID__</div>
 	
-					<div class="option-hidden-section hidden">
+					<div class="option-hidden-section hidden spacing indent">
 						<input class="option-text-box" type="text">
 	
-						<div class="option-button text-change-set">
+						<div class="option-button text-change-set inline low-profile">
 							__MSG_setUserID__
 						</div>
 					</div>
@@ -395,8 +395,8 @@
 	
 					<div class="small-description">__MSG_whatExportOptions__</div>
 	
-					<div class="option-hidden-section hidden">	
+					<div class="option-hidden-section hidden spacing indent">	
-						<input class="option-text-box" type="text">
+						<textarea class="option-text-box" rows="10" style="width:80%"></textarea>
 	
 						<div class="option-button text-change-set">
 							__MSG_setOptions__
@@ -420,8 +420,7 @@
 					</div>
 	
 					<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube)</div>
-					<br/>
+					<div class="small-description">__MSG_supportOtherSitesDescription__ </div>
-					<span class="small-description">__MSG_supportOtherSitesDescription__ </span>
 				</div>
 	
 				<div data-type="private-text-change" data-sync="invidiousInstances" data-no-safari="true">
@@ -431,22 +430,23 @@
 	
 					<div class="small-description">__MSG_addInvidiousInstanceDescription__</div>
 	
-					<div class="option-hidden-section hidden">
+					<div class="indent option-hidden-section hidden spacing">
 						<input class="option-text-box" type="text">
-	
+						<div class="inline">
-						<div>
+							<div class="option-button text-change-set inline low-profile">
-							<div class="option-button text-change-set inline">
 								__MSG_add__
 							</div>
-		
+							<div class="option-button text-change-reset inline low-profile">
-							<div class="option-button invidious-instance-reset inline">
+								__MSG_cancel__
-								__MSG_resetInvidiousInstance__
 							</div>
 						</div>
+					</div>
 
-						<div>
+					<div style="margin-top:15px">
-							<span class="small-description">__MSG_currentInstances__</span>
+						<span>__MSG_currentInstances__</span>
-							<span class="small-description" data-type="display" data-sync="invidiousInstances"></span>
+						<span data-type="display" data-sync="invidiousInstances"></span>
+						<div class="option-button invidious-instance-reset spacing hidden">
+							__MSG_resetInvidiousInstance__
 						</div>
 					</div>
 				</div>
@@ -480,12 +480,14 @@
 						<input class="option-text-box" type="text" style="margin-right:10px">
 					</label>
 	
-					<div class="option-button text-change-set inline low-profile">
+					<div class="inline">
-						__MSG_save__
+						<div class="option-button text-change-set inline low-profile">
-					</div>
+							__MSG_save__
+						</div>
 		
-					<div class="option-button text-change-reset inline low-profile">
+						<div class="option-button text-change-reset inline low-profile">
-						__MSG_reset__
+							__MSG_reset__
+						</div>
 					</div>
 	
 					<div class="small-description">__MSG_customServerAddressDescription__</div>

src/options.ts

@@ -236,23 +236,59 @@ async function init() {
     }
 
     // Tab interaction
+    if (location.hash != "") {
+        const substr = location.hash.substring(1);
+        let menuItem = document.querySelector(`[data-for='${substr}']`);
+        if (menuItem == null)
+            menuItem = document.querySelector(`[data-for='segment-options']`);
+        menuItem.classList.add("selected");
+    } else {
+        document.querySelector(`[data-for='segment-options']`).classList.add("selected");
+    }
+
     const tabElements = document.getElementsByClassName("tab-heading");
     for (let i = 0; i < tabElements.length; i++) {
+        const tabFor = tabElements[i].getAttribute("data-for");
+
+        if (tabElements[i].classList.contains("selected"))
+            document.getElementById(tabFor).classList.remove("hidden");
+
         tabElements[i].addEventListener("click", () => {
+            location.hash = tabFor;
+
+            createStickyHeader();
+
             document.querySelectorAll(".tab-heading").forEach(element => { element.classList.remove("selected"); });
             optionsContainer.querySelectorAll(".option-group").forEach(element => { element.classList.add("hidden"); });
 
             tabElements[i].classList.add("selected");
-            document.getElementById(tabElements[i].getAttribute("data-for")).classList.remove("hidden");
+            document.getElementById(tabFor).classList.remove("hidden");
         });
     }
 
     document.getElementById("version").innerText = "v. " + chrome.runtime.getManifest().version;
 
+    window.onscroll = () => createStickyHeader();
+
     optionsContainer.classList.remove("hidden");
     optionsContainer.classList.add("animated");
 }
 
+function createStickyHeader() {
+    const container = document.getElementById("options-container");
+    const options = document.getElementById("options");
+
+    if (window.pageYOffset > 115) {
+        if (!container.classList.contains("sticky")) {
+            options.style.marginTop = options.offsetTop.toString()+"px";
+            container.classList.add("sticky");
+        }
+    } else {
+        options.style.marginTop = "unset";
+        container.classList.remove("sticky");
+    }
+}
+
 /**
  * Handle special cases where an option shouldn't show
  * 
@@ -294,6 +330,10 @@ function updateDisplayElement(element: HTMLElement) {
     switch (displayOption) {
         case "invidiousInstances":
             element.innerText = displayText.join(', ');
+            if (displayText.length > 1) {
+                const resetButton = element.parentElement.querySelector(".invidious-instance-reset");
+                resetButton.classList.remove("hidden");
+            }
             break;
     }
 }
@@ -309,6 +349,8 @@ function invidiousInstanceAddInit(element: HTMLElement, option: string) {
     const button = element.querySelector(".trigger-button");
 
     const setButton = element.querySelector(".text-change-set");
+    const cancelButton = element.querySelector(".text-change-reset");
+    const resetButton = element.querySelector(".invidious-instance-reset");
     setButton.addEventListener("click", async function() {
         if (textBox.value == "" || textBox.value.includes("/") || textBox.value.includes("http")) {
             alert(chrome.i18n.getMessage("addInvidiousInstanceError"));
@@ -326,19 +368,26 @@ function invidiousInstanceAddInit(element: HTMLElement, option: string) {
 
             invidiousOnClick(checkbox, "supportInvidious");
 
-            textBox.value = "";
+            resetButton.classList.remove("hidden");
 
             // Hide this section again
+            textBox.value = "";
             element.querySelector(".option-hidden-section").classList.add("hidden");
             button.classList.remove("disabled");
         }
     });
 
-    const resetButton = element.querySelector(".invidious-instance-reset");
+    cancelButton.addEventListener("click", async function() {
+        textBox.value = "";
+        element.querySelector(".option-hidden-section").classList.add("hidden");
+        button.classList.remove("disabled");
+    });
+
     resetButton.addEventListener("click", function() {
         if (confirm(chrome.i18n.getMessage("resetInvidiousInstanceAlert"))) {
             // Set to a clone of the default
             Config.config[option] = Config.defaults[option].slice(0);
+            resetButton.classList.add("hidden");
         }
     });
 }