refactor: remove dependence on frequent storage requests

src/SEQTA.ts

@@ -9,7 +9,6 @@ import icon48 from './resources/icons/icon-48.png'
 import Color from 'color'
 import MenuitemSVGKey from './seqta/content/MenuItemSVGKey.json'
 import { MessageHandler } from './seqta/utils/listeners/MessageListener'
-import { SettingsState } from "./types/storage"
 import ShortcutLinks from './seqta/content/links.json'
 import Sortable  from 'sortablejs'
 import assessmentsicon from './seqta/icons/assessmentsIcon'
@@ -18,14 +17,13 @@ import coursesicon from './seqta/icons/coursesIcon'
 import { delay } from "./seqta/utils/delay"
 import { enableCurrentTheme } from "./seqta/ui/themes/enableCurrent";
 import iframeCSS from "./css/iframe.scss?raw"
-import { onError } from './seqta/utils/onError'
 import stringToHTML from './seqta/utils/stringToHTML'
 import { updateAllColors } from './seqta/ui/colors/Manager'
 import { SettingsResizer } from "./seqta/ui/SettingsResizer";
 import documentLoadCSS from './css/documentload.scss?inline'
 import injectedCSS from './css/injected.scss?inline'
 import { injectYouTubeVideo } from './seqta/ui/VideoLoader'
-import { settingsState } from './seqta/utils/listeners/SettingsState'
+import { initializeSettingsState, settingsState } from './seqta/utils/listeners/SettingsState'
 import { StorageChangeHandler } from './seqta/utils/listeners/StorageChanges'
 import { AddBetterSEQTAElements } from './seqta/ui/AddBetterSEQTAElements'
 
