feat: Toolbar redesign by dermatz · Pull Request #202 · OpenForgeProject/mageforge

dermatz · 2026-06-23T20:35:25Z

This pull request removes the "Show Health Score" feature toggle from the MageForge Inspector toolbar, including its configuration, translations, and UI integration. Additionally, it introduces several new modular CSS files to enhance and organize the toolbar's frontend styles, covering animations, buttons, burger menu, feedback toasts, and credit links.

Removal of "Show Health Score" Feature Toggle:

Removed the show_health_score configuration option from all relevant files, including config.xml, system.xml, and the InspectorConfig class. This also removes the associated getter method from the block and the related data attribute from the toolbar template. [1] [2] [3] [4] [5]
Deleted all translations and labels related to the "Show Health Score" option from both English and German translation files. [1] [2]

Frontend Style Improvements:

Added new CSS modules for the toolbar:
- Animations (_animations.css) for keyframe effects.
- Burger button styles (_burger.css) for the main toolbar toggle.
- Button styles (_buttons.css) for toolbar actions, including run, reset, and feature request buttons.
- Feedback toast styles (_feedback.css) for success and error messages.
- Credit link styles (_credit.css) for the footer credit section.

… names

…hts, and menu components

…er structure and maintainability

… in toolbar

…oolbar

…ractions

… indicators

…t in toolbar

…up order

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 46 out of 46 changed files in this pull request and generated 10 comments.

+      if (hasErrors) {
+        applyHighlight(errors, key, context, {
+          severity: "error",
+          autoFindings: true,
+          formatFinding: () => ({ action: "Show affected element" }),
+        });
+      }
+      if (hasWarnings) {
+        applyHighlight(warnings, key, context, {
+          severity: "warning",
+          autoFindings: true,
+          formatFinding: () => ({ action: "Show affected element" }),
+        });
+      }
+


      this.activeAudits.delete(auditKey);
-      audit.run(this, false);
+      try {
+        audit.run(this, false);
+      } catch (err) {
+        console.warn(
+          `[MageForge] Audit "${auditKey}" failed on deactivate:`,
+          err,
+        );
+      }


