4 files changed, 73 insertions, 52 deletions

diff --git a/src/pages/options/widgets/general.ejs b/src/pages/options/widgets/general.ejs
index d68a2280..e306ba4b 100644
--- a/src/pages/options/widgets/general.ejs
+++ b/src/pages/options/widgets/general.ejs
@@ -12,17 +12,17 @@
     </select>
   </div>
   <div class="some-block option-block">
-    <h4 data-localise="__MSG_protocol__"></h4>
-    <select id="protocol">
+    <h4 data-localise="__MSG_network__">Network</h4>
+    <select id="network">
       <% for (const network in config.networks) { -%>
 <option value="<%= network %>"><%= config.networks[network].name %></option>
       <% }; %>
 </select>
   </div>
-  <div id="protocol-fallback">
+  <div id="network-fallback">
     <div class="some-block option-block">
-      <h4 data-localise="__MSG_protocolFallback__">Fallback to normal if no instances are available for the current protocol</h4>
-      <input id="protocol-fallback-checkbox" type="checkbox">
+      <h4 data-localise="__MSG_networkFallback__">Fallback to normal if no instances are available for the current network</h4>
+      <input id="network-fallback-checkbox" type="checkbox">
     </div>
   </div>
   <div class="some-block option-block">
diff --git a/src/pages/options/widgets/general.js b/src/pages/options/widgets/general.js
index e573b4ee..9dac9bfd 100644
--- a/src/pages/options/widgets/general.js
+++ b/src/pages/options/widgets/general.js
@@ -86,15 +86,15 @@ themeElement.addEventListener("change", event => {
 	location.reload()
 })
 
