feat: update bookmark tree in real-time on options page if there is a…

…ny folder-related changes

src/scripts/options/constants.js

@@ -70,3 +70,4 @@ const CLOSE_WELCOME = '#close-welcome';
 const DELETE_WELCOME = '#delete-welcome';
 const VERSION = '[data-manifest*="placeholder-version"]';
 const NAME = '[data-manifest*="placeholder-name"]';
+const BOOKMARK_TREE_FIXED_OPTIONS = ['none', 'last'];

src/scripts/options/display.js

@@ -21,16 +21,31 @@ function buildBookmarkFolderItems(bookmarkItem, indent, selectors) {
 		bookmarkItem.children.length !== 0
 	) {
 		Array.from(bookmarkItem.children).forEach((child) =>
-			buildItems(child, indentProgress, selectors),
+		buildBookmarkFolderItems(child, indentProgress, selectors),
 		);
 	}
 }
 
-// Build the bookmarks tree
 function buildBookmarkFolderTree(bookmarkItems, selectors) {
+	resetBookmarkFolderTree(selectors);
 	buildBookmarkFolderItems(bookmarkItems[0], 0, selectors);
 }
 
+function resetBookmarkFolderTree(selectors) {
+	Array.from(selectors).forEach((selector) => {
+		const select = document.querySelector(selector);
+		for (let i = select.options.length; i >= 0; i--) {
+			const item = select.item(i);
+			if (
+				item !== null
+				&& !BOOKMARK_TREE_FIXED_OPTIONS.includes(item.value)
+			) {
+				select.remove(i);
+			}
+		}
+	});
+}
+
 // Inserts data from the manifest into the options page
 function insertDataFromManifest() {
 	const manifest = browser.runtime.getManifest();

src/scripts/options/options.js

@@ -1,15 +1,13 @@
 'use strict';
 
-// Restore and display the extension saved options
-async function restoreOptions() {
+async function restoreInputs(options) {
 	const bookmarkTree = await browser.bookmarks.getTree();
 	const folderSelections = [];
 	folderSelections.push(buildSelector(BUILTIN, FOLDER));
 	folderSelections.push(buildSelector(ALLTABS, FOLDER));
 	folderSelections.push(buildSelector(ICON, FOLDER));
 	buildBookmarkFolderTree(bookmarkTree, folderSelections);
 
-	const options = await Utils.getOptions();
 	Object.keys(OPTIONS_IDS).forEach((key) => {
 		if (typeof options[key] !== 'undefined') {
 			Object.keys(options[key]).forEach((subkey) => {
@@ -19,7 +17,12 @@ async function restoreOptions() {
 			});
 		}
 	});
+}
 
+// Restore and display the extension saved options
+async function restoreOptions() {
+	const options = await Utils.getOptions();
+	restoreInputs(options);
 	toggleIconOptions(options);
 	toggleThemeHandling();
 	const tabNumber = typeof options[TAB] !== 'undefined' ? options[TAB] : TAB_DEFAULT_NUMBER;
@@ -70,6 +73,16 @@ function mobileMenuManagement() {
 	}
 }
 
+async function reloadOnBookmarkFolderChanges(id, info) {
+	if (
+		(Object.prototype.hasOwnProperty.call(info, 'node') && Utils.bookmarkIsFolder(info.node)) ||
+		Utils.bookmarkIsFolder(info))
+	{
+		const options = await Utils.getOptions();
+		restoreInputs(options);
+	}
+}
+
 // Listen for loading of the options page
 document.addEventListener('DOMContentLoaded', welcomeMessage);
 document.addEventListener('DOMContentLoaded', restoreOptions);
@@ -78,3 +91,8 @@ document.addEventListener('DOMContentLoaded', tabManagement);
 document.addEventListener('DOMContentLoaded', mobileMenuManagement);
 // Listen for saving of the options page
 document.querySelector(CONTENT_WRAPPER).addEventListener('change', saveOptions);
+// Listen for bookmark changes
+browser.bookmarks.onCreated.addListener(reloadOnBookmarkFolderChanges);
+browser.bookmarks.onMoved.addListener(reloadOnBookmarkFolderChanges);
+browser.bookmarks.onChanged.addListener(reloadOnBookmarkFolderChanges);
+browser.bookmarks.onRemoved.addListener(reloadOnBookmarkFolderChanges);

src/scripts/popup/popup.js

@@ -23,7 +23,7 @@ async function buildBookmarkFolderPopupItems(bookmarkItem, indent) {
 		Object.prototype.hasOwnProperty.call(bookmarkItem, 'children') &&
 		bookmarkItem.children.length !== 0
 	) {
-		Array.from(bookmarkItem.children).forEach((child) => buildItems(child, indentProgress));
+		Array.from(bookmarkItem.children).forEach((child) => buildBookmarkFolderPopupItems(child, indentProgress));
 	}
 }