100% compat with widgets/<service>.js

5 files changed, 186 insertions, 73 deletions

diff --git a/src/pages/options/index.html b/src/pages/options/index.html
index df6bec2a..e1163e99 100644
--- a/src/pages/options/index.html
+++ b/src/pages/options/index.html
@@ -46,8 +46,8 @@
     </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">
       <option value="clearnet">Clearnet</option>
       <option value="tor">Tor</option>
       <option value="i2p">I2P</option>
@@ -55,10 +55,10 @@
       
 </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">
@@ -254,15 +254,13 @@
       
     </select>
   </div>
-    <div id="youtube-embedFrontend">
     <div class="some-block option-block">
-      <h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4>
-      <select id="youtube-embed_frontend">
-                        <option value="invidious">invidious</option>
-                                <option value="piped">piped</option>
-                                                                                
-      </select>
-    </div>
+    <h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4>
+    <select id="youtube-embedFrontend">
+                  <option value="invidious">Invidious</option>
+                        <option value="piped">Piped</option>
+                                                            
+    </select>
   </div>
         <div class="some-block option-block">
     <h4 data-localise="__MSG_redirectType__">Redirect Type</h4>
@@ -998,7 +996,103 @@
     <input id="instagram-enabled" type="checkbox">
   </div>
       <hr>
-      
+      <div id="bibliogram">
+        <div class="clearnet">
+      <div class="some-block option-block">
+        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+      </div>
+      <div class="checklist"></div>
+      <hr>
+      <div class="some-block option-block">
+        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+      </div>
+      <form class="custom-instance-form">
+        <div class="some-block option-block">
+          <input class="custom-instance" placeholder="http://bibliogram.org" type="url">
+          <button class="add add-instance" type="submit">
+            <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+            </svg>
+          </button>
+        </div>
+      </form>
+      <div class="checklist custom-checklist"></div>
+            <div class="buttons buttons-inline">
+        <label class="button button-inline" id="latency-bibliogram-label" for="latency-bibliogram"> 
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+            <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path>
+          </svg>&nbsp;
+          <x data-localise="__MSG_testInstancesLatency__">Test Instances Latency</x>
+        </label>
+        <input class="button button-inline" id="latency-bibliogram" style="display:none;">
+      </div>
+          </div>
+        <div class="tor">
+      <div class="some-block option-block">
+        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+      </div>
+      <div class="checklist"></div>
+      <hr>
+      <div class="some-block option-block">
+        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+      </div>
+      <form class="custom-instance-form">
+        <div class="some-block option-block">
+          <input class="custom-instance" placeholder="http://bibliogram.onion" type="url">
+          <button class="add add-instance" type="submit">
+            <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+            </svg>
+          </button>
+        </div>
+      </form>
+      <div class="checklist custom-checklist"></div>
+          </div>
+        <div class="i2p">
+      <div class="some-block option-block">
+        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+      </div>
+      <div class="checklist"></div>
+      <hr>
+      <div class="some-block option-block">
+        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+      </div>
+      <form class="custom-instance-form">
+        <div class="some-block option-block">
+          <input class="custom-instance" placeholder="http://bibliogram.i2p" type="url">
+          <button class="add add-instance" type="submit">
+            <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+            </svg>
+          </button>
+        </div>
+      </form>
+      <div class="checklist custom-checklist"></div>
+          </div>
+        <div class="loki">
+      <div class="some-block option-block">
+        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+      </div>
+      <div class="checklist"></div>
+      <hr>
+      <div class="some-block option-block">
+        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+      </div>
+      <form class="custom-instance-form">
+        <div class="some-block option-block">
+          <input class="custom-instance" placeholder="http://bibliogram.loki" type="url">
+          <button class="add add-instance" type="submit">
+            <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+            </svg>
+          </button>
+        </div>
+      </form>
+      <div class="checklist custom-checklist"></div>
+          </div>
+    
+  </div>
+    
 </section>
 <section class="option-block" id="tiktok_page">
   <div class="some-block option-block">
@@ -2095,14 +2189,12 @@
       
     </select>
   </div>
-    <div id="lbry-embedFrontend">
     <div class="some-block option-block">
-      <h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4>
-      <select id="lbry-embed_frontend">
-                        <option value="librarian">librarian</option>
-                                
-      </select>
-    </div>
+    <h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4>
+    <select id="lbry-embedFrontend">
+                  <option value="librarian">Librarian</option>
+                        
+    </select>
   </div>
         <div class="some-block option-block">
     <h4 data-localise="__MSG_redirectType__">Redirect Type</h4>
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) {