GoogleChrome / web-vitals-extension

A Chrome extension to measure essential metrics for a healthy site
https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en
Apache License 2.0
2.35k stars 105 forks source link

[Feature request] Blinking icon is too distracting. Having an option to disable it might be nice. #89

Closed gangsthub closed 1 year ago

gangsthub commented 3 years ago

Initial state:

initial state, only red squared icon

Alternate state:

alternate state, req square is covered by some more data, like the metric failing and the offset value

Currently, the badge is designed to be blinking constantly.

It's a little bit too distracting when the Extension icon is "pinned" on Chrome's toolbar.

I think having the blinking as an option you can disable would be more friendly. Or just show the red icon with the badge (one of the current states).

rviscomi commented 2 years ago

I wonder if we can tap into the prefers-reduced-motion user setting to improve this. The popup also has a slight animation that we can skip.

tunetheweb commented 1 year ago

I kinda agree it's a bit distracting and had a quick look into this, but might not be as simple as I initially thought it would be.

This is controlled by the service worker, but it doesn't have access to localStorage (to get the user settings), nor window (to call window.matchMedia('(prefers-reduced-motion: reduce)').matches to see if prefers-reduce-media is set).

So guessing we'll need to broadcast the latest state of this with each metric? Which sounds a little more complicated than ideal.

Or maybe we should just stop this and stick with the overall state one (which should only change when the metric worsen - which is probably something you want to be altered to).

tunetheweb commented 1 year ago

Actually the settings are synced to profile, so are available to the service worker. Fix coming up.