refactor: Optimize element search and remove unused code in SEQTA.ts and injected.scss

src/SEQTA.ts

@@ -700,7 +700,13 @@ export function tryLoad() {
 
   updateIframesWithDarkMode()
   // Waits for page to call on load, run scripts
-  removeThemeTagsFromNotices()
+  document.addEventListener(
+    'load',
+    function () {
+      removeThemeTagsFromNotices()
+    },
+    true,
+  )
 }
 
 function ChangeMenuItemPositions(storage: any) {
@@ -770,7 +776,7 @@ function main() {
   }
 
   const handleDisabled = () => {
-    waitForElm('.code').then(AppendElementsToDisabledPage)
+    waitForElm('.code', true, 50).then(AppendElementsToDisabledPage)
   }
 
   if (settingsState.onoff) {
@@ -789,6 +795,7 @@ function main() {
     tryLoad()
   } else {
     handleDisabled()
+    window.addEventListener('load', handleDisabled)
   }
 }
 

src/css/documentload.scss

@@ -22,3 +22,73 @@ html {
   background-color: #161616;
   font-family: Rubik, Roboto !important;
 }
+
+.tooltip svg {
+  fill: var(--theme-primary);
+}
+.tooltip {
+  display: inline-block;
+  z-index: 5 !important;
+  width: 28px;
+  background: none;
+  box-shadow: none;
+  padding: 2px;
+  position: absolute;
+}
+.tooltip .tooltiptext {
+  width: 120px;
+  transform: scale(0);
+  transition: transform 0.2s;
+  transform-origin: top;
+  background: var(--background-primary);
+  color: var(--text-primary);
+  text-align: center;
+  border-radius: 6px;
+  padding: 2px;
+  position: absolute;
+  z-index: 1;
+  top: 105%;
+  left: 50%;
+  margin-left: -62px;
+}
+.tooltip .tooltiptext::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent var(--text-primary) transparent;
+}
+.tooltiptext p:hover {
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.3) !important;
+  transition: 200ms;
+}
+.tooltiptext p {
+  border-radius: 8px !important;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  margin: 2px;
+}
+.tooltip:hover .tooltiptext {
+  transform: scale(1);
+  transform-origin: top;
+  transition: transform 0.2s;
+}
+body:has(.outside-container:not(.hide)) #AddedSettings.tooltip:hover > .tooltiptext {
+  transform: scale(0);
+}
+.assessmenttooltip svg {
+  fill: var(--text-primary);
+}
+.assessmenttooltip {
+  bottom: 0px;
+  left: 5px;
+}
+.topmenutooltip {
+  top: 115% !important;
+  background: var(--text-primary) !important;
+  color: var(--theme-primary) !important;
+}

src/css/injected.scss

@@ -2811,80 +2811,11 @@ li.MessageList__unread___3imtO {
   background: var(--auto-background);
   outline: solid 1px black;
 }
-.tooltip svg {
-  fill: var(--theme-primary);
-}
-.tooltip {
-  display: inline-block;
-  z-index: 5 !important;
-  width: 28px;
-  background: none;
-  box-shadow: none;
-  padding: 2px;
-  position: absolute;
-}
-.tooltip .tooltiptext {
-  width: 120px;
-  transform: scale(0);
-  transition: transform 0.2s;
-  transform-origin: top;
-  background: var(--background-primary);
-  color: var(--text-primary);
-  text-align: center;
-  border-radius: 6px;
-  padding: 2px;
-  position: absolute;
-  z-index: 1;
-  top: 105%;
-  left: 50%;
-  margin-left: -62px;
-}
-.tooltip .tooltiptext::after {
-  content: "";
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: transparent transparent var(--text-primary) transparent;
-}
-.tooltiptext p:hover {
-  cursor: pointer;
-  background: rgba(0, 0, 0, 0.3) !important;
-  transition: 200ms;
-}
-.tooltiptext p {
-  border-radius: 8px !important;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  margin: 2px;
-}
-.tooltip:hover .tooltiptext {
-  transform: scale(1);
-  transform-origin: top;
-  transition: transform 0.2s;
-}
-body:has(.outside-container:not(.hide)) #AddedSettings.tooltip:hover > .tooltiptext {
-  transform: scale(0);
-}
-.assessmenttooltip svg {
-  fill: var(--text-primary);
-}
-.assessmenttooltip {
-  bottom: 0px;
-  left: 5px;
-}
 .DarkLightButton {
   right: 145px !important;
   z-index: 21 !important;
   top: 17.5px;
 }
