Hello! I’ve been trying to implement custom File editor tabs in Theia which would look something like this:
For context: The letters
B and
N here are some distinguishable elements describing different users using the IDE. The only requirement of these indicators is to be distinguishable is via colour.
I have tried using TabBarDecorator, but it provides me with limited number of indicators on file icon or badge numbers after the label.
Any suggestions to how would I be able to control the rendering of File editor tabs in general?
Thanks.
There are different ways to handle this, but you might want to customize the TabBarRenderer in your extension and override the createTabClass method (or somewhere there) that comes from PhosphorJS. This is a quite low-level approach, and you might have to “override” private methods too, but you will have full control. I hope this helps.
Thank you @kittaakos for the suggestion.
As you had suggested, I ended up customizing TabBarRenderer by updating the renderTab method. Using @phosphor/virtualdom I could update the elements being rendered.
