Changing UI of Core Widgets

#1

I want to customize the UI of the “Preferences” widget to make it easier to navigate, but I have a hard time figuring it out from the existing code. Is it possible to do this? Do I change the require("@theia/preferences/lib/browser/preference-frontend-module") in src-gen/frontend/index.js to point to a custom widget instead?

[original thread by NicholasStenbeck]

#2

You need a custom extension which rebind the preference widget factory. Let me check whether we have an explicit binding for it already.

#3

no, we don’t have, we need a PR first which make it rebindable, i.e, this line: https://github.com/JPinkney/theia/blob/64142e17580d07d6b205cd33f8858393d8a460a6/packages/preferences/src/browser/preference-frontend-module.ts#L39-L42

#4

should be:

#5 
export const PreferencesWidgetFactory = Symbol('PreferencesWidgetFactory');
...
bind(PreferencesWidgetFactory).toDynamicValue(({ container }) => ({
    id: PreferencesTreeWidget.ID,
    createWidget: () => createPreferencesTreeWidget(container)
})).inSingletonScope();
bind(WidgetFactory).toService(PreferencesWidgetFactory);
#6

as soon as we have it you can do rebind(PreferencesWidgetFactory).to… and replace with your implementation

#7

[NicholasStenbeck]

Thank you Anton; you’ve been very helpful!
I will add the snippet you suggested and create a PR.