Don't update the whole segment list on time update (#1569)

Update segment element classes instead.
This probably is more efficient than what we're doing currently.
Also, this seems to fix a bug where the vote confirmation/error msg is removed immediately

Author: mini-bomba

src/popup.ts

@@ -614,6 +614,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             const votingButtons = document.createElement("details");
             votingButtons.classList.add("votingButtons");
             votingButtons.id = "votingButtons" + UUID;
+            votingButtons.setAttribute("data-uuid", UUID);
             votingButtons.addEventListener("toggle", () => {
                 if (votingButtons.open) {
                     openedUUIDs.push(UUID);
@@ -1068,10 +1069,37 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         port.onMessage.addListener((msg) => onMessage(msg));
     }
 
+    function updateCurrentTime(currentTime: number) {
+        // Create a map of segment UUID -> segment object for easy access
+        const segmentMap: Record<string, SponsorTime> = {};
+        for (const segment of downloadedTimes)
+            segmentMap[segment.UUID] = segment
+
+        // Iterate over segment elements and update their classes
+        const segmentList = document.getElementById("issueReporterTimeButtons");
+        for (const segmentElement of segmentList.children) {
+            const UUID = segmentElement.getAttribute("data-uuid");
+            if (UUID == null || segmentMap[UUID] == undefined) continue;
+
+            const summaryElement = segmentElement.querySelector("summary")
+            if (summaryElement == null) continue;
+
+            const segment = segmentMap[UUID]
+            summaryElement.classList.remove("segmentActive", "segmentPassed")
+            if (currentTime >= segment.segment[0]) {
+                if (currentTime < segment.segment[1]) {
+                    summaryElement.classList.add("segmentActive");
+                } else {
+                    summaryElement.classList.add("segmentPassed");
+                }
+            }
+        }
+    }
+
     function onMessage(msg: PopupMessage) {
         switch (msg.message) {
             case "time":
-                displayDownloadedSponsorTimes(downloadedTimes, msg.time);
+                updateCurrentTime(msg.time);
                 break;
             case "infoUpdated":
                 infoFound(msg);