diff --git a/src/Block/Inspector.php b/src/Block/Inspector.php index d833aa5..4d502d8 100644 --- a/src/Block/Inspector.php +++ b/src/Block/Inspector.php @@ -139,6 +139,20 @@ public function getPosition(): string return is_string($value) && $value !== '' ? $value : InspectorConfig::DEFAULT_POSITION; } + /** + * Whether the health score gauge should be shown in the toolbar footer + * + * @return bool + */ + public function getShowHealthScore(): bool + { + $value = $this->scopeConfig->getValue( + InspectorConfig::XML_PATH_SHOW_HEALTH_SCORE, + ScopeInterface::SCOPE_STORE + ); + return !is_string($value) || $value !== '0'; + } + /** * Render block HTML * diff --git a/src/Model/Config/Inspector.php b/src/Model/Config/Inspector.php index d1aab7d..955446f 100644 --- a/src/Model/Config/Inspector.php +++ b/src/Model/Config/Inspector.php @@ -10,6 +10,7 @@ class Inspector public const XML_PATH_SHOW_BUTTON_LABELS = 'mageforge/inspector/show_button_labels'; public const XML_PATH_THEME = 'mageforge/inspector/theme'; public const XML_PATH_POSITION = 'mageforge/inspector/position'; + public const XML_PATH_SHOW_HEALTH_SCORE = 'mageforge/inspector/show_health_score'; public const DEFAULT_THEME = 'dark'; public const DEFAULT_POSITION = 'bottom-left'; } diff --git a/src/etc/adminhtml/system.xml b/src/etc/adminhtml/system.xml index 697ba9d..ee2ee2a 100644 --- a/src/etc/adminhtml/system.xml +++ b/src/etc/adminhtml/system.xml @@ -34,6 +34,12 @@ mageforge/inspector/position Position of the MageForge Toolbar on the page. Default: Bottom Left. + + + Magento\Config\Model\Config\Source\Yesno + mageforge/inspector/show_health_score + Show the Overall Health Score gauge in the toolbar footer. The Run All Tests and Reset buttons remain visible regardless. Default: Yes. + diff --git a/src/etc/config.xml b/src/etc/config.xml index 01c0a90..2e61b64 100644 --- a/src/etc/config.xml +++ b/src/etc/config.xml @@ -12,6 +12,7 @@ dark 1 bottom-left + 1 diff --git a/src/i18n/de_DE.csv b/src/i18n/de_DE.csv index 3ab1875..dd1f9d8 100644 --- a/src/i18n/de_DE.csv +++ b/src/i18n/de_DE.csv @@ -9,6 +9,8 @@ "Show text labels on the Toolbar and Inspector buttons. Default: Yes.","Textbeschriftungen auf Toolbar- und Inspector-Schaltflächen anzeigen. Standard: Ja." "Toolbar Position","Toolbar-Position" "Position of the MageForge Toolbar on the page. Default: Bottom Left.","Position der MageForge Toolbar auf der Seite. Standard: Unten links." +"Show Health Score","Health-Score anzeigen" +"Show the Overall Health Score gauge in the toolbar footer. The Run All Tests and Reset buttons remain visible regardless. Default: Yes.","Health-Score-Tachometer im Toolbar-Footer anzeigen. Die Aktions-Schaltflächen bleiben stets sichtbar. Standard: Ja." "Dark","Dunkel" "Light","Hell" "Auto (System Preference)","Auto (Systemeinstellung)" diff --git a/src/i18n/en_US.csv b/src/i18n/en_US.csv index 959513c..4d86904 100644 --- a/src/i18n/en_US.csv +++ b/src/i18n/en_US.csv @@ -9,6 +9,8 @@ "Show text labels on the Toolbar and Inspector buttons. Default: Yes.","Show text labels on the Toolbar and Inspector buttons. Default: Yes." "Toolbar Position","Toolbar Position" "Position of the MageForge Toolbar on the page. Default: Bottom Left.","Position of the MageForge Toolbar on the page. Default: Bottom Left." +"Show Health Score","Show Health Score" +"Show the Overall Health Score gauge in the toolbar footer. The Run All Tests and Reset buttons remain visible regardless. Default: Yes.","Show the Overall Health Score gauge in the toolbar footer. The Run All Tests and Reset buttons remain visible regardless. Default: Yes." "Dark","Dark" "Light","Light" "Auto (System Preference)","Auto (System Preference)" diff --git a/src/view/frontend/templates/inspector.phtml b/src/view/frontend/templates/inspector.phtml index 07c93b8..e4862a1 100644 --- a/src/view/frontend/templates/inspector.phtml +++ b/src/view/frontend/templates/inspector.phtml @@ -69,7 +69,8 @@ JS; x-data="mageforgeToolbar" data-theme="escapeHtmlAttr($block->getTheme()) ?>" data-position="escapeHtmlAttr($block->getPosition()) ?>" - data-show-labels="getShowButtonLabels() ?>"> + data-show-labels="getShowButtonLabels() ?>" + data-show-health-score="getShowHealthScore() ?>">
{ + if (!this.activeAudits.has(audit.key)) { + this.runAudit(audit.key); + } + }); + + // Allow async DOM mutations to settle + await new Promise(resolve => setTimeout(resolve, 200)); + + let totalPoints = 0; + let maxPoints = 0; + audits.forEach(audit => { + const item = this.menu?.querySelector(`[data-audit-key="${audit.key}"]`); + if (!item) return; + maxPoints += 100; + const status = item.querySelector('.mageforge-toolbar-menu-status'); + if (!status || !status.textContent.trim()) { + totalPoints += 100; + } else if (status.classList.contains('mageforge-toolbar-menu-status--success')) { + totalPoints += 100; + } else if (status.classList.contains('mageforge-toolbar-menu-status--warning')) { + totalPoints += 50; + } + // error = 0 points (default) + }); + + const score = maxPoints > 0 ? Math.round((totalPoints / maxPoints) * 100) : 100; + this.updateHealthScore(score); + } finally { + this._batchRunning = false; + btn.disabled = false; + btn.classList.remove('mageforge-running'); + } + }, + /** * Deactivates all currently active audits (called when closing the toolbar). */ diff --git a/src/view/frontend/web/js/toolbar/audits/highlight.js b/src/view/frontend/web/js/toolbar/audits/highlight.js index 7189e3b..0193632 100644 --- a/src/view/frontend/web/js/toolbar/audits/highlight.js +++ b/src/view/frontend/web/js/toolbar/audits/highlight.js @@ -156,7 +156,9 @@ export function applyHighlight(elements, key, context, options = {}) { } }); if (!skipBadge) { - elements[0].scrollIntoView({ behavior: 'smooth', block: 'center' }); + if (!context._batchRunning) { + elements[0].scrollIntoView({ behavior: 'smooth', block: 'center' }); + } context.setAuditCounterBadge(key, `${elements.length}`, severity); } } diff --git a/src/view/frontend/web/js/toolbar/audits/images-without-alt.js b/src/view/frontend/web/js/toolbar/audits/images-without-alt.js index 2ef41ae..c48c177 100644 --- a/src/view/frontend/web/js/toolbar/audits/images-without-alt.js +++ b/src/view/frontend/web/js/toolbar/audits/images-without-alt.js @@ -48,7 +48,7 @@ export default { // Scroll to first issue (errors take priority) const first = errors[0] ?? warnings[0]; - if (first) first.scrollIntoView({ behavior: 'smooth', block: 'center' }); + if (first && !context._batchRunning) first.scrollIntoView({ behavior: 'smooth', block: 'center' }); context.setAuditCounterBadge(this.key, `${total}`, errors.length > 0 ? 'error' : 'warning'); }, diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js index d11887c..23e50e8 100644 --- a/src/view/frontend/web/js/toolbar/ui.js +++ b/src/view/frontend/web/js/toolbar/ui.js @@ -67,21 +67,118 @@ export const uiMethods = { )); }); - // Footer – Toggle All + // Footer – Health Score Gauge + Run All Tests const menuFooter = document.createElement('div'); menuFooter.className = 'mageforge-toolbar-menu-footer'; - this.toggleAllButton = document.createElement('button'); - this.toggleAllButton.type = 'button'; - this.toggleAllButton.className = 'mageforge-toolbar-menu-toggle-all'; - this.toggleAllButton.textContent = 'Activate All'; - this.toggleAllButton.onclick = (e) => { - e.stopPropagation(); - this.toggleAllAudits(); - }; - menuFooter.appendChild(this.toggleAllButton); + + const showHealthScore = this.$el?.getAttribute('data-show-health-score') !== '0'; + + if (showHealthScore) { + const ARC_LENGTH = 157.08; + const gradId = `mf-gauge-grad-${Math.random().toString(36).slice(2, 8)}`; + const healthWrapper = document.createElement('div'); + healthWrapper.className = 'mageforge-toolbar-health-wrapper'; + + const gaugeSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + gaugeSvg.setAttribute('viewBox', '0 0 120 70'); + gaugeSvg.setAttribute('class', 'mageforge-toolbar-health-gauge'); + gaugeSvg.setAttribute('aria-hidden', 'true'); + gaugeSvg.innerHTML = ` + + + + + + + + + + + + `; + healthWrapper.appendChild(gaugeSvg); + + const scoreTextWrapper = document.createElement('div'); + scoreTextWrapper.className = 'mageforge-toolbar-health-score-text'; + scoreTextWrapper.innerHTML = ` +
+ --/100 +
+
Overall Health Score
+ `; + healthWrapper.appendChild(scoreTextWrapper); + menuFooter.appendChild(healthWrapper); + + // Run All Tests + Reset button row (with score) + const buttonRow = document.createElement('div'); + buttonRow.className = 'mageforge-toolbar-menu-button-row'; + + this.runAllButton = document.createElement('button'); + this.runAllButton.type = 'button'; + this.runAllButton.className = 'mageforge-toolbar-menu-run-all'; + this.runAllButton.innerHTML = ` + + RUN ALL TESTS + `; + this.runAllButton.onclick = (e) => { + e.stopPropagation(); + this.runAllAuditsForScore(); + }; + buttonRow.appendChild(this.runAllButton); + + this.resetButton = document.createElement('button'); + this.resetButton.type = 'button'; + this.resetButton.className = 'mageforge-toolbar-menu-reset'; + this.resetButton.title = 'Reset score and deactivate all audits'; + this.resetButton.setAttribute('aria-label', 'Reset score and deactivate all audits'); + this.resetButton.innerHTML = ``; + this.resetButton.onclick = (e) => { + e.stopPropagation(); + this.resetScore(); + }; + buttonRow.appendChild(this.resetButton); + + menuFooter.appendChild(buttonRow); + } else { + // No health score – button row with Run All + Reset + const buttonRow = document.createElement('div'); + buttonRow.className = 'mageforge-toolbar-menu-button-row'; + + this.runAllButton = document.createElement('button'); + this.runAllButton.type = 'button'; + this.runAllButton.className = 'mageforge-toolbar-menu-run-all'; + this.runAllButton.innerHTML = ` + + RUN ALL TESTS + `; + this.runAllButton.onclick = (e) => { + e.stopPropagation(); + this.runAllAuditsForScore(); + }; + buttonRow.appendChild(this.runAllButton); + + this.resetButton = document.createElement('button'); + this.resetButton.type = 'button'; + this.resetButton.className = 'mageforge-toolbar-menu-reset'; + this.resetButton.title = 'Deactivate all audits'; + this.resetButton.setAttribute('aria-label', 'Deactivate all audits'); + this.resetButton.innerHTML = ``; + this.resetButton.onclick = (e) => { + e.stopPropagation(); + this.resetScore(); + }; + buttonRow.appendChild(this.resetButton); + + menuFooter.appendChild(buttonRow); + } + const credit = document.createElement('div'); credit.className = 'mageforge-toolbar-menu-credit'; - credit.innerHTML = `Built with ♥ by MageForge`; + credit.innerHTML = `Built with ❤ by MageForge`; menuFooter.appendChild(credit); this.menu.appendChild(menuFooter); @@ -261,12 +358,50 @@ export const uiMethods = { }, /** - * Sync the Toggle All button label to current active state. + * No-op – retained for compatibility; the Run All Tests button has no dynamic label. + */ + updateToggleAllButton() {}, + + /** + * Reset the health score gauge and deactivate all audits. + */ + resetScore() { + this.deactivateAllAudits(); + if (!this.menu) return; + const ARC_LENGTH = 157.08; + const progress = this.menu.querySelector('.mageforge-health-gauge-progress'); + const needle = this.menu.querySelector('.mageforge-health-gauge-needle'); + const numberEl = this.menu.querySelector('.mageforge-toolbar-health-score-number'); + if (numberEl) numberEl.textContent = '--'; + if (progress) progress.setAttribute('stroke-dasharray', `0 ${ARC_LENGTH}`); + if (needle) needle.setAttribute('opacity', '0'); + }, + + /** + * Update the health score gauge and numeric display (0–100). + * + * @param {number} score */ - updateToggleAllButton() { - if (!this.toggleAllButton) return; - const allActive = this.activeAudits.size === this.getAudits().length; - this.toggleAllButton.textContent = allActive ? 'Deactivate All' : 'Activate All'; + updateHealthScore(score) { + if (!this.menu) return; + const ARC_LENGTH = 157.08; + const progress = this.menu.querySelector('.mageforge-health-gauge-progress'); + const needle = this.menu.querySelector('.mageforge-health-gauge-needle'); + const numberEl = this.menu.querySelector('.mageforge-toolbar-health-score-number'); + + if (numberEl) numberEl.textContent = score; + + if (progress) { + const dash = ((score / 100) * ARC_LENGTH).toFixed(2); + progress.setAttribute('stroke-dasharray', `${dash} ${ARC_LENGTH}`); + } + + if (needle) { + const rad = (1 - score / 100) * Math.PI; + needle.setAttribute('x2', (60 + 45 * Math.cos(rad)).toFixed(1)); + needle.setAttribute('y2', (65 - 45 * Math.sin(rad)).toFixed(1)); + needle.setAttribute('opacity', '1'); + } }, toggleMenu() { @@ -298,7 +433,8 @@ export const uiMethods = { this.container = null; this.menu = null; this.burgerButton = null; - this.toggleAllButton = null; + this.runAllButton = null; + this.resetButton = null; this.menuOpen = false; }, };