Terminal: Add a UI to indicate a pane is focused.

[zadjii-msft]

Misc. ramblings from my notes:

• IDEA: have the pane call some method on it's child controls to have it indroduce some margin, as opposed to creating some manual seperator. When the control is focused, colorize the margin. When it's unfocused, remove that color. Each pane optionally tells a control should it have margin on top/bottom/left/right, and does it recursively? so

[A|B]
A should have a right margin, b should have a left.

[A|[B-C]]
A has right
B has left, bottom
C has left, top

[A|[[B-D]-C]]
A has right
B has left, bottom(with D), bottom(with C)
C has left, top(with B-D)
D has left, top(with B), bottom(with C)

Margin doesn't stack, just is there or isn't
Margin color should be either null, accent, or a color (Global, Control)
Margin should have configurable width (Global, Control)

How does this interact with #992? Can we detect a click is in the margin, and surface that up? or can the terminal app listen to the control's click/drag, and handle it somehow?

[mdtauk]

This could use the FocusVisual or add a shadow to elevate the pane?

https://docs.microsoft.com/en-us/windows/uwp/design/style/reveal-focus

[zadjii-msft]

So, I considered FocusVisual, but all that documentation seems to suggest that it should be used for apps for 10-foot experiences, such as Xbox. Considering we're not planning on shipping on xbox any time soon, I assumed this wasn't the right effect to use.

I was definitely considering some sort of drop-shadow effect on panes in general. This might be a good conversation for @cinnamon-msft to have with our UI person

[mdtauk]

So, I considered FocusVisual, but all that documentation seems to suggest that it should be used for apps for 10-foot experiences, such as Xbox. Considering we're not planning on shipping on xbox any time soon, I assumed this wasn't the right effect to use.

I was definitely considering some sort of drop-shadow effect on panes in general. This might be a good conversation for @cinnamon-msft to have with our UI person

If not the full RevealGlow version, there is
FocusVisualKind.HighVisibility

[dlong11]

I was also thinking that FocusVisualKind.HighVisibility could be used here. You can set FocusVisualSecondaryThickness, FocusVisualSecondaryBrush, FocusVisualPrimaryThickness, FocusVisualPrimaryBrush.
The margin approach seems like the same thing as this.

[seritools]

Maybe something like ConEmu's "fade when inactive" feature would be an elegant solution? This should work for both panes and the terminal itself not being focused, i.e. only the tab/pane that has keyboard focus would be not faded, even across multiple windows.

The box-border thingie replacing the cursor if not focussed is a nice indicator as well.

Example of both (left is focussed):

[guibirow]

Faded option seems a good approach only when one of the panes is active
When all panes are inactive wont take much effect.

[cdmihai]

Hyper changes the text color. The focused pane uses a saturated, bright version of the font color, the out of focus panes use a desaturated, dark version of the font. I found that this makes it quite visually intuitive to instantly notice which pane is active. Yet the other panes are still quite readable.

[mdtauk]

Fading or De-saturating the pane is a neat idea, but there are other considerations to take account of. Microsoft's Contrast Ratios for Accessibility. High Contrast theming. Hololens uses

[cdmihai]

Sounds like the holy grail would be to have a configuration object for pane switching features (text fonts, background colors, borders, cursor, etc) with some sensible accessible defaults.

[zadjii-msft]

So I'll say, I really love the whole "Configuration object for unfocused vs focused state" idea. However, that's a bit bigger of an ask, so I'm going to give that its own issue: #3062

What I have done is played a bit with just adding a simple border to the focused pane, and I'm really quite happy with it:

Right now it'll just pull the SystemAccentColor to use as the focus highlight color. I'm going to track adding a customizable color in #3061.

[mdtauk]

You could mimic the System Focus Rectangle, with the white and black inner and outer borders. Based on Light or Dark theme - just in case the Accent colour clashes with the coloured Terminal panes.

[msftbot[bot]]

:tada:This issue was addressed in #3060, which has now been successfully released as Windows Terminal Preview v0.7.3291.0.:tada:

Handy links:

• Release Notes
• Store Download