Feat/Allow to bulk toggle all third-party extensions from Manage Extensions (#5094) * Feat - Allow to bulk toggle all third-party extensions from popup manager * Fix - Prevent reloading the page if the final state is the same * Fix - Handle bulk toggle with no extensions installed * Update - Delete leftover debug logs * Fix - Simplify extension toggle logic and improve readability * Update - State that bulk toggle only affects external extensions * Feat - Allow to restore bulk toggled extensions * Update - Move bulk toggle to the third-party extensions header * Uncenter section headers --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

992fd8f01dadd14c1f9df824277018a02fcea3dd

Leandro Jofré <leandrotomasjofre@gmail.com>

Signed

Parents: 39c8eb343c279b8e1293caff7c357caa3ba93b07

public/css/extensions-panel.css+5 -1 Viewed

@@ -39,7 +39,7 @@ label[for="extensions_autoconnect"] {
39	text-align: left;	39	text-align: left;
40	}	40	}
41		41
42	.extensions_info h3 {	42	.extensions_info h3:not(.margin0) {
43	margin-bottom: 0.5em;	43	margin-bottom: 0.5em;
44	}	44	}
45		45

@@ -112,6 +112,10 @@ label[for="extensions_autoconnect"] {
112	color: limegreen;	112	color: limegreen;
113	}	113	}
114		114
		115	.extensions_info .third_party_toolbar {
		116	user-select: none;
		117	}
		118
115	input.extension_missing[type="checkbox"] {	119	input.extension_missing[type="checkbox"] {
116	opacity: 0.5;	120	opacity: 0.5;
117	}	121	}

public/scripts/extensions.js+136 -2 Viewed

