[icon-themes] Support glob keys in file icon associations

[zm-cttae]

Closes #12493.

Background

The feature request is for glob support in the key of icon mappings for file icon themes

This PR allows multiple use cases - see table:

Key to target a file or folder	Example filename
*	Makefile, Dockerfile
Jenkinsfile.*	Jenkinsfile.prod
test_*.py	test_component.py
*_test.go	component_test.go
*Test.cs	CalculatorTest.cs
.env.*	.env.development
web.*.config	web.prod.config
webpack.*.config.js	webpack.dev.config.js
*.webpack.config.js	shared.dev.webpack.config.js
.env.*.*	.env.development.docker.example.env
*.md	pop goes ...................................... the weasel.md

Specification

File icon theme keys are separated by the last dot into basename and ext.

The basename segment allows any number of . characters.

Both segments can be globbed like so:

• Wildcard glob * accepts any value.
• Prefix glob prefix*.
• Suffix glob *suffix.
• Prefix-suffix glob *middle*.
• Middle glob prefix*suffix

Implementation

File/folder icon association keys that can be augmented by globs: folderNames, folderNamesExpanded, fileNames

Any * in the key of the file/folder icon mapping:

• generates a different CSS attribute selector for basename and/or extname attr values in the file icon theme
• removes the +2 score boost contributed by the name class

This PR introduces extraAttributes option to icon label APIs. These attributes are anchors that the CSS from the file icon theme side can target. This is necessary to prevent a FOUC after opening any collapsed folder or any text document, caused by file icon themes running 100s of globs per each file label.

EDIT:

This was updated to remove ** from this spec and sync with vscode.GlobPattern spec.
It previously meant >=2 dot segments - #174286 (comment)

EDIT 2:

Apply changeset from #174286 (comment)

EDIT 3:

Redesign implementation in line with #177650 - moves business logic of globs back to the frontend

[zm-cttae]

@microsoft-github-policy-service agree

[aeschli]

Can you explain what css classes you generate?

[zm-cttae]

Done in PR description

[zm-cttae]

While we are here:

• -name-dir-icon was not the proposed CSS class suffix in [icon-themes] Support for folder / directory names in file associations (Icon themes) #136656 and the current -name-dir-icon looks ugly..
• Can I make a new PR to clean that up (into -dir-${kind}-icon)?

[aeschli]

Sorry, can you give examples how this works (maybe a table covering the various cases, prefix, suffix, **)

• file/folder pattern in the icon theme
• all classes in the css rules that are generated

Give some example of resources in the explorer and how the class names match. The tricky part is that file name matches are always stronger than file extension matches and stronger than fold name matches.

[zm-cttae]

Now ready for review

[zm-cttae]

Made some small tweaks in my work lunch, but please feel free to review now @aeschli

[aeschli]

ok, now I understand. So * is only possible at the beginning or end of dot, underscore or minus separated segments.

The problem is to make sure the matching order holds:

'full file match' beats 'file match with pattern' beats 'file extension match' beats 'file extension with pattern' beats language beats folder name beats folder name with

How this is implemented is the number of classes matching

IMO we're at a dead end with CSS class name matching. I'm reluctant in adding even more class names.

[zm-cttae]

NB: I wanted to add an extra level of depth in generating folderNames, folderNamesExpanded, fileNames but its not needed
I've had a change of tack ("let's use name-${kind}-icon") and we can bypass this issue in a saner manner

[zm-cttae]

That's done. BTW:

* is only possible at the beginning or end of dot, underscore or minus separated segments.

The "underscore or minus separated segments" feature, that is matching targets filenames in this format:

alphanumeric.ext

This is for a specific use case with A11Y benefit as explained here - vscode-icons/vscode-icons#2754

Took 18 lines of code to implement, but I hope this feature is worth it.

[aeschli]

@zm-cttae Sorry I didn't get back earlier, it was quite a busy week.

I like your last change. Thanks a lot!

I wanted to bring up an idea. Could we use the CSS Substring matching selectors) to further reduce the number of classes needed and allow some more ways on how theme authors can use the *?

See #177650 to see a sketch of this.

What do you think?

[zm-cttae]

I'll review by COB tomorrow (Tuesday 21/03). Merged in my reduced spec and will update PR description today

[seanCodes]

Hi @zm-cttae, is this something you're still working on?

[zm-cttae]

This is ready to go but we have a better impl that @aeschli demoed - not clear whether that's been packaged up. We're also both busy, it seems. (Currently there's endgame for VS Code & I'm wrangling with Textmate library migration).

[thelooter]

Whats the status on this?

[Repiteo]

Hoping this gets off the backburner soon. A lack of glob patterns has been the most obvious weakpoint of the icon API for nearly a decade, and it feels like we're so close to finally fixing that.

[muchisx]

🙏🏼 Looking forward for this being implemented soon @zm-cttae @aeschli

[JoaquinFernandez]

Hope to see this merged soon!