10 files changed, 178 insertions, 52 deletions
diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index f48b31a9..741e9116 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -164,7 +164,7 @@ browser.storage.sync.get(
     disableNitter = result.disableNitter;
     nitterRandomPool =
       result.nitterRandomPool
-        ? result.nitterRandomPool.split(",")
+        ? result.nitterRandomPool
         : commonHelper.filterInstances(nitterInstances);
 
 
@@ -172,7 +172,7 @@ browser.storage.sync.get(
     disableBibliogram = result.disableBibliogram;
     bibliogramRandomPool =
       result.bibliogramRandomPool
-        ? result.bibliogramRandomPool.split(",")
+        ? result.bibliogramRandomPool
         : commonHelper.filterInstances(bibliogramInstances);
 
 
@@ -180,7 +180,7 @@ browser.storage.sync.get(
     disableScribe = result.disableScribe;
     scribeRandomPool =
       result.scribeRandomPool
-        ? result.scribeRandomPool.split(",")
+        ? result.scribeRandomPool
         : commonHelper.filterInstances(scribeInstances);
   }
 );
diff --git a/src/pages/options/instagram.js b/src/pages/options/instagram.js
index 29e80ee9..7d2864e1 100644
--- a/src/pages/options/instagram.js
+++ b/src/pages/options/instagram.js
@@ -8,6 +8,9 @@ const bibliogramInstances = instagramHelper.redirects;
 let bibliogramInstanceElement = document.getElementById("bibliogram-instance");
 let disableBibliogramElement = document.getElementById("disable-bibliogram");
 let bibliogramRandomPoolElement = document.getElementById("bibliogram-random-pool");
+let bibliogramRandomPoolListElement = document.getElementById("bibliogram-random-pool-list");
+
+let bibliogramRandomPool;
 
 browser.storage.sync.get(
     [
@@ -18,7 +21,11 @@ browser.storage.sync.get(
     (result) => {
         bibliogramInstanceElement.value = result.bibliogramInstance || "";
         disableBibliogramElement.checked = !result.disableBibliogram;
-        bibliogramRandomPoolElement.value = result.bibliogramRandomPool || commonHelper.filterInstances(bibliogramInstances);
+
+
+        bibliogramRandomPool = result.bibliogramRandomPool || commonHelper.filterInstances(bibliogramInstances)
+        bibliogramRandomPoolElement.value = bibliogramRandomPool.join("\n");
+        commonHelper.updateListElement(bibliogramRandomPoolListElement, bibliogramRandomPool);
         let id = "bibliogram-instance";
         let instances = bibliogramRandomPoolElement.value.split(',')
         shared.autocompletes.push({ id: id, instances: instances })
@@ -36,6 +43,7 @@ disableBibliogramElement.addEventListener("change", (event) => {
 });
 
 bibliogramRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
-    browser.storage.sync.set({ bibliogramRandomPool: bibliogramRandomPoolElement.value });
-}, 500));
-
+    bibliogramRandomPool = commonHelper.filterList(bibliogramRandomPoolElement.value.split("\n"))
+    commonHelper.updateListElement(bibliogramRandomPoolListElement, bibliogramRandomPool);
+    browser.storage.sync.set({ bibliogramRandomPool: bibliogramRandomPool });
+}, 50));
\ No newline at end of file
diff --git a/src/pages/options/medium.js b/src/pages/options/medium.js
index cd00c1a2..6fbc390d 100644
--- a/src/pages/options/medium.js
+++ b/src/pages/options/medium.js
@@ -7,6 +7,9 @@ const scribeInstances = mediumHelper.redirects;
 let scribeInstanceElement = document.getElementById("scribe-instance");
 let disableScribeElement = document.getElementById("disable-scribe");
 let scribeRandomPoolElement = document.getElementById("scribe-random-pool");
