Configurable toolbar position.

[najaarv]

Toolbars associated with a theia widget are always positioned on the right extreme end when the widgets are either on the main or bottom layout areas. My custom-widget expects it's corresponding toolbars(className: .p-TabBar-toolbar) right next to the widget title((className: .p-TabBar-content-container) rather than at the far right end of tabBar container(className: .p-TabBar). Some css changes I made allowed me to move the toolbars closer to the widget, but it applies to all other widgets as well, which need the toolbars positioned at the right extreme end. How can I do this? I tried to modify the TabBarRenderer / TabBarToolbar/ ToolbarAwareTabBar classes but unable to achieve my use case. Guidance appreciated.

[akosyakov]

@najaarv sorry, I don't think anyone tried it before. I think you are looking into at right classes, i.e. customizing TabBarRenderer.renderTab for your tab sounds right, but you should make sure to use default logic for other tabs.

[najaarv]

I managed to achieve this by customizing the TabBarToolbar class. Thanks.

[akosyakov]

Cool! Maybe you can share a code snippet for future reference.

[najaarv]

This might not be the most efficient way, but it works for my use case, so here goes:
The css:

.theia-app-main .p-TabBar-content-container,
.theia-app-bottom .p-TabBar-content-container {
    flex: none !important;
}

The above css brings the toolbar closer to the widget title container.
Now, jot down a new css class rule:

.p-TabBar-toolbar-theiaOriginal {
    position: absolute !important;
    right: 0px !important;
}

Then define a new class that extends TabBarToolBar and here, the TabBarToolBar.renderItem method needs to customized. Define conditions that does the folowing: For widgets that need toolbars at their right extreme, do a this.addClass('p-TabBar-toolbar-theiaOriginal'). For those which do not, do a this.removeClass('p-TabBar-toolbar-theiaOriginal') And of course the TabBarToolBar class and TabBarToolbarFactory need to be rebinded.