Inspector and Toolbar refactoring

[dermatz]

No description provided.

[Copilot]

Pull request overview

This PR refactors the Inspector’s frontend asset loading by removing the external Alpine.js CDN dependency in favour of a bundled local fallback, and standardises toolbar/inspector styling by introducing RGB-channel CSS variables to avoid hardcoded rgba(...) values.

Changes:

• Bundle Alpine.js locally and load it as a fallback only when Alpine isn’t already present (e.g. non-Hyvä themes).
• Remove the CSP whitelist entry that existed solely for the jsDelivr CDN.
• Expand and refactor CSS variables and theme styles to use rgba(var(--*-rgb), alpha) consistently across toolbar/inspector UI.

Reviewed changes

Copilot reviewed 15 out of 16 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/view/frontend/web/js/lib/alpine.min.js	Adds bundled Alpine.js for local fallback loading.
src/view/frontend/web/css/toolbar/_variables.css	Adds brand palette + *-rgb channels and updates alpha variants.
src/view/frontend/web/css/toolbar/_themes.css	Refactors light/auto theme overrides to use RGB variables.
src/view/frontend/web/css/toolbar/_menu.css	Updates status pill backgrounds/borders to RGB variables.
src/view/frontend/web/css/toolbar/_jsonld-viewer.css	Updates various text/background/border colours to RGB variables.
src/view/frontend/web/css/toolbar/_groups.css	Updates active-tab and badge tints to RGB variables.
src/view/frontend/web/css/toolbar/_footer.css	Updates theme toggle and danger button tints to RGB variables.
src/view/frontend/web/css/toolbar/_findings.css	Updates borders and finding tints to RGB variables.
src/view/frontend/web/css/toolbar/_feedback.css	Updates feedback shadow colours to RGB variables.
src/view/frontend/web/css/toolbar/_buttons.css	Updates button shadows/spinner borders to RGB variables.
src/view/frontend/web/css/inspector.css	Adds matching palette + *-rgb channels and refactors many rgba() usages.
src/view/frontend/web/css/audits/tab-order.css	Updates badge shadow to RGB variable usage.
src/view/frontend/templates/inspector.phtml	Switches Alpine bootstrap from CDN to local bundled fallback.
src/etc/frontend/csp_whitelist.xml	Removes jsDelivr CSP whitelist (no longer needed).
src/Block/Inspector.php	Exposes a view asset URL for the bundled Alpine.js file.
.gitattributes	Marks the vendored/minified Alpine bundle as binary to reduce diff noise.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 15 out of 16 changed files in this pull request and generated no new comments.

Suppressed comments (3)

src/view/frontend/web/css/toolbar/_variables.css:54

