Make the keyboard focus outline configurable

[Tyriar]

#3246

I have a lot of difficulty on Dark+ theme finding some of the keyboard focuses. Can a fatter border be used to represent focus so it's more clear?

[Tyriar]

Another way to highlight the focus would be to change the color of the active panel.

[bpasero]

@stevencl @bgashler1 fyi

[bpasero]

@Tyriar can you give a concrete example where you find the focus indication is too subtle?

[Tyriar]

I lost track multiple times when the focus went to the buttons at the top-right of the editors.

[bpasero]

Right, I also see this sometimes but I hate to make the focus indication stronger by default. I wonder if we should have a theme that makes the outline stronger for those that want it or provide a setting.

[Tyriar]

It could potentially be a configurable option, or highlight the background instead of the border like is done with list items?

[bpasero]

Up for UX discussion.

[bgashler1]

@Tyriar that's funny we both noticed the same problem (I didn't realize you had created an issue for it).

@bpasero I think we need to increase the default contrast to make this more clear. I've received feedback from a user that certain monitors with low contrast cannot display colors like this very well. While we don't need to make this AAA-level accessibility necessarily (that's what high-contrast mode is for), it's important that we address this from a usability perspective.

[bpasero]

Maybe its just a matter of picking a different CSS for active actions? Actions are small and thus the blue border around them is subtle, but if e.g. we decide to change the background color of them maybe that would make things better overall?

[stevencl]

Maybe we could start by increasing the default contrast and possibly increasing the border thickness? I would be concerned about possible misinterpretations of what a change in background colour means. If we can resolve this by being consistent with how we show focus on other elements that would be good.

[bpasero]

@stevencl @Tyriar here are some outcomes, first with 2px border, second with 3px border. would like to hear if you think the border has any impact or rather we should pick a different color?

2px:

3px:

[stevencl]

Thanks Ben. The 2px border looks fine to me. But I would need to see it in action as the challenge is finding it when looking at the whole screen, working on some task.

[bpasero]

@stevencl you can change this in https://github.com/Microsoft/vscode/blob/master/src/vs/workbench/electron-browser/media/shell.css#L59 for the light theme and https://github.com/Microsoft/vscode/blob/master/src/vs/workbench/electron-browser/media/shell.css#L71 for the dark theme. Just replace the 1px in outline and outline-offset with other values.

[bpasero]

Moving off of GA, I think we can always revisit after.

[bpasero]

Possible now via setting:

"workbench.colorCustomizations": {
	"focusBorder": "#f3f3f3"
}