fix(theming): Conitionally disable blur filter for performance

[susnux]

• Resolves: CSS blur filter seriously impacts performance in Chrome spreed#7896
• Closes: fix: appnavigation performance problems nextcloud-libraries/nextcloud-vue#5607
• Closes: fix: dashboard performance problems #45049
• Resolves: scrolling in dashboard is laggy #44122

Summary

As an alternative for #45049 but this one is not removing the blurry background for all users but only for chrome + edge by default.
User can force enable if it works for them (e.g. they have hardware acceleration) or force disable if they suffer performance issues.

Firefox and Safari are not affected by the performance issues, and Android should also be ok as they have proper hardware acceleration.
Mostly Windows is affected and Linux with faulty GPU drivers.

Screencast

a.mp4

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[susnux]

To be discussed by @nextcloud/designers

[kesselb]

Thanks for working on it 👍

Apparently my chromium has no hardware acceleration any longer (it's a snap package now, maybe that's related).

It's basically impossible to use Nextcloud and especially navigation and dashboard.

Screencast.from.2024-05-18.16-46-36.webm

Screencast.from.2024-05-18.16-55-12.webm

The auto-detection worked.
If you selected yes or no once, you cannot go back to "auto" but that's acceptable, I guess.
The left navigation looks definitely cleaner with the blurred background.

[marcoambrosini]

I like this approach in general :)
One thing: leaving the sharp edges of a picture below the text can make it hard to read. I think that when we disable the blur we should also add a solid background, not transparent. We can use an average of the background similar to the auto primary? But lighter or darker depending on the theme.
Can we also narrow this down to windows && chromium users only?

[susnux]

/backport to stable28

[jancborchardt]

@susnux with this pull request, most people will not see the visual effect of blurring (however it is achieved) anymore, as far as I understand? Which browsers is it default enabled and which default disabled for?

I was under the impression we would go for #45452 as an inbetween solution instead. cc @AndyScherzinger since removing blur will make stuff look less nice.

[marcoambrosini]

If it's impossible to find a solution I would remove transparency + blur everywhere and work from there to achieve a nice design for everyone, without settings

[susnux]

I was under the impression we would go for #45452 as an inbetween solution instead. cc @AndyScherzinger since removing blur will make stuff look less nice.

Yes I hope we get this for Nextcloud 30. But we need a backportable solution for 28 and 29 as currently on those machines you can not use Nextcloud.
If you prefer I remove the autodetect part and only add the option switch.

For 30 we can then use @marcoambrosini solution

[susnux]

Which browsers is it default enabled and which default disabled for?

Currently in this PR:
✅ everything not Chromium based
✅ Chromium based on mobile
✅ Chromium based on MacOS
❌ Chromium based on Windows
❌ Chromium based on Linux

The first 3 never suffer the issue
For Windows and Linux it depends on your GPU driver

[marcoambrosini]

we need a backportable solution

Got it

If you prefer I remove the autodetect part and only add the option switch

I think it's fine then to leave the autodetect on

[jancborchardt]

Thanks for the explanation @susnux in your comment #45395 (comment)

Then I agree with you we should get this in very soon to backport, and get Marco’s solution done for 30: #45452

@sorbaugh

[szaimen]

Tested and works :)

However it is a bit weird to show this state by default which will first allow to disable it even though it is already disabled:

we will use the new approach with Nextcloud 30

[szaimen]

🎉🎉🎉🎉🎉

[szaimen]

Which browsers is it default enabled and which default disabled for?

Currently in this PR: ✅ everything not Chromium based ✅ Chromium based on mobile ✅ Chromium based on MacOS ❌ Chromium based on Windows ❌ Chromium based on Linux

The first 3 never suffer the issue For Windows and Linux it depends on your GPU driver

@susnux I guess we should document this somewhere?

[szaimen]

I suppose on windows and linux with chromium based browser the checkbox should also be disabled? Apparently @peterwebdesign ran into a weird bug with it...