clean up storageListeners + fix popup

src/SEQTA.js

@@ -739,7 +739,7 @@ export function ColorLuminance(color, lum = 0) {
   }
 }
 
-StorageListener();
+new StorageListener();
 
 var PageLoaded = false;
 async function CheckLoadOnPeriods() {

src/inject/injected/popup.css

@@ -10,3 +10,13 @@
   opacity: 0;
   pointer-events: none;
 }
+
+.outside-container {
+  margin: 0;
+  overflow: hidden;
+  position: absolute;
+  right: 10px;
+  top: 80px;
+  height: 590px;
+  z-index: 20;
+}

src/seqta/ui/Colors.js

@@ -0,0 +1,19 @@
+/* global chrome */
+import { ColorLuminance, GetThresholdofHex } from "../../SEQTA.js";
+
+export function updateDocumentColors(newColor) {
+  const rbg = GetThresholdofHex(newColor);
+  const textColor = rbg > 210 ? "black" : "white";
+  const logo = `url(${chrome.runtime.getURL(
+    `icons/betterseqta-${textColor === "black" ? "dark" : "light"}-full.png`
+  )})`;
+
+  document.documentElement.style.setProperty("--text-color", textColor);
+  document.documentElement.style.setProperty("--betterseqta-logo", logo);
+  document.documentElement.style.setProperty("--better-main", newColor);
+
+  const lightColor =
+    newColor === "#ffffff" ? "#b7b7b7" : ColorLuminance(newColor, 0.99);
+
+  document.documentElement.style.setProperty("--better-light", lightColor);
+}

src/seqta/utils/StorageListener.js

@@ -1,76 +1,58 @@
 /* global chrome */
-import { lightenAndPaleColor, GetThresholdofHex, ColorLuminance, CreateCustomShortcutDiv, RemoveCustomShortcutDiv } from "../../SEQTA.js";
 
-export default function StorageListener() {
+import {
-  chrome.storage.onChanged.addListener(function (changes) {
+  CreateCustomShortcutDiv,
+  RemoveCustomShortcutDiv,
+} from "../../SEQTA.js";
+import { updateDocumentColors } from "../ui/Colors.js";
+
+export default class StorageListener {
+  constructor() {
+    chrome.storage.onChanged.addListener(this.handleStorageChanges.bind(this));
+  }
+
+  handleStorageChanges(changes) {
     if (changes.selectedColor) {
-      try {
+      this.handleSelectedColorChange(changes.selectedColor.newValue);
-        chrome.storage.local.get(["DarkMode"], function (result) {
-          if (!result.DarkMode) {
-            console.log(changes.selectedColor.newValue);
-            document.documentElement.style.setProperty(
-              "--better-pale",
-              lightenAndPaleColor(changes.selectedColor.newValue)
-            );
-          }
-        });
-      } catch (err) {
-        console.log(err);
-      }
-  
-      let rbg = GetThresholdofHex(changes.selectedColor.newValue);
-  
-      if (rbg > 210) {
-        document.documentElement.style.setProperty("--text-color", "black");
-        document.documentElement.style.setProperty(
-          "--betterseqta-logo",
-          `url(${chrome.runtime.getURL("icons/betterseqta-dark-full.png")})`
-        );
-      } else {
-        document.documentElement.style.setProperty("--text-color", "white");
-        document.documentElement.style.setProperty(
-          "--betterseqta-logo",
-          `url(${chrome.runtime.getURL("icons/betterseqta-light-full.png")})`
-        );
-      }
-  
-      document.documentElement.style.setProperty(
-        "--better-main",
-        changes.selectedColor.newValue
-      );
-  
-      if (changes.selectedColor.newValue == "#ffffff") {
-        document.documentElement.style.setProperty("--better-light", "#b7b7b7");
-      } else {
-        document.documentElement.style.setProperty(
-          "--better-light",
-          ColorLuminance(changes.selectedColor.newValue, 0.99)
-        );
-      }
     }
 
     if (changes?.customshortcuts?.newValue) {
-      console.log(changes);
+      this.handleCustomShortcutsChange(
+        changes.customshortcuts.oldValue,
+        changes.customshortcuts.newValue
+      );
+    }
+  }
 
-      const oldValue = changes.customshortcuts.oldValue;
+  handleSelectedColorChange(newColor) {
-      const newValue = changes.customshortcuts.newValue;
+    try {
-  
+      chrome.storage.local.get(["DarkMode"], (result) => {
-      // Check for addition
+        if (!result.DarkMode) {
-      if (newValue.length > oldValue.length) {
+          updateDocumentColors(newColor);
-        CreateCustomShortcutDiv(newValue[oldValue.length]);
-      }
-  
-      // Check for removal
-      else if (newValue.length < oldValue.length) {
-        // Find the removed element
-        const removedElement = oldValue.find(
-          (oldItem) => !newValue.some((newItem) => JSON.stringify(oldItem) === JSON.stringify(newItem))
-        );
-  
-        if (removedElement) {
-          RemoveCustomShortcutDiv(removedElement);
         }
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  handleCustomShortcutsChange(oldValue, newValue) {
+    // Check for addition
+    if (newValue.length > oldValue.length) {
+      CreateCustomShortcutDiv(newValue[oldValue.length]);
+    }
+    // Check for removal
+    else if (newValue.length < oldValue.length) {
+      const removedElement = oldValue.find(
+        (oldItem) =>
+          !newValue.some(
+            (newItem) => JSON.stringify(oldItem) === JSON.stringify(newItem)
+          )
+      );
+
+      if (removedElement) {
+        RemoveCustomShortcutDiv(removedElement);
       }
     }
-  });
+  }
 }