+let scribeRandomPoolListElement = document.getElementById('scribe-random-pool-list');
+
+let scribeRandomPool;
 
 browser.storage.sync.get(
     [
@@ -17,9 +20,13 @@ browser.storage.sync.get(
     (result) => {
         scribeInstanceElement.value = result.scribeInstance || "";
         disableScribeElement.checked = !result.disableScribe;
-        scribeRandomPoolElement.value = (result.scribeRandomPool || commonHelper.filterInstances(scribeInstances)).join("\n");
+        
+        scribeRandomPool = result.scribeRandomPool || commonHelper.filterInstances(scribeInstances)
+        scribeRandomPoolElement.value = scribeRandomPool.join("\n");
+        commonHelper.updateListElement(scribeRandomPoolListElement, scribeRandomPool);
+        
         let id = "scribe-instance";
-        let instances = scribeRandomPoolElement.value.split(',')
+        let instances = scribeRandomPoolElement.value.split('\n')
         shared.autocompletes.push({ id: id, instances: instances })
         shared.autocomplete(document.getElementById(id), instances);
     }
@@ -40,7 +47,7 @@ scribeInstanceElement.addEventListener("input", commonHelper.debounce(() => {
 }, 500));
 
 scribeRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
-    browser.storage.sync.set({
-        scribeRandomPool: scribeRandomPoolElement.value.split('\n')
-    });
-}, 500));
\ No newline at end of file
+    scribeRandomPool = commonHelper.filterList(scribeRandomPoolElement.value.split("\n"))
+    commonHelper.updateListElement(scribeRandomPoolListElement, scribeRandomPool);
+    browser.storage.sync.set({ scribeRandomPool: scribeRandomPool });
+}, 50));
\ No newline at end of file
diff --git a/src/pages/options/options.html b/src/pages/options/options.html
index c4a9c187..04903e7f 100644
--- a/src/pages/options/options.html
+++ b/src/pages/options/options.html
@@ -102,7 +102,10 @@
 
       <section class="settings-block">
         <h4>Random Instance Pool</h4>
-        <textarea type="textarea" id="invidious-random-pool" name="invidious-random-pool" type="text"></textarea>
+        <div class="random-pool">
+          <textarea type="textarea" id="invidious-random-pool" name="invidious-random-pool" type="text"></textarea>
+          <ul id="invidious-random-pool-list"></ul>
+        </div>
       </section>
 
       <div class="some-block option-block">
@@ -183,16 +186,17 @@
       </div>
 
       <section class="settings-block">
-        <h4>Random instance pool (comma-separated)</h4>
-        <textarea id="nitter-random-pool" name="nitter-random-pool" type="text"></textarea>
+        <h4>Random instance pool</h4>
+        <div class="random-pool">
+          <textarea id="nitter-random-pool" type="text"></textarea>
+          <ul id="nitter-random-pool-list"></ul>
+        </div>
       </section>
       <div class="some-block option-block">
         <h4 data-localise="__MSG_removeTwitterSW__">Proactively remove Twitter service worker</h4>
         <input id="remove-twitter-sw" type="checkbox" checked />
       </div>
 
-
-
     </section>
 
     <section class="instagram">
@@ -209,8 +213,11 @@
       </div>
 
       <section class="settings-block">
-        <h4>Random instance pool (comma-separated)</h4>
-        <textarea id="bibliogram-random-pool" name="bibliogram-random-pool" type="text"></textarea>
+        <h4>Random instance pool</h4>
+        <div class="random-pool">
+          <textarea id="bibliogram-random-pool" name="bibliogram-random-pool" type="text"></textarea>
+          <ul id="bibliogram-random-pool-list"></ul>
+        </div>
       </section>
 
 
@@ -230,11 +237,6 @@
         </div>
       </div>
 
-      <section class="settings-block">
-        <h4>Random instance pool (comma-separated)</h4>
-        <textarea id="reddit-random-pool" name="reddit-random-pool" type="text"></textarea>
-      </section>
-
       <div class="some-block option-block">
         <h4>Frontend</h4>
         <select id="reddit-frontend">
@@ -243,6 +245,22 @@
         </select>
       </div>
 
+      <section class="settings-block">
+        <h4>LibReddit Random instance pool</h4>
+        <div class="random-pool">
+          <textarea id="libreddit-random-pool" type="text"></textarea>
+          <ul id="libreddit-random-pool-list"></ul>
+        </div>
+      </section>
+
+      <section class="settings-block">
+        <h4>Teddit Random instance pool</h4>
+        <div class="random-pool">
+          <textarea id="teddit-random-pool" type="text"></textarea>
+          <ul id="teddit-random-pool-list"></ul>
+        </div>
+      </section>
+
     </section>
 
     <section class="search">
@@ -305,7 +323,10 @@
 
       <section class="settings-block">
         <h4>Random instance pool</h4>
-        <textarea id="wikiless-random-pool" type="text"></textarea>
+        <div class="random-pool">
+          <textarea id="wikiless-random-pool" type="text"></textarea>
+          <ul id="wikiless-random-pool-list"></ul>
+        </div>
       </section>
 
     </section>