+}
 /**
+ * Handles toggling all extensions on or off.
+ * @param {Object[]} extensionsToToggle
+ * @param {JQuery<HTMLElement>} toggleContainer
+ * @returns {Object[]} Updated extensionsToToggle array
+ */
+function onToggleAllExtensions(extensionsToToggle, toggleContainer) {
+    const extensionNames = Object.keys(manifests);
+    const thirdPartyExtensions = extensionNames.filter(name => ['local', 'global'].includes(getExtensionType(name)));
+    const checkIfDisabled = (name) => {
+        const toggle = extensionsToToggle.find(ext => ext.name === name);
+        return toggle
+            ? !toggle.enable
+            : extension_settings.disabledExtensions.includes(name);
+    };
+    if (thirdPartyExtensions.length === 0) return [];
+    let enable = true;
+    for (const name of thirdPartyExtensions) {
+        const isEnabled = !checkIfDisabled(name);
+        if (isEnabled) {
+            enable = false;
+            break;
+        }
+    }
+    const toggleHandler = enable ? enableExtension : disableExtension;
+    for (const name of thirdPartyExtensions) {
+        const isDisabled = checkIfDisabled(name);
+        const doToggleExtension = enable ? isDisabled : !isDisabled;
+        if (doToggleExtension) {
+            const toggle = extensionsToToggle.find(ext => ext.name === name);
+            if (toggle) {
+                toggle.toggleHandler = toggleHandler;
+                toggle.enable = enable;
+            } else {
+                extensionsToToggle.push({ name, toggleHandler, enable });
+            }
+            toggleContainer
+                .find(`.extension_block[data-name="${name.replace('third-party', '')}"] .extension_toggle input`)
+                .prop('checked', enable)
+                .toggleClass('toggle_enable', !enable)
+                .toggleClass('toggle_disable', enable)
+                .toggleClass('checkbox_disabled', !enable);
+        }
+    }
+    return extensionsToToggle;
+}
+/**
  * Enables an extension by name.
  * @param {string} name Extension name
  * @param {boolean} [reload=true] If true, reload the page after enabling the extension

             await oldPopup.completeCancelled();
+        }
         const htmlErrors = getExtensionLoadErrorsHtml();
-        const htmlDefault = $('<div class="marginBot10"><h3 class="textAlignCenter">' + t`Built-in Extensions:` + '</h3></div>');
+        const htmlDefault = $('<div class="marginBot10"><h3>' + t`Built-in Extensions:` + '</h3></div>');
-        const htmlExternal = $('<div class="marginBot10"><h3 class="textAlignCenter">' + t`Installed Extensions:` + '</h3></div>');
+        const htmlExternal = $(`<div class="marginBot10">
+            <div class="flex-container alignitemscenter spaceBetween flexnowrap marginBot10">
+                <h3 class="margin0">${t`Installed Extensions:`}</h3>
+                <div class="flex-container third_party_toolbar"></div>
+            </div>
+        </div>`);
         const htmlLoading = $(`<div class="flex-container alignItemsCenter justifyCenter marginTop10 marginBot5">
             <i class="fa-solid fa-spinner fa-spin"></i>
             <span>` + t`Loading third-party extensions... Please wait...` + `</span>

         const sortByName = accountStorage.getItem(sortOrderKey) === 'true';
         const sortFn = sortByName ? sortManifestsByName : sortManifestsByOrder;
         const extensions = Object.entries(manifests).sort((a, b) => sortFn(a[1], b[1])).map(getExtensionData);
+        let extensionsToToggle = [];
         extensions.forEach(value => {
             const { isExternal, extensionHtml } = value;

             updateEnabledOnlyButton.textContent = t`Update enabled`;
             updateEnabledOnlyButton.addEventListener('click', () => updateAction(false));
+            const toggleAllExtensionsButton = document.createElement('div');
+            toggleAllExtensionsButton.classList.add('menu_button', 'menu_button_icon');
+            toggleAllExtensionsButton.title = t`Bulk toggle third-party extensions.`;
+            toggleAllExtensionsButton.innerHTML = `
+                <span>${t`Toggle extensions`}</span>
+                <div class="fa-solid fa-circle-info opacity50p"></div>
+            `;
+            const restoreBulkToggledExtensionsButton = document.createElement('div');
+            restoreBulkToggledExtensionsButton.classList.add('menu_button', 'menu_button_icon', 'fa-solid', 'fa-arrow-right-rotate', 'displayNone');
+            restoreBulkToggledExtensionsButton.title = t`Restore toggled extensions.\n\nIt does not restore extensions toggled individually.`;
+            toggleAllExtensionsButton.addEventListener('click', () => {
+                extensionsToToggle = onToggleAllExtensions(extensionsToToggle, htmlExternal);
+                for (const extension of extensionsToToggle) {
+                    const { name } = extension;
+                    htmlExternal
+                        .find(`.extension_block[data-name="${name.replace('third-party', '')}"] .extension_toggle input`)
+                        .off('click')
+                        .one('click', () => {
+                            extensionsToToggle = extensionsToToggle.filter(ext => ext.name !== name);
+                        });
+                }
+                const restoreButtonHandler = extensionsToToggle.length > 0 ? 'remove' : 'add';
+                restoreBulkToggledExtensionsButton.classList[restoreButtonHandler]('displayNone');
+            });
+            restoreBulkToggledExtensionsButton.addEventListener('click', () => {
+                for (const extension of extensionsToToggle) {
+                    const { name } = extension;
+                    const isDisabled = extension_settings.disabledExtensions.includes(name);
+                    htmlExternal
+                        .find(`.extension_block[data-name="${name.replace('third-party', '')}"] .extension_toggle input`)
+                        .prop('checked', !isDisabled)
+                        .toggleClass('toggle_enable', isDisabled)
+                        .toggleClass('toggle_disable', !isDisabled)
+                        .toggleClass('checkbox_disabled', isDisabled);
+                }
+                extensionsToToggle = [];
+                restoreBulkToggledExtensionsButton.classList.add('displayNone');
+            });
             const flexExpander = document.createElement('div');
             flexExpander.classList.add('expander');

             });
             toolbar.append(updateAllButton, updateEnabledOnlyButton, flexExpander, sortOrderButton);
+            htmlExternal.find('.third_party_toolbar').append(restoreBulkToggledExtensionsButton, toggleAllExtensionsButton);
             html.prepend(toolbar);
+        }

                 if (waitingForSave) {
                     return false;
+                }
+                for (const extension of extensionsToToggle) {
+                    const { name, toggleHandler, enable } = extension;
+                    const isDisabled = extension_settings.disabledExtensions.includes(name);
+                    try {
+                        if (isDisabled && !enable) continue;
+                        if (!isDisabled && enable) continue;
+                        requiresReload = true;
+                        await toggleHandler(name, false);
+                    } catch (error) {
+                        console.error(`Could not toggle extension ${name}:`, error);
+                        toastr.error(t`Could not toggle extension ${name}. See console for details.`);
+                    }
+                }
                 if (stateChanged) {
                     waitingForSave = true;
                     const toast = toastr.info(t`The page will be reloaded shortly...`, t`Extensions state changed`);

                     waitingForSave = false;
                     requiresReload = true;
+                }
                 return true;
             },
         });