@@ -60,8 +58,12 @@ async function init() {
     documentLoadStyle.textContent = documentLoadCSS
     document.head.appendChild(documentLoadStyle)
 
+    
     enableCurrentTheme()
     try {
+      // wait until settingsState has been loaded from storage
+      await initializeSettingsState();
+      
       if (settingsState.onoff) {
         const injectedStyle = document.createElement('style')
         injectedStyle.textContent = injectedCSS
@@ -71,7 +73,7 @@ async function init() {
       
       main()
     } catch (error: any) {
-      onError(error)
+      console.error(error)
     }
   }
 
@@ -93,9 +95,10 @@ export function enableAnimatedBackground() {
   }
 }
 
-export async function HideMenuItems(): Promise<void> {
+async function HideMenuItems(): Promise<void> {
   try {
     let stylesheetInnerText: string = ''
+    console.log('ASssessments: ', settingsState.menuitems)
     for (const [menuItem, { toggle }] of Object.entries(settingsState.menuitems)) {
       if (!toggle) {
         stylesheetInnerText += SetDisplayNone(menuItem)
@@ -770,8 +773,7 @@ function main() {
     loading()
     InjectCustomIcons()
     HideMenuItems()
-    
-    window.addEventListener('load', tryLoad)
+    tryLoad()
   } else {
     handleDisabled()
     window.addEventListener('load', handleDisabled)
@@ -901,9 +903,7 @@ export function OpenMenuOptions() {
     for (let i = 0; i < childnodes.length; i++) {
       const element = childnodes[i]
       newdefaultmenuorder.push((element as HTMLElement).dataset.key)
-      browser.storage.local.set({
-        defaultmenuorder: newdefaultmenuorder
-      })
+      settingsState.defaultmenuorder = newdefaultmenuorder
     }
   }
   let childnodes = menu!.firstChild!.childNodes
@@ -913,9 +913,7 @@ export function OpenMenuOptions() {
       if (!settingsState.defaultmenuorder.indexOf((element as HTMLElement).dataset.key)) {
         let newdefaultmenuorder = settingsState.defaultmenuorder
         newdefaultmenuorder.push((element as HTMLElement).dataset.key)
-        browser.storage.local.set({
-          defaultmenuorder: newdefaultmenuorder
-        })
+        settingsState.defaultmenuorder = newdefaultmenuorder
       }
     }
   }
@@ -1083,9 +1081,8 @@ export function OpenMenuOptions() {
 
   defaultbutton?.addEventListener('click', function() {
     const options = settingsState.defaultmenuorder
-    browser.storage.local.set({
-      menuorder: options
-    })
+    settingsState.menuorder = options
+
     ChangeMenuItemPositions(options)
 
     for (let i = 0; i < menubuttons.length; i++) {
@@ -1103,7 +1100,7 @@ export function OpenMenuOptions() {
 
 function saveNewOrder(sortable: any) {
   var order = sortable.toArray()
-  browser.storage.local.set({ menuorder: order })
+  settingsState.menuorder = order
 }
 
 function cloneAttributes(target: any, source: any) {
@@ -1592,24 +1589,18 @@ function CreateSubjectFilter(subjectcode: any, itemcolour: string, checked: any)
   label.append(span)
 
   input.addEventListener('change', function (change) {
-    const result = browser.storage.local.get()
-    function open (storage: any) {
-      let filters = storage.subjectfilters
+    let filters = settingsState.subjectfilters
     let id = (change.target as HTMLInputElement)!.id.split('-')[1]
     filters[id] = (change.target as HTMLInputElement)!.checked
 
-      browser.storage.local.set({ subjectfilters: filters })
-    }
-    result.then(open, onError)
+    settingsState.subjectfilters = filters
   })
 
   return label
 }
 
 function CreateFilters(subjects: any) {
-  const result = browser.storage.local.get()
-  function open (result: any) {
-    let filteroptions = result.subjectfilters
+  let filteroptions = settingsState.subjectfilters
 
   let filterdiv = document.querySelector('#upcoming-filters')
   for (let i = 0; i < subjects.length; i++) {
@@ -1617,7 +1608,7 @@ function CreateFilters(subjects: any) {
     // eslint-disable-next-line
     if (!Object.prototype.hasOwnProperty.call(filteroptions, element.code)) {
       filteroptions[element.code] = true
-        browser.storage.local.set({ subjectfilters: filteroptions })
+      settingsState.subjectfilters = filteroptions
     }
     let elementdiv = CreateSubjectFilter(
       element.code,
@@ -1627,11 +1618,9 @@ function CreateFilters(subjects: any) {
 
     filterdiv!.append(elementdiv)
   }
-  }
-  result.then(open, onError)
 }
 
-function CreateUpcomingSection(assessments: any, activeSubjects: any) {
+async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
   let upcomingitemcontainer = document.querySelector('#upcoming-items')
   let overdueDates = []
   let upcomingDates = {}
@@ -1656,7 +1645,7 @@ function CreateUpcomingSection(assessments: any, activeSubjects: any) {
   var TomorrowDate = new Date()
   TomorrowDate.setDate(TomorrowDate.getDate() + 1)
 
-  GetLessonColours().then((colours) => {
+  const colours = await GetLessonColours()
     
   let subjects = colours
   for (let i = 0; i < assessments.length; i++) {
@@ -1743,12 +1732,7 @@ function CreateUpcomingSection(assessments: any, activeSubjects: any) {
     }
 
   }
-    const result = browser.storage.local.get()
-    function open (result: any) {
-      FilterUpcomingAssessments(result.subjectfilters)
-    }
-    result.then(open, onError)
-  })
+  FilterUpcomingAssessments(settingsState.subjectfilters)
 }
 
 function AddPlaceHolderToParent(parent: any, numberofassessments: any) {
@@ -1765,7 +1749,7 @@ function AddPlaceHolderToParent(parent: any, numberofassessments: any) {
   parent.append(textcontainer)
 }
 
-function FilterUpcomingAssessments(subjectoptions: any) {
+export function FilterUpcomingAssessments(subjectoptions: any) {
   for (var item in subjectoptions) {
     let subjectdivs = document.querySelectorAll(`[data-subject="${item}"]`)
 
@@ -1809,12 +1793,6 @@ function FilterUpcomingAssessments(subjectoptions: any) {
   }
 }
 
-browser.storage.onChanged.addListener(function (changes) {
-  if (changes.subjectfilters) {
-    FilterUpcomingAssessments(changes.subjectfilters.newValue)
-  }
-})
-
 async function GetLessonColours() {
   let func = fetch(`${location.origin}/seqta/student/load/prefs?`, {
     method: 'POST',
@@ -1889,9 +1867,7 @@ export function RemoveShortcutDiv(elements: any) {
 }
 
 async function AddCustomShortcutsToPage() {
-  const result = await browser.storage.local.get(['customshortcuts'])   
-   
-  let customshortcuts: any = Object.values(result)[0]
+  let customshortcuts: any = settingsState.customshortcuts
   if (customshortcuts.length > 0) {
     for (let i = 0; i < customshortcuts.length; i++) {
       const element = customshortcuts[i]
@@ -2014,11 +1990,7 @@ export async function loadHomePage() {
     changeTimetable(1)
   })
 
-  // Adds the shortcuts to the shortcut container
-  const result = await browser.storage.local.get(['shortcuts'])
-  
-  const shortcuts = Object.values(result)[0]
-  addShortcuts(shortcuts)
+  addShortcuts(settingsState.shortcuts)
   AddCustomShortcutsToPage()
 
   // Creates the upcoming container and appends to the home container
@@ -2106,9 +2078,6 @@ export async function loadHomePage() {
         }
       } else {
         if (!NoticeContainer!.innerText) {
-          // For each element in the response json:
-          const result = browser.storage.local.get(['DarkMode'])
-          function noticeInfoDiv (result: any) {
           for (let i = 0; i < NoticesPayload.payload.length; i++) {
             if (labelArray.includes(JSON.stringify(NoticesPayload.payload[i].label))) {
             // Create a div, and place information from json response
@@ -2140,7 +2109,7 @@ export async function loadHomePage() {
               let colour = NoticesPayload.payload[i].colour
               if (typeof (colour) === 'string') {
                 const rgb = GetThresholdOfColor(colour)
-                  const DarkModeResult = result.DarkMode
+                const DarkModeResult = settingsState.DarkMode
                 if (rgb < 100 && DarkModeResult) {
                   colour = undefined
                 }
@@ -2157,8 +2126,6 @@ export async function loadHomePage() {
             }
           }
         }
-          result.then(noticeInfoDiv, onError)
-        }
       }
     }
   }
@@ -2183,11 +2150,8 @@ export async function loadHomePage() {
           }
         } else {
           document.querySelectorAll('.notice').forEach(e => e.remove())
-          // For each element in the response json:
-          const result = browser.storage.local.get(['DarkMode'])
-          function noticeInfoDiv (result: any) {
-            for (let i = 0; i < NoticesPayload.payload.length; i++) {
 
+          for (let i = 0; i < NoticesPayload.payload.length; i++) {
             if (labelArray.includes(JSON.stringify(NoticesPayload.payload[i].label))) {
             // Create a div, and place information from json response
               const NewNotice = document.createElement('div')
@@ -2218,7 +2182,7 @@ export async function loadHomePage() {
               let colour = NoticesPayload.payload[i].colour
               if (typeof (colour) === 'string') {
                 const rgb = GetThresholdOfColor(colour)
-                  const DarkModeResult = result.DarkMode
+                const DarkModeResult = settingsState.DarkMode
                 if (rgb < 100 && DarkModeResult) {
                   colour = undefined
                 }
@@ -2235,21 +2199,14 @@ export async function loadHomePage() {
             }
           }
         }
-          result.then(noticeInfoDiv, onError)
-        }
       }
     }
   }
   dateControl.addEventListener('input', onInputChange)
 
-  // Sends similar HTTP Post Request for the notices
-  const result1 = browser.storage.local.get()
-  function open1 (result: any) {
-    if (result.notificationcollector) {
+  if (settingsState.notificationcollector) {
     enableNotificationCollector()
   }
-  }
-  result1.then(open1, onError)
   
   const assessments = await GetUpcomingAssessments()
   const classes = await GetActiveClasses()
@@ -2287,7 +2244,7 @@ export async function loadHomePage() {
 
   CurrentAssessments.sort(comparedate)
 
-  CreateUpcomingSection(CurrentAssessments, activeSubjects)
+  await CreateUpcomingSection(CurrentAssessments, activeSubjects)
 }
 
 export function addShortcuts(shortcuts: any) {
@@ -2455,11 +2412,8 @@ async function CheckForMenuList() {
   }
 }
 
-function documentTextColor () {
-  const result = browser.storage.local.get(['DarkMode'])
-  function changeDocTextCol (result: any) {
-    const Darkmode = result.DarkMode
-    if (Darkmode) {
+export function documentTextColor() {
+  if (settingsState.DarkMode) {
     const documentArray = document.querySelectorAll('td:not([class^="colourBar"]):not([class^="title"])')
     const fullDocArray = document.querySelectorAll('tr.document')
     const linkArray = document.querySelectorAll('a.uiFile')
@@ -2486,18 +2440,9 @@ function documentTextColor () {
       item.setAttribute('style', 'color: black')
     }
   }
-  }
-  result.then(changeDocTextCol, onError)
 }
-browser.storage.onChanged.addListener(documentTextColor)
 
 function LoadInit() {
   console.log('[BetterSEQTA+] Started Init')
-  const result = browser.storage.local.get()
-  function open (result: any) {
-    if (result.onoff) {
-      loadHomePage()
-    }
-  }
-  result.then(open, onError)
+  if (settingsState.onoff) loadHomePage()
 }

src/seqta/ui/colors/lightenAndPaleColor.ts

@@ -2,6 +2,8 @@ import Color from 'color';
 
 
 export function lightenAndPaleColor(inputColor: any, lightenFactor = 0.75, paleFactor = 0.55) {
+  if (!inputColor) return;
+
   if (inputColor.includes('gradient')) {
     const baseColor = findMatchingColor(inputColor);
 

src/seqta/utils/listeners/SettingsState.ts

@@ -14,10 +14,11 @@ class StorageManager {
     this.loadFromStorage();
 
     const handler: ProxyHandler<StorageManager> = {
-      get: (target, prop: keyof SettingsState | 'register') => {
+      get: (target, prop: keyof SettingsState | 'register' | 'initialize') => {
         if (prop in target) {
           return (target as any)[prop];
         }
+        //console.log(this.data[prop], prop, this.data)
         return Reflect.get(target.data, prop);
       },
       set: (target, prop: keyof SettingsState, value) => {
@@ -39,6 +40,12 @@ class StorageManager {
     return StorageManager.instance as StorageManager & SettingsState;
   }
 
+  public static async initialize(): Promise<StorageManager & SettingsState> {
+    const instance = StorageManager.getInstance();
+    await instance.loadFromStorage();
+    return instance;
+  }
+
   private async loadFromStorage(): Promise<void> {
     const result = await browser.storage.local.get();
     this.data = { ...this.data, ...result };
@@ -76,3 +83,4 @@ class StorageManager {
 }
 
 export const settingsState = StorageManager.getInstance();
+export const initializeSettingsState = async () => await StorageManager.initialize();

src/seqta/utils/listeners/StorageChanges.ts

@@ -3,10 +3,12 @@ import { updateAllColors } from '../../ui/colors/Manager';
 import {
   CreateBackground,
   CreateCustomShortcutDiv,
+  FilterUpcomingAssessments,
   RemoveBackground,
   RemoveShortcutDiv,
   addShortcuts,
   disableNotificationCollector,
+  documentTextColor,
   enableNotificationCollector,
 } from '../../../SEQTA';
 import { updateBgDurations } from '../../ui/Animation';
@@ -20,7 +22,7 @@ export class StorageChangeHandler {
 
   private registerHandlers() {
     settingsState.register('selectedColor', updateAllColors.bind(this));
-    settingsState.register('DarkMode', updateAllColors.bind(this));
+    settingsState.register('DarkMode', this.handleDarkModeChange.bind(this));
     settingsState.register('onoff', this.handleOnOffChange.bind(this));
     settingsState.register('shortcuts', this.handleShortcutsChange.bind(this));
     settingsState.register('customshortcuts', this.handleCustomShortcutsChange.bind(this));
@@ -28,6 +30,12 @@ export class StorageChangeHandler {
     settingsState.register('bksliderinput', updateBgDurations.bind(this));
     settingsState.register('animatedbk', this.handleAnimatedBkChange.bind(this));
     settingsState.register('transparencyEffects', this.handleTransparencyEffectsChange.bind(this));
+    settingsState.register('subjectfilters', FilterUpcomingAssessments.bind(this));
+  }
+
+  private handleDarkModeChange() {
+    updateAllColors();
+    documentTextColor();
   }
 
   private handleOnOffChange() {