From 4bc8b47d053a40afea173f6267829f2c632b0251 Mon Sep 17 00:00:00 2001
From: Jonathan Miller <jmiller@mokoconsulting.tech>
Date: Sun, 12 Jul 2026 16:07:36 -0500
Subject: [PATCH] @ fix: reliably intercept extension update/uninstall + polish
 backup screen

The full-screen pre-action backup did not fire for extension
updates/uninstalls because Joomla 6 renders the com_installer toolbar
Update/Uninstall buttons as `<button task="update.update">` web
components, not inline onclick="Joomla.submitbutton(...)". Wrapping
Joomla.submitbutton never caught them.

installer-backup.js now uses a capture-phase document click listener on
any `[task]` element matching update.update / manage.remove(/uninstall),
so it runs before the toolbar web component. It captures the checked
cid[] selection, runs the full-screen backup, and on return restores the
selection, sets the boxchecked list-guard field, and re-fires the real
toolbar button with __msbResuming set so it is not re-intercepted.

Also polishes the runbackup screen: the progress bar is now a full-bleed
strip along the bottom edge of the card (edge-to-edge, clipped to the
rounded corners) instead of a boxed bar crowding the status text, and it
is coloured from the Atum template CSS custom properties
(--template-link-color / --template-special-color / --template-success-color
/ --template-danger-color) with Bootstrap and literal fallbacks.

Claude-Session: https://claude.ai/code/session_01WbGBN9VyRK61zczYWcCQ2i
@
---
 .../tmpl/runbackup/default.php                |  83 ++++++++--
 .../media/js/installer-backup.js              | 155 +++++++++---------
 2 files changed, 142 insertions(+), 96 deletions(-)

diff --git a/source/packages/com_mokosuitebackup/tmpl/runbackup/default.php b/source/packages/com_mokosuitebackup/tmpl/runbackup/default.php
index 0faeb92d..dbe8cfc5 100644
--- a/source/packages/com_mokosuitebackup/tmpl/runbackup/default.php
+++ b/source/packages/com_mokosuitebackup/tmpl/runbackup/default.php
@@ -80,9 +80,57 @@ $config = [
 	],
 ];
 ?>