-.topmenutooltip {
-  top: 115% !important;
-  background: var(--text-primary) !important;
-  color: var(--theme-primary) !important;
-}
 .whatsnewContainer {
   position: absolute;
   width: 38em;

src/seqta/ui/AddBetterSEQTAElements.ts

@@ -16,18 +16,15 @@ export async function AddBetterSEQTAElements() {
     handleStudentData();
     createNewsButton();
     setupEventListeners();
-  }
+    appendBackgroundToUI();
-
-  appendBackgroundToUI();
-  addExtensionSettings();
-  if (settingsState.onoff) {
     await createSettingsButton();
     await addDarkLightToggle();
     customizeMenuToggle();
-  } else {
-    await createSettingsButton();
   }
 
+  addExtensionSettings();
+  if (!settingsState.onoff) await createSettingsButton();
+
   setupSettingsButton();
 }
 
@@ -212,9 +209,13 @@ function setupEventListeners() {
 }
 
 async function createSettingsButton() {
-  let SettingsButton = stringToHTML(
+  let SettingsButton = stringToHTML( /* html */`
-    '<button class="addedButton tooltip" id="AddedSettings"><svg width="24" height="24" viewBox="0 0 24 24"><g><g><path d="M23.182,6.923c-.29,0-3.662,2.122-4.142,2.4l-2.8-1.555V4.511l4.257-2.456a.518.518,0,0,0,.233-.408.479.479,0,0,0-.233-.407,6.511,6.511,0,1,0-3.327,12.107,6.582,6.582,0,0,0,6.148-4.374,5.228,5.228,0,0,0,.333-1.542A.461.461,0,0,0,23.182,6.923Z"></path><path d="M9.73,10.418,7.376,12.883c-.01.01-.021.016-.03.025L1.158,19.1a2.682,2.682,0,1,0,3.793,3.793l4.583-4.582,0,0,4.1-4.005-.037-.037A9.094,9.094,0,0,1,9.73,10.418ZM3.053,21.888A.894.894,0,1,1,3.946,21,.893.893,0,0,1,3.053,21.888Z"></path></g></g></svg><div class="tooltiptext topmenutooltip">BetterSEQTA+ Settings</div></button>'
+    <button class="addedButton tooltip" id="AddedSettings">
-  );
+      <svg width="24" height="24" viewBox="0 0 24 24">
+        <g><g><path d="M23.182,6.923c-.29,0-3.662,2.122-4.142,2.4l-2.8-1.555V4.511l4.257-2.456a.518.518,0,0,0,.233-.408.479.479,0,0,0-.233-.407,6.511,6.511,0,1,0-3.327,12.107,6.582,6.582,0,0,0,6.148-4.374,5.228,5.228,0,0,0,.333-1.542A.461.461,0,0,0,23.182,6.923Z"></path><path d="M9.73,10.418,7.376,12.883c-.01.01-.021.016-.03.025L1.158,19.1a2.682,2.682,0,1,0,3.793,3.793l4.583-4.582,0,0,4.1-4.005-.037-.037A9.094,9.094,0,0,1,9.73,10.418ZM3.053,21.888A.894.894,0,1,1,3.946,21,.893.893,0,0,1,3.053,21.888Z"></path></g></g>
+      </svg>
+    </button>
+  `);
   let ContentDiv = document.getElementById('content');
   ContentDiv!.append(SettingsButton.firstChild!);
 }