Limit WNP MDN mandala to 90sec & hover

[janbrasna]

One-line summary

Only animates on body:hover, and stops after a minute and half, to conserve resources.

Significant changes and points to review

This is just a PoC/experiment 🧪 to demonstrate an alternative to completely removing the feature. Unlike MDN itself where it was present on pages that were to be open for prolonged periods of time, and used across many different browsers, this page only targets Gecko, that doesn't have as bad of an impact as others, that would otherwise melt down slightly on this page;) It still takes around 25% CPU to rotate and 25% CPU to fade colors, with the glyph coloring also having huge energy impact mostly due to GPU consumption. (The rotation itself got optimized in the past.)

The last batch of improvements was using page visibility API and a 5min timeout, this cuts it short at 1m30sec and only triggering with pointer hovering the actual page — so it won't animate say on a secondary display just getting open "in the background" yet ending up visible there, spinning the fans etc. without any apparent reasons.

Just an innocent attempt to keep the dash of vibrancy long enough to notice, but not hogging the resources unnecessarily.

• Adds a11y motion preference guardrails.

• Also shortens the generated CSS by optimizing a little.

(Split across commits to separate the changes from whitespace/indent tweaks.)

Issue / Bugzilla link

Improves #11793
(see #15828)
https://bugzil.la/1775033
https://bugzil.la/1861860

Testing

http://localhost:8000/firefox/111.1a2/whatsnew/

[maureenlholland]

My preference is still to remove completely. It's been around for over a year, folks have seen it. It would still be new to new users but doesn't feel as important to keep since the MDN pages no longer use it.

I wouldn't mind keeping it around as a hover-only easter egg, but given the layering of the elements in that header, I don't think there's an easy way to trigger animation on mandala hover only.

[stevejalim]

My preference is still to remove completely. It's been around for over a year, folks have seen it. It would still be new to new users but doesn't feel as important to keep since the MDN pages no longer use it.

+1 from me on that, too. It's neat, but the value is low compared to the overhead

[stevejalim]

That said, if we did keep it...

Just an innocent attempt to keep the dash of vibrancy long enough to notice

What about 15s + hover? Either one will see it straight away on browser restart, or miss it in an offscreen tab and then the hover will be there

[janbrasna]

My preference is still to remove completely.

Oh absolutely. I just had some tweaks already tuned and knobs turned when the neighboring PR removing it altogether appeared, so I only submitted this in case it'd be helpful for whatever reason. (I'm not making any calls about its future esp. how "on brand" it is actually these days, or not…)

It may come handy in case the other MDN WNP PR would be stuck waiting for content or stakeholder approval per se, as this can probably ship unnoticed as an interim improvement. Feel free to close once not necessary.

[janbrasna]

BTW… If you're thinking easter egg, say on pointer events, it can animate e.g. on CTA hover:

Suggested change

	@media not (prefers-reduced-motion: reduce) {
	body:hover & {
	// motion
	@media not (prefers-reduced-motion: reduce) {
	.c-mdn-header:has(.c-mdn-header-cta a:hover) & {
	// motion

(or any other crazy selector crossing DOM levels if needed, as it only targets FXDE so a pretty current beta can be expected, so :has() support since Fx121 is good enough here?)

[janbrasna]

(You can check out janbrasna@6b40a0a if you fancy trying out the change above ^^)

[maureenlholland]

Next dev release is scheduled for Feb 4: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/135

If we don't get direction on the updated copy, an interim improvement sounds good to me. Will revisit this end of January if needed. Thanks for sharing @janbrasna!