Fix popup being out of date and auto closing

Fixes #1359

src/content.ts

@@ -1519,9 +1519,9 @@ async function createButtons(): Promise<void> {
     controls = await utils.wait(getControls).catch();
 
     // Add button if does not already exist in html
-    createButton("startSegment", "sponsorStart", () => closeInfoMenuAnd(() => startOrEndTimingNewSegment()), "PlayerStartIconSponsorBlocker.svg");
+    createButton("startSegment", "sponsorStart", () => startOrEndTimingNewSegment(), "PlayerStartIconSponsorBlocker.svg");
-    createButton("cancelSegment", "sponsorCancel", () => closeInfoMenuAnd(() => cancelCreatingSegment()), "PlayerCancelSegmentIconSponsorBlocker.svg");
+    createButton("cancelSegment", "sponsorCancel", () => cancelCreatingSegment(), "PlayerCancelSegmentIconSponsorBlocker.svg");
-    createButton("delete", "clearTimes", () => closeInfoMenuAnd(() => clearSponsorTimes()), "PlayerDeleteIconSponsorBlocker.svg");
+    createButton("delete", "clearTimes", () => clearSponsorTimes(), "PlayerDeleteIconSponsorBlocker.svg");
     createButton("submit", "SubmitTimes", submitSponsorTimes, "PlayerUploadIconSponsorBlocker.svg");
     createButton("info", "openPopup", openInfoMenu, "PlayerInfoIconSponsorBlocker.svg");
 
@@ -1742,17 +1742,6 @@ function closeInfoMenu() {
     }
 }
 
-/**
- * The content script currently has no way to notify the info menu of changes. As a workaround we close it, thus making it query the new information when reopened.
- *
- * This function and all its uses should be removed when this issue is fixed.
- * */
-function closeInfoMenuAnd<T>(func: () => T): T {
-    closeInfoMenu();
-
-    return func();
-}
-
 function clearSponsorTimes() {
     const currentVideoID = sponsorVideoID;
 

src/popup.ts

@@ -1,7 +1,7 @@
 import Config from "./config";
 
 import Utils from "./utils";
-import { SponsorTime, SponsorHideType, ActionType } from "./types";
+import { SponsorTime, SponsorHideType, ActionType, StorageChangesObject } from "./types";
 import { Message, MessageResponse, IsInfoFoundMessageResponse } from "./messageTypes";
 import { showDonationLink } from "./utils/configUtils";
 import { AnimationUtils } from "./utils/animationUtils";
@@ -133,6 +133,9 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     getSegmentsFromContentScript(false);
     await utils.wait(() => Config.config !== null && allowPopup, 5000, 5);
     document.querySelector("body").style.removeProperty("visibility");
+    if (!Config.configSyncListeners.includes(contentConfigUpdateListener)) {
+        Config.configSyncListeners.push(contentConfigUpdateListener);
+    }
 
     PageElements.sbCloseButton.addEventListener("click", () => {
         sendTabMessage({
@@ -917,7 +920,16 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         return (days > 0 ? days + chrome.i18n.getMessage("dayAbbreviation") + " " : "") + (hours > 0 ? hours + chrome.i18n.getMessage("hourAbbreviation") + " " : "") + (minutes % 60).toFixed(1);
     }
 
-    //end of function
+    function contentConfigUpdateListener(changes: StorageChangesObject) {
+        for (const key in changes) {
+            switch(key) {
+                case "unsubmittedSegments":
+                    sponsorTimes = Config.config.unsubmittedSegments[currentVideoID] ?? [];
+                    updateSegmentEditingUI();
+                    break;
+            }
+        }
+    }
 }
 
 runThePopup();