| 605 | async function showExtensionsDetails() { | 605 | async function showExtensionsDetails() { |
| 606 | let popupPromise; | 606 | let popupPromise; |
| 607 | try { | 607 | try { |
| 608 | showLoader(); | 608 | const htmlDefault = $('<h3>Built-in Extensions:</h3>'); |
| 609 | let htmlDefault = '<h3>Built-in Extensions:</h3>'; | 609 | const htmlExternal = $('<h3>Installed Extensions:</h3>').addClass('opacity50p'); |
| 610 | let htmlExternal = '<h3>Installed Extensions:</h3>'; | 610 | const htmlLoading = $(`<h3 class="flex-container alignItemsCenter justifyCenter marginTop10 marginBot5"> |
| 611 | | 611 | <i class="fa-solid fa-spinner fa-spin"></i> |
| 612 | const extensions = Object.entries(manifests).sort((a, b) => a[1].loading_order - b[1].loading_order); | 612 | <span>Loading third-party extensions... Please wait...</span> |
| | 613 | </h3>`); |
| | 614 | |
| | 615 | /** @type {Promise<any>[]} */ |
| 613 | const promises = []; | 616 | const promises = []; |
| | 617 | const extensions = Object.entries(manifests).sort((a, b) => a[1].loading_order - b[1].loading_order); |
| 614 | | 618 | |
| 615 | for (const extension of extensions) { | 619 | for (const extension of extensions) { |
| 616 | promises.push(getExtensionData(extension)); | 620 | promises.push(getExtensionData(extension)); |
| 617 | } | 621 | } |
| 618 | | 622 | |
| 619 | const settledPromises = await Promise.allSettled(promises); | 623 | promises.forEach(promise => { |
| | 624 | promise.then(value => { |
| | 625 | const { isExternal, extensionHtml } = value; |
| | 626 | const container = isExternal ? htmlExternal : htmlDefault; |
| | 627 | container.append(extensionHtml); |
| | 628 | }); |
| | 629 | }); |
| 620 | | 630 | |
| 621 | settledPromises.forEach(promise => { | 631 | Promise.allSettled(promises).then(() => { |
| 622 | if (promise.status === 'fulfilled') { | 632 | htmlLoading.remove(); |
| 623 | const { isExternal, extensionHtml } = promise.value; | 633 | htmlExternal.removeClass('opacity50p'); |
| 624 | if (isExternal) { | | |
| 625 | htmlExternal += extensionHtml; | | |
| 626 | } else { | | |
| 627 | htmlDefault += extensionHtml; | | |
| 628 | } | | |
| 629 | } | | |
| 630 | }); | 634 | }); |
| 631 | | 635 | |
| 632 | const html = ` | 636 | const html = $('<div></div>') |
| 633 | ${getModuleInformation()} | 637 | .addClass('extensions_info') |
| 634 | ${htmlDefault} | 638 | .append(getModuleInformation()) |
| 635 | ${htmlExternal} | 639 | .append(htmlDefault) |
| 636 | `; | 640 | .append(htmlLoading) |
| | 641 | .append(htmlExternal); |
| | 642 | |
| 637 | /** @type {import('./popup.js').CustomPopupButton} */ | 643 | /** @type {import('./popup.js').CustomPopupButton} */ |
| 638 | const updateAllButton = { | 644 | const updateAllButton = { |
| 639 | text: 'Update all', | 645 | text: 'Update all', |