Reorganized pug files. Added Unify settings to libreddit #234

pug/options/reddit/reddit.pug

@@ -1,128 +0,0 @@
-doctype html
-html(lang="en")
-    include ../../widgets/head.pug
-        title General
-script(type="module" src="../../../assets/javascripts/localise.js")
-body.option(dir="auto")
-    include ../../widgets/links.pug
-    +links('reddit')
-
-    section.option-block
-        .some-block.option-block
-            h4(data-localise="__MSG_enable__") Enable
-            input#disable-reddit(type="checkbox")
-
-        .some-block.option-block
-            h4#frontend(data-localise="__MSG_frontend__") Frontend
-            select#reddit-frontend
-                option(value="libreddit") Libreddit
-                option(value="teddit") Teddit
-
-        .some-block.option-block
-            h4(data-localise="__MSG_protocol__") Protocol
-            select#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_bypassReddit__") Bypass "Open in Reddit"
-            input#bypass-watch-on-reddit(type="checkbox")
-
-        #libreddit
-            .some-block.option-block
-                h4(data-localise="__MSG_enableCustomSettings__") Enable Custom Settings (will use cookies)
-                input#enable-libreddit-custom-settings(type="checkbox")
-            hr
-            .custom-settings 
-                .some-block.option-block
-                    h2 Appearance
-                .some-block.option-block
-                    h4(data-localise="__MSG_theme__") Theme
-                    select.theme
-                        option(value="system" ) System
-                        option(value="light" ) Light
-                        option(value="dark" ) Dark
-                        option(value="black" ) Black
-                        option(value="dracula" ) Dracula
-                        option(value="nord" ) Nord
-                        option(value="laserwave" ) Laserwave
-                        option(value="violet" ) Violet
-                        option(value="gold" ) Gold
-
-                .some-block.option-block
-                    h2 Interface
-                .some-block.option-block
-                    h4(data-localise="__MSG_frontPage__") Front page
-                    select.front_page
-                        option(value="default") Default
-                        option(value="popular") Popular
-                        option(value="all") All
-
-                .some-block.option-block
-                    h4(data-localise="__MSG_frontLayout__") Front Layout
-                    select.layout
-                        option(value="card") Card
-                        option(value="clean") Clean
-                        option(value="compact") Compact
-
-                .some-block.option-block
-                    h4(data-localise="__MSG_wideUI__") Wide UI
-                    input.wide(type="checkbox")
-
-                .some-block.option-block
-                    h2 Content
-                .some-block.option-block
-                    h4(data-localise="__MSG_defaultSubredditPostSort__") Default subreddit post sort
-                    select.post_sort
-                        option(value="hot") Hot
-                        option(value="new") New
-                        option(value="top") Top
-                        option(value="rising") Rising
-                        option(value="controversial") Controversial
-                
-                .some-block.option-block
-                    h4(data-localise="__MSG_defaultCommentSort__") Default comment sort
-                    select.comment_sort
-                        option(value="confidence") Confidence
-                        option(value="top") Top
-                        option(value="new") New
-                        option(value="controversial") Controversial
-                        option(value="old") Old
-
-                .some-block.option-block
-                    h4(data-localise="__MSG_showNsfwPosts__") Show NSFW posts
-                    input.show_nsfw(type="checkbox")
-
-                .some-block.option-block
-                    h4(data-localise="__MSG_autoplayVideos__") Autoplay videos
-                    input.autoplay_videos(type="checkbox")
-
-                .some-block.option-block
-                    h4(data-localise="__MSG_useHlsForVideos__") Use HLS for videos
-                    input.use_hls(type="checkbox")
-
-                .some-block.option-block
-                    h4(data-localise="__MSG_hideNotificationAboutPossibleHlsUsage__") Hide notification about possible HLS usage
-                    input.hide_hls_notification(type="checkbox")
-
-            .normal
-                include ../../widgets/instances.pug
-                +instances('https://libreddit.com')
-                include ../../widgets/latency.pug
-                +latency('libreddit')
-            .tor
-                include ../../widgets/instances.pug
-                +instances('https://libreddit.onion')
-
-        #teddit
-            hr
-            .normal
-                include ../../widgets/instances.pug
-                +instances('https://teddit.com')
-                +latency('teddit')
-            .tor
-                include ../../widgets/instances.pug
-                +instances('https://teddit.onion')
-
-    script(type="module" src="../init.js")
-    script(type="module" src="./reddit.js")

script.sh

@@ -1 +1 @@
-pug ./pug/options/ -o ./src/pages/options/ -P -w
+pug ./src/pages/options/ -P -w

src/assets/javascripts/helpers/common.js

