sync profile selected in the sidepanel with the current one

extension/core/bg/data/tabs-data.js

@@ -25,12 +25,22 @@ singlefile.tabsData = (() => {
 	let persistentData, temporaryData;
 	getPersistent().then(tabsData => persistentData = tabsData);
 	return {
+		onMessage,
 		onTabRemoved,
 		getTemporary,
 		get: getPersistent,
 		set: setPersistent
 	};
 
+	async function onMessage(message) {
+		if (message.getTabsData) {
+			return getPersistent();
+		}
+		if (message.setTabsData) {
+			return setPersistent(message.tabsData);
+		}
+	}
+
 	async function onTabRemoved(tabId) {
 		const tabsData = await getPersistent();
 		delete tabsData[tabId];

extension/core/bg/messages.js

@@ -40,6 +40,9 @@ singlefile.messages = (() => {
 			message.resetProfile || message.exportConfig || message.importConfig || message.updateProfile || message.updateRule) {
 			return singlefile.config.onMessage(message, sender);
 		}
+		if (message.getTabsData || message.setTabsData) {
+			return singlefile.tabsData.onMessage(message, sender);
+		}
 	});
 	if (browser.runtime.onMessageExternal) {
 		browser.runtime.onMessageExternal.addListener(async (message, sender) => {

extension/ui/bg/ui-menu.js

@@ -359,8 +359,10 @@ singlefile.ui.menu = (() => {
 	}
 
 	async function refreshExternalComponents(tab) {
+		const tabsData = await singlefile.tabsData.get(tab.id);
 		await singlefile.autosave.refreshTabs();
 		singlefile.ui.button.refresh(tab);
+		await browser.runtime.sendMessage({ refreshOptions: true, profileName: tabsData.profileName });
 	}
 
 	async function refreshTab(tab) {

extension/ui/bg/ui-options.js

@@ -145,6 +145,12 @@
 	const promptCancelButton = document.getElementById("promptCancelButton");
 	const promptConfirmButton = document.getElementById("promptConfirmButton");
 
+	let sidePanelDisplay;
+	browser.runtime.onMessage.addListener(message => {
+		if (message.refreshOptions && sidePanelDisplay) {
+			refresh(message.profileName);
+		}
+	});
 	let pendingSave = Promise.resolve();
 	let autoSaveProfileChanged;
 	ruleProfileInput.onchange = () => {
@@ -318,6 +324,12 @@
 			}
 			if (target == profileNamesInput) {
 				await refresh(profileNamesInput.value);
+				if (sidePanelDisplay) {
+					const tabsData = await browser.runtime.sendMessage({ getTabsData: true });
+					tabsData.profileName = profileNamesInput.value;
+					await browser.runtime.sendMessage({ setTabsData: true, tabsData });
+					await browser.runtime.sendMessage({ refreshMenu: true });
+				}
 			} else {
 				await refresh();
 			}
@@ -398,10 +410,14 @@
 		document.querySelector(".new-window-link").remove();
 	}
 	if (location.href.endsWith("#side-panel")) {
+		sidePanelDisplay = true;
 		document.querySelector(".options-title").remove();
 		document.documentElement.classList.add("side-panel");
+		const tabsData = await browser.runtime.sendMessage({ getTabsData: true });
+		refresh(tabsData.profileName);
+	} else {
+		refresh();
 	}
-	refresh();
 
 	async function refresh(profileName) {
 		const [profiles, rules] = await Promise.all([browser.runtime.sendMessage({ getProfiles: true }), browser.runtime.sendMessage({ getRules: true })]);