Refining code and design

13 files changed, 76 insertions, 76 deletions

diff --git a/src/pages/options/general/general.html b/src/pages/options/general/general.html
index 8c46c40b..3a7e8cf2 100644
--- a/src/pages/options/general/general.html
+++ b/src/pages/options/general/general.html
@@ -38,8 +38,8 @@
         <span>Update Instances</span>
       </a>
     </div>
-    <hr>
-    <section class="settings-block">
+    <!-- <hr> -->
+    <!-- <section class="settings-block">
       <p data-localise="__MSG_exceptionsDescriptionP1__">
         Enter a URL or Regular Expression to be excluded from redirects.
       </p>
@@ -95,11 +95,11 @@
       </table>
     </section>
     <ul id="exceptions-items"></ul>
-  </section>
+  </section> -->
 
 
-  <script type="module" src="./general.js"></script>
   <script type="module" src="../init.js"></script>
+  <script type="module" src="./general.js"></script>
   <!-- <script src="../../assets/javascripts/localise.js"></script> -->
 </body>
 
diff --git a/src/pages/options/general/general.js b/src/pages/options/general/general.js
index 4f111469..23c739aa 100644
--- a/src/pages/options/general/general.js
+++ b/src/pages/options/general/general.js
@@ -11,66 +11,66 @@ let themeElement = document.getElementById("theme");
 
 window.browser = window.browser || window.chrome;
 
