Polish breadcrumbs icons spacing

[mbelsky]

Hey,

There is a simple fix for #79005

[jrieken]

Did you test that this doesn't have an affect to other places where these icons are being used? symbol-icon is popular, being used for quick outline and the outline tree as well.

[mbelsky]

I've found symbolKindToCssClass imports in these files

✅src/vs/editor/contrib/documentSymbols/outlineTree.ts isn't affected
❓src/vs/editor/standalone/browser/quickOpen/quickOutline.ts I haven't found a way to test it
✅src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts
✅src/vs/workbench/contrib/callHierarchy/browser/callHierarchyTree.ts isn't affected
🚫src/vs/workbench/contrib/quickopen/browser/gotoSymbolHandler.ts is affected. In addition .quick-open-entry-icon already sets margin-right: 4px
🚫src/vs/workbench/contrib/search/browser/openSymbolHandler.ts same as gotoSymbolHandler.ts

Well I'll find a better way to add some spacing

[MJ-Mohith]

It would be great if you upload a screenshot of both previous and after your change.

[mbelsky]

@jrieken thank you for review. I've created a special css rule to fix that issue.

I'm not sure that src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css is a correct file for this change however I choose it because src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts renders this nodes.

[MJ-Mohith]

Did you test your change and see the effect when you build your instance of vscode?

[jrieken]

Changes look better (less risky). Thanks. Maybe move the change above line 20 as the rules in that range talk about monaco-breadcrumb-item.

[jrieken]

wrt the value, I feel like the padding should be 4px. It's a little hard to compare as the tree shows items in a larger font (and uses a different implementation)

[mbelsky]

@MJ-Mohith yes, I did

@jrieken Sure, today I'll move this rule above.

And about the padding: I've seen the tree's padding is 4px, however file monaco-breadcrumb-item has 6px padding.

So I've selected 6px as value because it's a breadcrumb item too.

Well should I change it to 4px?

[jrieken]

And about the padding: I've seen the tree's padding is 4px, however file monaco-breadcrumb-item has 6px padding.

Ah, that's where it comes from. Yeah, makes sense then. Consistency is key

[jrieken]

Thanks