Add support for the old Reddit design

Add support for redirecting Reddit links to the old desktop and
mobile designs.

4 files changed, 86 insertions, 0 deletions

diff --git a/pages/options/options.html b/pages/options/options.html
index 6641e5c4..96641515 100644
--- a/pages/options/options.html
+++ b/pages/options/options.html
@@ -121,6 +121,28 @@
         </table>
       </section>
       <section class="settings-block">
+        <table class="option" aria-label="Toggle Reddit version redirects">
+          <tbody>
+            <tr>
+              <td>
+                <h1 data-localise="__MSG_disableRedditVersion__">
+                  Reddit Version Redirects
+                </h1>
+              </td>
+              <td>
+                <input
+                  aria-hidden="true"
+                  id="disable-reddit-version"
+                  type="checkbox"
+                  checked
+                />&nbsp;
+                <label for="disable-reddit-version" class="checkbox-label"> </label>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+      <section class="settings-block">
         <h1 data-localise="__MSG_nitterInstance__">Nitter Instance</h1>
         <div class="autocomplete">
           <input
@@ -162,6 +184,16 @@
         </div>
       </section>
       <section class="settings-block">
+        <h1 data-localise="__MSG_redditVersion__">Reddit Version</h1>
+        <div class="autocomplete">
+          <input
+            id="reddit-version"
+            type="url"
+            placeholder="https://old.reddit.com"
+          />
+        </div>
+      </section>
+      <section class="settings-block">
         <h1 data-localise="__MSG_theme__">Theme</h1>
         <select id="theme">
           <option value="">System</option>
diff --git a/pages/options/options.js b/pages/options/options.js
index 8149be7b..ff08fa43 100644
--- a/pages/options/options.js
+++ b/pages/options/options.js
@@ -45,21 +45,28 @@ const bibliogramInstances = [
   "https://bibliogram.ggc-project.de",
 ];
 const osmInstances = ["https://openstreetmap.org"];
+const redditVersions = [
+  "https://old.reddit.com",
+  "https://i.reddit.com"
+];
 const autocompletes = [
   { id: "nitter-instance", instances: nitterInstances },
   { id: "invidious-instance", instances: invidiousInstances },
   { id: "bibliogram-instance", instances: bibliogramInstances },
   { id: "osm-instance", instances: osmInstances },
+  { id: "reddit-version", instances: redditVersions },
 ];
 
 let nitterInstance = document.getElementById("nitter-instance");
 let invidiousInstance = document.getElementById("invidious-instance");
 let bibliogramInstance = document.getElementById("bibliogram-instance");
 let osmInstance = document.getElementById("osm-instance");
+let redditVersion = document.getElementById("reddit-version");
 let disableNitter = document.getElementById("disable-nitter");
 let disableInvidious = document.getElementById("disable-invidious");
 let disableBibliogram = document.getElementById("disable-bibliogram");
 let disableOsm = document.getElementById("disable-osm");
+let disableRedditVersion = document.getElementById("disable-reddit-version");
 let alwaysProxy = document.getElementById("always-proxy");
 let onlyEmbeddedVideo = document.getElementById("only-embed");
 let videoQuality = document.getElementById("video-quality");
@@ -103,10 +110,12 @@ browser.storage.sync.get(
     "invidiousInstance",
     "bibliogramInstance",
     "osmInstance",
+    "redditVersion",
     "disableNitter",
     "disableInvidious",
     "disableBibliogram",
     "disableOsm",
+    "disableRedditVersion",
     "alwaysProxy",
     "onlyEmbeddedVideo",
     "videoQuality",
@@ -127,10 +136,12 @@ browser.storage.sync.get(
     invidiousInstance.value = result.invidiousInstance || "";
     bibliogramInstance.value = result.bibliogramInstance || "";
     osmInstance.value = result.osmInstance || "";
+    redditVersion.value = result.redditVersion || "";
     disableNitter.checked = !result.disableNitter;
     disableInvidious.checked = !result.disableInvidious;
     disableBibliogram.checked = !result.disableBibliogram;
     disableOsm.checked = !result.disableOsm;
+    disableRedditVersion.checked = !result.disableRedditVersion;
     alwaysProxy.checked = result.alwaysProxy;
     onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo;
     videoQuality.value = result.videoQuality || "";
@@ -273,6 +284,15 @@ let osmInstanceChange = debounce(() => {
 }, 500);
 osmInstance.addEventListener("input", osmInstanceChange);
 
+let redditVersionChange = debounce(() => {
+  if (redditVersion.checkValidity()) {
+    browser.storage.sync.set({
+      redditVersion: parseURL(redditVersion.value),
+    });
+  }
+}, 500);
+redditVersion.addEventListener("input", redditVersionChange);
+
 disableNitter.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableNitter: !event.target.checked });
 });
@@ -289,6 +309,10 @@ disableOsm.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableOsm: !event.target.checked });
 });
 
+disableRedditVersion.addEventListener("change", (event) => {
+  browser.storage.sync.set({ disableRedditVersion: !event.target.checked });
+});
+
 alwaysProxy.addEventListener("change", (event) => {
   browser.storage.sync.set({ alwaysProxy: event.target.checked });
 });
diff --git a/pages/popup/popup.html b/pages/popup/popup.html
index e06159a5..871e2c62 100644
--- a/pages/popup/popup.html
+++ b/pages/popup/popup.html
@@ -116,6 +116,29 @@
       </table>
     </section>
 
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle Reddit version redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localise="__MSG_disableRedditVersion__">
+                Reddit Version Redirects
+              </h1>
+            </td>
+            <td>
+              <input
+                aria-hidden="true"
+                id="disable-reddit-version"
+                type="checkbox"
+                checked
+              />&nbsp;
+              <label for="disable-reddit-version" class="checkbox-label"> </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
     <section class="settings-block"></section>
 
     <footer>
diff --git a/pages/popup/popup.js b/pages/popup/popup.js
index 54eae408..4ea627cd 100644
--- a/pages/popup/popup.js
+++ b/pages/popup/popup.js
@@ -4,6 +4,7 @@ let disableNitter = document.querySelector("#disable-nitter");
 let disableInvidious = document.querySelector("#disable-invidious");
 let disableBibliogram = document.querySelector("#disable-bibliogram");
 let disableOsm = document.querySelector("#disable-osm");
+let disableRedditVersion = document.querySelector("#disable-reddit-version");
 let version = document.querySelector("#version");
 
 window.browser = window.browser || window.chrome;
@@ -14,6 +15,7 @@ browser.storage.sync.get(
     "disableInvidious",
     "disableBibliogram",
     "disableOsm",
+    "disableRedditVersion",
     "theme",
   ],
   (result) => {
@@ -22,6 +24,7 @@ browser.storage.sync.get(
     disableInvidious.checked = !result.disableInvidious;
     disableBibliogram.checked = !result.disableBibliogram;
     disableOsm.checked = !result.disableOsm;
+    disableRedditVersion.checked = !result.disableRedditVersion;
   }
 );
 
@@ -43,6 +46,10 @@ disableOsm.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableOsm: !event.target.checked });
 });
 
+disableRedditVersion.addEventListener("change", (event) => {
+  browser.storage.sync.set({ disableRedditVersion: !event.target.checked });
+});
+
 document.querySelector("#more-options").addEventListener("click", () => {
   browser.runtime.openOptionsPage();
 });