Update extension manager to use new popup

public/css/extensions-panel.css

@@ -36,7 +36,9 @@ label[for="extensions_autoconnect"] {
 
 .extensions_info {
     text-align: left;
-    margin: 0 1em;
+    max-height: 100%;
+    overflow-y: auto;
+    padding-right: 1em;
 }
 
 .extensions_info h3 {

public/scripts/extensions.js

@@ -1,5 +1,6 @@
-import { callPopup, eventSource, event_types, saveSettings, saveSettingsDebounced, getRequestHeaders, animation_duration } from '../script.js';
+import { eventSource, event_types, saveSettings, saveSettingsDebounced, getRequestHeaders, animation_duration } from '../script.js';
 import { hideLoader, showLoader } from './loader.js';
+import { POPUP_RESULT, POPUP_TYPE, Popup, callGenericPopup } from './popup.js';
 import { renderTemplate, renderTemplateAsync } from './templates.js';
 import { isSubsetOf, setValueByPath } from './utils.js';
 export {
@@ -631,7 +632,18 @@ async function showExtensionsDetails() {
             ${htmlDefault}
             ${htmlExternal}
         `;
-        popupPromise = callPopup(`<div class="extensions_info">${html}</div>`, 'text', '', { okButton: 'Close', wide: true, large: true });
+        /** @type {import('./popup.js').CustomPopupButton} */
+        const updateAllButton = {
+            text: 'Update all',
+            appendAtEnd: true,
+            action: async () => {
+                requiresReload = true;
+                await autoUpdateExtensions(true);
+                popup.complete(POPUP_RESULT.AFFIRMATIVE);
+            },
+        };
+        const popup = new Popup(`<div class="extensions_info">${html}</div>`, POPUP_TYPE.TEXT, '', { okButton: 'Close', wide: true, large: true, customButtons: [updateAllButton] });
+        popupPromise = popup.show();
     } catch (error) {
         toastr.error('Error loading extensions. See browser console for details.');
         console.error(error);
@@ -700,8 +712,8 @@ async function updateExtension(extensionName, quiet) {
 async function onDeleteClick() {
     const extensionName = $(this).data('name');
     // use callPopup to create a popup for the user to confirm before delete
-    const confirmation = await callPopup(`Are you sure you want to delete ${extensionName}?`, 'delete_extension');
+    const confirmation = await callGenericPopup(`Are you sure you want to delete ${extensionName}?`, POPUP_TYPE.CONFIRM, '', {});
-    if (confirmation) {
+    if (confirmation === POPUP_RESULT.AFFIRMATIVE) {
         await deleteExtension(extensionName);
     }
 }
@@ -797,7 +809,7 @@ async function loadExtensionSettings(settings, versionChanged) {
     manifests = await getManifests(extensionNames);
 
     if (versionChanged) {
-        await autoUpdateExtensions();
+        await autoUpdateExtensions(false);
     }
 
     await activateExtensions();
@@ -860,7 +872,12 @@ async function checkForExtensionUpdates(force) {
     }
 }
 
-async function autoUpdateExtensions() {
+/**
+ * Updates all 3rd-party extensions that have auto-update enabled.
+ * @param {boolean} forceAll Force update all even if not auto-updating
+ * @returns {Promise<void>}
+ */
+async function autoUpdateExtensions(forceAll) {
     if (!Object.values(manifests).some(x => x.auto_update)) {
         return;
     }
@@ -868,7 +885,7 @@ async function autoUpdateExtensions() {
     const banner = toastr.info('Auto-updating extensions. This may take several minutes.', 'Please wait...', { timeOut: 10000, extendedTimeOut: 10000 });
     const promises = [];
     for (const [id, manifest] of Object.entries(manifests)) {
-        if (manifest.auto_update && id.startsWith('third-party')) {
+        if ((forceAll || manifest.auto_update) && id.startsWith('third-party')) {
             console.debug(`Auto-updating 3rd-party extension: ${manifest.display_name} (${id})`);
             promises.push(updateExtension(id.replace('third-party', ''), true));
         }
@@ -988,14 +1005,14 @@ jQuery(async function () {
     <p><b>Disclaimer:</b> Please be aware that using external extensions can have unintended side effects and may pose security risks. Always make sure you trust the source before importing an extension. We are not responsible for any damage caused by third-party extensions.</p>
     <br>
     <p>Example: <tt> https://github.com/author/extension-name </tt></p>`;
-        const input = await callPopup(html, 'input');
+        const input = await callGenericPopup(html, POPUP_TYPE.INPUT, '');
 
         if (!input) {
             console.debug('Extension install cancelled');
             return;
         }
 
-        const url = input.trim();
+        const url = String(input).trim();
         await installExtension(url);
     });
 });

public/scripts/popup.js

@@ -46,7 +46,7 @@ export const POPUP_RESULT = {
 /**
  * @typedef {object} CustomPopupButton
  * @property {string} text - The text of the button
- * @property {POPUP_RESULT|number?} result - The result of the button - can also be a custom result value to make be able to find out that this button was clicked. If no result is specified, this button will **not** close the popup.
+ * @property {POPUP_RESULT|number?} [result] - The result of the button - can also be a custom result value to make be able to find out that this button was clicked. If no result is specified, this button will **not** close the popup.
  * @property {string[]|string?} [classes] - Optional custom CSS classes applied to the button
  * @property {()=>void?} [action] - Optional action to perform when the button is clicked
  * @property {boolean?} [appendAtEnd] - Whether to append the button to the end of the popup - by default it will be prepended
@@ -169,6 +169,10 @@ export class Popup {
             } else {
                 this.controls.insertBefore(buttonElement, this.okButton);
             }
+
+            if (typeof button.action === 'function') {
+                buttonElement.addEventListener('click', button.action);
+            }
         });
 
         // Set the default button class
@@ -247,6 +251,7 @@ export class Popup {
         this.dlg.querySelectorAll('[data-result]').forEach(resultControl => {
             if (!(resultControl instanceof HTMLElement)) return;
             const result = Number(resultControl.dataset.result);
+            if (String(undefined) === String(resultControl.dataset.result)) return;
             if (isNaN(result)) throw new Error('Invalid result control. Result must be a number. ' + resultControl.dataset.result);
             const type = resultControl.dataset.resultEvent || 'click';
             resultControl.addEventListener(type, () => this.complete(result));