non-breaking optimizations to search and librex support

3 files changed, 214 insertions, 36 deletions

diff --git a/src/pages/options/index.html b/src/pages/options/index.html
index 241a20e7..80c2a039 100644
--- a/src/pages/options/index.html
+++ b/src/pages/options/index.html
@@ -1502,20 +1502,19 @@
             <option value="searxng">SearXNG</option>
             <option value="searx">SearX</option>
             <option value="whoogle">Whoogle</option>
+            <option value="librex">LibreX</option>
           </select>
         </div>
-        <div id="searx-whoogle">
-          <div class="some-block option-block">
-            <h4 data-localise="__MSG_protocol__">Protocol</h4>
-            <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>
-            </select>
-          </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_protocol__">Protocol</h4>
+          <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>
+          </select>
         </div>
         <div class="some-block">
-          <h4 data-localise="__MSG_searchNote__">Note: To use Search to its full potential, make LibRedirect as the Default Search Engine</h4>
+          <h4 data-localise="__MSG_searchNote__">Note: To use Search, make LibRedirect the Default Search Engine</h4>
         </div>
         <div id="searx">
           <hr>
@@ -1560,7 +1559,7 @@
                         </div>
                         <form class="custom-instance-form">
                           <div class="some-block option-block">
-                            <input class="custom-instance" placeholder="https://searx.onion" type="url">
+                            <input class="custom-instance" placeholder="http://searx.onion" type="url">
                             <button class="add add-instance" type="submit">
                               <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
                                 <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
@@ -1581,7 +1580,7 @@
                         </div>
                         <form class="custom-instance-form">
                           <div class="some-block option-block">
-                            <input class="custom-instance" placeholder="https://searx.i2p" type="url">
+                            <input class="custom-instance" placeholder="http://searx.i2p" type="url">
                             <button class="add add-instance" type="submit">
                               <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
                                 <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
@@ -1635,7 +1634,7 @@
                         </div>
                         <form class="custom-instance-form">
                           <div class="some-block option-block">
-                            <input class="custom-instance" placeholder="https://searxng.onion" type="url">
+                            <input class="custom-instance" placeholder="http://searxng.onion" type="url">
                             <button class="add add-instance" type="submit">
                               <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
                                 <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
@@ -1656,7 +1655,7 @@
                         </div>
                         <form class="custom-instance-form">
                           <div class="some-block option-block">
-                            <input class="custom-instance" placeholder="https://searxng.i2p" type="url">
+                            <input class="custom-instance" placeholder="http://searxng.i2p" type="url">
                             <button class="add add-instance" type="submit">
                               <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
                                 <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
@@ -1710,7 +1709,82 @@
                         </div>
                         <form class="custom-instance-form">
                           <div class="some-block option-block">
-                            <input class="custom-instance" placeholder="https://whoogle.onion" type="url">
+                            <input class="custom-instance" placeholder="http://whoogle.onion" type="url">
+                            <button class="add add-instance" type="submit">
+                              <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+                              </svg>
+                            </button>
+                          </div>
+                        </form>
+                        <div class="checklist custom-checklist"></div>
+          </div>
+          <div class="i2p">
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+                        </div>
+                        <div class="checklist"></div>
+                        <hr>
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+                        </div>
+                        <form class="custom-instance-form">
+                          <div class="some-block option-block">
+                            <input class="custom-instance" placeholder="http://whoogle.i2p" type="url">
+                            <button class="add add-instance" type="submit">
+                              <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+                              </svg>
+                            </button>
+                          </div>
+                        </form>
+                        <div class="checklist custom-checklist"></div>
+          </div>
+        </div>
+        <div id="librex">
+          <hr>
+          <div class="normal">
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+                        </div>
+                        <div class="checklist"></div>
+                        <hr>
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+                        </div>
+                        <form class="custom-instance-form">
+                          <div class="some-block option-block">
+                            <input class="custom-instance" placeholder="https://librex.com" type="url">
+                            <button class="add add-instance" type="submit">
+                              <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
+                              </svg>
+                            </button>
+                          </div>
+                        </form>
+                        <div class="checklist custom-checklist"></div>
+                        <div class="buttons buttons-inline">
+                          <label class="button button-inline" id="latency-librex-label" for="latency-librex"> 
+                            <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-librex" style="display:none;">
+                        </div>
+          </div>
+          <div class="tor">
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+                        </div>
+                        <div class="checklist"></div>
+                        <hr>
+                        <div class="some-block option-block">
+                          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+                        </div>
+                        <form class="custom-instance-form">
+                          <div class="some-block option-block">
+                            <input class="custom-instance" placeholder="http://librex.onion" type="url">
                             <button class="add add-instance" type="submit">
                               <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
                                 <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
@@ -1731,7 +1805,7 @@
                         </div>
                         <form class="custom-instance-form">
                           <div class="some-block option-block">
