Optimizing and fixing bugs #286

src/_locales/ar/messages.json

@@ -203,6 +203,10 @@
     "message": "نوع التوجيه",
     "description": "used in the settings page"
   },
+  "embeddedVids": {
+    "message": "الواجهة الأمامية للفيديوهات المضمنة",
+    "description": "used in the settings page"
+  },
   "both": {
     "message": "الإثنين",
     "description": "used in the settings page"

src/_locales/de/messages.json

@@ -13,143 +13,143 @@
   },
   "settings": {
     "message": "Optionen",
-    "description": "used in popup.html"
+    "description": "used in the popup"
   },
   "general": {
     "message": "Allgemein",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "search": {
     "message": "Suche",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "translate": {
     "message": "Übersetzen",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "maps": {
     "message": "Karten",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "sendFiles": {
     "message": "Dateien senden",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "youtube": {
     "message": "YouTube",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "instagram": {
     "message": "Instagram",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "twitter": {
     "message": "Twitter",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "reddit": {
     "message": "Reddit",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "tiktok": {
     "message": "TikTok",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "ytmusic": {
     "message": "YT Music",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "imgur": {
     "message": "Imgur",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "wikipedia": {
     "message": "Wikipedia",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "peertube": {
     "message": "PeerTube",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "medium": {
     "message": "Medium",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "tor": {
     "message": "Tor",
-    "description": "used in imgur.html"
+    "description": "used in the settings page"
   },
   "theme": {
     "message": "Thema",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "system": {
     "message": "System",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "light": {
     "message": "Hell",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "dark": {
     "message": "Dunkel",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "autoRedirect": {
     "message": "Instanzen automatisch weiterleiten, die offline sind",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "exceptions": {
     "message": "Ausnahmen",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "updateInstances": {
     "message": "Instanzen aktualisieren",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "importSettings": {
     "message": "Einstellungen importieren",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "exportSettings": {
     "message": "Einstellungen exportieren",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "resetSettings": {
     "message": "Einstellungen zurücksetzen",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "customPopup": {
     "message": "Popup personalisieren",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "enable": {
     "message": "Aktivieren",
-    "description": "used in imgur.html"
+    "description": "used in the settings page"
   },
   "protocol": {
     "message": "Protokoll",
-    "description": "used in imgur.html"
+    "description": "used in the settings page"
   },
   "normal": {
     "message": "Normal",
-    "description": "used in imgur.html"
+    "description": "used in the settings page"
   },
   "defaultInstances": {
     "message": "Standard-Instanzen",
-    "description": "used in imgur.html"
+    "description": "used in the settings page"
   },
   "customInstances": {
     "message": "Eigene Instanzen",
-    "description": "used in imgur.html"
+    "description": "used in the settings page"
   },
   "toggleAll": {
     "message": "Alle umschalten",
-    "description": "used in utils.js"
+    "description": "used in the settings page"
   },
   "frontend": {
     "message": "Frontend",
-    "description": "used in maps.html"
+    "description": "used in the settings page"
   },
   "notFullyPrivate": {
     "message": "Das ist kein völlig privates Frontend.",
@@ -157,23 +157,27 @@
   },
   "searchNote": {
     "message": "Hinweis: Um das volle Potenzial der Suchweiterleitung auszunutzen, lege LibRedirect als Standardsuchmaschine fest.",
-    "description": "used in search.html"
+    "description": "used in the settings page"
   },
   "redirectType": {
     "message": "Art der Weiterleitung",
-    "description": "used in youtube.html"
+    "description": "used in the settings page"
+  },
+  "embeddedVids": {
+    "message": "Embedded Videos Frontend",
+    "description": "used in the settings page"
   },
   "both": {
     "message": "beides",
-    "description": "used in youtube.html"
+    "description": "used in the settings page"
   },
   "onlyEmbedded": {
     "message": "nur eingebettet",
-    "description": "used in youtube.html"
+    "description": "used in the settings page"
   },
   "onlyNotEmbedded": {
     "message": "nur nicht-eingebunden",
-    "description": "used in youtube.html"
+    "description": "used in the settings page"
   },
   "cancel": {
     "message": "Abbrechen",

src/_locales/en/messages.json

@@ -13,143 +13,143 @@
   },
   "settings": {
     "message": "Settings",
-    "description": "used in popup.html"
+    "description": "used in the popup"
   },
   "general": {
     "message": "General",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "search": {
     "message": "Search",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "translate": {
     "message": "Translate",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "maps": {
     "message": "Maps",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "sendFiles": {
     "message": "Send Files",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "youtube": {
     "message": "YouTube",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "instagram": {
     "message": "Instagram",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "twitter": {
     "message": "Twitter",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "reddit": {
     "message": "Reddit",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "tiktok": {
     "message": "TikTok",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "ytmusic": {
     "message": "YT Music",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "imgur": {
     "message": "Imgur",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "wikipedia": {
     "message": "Wikipedia",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "peertube": {
     "message": "PeerTube",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "medium": {
     "message": "Medium",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "tor": {
     "message": "Tor",
-    "description": "used in imgur.html"
+    "description": "used in the settings page"
   },
   "theme": {
     "message": "Theme",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "system": {
     "message": "System",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "light": {
     "message": "Light",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "dark": {
     "message": "Dark",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "autoRedirect": {
     "message": "Auto Redirect of offline instances",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "exceptions": {
     "message": "Exceptions",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "updateInstances": {
     "message": "Update Instances",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "importSettings": {
     "message": "Import Settings",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "exportSettings": {
     "message": "Export Settings",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "resetSettings": {
     "message": "Reset Settings",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "customPopup": {
     "message": "Customize Popup",
-    "description": "used in general.html"
+    "description": "used in the settings page"
   },
   "enable": {
     "message": "Enable",
-    "description": "used in imgur.html"
+    "description": "used in the settings page"
   },
   "protocol": {
     "message": "Protocol",
-    "description": "used in imgur.html"
+    "description": "used in the settings page"
   },
   "normal": {
     "message": "Normal",
-    "description": "used in imgur.html"
+    "description": "used in the settings page"
   },
   "defaultInstances": {
     "message": "Default Instances",
-    "description": "used in imgur.html"
+    "description": "used in the settings page"
   },
   "customInstances": {
     "message": "Custom Instances",
-    "description": "used in imgur.html"
+    "description": "used in the settings page"
   },
   "toggleAll": {
     "message": "Toggle all",
-    "description": "used in utils.js"
+    "description": "used in the settings page"
   },
   "frontend": {
     "message": "Frontend",
-    "description": "used in maps.html"
+    "description": "used in the settings page"
   },
   "notFullyPrivate": {
     "message": "This isn't a fully private frontend.",
@@ -157,23 +157,27 @@
   },
   "searchNote": {
     "message": "Note: To use Search to its full potential, make LibRedirect as the Default Search Engine",
-    "description": "used in search.html"
+    "description": "used in the settings page"
   },
   "redirectType": {
     "message": "Redirect Type",
-    "description": "used in youtube.html"
+    "description": "used in the settings page"
+  },
+  "embeddedVids": {
+    "message": "Embedded Videos Frontend",
+    "description": "used in the settings page"
   },
   "both": {
     "message": "both",
-    "description": "used in youtube.html"
+    "description": "used in the settings page"
   },
   "onlyEmbedded": {
     "message": "only embedded",
-    "description": "used in youtube.html"
+    "description": "used in the settings page"
   },
   "onlyNotEmbedded": {
     "message": "only not embedded",
-    "description": "used in youtube.html"
+    "description": "used in the settings page"
   },
   "instanceOffline": {
     "message": "This instance is offline, you'll be redirected after ",

src/_locales/filter.py

@@ -15,7 +15,7 @@ with open('ar/messages.json') as data:
 
 
 en_json = {}
-with open('en/messages.json') as data:
+with open('ja/messages.json') as data:
     en_json = json.load(data)
 
 
@@ -39,5 +39,5 @@ for item in add_keys:
         "description": ""
     }
 
-with open('en/messages.json', 'w') as outfile:
+with open('ja/messages.json', 'w') as outfile:
     outfile.write(json.dumps(en_json, ensure_ascii=False, indent=2))

src/assets/javascripts/utils.js

@@ -261,18 +261,18 @@ async function ping(href) {
 async function testLatency(element, instances) {
   return new Promise(async resolve => {
     let myList = {};
-    for (const href of instances) await ping(href).then(m => {
-      if (m) {
-        myList[href] = m;
+    for (const href of instances) await ping(href).then(time => {
+      if (time) {
+        myList[href] = time;
         let color;
-        if (m <= 1000) color = "green"
-        else if (m <= 2000) color = "orange"
+        if (time <= 1000) color = "green"
+        else if (time <= 2000) color = "orange"
         else color = "red";
 
         let text;
-        if (m == 5000) text = '5000ms+'
-        else if (m > 5000) text = `ERROR: ${m - 5000}`;
-        else text = `${m}ms`;
+        if (time == 5000) text = '5000ms+'
+        else if (time > 5000) text = `ERROR: ${time - 5000}`;
+        else text = `${time}ms`;
         element.innerHTML = `${href}:&nbsp;<span style="color:${color};">${text}</span>`;
       }
     })
@@ -405,16 +405,9 @@ function switchInstance(test) {
   })
 }
 
-function latency(name, frontend, document, location, splitNames) {
-  let latencyElement;
-  let latencyLabel;
-  if (splitNames == true) {
-    latencyElement = document.getElementById(`latency-${frontend}`);
-    latencyLabel = document.getElementById(`latency-${frontend}-label`);
-  } else {
-    latencyElement = document.getElementById("latency");
-    latencyLabel = document.getElementById("latency-label");
-  }
+function latency(name, frontend, document, location) {
+  let latencyElement = document.getElementById(`latency-${frontend}`);
+  let latencyLabel = document.getElementById(`latency-${frontend}-label`);
   latencyElement.addEventListener("click",
     async () => {
       let reloadWindow = () => location.reload();

src/pages/background/background.js

@@ -25,7 +25,7 @@ browser.runtime.onInstalled.addListener(
   async details => {
     // if (details.reason == 'install') {
     if (details.reason == 'install' || details.reason == "update") {
-      if (details.reason == "update") browser.tabs.create({ url: browser.extension.getURL("/pages/background/reset_warning.html") });
+      if (details.reason == "update") browser.tabs.create({ url: browser.runtime.getURL("/pages/background/reset_warning.html") });
       fetch('/instances/blocklist.json').then(response => response.text()).then(async data => {
         await browser.storage.local.clear();
         await browser.storage.local.set({ cloudflareList: JSON.parse(data) })
@@ -64,7 +64,7 @@ let incognitoInit = false;
 browser.tabs.onCreated.addListener(
   tab => {
     if (!incognitoInit && tab.incognito) {
-      browser.tabs.create({ url: browser.extension.getURL("/pages/background/incognito.html") });
+      browser.tabs.create({ url: browser.runtime.getURL("/pages/background/incognito.html") });
       incognitoInit = true;
     }
   }

src/pages/background/reset_warning.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title data-localise="__MSG_instanceIsOff__">Instance is offline</title>
+    <title data-localise="__MSG_instanceIsOff__">Reset Warning</title>
     <link href="../stylesheets/styles.css" rel="stylesheet" />
     <style>
         body {
@@ -24,7 +24,7 @@
             width: 80%;
         }
 
-        div.logo{
+        div.logo {
             display: flex;
         }
 
@@ -46,11 +46,8 @@
         <p data-localise="__MSG_instanceOffline__">All settings have been reset as they're incompatible with the
             previous version.</p>
         <p>Sorry for the inconvenience, but we're going in a fast development process and can't
-            support nor convert older settings. It will reach at the end a stable plateau  though.</p>
+            support nor convert older settings. It will reach a stable plateau though.</p>
     </div>
-
-    <script src="instance_offline.js"></script>
-    <script src="../../assets/javascripts/localise.js"></script>
 </body>
 
 </html>

src/pages/options/index.html

@@ -235,7 +235,7 @@
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
-          <input id="disable-invidious" type="checkbox">
+          <input id="youtube-enable" type="checkbox">
         </div>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_frontend__">Frontend</h4>
@@ -250,7 +250,7 @@
         <div id="freetube-yatte">
           <div class="some-block option-block">
             <h4 data-localise="__MSG_embeddedVids__">Embedded Videos Frontend</h4>
-            <select id="youtube-embed-frontend">
+            <select id="youtube-embed_frontend">
               <option value="invidious">Invidious</option>
               <option value="piped">Piped</option>
               <option value="pipedMaterial">Piped-Material</option>
@@ -261,14 +261,14 @@
         <div id="invidious-piped-pipedMaterial">
           <div class="some-block option-block">
             <h4 data-localise="__MSG_protocol__">Protocol</h4>
-            <select id="protocol">
+            <select id="youtube-protocol">
               <option value="normal" data-localise="__MSG_normal__">Normal</option>
               <option value="tor" data-localise="__MSG_tor__">Tor</option>
             </select>
           </div>
           <div class="some-block option-block">
             <h4 data-localise="__MSG_redirectType__">Redirect Type</h4>
-            <select id="only-embed">
+            <select id="youtube-redirect_type">
               <option value="both" data-localise="__MSG_both__">both</option>
               <option value="onlyEmbedded" data-localise="__MSG_onlyEmbedded__">Only Embedded</option>
               <option value="onlyNotEmbedded" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option>
@@ -297,13 +297,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-invidious-label" for="latency-invidious"> 
-                          <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-invidious" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-invidious-label" for="latency-invidious"> 
+                            <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-invidious" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -349,13 +351,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-piped-label" for="latency-piped"> 
-                          <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-piped" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-piped-label" for="latency-piped"> 
+                            <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-piped" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -401,13 +405,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-pipedMaterial-label" for="latency-pipedMaterial"> 
-                          <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-pipedMaterial" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-pipedMaterial-label" for="latency-pipedMaterial"> 
+                            <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-pipedMaterial" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -440,7 +446,7 @@
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
-          <input id="disable-beatbump" type="checkbox">
+          <input id="youtubeMusic-enable" type="checkbox">
         </div>
         <div id="beatbump">
           <hr>
@@ -464,13 +470,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-label" for="latency"> 
-                          <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" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-beatbump-label" for="latency-beatbump"> 
+                            <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-beatbump" style="display:none;">
+                        </div>
           </div>
         </div>
         <script type="module" src="./widgets/youtubeMusic.js"></script>
@@ -482,11 +490,11 @@
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
-          <input id="disable-nitter" type="checkbox">
+          <input id="twitter-enable" type="checkbox">
         </div>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_protocol__">Protocol</h4>
-          <select id="protocol">
+          <select id="twitter-protocol">
             <option value="normal" data-localise="__MSG_normal__">Normal</option>
             <option value="tor" data-localise="__MSG_tor__">Tor</option>
           </select>
@@ -513,13 +521,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-label" for="latency"> 
-                          <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" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-nitter-label" for="latency-nitter"> 
+                            <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-nitter" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -552,11 +562,11 @@
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
-          <input id="disable-bibliogram" type="checkbox">
+          <input id="instagram-enable" type="checkbox">
         </div>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_protocol__">Protocol</h4>
-          <select id="protocol">
+          <select id="instagram-protocol">
             <option value="normal" data-localise="__MSG_normal__">Normal</option>
             <option value="tor" data-localise="__MSG_tor__">Tor</option>
           </select>
@@ -583,13 +593,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-label" for="latency"> 
-                          <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" style="display:none;">
+                        <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">
@@ -622,11 +634,11 @@
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
-          <input id="disable-tiktok" type="checkbox">
+          <input id="tiktok-enable" type="checkbox">
         </div>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_protocol__">Protocol</h4>
-          <select id="protocol">
+          <select id="tiktok-protocol">
             <option value="normal" data-localise="__MSG_normal__">Normal</option>
             <option value="tor" data-localise="__MSG_tor__">Tor</option>
           </select>
@@ -653,13 +665,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-label" for="latency"> 
-                          <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" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-proxiTok-label" for="latency-proxiTok"> 
+                            <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-proxiTok" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -692,7 +706,7 @@
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
-          <input id="disable-reddit" type="checkbox">
+          <input id="reddit-enable" type="checkbox">
         </div>
         <div class="some-block option-block">
           <h4 id="frontend" data-localise="__MSG_frontend__">Frontend</h4>
@@ -703,7 +717,7 @@
         </div>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_protocol__">Protocol</h4>
-          <select id="protocol">
+          <select id="reddit-protocol">
             <option value="normal" data-localise="__MSG_normal__">Normal</option>
             <option value="tor" data-localise="__MSG_tor__">Tor</option>
           </select>
@@ -730,13 +744,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-libreddit-label" for="latency-libreddit"> 
-                          <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-libreddit" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-libreddit-label" for="latency-libreddit"> 
+                            <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-libreddit" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -782,13 +798,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-teddit-label" for="latency-teddit"> 
-                          <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-teddit" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-teddit-label" for="latency-teddit"> 
+                            <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-teddit" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -821,11 +839,11 @@
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
-          <input id="disable-imgur" type="checkbox">
+          <input id="imgur-enable" type="checkbox">
         </div>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_protocol__">Protocol</h4>
-          <select id="protocol">
+          <select id="imgur-protocol">
             <option value="normal" data-localise="__MSG_normal__">Normal</option>
             <option value="tor" data-localise="__MSG_tor__">Tor</option>
             <option value="i2p" data-localise="__MSG_i2p__">I2P</option>
@@ -853,13 +871,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-label" for="latency"> 
-                          <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" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-rimgo-label" for="latency-rimgo"> 
+                            <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-rimgo" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -913,11 +933,11 @@
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
-          <input id="disable-wikipedia" type="checkbox">
+          <input id="wikipedia-enable" type="checkbox">
         </div>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_protocol__">Protocol</h4>
-          <select id="protocol">
+          <select id="wikipedia-protocol">
             <option value="normal" data-localise="__MSG_normal__">Normal</option>
             <option value="tor" data-localise="__MSG_tor__">Tor</option>
             <option value="i2p" data-localise="__MSG_i2p__">I2P</option>
@@ -945,13 +965,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-label" for="latency"> 
-                          <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" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-wikiless-label" for="latency-wikiless"> 
+                            <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-wikiless" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -1005,11 +1027,11 @@
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
-          <input id="disable-medium" type="checkbox">
+          <input id="medium-enable" type="checkbox">
         </div>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_protocol__">Protocol</h4>
-          <select id="protocol">
+          <select id="medium-protocol">
             <option value="normal" data-localise="__MSG_normal__">Normal</option>
             <option value="tor" data-localise="__MSG_tor__">Tor</option>
           </select>
@@ -1036,13 +1058,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-label" for="latency"> 
-                          <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" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-scribe-label" for="latency-scribe"> 
+                            <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-scribe" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -1075,11 +1099,11 @@
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
-          <input id="disable-peertube" type="checkbox">
+          <input id="peertube-enable" type="checkbox">
         </div>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_protocol__">Protocol</h4>
-          <select id="protocol">
+          <select id="peertube-protocol">
             <option value="normal" data-localise="__MSG_normal__">Normal</option>
             <option value="tor" data-localise="__MSG_tor__">Tor</option>
           </select>
@@ -1106,13 +1130,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-label" for="latency"> 
-                          <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" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-simpleertube-label" for="latency-simpleertube"> 
+                            <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-simpleertube" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -1145,11 +1171,11 @@
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
-          <input id="disable-lbry" type="checkbox">
+          <input id="lbry-enable" type="checkbox">
         </div>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_protocol__">Protocol</h4>
-          <select id="protocol">
+          <select id="lbry-protocol">
             <option value="normal" data-localise="__MSG_normal__">Normal</option>
             <option value="tor" data-localise="__MSG_tor__">Tor</option>
           </select>
@@ -1176,13 +1202,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-label" for="latency"> 
-                          <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" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-librarian-label" for="latency-librarian"> 
+                            <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-librarian" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -1215,7 +1243,7 @@
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
-          <input id="disable-search" type="checkbox">
+          <input id="search-enable" type="checkbox">
         </div>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_frontend__">Frontend</h4>
@@ -1228,7 +1256,7 @@
         <div id="searx-whoogle">
           <div class="some-block option-block">
             <h4 data-localise="__MSG_protocol__">Protocol</h4>
-            <select id="protocol">
+            <select id="search-protocol">
               <option value="normal" data-localise="__MSG_normal__">Normal</option>
               <option value="tor" data-localise="__MSG_tor__">Tor</option>
               <option value="i2p" data-localise="__MSG_i2p__">I2P</option>
@@ -1260,13 +1288,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-searx-label" for="latency-searx"> 
-                          <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-searx" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-searx-label" for="latency-searx"> 
+                            <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-searx" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -1333,13 +1363,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-searxng-label" for="latency-searxng"> 
-                          <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-searxng" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-searxng-label" for="latency-searxng"> 
+                            <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-searxng" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -1406,13 +1438,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-whoogle-label" for="latency-whoogle"> 
-                          <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-whoogle" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-whoogle-label" for="latency-whoogle"> 
+                            <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-whoogle" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -1466,7 +1500,7 @@
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
-          <input id="disable-simplyTranslate" type="checkbox">
+          <input id="translate-enable" type="checkbox">
         </div>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_frontend__">Frontend</h4>
@@ -1477,7 +1511,7 @@
         </div>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_protocol__">Protocol</h4>
-          <select id="protocol">
+          <select id="translate-protocol">
             <option value="normal" data-localise="__MSG_normal__">Normal</option>
             <option value="tor" data-localise="__MSG_tor__">Tor</option>
           </select>
@@ -1504,13 +1538,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-simplyTranslate-label" for="latency-simplyTranslate"> 
-                          <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-simplyTranslate" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-simplyTranslate-label" for="latency-simplyTranslate"> 
+                            <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-simplyTranslate" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -1555,13 +1591,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-lingva-label" for="latency-lingva"> 
-                          <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-lingva" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-lingva-label" for="latency-lingva"> 
+                            <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-lingva" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">
@@ -1594,7 +1632,7 @@
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
-          <input id="disable-osm" type="checkbox">
+          <input id="maps-enable" type="checkbox">
         </div>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_frontend__">Frontend</h4>
@@ -1625,13 +1663,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-label" for="latency"> 
-                          <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" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-facilmap-label" for="latency-facilmap"> 
+                            <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-facilmap" style="display:none;">
+                        </div>
           </div>
         </div>
         <script type="module" src="./widgets/maps.js"></script>
@@ -1643,11 +1683,11 @@
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enable__">Enable</h4>
-          <input id="disable-sendTargets" type="checkbox">
+          <input id="sendTargets-enable" type="checkbox">
         </div>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_protocol__">Protocol</h4>
-          <select id="protocol">
+          <select id="sendTargets-protocol">
             <option value="normal" data-localise="__MSG_normal__">Normal</option>
             <option value="tor" data-localise="__MSG_tor__">Tor</option>
           </select>
@@ -1674,13 +1714,15 @@
                           </div>
                         </form>
                         <div class="checklist custom-checklist"></div>
-                        <label class="button button-inline" id="latency-label" for="latency"> 
-                          <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" style="display:none;">
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-send-label" for="latency-send"> 
+                            <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-send" style="display:none;">
+                        </div>
           </div>
           <div class="tor">
                         <div class="some-block option-block">

src/pages/options/widgets/general.js

@@ -65,7 +65,7 @@ importSettingsElement.addEventListener("change",
         "cloudflareList" in data &&
         "imgurRedirects" in data
       ) {
-        console.log('importing a valid file...');
+        await browser.storage.local.clear();
         await browser.storage.local.set({ ...data })
         location.reload();
       } else

src/pages/options/widgets/imgur.js

@@ -1,32 +1,25 @@
-import imgurHelper from "../../../assets/javascripts/imgur.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disableImgurElement = document.getElementById("disable-imgur");
-let protocolElement = document.getElementById("protocol")
+const enable = document.getElementById("imgur-enable");
+const protocol = document.getElementById("imgur-protocol")
+const imgur = document.getElementById('imgur_page');
 
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableImgur: !disableImgurElement.checked,
-        imgurProtocol: protocolElement.value,
-    });
-    changeProtocolSettings(protocolElement.value);
-})
+const normalDiv = imgur.getElementsByClassName("normal")[0];
+const torDiv = imgur.getElementsByClassName("tor")[0];
+const i2pDiv = imgur.getElementsByClassName("i2p")[0];
 
-function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementsByClassName("normal")[0];
-    let torDiv = document.getElementsByClassName("tor")[0];
-    let i2pDiv = document.getElementsByClassName("i2p")[0];
-    if (protocol == 'normal') {
+function changeProtocolSettings() {
+    if (protocol.value == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';
         i2pDiv.style.display = 'none';
     }
-    else if (protocol == 'tor') {
+    else if (protocol.value == 'tor') {
         normalDiv.style.display = 'none';
         torDiv.style.display = 'block';
         i2pDiv.style.display = 'none';
     }
-    else if (protocol == 'i2p') {
+    else if (protocol.value == 'i2p') {
         normalDiv.style.display = 'none';
         torDiv.style.display = 'none';
         i2pDiv.style.display = 'block';
@@ -39,12 +32,20 @@ browser.storage.local.get(
         "imgurProtocol",
     ],
     r => {
-        disableImgurElement.checked = !r.disableImgur;
-        protocolElement.value = r.imgurProtocol;
-        changeProtocolSettings(r.imgurProtocol);
+        enable.checked = !r.disableImgur;
+        protocol.value = r.imgurProtocol;
+        changeProtocolSettings();
     }
 );
 
+imgur.addEventListener("change", () => {
+    changeProtocolSettings();
+    browser.storage.local.set({
+        disableImgur: !enable.checked,
+        imgurProtocol: protocol.value,
+    });
+})
+
 utils.processDefaultCustomInstances('imgur', 'rimgo', 'normal', document);
 utils.processDefaultCustomInstances('imgur', 'rimgo', 'tor', document);
 utils.processDefaultCustomInstances('imgur', 'rimgo', 'i2p', document);

src/pages/options/widgets/imgur.pug

@@ -5,11 +5,11 @@ section#imgur_page.option-block
 
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-imgur(type="checkbox")
+        input#imgur-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#imgur-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
             option(value="i2p" data-localise="__MSG_i2p__") I2P
@@ -20,7 +20,7 @@ section#imgur_page.option-block
             include ../../widgets/instances.pug
             +instances('https://rimgo.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('rimgo')
         .tor
             include ../../widgets/instances.pug
             +instances('https://rimgo.onion')

src/pages/options/widgets/instagram.js

@@ -1,20 +1,13 @@
-import instagramHelper from "../../../assets/javascripts/instagram.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-const disable = document.getElementById("disable-bibliogram");
-const protocol = document.getElementById("protocol");
+const enable = document.getElementById("instagram-enable");
+const protocol = document.getElementById("instagram-protocol");
 
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableInstagram: disable.checked,
-        instagramProtocol: protocol.value,
-    })
-    changeProtocolSettings();
-})
+const instagram = document.getElementById('instagram_page')
+const normalDiv = instagram.getElementsByClassName("normal")[0];
+const torDiv = instagram.getElementsByClassName("tor")[0];
 
 function changeProtocolSettings() {
-    let normalDiv = document.getElementsByClassName("normal")[0];
-    let torDiv = document.getElementsByClassName("tor")[0];
     if (protocol.value == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';
@@ -31,10 +24,20 @@ browser.storage.local.get(
         "instagramProtocol"
     ],
     r => {
-        disable.checked = !r.disableInstagram;
+        enable.checked = !r.disableInstagram;
         protocol.value = r.instagramProtocol;
         changeProtocolSettings();
+    }
+)
+
+instagram.addEventListener("change", () => {
+    changeProtocolSettings();
+    browser.storage.local.set({
+        disableInstagram: enable.checked,
+        instagramProtocol: protocol.value,
     })
+})
+
 
 utils.processDefaultCustomInstances('instagram', 'bibliogram', 'normal', document);
 utils.processDefaultCustomInstances('instagram', 'bibliogram', 'tor', document);

src/pages/options/widgets/instagram.pug

@@ -5,11 +5,11 @@ section#instagram_page.option-block
 
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-bibliogram(type="checkbox")
+        input#instagram-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#instagram-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 
@@ -19,9 +19,8 @@ section#instagram_page.option-block
             include ../../widgets/instances.pug
             +instances('https://bibliogram.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('bibliogram')
         .tor
-            include ../../widgets/instances.pug
             +instances('https://bibliogram.onion')
 
     script(type="module" src="./widgets/instagram.js")

src/pages/options/widgets/lbry.js

@@ -1,20 +1,13 @@
-import lbryHelper from "../../../assets/javascripts/lbry.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disable = document.getElementById("disable-lbry");
-let protocol = document.getElementById("protocol")
+const enable = document.getElementById("lbry-enable");
+const protocol = document.getElementById("lbry-protocol")
 
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableLbryTargets: !lbryHelper.checked,
-        lbryTargetsProtocol: protocol.value,
-    });
-    changeProtocolSettings()
-})
+const lbry = document.getElementById('lbry_page');
+const normalDiv = lbry.getElementsByClassName("normal")[0];
+const torDiv = lbry.getElementsByClassName("tor")[0];
 
 function changeProtocolSettings() {
-    let normalDiv = document.getElementsByClassName("normal")[0];
-    let torDiv = document.getElementsByClassName("tor")[0];
     if (protocol.value == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';
@@ -31,12 +24,20 @@ browser.storage.local.get(
         "lbryTargetsProtocol"
     ],
     r => {
-        disable.checked = !r.disableLbryTargets;
+        enable.checked = !r.disableLbryTargets;
         protocol.value = r.lbryTargetsProtocol;
         changeProtocolSettings();
     }
 )
 
+lbry.addEventListener("change", () => {
+    changeProtocolSettings()
+    browser.storage.local.set({
+        disableLbryTargets: !enable.checked,
+        lbryTargetsProtocol: protocol.value,
+    });
+})
+
 utils.processDefaultCustomInstances('lbryTargets', 'librarian', 'normal', document);
 utils.processDefaultCustomInstances('lbryTargets', 'librarian', 'tor', document);
 

src/pages/options/widgets/lbry.pug

@@ -4,11 +4,11 @@ section#lbry_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-lbry(type="checkbox")
+        input#lbry-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#lbry-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 
@@ -18,7 +18,7 @@ section#lbry_page.option-block
             include ../../widgets/instances.pug
             +instances('https://librarian.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('librarian')
         .tor
             include ../../widgets/instances.pug
             +instances('https://librarian.onion')

src/pages/options/widgets/maps.js

@@ -1,18 +1,11 @@
-import mapsHelper from "../../../assets/javascripts/maps.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-const disable = document.getElementById("disable-osm");
+const enable = document.getElementById("maps-enable");
 const frontend = document.getElementById("maps-frontend");
 
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableMaps: !disable.checked,
-        mapsFrontend: frontend.value,
-    })
-    changeFrontendsSettings();
-})
-
+const maps = document.getElementById('maps_page');
 const facilDiv = document.getElementById("facil")
+
 function changeFrontendsSettings() {
     if (frontend.value == 'facil') facilDiv.style.display = 'block';
     else if (frontend.value == 'osm') facilDiv.style.display = 'none';
@@ -24,9 +17,18 @@ browser.storage.local.get(
         "mapsFrontend",
     ],
     r => {
-        disable.checked = !r.disableMaps;
+        enable.checked = !r.disableMaps;
         frontend.value = r.mapsFrontend;
         changeFrontendsSettings();
     }
 )
+
+maps.addEventListener("change", () => {
+    changeFrontendsSettings();
+    browser.storage.local.set({
+        disableMaps: !enable.checked,
+        mapsFrontend: frontend.value,
+    })
+})
+
 utils.processDefaultCustomInstances('maps', 'facil', 'normal', document);

src/pages/options/widgets/maps.pug

@@ -4,7 +4,7 @@ section#maps_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-osm(type="checkbox")
+        input#maps-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_frontend__") Frontend
@@ -18,6 +18,6 @@ section#maps_page.option-block
             include ../../widgets/instances.pug
             +instances('https://facilmap.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('facilmap')
 
     script(type="module" src="./widgets/maps.js")

src/pages/options/widgets/medium.js

@@ -1,34 +1,12 @@
-import mediumHelper from "../../../assets/javascripts/medium.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disable = document.getElementById("disable-medium");
-let protocol = document.getElementById("protocol")
-
-browser.storage.local.get(
-    [
-        "disableMedium",
-        "mediumProtocol"
-    ],
-    r => {
-        disable.checked = !r.disableMedium;
-        protocol.value = r.mediumProtocol;
-        changeProtocolSettings();
-    }
-)
-utils.processDefaultCustomInstances('medium', 'scribe', 'normal', document);
-utils.processDefaultCustomInstances('medium', 'scribe', 'tor', document);
-
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableMedium: !disable.checked,
-        mediumProtocol: protocol.value,
-    })
-    changeProtocolSettings();
-})
+const enable = document.getElementById("medium-enable");
+const protocol = document.getElementById("medium-protocol")
+const medium = document.getElementById('medium_page');
 
 function changeProtocolSettings() {
-    let normalDiv = document.getElementsByClassName("normal")[0];
-    let torDiv = document.getElementsByClassName("tor")[0];
+    const normalDiv = document.getElementsByClassName("normal")[0];
+    const torDiv = document.getElementsByClassName("tor")[0];
     if (protocol.value == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';
@@ -39,4 +17,26 @@ function changeProtocolSettings() {
     }
 }
 
+medium.addEventListener("change", () => {
+    changeProtocolSettings();
+    browser.storage.local.set({
+        disableMedium: !enable.checked,
+        mediumProtocol: protocol.value,
+    })
+})
+
+browser.storage.local.get(
+    [
+        "disableMedium",
+        "mediumProtocol"
+    ],
+    r => {
+        enable.checked = !r.disableMedium;
+        protocol.value = r.mediumProtocol;
+        changeProtocolSettings();
+    }
+)
+
+utils.processDefaultCustomInstances('medium', 'scribe', 'normal', document);
+utils.processDefaultCustomInstances('medium', 'scribe', 'tor', document);
 utils.latency('medium', 'scribe', document, location)

src/pages/options/widgets/medium.pug

@@ -4,11 +4,11 @@ section#medium_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-medium(type="checkbox")
+        input#medium-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#medium-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 
@@ -18,7 +18,7 @@ section#medium_page.option-block
             include ../../widgets/instances.pug
             +instances('https://scribe.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('scribe')
         .tor
             include ../../widgets/instances.pug
             +instances('https://scribe.onion')

src/pages/options/widgets/peertube.js

@@ -1,33 +1,12 @@
-import peertubeHelper from "../../../assets/javascripts/peertube.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disable = document.getElementById("disable-peertube");
-let protocol = document.getElementById("protocol")
-browser.storage.local.get(
-    [
-        "disablePeertubeTargets",
-        "peertubeTargetsProtocol"
-    ],
-    r => {
-        disable.checked = !r.disablePeertubeTargets;
-        protocol.value = r.peertubeTargetsProtocol;
-        changeProtocolSettings();
-    }
-)
-utils.processDefaultCustomInstances('peertube', 'simpleertube', 'normal', document);
-utils.processDefaultCustomInstances('peertube', 'simpleertube', 'tor', document);
-
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disablePeertubeTargets: !disable.checked,
-        peertubeTargetsProtocol: protocol.value
-    })
-    changeProtocolSettings();
-})
+const enable = document.getElementById("peertube-enable");
+const protocol = document.getElementById("peertube-protocol");
+const peertube = document.getElementById('peertube_page');
 
 function changeProtocolSettings() {
-    const normalDiv = document.getElementsByClassName("normal")[0];
-    const torDiv = document.getElementsByClassName("tor")[0];
+    const normalDiv = peertube.getElementsByClassName("normal")[0];
+    const torDiv = peertube.getElementsByClassName("tor")[0];
     if (protocol.value == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';
@@ -37,4 +16,27 @@ function changeProtocolSettings() {
         torDiv.style.display = 'block';
     }
 }
+
+browser.storage.local.get(
+    [
+        "disablePeertubeTargets",
+        "peertubeTargetsProtocol"
+    ],
+    r => {
+        enable.checked = !r.disablePeertubeTargets;
+        protocol.value = r.peertubeTargetsProtocol;
+        changeProtocolSettings();
+    }
+)
+
+peertube.addEventListener("change", () => {
+    changeProtocolSettings();
+    browser.storage.local.set({
+        disablePeertubeTargets: !enable.checked,
+        peertubeTargetsProtocol: protocol.value
+    })
+})
+
+utils.processDefaultCustomInstances('peertube', 'simpleertube', 'normal', document);
+utils.processDefaultCustomInstances('peertube', 'simpleertube', 'tor', document);
 utils.latency('peertube', 'simpleertube', document, location)

src/pages/options/widgets/peertube.pug

@@ -4,11 +4,11 @@ section#peertube_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-peertube(type="checkbox")
+        input#peertube-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#peertube-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 
@@ -18,7 +18,7 @@ section#peertube_page.option-block
             include ../../widgets/instances.pug
             +instances('https://simpleertube.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('simpleertube')
         .tor
             include ../../widgets/instances.pug
             +instances('https://simpleertube.onion')

src/pages/options/widgets/reddit.js

@@ -1,45 +1,18 @@
-import redditHelper from "../../../assets/javascripts/reddit.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let libredditDivElement = document.getElementById("libreddit")
-let tedditDivElement = document.getElementById("teddit")
+const libredditDivElement = document.getElementById("libreddit")
+const tedditDivElement = document.getElementById("teddit")
 
-let disableRedditElement = document.getElementById("disable-reddit");
-let frontend = document.getElementById("reddit-frontend");
-let protocol = document.getElementById("protocol")
-
-document.addEventListener("change", () => {
-    browser.storage.local.set({
-        disableReddit: !disableRedditElement.checked,
-        redditProtocol: protocol.value,
-        redditFrontend: frontend.value,
-    });
-    changeFrontendsSettings();
-    changeProtocolSettings();
-})
-
-const libredditForm = libredditDivElement.getElementsByTagName('form')[0];
-const libredditCookies = libredditForm.getElementsByTagName('input')[0];
-libredditForm.addEventListener('submit', async event => {
-    event.preventDefault();
-    const url = new URL(libredditCookies.value);
-    redditHelper.initLibredditCookies(url);
-});
-
-const tedditForm = tedditDivElement.getElementsByTagName('form')[0];
-const tedditCookies = tedditForm.getElementsByTagName('input')[0];
-tedditForm.addEventListener('submit', async event => {
-    event.preventDefault();
-    const url = new URL(tedditCookies.value);
-    redditHelper.initTedditCookies(url);
-});
+const enable = document.getElementById("reddit-enable");
+const frontend = document.getElementById("reddit-frontend");
+const protocol = document.getElementById("reddit-protocol");
+const reddit = document.getElementById('reddit_page');
 
 function changeProtocolSettings() {
-    let normalLibredditDiv = libredditDivElement.getElementsByClassName("normal")[0];
-    let torLibredditDiv = libredditDivElement.getElementsByClassName("tor")[0];
-
-    let normalTedditDiv = tedditDivElement.getElementsByClassName("normal")[0];
-    let torTedditDiv = tedditDivElement.getElementsByClassName("tor")[0];
+    const normalLibredditDiv = libredditDivElement.getElementsByClassName("normal")[0];
+    const torLibredditDiv = libredditDivElement.getElementsByClassName("tor")[0];
+    const normalTedditDiv = tedditDivElement.getElementsByClassName("normal")[0];
+    const torTedditDiv = tedditDivElement.getElementsByClassName("tor")[0];
     if (protocol.value == 'normal') {
         normalLibredditDiv.style.display = 'block';
         normalTedditDiv.style.display = 'block';
@@ -53,6 +26,7 @@ function changeProtocolSettings() {
         torLibredditDiv.style.display = 'block';
     }
 }
+
 function changeFrontendsSettings() {
     if (frontend.value == 'libreddit') {
         libredditDivElement.style.display = 'block';
@@ -69,11 +43,9 @@ browser.storage.local.get(
         "disableReddit",
         "redditProtocol",
         "redditFrontend",
-
-        "enableLibredditCustomSettings",
     ],
     r => {
-        disableRedditElement.checked = !r.disableReddit
+        enable.checked = !r.disableReddit
         protocol.value = r.redditProtocol
         frontend.value = r.redditFrontend
         changeFrontendsSettings();
@@ -81,6 +53,16 @@ browser.storage.local.get(
     }
 )
 
+reddit.addEventListener("change", () => {
+    browser.storage.local.set({
+        disableReddit: !enable.checked,
+        redditProtocol: protocol.value,
+        redditFrontend: frontend.value,
+    });
+    changeFrontendsSettings();
+    changeProtocolSettings();
+})
+
 utils.processDefaultCustomInstances('reddit', 'libreddit', 'normal', document);
 utils.processDefaultCustomInstances('reddit', 'libreddit', 'tor', document);
 utils.processDefaultCustomInstances('reddit', 'teddit', 'normal', document);

src/pages/options/widgets/reddit.pug

@@ -4,7 +4,7 @@ section#reddit_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-reddit(type="checkbox")
+        input#reddit-enable(type="checkbox")
 
     .some-block.option-block
         h4#frontend(data-localise="__MSG_frontend__") Frontend
@@ -14,7 +14,7 @@ section#reddit_page.option-block
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#reddit-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 

src/pages/options/widgets/search.js

@@ -1,55 +1,15 @@
-import searchHelper from "../../../assets/javascripts/search.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let searxDiv = document.getElementById("searx");
-let searxngDiv = document.getElementById("searxng");
-let whoogleDiv = document.getElementById("whoogle");
+const searxDiv = document.getElementById("searx");
+const searxngDiv = document.getElementById("searxng");
+const whoogleDiv = document.getElementById("whoogle");
 
-let disable = document.getElementById("disable-search");
-let frontend = document.getElementById("search-frontend");
-let protocol = document.getElementById("protocol")
+const enable = document.getElementById("search-enable");
+const frontend = document.getElementById("search-frontend");
+const protocol = document.getElementById("search-protocol");
 
-const searxngForm = searxngDiv.getElementsByTagName('form')[0];
-const searxngCookies = searxngForm.getElementsByTagName('input')[0];
-searxngForm.addEventListener('submit', async event => {
-  event.preventDefault();
-  const url = new URL(searxngCookies.value);
-  searchHelper.initSearxngCookies(url);
-});
+const search = document.getElementById('search_page');
 
-const searxForm = searxDiv.getElementsByTagName('form')[0];
-const searxCookies = searxForm.getElementsByTagName('input')[0];
-searxForm.addEventListener('submit', async event => {
-  event.preventDefault();
-  const url = new URL(searxCookies.value);
-  searchHelper.initSearxCookies(url);
-});
-
-browser.storage.local.get(
-  [
-    "disableSearch",
-    "searchFrontend",
-    "searchProtocol",
-  ],
-  r => {
-    disable.checked = !r.disableSearch;
-    frontend.value = r.searchFrontend;
-    protocol.value = r.searchProtocol;
-
-    changeFrontendsSettings();
-    changeProtocolSettings();
-  }
-);
-
-document.addEventListener("change", async () => {
-  await browser.storage.local.set({
-    disableSearch: !disable.checked,
-    searchFrontend: frontend.value,
-    searchProtocol: protocol.value,
-  });
-  changeFrontendsSettings(frontend.value);
-  changeProtocolSettings(protocol.value);
-})
 
 function changeFrontendsSettings() {
   let SearxWhoogleElement = document.getElementById("searx-whoogle");
@@ -74,17 +34,17 @@ function changeFrontendsSettings() {
 }
 
 function changeProtocolSettings() {
-  let normalsearxDiv = searxDiv.getElementsByClassName("normal")[0];
-  let torsearxDiv = searxDiv.getElementsByClassName("tor")[0];
-  let i2psearxDiv = searxDiv.getElementsByClassName("i2p")[0];
+  const normalsearxDiv = searxDiv.getElementsByClassName("normal")[0];
+  const torsearxDiv = searxDiv.getElementsByClassName("tor")[0];
+  const i2psearxDiv = searxDiv.getElementsByClassName("i2p")[0];
 
-  let normalsearxngDiv = searxngDiv.getElementsByClassName("normal")[0];
-  let torsearxngDiv = searxngDiv.getElementsByClassName("tor")[0];
-  let i2psearxngDiv = searxngDiv.getElementsByClassName("i2p")[0];
+  const normalsearxngDiv = searxngDiv.getElementsByClassName("normal")[0];
+  const torsearxngDiv = searxngDiv.getElementsByClassName("tor")[0];
+  const i2psearxngDiv = searxngDiv.getElementsByClassName("i2p")[0];
 
-  let normalwhoogleDiv = whoogleDiv.getElementsByClassName("normal")[0];
-  let torwhoogleDiv = whoogleDiv.getElementsByClassName("tor")[0];
-  let i2pwhoogleDiv = whoogleDiv.getElementsByClassName("i2p")[0];
+  const normalwhoogleDiv = whoogleDiv.getElementsByClassName("normal")[0];
+  const torwhoogleDiv = whoogleDiv.getElementsByClassName("tor")[0];
+  const i2pwhoogleDiv = whoogleDiv.getElementsByClassName("i2p")[0];
 
   if (protocol.value == 'normal') {
     normalsearxDiv.style.display = 'block';
@@ -127,6 +87,32 @@ function changeProtocolSettings() {
   }
 }
 
+browser.storage.local.get(
+  [
+    "disableSearch",
+    "searchFrontend",
+    "searchProtocol",
+  ],
+  r => {
+    enable.checked = !r.disableSearch;
+    frontend.value = r.searchFrontend;
+    protocol.value = r.searchProtocol;
+
+    changeFrontendsSettings();
+    changeProtocolSettings();
+  }
+);
+
+search.addEventListener("change", () => {
+  browser.storage.local.set({
+    disableSearch: !enable.checked,
+    searchFrontend: frontend.value,
+    searchProtocol: protocol.value,
+  });
+  changeFrontendsSettings(frontend.value);
+  changeProtocolSettings(protocol.value);
+})
+
 utils.processDefaultCustomInstances('search', 'searx', 'normal', document);
 utils.processDefaultCustomInstances('search', 'searx', 'tor', document);
 utils.processDefaultCustomInstances('search', 'searx', 'i2p', document);

src/pages/options/widgets/search.pug

@@ -5,7 +5,7 @@ section#search_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-search(type="checkbox")
+        input#search-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_frontend__") Frontend
@@ -14,11 +14,10 @@ section#search_page.option-block
             option(value="searx") SearX
             option(value="whoogle") Whoogle
 
-
     #searx-whoogle
         .some-block.option-block
             h4(data-localise="__MSG_protocol__") Protocol
-            select#protocol
+            select#search-protocol
                 option(value="normal" data-localise="__MSG_normal__") Normal
                 option(value="tor" data-localise="__MSG_tor__") Tor
                 option(value="i2p" data-localise="__MSG_i2p__") I2P

src/pages/options/widgets/sendTargets.js

@@ -1,32 +1,12 @@
-import sendTargetsHelper from "../../../assets/javascripts/sendTargets.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disable = document.getElementById("disable-sendTargets");
-let protocol = document.getElementById("protocol")
-
-browser.storage.local.get(
-    [
-        "disableSendTarget",
-        "sendTargetsProtocol",
-    ],
-    r => {
-        disable.checked = !r.disableSendTarget;
-        protocol.value = r.sendTargetsProtocol;
-        changeProtocolSettings();
-    }
-)
-
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableSendTarget: !disable.checked,
-        sendTargetsProtocol: protocol.value,
-    })
-    changeProtocolSettings();
-})
+const enable = document.getElementById("sendTargets-enable");
+const protocol = document.getElementById("sendTargets-protocol")
+const sendTargets = document.getElementById('sendTargets_page');
 
 function changeProtocolSettings() {
-    let normalDiv = document.getElementsByClassName("normal")[0];
-    let torDiv = document.getElementsByClassName("tor")[0];
+    let normalDiv = sendTargets.getElementsByClassName("normal")[0];
+    let torDiv = sendTargets.getElementsByClassName("tor")[0];
     if (protocol.value == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';
@@ -37,6 +17,26 @@ function changeProtocolSettings() {
     }
 }
 
+browser.storage.local.get(
+    [
+        "disableSendTarget",
+        "sendTargetsProtocol",
+    ],
+    r => {
+        enable.checked = !r.disableSendTarget;
+        protocol.value = r.sendTargetsProtocol;
+        changeProtocolSettings();
+    }
+)
+
+sendTargets.addEventListener("change", () => {
+    changeProtocolSettings();
+    browser.storage.local.set({
+        disableSendTarget: !enable.checked,
+        sendTargetsProtocol: protocol.value,
+    })
+})
+
 utils.processDefaultCustomInstances('sendTargets', 'send', 'normal', document);
 utils.processDefaultCustomInstances('sendTargets', 'send', 'tor', document);
 

src/pages/options/widgets/sendTargets.pug

@@ -4,11 +4,11 @@ section#sendTargets_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-sendTargets(type="checkbox")
+        input#sendTargets-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#sendTargets-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 
@@ -18,7 +18,7 @@ section#sendTargets_page.option-block
             include ../../widgets/instances.pug
             +instances('https://send.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('send')
         .tor
             include ../../widgets/instances.pug
             +instances('https://send.onion')

src/pages/options/widgets/tiktok.js

@@ -1,12 +1,25 @@
-import tiktokHelper from "../../../assets/javascripts/tiktok.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disable = document.getElementById("disable-tiktok");
-let protocol = document.getElementById("protocol")
+const enable = document.getElementById("tiktok-enable");
+const protocol = document.getElementById("tiktok-protocol")
+const tiktok = document.getElementById('tiktok_page');
 
-document.addEventListener("change", () => {
+function changeProtocolSettings() {
+    let normalDiv = tiktok.getElementsByClassName("normal")[0];
+    let torDiv = tiktok.getElementsByClassName("tor")[0];
+    if (protocol.value == 'normal') {
+        normalDiv.style.display = 'block';
+        torDiv.style.display = 'none';
+    }
+    else if (protocol.value == 'tor') {
+        normalDiv.style.display = 'none';
+        torDiv.style.display = 'block';
+    }
+}
+
+tiktok.addEventListener("change", () => {
     browser.storage.local.set({
-        disableTiktok: !disable.checked,
+        disableTiktok: !enable.checked,
         tiktokProtocol: protocol.value,
     });
     changeProtocolSettings();
@@ -18,7 +31,7 @@ browser.storage.local.get(
         "tiktokProtocol",
     ],
     r => {
-        disable.checked = !r.disableTiktok;
+        enable.checked = !r.disableTiktok;
         protocol.value = r.tiktokProtocol;
         changeProtocolSettings();
         let normalDiv = document.getElementsByClassName("normal")[0];
@@ -34,19 +47,6 @@ browser.storage.local.get(
     }
 )
 
-function changeProtocolSettings() {
-    let normalDiv = document.getElementsByClassName("normal")[0];
-    let torDiv = document.getElementsByClassName("tor")[0];
-    if (protocol.value == 'normal') {
-        normalDiv.style.display = 'block';
-        torDiv.style.display = 'none';
-    }
-    else if (protocol.value == 'tor') {
-        normalDiv.style.display = 'none';
-        torDiv.style.display = 'block';
-    }
-}
-
 utils.processDefaultCustomInstances('tiktok', 'proxiTok', 'normal', document);
 utils.processDefaultCustomInstances('tiktok', 'proxiTok', 'tor', document);
 

src/pages/options/widgets/tiktok.pug

@@ -4,11 +4,11 @@ section#tiktok_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-tiktok(type="checkbox")
+        input#tiktok-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#tiktok-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
     
@@ -18,7 +18,7 @@ section#tiktok_page.option-block
             include ../../widgets/instances.pug
             +instances('https://proxitok.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('proxiTok')
         .tor
             include ../../widgets/instances.pug
             +instances('https://proxitok.onion')

src/pages/options/widgets/translate.js

@@ -1,12 +1,12 @@
-import translateHelper from "../../../assets/javascripts/translate/translate.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disable = document.getElementById("disable-simplyTranslate");
-let simplyTranslateDiv = document.getElementById("simplyTranslate");
-let lingvaDiv = document.getElementById("lingva");
-let frontend = document.getElementById("translate-frontend");
-let protocol = document.getElementById("protocol");
+const enable = document.getElementById("translate-enable");
+const frontend = document.getElementById("translate-frontend");
+const protocol = document.getElementById("translate-protocol");
+const simplyTranslateDiv = document.getElementById("simplyTranslate");
+const lingvaDiv = document.getElementById("lingva");
 
+const translate = document.getElementById('translate_page');
 
 function changeFrontendsSettings() {
     if (frontend.value == 'simplyTranslate') {
@@ -20,11 +20,11 @@ function changeFrontendsSettings() {
 }
 
 function changeProtocolSettings() {
-    let normalSimplyTranslateDiv = document.getElementById("simplyTranslate").getElementsByClassName("normal")[0];
-    let torSimplyTranslateDiv = document.getElementById("simplyTranslate").getElementsByClassName("tor")[0];
+    const normalSimplyTranslateDiv = document.getElementById("simplyTranslate").getElementsByClassName("normal")[0];
+    const torSimplyTranslateDiv = document.getElementById("simplyTranslate").getElementsByClassName("tor")[0];
 
-    let normalLingvaDiv = document.getElementById("lingva").getElementsByClassName("normal")[0];
-    let torLingvaDiv = document.getElementById("lingva").getElementsByClassName("tor")[0];
+    const normalLingvaDiv = document.getElementById("lingva").getElementsByClassName("normal")[0];
+    const torLingvaDiv = document.getElementById("lingva").getElementsByClassName("tor")[0];
 
     if (protocol.value == 'normal') {
         normalSimplyTranslateDiv.style.display = 'block';
@@ -47,7 +47,7 @@ browser.storage.local.get(
         "translateProtocol",
     ],
     r => {
-        disable.checked = !r.translateDisable;
+        enable.checked = !r.translateDisable;
         frontend.value = r.translateFrontend;
         protocol.value = r.translateProtocol;
         changeFrontendsSettings();
@@ -55,9 +55,9 @@ browser.storage.local.get(
     }
 );
 
-document.addEventListener("change", () => {
+translate.addEventListener("change", () => {
     browser.storage.local.set({
-        translateDisable: !disable.checked,
+        translateDisable: !enable.checked,
         translateFrontend: frontend.value,
         translateProtocol: protocol.value,
     })

src/pages/options/widgets/translate.pug

@@ -4,7 +4,7 @@ section#translate_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-simplyTranslate(type="checkbox")
+        input#translate-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_frontend__") Frontend
@@ -14,7 +14,7 @@ section#translate_page.option-block
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#translate-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 

src/pages/options/widgets/twitter.js

@@ -1,42 +1,12 @@
-import twitterHelper from "../../../assets/javascripts/twitter.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disable = document.getElementById("disable-nitter");
-let protocol = document.getElementById("protocol");
-
-let nitterDiv = document.getElementById('nitter');
-
-const nitterForm = nitterDiv.getElementsByTagName('form')[0];
-const nitterCookies = nitterForm.getElementsByTagName('input')[0];
-nitterForm.addEventListener('submit', event => {
-  event.preventDefault();
-  const url = new URL(nitterCookies.value);
-  twitterHelper.initNitterCookies(url);
-});
-
-browser.storage.local.get(
-    [
-        "disableTwitter",
-        "twitterProtocol",
-    ],
-    r => {
-        disable.checked = !r.disableTwitter;
-        protocol.value = r.twitterProtocol;
-        changeProtocolSettings();
-    }
-)
-
-document.addEventListener("change", () => {
-    browser.storage.local.set({
-        disableTwitter: !disable.checked,
-        twitterProtocol: protocol.value,
-    });
-    changeProtocolSettings();
-})
+const enable = document.getElementById("twitter-enable");
+const protocol = document.getElementById("twitter-protocol");
+const twitter = document.getElementById('twitter_page');
 
 function changeProtocolSettings() {
-    let normalDiv = nitterDiv.getElementsByClassName("normal")[0];
-    let torDiv = nitterDiv.getElementsByClassName("tor")[0];
+    let normalDiv = twitter.getElementsByClassName("normal")[0];
+    let torDiv = twitter.getElementsByClassName("tor")[0];
     if (protocol.value == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';
@@ -47,7 +17,27 @@ function changeProtocolSettings() {
     }
 }
 
+browser.storage.local.get(
+    [
+        "disableTwitter",
+        "twitterProtocol",
+    ],
+    r => {
+        enable.checked = !r.disableTwitter;
+        protocol.value = r.twitterProtocol;
+        changeProtocolSettings();
+    }
+)
+
+twitter.addEventListener("change", () => {
+    browser.storage.local.set({
+        disableTwitter: !enable.checked,
+        twitterProtocol: protocol.value,
+    });
+    changeProtocolSettings();
+})
+
 utils.processDefaultCustomInstances('twitter', 'nitter', 'normal', document);
 utils.processDefaultCustomInstances('twitter', 'nitter', 'tor', document)
 
-utils.latency('twitter', 'nitter', document, location)
+utils.latency('twitter', 'nitter', document, location, true)

src/pages/options/widgets/twitter.pug

@@ -4,11 +4,11 @@ section#twitter_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-nitter(type="checkbox")
+        input#twitter-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#twitter-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
 
@@ -18,9 +18,8 @@ section#twitter_page.option-block
             include ../../widgets/instances.pug
             +instances('https://nitter.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('nitter')
         .tor
-            include ../../widgets/instances.pug
             +instances('https://nitter.onion')
 
     script(type="module" src="./widgets/twitter.js")

src/pages/options/widgets/wikipedia.js

@@ -1,33 +1,13 @@
-import wikipediaHelper from "../../../assets/javascripts/wikipedia.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disableWikipediaElement = document.getElementById("disable-wikipedia");
-let protocolElement = document.getElementById("protocol");
-
-browser.storage.local.get(
-    [
-        "disableWikipedia",
-        "wikipediaProtocol",
-    ],
-    r => {
-        disableWikipediaElement.checked = !r.disableWikipedia;
-        protocolElement.value = r.wikipediaProtocol;
-        changeProtocolSettings(r.wikipediaProtocol);
-    }
-)
-
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableWikipedia: !disableWikipediaElement.checked,
-        wikipediaProtocol: protocolElement.value,
-    })
-    changeProtocolSettings(protocolElement.value)
-})
+const enable = document.getElementById("wikipedia-enable");
+const protocolElement = document.getElementById("wikipedia-protocol");
+const wikipedia = document.getElementById('wikipedia_page');
 
 function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementsByClassName("normal")[0];
-    let torDiv = document.getElementsByClassName("tor")[0];
-    let i2pDiv = document.getElementsByClassName("i2p")[0];
+    const normalDiv = wikipedia.getElementsByClassName("normal")[0];
+    const torDiv = wikipedia.getElementsByClassName("tor")[0];
+    const i2pDiv = wikipedia.getElementsByClassName("i2p")[0];
     if (protocol == 'normal') {
         normalDiv.style.display = 'block';
         torDiv.style.display = 'none';
@@ -44,6 +24,27 @@ function changeProtocolSettings(protocol) {
         i2pDiv.style.display = 'block';
     }
 }
+
+browser.storage.local.get(
+    [
+        "disableWikipedia",
+        "wikipediaProtocol",
+    ],
+    r => {
+        enable.checked = !r.disableWikipedia;
+        protocolElement.value = r.wikipediaProtocol;
+        changeProtocolSettings(r.wikipediaProtocol);
+    }
+)
+
+wikipedia.addEventListener("change", () => {
+    browser.storage.local.set({
+        disableWikipedia: !enable.checked,
+        wikipediaProtocol: protocolElement.value,
+    })
+    changeProtocolSettings(protocolElement.value)
+})
+
 utils.processDefaultCustomInstances('wikipedia', 'wikiless', 'normal', document);
 utils.processDefaultCustomInstances('wikipedia', 'wikiless', 'tor', document);
 utils.processDefaultCustomInstances('wikipedia', 'wikiless', 'i2p', document);

src/pages/options/widgets/wikipedia.pug

@@ -4,11 +4,11 @@ section#wikipedia_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-wikipedia(type="checkbox")
+        input#wikipedia-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_protocol__") Protocol
-        select#protocol
+        select#wikipedia-protocol
             option(value="normal" data-localise="__MSG_normal__") Normal
             option(value="tor" data-localise="__MSG_tor__") Tor
             option(value="i2p" data-localise="__MSG_i2p__") I2P
@@ -19,7 +19,7 @@ section#wikipedia_page.option-block
             include ../../widgets/instances.pug
             +instances('https://wikiless.com')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('wikiless')
         .tor
             include ../../widgets/instances.pug
             +instances('https://wikiless.onion')
@@ -29,4 +29,3 @@ section#wikipedia_page.option-block
             +instances('https://wikiless.i2p')
 
     script(type="module" src="./widgets/wikipedia.js")
-    

src/pages/options/widgets/youtube.js

@@ -1,38 +1,38 @@
 import youtubeHelper from "../../../assets/javascripts/youtube/youtube.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disableYoutube = document.getElementById("disable-invidious");
-let youtubeFrontend = document.getElementById("youtube-frontend");
-let invidiousDiv = document.getElementById("invidious");
-let pipedDiv = document.getElementById("piped");
-let pipedMaterialDiv = document.getElementById("pipedMaterial");
-let freetubeYatteeDiv = document.getElementById("freetube-yatte");
-let youtubeEmbedFrontend = document.getElementById("youtube-embed-frontend");
-let onlyEmbeddedVideo = document.getElementById("only-embed");
-let protoco = document.getElementById("protocol");
+const enable = document.getElementById("youtube-enable");
+const frontend = document.getElementById("youtube-frontend");
+const youtubeEmbedFrontend = document.getElementById("youtube-embed_frontend");
+const onlyEmbeddedVideo = document.getElementById("youtube-redirect_type");
+const protocol = document.getElementById("youtube-protocol");
+const youtube = document.getElementById('youtube_page');
+
+const invidiousDiv = document.getElementById("invidious");
+const pipedDiv = document.getElementById("piped");
+const pipedMaterialDiv = document.getElementById("pipedMaterial");
+const freetubeYatteeDiv = document.getElementById("freetube-yatte");
 
 function changeFrontendsSettings() {
-    let frontend = youtubeFrontend.value;
-
-    if (frontend == 'invidious') {
+    if (frontend.value == 'invidious') {
         invidiousDiv.style.display = 'block';
         pipedDiv.style.display = 'none';
         pipedMaterialDiv.style.display = 'none';
         freetubeYatteeDiv.style.display = 'none';
     }
-    else if (frontend == 'piped') {
+    else if (frontend.value == 'piped') {
         invidiousDiv.style.display = 'none';
         pipedDiv.style.display = 'block';
         pipedMaterialDiv.style.display = 'none';
         freetubeYatteeDiv.style.display = 'none';
     }
-    else if (frontend == 'pipedMaterial') {
+    else if (frontend.value == 'pipedMaterial') {
         invidiousDiv.style.display = 'none';
         pipedDiv.style.display = 'none';
         pipedMaterialDiv.style.display = 'block';
         freetubeYatteeDiv.style.display = 'none';
     }
-    else if (frontend == 'freetube' || frontend == 'yatte') {
+    else if (frontend.value == 'freetube' || frontend.value == 'yatte') {
         invidiousDiv.style.display = 'none';
         pipedDiv.style.display = 'none';
         pipedMaterialDiv.style.display = 'none';
@@ -74,7 +74,7 @@ function changeProtocolSettings() {
     const normalInvidiousDiv = document.getElementById('invidious').getElementsByClassName("normal")[0];
     const torInvidiousDiv = document.getElementById('invidious').getElementsByClassName("tor")[0];
 
-    if (protoco.value == 'normal') {
+    if (protocol.value == 'normal') {
         normalInvidiousDiv.style.display = 'block';
         torInvidiousDiv.style.display = 'none';
 
@@ -84,7 +84,7 @@ function changeProtocolSettings() {
         normalPipedMaterialDiv.style.display = 'block';
         torPipedMaterialDiv.style.display = 'none';
     }
-    else if (protoco.value == 'tor') {
+    else if (protocol.value == 'tor') {
         normalInvidiousDiv.style.display = 'none';
         torInvidiousDiv.style.display = 'block';
 
@@ -96,13 +96,13 @@ function changeProtocolSettings() {
     }
 }
 
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableYoutube: !disableYoutube.checked,
-        youtubeFrontend: youtubeFrontend.value,
+youtube.addEventListener("change", () => {
+    browser.storage.local.set({
+        disableYoutube: !enable.checked,
+        youtubeFrontend: frontend.value,
         youtubeEmbedFrontend: youtubeEmbedFrontend.value,
         onlyEmbeddedVideo: onlyEmbeddedVideo.value,
-        youtubeProtocol: protoco.value,
+        youtubeProtocol: protocol.value,
     })
     changeProtocolSettings();
     changeYoutubeEmbedFrontendsSettings();
@@ -120,35 +120,19 @@ browser.storage.local.get(
         "youtubeProtocol",
     ],
     r => {
-        disableYoutube.checked = !r.disableYoutube;
+        enable.checked = !r.disableYoutube;
         onlyEmbeddedVideo.value = r.onlyEmbeddedVideo;
-        youtubeFrontend.value = r.youtubeFrontend;
-        protoco.value = r.youtubeProtocol;
+        frontend.value = r.youtubeFrontend;
+        protocol.value = r.youtubeProtocol;
 
         changeFrontendsSettings();
         changeProtocolSettings();
 
         youtubeEmbedFrontend.value = youtubeEmbedFrontend.value
-        if (r.youtubeFrontend == "freetube" || r.youtubeFrontend == "yatte") changeYoutubeEmbedFrontendsSettings()
+        if (r.frontend == "freetube" || r.frontend == "yatte") changeYoutubeEmbedFrontendsSettings()
     }
 );
 
-const invidiousForm = invidiousDiv.getElementsByTagName('form')[0];
-const invidiousCookies = invidiousForm.getElementsByTagName('input')[0];
-invidiousForm.addEventListener('submit', async event => {
-    event.preventDefault();
-    const url = new URL(invidiousCookies.value);
-    youtubeHelper.initInvidiousCookies(url);
-});
-
-// const pipedForm = pipedDiv.getElementsByTagName('form')[0];
-// const pipedCookies = pipedForm.getElementsByTagName('input')[0];
-// pipedForm.addEventListener('submit', async event => {
-//     event.preventDefault();
-//     const url = new URL(pipedCookies.value);
-//     youtubeHelper.applyPipedLocalStorage(url);
-// });
-
 utils.processDefaultCustomInstances('youtube', 'invidious', 'normal', document);
 utils.processDefaultCustomInstances('youtube', 'invidious', 'tor', document);
 utils.processDefaultCustomInstances('youtube', 'pipedMaterial', 'normal', document);

src/pages/options/widgets/youtube.pug

@@ -4,7 +4,7 @@ section#youtube_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-invidious(type="checkbox")
+        input#youtube-enable(type="checkbox")
 
     .some-block.option-block
         h4(data-localise="__MSG_frontend__") Frontend
@@ -18,7 +18,7 @@ section#youtube_page.option-block
     #freetube-yatte
         .some-block.option-block
             h4(data-localise="__MSG_embeddedVids__") Embedded Videos Frontend
-            select#youtube-embed-frontend
+            select#youtube-embed_frontend
                 option(value="invidious") Invidious
                 option(value="piped") Piped
                 option(value="pipedMaterial") Piped-Material
@@ -27,13 +27,13 @@ section#youtube_page.option-block
     #invidious-piped-pipedMaterial
         .some-block.option-block
             h4(data-localise="__MSG_protocol__") Protocol
-            select#protocol
+            select#youtube-protocol
                 option(value="normal" data-localise="__MSG_normal__") Normal
                 option(value="tor" data-localise="__MSG_tor__") Tor
 
         .some-block.option-block
             h4(data-localise="__MSG_redirectType__") Redirect Type
-            select#only-embed
+            select#youtube-redirect_type
                 option(value="both" data-localise="__MSG_both__") both
                 option(value="onlyEmbedded" data-localise="__MSG_onlyEmbedded__") Only Embedded
                 option(value="onlyNotEmbedded" data-localise="__MSG_onlyNotEmbedded__") Only Not Embedded
@@ -46,27 +46,22 @@ section#youtube_page.option-block
             include ../../widgets/latency.pug
             +latency('invidious')
         .tor
-            include ../../widgets/instances.pug
             +instances('https://invidious.onion')
 
     #piped
         hr
         .normal
-            include ../../widgets/instances.pug
             +instances('https://piped.com')
             +latency('piped')
         .tor
-            include ../../widgets/instances.pug
             +instances('https://piped.onion')
 
     #pipedMaterial
         hr
         .normal
-            include ../../widgets/instances.pug
             +instances('https://piped-material.com')
             +latency('pipedMaterial')
         .tor
-            include ../../widgets/instances.pug
             +instances('https://piped-material.onion')
 
 

src/pages/options/widgets/youtubeMusic.js

@@ -1,23 +1,23 @@
-import youtubeMusicHelper from "../../../assets/javascripts/youtubeMusic.js";
 import utils from "../../../assets/javascripts/utils.js";
 
-let disableYoutubeMusicElement = document.getElementById("disable-beatbump");
+let enable = document.getElementById("youtubeMusic-enable");
+const youtubeMusic = document.getElementById('youtubeMusic_page');
 
 browser.storage.local.get(
     [
         "disableYoutubeMusic",
     ],
     r => {
-        disableYoutubeMusicElement.checked = !r.disableYoutubeMusic;
+        enable.checked = !r.disableYoutubeMusic;
     }
 );
 
-document.addEventListener("change", async () => {
-    await browser.storage.local.set({
-        disableYoutubeMusic: !disableYoutubeMusicElement.checked,
+youtubeMusic.addEventListener("change", () => {
+    browser.storage.local.set({
+        disableYoutubeMusic: !enable.checked,
     })
 })
 
 utils.processDefaultCustomInstances('youtubeMusic', 'beatbump', 'normal', document);
 
-utils.latency('youtubeMusic', 'beatbump', document, location)
+utils.latency('youtubeMusic', 'beatbump', document, location, true)

src/pages/options/widgets/youtubeMusic.pug

@@ -4,7 +4,7 @@ section#youtubeMusic_page.option-block
     hr
     .some-block.option-block
         h4(data-localise="__MSG_enable__") Enable
-        input#disable-beatbump(type="checkbox")
+        input#youtubeMusic-enable(type="checkbox")
 
     #beatbump
         hr
@@ -12,6 +12,6 @@ section#youtubeMusic_page.option-block
             include ../../widgets/instances.pug
             +instances('https://beatbump.wewe')
             include ../../widgets/latency.pug
-            +latency()
+            +latency('beatbump')
 
     script(type="module" src="./widgets/youtubeMusic.js")

src/pages/widgets/latency.pug

@@ -5,9 +5,10 @@ mixin latency(service)
     else
         - latencyVal = `latency`
 
-    label.button.button-inline(id=`${latencyVal}-label` for=latencyVal) 
-        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")
-        | 
-        x(data-localise="__MSG_testInstancesLatency__") Test Instances Latency
-    input.button.button-inline(id=latencyVal style="display:none;")
+    .buttons.buttons-inline
+        label.button.button-inline(id=`${latencyVal}-label` for=latencyVal) 
+            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")
+            | 
+            x(data-localise="__MSG_testInstancesLatency__") Test Instances Latency
+        input.button.button-inline(id=latencyVal style="display:none;")