monaco: fix focused quick-input

[vince-fugnitto]

What it does

The commit fixes the monaco quick-input styling for entries which are focused by end-users.
The change includes additional vscode colors (registered to the ColorRegistry) and applies them to the focused elements.

The changes should:

• properly apply the focused background color similarly to vscode.
• properly style foreground elements for focused entries including label, keybindings, separators.
• properly style fuzzy results (highlights) when entries are focused so they do not clash with the focused background.

monaco-focused-updates.mp4

How to test

1. start the application and use multiple themes (light and dark).
2. confirm that selected entries (through up and down arrow) are properly styled.
3. confirm that labels, keybindings and separators are displayed properly when focused and otherwise.

Review checklist

• As an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• As a reviewer, I agree to behave in accordance with the review guidelines

Signed-off-by: vince-fugnitto vincent.fugnitto@ericsson.com

[msujew]

Thanks @vince-fugnitto that looks great! I noticed an issue with the high-contrast theme:

There's no way to track the focused element anymore as its background color is also black. Compare to vscode which paints an outline around selected elements:

It seems like vscode has special css rules for high contrast themes that handle outlines for different elements.

[vince-fugnitto]

Thanks @vince-fugnitto that looks great! I noticed an issue with the high-contrast theme

I think its part of a much bigger issue across the framework #6743 and also present on master. I believe we should tackle it later when we support high contrast theming properly across the framework. What do you think?

[msujew]

I believe we should tackle it later when we support high contrast theming properly across the framework. What do you think?

Sure, I just didn't notice it on master previously. I have no issues dealing with it in a separate PR.

[msujew]

LGTM 👍

[vince-fugnitto]

@msujew I updated the pull-request to also style the focused icons similarly to vscode:

For example, in the symbols menu:

active-symbol.mp4

[msujew]

Quick input icons are now colored correctly as well 👍