Terminal: UI Suggestion: Visually link tab to console view

[mdtauk]

When work begins on polishing the user interface, it could be nice to make the tab and the console view feel connected, in a similar way to the teaser/trailer video shown at build tries to portray.

The window frame respects the app mode so Light or Dark. But each profile's tab, will match the customised settings.

[Ghosty141]

So I'm currently hacking around with this but I found one issue that most likely makes this kinda hard to implement: The tab bar is not using the acrylic effect (yet). This makes the opacity of the tab (thus the color) not match the rest of the window. But there is hope! They seem to have this on the radar, I found this comment:

https://github.com/microsoft/Terminal/blob/6088134832b851c553af791ee17a9b5c0d808385/src/cascadia/TerminalApp/App.cpp#L643-L644

Here is how I did it (acrylic needs to be off else it looks bad): https://github.com/Ghosty141/Terminal/commit/2cc95d5b360653f0766534a6205d0b6b99e85796

[mdtauk]

I believe it's using a XAML Island, but there are other surfaces that can use Acrylic, and I'm sure as WinRT's presentation platform becomes open source in WinUI 3.0 - this will become more possible.

But thinking about where the app is heading now, will hopefully drive things forward.

[Ghosty141]

@mdtauk What I'm saying is that changing the tab color "can" only be done once the tab bar is using the acrylic effect. One big problem is that the tabbar currently gets style according to the theme the user uses. The use of acrylic is done per profile while the tabbar exists only once. So unless the UI gets changed quite a bit, this will probably take a while.

[mdtauk]

Yea I get that, but the window itself is a Win32 window, so XAML acrylic brushes are a bit difficult.

The app would have to extend into the titlebar area and the window colour would need to be the Host Acrylic matching the RequestedTheme.

But yes, matching tab colour to the console is a start, and removing the tab background colour, and ensuring the inactive tabs show up well using ThemeResources

[DHowett-MSFT]

Funny enough, the code @ghosty141 changed ("how to set a brush maybe?") is code I wrote when testing this exact feature.

If you get the _actual brush_ from the background of the terminal control, you can copy the acrylic effect directly into the tab. Use the same acrylic setup as is in TerminalControl -- create a HostBackdropAcrylicBrush, give it a tint and opacity, and set that as the background brush.

Ideally, we'd be using a .xaml file and xaml "theme resources" instead of pushing brushes directly into controls at runtime. :smile:

[mdtauk]

ThemeResources would automatically refresh upon the user setting the theme. Until Win32 gets official support, you'll have to redraw and detect the change

[zadjii-msft]

I think this would be a really cool setting.

If someone wanted to to go ahead an implement this, they'd probably need to:

• add a GetBackgroundBrush method to TermControl, in the .idl, .h and .cpp files.
• Then when the control is focused (when the tab changes), you'd need to change the background of the tab to control's brush. When it's unfocused, you'd need to remove this brush (somehow).
• Then, I'd add a setting to enable this feature, since not everyone's going to want their terminal to look this way. I'd make it a global setting, so see GlobalAppSettings. I'm okay defaulting this behavior to on, but if people have problems with that, we can discuss it on the PR :)

[Ghosty141]

@zadjii-msft Thanks for the help! I'm currently working on it and trying to get the changing of the background to work.

[miniksa]

This is another department where @cinnamon-msft might want to weigh in on what this should look like relative to the design mockups we've already prepared.

[jamers99]

Daaaanng i like that mockup. When is this coming to the version in the Store??