+    const list = document.createElement("div");
+    list.className = "mageforge-findings-list";
+
+    findings.forEach(({ el, selector, severity = "error" }, index) => {


+      const actionEl = document.createElement("span");
+      actionEl.className = "mageforge-finding-action";
+      actionEl.textContent = "Show Element";
+


+  _getFocusableEls() {
+    return Array.from(
+      this.menu.querySelectorAll(
+        'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      ),
+    ).filter((el) => !el.closest("[hidden]"));


+.mageforge-toolbar[data-theme="light"] .mageforge-toolbar-menu {
+  --mageforge-bg-dark: rgba(255, 255, 255, 0.98);
+  --mageforge-bg-dark-alt: rgba(248, 250, 252, 0.98);
+  --mageforge-border-color: rgba(0, 0, 0, 0.12);
+  --mageforge-surface-glass-hover: rgba(0, 0, 0, 0.05);
+  --mageforge-shadow-sm: rgba(0, 0, 0, 0.1);
+  --mageforge-shadow-md: rgba(0, 0, 0, 0.15);
+  --mageforge-shadow-lg: rgba(0, 0, 0, 0.2);
+  --mageforge-color-white: #0f172a;
+  --mageforge-color-slate-400: #64748b;
+}


+@media (prefers-color-scheme: light) {
+  .mageforge-toolbar[data-theme="auto"] .mageforge-toolbar-menu {
+    --mageforge-bg-dark: rgba(255, 255, 255, 0.98);
+    --mageforge-bg-dark-alt: rgba(248, 250, 252, 0.98);
+    --mageforge-border-color: rgba(0, 0, 0, 0.12);
+    --mageforge-surface-glass-hover: rgba(0, 0, 0, 0.05);
+    --mageforge-shadow-sm: rgba(0, 0, 0, 0.1);
+    --mageforge-shadow-md: rgba(0, 0, 0, 0.15);
+    --mageforge-shadow-lg: rgba(0, 0, 0, 0.2);
+    --mageforge-color-white: #0f172a;
+    --mageforge-color-slate-400: #64748b;
+  }
+
+  .mageforge-toolbar[data-theme="auto"] .mageforge-toolbar-menu-toggle {
+    background: var(--mageforge-toggle-bg-off-light);
+  }
+}


…tions

…nability

Copilot

Pull request overview

Copilot reviewed 53 out of 53 changed files in this pull request and generated 9 comments.

+  _buildPanelHeader(title, showScore, groupKey) {
    const header = document.createElement("div");
-    header.setAttribute("role", "button");
-    header.setAttribute("tabindex", "0");
-    header.className = "mageforge-toolbar-menu-group-header";
-    header.setAttribute(
-      "aria-expanded",
-      String(!this.collapsedGroups.has(key)),
-    );
-    header.onclick = (e) => {
-      e.preventDefault();
+    header.className = "mageforge-tab-panel-header";
+    header.dataset.group = groupKey;
+
+    const titleEl = document.createElement("h2");
+    titleEl.className = "mageforge-tab-panel-title";
+    titleEl.textContent = title;
+    header.appendChild(titleEl);


+  _buildTabNav() {
+    const nav = document.createElement("nav");
+    nav.className = "mageforge-toolbar-tab-nav";
+    nav.setAttribute("role", "tablist");
+    nav.setAttribute("aria-label", "Audit categories");
+
+    // Action bar (run/reset for the current tab).
+    // column-reverse means the first DOM child appears at the visual bottom.
+    this.footerActionBar = document.createElement("div");
+    this.footerActionBar.className = "mageforge-nav-action-bar";
+    nav.appendChild(this.footerActionBar);


+      const row = document.createElement("div");
+      row.className = `mageforge-audit-finding mageforge-audit-finding--${severity}`;
+


+      row.addEventListener("click", (e) => {
+        e.stopPropagation();
+        el.scrollIntoView({ behavior: "smooth", block: "center" });
+        el.classList.add("mageforge-finding-flash");
+        setTimeout(() => el.classList.remove("mageforge-finding-flash"), 1200);
+      });


+   * @returns {HTMLDivElement}
+   */
+  _buildScoreWidget() {
+    const gradId = `mf-sg-${crypto.randomUUID().slice(0, 8)}`;


+    const panel = document.createElement("div");
+    panel.className = "mageforge-home-panel";
+
+    const gradId = `mf-gauge-${crypto.randomUUID().slice(0, 8)}`;


+      // Deactivate existing audits in this group
+      groupAudits.forEach((audit) => {
+        if (this.activeAudits.has(audit.key)) {
+          this.activeAudits.delete(audit.key);
+          audit.run(this, false);
+        }
+      });


+@import url("toolbar/_variables.css");
+@import url("toolbar/_reset.css");
+@import url("toolbar/_burger.css");
+@import url("toolbar/_menu.css");
+@import url("toolbar/_groups.css");
+@import url("toolbar/_findings.css");
+@import url("toolbar/_highlights.css");
+@import url("toolbar/_feedback.css");
+@import url("toolbar/_animations.css");
+@import url("toolbar/_footer.css");
+@import url("toolbar/_health.css");
+@import url("toolbar/_buttons.css");
+@import url("toolbar/_credit.css");
+@import url("toolbar/_positions.css");
+@import url("toolbar/_themes.css");
+@import url("toolbar/_responsive.css");


+/**
+ * Build a short, human-readable CSS selector for labelling a finding.
+ *
+ * @param {Element} el
+ * @returns {string}
+ */
+export function getReadableSelector(el) {
+  if (el.id) return `#${el.id}`;
+  const tag = el.tagName.toLowerCase();
+  const classes = [...el.classList]
+    .filter((c) => !c.startsWith("mageforge"))
+    .slice(0, 2)
+    .join(".");
+  if (classes) return `${tag}.${classes}`;
+  const ariaLabel = el.getAttribute("aria-label");
+  if (ariaLabel) return `${tag}[aria-label]`;
+  if (el.name) return `${tag}[name="${el.name}"]`;
+  if (tag === "img" && el.src) {
+    const base = el.src.split("/").pop().split("?")[0].slice(0, 24);
+    return `img/${base}`;
+  }
+  return tag;


…ence

Copilot

Pull request overview

Copilot reviewed 53 out of 54 changed files in this pull request and generated 9 comments.

+    titleEl.className = "mageforge-tab-panel-title";
+    titleEl.textContent = title;
+    header.appendChild(titleEl);
+
+    return header;


+   * @returns {HTMLDivElement}
+   */
+  _buildScoreWidget() {
+    const gradId = `mf-sg-${crypto.randomUUID().slice(0, 8)}`;


+    const panel = document.createElement("div");
+    panel.className = "mageforge-home-panel";
+
+    const gradId = `mf-gauge-${crypto.randomUUID().slice(0, 8)}`;


+.mageforge-toolbar-tab-nav {
+  display: flex;
+  flex-direction: column-reverse;
+  width: 200px;
+  flex-shrink: 0;


+/* Sidebar: leicht abgesetzt vom weißen Content-Bereich */
+.mageforge-toolbar[data-theme="light"] .mageforge-toolbar-tab-nav {
+  background: #f8fafc;
+}
+
+/* Home-Tab active: weißer Alpha-Wert unsichtbar auf hellem Hintergrund */
+.mageforge-toolbar[data-theme="light"]
+  .mageforge-toolbar-tab-btn[data-tab="home"].mageforge-tab-active {
+  background: rgba(0, 0, 0, 0.07);
+}
+
+/* Gruppen-Tab active: Alpha leicht erhöhen für bessere Sichtbarkeit */
+.mageforge-toolbar[data-theme="light"]
+  .mageforge-toolbar-tab-btn[data-tab="wcag"].mageforge-tab-active {
+  background: rgba(168, 85, 247, 0.14);
+}


+/* Theme-Toggle-Pill: hardcodiertes weißes Alpha durch dunkles ersetzen */
+.mageforge-toolbar[data-theme="light"] .mageforge-theme-toggle {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.mageforge-toolbar[data-theme="light"] .mageforge-theme-btn:hover {
+  background: rgba(0, 0, 0, 0.08);
+}
+
+/* Gradient-Buttons: Textfarbe explizit weiß halten (nicht #0f172a erben) */
+.mageforge-toolbar[data-theme="light"] .mageforge-toolbar-menu-run-all,
+.mageforge-toolbar[data-theme="light"] .mageforge-home-check-btn,
+.mageforge-toolbar[data-theme="light"] .mageforge-group-run-btn {
+  color: #ffffff;
+}


+  () => {
+    return Array.from(
+      document.querySelectorAll('button svg, a svg, [role="button"] svg'),
+    ).filter((svg) => {
+      // Skip toolbar's own SVGs
+      if (svg.closest(".mageforge-toolbar")) return false;
+      // Already hidden from AT
+      if (svg.getAttribute("aria-hidden") === "true") return false;
+      // Has a <title> → informative, not decorative
+      if (svg.querySelector("title")) return false;
+      // Has aria-label or aria-labelledby → informative
+      if (svg.getAttribute("aria-label") || svg.getAttribute("aria-labelledby"))
+        return false;
+      return true;
+    });
+  },


+@import url("toolbar/_variables.css");
+@import url("toolbar/_reset.css");
+@import url("toolbar/_burger.css");
+@import url("toolbar/_menu.css");
+@import url("toolbar/_groups.css");
+@import url("toolbar/_findings.css");
+@import url("toolbar/_highlights.css");
+@import url("toolbar/_feedback.css");
+@import url("toolbar/_animations.css");
+@import url("toolbar/_footer.css");
+@import url("toolbar/_health.css");
+@import url("toolbar/_buttons.css");
+@import url("toolbar/_credit.css");
+@import url("toolbar/_positions.css");
+@import url("toolbar/_themes.css");
+@import url("toolbar/_responsive.css");


+      // Deactivate existing audits in this group
+      groupAudits.forEach((audit) => {
+        if (this.activeAudits.has(audit.key)) {
+          this.activeAudits.delete(audit.key);
+          audit.run(this, false);
+        }
+      });


…r score widget ID usage

Copilot

Pull request overview

Copilot reviewed 53 out of 54 changed files in this pull request and generated 7 comments.

+function generateId(prefix) {
+  const rand =
+    crypto.randomUUID?.().slice(0, 8) ??
+    Math.random().toString(36).slice(2, 10);
+  return `mf-${prefix}-${rand}`;
+}


+        <div>${createLogoSvg("#E5622A")}</div>
+        <span class="mageforge-toolbar-menu-title-text">MageForge</span>
+      </div>
+      <button type="button" class="mageforge-toolbar-menu-close" title="Close & deactivate all">


+        const row = document.createElement("div");
+        row.className = `mageforge-audit-finding mageforge-audit-finding--${severity}`;


+      } catch (err) {
+        console.warn(
+          `[MageForge] Audit "${auditKey}" failed on activate:`,
+          err,
+        );
+        this.activeAudits.delete(auditKey);
+      }


+      // Deactivate existing audits in this group
+      groupAudits.forEach((audit) => {
+        if (this.activeAudits.has(audit.key)) {
+          this.activeAudits.delete(audit.key);
+          audit.run(this, false);
+        }
+      });


+      const type = (s.getAttribute("type") || "").toLowerCase();
+      // Module scripts are deferred by spec; non-JS types are not executed
+      if (type && type !== "text/javascript") return false;
+      return !s.hasAttribute("defer") && !s.hasAttribute("async");


…nagement, and score animations

…nd consistency

Copilot

Pull request overview

Copilot reviewed 58 out of 59 changed files in this pull request and generated 2 comments.

+      const type = (s.getAttribute("type") || "").toLowerCase();
+      // Module scripts are deferred by spec; non-JS types are not executed
+      if (type && type !== "text/javascript") return false;
+      return !s.hasAttribute("defer") && !s.hasAttribute("async");


Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

dermatz and others added 30 commits June 16, 2026 17:24

feat: Add MageForge Toolbar styles and animations for various components

98abef4

feat: Implement new feature for extracting ticket numbers from branch…

b939e4b

… names

feat: Redesign toolbar styles for feedback, findings, groups, highlig…

608cfa8

…hts, and menu components

refactor(audits): migrate audits to use createAudit function for bett…

628ef41

…er structure and maintainability

feat: Add group-specific audit buttons and health score functionality…

f13ace3

… in toolbar

feat: Add error/warning summary badges and update toolbar styles

bd215d4

chore: Remove hiding of group reset buttons in audit methods

c0b9400

feat: Update toolbar styles and add custom scrollbar design

fe7bdcb

feat: Redesign footer action bar and update button functionality in t…

be65dea

…oolbar

feat: Add feature request button to toolbar for audit requests

6202dcb

feat: Redesign nav action bar and update button styles in toolbar

db08598

feat: Update button styles and add reset all functionality in toolbar

d417620

feat: Update padding in nav action bar for improved layout

87c252a

feat: Update nav tab label from "Home" to "Dashboard"

227e81e

feat: Implement dashboard category score breakdown and update UI inte…

45fa185

…ractions

feat: Add dashboard issues list and update functionality

6e60478

feat: Update toolbar background color for improved visibility

b54a14c

feat: Update active state styles for home tab in toolbar

2490ea0

feat: Add focus-visible styles for toolbar buttons and menu items

c759306

feat: Enhance toolbar animations and button interactions with loading…

fcb359e

… indicators

feat: Implement audit scoring calculation and improve focus managemen…

9546d99

…t in toolbar

feat: Redesign toolbar layout and enhance responsive styles

7f7639f

feat: Add SEO audit features and enhance toolbar styles

2cce727

feat: Enhance toolbar with per-group icon colors and update audit gro…

e4054bf

…up order

feat: Add page context and quick stats components to toolbar

6cc0f6a

feat: Improve toolbar layout and enhance scrollbar styles

fb90bb1

feat: Refactor toolbar styles and improve code readability

d1dd4b8

feat: Enhance toolbar with new theme toggle and export functionality

9da27e7

fix: Correct label casing for SVG Icons without aria-hidden

a4b4d89

feat: Redesign toolbar footer layout and improve credit link positioning

6dae1c6

Potential fix for pull request finding

1d8a0e1

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot AI reviewed Jun 23, 2026

View reviewed changes

chore: Remove health score feature from toolbar and related configura…

6ddbb34

…tions

Copilot AI review requested due to automatic review settings June 24, 2026 06:18

github-actions Bot added Config Toolbar I18n Styling labels Jun 24, 2026

Copilot started reviewing on behalf of dermatz June 24, 2026 06:19 View session

chore: Refactor toolbar audit code for better readability and maintai…

515dc3c

…nability

Copilot AI reviewed Jun 24, 2026

View reviewed changes

dermatz added 2 commits June 24, 2026 08:35

feat: Redesign toolbar themes for improved visibility and user experi…

45465e5

…ence

feat: Enhance scrollbar styling for improved usability

fa1de0d

Copilot AI review requested due to automatic review settings June 24, 2026 06:38

Copilot started reviewing on behalf of dermatz June 24, 2026 06:38 View session

[toolbar-redesign] feat: Update toolbar image for enhanced visual appeal

817d3ed

Copilot AI reviewed Jun 24, 2026

View reviewed changes

feat: Implement generateId function for SVG ID generation and refacto…

77c2f9a

…r score widget ID usage

Copilot AI review requested due to automatic review settings June 24, 2026 06:46

Copilot started reviewing on behalf of dermatz June 24, 2026 06:46 View session

Copilot AI reviewed Jun 24, 2026

View reviewed changes

dermatz added 2 commits June 24, 2026 09:09

feat: Add MageForge Toolbar functionality with menu controls, item ma…

b4a76d5

…nagement, and score animations

[toolbar-redesign] feat: Update comments in _themes.css for clarity a…

72638cc

…nd consistency

Copilot AI review requested due to automatic review settings June 24, 2026 07:11

Merge branch 'main' into toolbar-redesign

d3e2de1

Copilot started reviewing on behalf of dermatz June 24, 2026 07:11 View session

Copilot AI reviewed Jun 24, 2026

View reviewed changes

Potential fix for pull request finding

abbbf23

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot AI review requested due to automatic review settings June 24, 2026 07:16

Copilot started reviewing on behalf of dermatz June 24, 2026 07:16 View session

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Toolbar redesign#202

feat: Toolbar redesign#202
dermatz wants to merge 49 commits into
mainfrom
toolbar-redesign

dermatz commented Jun 23, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		const row = document.createElement("div");
		row.className = `mageforge-audit-finding mageforge-audit-finding--${severity}`;

Uh oh!

Conversation

dermatz commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dermatz commented Jun 23, 2026 •

edited

Loading