-                            <input class="custom-instance" placeholder="https://whoogle.i2p" type="url">
+                            <input class="custom-instance" placeholder="http://librex.i2p" type="url">
                             <button class="add add-instance" type="submit">
                               <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
                                 <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
diff --git a/src/pages/options/widgets/search.js b/src/pages/options/widgets/search.js
index 62b8bd78..0af37343 100644
--- a/src/pages/options/widgets/search.js
+++ b/src/pages/options/widgets/search.js
@@ -1,8 +1,39 @@
 import utils from "../../../assets/javascripts/utils.js";
 
+// GOAL: to never mention frontends/protocls outside these two arrays, so that adding a new frontend/protocol is as easy as adding it here.
+// This may be expanded across the whole project, where almost everything becomes a template, and the frontend/protocol parts just become a JSON file.
+
+// ONCE FINISHED: add librex and see if it works
+const frontends = new Array("searx", "searxng", "whoogle", "librex") // Add librex once /javascripts/search.js is made agnostic
+const protocols = new Array("normal", "tor", "i2p")
+//let frontendProtocols = (frontends.length)
+
+// I will leave comments of my privious attemps so that people can learn from my mistakes. :)
+
+/*
+for (let i = 0; i < frontends.length; i++) {
+  this.frontends[i] = frontends[i].getElementsByClassName(protocol)
+}
+*/
+    // There was a class here, but I deleted a bit of it
+    /*
+    this.searxDiv = searxDiv.getElementsByClassName(protocol)[0];
+    this.searxngDiv = searxngDiv.getElementsByClassName(protocol)[0];
+    this.librexDiv = librexDiv.getElementsByClassName(protocol)[0];
+    */
+
+/*
+  * Here I was trying to solve the issue by making a 2D array, but I later realised I was overcomplicating things
+for (var i = 0; i < frontends.length; i++) {
+  frontendProtocols[i] = new Array(protocols.length)
+}
+*/
+
+/*
 const searxDiv = document.getElementById("searx");
 const searxngDiv = document.getElementById("searxng");
 const whoogleDiv = document.getElementById("whoogle");
+*/
 
 const enable = document.getElementById("search-enable");
 const frontend = document.getElementById("search-frontend");
@@ -12,28 +43,69 @@ const search = document.getElementById('search_page');
 
 
 function changeFrontendsSettings() {
-  let SearxWhoogleElement = document.getElementById("searx-whoogle");
+  for (let i = 0; i < frontends.length; i++) {
+    const frontendDiv = document.getElementById(frontends[i])
+    if (frontends[i] == frontend.value) {
+      frontendDiv.style.display = 'block'
+    } else {
+      frontendDiv.style.display = 'none'
+    }
+  }
+
+
+  /*
   if (frontend.value == 'searx') {
     searxDiv.style.display = 'block';
     searxngDiv.style.display = 'none';
     whoogleDiv.style.display = 'none';
-    SearxWhoogleElement.style.display = 'block';
+    librexDiv.style.display = 'none';
   }
   else if (frontend.value == 'searxng') {
     searxDiv.style.display = 'none';
     searxngDiv.style.display = 'block';
     whoogleDiv.style.display = 'none';
-    SearxWhoogleElement.style.display = 'block';
+    librexDiv.style.display = 'none';
   }
   else if (frontend.value == 'whoogle') {
     searxDiv.style.display = 'none';
     searxngDiv.style.display = 'none';
     whoogleDiv.style.display = 'block';
-    SearxWhoogleElement.style.display = 'block';
+    librexDiv.style.display = 'none';
   }
+  else if (frontend.value == 'librex') {
+    searxDiv.style.display = 'none';
+    searxDiv.style.display = 'none';
+    searxngDiv.style.display = 'none';
+    librexDiv.style.display = 'block';
+  }
+  */
 }
 