@@ -128,7 +128,6 @@ async function processDefaultCustomInstances(
 
   async function getFromStorage() {
     return new Promise(async resolve => {
-
       browser.storage.local.get(
         [
           redirectsChecks,
@@ -158,16 +157,6 @@ async function processDefaultCustomInstances(
     if (nameDefaultRedirects.length == 0) isTrue = false;
     nameProtocolElement.getElementsByClassName('toogle-all')[0].checked = isTrue;
   }
-
-  async function setRedirectsChecks(val) {
-    await browser.storage.local.set({ [redirectsChecks]: val });
-  }
-
-  async function setCustom(val) {
-    await browser.storage.local.set({ [customRedirects]: val });
-  }
-
-
   nameCheckListElement.innerHTML =
     [
       `<div>
@@ -182,7 +171,10 @@ async function processDefaultCustomInstances(
           let latencyLimit = (instancesLatency[x] == 5000 ? '5000ms+' : instancesLatency[x] + 'ms')
           let latency = x in instancesLatency ? '<span style="color:' + latencyColor + ';">' + latencyLimit + '</span>' : '';
 
-          return `<div><x><a href="${x}" target="_blank">${x}</a>${cloudflare} ${latency}</x><input type="checkbox" class="${x}"/></div>`;
+          return `<div>
+                    <x><a href="${x}" target="_blank">${x}</a>${cloudflare} ${latency}</x>
+                    <input type="checkbox" class="${x}"/>
+                  </div>`;
         }
       ),
     ].join('\n<hr>\n');
@@ -196,7 +188,7 @@ async function processDefaultCustomInstances(
     else
       nameDefaultRedirects = [];
 
-    await setRedirectsChecks(nameDefaultRedirects);
+    await browser.storage.local.set({ [redirectsChecks]: nameDefaultRedirects });
     calcNameCheckBoxes();
   });
 
@@ -209,7 +201,7 @@ async function processDefaultCustomInstances(
           let index = nameDefaultRedirects.indexOf(element.className);
           if (index > -1) nameDefaultRedirects.splice(index, 1);
         }
-        await setRedirectsChecks(nameDefaultRedirects);
+        await browser.storage.local.set({ [redirectsChecks]: nameDefaultRedirects });
         calcNameCheckBoxes();
       });
   }
@@ -229,16 +221,16 @@ async function processDefaultCustomInstances(
       ).join('\n');
 
     for (const item of nameCustomInstances) {
-      nameProtocolElement.getElementsByClassName(`clear-${item}`)[0].addEventListener("click", () => {
+      nameProtocolElement.getElementsByClassName(`clear-${item}`)[0].addEventListener("click", async () => {
         let index = nameCustomInstances.indexOf(item);
         if (index > -1) nameCustomInstances.splice(index, 1);
-        setCustom(nameCustomInstances);
+        await browser.storage.local.set({ [customRedirects]: nameCustomInstances });
         calcNameCustomInstances();
       });
     }
   }
   calcNameCustomInstances();
-  nameProtocolElement.getElementsByClassName('custom-instance-form')[0].addEventListener("submit", event => {
+  nameProtocolElement.getElementsByClassName('custom-instance-form')[0].addEventListener("submit", async event => {
     event.preventDefault();
     let nameCustomInstanceInput = nameProtocolElement.getElementsByClassName('custom-instance')[0];
     let url = new URL(nameCustomInstanceInput.value);
@@ -246,7 +238,7 @@ async function processDefaultCustomInstances(
     if (nameCustomInstanceInput.validity.valid && !redirects[name][protocol].includes(protocolHostVar)) {
       if (!nameCustomInstances.includes(protocolHostVar)) {
         nameCustomInstances.push(protocolHostVar)
-        setCustom(nameCustomInstances);
+        await browser.storage.local.set({ [customRedirects]: nameCustomInstances });
         nameCustomInstanceInput.value = '';
       }
       calcNameCustomInstances();
@@ -298,6 +290,16 @@ async function testLatency(element, instances) {
     resolve(myList);
   })
 }
+
+function copyCookie(targetUrl, url, name) {
+  browser.cookies.get(
+    { url: protocolHost(targetUrl), name: name },
+    r => {
+      if (r) browser.cookies.set({ url: url, name: name, value: r.value })
+    }
+  )
+}
+
 export default {
   getRandomInstance,
   updateInstances,
@@ -305,4 +307,5 @@ export default {
   processDefaultCustomInstances,
   isRtl,
   testLatency,
+  copyCookie
 }

src/assets/javascripts/helpers/reddit.js

@@ -39,14 +39,14 @@ function setLibredditRedirects(val) {
       var index = libredditNormalRedirectsChecks.indexOf(item);
       if (index !== -1) libredditNormalRedirectsChecks.splice(index, 1);
     }
-  setLibredditNormalRedirectsChecks(libredditNormalRedirectsChecks);
+  browser.storage.local.set({ libredditNormalRedirectsChecks })
 
   for (const item of libredditTorRedirectsChecks)
     if (!redirects.libreddit.normal.includes(item)) {
       var index = libredditTorRedirectsChecks.indexOf(item);
       if (index !== -1) libredditTorRedirectsChecks.splice(index, 1);
     }
-  setLibredditTorRedirectsChecks(libredditTorRedirectsChecks);
+  browser.storage.local.set({ libredditTorRedirectsChecks })
 }
 
 function setTedditRedirects(val) {
@@ -58,79 +58,25 @@ function setTedditRedirects(val) {
       var index = tedditNormalRedirectsChecks.indexOf(item);
       if (index !== -1) tedditNormalRedirectsChecks.splice(index, 1);
     }
-  setTedditNormalRedirectsChecks(tedditNormalRedirectsChecks);
+  browser.storage.local.set({ tedditNormalRedirectsChecks })
 
   for (const item of tedditTorRedirectsChecks)
     if (!redirects.teddit.normal.includes(item)) {
       var index = tedditTorRedirectsChecks.indexOf(item);
       if (index !== -1) tedditTorRedirectsChecks.splice(index, 1);
     }
-  setTedditTorRedirectsChecks(tedditTorRedirectsChecks);
+  browser.storage.local.set({ tedditTorRedirectsChecks })
 }
 
 let libredditNormalRedirectsChecks;
-const getLibredditNormalRedirectsChecks = () => libredditNormalRedirectsChecks;
-function setLibredditNormalRedirectsChecks(val) {
-  libredditNormalRedirectsChecks = val;
-  browser.storage.local.set({ libredditNormalRedirectsChecks })
-  console.log("libredditNormalRedirectsChecks: ", val)
-}
-
 let libredditTorRedirectsChecks;
-const getLibredditTorRedirectsChecks = () => libredditTorRedirectsChecks;
-function setLibredditTorRedirectsChecks(val) {
-  libredditTorRedirectsChecks = val;
-  browser.storage.local.set({ libredditTorRedirectsChecks })
-  console.log("libredditTorRedirectsChecks: ", val)
-}
-
 let libredditNormalCustomRedirects = [];
-const getLibredditNormalCustomRedirects = () => libredditNormalCustomRedirects;
-function setLibredditNormalCustomRedirects(val) {
-  libredditNormalCustomRedirects = val;
-  browser.storage.local.set({ libredditNormalCustomRedirects })
-  console.log("libredditNormalCustomRedirects: ", val)
-}
-
 let libredditTorCustomRedirects = [];
-const getLibredditTorCustomRedirects = () => libredditTorCustomRedirects;
-function setLibredditTorCustomRedirects(val) {
-  libredditTorCustomRedirects = val;
-  browser.storage.local.set({ libredditTorCustomRedirects })
-  console.log("libredditTorCustomRedirects: ", val)
-}
 
 let tedditNormalRedirectsChecks;
-const getTedditNormalRedirectsChecks = () => tedditNormalRedirectsChecks;
-function setTedditNormalRedirectsChecks(val) {
-  tedditNormalRedirectsChecks = val;
-  browser.storage.local.set({ tedditNormalRedirectsChecks })
-  console.log("tedditNormalRedirectsChecks: ", val)
-}
-
 let tedditTorRedirectsChecks;
-const getTedditTorRedirectsChecks = () => tedditTorRedirectsChecks;
-function setTedditTorRedirectsChecks(val) {
-  tedditTorRedirectsChecks = val;
-  browser.storage.local.set({ tedditTorRedirectsChecks })
-  console.log("tedditTorRedirectsChecks: ", val)
-}
-
 let tedditNormalCustomRedirects = [];
-const getTedditNormalCustomRedirects = () => tedditNormalCustomRedirects;
-function setTedditNormalCustomRedirects(val) {
-  tedditNormalCustomRedirects = val;
-  browser.storage.local.set({ tedditNormalCustomRedirects })
-  console.log("tedditNormalCustomRedirects: ", val)
-}
-
 let tedditTorCustomRedirects = [];
-const getTedditTorCustomRedirects = () => tedditTorCustomRedirects;
-function setTedditTorCustomRedirects(val) {
-  tedditTorCustomRedirects = val;
-  browser.storage.local.set({ tedditTorCustomRedirects })
-  console.log("tedditTorCustomRedirects: ", val)
-}
 
 const bypassPaths = /\/(gallery\/poll\/rpan\/settings\/topics)/;
 
@@ -145,54 +91,49 @@ let frontend;
 let protocol;
 let bypassWatchOnReddit;
 
-let enableCustom;
+function initLibredditCookies(targetUrl) {
+  browser.storage.local.get(
+    [
+      "redditProtocol",
+      "libredditNormalRedirectsChecks",
+      "libredditNormalCustomRedirects",
+      "libredditTorRedirectsChecks",
+      "libredditTorCustomRedirects",
+    ],
+    r => {
+      let checkedInstances;
+      if (r.redditProtocol == 'normal') checkedInstances = [...r.libredditNormalRedirectsChecks, ...r.libredditNormalCustomRedirects];
+      else if (r.redditProtocol == 'tor') checkedInstances = [...r.libredditTorRedirectsChecks, ...r.libredditTorCustomRedirects];
 
-let theme;
+      for (const instance of checkedInstances) {
-let front_page;
+        commonHelper.copyCookie(targetUrl, instance, "theme");
-let layout;
+        commonHelper.copyCookie(targetUrl, instance, "front_page");
-let wide;
+        commonHelper.copyCookie(targetUrl, instance, "layout");
-let post_sort;
+        commonHelper.copyCookie(targetUrl, instance, "wide");
-let comment_sort;
+        commonHelper.copyCookie(targetUrl, instance, "post_sort");
-let show_nsfw;
+        commonHelper.copyCookie(targetUrl, instance, "comment_sort");
-let autoplay_videos;
+        commonHelper.copyCookie(targetUrl, instance, "show_nsfw");
-let use_hls;
+        commonHelper.copyCookie(targetUrl, instance, "autoplay_videos");
-let hide_hls_notification;
+        commonHelper.copyCookie(targetUrl, instance, "use_hls");
-
+        commonHelper.copyCookie(targetUrl, instance, "hide_hls_notification");
-function initLibredditCookies() {
+      }
-  if (enableCustom) {
-    let checkedInstances;
-    if (protocol == 'normal') checkedInstances = [...libredditNormalRedirectsChecks, ...libredditNormalCustomRedirects];
-    else if (protocol == 'tor') checkedInstances = [...libredditTorRedirectsChecks, ...libredditTorCustomRedirects];
-
-    for (const instance of checkedInstances) {
-      browser.cookies.set({ url: instance, name: "theme", value: theme })
-      browser.cookies.set({ url: instance, name: "front_page", value: front_page })
-      browser.cookies.set({ url: instance, name: "layout", value: layout })
-      browser.cookies.set({ url: instance, name: "wide", value: wide ? 'on' : 'off' })
-      browser.cookies.set({ url: instance, name: "post_sort", value: post_sort })
-      browser.cookies.set({ url: instance, name: "comment_sort", value: comment_sort })
-      browser.cookies.set({ url: instance, name: "show_nsfw", value: show_nsfw ? 'on' : 'off' })
-      browser.cookies.set({ url: instance, name: "autoplay_videos", value: autoplay_videos ? 'on' : 'off' })
-      browser.cookies.set({ url: instance, name: "use_hls", value: use_hls ? 'on' : 'off' })
-      browser.cookies.set({ url: instance, name: "hide_hls_notification", value: hide_hls_notification ? 'on' : 'off' })
     }
-  }
+  )
 }
+
 function initTedditCookies() {
-  if (enableCustom) {
+  let checkedInstances = [
-    let checkedInstances = [
+    ...tedditNormalRedirectsChecks,
-      ...tedditNormalRedirectsChecks,
+    ...tedditNormalCustomRedirects,
-      ...tedditNormalCustomRedirects,
+    ...tedditTorRedirectsChecks,
-      ...tedditTorRedirectsChecks,
+    ...tedditTorCustomRedirects
-      ...tedditTorCustomRedirects
+  ]
-    ]
+  for (const instanceUrl of checkedInstances)
-    for (const instanceUrl of checkedInstances)
+    browser.cookies.set({
-      browser.cookies.set({
+      url: instanceUrl,
-        url: instanceUrl,
+      name: "theme",
-        name: "theme",
+      value: theme == 'dark' ? 'dark' : 'white'
-        value: theme == 'dark' ? 'dark' : 'white'
+    })
-      })
-  }
 }
 
 let alwaysUsePreferred;
@@ -336,54 +277,76 @@ function reverse(url) {
     return `https://reddit.com${url.pathname}${url.search}`;
 }
 
-function switchInstance(url) {
+async function switchInstance(url) {
-  let protocolHost = commonHelper.protocolHost(url);
+  return new Promise(resolve => {
+    browser.storage.local.get(
+      [
+        "redditRedirects",
+        "redditFrontend",
+        "redditProtocol",
 
-  let isTeddit = [
+        "libredditNormalRedirectsChecks",
-    ...redirects.teddit.normal,
+        "libredditNormalCustomRedirects",
-    ...redirects.teddit.tor
+        "libredditTorRedirectsChecks",
-  ].includes(protocolHost);
+        "libredditTorCustomRedirects",
 
-  let isLibreddit = [
+        "tedditNormalRedirectsChecks",
-    ...redirects.libreddit.normal,
+        "tedditNormalCustomRedirects",
-    ...redirects.libreddit.tor
+        "tedditTorRedirectsChecks",
-  ].includes(protocolHost);
+        "tedditTorCustomRedirects",
+      ],
+      r => {
+        let protocolHost = commonHelper.protocolHost(url);
+        let isTeddit = [
+          ...r.redditRedirects.teddit.normal,
+          ...r.redditRedirects.teddit.tor
+        ].includes(protocolHost);
 
-  let redditList = [
+        let isLibreddit = [
-    ...redirects.libreddit.normal,
+          ...r.redditRedirects.libreddit.normal,
-    ...redirects.libreddit.tor,
+          ...r.redditRedirects.libreddit.tor
+        ].includes(protocolHost);
 
-    ...libredditNormalCustomRedirects,
+        let redditList = [
-    ...libredditTorCustomRedirects,
+          ...r.redditRedirects.libreddit.normal,
+          ...r.redditRedirects.libreddit.tor,
 
-    ...redirects.teddit.normal,
+          ...r.libredditNormalCustomRedirects,
-    ...redirects.teddit.tor,
+          ...r.libredditTorCustomRedirects,
 
-    ...tedditNormalCustomRedirects,
+          ...r.redditRedirects.teddit.normal,
-    ...tedditTorCustomRedirects,
+          ...r.redditRedirects.teddit.tor,
-  ]
 
-  if (!redditList.includes(protocolHost)) return null;
+          ...r.tedditNormalCustomRedirects,
+          ...r.tedditTorCustomRedirects,
+        ]
 
-  let instancesList;
+        if (!redditList.includes(protocolHost)) return null;
-  if (frontend == 'libreddit') {
-    if (protocol == 'normal') instancesList = [...libredditNormalRedirectsChecks, ...libredditNormalCustomRedirects];
-    else if (protocol == 'tor') instancesList = [...libredditTorRedirectsChecks, ...libredditTorCustomRedirects];
-    if (isTeddit) url.pathname = url.pathname.replace("/pics/w:null_", "/img/");
-  }
-  else if (frontend == 'teddit') {
-    if (protocol == 'normal') instancesList = [...tedditNormalRedirectsChecks, ...tedditNormalCustomRedirects];
-    else if (protocol == 'tor') instancesList = [...tedditTorRedirectsChecks, ...tedditTorCustomRedirects];
-    if (isLibreddit) url.pathname = url.pathname.replace("/img/", "/pics/w:null_");
-  }
 
-  let index = instancesList.indexOf(protocolHost);
+        console.log('redditFrontend', r.redditFrontend)
-  if (index > -1) instancesList.splice(index, 1);
+        let instancesList;
-  if (instancesList.length === 0) return null;
+        if (r.redditFrontend == 'libreddit') {
+          if (r.redditProtocol == 'normal') instancesList = [...r.libredditNormalRedirectsChecks, ...r.libredditNormalCustomRedirects];
+          else if (r.redditProtocol == 'tor') instancesList = [...r.libredditTorRedirectsChecks, ...r.libredditTorCustomRedirects];
+          if (isTeddit) url.pathname = url.pathname.replace("/pics/w:null_", "/img/");
+        }
+        else if (r.redditFrontend == 'teddit') {
+          if (r.redditProtocol == 'normal') instancesList = [...r.tedditNormalRedirectsChecks, ...r.tedditNormalCustomRedirects];
+          else if (r.redditProtocol == 'tor') instancesList = [...r.tedditTorRedirectsChecks, ...r.tedditTorCustomRedirects];
+          if (isLibreddit) url.pathname = url.pathname.replace("/img/", "/pics/w:null_");
+        }
 
-  let randomInstance = commonHelper.getRandomInstance(instancesList);
+        let index = instancesList.indexOf(protocolHost);
+        if (index > -1) instancesList.splice(index, 1);
+        if (instancesList.length === 0) return;
+
+        let randomInstance = commonHelper.getRandomInstance(instancesList);
+
+        resolve(`${randomInstance}${url.pathname}${url.search}`)
+      }
+    )
+  })
 
-  return `${randomInstance}${url.pathname}${url.search}`;
 }
 
 async function initDefaults() {
@@ -396,7 +359,7 @@ async function initDefaults() {
       tedditNormalRedirectsChecks = [...redirects.teddit.normal]
       for (const instance of r.cloudflareList) {
         let i;
-        
+
         i = libredditNormalRedirectsChecks.indexOf(instance);
         if (i > -1) libredditNormalRedirectsChecks.splice(i, 1);
 
@@ -459,7 +422,6 @@ async function init() {
         "tedditTorRedirectsChecks",
         "tedditTorCustomRedirects",
 
-
         "redditProtocol",
         "bypassWatchOnReddit",
 
@@ -499,19 +461,6 @@ async function init() {
         tedditTorRedirectsChecks = r.tedditTorRedirectsChecks;
         tedditTorCustomRedirects = r.tedditTorCustomRedirects;
 
-        enableCustom = r.enableLibredditCustomSettings;
-
-        theme = r.redditTheme;
-        front_page = r.redditFrontPage;
-        layout = r.redditLayout;
-        wide = r.redditWide;
-        post_sort = r.redditPostSort;
-        comment_sort = r.redditCommentSort;
-        show_nsfw = r.redditShowNsfw;
-        autoplay_videos = r.redditAutoplayVideos;
-        use_hls = r.redditUseHls;
-        hide_hls_notification = r.redditHideHlsNotification;
-
         resolve();
       }
     );
@@ -531,26 +480,6 @@ export default {
   initLibredditCookies,
   initTedditCookies,
 
-  getLibredditNormalRedirectsChecks,
-  setLibredditNormalRedirectsChecks,
-  getLibredditTorRedirectsChecks,
-  setLibredditTorRedirectsChecks,
-
-  getLibredditNormalCustomRedirects,
-  setLibredditNormalCustomRedirects,
-  getLibredditTorCustomRedirects,
-  setLibredditTorCustomRedirects,
-
-  getTedditNormalRedirectsChecks,
-  setTedditNormalRedirectsChecks,
-  getTedditTorRedirectsChecks,
-  setTedditTorRedirectsChecks,
-
-  getTedditNormalCustomRedirects,
-  setTedditNormalCustomRedirects,
-  getTedditTorCustomRedirects,
-  setTedditTorCustomRedirects,
-
   initLibredditCookies,
 
   redirect,

src/pages/background/background.js

@@ -173,23 +173,14 @@ async function redirectOfflineInstance(url, tabId) {
 
   newUrl = youtubeHelper.switchInstance(url);
   if (!newUrl) newUrl = twitterHelper.switchInstance(url);
-
   if (!newUrl) newUrl = instagramHelper.switchInstance(url);
-
   if (!newUrl) newUrl = redditHelper.switchInstance(url);
-
   if (!newUrl) newUrl = searchHelper.switchInstance(url);
-
   if (!newUrl) newUrl = translateHelper.switchInstance(url);
-
   if (!newUrl) newUrl = mediumHelper.switchInstance(url);
-
   if (!newUrl) newUrl = imgurHelper.switchInstance(url);
-
   if (!newUrl) newUrl = wikipediaHelper.switchInstance(url);
-
   if (!newUrl) newUrl = peertubeHelper.switchInstance(url);
-
   if (!newUrl) newUrl = lbryHelper.switchInstance(url);
 
   if (newUrl) {

src/pages/options/reddit/reddit.html

@@ -78,92 +78,22 @@
       <input id="bypass-watch-on-reddit" type="checkbox">
     </div>
     <div id="libreddit">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_enableCustomSettings__">Enable Custom Settings (will use cookies)</h4>
-        <input id="enable-libreddit-custom-settings" type="checkbox">
-      </div>
       <hr>
-      <div class="custom-settings"> 
+      <div class="some-block option-block">
-        <div class="some-block option-block">
+        <h4>Unify cookies across selected instances</h4>
-          <h2>Appearance</h2>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_theme__">Theme</h4>
-          <select class="theme">
-            <option value="system">System</option>
-            <option value="light">Light</option>
-            <option value="dark">Dark</option>
-            <option value="black">Black</option>
-            <option value="dracula">Dracula</option>
-            <option value="nord">Nord</option>
-            <option value="laserwave">Laserwave</option>
-            <option value="violet">Violet</option>
-            <option value="gold">Gold</option>
-          </select>
-        </div>
-        <div class="some-block option-block">
-          <h2>Interface</h2>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_frontPage__">Front page</h4>
-          <select class="front_page">
-            <option value="default">Default</option>
-            <option value="popular">Popular</option>
-            <option value="all">All</option>
-          </select>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_frontLayout__">Front Layout</h4>
-          <select class="layout">
-            <option value="card">Card</option>
-            <option value="clean">Clean</option>
-            <option value="compact">Compact</option>
-          </select>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_wideUI__">Wide UI</h4>
-          <input class="wide" type="checkbox">
-        </div>
-        <div class="some-block option-block">
-          <h2>Content</h2>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_defaultSubredditPostSort__">Default subreddit post sort</h4>
-          <select class="post_sort">
-            <option value="hot">Hot</option>
-            <option value="new">New</option>
-            <option value="top">Top</option>
-            <option value="rising">Rising</option>
-            <option value="controversial">Controversial</option>
-          </select>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_defaultCommentSort__">Default comment sort</h4>
-          <select class="comment_sort">
-            <option value="confidence">Confidence</option>
-            <option value="top">Top</option>
-            <option value="new">New</option>
-            <option value="controversial">Controversial</option>
-            <option value="old">Old</option>
-          </select>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_showNsfwPosts__">Show NSFW posts</h4>
-          <input class="show_nsfw" type="checkbox">
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_autoplayVideos__">Autoplay videos</h4>
-          <input class="autoplay_videos" type="checkbox">
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_useHlsForVideos__">Use HLS for videos</h4>
-          <input class="use_hls" type="checkbox">
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_hideNotificationAboutPossibleHlsUsage__">Hide notification about possible HLS usage</h4>
-          <input class="hide_hls_notification" type="checkbox">
-        </div>
       </div>
+      <form>
+        <div class="some-block option-block">
+          <input type="url" placeholder="https://libreddit.com">
+          <button class="add" type="submit">
+            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+              <rect fill="none" height="24" width="24"></rect>
+              <path d="M18,2H9C7.9,2,7,2.9,7,4v12c0,1.1,0.9,2,2,2h9c1.1,0,2-0.9,2-2V4C20,2.9,19.1,2,18,2z M18,16H9V4h9V16z M3,15v-2h2v2H3z M3,9.5h2v2H3V9.5z M10,20h2v2h-2V20z M3,18.5v-2h2v2H3z M5,22c-1.1,0-2-0.9-2-2h2V22z M8.5,22h-2v-2h2V22z M13.5,22L13.5,22l0-2h2 v0C15.5,21.1,14.6,22,13.5,22z M5,6L5,6l0,2H3v0C3,6.9,3.9,6,5,6z"></path>
+            </svg>
+          </button>
+        </div>
+      </form>
+      <hr>
       <div class="normal">
                 <div class="some-block option-block">
                   <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>

src/pages/options/reddit/reddit.js

@@ -3,49 +3,31 @@ import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let libredditDivElement = document.getElementById("libreddit")
 let tedditDivElement = document.getElementById("teddit")
-let enableLibredditSettingsElement = document.getElementById("enable-libreddit-custom-settings");
-let customSettingsDivElement = document.getElementsByClassName("custom-settings");
 
 let disableRedditElement = document.getElementById("disable-reddit");
 let redditFrontendElement = document.getElementById("reddit-frontend");
 let protocolElement = document.getElementById("protocol")
 let bypassWatchOnRedditElement = document.getElementById("bypass-watch-on-reddit")
 
-let theme = document.getElementById('libreddit').getElementsByClassName('theme')[0];
-let front_page = document.getElementById('libreddit').getElementsByClassName('front_page')[0];
-let layout = document.getElementById('libreddit').getElementsByClassName('layout')[0];
-let wide = document.getElementById('libreddit').getElementsByClassName('wide')[0];
-let post_sort = document.getElementById('libreddit').getElementsByClassName('post_sort')[0];
-let comment_sort = document.getElementById('libreddit').getElementsByClassName('comment_sort')[0];
-let show_nsfw = document.getElementById('libreddit').getElementsByClassName('show_nsfw')[0];
-let autoplay_videos = document.getElementById('libreddit').getElementsByClassName('autoplay_videos')[0];
-let use_hls = document.getElementById('libreddit').getElementsByClassName('use_hls')[0];
-let hide_hls_notification = document.getElementById('libreddit').getElementsByClassName('hide_hls_notification')[0];
-
 document.addEventListener("change", async () => {
     await browser.storage.local.set({
         disableReddit: !disableRedditElement.checked,
         bypassWatchOnReddit: bypassWatchOnRedditElement.checked,
         redditProtocol: protocolElement.value,
         redditFrontend: redditFrontendElement.value,
-
-        enableLibredditCustomSettings: enableLibredditSettingsElement.checked,
-
-        redditTheme: theme.value,
-        redditFrontPage: front_page.value,
-        redditLayout: layout.value,
-        redditWide: wide.checked,
-        redditPostSort: post_sort.value,
-        redditCommentSort: comment_sort.value,
-        redditShowNsfw: show_nsfw.checked,
-        redditAutoplayVideos: autoplay_videos.checked,
-        redditUseHls: use_hls.checked,
-        redditHideHlsNotification: hide_hls_notification.checked,
     });
     changeFrontendsSettings(redditFrontendElement.value);
     changeProtocolSettings(protocolElement.value);
 })
 
+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);
+})
+
 function changeProtocolSettings(protocol) {
     let normalLibredditDiv = libredditDivElement.getElementsByClassName("normal")[0];
     let torLibredditDiv = libredditDivElement.getElementsByClassName("tor")[0];
@@ -64,10 +46,6 @@ function changeProtocolSettings(protocol) {
         torTedditDiv.style.display = 'block';
         torLibredditDiv.style.display = 'block';
     }
-    if (enableLibredditSettingsElement.checked)
-        for (const item of customSettingsDivElement) item.style.display = 'block';
-    else
-        for (const item of customSettingsDivElement) item.style.display = 'none';
 }
 function changeFrontendsSettings(frontend) {
     let frontendElement = document.getElementById("frontend");
@@ -96,37 +74,14 @@ browser.storage.local.get(
         "redditFrontend",
 
         "enableLibredditCustomSettings",
-
-        "redditTheme",
-        "redditFrontPage",
-        "redditLayout",
-        "redditWide",
-        "redditPostSort",
-        "redditCommentSort",
-        "redditShowNsfw",
-        "redditAutoplayVideos",
-        "redditUseHls",
-        "redditHideHlsNotification",
     ],
     r => {
         disableRedditElement.checked = !r.disableReddit
         bypassWatchOnRedditElement.checked = r.bypassWatchOnReddit
         protocolElement.value = r.redditProtocol
         redditFrontendElement.value = r.redditFrontend
-        enableLibredditSettingsElement.checked = r.enableLibredditCustomSettings
         changeFrontendsSettings(r.redditFrontend);
         changeProtocolSettings(r.redditProtocol);
-
-        theme.value = r.redditTheme;
-        front_page.value = r.redditFrontPage;
-        layout.value = r.redditLayout;
-        wide.checked = r.redditWide;
-        post_sort.value = r.redditPostSort;
-        comment_sort.value = r.redditCommentSort;
-        show_nsfw.checked = r.redditShowNsfw;
-        autoplay_videos.checked = r.redditAutoplayVideos;
-        use_hls.checked = r.redditUseHls;
-        hide_hls_notification.checked = r.redditHideHlsNotification;
     }
 )
 
@@ -172,9 +127,4 @@ latencyTedditElement.addEventListener("click",
             latencyTedditElement.removeEventListener("click", reloadWindow);
         });
     }
-);
+);
-
-window.onblur = () => {
-    redditHelper.initLibredditCookies();
-    redditHelper.initTedditCookies();
-}

src/pages/options/reddit/reddit.pug

@@ -0,0 +1,65 @@
+doctype html
+html(lang="en")
+    include ../../widgets/head.pug
+        title General
+script(type="module" src="../../../assets/javascripts/localise.js")
+body.option(dir="auto")
+    include ../../widgets/links.pug
+    +links('reddit')
+
+    section.option-block
+        .some-block.option-block
+            h4(data-localise="__MSG_enable__") Enable
+            input#disable-reddit(type="checkbox")
+
+        .some-block.option-block
+            h4#frontend(data-localise="__MSG_frontend__") Frontend
+            select#reddit-frontend
+                option(value="libreddit") Libreddit
+                option(value="teddit") Teddit
+
+        .some-block.option-block
+            h4(data-localise="__MSG_protocol__") Protocol
+            select#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_bypassReddit__") Bypass "Open in Reddit"
+            input#bypass-watch-on-reddit(type="checkbox")
+
+        #libreddit
+            hr
+            .some-block.option-block
+                h4 Unify cookies across selected instances
+            form
+                .some-block.option-block
+                    input(type="url" placeholder="https://libreddit.com")
+                    button.add(type="submit")
+                        svg(xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
+                            rect(fill="none" height="24" width="24")
+                            path(d="M18,2H9C7.9,2,7,2.9,7,4v12c0,1.1,0.9,2,2,2h9c1.1,0,2-0.9,2-2V4C20,2.9,19.1,2,18,2z M18,16H9V4h9V16z M3,15v-2h2v2H3z M3,9.5h2v2H3V9.5z M10,20h2v2h-2V20z M3,18.5v-2h2v2H3z M5,22c-1.1,0-2-0.9-2-2h2V22z M8.5,22h-2v-2h2V22z M13.5,22L13.5,22l0-2h2 v0C15.5,21.1,14.6,22,13.5,22z M5,6L5,6l0,2H3v0C3,6.9,3.9,6,5,6z")
+
+            hr
+
+            .normal
+                include ../../widgets/instances.pug
+                +instances('https://libreddit.com')
+                include ../../widgets/latency.pug
+                +latency('libreddit')
+            .tor
+                include ../../widgets/instances.pug
+                +instances('https://libreddit.onion')
+
+        #teddit
+            hr
+            .normal
+                include ../../widgets/instances.pug
+                +instances('https://teddit.com')
+                +latency('teddit')
+            .tor
+                include ../../widgets/instances.pug
+                +instances('https://teddit.onion')
+
+    script(type="module" src="../init.js")
+    script(type="module" src="./reddit.js")

src/pages/popup/popup.js

@@ -104,7 +104,7 @@ document.getElementById("more-options").addEventListener("click",
 );
 
 function switchInstance() {
-  browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+  browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
     let currTab = tabs[0];
     if (currTab) {
       let url = currTab.url;
@@ -113,29 +113,18 @@ function switchInstance() {
       catch (_) { return false; }
       let newUrl;
 
-      newUrl = youtubeHelper.switchInstance(tabUrl);
+      // newUrl = youtubeHelper.switchInstance(tabUrl);
-
+      // if (!newUrl) newUrl = twitterHelper.switchInstance(tabUrl);
-      if (!newUrl) newUrl = twitterHelper.switchInstance(tabUrl);
+      // if (!newUrl) newUrl = instagramHelper.switchInstance(tabUrl);
-
+      if (!newUrl) newUrl = await redditHelper.switchInstance(tabUrl);
-      if (!newUrl) newUrl = instagramHelper.switchInstance(tabUrl);
+      // if (!newUrl) newUrl = searchHelper.switchInstance(tabUrl);
-
+      // if (!newUrl) newUrl = translateHelper.switchInstance(tabUrl);
-      if (!newUrl) newUrl = redditHelper.switchInstance(tabUrl);
+      // if (!newUrl) newUrl = mediumHelper.switchInstance(tabUrl);
-
+      // if (!newUrl) newUrl = sendTargetsHelper.switchInstance(tabUrl);
-      if (!newUrl) newUrl = searchHelper.switchInstance(tabUrl);
+      // if (!newUrl) newUrl = peertubeHelper.switchInstance(tabUrl);
-
+      // if (!newUrl) newUrl = lbryHelper.switchInstance(tabUrl);
-      if (!newUrl) newUrl = translateHelper.switchInstance(tabUrl);
+      // if (!newUrl) newUrl = imgurHelper.switchInstance(tabUrl);
-
+      // if (!newUrl) newUrl = wikipediaHelper.switchInstance(tabUrl);
-      if (!newUrl) newUrl = mediumHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = sendTargetsHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = peertubeHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = lbryHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = imgurHelper.switchInstance(tabUrl);
-
-      if (!newUrl) newUrl = wikipediaHelper.switchInstance(tabUrl);
 
       if (newUrl) {
         browser.tabs.update({ url: newUrl });

src/pages/stylesheets/styles.css

@@ -444,4 +444,15 @@ section.general div {
 
 #customize-popup {
   width: 250px;
+}
+
+button {
+  background-color:transparent;
+  color: var(--text);
+  border: none;
+  padding: 10px 5px;
+  text-decoration: none;
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 5px;
 }