GNOME Bugzilla – Bug 700081
vignette has a harsh border
Last modified: 2021-07-05 14:27:21 UTC
Overview backdrop has a nice vignette, but the 4 corners feel like the opacity fade is clipped there and appear flat. Due to the color being flat on the corners, visually it actually feels like it's getting lighter towards the corners again. Would be great if the alpha fade happened all the way to the corners, not just the edges.
Created attachment 243789 [details] flat corners
Created attachment 243790 [details] suggested serving :)
*** Bug 695724 has been marked as a duplicate of this bug. ***
*** Bug 704635 has been marked as a duplicate of this bug. ***
I tried to tweak the parameters to match designs. But it can't be possible with the current code. (there was also a "bug") So following I did a set of patches for mutter and gnome-shell adding inner and outer radius to the vignette effect and tweak it to match designs. 1- The first patch in mutter fix a bug that previously we were aplying brigthness twice, causing meta-background vignette effect (the one in overview) and ligthbox vignette effect (the one in modals) don't match. I guess this was to try to diferenciate between the overall brigthness and the background brightness, but since we only use meta-background in the overview, and we want to match the ligthbox effect, just don't take into account the overall brigthness and take into acount only for the vignette effect like we do in ligthbox. 2- I didn't do inner and outer radius parameters to set, bus instead private variables. Not sure if we want to tweak it from outside. Feedback on this? 3- On the other hand, the vignette_sharpness is now gone in both ligthbox and meta-background, since brigthness is enough to do an animation and inner/outer radius control allows us to tweak it even more if needed. Some of those patches mean to be squashed, but to make easy the review I splitted them.
Created attachment 273416 [details] [review] meta-background: Don't use brigthness twice Until now the brigthness was being applied both to the background and to the vignette effect. That was causing the effect to not be the same as ligthbox in gnome-shell. Since we are only using meta-background in the overview of gnome-shell, we can delete the brigthness that was being applied to the background and use only the brigthness applied to the vignette effect, so we can match gnome-shell ligthbox vignette effect.
Created attachment 273417 [details] [review] meta-background: Add inner and outer radius to vignette Until now we were using a vignette effect with lack of some parameters that vignette effect should provide. That causes that we can't tweak it as designers want. Add inner radius and outter radius to the vignette effect and tweak it to match designs.
Created attachment 273418 [details] [review] meta-background: Delete vignetteSharpness parameter Since in the last patch we don't use it anymore, just delete it. The only client of vignette_sharpness is gnome-shell in Background.js. So a patch for gnome-shell alongside this patch is made.
Created attachment 273419 [details] [review] overview: Delete vignetteSharpness parameter Since meta-background no longer use it, delete it from the background params.
Created attachment 273420 [details] [review] ligthBox: Add inner and outer radius to vignette Until now we were using a vignette effect with lack of some parameters that vignette effect should provide. That causes that we can't tweak it as designers want. Add inner radius and outter radius to the vignette effect and tweak it to match designs.
Created attachment 273421 [details] [review] ligthbox: Delete vignetteSharpness parameter Since in the last patch we don't use it anymore, just delete it. It is safe to delete it since nobody is using it currently.
Master: - Modal (ligthbox): http://i.imgur.com/6GBRjix.jpg - Overview (meta-background): http://i.imgur.com/JvpsCJ8.jpg Patches: - Modal (ligthbox): http://i.imgur.com/M9zN6bs.jpg - Overview (meta-background): http://i.imgur.com/DynIJu9.jpg
Jakub, I'm not that good matching design by eye, so probably you want to tweak it. The thing is that, with those patches you can give me inner radius, outer radius(I guess the entire size) and opacity of the design picture and I can match the design mathematically.
Closer to the mockup: http://i.imgur.com/YHvK68X.jpg
Great work! The gradient progression is a lot better, there doesn't seem to be any flatness to the corners anymore. I'll see if I can tweak the brightness when I get back to my jhbuild environment as it feels a little lighter.
I think this is obsolete now and things should be square with all the recent background changes? reopen if i'm wrong.
(In reply to comment #16) > I think this is obsolete now and things should be square with all the recent > background changes? reopen if i'm wrong. It's not =S visually is still unchanged, and the code creates a vignette with the same values...
GNOME is going to shut down bugzilla.gnome.org in favor of gitlab.gnome.org. As part of that, we are mass-closing older open tickets in bugzilla.gnome.org which have not seen updates for a longer time (resources are unfortunately quite limited so not every ticket can get handled). If you can still reproduce the situation described in this ticket in a recent and supported software version, then please follow https://wiki.gnome.org/GettingInTouch/BugReportingGuidelines and create a new ticket at https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/ Thank you for your understanding and your help.