Introduce blur for overview, panel and shell popups
Hello,
First of all, I don't know if I should open this, or just continue another issue (os-mockups#93 (closed), which is very similar but less complete, or os-mockups#100 (closed), which is why I opened this issue, or even GNOME/gnome-shell#4695 (closed), GNOME/gnome-shell#4307, GNOME/gnome-shell#1590, etc...). I open this to do this in a more organized way, but feel free to close it and tell me to propose somewhere else and/or not talk again about something already suggested.
The blur
This is about blurring gnome widgets, which in my opinion could be great, especially in addition of the new quick settings being talked about. Here is a (non-extensive) list of which parts of the shell could be blurred:
- overview/app grid
- overview dash (may not be needed, a simple transparency would be enough to see the overview blur behind it)
- panel
- app grid folders popup
- quick settings
- time/agenda etc popup
- maybe most of the panel popups?
- fullscreen popups ("Do you want to shut down your computer?", gksudo, ...)
- notifications
- OSD
Adding some transparency (opacity ≅ 0.7) to buttons and plain widgets would then be superb, so they can blend in their environment (without a need to change the adwaita colour palette); you can see the example in the mockup for quick settings at the end of the issue.
Pro/cons
Here are the main pros/cons I could think of:
-
pros:
- more "integrated" popups (quick settings for example), in the sense that they merge into their background and reduce the contrast between the popup and its backdrop
- more readable text than simple transparency
- for the panel, using blur coupled with GNOME/gnome-shell!404 (closed) would be beautiful and maybe simplify this MR, as there would no be any problem with "noisy" wallpaper anymore
- move away from the current grey-ish feeling, especially in app grid (where there are is a lot of grey space)
- provide a more modern and, of course, classy look :)
-
cons:
- might introduce some overhead if dynamic blur (backdrop blur with opacity < 1) is used extensively
- would be taken care of when using static blur (copy the background, crop it the adapt the element, blur it and use it as image background); this is an option I provide in Blur my Shell for the panel blur and is not very hard to achieve consistently
- using dynamic blur would only be required for popups (ie not for panel, nor overview), which are not meant to be opened during a long time anyway (open it, click and it closes), so the using somewhat cpu-extensive blur as a background would really not have a great impact
- there could be a way to disable it (just a switch in prefenrences, not more), and it could even be automatically disabled if performances are not good (in the same way animations are disabled in a vm, iirc)
- the current implementation
Shell.BlurEffect
, although truly beautiful, it still not reliable enough (although this could be taken care of if it becomes heavily used, as it is currently only used to statically blur the lockscreen so bugs are not very important for the shell)- biggest issue is the presence of artefacts when shadows hover blurred widgets: GNOME/gnome-shell#2857
- it is also not possible (from what I tried) to create a rounded blur (or whatever form you want to give it, except rectangle), so it is not usable for widgets nor panel corners
- my extension also has some issues which may or may not come from the
Shell.BlurEffect
, you can see a list here - however, I don't really know which blur effect should be used (the
Shell.BlurEffect
, or the future GTK4 blur effect (if there is still a plan?)), so idk if these bugs are really relevant for the future infrastructure
- might introduce some overhead if dynamic blur (backdrop blur with opacity < 1) is used extensively
Mockups
Quick settings/panel
New quick settings from os-mockups#100 (closed), with 20px radius blur and 0.5 opacity (probably the best values to ensure comfortable blur, without the need to change the palette (as the 0.5 opacity matches in almost all conditions the desired background darkness), the optimal radius would be 20 ≤ radius ≤ 50
imho, maybe more 30 ≤ radius ≤ 50
for large blurred parts such as overview).
Note the 0.7 opacity for the quick settings buttons, which make them blend without destroying the original colour.
Note also that no other background was used than the blur effect (no need to add a background colour)
Ps: this mockup was done in inkscape, which is why the blur looks weird in the borders of the quick settings popup; it is normally much better than that with the current Shell.BlurEffect
(quick-toogles-blur.svg)
Overview
This is already easily achievable (here with Blur my Shell, which can blur the panel too), and is my actual desktop tbh :p
App grid
Same as overview :)
Overview search
Same too, I show this so you can see that there is no problem for reading text, even with an uneven/noisy wallpaper, as long as the blur is big enough (radius 100 here, but hidpi so probably a 50 radius for a normal screen, and there is no problem reading little text like this when radius ≥ 30)