+
+
 function changeProtocolSettings() {
+
+
+  for (let i = 0; i < frontends.length; i++) {
+    const frontendDiv = document.getElementById(frontends[i])
+    if (frontends[i] == frontend.value) {       // Here we are checking if the frontend matches the current one. This skips the protocol checking for that frontend, speeding things up.
+      for (let x = 0; x < protocols.length; x++) {
+        const protocolDiv = frontendDiv.getElementsByClassName(protocols[x])[0]
+        if (protocols[x] == protocol.value) { //if the frontend value equals the selected one, it will show. Otherwise, it will be hidden
+          protocolDiv.style.display = 'block'
+        } else {
+          protocolDiv.style.display = 'none'
+        }
+      }
+    } else {
+      continue
+    }
+  }
+
+
+
+/*
+    * "Legacy" code
   const normalsearxDiv = searxDiv.getElementsByClassName("normal")[0];
   const torsearxDiv = searxDiv.getElementsByClassName("tor")[0];
   const i2psearxDiv = searxDiv.getElementsByClassName("i2p")[0];
@@ -42,10 +114,18 @@ function changeProtocolSettings() {
   const torsearxngDiv = searxngDiv.getElementsByClassName("tor")[0];
   const i2psearxngDiv = searxngDiv.getElementsByClassName("i2p")[0];
 
-  const normalwhoogleDiv = whoogleDiv.getElementsByClassName("normal")[0];
   const torwhoogleDiv = whoogleDiv.getElementsByClassName("tor")[0];
   const i2pwhoogleDiv = whoogleDiv.getElementsByClassName("i2p")[0];
+  const normalwhoogleDiv = whoogleDiv.getElementsByClassName("normal")[0];
+
+  
+  function protocolDisplay(proto) {
+    proto.searxngDiv = 'block'
+  }
 
+  protocolDisplay(protocol.value)
+  
+  
   if (protocol.value == 'normal') {
     normalsearxDiv.style.display = 'block';
     normalsearxngDiv.style.display = 'block';
@@ -85,6 +165,7 @@ function changeProtocolSettings() {
     i2psearxngDiv.style.display = 'block';
     i2pwhoogleDiv.style.display = 'block';
   }
+  */
 }
 
 browser.storage.local.get(
@@ -103,6 +184,13 @@ browser.storage.local.get(
   }
 );
 
+for (let i = 0; i < frontends.length; i++) {
+  for (let x = 0; x < protocols.length; x++){
+    utils.processDefaultCustomInstances('search', frontends[i], protocols[x], document)
+  }
+  utils.latency('search', frontends[i], document, location, true)
+}
+
 search.addEventListener("change", () => {
   browser.storage.local.set({
     disableSearch: !enable.checked,
@@ -113,6 +201,8 @@ search.addEventListener("change", () => {
   changeProtocolSettings(protocol.value);
 })
 
+/*
+  * more "legacy" code
 utils.processDefaultCustomInstances('search', 'searx', 'normal', document);
 utils.processDefaultCustomInstances('search', 'searx', 'tor', document);
 utils.processDefaultCustomInstances('search', 'searx', 'i2p', document);
@@ -126,3 +216,4 @@ utils.processDefaultCustomInstances('search', 'whoogle', 'i2p', document);
 utils.latency('search', 'searx', document, location, true)
 utils.latency('search', 'searxng', document, location, true)
 utils.latency('search', 'whoogle', document, location, true)
+*/
diff --git a/src/pages/options/widgets/search.pug b/src/pages/options/widgets/search.pug
index 7e16e74f..ec075f79 100644
--- a/src/pages/options/widgets/search.pug
+++ b/src/pages/options/widgets/search.pug
@@ -13,17 +13,17 @@ section#search_page.option-block
             option(value="searxng") SearXNG
             option(value="searx") SearX
             option(value="whoogle") Whoogle
+            option(value="librex") LibreX
 
-    #searx-whoogle
-        .some-block.option-block
-            h4(data-localise="__MSG_protocol__") 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
+    .some-block.option-block
+        h4(data-localise="__MSG_protocol__") 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
 
     .some-block
-        h4(data-localise="__MSG_searchNote__") Note: To use Search to its full potential, make LibRedirect as the Default Search Engine
+        h4(data-localise="__MSG_searchNote__") Note: To use Search, make LibRedirect the Default Search Engine
 
     #searx
         hr
@@ -34,10 +34,10 @@ section#search_page.option-block
             +latency('searx')
         .tor
             include ../../widgets/instances.pug
-            +instances('https://searx.onion')
+            +instances('http://searx.onion')
         .i2p
             include ../../widgets/instances.pug
-            +instances('https://searx.i2p')
+            +instances('http://searx.i2p')
 
     #searxng
         hr
@@ -47,10 +47,10 @@ section#search_page.option-block
             +latency('searxng')
         .tor
             include ../../widgets/instances.pug
-            +instances('https://searxng.onion')
+            +instances('http://searxng.onion')
         .i2p
             include ../../widgets/instances.pug
-            +instances('https://searxng.i2p')
+            +instances('http://searxng.i2p')
 
     #whoogle
         hr
@@ -60,9 +60,22 @@ section#search_page.option-block
             +latency('whoogle')
         .tor
             include ../../widgets/instances.pug
-            +instances('https://whoogle.onion')
+            +instances('http://whoogle.onion')
+        .i2p
+            include ../../widgets/instances.pug
+            +instances('http://whoogle.i2p')
+
+    #librex
+        hr
+        .normal
+            include ../../widgets/instances.pug
+            +instances('https://librex.com')
+            +latency('librex')
+        .tor
+            include ../../widgets/instances.pug
+            +instances('http://librex.onion')
         .i2p
             include ../../widgets/instances.pug
-            +instances('https://whoogle.i2p')
+            +instances('http://librex.i2p')
 
-    script(type="module" src="./widgets/search.js")
\ No newline at end of file
+    script(type="module" src="./widgets/search.js")