Hi! Basic Firefox devtools highlight the box model filling content, padding, and margins. But it is not the case in Developer Edition:
Filled regions look more noticeable to me. May I ask for your help on how to make Developer Edition highlighter behave the same way?
Hi,
This changed in https://bugzilla.mozilla.org/show_bug.cgi?id=1734195
When prefers-reduced-motion is set to reduce, we now use simplified highlighters to avoid creating flashing effects on the screen which can be disturbing for some users.
Although I can imagine not everyone enabling prefer-reduced-motion had this issue so it makes sense to make this configurable.
Edit: Filed https://bugzilla.mozilla.org/show_bug.cgi?id=1817639
Wow, so interesting! Thank you.
Indeed, in system preferences I turned on “reduce motion” — it is the only way to disable some distracting animations on macOS.
As I can see changing system preferences get the classic highlighter back (thank you again). But about:config -> prefers-reduced-motion -> 0 does not change browser behavior. Is it right? Shouldn’t the browser config ignore system settings in such case?
prefers-reduced-motion is not a preference supported by Firefox (at least I don’t thinks so) so updating that in about:config will not have any impact.
I think the only way here is for us to introduce a new preference which allows to override the default behavior.
Oh you could set ui.prefersReducedMotion to 0 instead
My Firefox has recently auto updated to 111 and I’ve noticed this change immediately. I would like to revert this change, but setting ui.prefersReducedMotion to false in about:config does nothing. How can I restore the previous behaviour? The new highlighter is imho not a good change.
i just looked it up and It’s not even defined in the about:config.
It seems that it is only used in test
did you try to set it to 0 (and not false), and restarted DevTools?
it’s used on the platform side to force the prefers reduced motion behavior.
Some prefs are not defined by default (e.g. don’t appear in about:config), but do have an effect when set
I’m not sure how to change the value from “false” to “0”. I can only toggle the value between “true” or “false” by double clicking or using the toggle button, but I’m unable to enter a custom value.
You need to remove the entry, and add a new one, choosing Number instead of the default Boolean
Quick follow up:
We are going to disable those new highlighters by default, even if you have prefers-reduced-motion enabled. Instead there will be a setting in the DevTools settings panel where you can opt-in or out from this feature.
Work is happening in https://bugzilla.mozilla.org/show_bug.cgi?id=1817639, hopefully should land in Firefox 113.
Thank you for this thread, just spent 40 minutes googling to find this change, wondering if I’m going crazy. I also have animations disabled in macOS for being distracting. The new highlighter is really hard to see.
