100% compat with widgets/<service>.js

1 files changed, 113 insertions, 21 deletions

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