-let protocolElement = document.getElementById("protocol")
-protocolElement.addEventListener("change", event => {
-	const value = event.target.options[protocol.selectedIndex].value
+let networkElement = document.getElementById("network")
+networkElement.addEventListener("change", event => {
+	const value = event.target.options[network.selectedIndex].value
 	browser.storage.local.set({ network: value })
 	location.reload()
 })
 
-let protocolFallbackCheckbox = document.getElementById("protocol-fallback-checkbox")
-protocolFallbackCheckbox.addEventListener("change", event => {
+let networkFallbackCheckbox = document.getElementById("network-fallback-checkbox")
+networkFallbackCheckbox.addEventListener("change", event => {
 	browser.storage.local.set({ networkFallback: event.target.checked })
 })
 
@@ -138,16 +138,16 @@ browser.storage.local.get(
 	r => {
 		autoRedirectElement.checked = r.autoRedirect
 		themeElement.value = r.theme
-		protocolElement.value = r.network
-		protocolFallbackCheckbox.checked = r.networkFallback
+		networkElement.value = r.network
+		networkFallbackCheckbox.checked = r.networkFallback
 		latencyOutput.value = r.latencyThreshold
 		// firstPartyIsolate.checked = r.firstPartyIsolate;
 
-		let protocolFallbackElement = document.getElementById("protocol-fallback")
-		if (protocolElement.value == "clearnet") {
-			protocolFallbackElement.style.display = "none"
+		let networkFallbackElement = document.getElementById("network-fallback")
+		if (networkElement.value == "clearnet") {
+			networkFallbackElement.style.display = "none"
 		} else {
-			protocolFallbackElement.style.display = "block"
+			networkFallbackElement.style.display = "block"
 		}
 
 		instanceTypeElement.addEventListener("change", event => {
@@ -200,7 +200,7 @@ browser.storage.local.get(
 			if (instanceType == "url") {
 				if (nameCustomInstanceInput.validity.valid) {
 					let url = new URL(nameCustomInstanceInput.value)
-					val = `${url.protocol}//${url.host}`
+					val = `${url.network}//${url.host}`
 					if (!exceptionsCustomInstances.url.includes(val)) exceptionsCustomInstances.url.push(val)
 				}
 			} else if (instanceType == "regex") {
diff --git a/src/pages/options/widgets/services.ejs b/src/pages/options/widgets/services.ejs
index bc75f288..44c6a9f3 100644
--- a/src/pages/options/widgets/services.ejs
+++ b/src/pages/options/widgets/services.ejs
@@ -18,17 +18,15 @@
     </select>
   </div>
   <% if (config.services[service].embeddable) { _%>
-  <div id="<%= service %>-embedFrontend">
-    <div class="some-block option-block">
-      <h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4>
-      <select id="<%= service %>-embed_frontend">
-        <% for (const frontend in config.services[service].frontends) { -%>
-        <% if (config.services[service].frontends[frontend].embeddable) { _%>
-        <option value="<%= frontend %>"><%= frontend %></option>
-        <% } _%>
-        <% } %>
-      </select>
-    </div>
+  <div class="some-block option-block">
+    <h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4>
+    <select id="<%= service %>-embedFrontend">
+      <% for (const frontend in config.services[service].frontends) { -%>
+      <% if (config.services[service].frontends[frontend].embeddable) { _%>
+      <option value="<%= frontend %>"><%= config.services[service].frontends[frontend].name %></option>
+      <% } _%>
+      <% } %>
+    </select>
   </div>
   <% } _%>
   <% } _%>
diff --git a/src/pages/options/widgets/services.js b/src/pages/options/widgets/services.js
index 33c174f9..69840de4 100644
--- a/src/pages/options/widgets/services.js
+++ b/src/pages/options/widgets/services.js
@@ -16,19 +16,22 @@ function getConfig() {
 	})
 }
 
-await getConfig()
+function getNetwork() {
+	return new Promise(resolve => {
+		browser.storage.local.get("network", r => {
+			selectedNetwork = r.network
+			resolve()
+		})
+	})
+}
 
-browser.storage.local.get("network", r => {
-	selectedNetwork = r.network
-})
+await getConfig()
+await getNetwork()
 
 function changeFrontendsSettings(service) {
 	for (const frontend in config.services[service].frontends) {
-		if (config.services[service].frontends[frontend].instanceList && config.services[service].frontends.length > 1) {
+		if (config.services[service].frontends[frontend].instanceList) {
 			const frontendDiv = document.getElementById(frontend)
-			if (divs[service].frontend == null) {
-				console.log(frontend)
-			}
 			if (frontend == divs[service].frontend.value) {
 				frontendDiv.style.display = "block"
 			} else {
@@ -36,25 +39,43 @@ function changeFrontendsSettings(service) {
 			}
 		}
 	}
+
+	if (config.services[service].embeddable) {
+		if (!config.services[service].frontends[divs[service].frontend.value].instanceList) {
+			divs[service].embedFrontend.disabled = false
+			for (const frontend in config.services[service].frontends) {
+				if (config.services[service].frontends[frontend].embeddable) {
+					const frontendDiv = document.getElementById(frontend)
+					if (frontend == divs[service].embedFrontend.value) {
+						frontendDiv.style.display = "block"
+					} else {
+						frontendDiv.style.display = "none"
+					}
+				}
+			}
+		} else if (Object.keys(config.services[service].frontends) > 1) divs[service].embedFrontend.disabled = true
+	}
 }
 
-function changeNetworkSettings(selectedNetwork) {
-	for (const frontend in config.frontends) {
-		if (config.services[service].frontends[frontend].instanceList) {
-			const frontendDiv = document.getElementById(frontend)
-			for (const network in config.networks) {
-				const networkDiv = frontendDiv.getElementsByClassName(network)[0]
-				if (network == selectedNetwork) {
-					networkDiv.style.display = "block"
-				} else {
-					networkDiv.style.display = "none"
+function changeNetworkSettings() {
+	for (const service in config.services) {
+		for (const frontend in config.services[service].frontends) {
+			if (config.services[service].frontends[frontend].instanceList) {
+				const frontendDiv = document.getElementById(frontend)
+				for (const network in config.networks) {
+					const networkDiv = frontendDiv.getElementsByClassName(network)[0]
+					if (network == selectedNetwork) {
+						networkDiv.style.display = "block"
+					} else {
+						networkDiv.style.display = "none"
+					}
 				}
 			}
 		}
 	}
 }
 
-changeNetworkSettings(selectedNetwork)
+changeNetworkSettings()
 for (const service in config.services) {
 	divs[service] = {}
 	divs[service][service] = document.getElementById(`${service}_page`)
@@ -62,18 +83,20 @@ for (const service in config.services) {
 		divs[service][option] = document.getElementById(`${service}-${option}`)
 
 		browser.storage.local.get([`${service + utils.camelCase(option)}`], r => {
-			if (typeof config.services[service].options[option] == "boollean") divs[service][option].checked = r[service + utils.camelCase(option)]
-			else divs[service][option].value = !r[service + utils.camelCase(option)]
+			if (typeof config.services[service].options[option] == "boolean") divs[service][option].checked = r[service + utils.camelCase(option)]
+			else divs[service][option].value = r[service + utils.camelCase(option)]
 		})
 
 		divs[service][option].addEventListener("change", () => {
-			if (typeof config.services[service].options[option] == "boollean") browser.storage.local.set({ [service + utils.camelCase(option)]: divs[service][option].checked })
+			if (typeof config.services[service].options[option] == "boolean") browser.storage.local.set({ [service + utils.camelCase(option)]: divs[service][option].checked })
 			else browser.storage.local.set({ [service + utils.camelCase(option)]: divs[service][option].value })
-			changeFrontendsSettings()
+			changeFrontendsSettings(service)
 		})
 	}
 
-	changeFrontendsSettings(service)
+	if (Object.keys(config.services[service].frontends).length > 1) {
+		changeFrontendsSettings(service)
+	}
 
 	for (const frontend in config.services[service].frontends) {
 		if (config.services[service].frontends[frontend].instanceList) {