Move extension buttons to a separate toolbar

02df7d78e24bd080df1345cc6765592039d9e130

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 216c698610d2ca556c323f05e783abab7fbf0e13
2 files changed, +43 -25Ignore whitespace
public/css/extensions-panel.css+12 -0
@@ -146,3 +146,15 @@ input.extension_missing[type="checkbox"] {
146.extensions_info .extension_actions {146.extensions_info .extension_actions {
147 flex-wrap: nowrap;147 flex-wrap: nowrap;
148}148}
149
150.extensions_toolbar {
151 top: 0;
152 position: sticky;
153 display: flex;
154 flex-direction: row;
155 background-color: var(--SmartThemeBlurTintColor);
156 gap: 5px;
157 z-index: 1;
158 margin-bottom: 10px;
159 padding: 5px;
160}
public/scripts/extensions.js+31 -25
@@ -783,35 +783,41 @@ async function showExtensionsDetails() {
783 .append(htmlExternal)783 .append(htmlExternal)
784 .append(getModuleInformation());784 .append(getModuleInformation());
785785
786 /** @type {import('./popup.js').CustomPopupButton} */786 {
787 const updateAllButton = {787 const updateAction = async (force) => {
788 text: t`Update all`,
789 action: async () => {
790 requiresReload = true;788 requiresReload = true;
791 await autoUpdateExtensions(true);789 await autoUpdateExtensions(force);
792 await popup.complete(POPUP_RESULT.AFFIRMATIVE);790 await popup.complete(POPUP_RESULT.AFFIRMATIVE);
793 },791 };
794 };
795792
796 /** @type {import('./popup.js').CustomPopupButton} */793 const toolbar = document.createElement('div');
797 const updateEnabledOnlyButton = {794 toolbar.classList.add('extensions_toolbar');
798 text: t`Update enabled only`,795
799 action: async () => {796 const updateAllButton = document.createElement('button');
800 requiresReload = true;797 updateAllButton.classList.add('menu_button', 'menu_button_icon');
801 await autoUpdateExtensions(false);798 updateAllButton.textContent = t`Update all`;
802 await popup.complete(POPUP_RESULT.AFFIRMATIVE);799 updateAllButton.addEventListener('click', () => updateAction(true));
803 },
804 };
805800
806 /** @type {import('./popup.js').CustomPopupButton} */801 const updateEnabledOnlyButton = document.createElement('button');
807 const sortOrderButton = {802 updateEnabledOnlyButton.classList.add('menu_button', 'menu_button_icon');
808 text: sortByName ? t`Sort: Display Name` : t`Sort: Loading Order`,803 updateEnabledOnlyButton.textContent = t`Update enabled`;
809 action: async () => {804 updateEnabledOnlyButton.addEventListener('click', () => updateAction(false));
805
806 const flexExpander = document.createElement('div');
807 flexExpander.classList.add('expander');
808
809 const sortOrderButton = document.createElement('button');
810 sortOrderButton.classList.add('menu_button', 'menu_button_icon');
811 sortOrderButton.textContent = sortByName ? t`Sort: Display Name` : t`Sort: Loading Order`;
812 sortOrderButton.addEventListener('click', async () => {
810 abortController.abort();813 abortController.abort();
811 accountStorage.setItem(sortOrderKey, sortByName ? 'false' : 'true');814 accountStorage.setItem(sortOrderKey, sortByName ? 'false' : 'true');
812 await showExtensionsDetails();815 await showExtensionsDetails();
813 },816 });
814 };817
818 toolbar.append(updateAllButton, updateEnabledOnlyButton, flexExpander, sortOrderButton);
819 html.prepend(toolbar);
820 }
815821
816 let waitingForSave = false;822 let waitingForSave = false;
817823
@@ -819,7 +825,7 @@ async function showExtensionsDetails() {
819 okButton: t`Close`,825 okButton: t`Close`,
820 wide: true,826 wide: true,
821 large: true,827 large: true,
822 customButtons: [sortOrderButton, updateEnabledOnlyButton, updateAllButton],828 customButtons: [],
823 allowVerticalScrolling: true,829 allowVerticalScrolling: true,
824 onClosing: async () => {830 onClosing: async () => {
825 if (waitingForSave) {831 if (waitingForSave) {
@@ -1230,7 +1236,7 @@ async function checkForExtensionUpdates(force) {
1230 for (const [id, manifest] of Object.entries(manifests)) {1236 for (const [id, manifest] of Object.entries(manifests)) {
1231 const isDisabled = extension_settings.disabledExtensions.includes(id);1237 const isDisabled = extension_settings.disabledExtensions.includes(id);
1232 if (isDisabled) {1238 if (isDisabled) {
1233 console.debug(`Skipping extension: ${manifest.display_name} (${id}) for non-admin user`)1239 console.debug(`Skipping extension: ${manifest.display_name} (${id}) for non-admin user`);
1234 continue;1240 continue;
1235 }1241 }
1236 const isGlobal = getExtensionType(id) === 'global';1242 const isGlobal = getExtensionType(id) === 'global';
@@ -1277,7 +1283,7 @@ async function autoUpdateExtensions(forceAll) {
1277 for (const [id, manifest] of Object.entries(manifests)) {1283 for (const [id, manifest] of Object.entries(manifests)) {
1278 const isDisabled = extension_settings.disabledExtensions.includes(id);1284 const isDisabled = extension_settings.disabledExtensions.includes(id);
1279 if (!forceAll && isDisabled) {1285 if (!forceAll && isDisabled) {
1280 console.debug(`Skipping extension: ${manifest.display_name} (${id}) for non-admin user`)1286 console.debug(`Skipping extension: ${manifest.display_name} (${id}) for non-admin user`);
1281 continue;1287 continue;
1282 }1288 }
1283 const isGlobal = getExtensionType(id) === 'global';1289 const isGlobal = getExtensionType(id) === 'global';