Align quickpick labels

[gbodeen]

What it does

This is an alternative to #12239.

I noticed a few flaws in the quickpick styling when searching for a file,

• Some results have a generic icon image. For those results, the filename is horizontally offset and the path is vertically offset.
• Some results have a long path name, which can entirely hide the file name. This MR proposes following the style of VSCode, which shows the complete filename, then at a reduced opacity as much of the path as will fit.

With the change:

Compare to VSCode:

A more perfect change would refactor the CSS (e.g. using BEM) to avoid the high levels of selector specificity in monaco-editor-core that lead to this. However, that would also have complex effects. This PR should have more narrowly determined consequences.

How to test

1. Open the quickpick to search for a file (Ctrl + P). Search using various strings and observe the problems described above.
2. On this branch, search and observe better formatting.

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

[gbodeen]

I'm going to address this problem in a different manner that also handles a few related problems.

[gbodeen]

I see a problem with the underscores. I'll aim to fix that soon. fixed

[gbodeen]

OK, now this also fixes the debug quickpick similarly as in #12239 👍

[colin-grant-work]

All the listed scenarios, including those from #12239, look good to me.

[vince-fugnitto]

@gbodeen I've noticed issues with other file-icon themes such as seti:

Pending fix of icon alignment issue

[gbodeen]

seti icon theme:

theia icon theme:

debug menu still good:

...so empirically this draft is looking better. I think it's also theoretically better, as the current approach is:

• make the codicon default-file-icon pseudoelements have essentially all the same properties as the theia-file-icons-js file-icon pseudoelements
• don't allow the wrong font & font-size to leak out of the codicon default-file-icon elements
• still unset the flex property that was inherited from elsewhere and creating the debug problem

[FernandoAscencio]

Found an issue with the check marks next to toggle commands.
Theia browser Microsoft Edge: 110.0.1587.57

[vince-fugnitto]

@gbodeen do you mind explaining the change from f41e71b? If we are to make the decision to remove the checkmark from isToggled commands it should probably be documented as a breaking change, and it should not be removed as part of the css but rather where we add the checkmark in the first place:

theia/packages/core/src/browser/quick-input/quick-command-service.ts

Lines 140 to 146 in a5e1162

	private getItemIconClasses(command: Command): string[] | undefined {
	const toggledHandler = this.commandRegistry.getToggledHandler(command.id);
	if (toggledHandler) {
	return codiconArray('check');
	}
	return undefined;
	}

[gbodeen]

@vince-fugnitto

do you mind explaining the change from f41e71b?

Perhaps I misunderstood. I thought the checkboxes were never supposed to be visible. My second draft, as discovered by Fernando above, had an unexpected side effect of making them visible under certain circumstances where they had not previously been visible.

What is the intended behavior? (I'll be able to touch this again later this week.)

[FernandoAscencio]

I thought the checkboxes were never supposed to be visible.

Those are not checkboxes but check codicons that should appear when a toggle command is "on".
The issue is that they are not aligned with the rest of the text.

[gbodeen]

Interesting. I'd never seen them before and presumed they were only used in the code, not something that should be visible to users.

In any case, it now follows the same approach as above, applying all the same properties as used for icons in other areas of the code, and the result is well aligned:

[msujew]

The changes look good to me. Different icon themes and the checkmarks seem to layout correctly.

@vince-fugnitto Care to take another look as well?

[vince-fugnitto]

@msujew I still noticed an issue and possibly others where the icons are not properly aligned.
For example:

term.mp4

There are still other misaligned icons

[vince-fugnitto]

Closing in favor of the updates from #12239.