Show style images in the editor preview

[erseco]

Summary

In the embedded editor's Preview, the style's icons were missing: the previous/next buttons and the menu toggle showed as plain coloured circles, and the footer logo was gone. It happened with every style: built-in, admin-uploaded and user-uploaded.

After this change, the preview shows the style exactly as the published activity does.

Original issue

Related to exelearning/exelearning#2476, reported by @ignaciogros. Thank you for the before/after images and for checking all three kinds of styles: that ruled out the styles themselves and pointed at the preview renderer.

Root cause

The editor renders its preview through a service worker, preview-sw.js. editor/index.php wrapped navigator.serviceWorker.register and never let that worker register (it resolved a fake registration instead). The wrapper was added so a proxied static.php router that 404s the script (moodle-playground) would not spam the console.

Without the worker, the editor falls back to a blob: URL. That fallback inlines the style's CSS but keeps its relative url(...) references, for example background: … url(img/icons.png) for the navigation buttons. From a blob: URL those paths cannot resolve, so the background colour paints and the icon sprite does not.

Fix

The wrapper now calls the real register() and only absorbs a failure: it logs a warning and resolves the stub, so the editor still falls back quietly where the worker cannot be served. On a normal site the worker registers under editor/static.php/<cmid>/viewer/ (inside the script's own path, so no Service-Worker-Allowed header is needed) and the preview resolves every theme file.

TDD

RED

tests/js/editor_service_worker_shim.test.js extracts the service-worker block from editor/index.php and runs it against a fake navigator. On main:

× registers preview-sw.js so the preview can resolve theme images
  AssertionError: expected "vi.fn()" to be called with arguments: [ '/static.php/2/preview-sw.js', … ]
× resolves a failed registration quietly so the editor uses its blob fallback
  AssertionError: expected "vi.fn()" to be called at least once
Tests  2 failed (2)

GREEN

make test-js → 6 files, 72 tests passed
vendor/bin/phpcs --standard=moodle editor/index.php → 0 errors, 0 warnings

Manual check: after opening the preview, navigator.serviceWorker.getRegistrations() inside the editor returns …/editor/static.php/2/viewer/ with preview-sw.js active.

How to test

1. As a teacher, open any eXeLearning activity and click Edit with eXeLearning.
2. Open Preview (eye icon).
3. The previous/next arrows, the menu (hamburger) icon and the footer logo must be visible.
4. Change the style from the Styles panel and check the preview again.

Screenshots

Before

After

Notes

• Draft PR 80 rewrites the same wrapper (it returns a full fake registration). Whichever merges second needs a small rebase; the intent here is only "let the real registration through, fall back on failure".
• No version.php bump: only editor/index.php (PHP) changes.
• Not verified on moodle-playground; there the registration is expected to fail and fall back exactly as before.

---

Moodle Playground Preview

The changes in this pull request can be previewed and tested using a Moodle Playground instance.

ℹ️ The eXeLearning editor is fetched from the shared release and unpacked into the plugin when the playground boots, so the first load may take a few extra seconds. ELPX upload, viewer and preview work normally.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.92%. Comparing base (48a82fc) to head (5a15309).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff            @@
##               main     #158   +/-   ##
=========================================
  Coverage     93.92%   93.92%           
  Complexity      810      810           
=========================================
  Files            46       46           
  Lines          3554     3554           
=========================================
  Hits           3338     3338           
  Misses          216      216           

Flag	Coverage Δ
javascript	96.00% <ø> (ø)
php	93.83% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Components	Coverage Δ
PHP (server-side)	93.83% <ø> (ø)
JavaScript (SCORM tracker)	96.00% <ø> (ø)

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.