Add non-acrylic opacity

[eternalphane]

fix #603

Can't find a simple way to make the tab content area translucent. Ended up using layered window.

Added an option opacity controlling the opacity of the layered window. Preserved the option acrylicOpacity.

TODO:

• remove option acrylicOpacity, as mentioned in Acrylic turns off when Window is Inactive #593 (comment).

[zadjii-msft]

So, presumably, this does transparency the same way conhost did it, right? where the titlebar and text is also transparent?

If this is the case, then maybe this feature should be behind a useVintageOpacity setting or something. I know there are users that'll prefer to have still acrylic-style transparency as an option, while others will want the vintage conhost-style opacity.

What I'm really curious about is how this would interact with multiple panes (#532). How would this affect one window with many different terminal controls simultaneously within it? Presumably, they'd all be the same level of transparent. In that case, maybe useVintageOpacity and opacity should be global settings, and when useVintageOpacity is set, then that overrides the acrylic setting for any profiles where that's true.

[eternalphane]

@zadjii-msft Currently the opacity is changed when the selected tab changed (with a different opacity in its profile). I didn't think of multiple panes in the client area before. The only way I know to achieve partially translucent is to mimic it with multiple frameless child windows, which may break the current design.

Any ideas?

[xNicklaj]

Or you can add a property
"opacityStyle" that accepts either vintage/aero, acrylic or disabled as parameters. In case it's disabled skips the opacity property because you won't need it

[mdtauk]

[✔] Use Acrylic
---[]------ Transparency

Here is an example of how it could look. This is at 40% Transparency, and with the opacity level going down, the glow fades in around the text for legibility.

[eternalphane]

@xNicklaj you can turn acrylic on/off with useAcrylic, and simply set opacity to 1 to disable the translucency

[mdtauk]

@xNicklaj you can turn acrylic on/off with useAcrylic, and simply set opacity to 1 to disable the translucency

I think the point of this suggestion is to allow translucency, without the Acrylic material and blur. If that is the case, having a Transparency Slider, as well as an Acrylic Checkbox or Toggle, would solve both issues.

The problem then becomes how do you implement the Transparency for just the console area, maintaining the Acrylic for the window frame if the user has chosen to allow transparency effects.

The transparent console area without Acrylic needs to "cut out" from the Window it is in. And then you need the glow around the text which enables the text to be readable with low Transparency values. I have mentioned before that the amount of glow should be inverse to the value of the background opacity.

That is why I posted the image to show how it should look. It will take some Win32 GDI DWM wizardry to make it work though.

[eternalphane]

The problem then becomes how do you implement the Transparency for just the console area, maintaining the Acrylic for the window frame if the user has chosen to allow transparency effects.

@mdtauk The only way I know to set translucency of a portion of window is to mimic it with an opauqe custom-shaped main window and translucent frameless child windows, which may break the current design.

[mdtauk]

The problem then becomes how do you implement the Transparency for just the console area, maintaining the Acrylic for the window frame if the user has chosen to allow transparency effects.

@mdtauk The only way I know to set translucency of a portion of window is to mimic it with an opauqe custom-shaped main window and translucent frameless child windows, which may break the current design.

Not an easy situation to fix for sure, considering the core of this app is Win32 GDI based. If there was a way to grab the screen without the Windows Terminal window drawn on it, and then mask it and use it to fill the rect/shape behind the console window - that would be one solution.

Once Win32 apps get access to the Visual Layer composition, it could be do able. The Vista era DWM did tricks like this to enable Aero effects I think.

Acrylic is built on layers, so maybe they could expose the "Desktop Wallpaper" layer before the blurs, luminosity, saturation boost, exclusion, tints, and noise are added?

[miniksa]

OK. I don't really want to take this PR at the moment because I have a grand plan, somewhere around here, to figure out how DirectComposition works and get us access to more textures and materials.

I had a discussion with the composition team about it a few weeks ago. I just haven't had time to dive in yet.

From some past experience I had with assembling the visual tree manually, we'd have to change the win32 window style anyway at that time to drop the redirection bitmap.

Additionally, we're already playing tricky games with XAML Islands in the non-client area in order to get the tab bar up there. We have the XAML team actively engaged on improving the tab control and its experience inside the non-client area. I would presume we could continue pushing there to figure out how to control the materials on the tabs themselves.

Lastly, I don't really want to introduce the complete layered window opacity change when we're already going through a lot of computational effort to do the material blur behind the DirectWrite content area. I'd rather move all in onto the Direct* stack and get the old user32* ways of transparency out of the way.

So given this is in conflict with a lot of our plans, our team would rather not accept this PR at this time.

[mdtauk]

Would you be able to share some of the details of your plan. Either visual mock ups or just some indication on what these textures and materials you wish to use?

[eternalphane]

@miniksa Are you implying that you are planning to implement an acrylic-like effect with more custom options like blur radius, noise, etc.?

[miniksa]

We're planning on providing multiple texture options and configurability of the textures across multiple areas of the application. Custom options like blur radius, noise? Perhaps.

The PM team is trying to figure out what the right thing is to do here @bitcrazed and @cinnamon-msft.

I don't think we have visual mock ups yet. We're getting there.

There's just a lot of moving pieces right now and I want to suppress this one in the short term until we can iron more things out.

[miniksa]

Also, we should have this ongoing discussion in an issue, not on the pull... probably.

[Chiramisu]

Here is an example of how it could look. This is at 40% Transparency, and with the opacity level going down, the glow fades in around the text for legibility.

I definitely approve. This would be outstanding! Is this part of #603 and/or #1753 and currently planned for v2.0?

[DHowett]

That is a mockup made by a community member and the comments in #603 are an unfortunate testament to how difficult non-acrylic opacity is going to be. Sorry.