@@ -325,7 +346,10 @@
       </div>
       <section class="settings-block">
         <h4>Random instance pool (comma-separated)</h4>
-        <textarea id="scribe-random-pool" type="text"></textarea>
+        <div class="random-pool">
+          <textarea id="scribe-random-pool" type="text"></textarea>
+          <ul id="scribe-random-pool-list"></ul>
+        </div>
       </section>
     </section>
 
diff --git a/src/pages/options/options.js b/src/pages/options/options.js
index 6d4c7ba1..5d6aed4e 100644
--- a/src/pages/options/options.js
+++ b/src/pages/options/options.js
@@ -42,7 +42,6 @@ browser.storage.sync.get(
     exceptions = result.exceptions || [];
     exceptions.forEach(prependExceptionsItem);
     shared.autocompletes.forEach((value) => {
-
     });
   }
 );
diff --git a/src/pages/options/reddit.js b/src/pages/options/reddit.js
index affc7a88..59307096 100644
--- a/src/pages/options/reddit.js
+++ b/src/pages/options/reddit.js
@@ -9,16 +9,36 @@ let redditInstanceElement = document.getElementById("reddit-instance");
 let disableRedditElement = document.getElementById("disable-reddit");
 let redditFrontendElement = document.getElementById("reddit-frontend");
 
+let libredditRandomPoolElement = document.getElementById("libreddit-random-pool");
+let libredditRandomPoolListElement = document.getElementById("libreddit-random-pool-list");
+
+let tedditRandomPoolElement = document.getElementById("teddit-random-pool");
+let tedditRandomPoolListElement = document.getElementById("teddit-random-pool-list");
+
+let libredditRandomPool
+let tedditRandomPool
+
 browser.storage.sync.get(
     [
         "redditInstance",
         "disableReddit",
-        "redditFrontend"
+        "redditFrontend",
+        "libredditRandomPool",
+        "tedditRandomPool"
     ],
     (result) => {
         redditInstanceElement.value = result.redditInstance || "";
         disableRedditElement.checked = !result.disableReddit;
         redditFrontendElement.value = result.redditFrontend;
+
+        libredditRandomPool = result.libredditRandomPool || commonHelper.filterInstances(redditInstances.libreddit)
+        libredditRandomPoolElement.value = libredditRandomPool.join("\n");
+        commonHelper.updateListElement(libredditRandomPoolListElement, libredditRandomPool);
+
+        tedditRandomPool = result.tedditRandomPool || commonHelper.filterInstances(redditInstances.teddit)
+        tedditRandomPoolElement.value = tedditRandomPool.join("\n");
+        commonHelper.updateListElement(tedditRandomPoolListElement, tedditRandomPool);
+
         let id = "reddit-instance";
         let instances = redditInstances;
         shared.autocompletes.push({ id: id, instances: instances })
@@ -40,6 +60,18 @@ disableRedditElement.addEventListener("change", (event) => {
 
 redditFrontendElement.addEventListener("change", (event) => {
     const value = event.target.options[redditFrontendElement.selectedIndex].value;
-    console.info("Reddit Frontend", value)
+    console.info("Reddit Frontend:", value)
     browser.storage.sync.set({ redditFrontend: value })
-})
\ No newline at end of file
+});
+
+libredditRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
+    libredditRandomPool = commonHelper.filterList(libredditRandomPoolElement.value.split("\n"))
+    commonHelper.updateListElement(libredditRandomPoolListElement, libredditRandomPool);
+    browser.storage.sync.set({ libredditRandomPool: libredditRandomPool });
+}, 50));
+
+tedditRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
+    tedditRandomPool = commonHelper.filterList(tedditRandomPoolElement.value.split("\n"))
+    commonHelper.updateListElement(tedditRandomPoolListElement, tedditRandomPool);
+    browser.storage.sync.set({ tedditRandomPool: tedditRandomPool });
+}, 50));
\ No newline at end of file
diff --git a/src/pages/options/twitter.js b/src/pages/options/twitter.js
index 1f6be4e1..3e9b2a4a 100644
--- a/src/pages/options/twitter.js
+++ b/src/pages/options/twitter.js
@@ -5,9 +5,12 @@ import shared from "./shared.js";
 const nitterInstances = twitterHelper.redirects;
 
 let nitterInstanceElement = document.getElementById("nitter-instance");
+let removeTwitterSWElement = document.getElementById("remove-twitter-sw");
 let disableNitterElement = document.getElementById("disable-nitter");
 let nitterRandomPoolElement = document.getElementById("nitter-random-pool");