-<div class="msb-runbackup" style="max-width:640px;margin:3rem auto;padding:0 1rem;">
+<style>
+	/* Colours are pulled from the Atum admin template's own CSS custom
+	   properties so the screen matches whatever theme the site runs, with
+	   Bootstrap and then a literal as progressive fallbacks. */
+	.msb-runbackup {
+		--msb-accent:  var(--template-link-color, var(--bs-link-color, #2a69b8));
+		--msb-accent2: var(--template-special-color, var(--msb-accent));
+		--msb-success: var(--template-success-color, var(--bs-success, #2f7d32));
+		--msb-danger:  var(--template-danger-color, var(--bs-danger, #c52128));
+		--msb-track:   var(--template-bg-light, var(--bs-gray-200, #edf0f5));
+		max-width: 720px;
+		margin: 3rem auto;
+		padding: 0 1rem;
+	}
+	/* overflow:hidden clips the full-bleed bar to the card's rounded corners. */
+	.msb-runbackup .card { overflow: hidden; }
+	.msb-rb-progress {
+		height: 2.5rem;
+		background: var(--msb-track);
+		overflow: hidden;
+	}
+	.msb-rb-bar {
+		height: 100%;
+		width: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #fff;
+		font-weight: 600;
+		font-size: .95rem;
+		white-space: nowrap;
+		background-color: var(--msb-accent);
+		background-image: linear-gradient(90deg, var(--msb-accent), var(--msb-accent2));
+		transition: width .35s ease;
+	}
+	.msb-rb-bar.is-animated::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%, transparent);
+		background-size: 1rem 1rem;
+		animation: msb-rb-stripes 1s linear infinite;
+	}
+	.msb-rb-bar { position: relative; }
+	.msb-rb-bar.is-success { background-image: none; background-color: var(--msb-success); }
+	.msb-rb-bar.is-danger  { background-image: none; background-color: var(--msb-danger); }
+	@keyframes msb-rb-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }
+</style>
+<div class="msb-runbackup">
 	<div class="card shadow-sm">
-		<div class="card-body p-4">
+		<div class="card-body p-4 pb-3">
 			<h1 class="h4 mb-1" id="msb-rb-title">
 				<span class="icon-archive" aria-hidden="true"></span>
 				<?php echo Text::_('COM_MOKOJOOMBACKUP_RUNBACKUP_TITLE'); ?>
@@ -97,21 +145,21 @@ $config = [
 				); ?>
 			</p>
 
-			<div class="progress mb-3" style="height:1.75rem;">
-				<div id="msb-rb-bar" class="progress-bar progress-bar-striped progress-bar-animated"
-					 role="progressbar" style="width:0;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">0%</div>
-			</div>
-
 			<div id="msb-rb-phase" class="fw-bold mb-1"></div>
-			<div id="msb-rb-status" class="text-muted small mb-3"><?php echo htmlspecialchars(Text::_('COM_MOKOJOOMBACKUP_RUNBACKUP_STARTING'), ENT_QUOTES, 'UTF-8'); ?></div>
+			<div id="msb-rb-status" class="text-muted small mb-0"><?php echo htmlspecialchars(Text::_('COM_MOKOJOOMBACKUP_RUNBACKUP_STARTING'), ENT_QUOTES, 'UTF-8'); ?></div>
 
-			<div id="msb-rb-actions" class="d-none">
+			<div id="msb-rb-actions" class="d-none mt-3">
 				<button type="button" id="msb-rb-retry" class="btn btn-primary d-none"></button>
 				<a href="#" id="msb-rb-record" class="btn btn-primary d-none"></a>
 				<a href="#" id="msb-rb-continue" class="btn btn-warning d-none"></a>
 				<a href="<?php echo $dashboardUrl; ?>" id="msb-rb-dashboard" class="btn btn-secondary d-none"></a>
 			</div>
 		</div>
+
+		<!-- Full-bleed progress bar, edge-to-edge along the bottom of the card. -->
+		<div class="msb-rb-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
+			<div id="msb-rb-bar" class="msb-rb-bar is-animated" style="width:0;">0%</div>
+		</div>
 	</div>
 </div>
 
@@ -126,6 +174,7 @@ $config = [
 
 	var el = {
 		bar:       document.getElementById('msb-rb-bar'),
+		track:     document.querySelector('.msb-rb-progress'),
 		phase:     document.getElementById('msb-rb-phase'),
 		status:    document.getElementById('msb-rb-status'),
 		title:     document.getElementById('msb-rb-title'),
@@ -140,9 +189,9 @@ $config = [
 		pct = Math.max(0, Math.min(100, parseInt(pct, 10) || 0));
 		el.bar.style.width = pct + '%';
 		el.bar.textContent = pct + '%';
-		el.bar.setAttribute('aria-valuenow', pct);
+		if (el.track) { el.track.setAttribute('aria-valuenow', pct); }
 		if (!striped) {
-			el.bar.classList.remove('progress-bar-striped', 'progress-bar-animated');
+			el.bar.classList.remove('is-animated');
 		}
 	}
 	function setPhase(t) { el.phase.textContent = t || ''; }
@@ -167,8 +216,8 @@ $config = [
 	}
 
 	async function onComplete() {
-		el.bar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-		el.bar.classList.add('bg-success');
+		el.bar.classList.remove('is-animated');
+		el.bar.classList.add('is-success');
 		setBar(100, false);
 		el.title.textContent = L.complete || 'Backup complete';
 
@@ -198,8 +247,8 @@ $config = [
 
 	function onError(message) {
 		running = false;
-		el.bar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-		el.bar.classList.add('bg-danger');
+		el.bar.classList.remove('is-animated');
+		el.bar.classList.add('is-danger');
 		el.title.textContent = L.failed || 'Backup failed';
 		setStatus(message || 'Backup failed');
 		showActions();
@@ -209,8 +258,8 @@ $config = [
 		el.retry.onclick = function () {
 			el.retry.classList.add('d-none');
 			el.continue.classList.add('d-none');
-			el.bar.classList.remove('bg-danger');
-			el.bar.classList.add('progress-bar-striped', 'progress-bar-animated');
+			el.bar.classList.remove('is-danger');
+			el.bar.classList.add('is-animated');
 			run();
 		};
 
diff --git a/source/packages/plg_system_mokosuitebackup/media/js/installer-backup.js b/source/packages/plg_system_mokosuitebackup/media/js/installer-backup.js
index 1153e59a..6f80f850 100644
--- a/source/packages/plg_system_mokosuitebackup/media/js/installer-backup.js
+++ b/source/packages/plg_system_mokosuitebackup/media/js/installer-backup.js
@@ -1,17 +1,17 @@
 /**
  * MokoSuiteBackup — full-screen backup before an EXTENSION update / uninstall.
  *
- * Injected by plg_system_mokosuitebackup on the Extensions → Update and
- * Extensions → Manage pages. Unlike the core Joomla update (which has a
- * server-side page load we can redirect), com_installer's update.update and
- * manage.remove are POST actions with a CSRF token and a checked cid[] list —
- * so we intercept CLIENT-SIDE: capture the selection, go to the full-screen
- * backup page, and on return restore the selection and re-submit the real POST
- * form (fresh token) so the update/uninstall proceeds.
+ * Injected by plg_system_mokosuitebackup on Extensions → Update and
+ * Extensions → Manage. Joomla 6 renders those toolbar buttons as web
+ * components (`<button task="update.update">`), NOT inline
+ * onclick="Joomla.submitbutton(...)", so wrapping Joomla.submitbutton is
+ * unreliable. Instead we add a CAPTURE-phase click listener on any element
+ * carrying a matching `task` attribute — it runs before the toolbar web
+ * component, so we can stop it, run the full-screen backup, and on return
+ * restore the checked cid[] selection and re-fire the button.
  *
- * The full-screen page arms the pre-action throttle on success (ajax.preupdate
- * Ack), so the server-side onExtensionBefore(Update|Uninstall) backup is then
- * skipped — no duplicate backup.
+ * The full-screen page arms the pre-action throttle on success, so the
+ * server-side onExtensionBefore(Update|Uninstall) backup is then skipped.
  *
  * Config: Joomla.getOptions('plg_system_mokosuitebackup.installer').
  */
@@ -28,26 +28,65 @@
 
 	var STORAGE_KEY = 'msbInstallerBackup';
 
-	/* Toolbar tasks to intercept, gated by which feature is enabled. */
 	var TASKS = {};
 	if (cfg.backupBeforeUpdate)    { TASKS['update.update'] = true; }
-	if (cfg.backupBeforeUninstall) { TASKS['manage.remove'] = true; }
+	if (cfg.backupBeforeUninstall) { TASKS['manage.remove'] = true; TASKS['manage.uninstall'] = true; }
 
 	function checkedCids() {
 		var form = document.getElementById('adminForm');
 		var cids = [];
 
 		if (form) {
-			form.querySelectorAll('input[name="cid[]"]:checked').forEach(function (b) {
-				cids.push(b.value);
-			});
+			form.querySelectorAll('input[name="cid[]"]:checked').forEach(function (b) { cids.push(b.value); });
 		}
 
 		return cids;
 	}
 
-	/* On return from the backup screen: restore the selection and re-submit. */
-	function resumeIfNeeded() {
+	/* Intercept the toolbar Update/Uninstall click in the CAPTURE phase, before
+	   the toolbar web component's own handler runs. */
+	document.addEventListener('click', function (e) {
+		if (window.__msbResuming || cfg.recentBackup) {
+			return;
+		}
+
+		var node = e.target;
+		var btn  = (node && node.closest) ? node.closest('[task]') : null;
+
+		if (!btn) {
+			return;
+		}
+
+		var task = btn.getAttribute('task');
+
+		if (!TASKS[task]) {
+			return;
+		}
+
+		var cids = checkedCids();
+
+		/* Nothing selected — let Joomla show its own "please select" notice. */
+		if (!cids.length) {
+			return;
+		}
+
+		e.preventDefault();
+		e.stopImmediatePropagation();
+
+		try {
+			sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ task: task, cids: cids }));
+		} catch (x) {}
+
+		var ret = window.location.href;
+		ret += (ret.indexOf('?') === -1 ? '?' : '&') + 'msb_resume=1';
+
+		window.location.href = cfg.runbackupUrl
+			+ '&profile_id=' + encodeURIComponent(cfg.profileId)
+			+ '&returnurl=' + encodeURIComponent(btoa(ret));
+	}, true);
+
+	/* On return from the backup screen: restore the selection and re-fire. */
+	function resume() {
 		var params = new URLSearchParams(window.location.search);
 
 		if (params.get('msb_resume') !== '1') {
@@ -55,15 +94,14 @@
 		}
 
 		var raw = null;
-		try { raw = sessionStorage.getItem(STORAGE_KEY); } catch (e) {}
-		try { sessionStorage.removeItem(STORAGE_KEY); } catch (e) {}
+		try { raw = sessionStorage.getItem(STORAGE_KEY); sessionStorage.removeItem(STORAGE_KEY); } catch (x) {}
 
 		if (!raw) {
 			return;
 		}
 
 		var data;
-		try { data = JSON.parse(raw); } catch (e) { data = null; }
+		try { data = JSON.parse(raw); } catch (x) { data = null; }
 
 		if (!data || !data.task) {
 			return;
@@ -71,72 +109,31 @@
 
 		var form = document.getElementById('adminForm');
 
-		if (!form) {
-			return;
+		if (form) {
+			(data.cids || []).forEach(function (id) {
+				var box = form.querySelector('input[name="cid[]"][value="' + id + '"]');
+				if (box) { box.checked = true; }
+			});
+
+			/* Joomla's list-check reads boxchecked — set it so the re-fire passes. */
+			var bc = form.querySelector('input[name="boxchecked"]');
+			if (bc) { bc.value = (data.cids || []).length; }
 		}
 
-		(data.cids || []).forEach(function (id) {
-			var box = form.querySelector('input[name="cid[]"][value="' + id + '"]');
-			if (box) { box.checked = true; }
-		});
-
-		/* Re-run the original toolbar action; the wrapper lets it through
-		   because the resume flag is set. */
 		window.__msbResuming = true;
 
-		if (window.Joomla && typeof Joomla.submitbutton === 'function') {
+		var btn = document.querySelector('[task="' + data.task + '"]');
+
+		if (btn) {
+			window.setTimeout(function () { btn.click(); }, 300);
+		} else if (window.Joomla && typeof Joomla.submitbutton === 'function') {
 			Joomla.submitbutton(data.task);
-		} else if (typeof window.submitbutton === 'function') {
-			window.submitbutton(data.task);
 		}
 	}
 
-	/* Wrap Joomla.submitbutton to intercept the update/uninstall tasks. */
-	function wrapSubmit() {
-		var J = window.Joomla;
-
-		if (!J || typeof J.submitbutton !== 'function' || J.submitbutton.__msbWrapped) {
-			return;
-		}
-
-		var original = J.submitbutton;
-
-		var wrapped = function (task) {
-			/* Skip when resuming after a backup, when a backup already ran this
-			   session (throttle window), or for tasks we don't handle. */
-			if (window.__msbResuming || cfg.recentBackup || !TASKS[task]) {
-				return original.apply(J, arguments);
-			}
-
-			var cids = checkedCids();
-
-			/* Nothing selected — let Joomla show its own "please select" notice
-			   and don't run a pointless backup. */
-			if (!cids.length) {
-				return original.apply(J, arguments);
-			}
-
-			try {
-				sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ task: task, cids: cids }));
-			} catch (e) {}
-
-			var ret = window.location.href;
-			ret += (ret.indexOf('?') === -1 ? '?' : '&') + 'msb_resume=1';
-
-			window.location.href = cfg.runbackupUrl
-				+ '&profile_id=' + encodeURIComponent(cfg.profileId)
-				+ '&returnurl=' + encodeURIComponent(btoa(ret));
-		};
-
-		wrapped.__msbWrapped = true;
-		J.submitbutton = wrapped;
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', resume);
+	} else {
+		resume();
 	}
-
-	/* Wrap as early as possible, and again once the DOM/core JS is ready. */
-	wrapSubmit();
-
-	document.addEventListener('DOMContentLoaded', function () {
-		wrapSubmit();
-		resumeIfNeeded();
-	});
 })();