• --mageforge-color-amber-rgb does not match --mageforge-color-amber (currently #edb04d). This will make all new rgba(var(--mageforge-color-amber-rgb), …) usages render with a different amber than the solid text colour/gradient, leading to inconsistent styling.

  --mageforge-color-red-rgb: 239, 68, 68;
  --mageforge-color-red-light-rgb: 252, 165, 165;
  --mageforge-color-yellow-rgb: 251, 191, 36;
  --mageforge-color-amber-rgb: 245, 158, 11;
  --mageforge-color-slate-400-rgb: 148, 163, 184;

src/view/frontend/web/css/inspector.css:65

• --mageforge-color-purple-rgb does not match --mageforge-color-purple (#a78bfa). Any alpha variants that rely on the RGB channels will render as a different purple than the solid colour.

  --mageforge-color-slate-50-rgb: 248, 250, 252;
  --mageforge-color-orange-rgb: 251, 146, 60;
  --mageforge-color-purple-rgb: 168, 85, 247;
  --mageforge-color-fuchsia-rgb: 217, 70, 239;
  --mageforge-color-teal-rgb: 20, 184, 166;

src/view/frontend/templates/inspector.phtml:39

• $alpineJsUrl is escaped for HTML (escapeUrl) but then interpolated into a JavaScript string literal. This is not JS-context safe and can break if the URL ever contains quotes or other characters needing JS escaping. Prefer JSON-encoding the URL and assign it to alpineScript.src without wrapping it in quotes.

            console.log('[MageForge Inspector] Loading bundled Alpine.js');

            var alpineScript = document.createElement('script');
            alpineScript.src = '{$alpineJsUrl}';
            alpineScript.onload = function() {

[Copilot]

Pull request overview

Copilot reviewed 15 out of 16 changed files in this pull request and generated no new comments.

Suppressed comments (4)

src/view/frontend/web/css/toolbar/_variables.css:55

• --mageforge-color-amber-rgb doesn't match --mageforge-color-amber (#edb04d). This makes alpha variants (and any rgba() usage) visually inconsistent with the base colour.

  --mageforge-color-red-light-rgb: 252, 165, 165;
  --mageforge-color-yellow-rgb: 251, 191, 36;
  --mageforge-color-amber-rgb: 237, 176, 77;
  --mageforge-color-slate-400-rgb: 148, 163, 184;
  --mageforge-color-slate-500-rgb: 100, 116, 139;

src/view/frontend/templates/inspector.phtml:20

• The template header docblock still says Alpine is loaded from a CDN, but the bootstrap now loads a local bundled fallback. This comment is now misleading.
  src/view/frontend/web/css/inspector.css:65
• --mageforge-color-purple-rgb doesn't match --mageforge-color-purple (#a78bfa). Any rgba(var(--mageforge-color-purple-rgb), …) will render a different hue than the base purple.

  --mageforge-color-slate-950-rgb: 15, 23, 42;
  --mageforge-color-slate-50-rgb: 248, 250, 252;
  --mageforge-color-orange-rgb: 251, 146, 60;
  --mageforge-color-purple-rgb: 167, 139, 250;
  --mageforge-color-fuchsia-rgb: 217, 70, 239;
  --mageforge-color-teal-rgb: 20, 184, 166;

src/view/frontend/templates/inspector.phtml:40

• The Alpine.js URL is escaped for HTML but then interpolated into a JavaScript string. Use JS-safe encoding (e.g. json_encode) to avoid edge-case string breaking/injection if the generated URL ever contains quotes or other special characters.

            }

            console.log('[MageForge Inspector] Loading bundled Alpine.js');

[Copilot]

Pull request overview

Copilot reviewed 15 out of 16 changed files in this pull request and generated no new comments.

Suppressed comments (2)

src/view/frontend/web/css/toolbar/_themes.css:101

• Same issue as the explicit light theme block: --mageforge-color-white and --mageforge-color-slate-400 are overridden without updating the matching *-rgb variables, so rgba(var(--...-rgb), a) values can become inconsistent in auto/light mode.

    --mageforge-shadow-lg: rgba(var(--mageforge-color-black-rgb), 0.18);
    --mageforge-color-white: #0f172a;
    --mageforge-color-slate-400: #64748b;

src/view/frontend/web/css/toolbar/_themes.css:26

• This theme override changes --mageforge-color-white and --mageforge-color-slate-400, but leaves their corresponding *-rgb variables untouched. Any rgba(var(--...-rgb), a) usage will still use the dark-theme channel values, causing inconsistent colours in light mode.

This issue also appears on line 99 of the same file.

  --mageforge-shadow-lg: rgba(var(--mageforge-color-black-rgb), 0.18);
  --mageforge-color-white: #0f172a;
  --mageforge-color-slate-400: #64748b;

[Copilot]

Pull request overview

Copilot reviewed 16 out of 17 changed files in this pull request and generated no new comments.

Suppressed comments (5)

src/view/frontend/web/css/inspector.css:56

• The inspector defines --mageforge-color-amber-rgb differently from toolbar.css. Since many alpha variants now use the *-rgb channels, this will override the toolbar’s warning styling when inspector.css is loaded after toolbar.css.

  --mageforge-color-amber-rgb: 245, 158, 11;

src/view/frontend/web/css/inspector.css:63

• The inspector defines --mageforge-color-purple-rgb differently from toolbar.css. Because toolbar alpha styles now use *-rgb channels, loading inspector.css after toolbar.css will shift toolbar WCAG group colours unexpectedly.

  --mageforge-color-purple-rgb: 167, 139, 250;

src/view/frontend/web/css/toolbar/_themes.css:102

• Same issue as the explicit light theme block: the auto(light) overrides update non-rgb tokens but not the matching *-rgb variables, so rgba(var(--…-rgb), alpha) will continue using the dark-theme channels in light preference mode.

    --mageforge-shadow-md: rgba(var(--mageforge-color-black-rgb), 0.13);
    --mageforge-shadow-lg: rgba(var(--mageforge-color-black-rgb), 0.18);
    --mageforge-color-white: #0f172a;
    --mageforge-color-slate-400: #64748b;
  }

src/view/frontend/web/css/inspector.css:41

• inspector.css defines global :root tokens that overlap with toolbar.css tokens (and inspector.phtml loads toolbar.css first, then inspector.css). The differing values here will override toolbar colours site-wide (e.g. amber/purple), causing inconsistent styling between toolbar and inspector.

Make the shared tokens match the toolbar palette (or remove/namespace the duplicate :root definitions).

This issue also appears on line 56 of the same file.

  --mageforge-color-amber: #f59e0b;
  --mageforge-color-cyan: #22d3ee;
  --mageforge-color-purple: #a78bfa;
  --mageforge-color-orange: #fb923c;

src/view/frontend/web/css/toolbar/_themes.css:27

• In light theme, --mageforge-color-white and --mageforge-color-slate-400 are overridden, but their corresponding *-rgb variables are not. Since many styles now use rgba(var(--…-rgb), alpha), the alpha tints will still be computed from the old channels, leading to incorrect contrast in light mode.

This issue also appears on line 98 of the same file.

  --mageforge-shadow-md: rgba(var(--mageforge-color-black-rgb), 0.13);
  --mageforge-shadow-lg: rgba(var(--mageforge-color-black-rgb), 0.18);
  --mageforge-color-white: #0f172a;
  --mageforge-color-slate-400: #64748b;
}

[Copilot]

Pull request overview

Copilot reviewed 16 out of 17 changed files in this pull request and generated no new comments.

Suppressed comments (1)

src/view/frontend/web/css/inspector.css:22

• These --mageforge-* variables are declared on :root in this stylesheet. Because inspector.css is loaded after toolbar.css (see inspector.phtml), this overrides the toolbar’s global variables and can change toolbar colours/theme behaviour purely based on stylesheet order.

Consider scoping the inspector variables to .mageforge-inspector instead of :root so they only apply to inspector elements (including the injected overlay nodes which also have the mageforge-inspector class).

  --mageforge-color-white: #ffffff;
  --mageforge-color-black: #000000;