-let removeTwitterSWElement = document.getElementById("remove-twitter-sw");
+let nitterRandomPoolListElement = document.getElementById('nitter-random-pool-list');
+
+let nitterRandomPool
 
 browser.storage.sync.get(
     [
@@ -19,10 +22,14 @@ browser.storage.sync.get(
     (result) => {
         nitterInstanceElement.value = result.nitterInstance || "";
         disableNitterElement.checked = !result.disableNitter;
-        nitterRandomPoolElement.value = result.nitterRandomPool || commonHelper.filterInstances(nitterInstances);
         removeTwitterSWElement.checked = !result.removeTwitterSW;
+        
+        nitterRandomPool = result.nitterRandomPool || commonHelper.filterInstances(nitterInstances)
+        nitterRandomPoolElement.value = nitterRandomPool.join("\n");
+        commonHelper.updateListElement(nitterRandomPoolListElement, nitterRandomPool);
+        
         let id = "nitter-instance"
-        let instances = nitterRandomPoolElement.value.split(',')
+        let instances = nitterRandomPool
         shared.autocompletes.push({ id: id, instances: instances })
         shared.autocomplete(document.getElementById(id), instances);
     }
@@ -45,5 +52,7 @@ removeTwitterSWElement.addEventListener("change", (event) => {
 });
 
 nitterRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
-    browser.storage.sync.set({ nitterRandomPool: nitterRandomPoolElement.value });
-}, 500));
+    nitterRandomPool = commonHelper.filterList(nitterRandomPoolElement.value.split("\n"))
+    commonHelper.updateListElement(nitterRandomPoolListElement, nitterRandomPool);
+    browser.storage.sync.set({ nitterRandomPool: nitterRandomPool });
+}, 50));
diff --git a/src/pages/options/wikipedia.js b/src/pages/options/wikipedia.js
index f7ff15fa..243c918e 100644
--- a/src/pages/options/wikipedia.js
+++ b/src/pages/options/wikipedia.js
@@ -8,6 +8,9 @@ const wikilessInstances = wikipediaHelper.redirects;
 let wikipediaInstanceElement = document.getElementById("wikipedia-instance");
 let disableWikipediaElement = document.getElementById("disable-wikipedia");
 let wikilessRandomPoolElement = document.getElementById("wikiless-random-pool");