-function prependExceptionsItem(item, index) {
-  const li = document.createElement("li");
-  li.appendChild(document.createTextNode(item.toString()));
-  const button = document.createElement("button");
-  li.appendChild(button);
-  document.getElementById("exceptions-items").prepend(li);
-  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
-      <line x1='368' y1='368' x2='144' y2='144'
-        style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
-      <line x1='368' y1='144' x2='144' y2='368'
-        style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
-    </svg>`;
-  button.appendChild(domparser.parseFromString(svg, "image/svg+xml").documentElement);
-  button.addEventListener("click", () => {
-    exceptions.splice(index, 1);
-    browser.storage.sync.set({ exceptions: exceptions });
-    li.remove();
-  });
-}
+// function prependExceptionsItem(item, index) {
+//   const li = document.createElement("li");
+//   li.appendChild(document.createTextNode(item.toString()));
+//   const button = document.createElement("button");
+//   li.appendChild(button);
+//   document.getElementById("exceptions-items").prepend(li);
+//   const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
+//       <line x1='368' y1='368' x2='144' y2='144'
+//         style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
+//       <line x1='368' y1='144' x2='144' y2='368'
+//         style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
+//     </svg>`;
+//   button.appendChild(domparser.parseFromString(svg, "image/svg+xml").documentElement);
+//   button.addEventListener("click", () => {
+//     exceptions.splice(index, 1);
+//     browser.storage.sync.set({ exceptions: exceptions });
+//     li.remove();
+//   });
+// }
 
 browser.storage.sync.get(
   [
-    "exceptions",
+    // "exceptions",
     "theme",
   ],
   (result) => {
     data.theme = result.theme || "";
     themeElement.value = result.theme || "";
     if (result.theme) document.body.classList.add(result.theme);
-    data.exceptions = result.exceptions || [];
-    data.exceptions.forEach(prependExceptionsItem);
+    // data.exceptions = result.exceptions || [];
+    // data.exceptions.forEach(prependExceptionsItem);
     shared.autocompletes.forEach((value) => {
     });
   }
 );
 
-function addToExceptions() {
-  const input = document.getElementById("new-exceptions-item");
-  const type = document.querySelector('input[name="type"]:checked').value;
-  if (input.value) {
-    try {
-      let value = input.value;
-      new RegExp(input.value);
-      if (type === "URL")
-        value = value.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+// function addToExceptions() {
+//   const input = document.getElementById("new-exceptions-item");
+//   const type = document.querySelector('input[name="type"]:checked').value;
+//   if (input.value) {
+//     try {
+//       let value = input.value;
+//       new RegExp(input.value);
+//       if (type === "URL")
+//         value = value.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
 
-      exceptions.push(value);
-      browser.storage.sync.set({
-        exceptions: exceptions,
-      });
-      prependExceptionsItem(value, exceptions.indexOf(value));
-      input.value = "";
-    } catch (error) {
-      input.setCustomValidity("Invalid RegExp");
-    }
-  } else {
-    input.setCustomValidity("Invalid RegExp");
-  }
-}
-document.getElementById("add-to-exceptions").addEventListener("click", addToExceptions);
+//       exceptions.push(value);
+//       browser.storage.sync.set({
+//         exceptions: exceptions,
+//       });
+//       prependExceptionsItem(value, exceptions.indexOf(value));
+//       input.value = "";
+//     } catch (error) {
+//       input.setCustomValidity("Invalid RegExp");
+//     }
+//   } else {
+//     input.setCustomValidity("Invalid RegExp");
+//   }
+// }
+// document.getElementById("add-to-exceptions").addEventListener("click", addToExceptions);
 
 themeElement.addEventListener("change", (event) => {
   const value = event.target.options[theme.selectedIndex].value;
@@ -92,8 +92,12 @@ themeElement.addEventListener("change", (event) => {
 
 document.querySelector("#update-instances").addEventListener("click", () => {
   document.querySelector("#update-instances").innerHTML = '...';
-  if (commonHelper.updateInstances())
+  if (commonHelper.updateInstances()) {
     document.querySelector("#update-instances").innerHTML = 'Done!';
+    new Promise(resolve => setTimeout(resolve, 1500)).then( // Sleep 1500ms
+      () => document.querySelector("#update-instances").innerHTML = 'Update Instances'
+    )
+  }
   else
     document.querySelector("#update-instances").innerHTML = 'Failed Miserabely';
 });
diff --git a/src/pages/options/instagram/instagram.html b/src/pages/options/instagram/instagram.html
index dfbbd7f7..1f09cab7 100644
--- a/src/pages/options/instagram/instagram.html
+++ b/src/pages/options/instagram/instagram.html
@@ -25,7 +25,7 @@
 
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-bibliogram" type="checkbox" checked />
         </div>
         <!-- <div class="some-block option-block">
diff --git a/src/pages/options/maps/maps.html b/src/pages/options/maps/maps.html
index 7702d019..79aa08ea 100644
--- a/src/pages/options/maps/maps.html
+++ b/src/pages/options/maps/maps.html
@@ -26,7 +26,7 @@
 
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-osm" type="checkbox" checked />
         </div>
         <!-- <div class="some-block option-block">
diff --git a/src/pages/options/medium/medium.html b/src/pages/options/medium/medium.html
index 877d704e..abf149c0 100644
--- a/src/pages/options/medium/medium.html
+++ b/src/pages/options/medium/medium.html
@@ -25,7 +25,7 @@
 
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-scribe" type="checkbox" checked />
         </div>
         <!-- <div class="some-block option-block">
diff --git a/src/pages/options/reddit/reddit.html b/src/pages/options/reddit/reddit.html
index b3f9c7c7..9dd59d73 100644
--- a/src/pages/options/reddit/reddit.html
+++ b/src/pages/options/reddit/reddit.html
@@ -27,7 +27,7 @@
     <section class="option-block">
 
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-reddit" type="checkbox" checked />
         </div>
 
diff --git a/src/pages/options/search/search.html b/src/pages/options/search/search.html
index 863a3472..af7d3946 100644
--- a/src/pages/options/search/search.html
+++ b/src/pages/options/search/search.html
@@ -25,7 +25,7 @@
 
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-search" type="checkbox" checked />
         </div>
         <!-- <div class="some-block option-block">
diff --git a/src/pages/options/translate/translate.html b/src/pages/options/translate/translate.html
index 3b6d7580..7d4ba006 100644
--- a/src/pages/options/translate/translate.html
+++ b/src/pages/options/translate/translate.html
@@ -24,7 +24,7 @@
     </section>
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-simplyTranslate" type="checkbox" checked />
         </div>
         <!-- <div class="some-block option-block">
diff --git a/src/pages/options/twitter/twitter.html b/src/pages/options/twitter/twitter.html
index b695a8b2..b13d02dd 100644
--- a/src/pages/options/twitter/twitter.html
+++ b/src/pages/options/twitter/twitter.html
@@ -27,7 +27,7 @@
     <section class="option-block">
 
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-nitter" type="checkbox" checked />
         </div>
         <!-- <div class="some-block option-block">
diff --git a/src/pages/options/twitter/twitter.js b/src/pages/options/twitter/twitter.js
index 08fabb20..4316b456 100644
--- a/src/pages/options/twitter/twitter.js
+++ b/src/pages/options/twitter/twitter.js
@@ -5,12 +5,6 @@ disableTwitterElement.addEventListener("change",
     (event) => twitterHelper.setDisableTwitter(!event.target.checked)
 );
 
-let removeTwitterSWElement = document.getElementById("remove-twitter-sw");
-removeTwitterSWElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ removeTwitterSW: !event.target.checked }); // Problem
-});
-
 twitterHelper.init().then(() => {
-    disableTwitterElement.checked = !twitterHelper.getDisableTwitter();
-    removeTwitterSWElement.checked = !remove.getRemoveTwitterSW; // Problem
+    disableTwitterElement.checked = !twitterHelper.getDisableTwitter(); 
 });
\ No newline at end of file
diff --git a/src/pages/options/wikipedia/wikipedia.html b/src/pages/options/wikipedia/wikipedia.html
index 1a4ea8d5..a68f36a6 100644
--- a/src/pages/options/wikipedia/wikipedia.html
+++ b/src/pages/options/wikipedia/wikipedia.html
@@ -25,7 +25,7 @@
 
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-wikipedia" type="checkbox" checked />
         </div>
         <!-- <div class="some-block option-block">
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index 15688873..6facdb4c 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -60,6 +60,14 @@
 
         <div id="invidious">
             <div class="some-block option-block">
+                <h4>Theme</h4>
+                <select id="invidious-theme">
+                    <option value="dark">Dark</option>
+                    <option value="light">Light</option>
+                </select>
+            </div>
+
+            <div class="some-block option-block">
                 <h4>Player Style</h4>
                 <select id="invidious-player-style">
                     <option value="invidious">Invidious</option>
@@ -67,11 +75,6 @@
                 </select>
             </div>
 
-            <div class="some-block option-block">
-                <h4>Dark mode</h4>
-                <input id="invidious-dark-mode" type="checkbox" checked />
-            </div>
-
             <div class="some-block">
                 <h4>Volume: <span id="volume-value">50%</span></h4>
                 <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
@@ -90,10 +93,9 @@
             <div class="some-block option-block">
                 <h4>Video Quality</h4>
                 <select id="video-quality">
-                    <option value="">Default</option>
                     <option value="hd720">720p</option>
                     <option value="medium">480p</option>
-                    <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
+                    <option value="dash">DASH (adaptive quality)</option>
                     </option>
                 </select>
             </div>
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index c1d526da..5c909578 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -32,9 +32,9 @@ disableYoutubeElement.addEventListener("change",
     (event) => youtubeHelper.setDisableYoutube(!event.target.checked)
 );
 
-let invidiousDarkModeElement = document.getElementById("invidious-dark-mode");
-invidiousDarkModeElement.addEventListener("change",
-    (event) => youtubeHelper.setInvidiousDarkMode(event.target.checked)
+let invidiousThemeElement = document.getElementById("invidious-theme");
+invidiousThemeElement.addEventListener("change",
+    (event) => youtubeHelper.setInvidiousTheme(event.target.options[invidiousThemeElement.selectedIndex].value)
 );
 
 let persistInvidiousPrefsElement = document.getElementById("persist-invidious-prefs");
@@ -86,7 +86,7 @@ invidiousVideoQualityElement.addEventListener("change",
 
 youtubeHelper.init().then(() => {
     disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube();
-    invidiousDarkModeElement.checked = youtubeHelper.getInvidiousDarkMode();
+    invidiousThemeElement.checked = youtubeHelper.getInvidiousTheme();
     persistInvidiousPrefsElement.checked = youtubeHelper.getPersistInvidiousPrefs();
     invidiousVolumeElement.value = youtubeHelper.getInvidiousVolume();
     invidiousVolumeValueElement.textContent = `${youtubeHelper.getInvidiousVolume()}%`;