From b1a16fd2770b62e7524da5139f30ab85148e31f5 Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Fri, 24 Apr 2026 13:58:07 +0200 Subject: [PATCH 1/9] fix: ensure audits are deactivated on toolbar destruction --- src/view/frontend/web/js/toolbar.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/view/frontend/web/js/toolbar.js b/src/view/frontend/web/js/toolbar.js index 518260c..3b40018 100644 --- a/src/view/frontend/web/js/toolbar.js +++ b/src/view/frontend/web/js/toolbar.js @@ -45,6 +45,7 @@ function _registerMageforgeToolbar() { }, destroy() { + this.deactivateAllAudits(); if (this._outsideClickHandler) { document.removeEventListener('click', this._outsideClickHandler); this._outsideClickHandler = null; From 65221fe830848b823b63c3d0806864e28309f2d0 Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Fri, 24 Apr 2026 18:26:05 +0200 Subject: [PATCH 2/9] fix: streamline toolbar destruction process and clean up references Co-authored-by: Copilot --- src/view/frontend/web/js/toolbar.js | 9 +-------- src/view/frontend/web/js/toolbar/audits.js | 1 - src/view/frontend/web/js/toolbar/ui.js | 1 + 3 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/view/frontend/web/js/toolbar.js b/src/view/frontend/web/js/toolbar.js index 3b40018..1aeac02 100644 --- a/src/view/frontend/web/js/toolbar.js +++ b/src/view/frontend/web/js/toolbar.js @@ -46,14 +46,7 @@ function _registerMageforgeToolbar() { destroy() { this.deactivateAllAudits(); - if (this._outsideClickHandler) { - document.removeEventListener('click', this._outsideClickHandler); - this._outsideClickHandler = null; - } - if (this.container) { - this.container.remove(); - this.container = null; - } + this.destroyToolbar(); }, // ==================================================================== diff --git a/src/view/frontend/web/js/toolbar/audits.js b/src/view/frontend/web/js/toolbar/audits.js index eb3cd0e..92af205 100644 --- a/src/view/frontend/web/js/toolbar/audits.js +++ b/src/view/frontend/web/js/toolbar/audits.js @@ -51,7 +51,6 @@ export const auditMethods = { if (audit) audit.run(this, false); this.setAuditActive(key, false); }); - this.activeAudits.clear(); this.updateToggleAllButton(); }, diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js index d9c188b..3479696 100644 --- a/src/view/frontend/web/js/toolbar/ui.js +++ b/src/view/frontend/web/js/toolbar/ui.js @@ -281,5 +281,6 @@ export const uiMethods = { if (this.container && this.container.parentNode) { this.container.parentNode.removeChild(this.container); } + this.container = null; }, }; From 363403b0252c79db27d8d3e6367cae13cd8ecac9 Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Fri, 24 Apr 2026 18:27:34 +0200 Subject: [PATCH 3/9] fix: add aria-expanded attribute for burger button accessibility --- src/view/frontend/web/js/toolbar/ui.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js index 3479696..a99bef6 100644 --- a/src/view/frontend/web/js/toolbar/ui.js +++ b/src/view/frontend/web/js/toolbar/ui.js @@ -86,6 +86,7 @@ export const uiMethods = { this.burgerButton.className = 'mageforge-toolbar-burger'; this.burgerButton.type = 'button'; this.burgerButton.title = 'Audit tools'; + this.burgerButton.setAttribute('aria-expanded', 'false'); this.burgerButton.innerHTML = ` @@ -265,12 +266,14 @@ export const uiMethods = { this.menuOpen = true; this.menu.classList.add('mageforge-menu-open'); this.burgerButton.classList.add('mageforge-active'); + this.burgerButton.setAttribute('aria-expanded', 'true'); }, closeMenu() { this.menuOpen = false; this.menu.classList.remove('mageforge-menu-open'); this.burgerButton.classList.remove('mageforge-active'); + this.burgerButton.setAttribute('aria-expanded', 'false'); }, destroyToolbar() { From 96ac5e17591ce181484d0bbbb8f3237adb21accd Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Fri, 24 Apr 2026 18:30:11 +0200 Subject: [PATCH 4/9] fix: update aria-expanded attribute for collapsible menu groups --- src/view/frontend/web/js/toolbar/audits.js | 5 ++++- src/view/frontend/web/js/toolbar/ui.js | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/view/frontend/web/js/toolbar/audits.js b/src/view/frontend/web/js/toolbar/audits.js index 92af205..5422089 100644 --- a/src/view/frontend/web/js/toolbar/audits.js +++ b/src/view/frontend/web/js/toolbar/audits.js @@ -87,7 +87,10 @@ export const auditMethods = { if (!this.menu) return; const group = this.menu.querySelector(`[data-group-key="${key}"]`); if (group) { - group.classList.toggle('mageforge-toolbar-menu-group--collapsed', this.collapsedGroups.has(key)); + const isCollapsed = this.collapsedGroups.has(key); + group.classList.toggle('mageforge-toolbar-menu-group--collapsed', isCollapsed); + const header = group.querySelector('.mageforge-toolbar-menu-group-header'); + if (header) header.setAttribute('aria-expanded', String(!isCollapsed)); } }, diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js index a99bef6..b2268ac 100644 --- a/src/view/frontend/web/js/toolbar/ui.js +++ b/src/view/frontend/web/js/toolbar/ui.js @@ -132,6 +132,7 @@ export const uiMethods = { const header = document.createElement('button'); header.type = 'button'; header.className = 'mageforge-toolbar-menu-group-header'; + header.setAttribute('aria-expanded', String(!this.collapsedGroups.has(key))); header.onclick = (e) => { e.preventDefault(); e.stopPropagation(); From ea61ac8557ac5714a45834008db755f51daa03ed Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Fri, 24 Apr 2026 18:31:42 +0200 Subject: [PATCH 5/9] Update src/view/frontend/web/js/toolbar/ui.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/view/frontend/web/js/toolbar/ui.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js index b2268ac..5413ad9 100644 --- a/src/view/frontend/web/js/toolbar/ui.js +++ b/src/view/frontend/web/js/toolbar/ui.js @@ -86,6 +86,7 @@ export const uiMethods = { this.burgerButton.className = 'mageforge-toolbar-burger'; this.burgerButton.type = 'button'; this.burgerButton.title = 'Audit tools'; + this.burgerButton.setAttribute('aria-label', 'MageForge Toolbar'); this.burgerButton.setAttribute('aria-expanded', 'false'); this.burgerButton.innerHTML = ` From 84f80de1ab7884fe057e27d7356d4e9c31b815a5 Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Fri, 24 Apr 2026 18:33:56 +0200 Subject: [PATCH 6/9] style: update toolbar CSS for improved visibility Co-authored-by: Copilot --- src/view/frontend/web/css/toolbar.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css index bf44859..b7c7928 100644 --- a/src/view/frontend/web/css/toolbar.css +++ b/src/view/frontend/web/css/toolbar.css @@ -415,7 +415,7 @@ display: none; } -/* ============================================================================ +/* =====================ƒ======================================================= Audit Highlights ========================================================================== */ @@ -594,9 +594,11 @@ bottom: 10px; left: 10px; } - + .mageforge-toolbar-burger-label { + display: none; + } .mageforge-toolbar-burger { height: 32px; - width: 32px; + width: auto; } } From d41c6e2bfb8eb1659d9dd23a37e40aaf79b9f278 Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Fri, 24 Apr 2026 18:38:27 +0200 Subject: [PATCH 7/9] style: adjust toolbar dimensions for better usability on small devices Co-authored-by: Copilot --- src/view/frontend/web/css/toolbar.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css index b7c7928..af4897a 100644 --- a/src/view/frontend/web/css/toolbar.css +++ b/src/view/frontend/web/css/toolbar.css @@ -594,6 +594,11 @@ bottom: 10px; left: 10px; } + .mageforge-toolbar-menu { + min-width: 300px; + max-height: calc(100vh - 60px); + overflow: auto; + } .mageforge-toolbar-burger-label { display: none; } From 48711932074ec8867cfb63bd97addccf389b4783 Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Fri, 24 Apr 2026 18:49:58 +0200 Subject: [PATCH 8/9] style: update toolbar for improved design Co-authored-by: Copilot --- src/view/frontend/web/css/toolbar.css | 36 +++++++++++---------------- 1 file changed, 14 insertions(+), 22 deletions(-) diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css index af4897a..f6f4a38 100644 --- a/src/view/frontend/web/css/toolbar.css +++ b/src/view/frontend/web/css/toolbar.css @@ -13,17 +13,16 @@ --mageforge-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mageforge-color-white: #ffffff; --mageforge-color-blue: #3b82f6; - --mageforge-color-blue-dark: #2563eb; --mageforge-color-green: #10b981; - --mageforge-color-green-dark: #059669; --mageforge-color-green-alpha-15: rgba(16, 185, 129, 0.15); --mageforge-color-green-alpha-35: rgba(16, 185, 129, 0.35); --mageforge-color-red: #ef4444; --mageforge-color-red-alpha-15: rgba(239, 68, 68, 0.15); --mageforge-color-red-alpha-35: rgba(239, 68, 68, 0.35); - --mageforge-color-slate-200: #e2e8f0; --mageforge-color-slate-400: #94a3b8; --mageforge-color-orange: #fb923c; + --mageforge-color-pink: #C850C0; + --mageforge-color-amber: #edb04d; --mageforge-bg-dark: rgba(15, 23, 42, 0.98); --mageforge-bg-dark-alt: rgba(30, 41, 59, 0.98); --mageforge-border-color: rgba(148, 163, 184, 0.15); @@ -34,12 +33,10 @@ --mageforge-shadow-lg: rgba(0, 0, 0, 0.4); --mageforge-burger-bg: rgba(15, 23, 42, 0.85); --mageforge-burger-bg-hover: rgba(30, 41, 59, 0.95); - --mageforge-toolbar-burger-active-bg: #10b981; - --mageforge-toolbar-burger-active-border: #10b981; --mageforge-toggle-bg-off: rgba(255, 255, 255, 0.15); --mageforge-toggle-bg-off-light: rgba(0, 0, 0, 0.15); - --gradient-brand: linear-gradient(43deg, #3b82f6 0%, #C850C0 50%, #edb04d 100%); - --gradient-brand-hover: linear-gradient(43deg, #3b82f6 0%, #C850C0 70%, #edb04d 100%); + --gradient-brand: linear-gradient(43deg, var(--mageforge-color-blue) 0%, var(--mageforge-color-pink) 50%, var(--mageforge-color-amber) 100%); + --gradient-brand-hover: linear-gradient(43deg, var(--mageforge-color-blue) 0%, var(--mageforge-color-pink) 70%, var(--mageforge-color-amber) 100%); } .mageforge-toolbar *, @@ -56,11 +53,11 @@ .mageforge-toolbar { position: fixed; - bottom: 1rem; - left: 1rem; + bottom: 16px; + left: 16px; display: flex; align-items: center; - gap: 0.5rem; + gap: 8px; z-index: 9999998; pointer-events: auto; } @@ -92,7 +89,6 @@ transform: translateY(-2px); box-shadow: 0 8px 20px var(--mageforge-shadow-lg), 0 4px 8px var(--mageforge-shadow-md); background-image: var(--gradient-brand-hover); - cursor: pointer; } .mageforge-toolbar-burger:active { @@ -100,8 +96,7 @@ } .mageforge-toolbar-burger.mageforge-active { - background: var(--mageforge-toolbar-burger-active-bg); - border-color: var(--mageforge-toolbar-burger-active-border); + background: var(--mageforge-color-green); } .mageforge-toolbar-burger-icon { @@ -180,7 +175,6 @@ } } - .mageforge-toolbar-menu-title { display: flex; align-items: center; @@ -192,13 +186,11 @@ .mageforge-toolbar-menu-title-text { font-family: var(--mageforge-font-family); - font-size: 1.25rem; + font-size: 20px; font-weight: 700; letter-spacing: 0.08em; - padding-bottom: 0.5rem; + padding-bottom: 8px; color: transparent; - background-color: #4158D0; - text-shadow: 0 5px 5px rgba(0, 0, 0, 0.3); background-image: var(--gradient-brand); background-clip: text; -webkit-background-clip: text; @@ -266,7 +258,7 @@ font-size: 16px; flex-shrink: 0; width: 10%; - min-width: 2rem; + min-width: 32px; display: flex; align-items: center; justify-content: center; @@ -387,7 +379,7 @@ .mageforge-toolbar-menu-group-label { font-family: var(--mageforge-font-family); - font-size: 0.7rem; + font-size: 11px; font-weight: 600; text-transform: uppercase; transition: color 0.15s ease; @@ -415,7 +407,7 @@ display: none; } -/* =====================ƒ======================================================= +/* ============================================================================ Audit Highlights ========================================================================== */ @@ -423,7 +415,7 @@ .mageforge-audit-overlay { position: fixed; pointer-events: none; - background-color: rgba(239, 68, 68, 0.35); + background-color: var(--mageforge-color-red-alpha-35); outline: 3px solid var(--mageforge-color-red); outline-offset: 0; z-index: 9999997; From 61e4b2485ebacb604a97c7d93df43bb8e0cdb150 Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Fri, 24 Apr 2026 18:50:48 +0200 Subject: [PATCH 9/9] Update src/view/frontend/web/js/toolbar/ui.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/view/frontend/web/js/toolbar/ui.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js index 5413ad9..29cef72 100644 --- a/src/view/frontend/web/js/toolbar/ui.js +++ b/src/view/frontend/web/js/toolbar/ui.js @@ -287,5 +287,9 @@ export const uiMethods = { this.container.parentNode.removeChild(this.container); } this.container = null; + this.menu = null; + this.burgerButton = null; + this.toggleAllButton = null; + this.menuOpen = false; }, };