+let wikilessRandomPoolListElement = document.getElementById('wikiless-random-pool-list');
+
+let wikilessRandomPool
 
 browser.storage.sync.get(
     [
@@ -18,7 +21,11 @@ browser.storage.sync.get(
     (result) => {
         wikipediaInstanceElement.value = result.wikipediaInstance || "";
         disableWikipediaElement.checked = !result.disableWikipedia;
-        wikilessRandomPoolElement.value = (result.wikilessRandomPool || commonHelper.filterInstances(wikilessInstances)).join("\n")
+
+        wikilessRandomPool = result.wikilessRandomPool || commonHelper.filterInstances(wikilessInstances)
+        wikilessRandomPoolElement.value = wikilessRandomPool.join("\n")
+        commonHelper.updateListElement(wikilessRandomPoolListElement, wikilessRandomPool);
+
         let id = "wikipedia-instance";
         let instances = wikilessInstances;
         shared.autocompletes.push({ id: id, instances: instances })
@@ -38,7 +45,9 @@ disableWikipediaElement.addEventListener("change", (event) => {
     browser.storage.sync.set({ disableWikipedia: !event.target.checked });
 });
 
-browser.storage.onChanged.addListener((changes) => {
-    if ("wikilessRandomPool" in changes)
-        wikilessRandomPoolElement.value = changes.wikilessRandomPool.newValue.join("\n");
-})
\ No newline at end of file
+wikilessRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
+    wikilessRandomPool = commonHelper.filterList(wikilessRandomPoolElement.value.split("\n"))
+    commonHelper.updateListElement(wikilessRandomPoolListElement, wikilessRandomPool);
+    browser.storage.sync.set({ wikilessRandomPool: wikilessRandomPool });
+}, 50));
+
diff --git a/src/pages/options/youtube.js b/src/pages/options/youtube.js
index d581064d..60b31afa 100644
--- a/src/pages/options/youtube.js
+++ b/src/pages/options/youtube.js
@@ -13,11 +13,14 @@ let invidiousPlayerStyleElement = document.getElementById("invidious-player-styl
 let invidiousSubtitlesElement = document.getElementById("invidious-subtitles");
 let invidiousAutoplayElement = document.getElementById("invidious-autoplay");
 let invidiousRandomPoolElement = document.getElementById("invidious-random-pool");
+let invidiousRandomPoolListElement = document.getElementById('invidious-random-pool-list');
 let useFreeTubeElement = document.getElementById("use-freetube");
 let alwaysProxyElement = document.getElementById("always-proxy");
 let onlyEmbeddedVideoElement = document.getElementById("only-embed");
 let videoQualityElement = document.getElementById("video-quality");
 
+let invidiousRandomPool;
+
 browser.storage.sync.get(
     [
         "invidiousInstance",
@@ -43,14 +46,18 @@ browser.storage.sync.get(
         document.querySelector("#volume-value").textContent = result.invidiousVolume ? `${result.invidiousVolume}%` : " - ";
         invidiousPlayerStyleElement.value = result.invidiousPlayerStyle || "";
         invidiousSubtitlesElement.value = result.invidiousSubtitles || "";
-        invidiousAutoplayElement.checked = result.invidiousAutoplay;
-        invidiousRandomPoolElement.value = (result.invidiousRandomPool || commonHelper.filterInstances(invidiousInstances)).join("\n");
         useFreeTubeElement.checked = result.useFreeTube;
         onlyEmbeddedVideoElement.checked = result.onlyEmbeddedVideo;
         alwaysProxyElement.checked = result.alwaysProxy;
         videoQualityElement.value = result.videoQuality || "";
+        invidiousAutoplayElement.checked = result.invidiousAutoplay;
+
+        invidiousRandomPool = result.invidiousRandomPool || commonHelper.filterInstances(invidiousInstances)
+        invidiousRandomPoolElement.value = invidiousRandomPool.join("\n");
+        commonHelper.updateListElement(invidiousRandomPoolListElement, invidiousRandomPool);
+
         let id = "invidious-instance"
-        let instances = invidiousRandomPoolElement.value.split('\n');
+        let instances = invidiousRandomPool;
         shared.autocompletes.push({ id: id, instances: instances });
         shared.autocomplete(document.getElementById(id), instances);
     }
@@ -100,10 +107,11 @@ invidiousAutoplayElement.addEventListener("change", (event) => {
     browser.storage.sync.set({ invidiousAutoplay: event.target.checked });
 });
 
-invidiousRandomPool.addEventListener("input",
-    commonHelper.debounce(() => {
-        browser.storage.sync.set({ invidiousRandomPool: invidiousRandomPool.value.split("\n") });
-    }, 500)
+invidiousRandomPoolElement.addEventListener("input", commonHelper.debounce(() => {
+    invidiousRandomPool = commonHelper.filterList(invidiousRandomPoolElement.value.split("\n"))
+    commonHelper.updateListElement(invidiousRandomPoolListElement, invidiousRandomPool);
+    browser.storage.sync.set({ invidiousRandomPool: invidiousRandomPool });
+}, 50)
 );
 
 useFreeTubeElement.addEventListener("change", (event) => {
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
index aeca8009..22c4b17b 100644
--- a/src/pages/stylesheets/styles.css
+++ b/src/pages/stylesheets/styles.css
@@ -162,6 +162,7 @@ ul {
 }
 
 li {
+  white-space: nowrap;
   border-bottom: solid 0.5px var(--bg-secondary);
   padding: 20px 0px 20px 20px;
 }
@@ -311,10 +312,13 @@ body.light-theme {
   --bg-secondary: #fff;
 }
 
-textarea {
-  resize: vertical;
-  width: 100%;
-  height: 200px;
+body.light-theme textarea {
+  color: black;
+  border: 1px solid #767676;
+}
+
+body.light-theme textarea:focus {
+  outline: none;
 }
 
 
@@ -496,6 +500,32 @@ div.option {
     "translate  medium   wikipedia"
 }
 
+div.random-pool {
+  display: flex;
+  align-items: stretch;
+}
+
+div.random-pool ul {
+  list-style: disc;
+  margin: 0 20px;
+}
+
+div.random-pool li {
+  border: none;
+  padding: 10px 0;
+  font-size: 15px;
+  line-height: 1px;
+}
+
+textarea {
+  line-height: 21px;
+  background-color: var(--bg-secondary);
+  color: white;
+  border: none;
+  resize: none;
+  width: 100%;
+}
+
 @media (max-width: 1590px) {
   div.option {
     max-width: 1200px;