UI improvements + new features

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "BetterSEQTA+",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Make SEQTA usable and beautiful! A fork of BetterSEQTA to continue development and add WAY more features!!!",
   "icons": {
     "32": "icons/icon-32.png",

public/popup/info.css

@@ -24,6 +24,29 @@
   z-index: 20;
 }
 
+#bksliderinput {
+  background-color: #20e060 !important;
+  color: #20e060 !important;
+  border-radius: 16px !important;
+  border: none !important;
+  width: 100% !important;
+  height: 100% !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+#bksliderinput::-webkit-slider-thumb {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  width: 16px !important;
+  height: 16px !important;
+  transform: scale(1.5) !important;
+  background: #86f078 !important;
+  cursor: pointer !important;
+  border-radius: 50% !important;
+  border: 1px solid #20e060 !important;
+}
+
 .selector-container {
   font-family: Rubik, sans-serif;
   background-color: #131313;

public/popup/info.html

@@ -343,6 +343,16 @@
             </div>
           </div>
 
+          <div class="item-container">
+            <div class="text-container">
+              <h1 class="addonitem">Animated Background Speed</h1>
+              <p class="item subitem">Controls the speed of the animated background.</p>
+            </div>
+            <div class="bkslider">
+              <input type="range" id="bksliderinput" name="Animated Background Slider" min="1" max="200" />
+            </div>
+          </div>
+
           <div class="item-container">
             <div class="text-container">
               <h1 class="addonitem">Custom Theme Colour</h1>

public/popup/info.js

@@ -1,16 +1,3 @@
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-
-// You should have received a copy of the GNU General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
 /*global chrome*/
 
 const onoffselection = document.querySelector("#onoff");
@@ -22,6 +9,8 @@ const miscsection = document.querySelector("#miscsection");
 //const mainpage = document.querySelector("#mainpage");
 const colorpicker = document.querySelector("#colorpicker");
 const animatedbk = document.querySelector("#animatedbk");
+const bkslider = document.querySelector("#bksliderinput");
+
 const customshortcutbutton = document.getElementsByClassName(
   "custom-shortcuts-button",
 )[0];
@@ -97,9 +86,7 @@ function FindSEQTATab() {
     }
   });
 }
-/*
-Store the currently selected settings using chrome.storage.local.
-*/
+
 function storeSettings() {
   chrome.storage.local.set({ onoff: onoffselection.checked }, function () {
     FindSEQTATab();
@@ -112,6 +99,7 @@ function storeNotificationSettings() {
   });
   chrome.storage.local.set({ lessonalert: lessonalert.checked });
   chrome.storage.local.set({ animatedbk: animatedbk.checked });
+  chrome.storage.local.set({ bksliderinput: bkslider.value });
 }
 
 function StoreAllSettings() {
@@ -141,6 +129,7 @@ function updateUI(restoredSettings) {
     notificationcollector.checked = restoredSettings.notificationcollector;
     lessonalert.checked = restoredSettings.lessonalert;
     animatedbk.checked = restoredSettings.animatedbk;
+    bkslider.value = restoredSettings.bksliderinput;
     chrome.storage.local.get(["shortcuts"], function (result) {
       var shortcuts = Object.values(result)[0];
       for (var i = 0; i < shortcutbuttons.length; i++) {
@@ -158,7 +147,7 @@ var stringtoHTML = function (str) {
 };
 
 function CreateShortcutDiv(name) {
-  div = stringtoHTML(`
+  let div = stringtoHTML(`
   <div class="item-container menushortcuts" data-customshortcut="${name}">
     <div class="text-container">
       <h1 class="addonitem" style="font-size: 8px !important;font-weight: 300;">Custom</h1>
@@ -188,7 +177,7 @@ function AddCustomShortcuts() {
 }
 
 function DeleteCustomShortcut(name) {
-  item = document.querySelector(`[data-customshortcut="${name}"]`);
+  let item = document.querySelector(`[data-customshortcut="${name}"]`);
   item.remove();
   chrome.storage.local.get(["customshortcuts"], function (result) {
     var customshortcuts = Object.values(result)[0];
@@ -237,9 +226,6 @@ function CreateCustomShortcut() {
   CreateShortcutDiv(shortcutname);
 }
 
-function onError(e) {
-  console.error(e);
-}
 /*
 On opening the options page, fetch stored settings and update the UI with them.
 */
@@ -258,7 +244,7 @@ document.addEventListener("DOMContentLoaded", function () {
   version.innerHTML = `v${chrome.runtime.getManifest().version}`;
   github.addEventListener("click", openGithub);
 
-  domainbutton.addEventListener("click", function (event) {
+  domainbutton.addEventListener("click", function () {
     chrome.runtime.sendMessage({ type: "addPermissions" });
   });
 
@@ -344,6 +330,7 @@ notificationcollector.addEventListener("change", storeNotificationSettings);
 lessonalert.addEventListener("change", storeNotificationSettings);
 
 animatedbk.addEventListener("change", storeNotificationSettings);
+bkslider.addEventListener("change", storeNotificationSettings);
 
 for (let i = 0; i < allinputs.length; i++) {
   if (