Skip to content

fix: toolbar fixes #177

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dermatz merged 9 commits into from
Apr 24, 2026
Merged

fix: toolbar fixes #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b1a16fd
fix: ensure audits are deactivated on toolbar destruction
dermatz Apr 24, 2026
65221fe
fix: streamline toolbar destruction process and clean up references
dermatz Apr 24, 2026
363403b
fix: add aria-expanded attribute for burger button accessibility
dermatz Apr 24, 2026
96ac5e1
fix: update aria-expanded attribute for collapsible menu groups
dermatz Apr 24, 2026
ea61ac8
Update src/view/frontend/web/js/toolbar/ui.js
dermatz Apr 24, 2026
84f80de
style: update toolbar CSS for improved visibility
dermatz Apr 24, 2026
d41c6e2
style: adjust toolbar dimensions for better usability on small devices
dermatz Apr 24, 2026
4871193
style: update toolbar for improved design
dermatz Apr 24, 2026
61e4b24
Update src/view/frontend/web/js/toolbar/ui.js
dermatz Apr 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 22 additions & 23 deletions src/view/frontend/web/css/toolbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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%);
Comment on lines 24 to +39
Copy link

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

toolbar.css now defines --mageforge-color-amber/--mageforge-color-pink in :root and uses them in --gradient-brand. These custom properties overlap with the Inspector’s global variables; since inspector.phtml loads toolbar.css before inspector.css, the Inspector stylesheet will override shared :root vars (e.g. --mageforge-color-amber), making the toolbar gradient dependent on CSS load order and potentially not using the intended toolbar colors. Consider scoping toolbar-only variables under .mageforge-toolbar (or prefixing them like --mageforge-toolbar-*) to avoid cross-feature variable collisions.

Copilot uses AI. Check for mistakes.
}

.mageforge-toolbar *,
Expand All @@ -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;
}
Expand Down Expand Up @@ -92,16 +89,14 @@
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 {
transform: translateY(0);
}

.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 {
Expand Down Expand Up @@ -180,7 +175,6 @@
}
}


.mageforge-toolbar-menu-title {
display: flex;
align-items: center;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -594,9 +586,16 @@
bottom: 10px;
left: 10px;
}

.mageforge-toolbar-menu {
min-width: 300px;
max-height: calc(100vh - 60px);
overflow: auto;
}
.mageforge-toolbar-burger-label {
display: none;
}
.mageforge-toolbar-burger {
height: 32px;
width: 32px;
width: auto;
}
}
10 changes: 2 additions & 8 deletions src/view/frontend/web/js/toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,8 @@ function _registerMageforgeToolbar() {
},

destroy() {
if (this._outsideClickHandler) {
document.removeEventListener('click', this._outsideClickHandler);
this._outsideClickHandler = null;
}
if (this.container) {
this.container.remove();
this.container = null;
}
this.deactivateAllAudits();
this.destroyToolbar();
},

// ====================================================================
Expand Down
6 changes: 4 additions & 2 deletions src/view/frontend/web/js/toolbar/audits.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ export const auditMethods = {
if (audit) audit.run(this, false);
this.setAuditActive(key, false);
});
this.activeAudits.clear();
this.updateToggleAllButton();
},

Expand Down Expand Up @@ -88,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));
}
},

Expand Down
10 changes: 10 additions & 0 deletions src/view/frontend/web/js/toolbar/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,8 @@ export const uiMethods = {
this.burgerButton.className = 'mageforge-toolbar-burger';
this.burgerButton.type = 'button';
this.burgerButton.title = 'Audit tools';
Comment thread
dermatz marked this conversation as resolved.
this.burgerButton.setAttribute('aria-label', 'MageForge Toolbar');
this.burgerButton.setAttribute('aria-expanded', 'false');
Comment thread
dermatz marked this conversation as resolved.
this.burgerButton.innerHTML = `
<span class="mageforge-toolbar-burger-icon">
<span class="mageforge-toolbar-burger-bar"></span>
Expand Down Expand Up @@ -131,6 +133,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();
Expand Down Expand Up @@ -265,12 +268,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() {
Expand All @@ -281,5 +286,10 @@ export const uiMethods = {
if (this.container && this.container.parentNode) {
this.container.parentNode.removeChild(this.container);
}
this.container = null;
Comment thread
dermatz marked this conversation as resolved.
this.menu = null;
this.burgerButton = null;
this.toggleAllButton = null;
this.menuOpen = false;
},
};
Loading