Changing UI of Core Widgets

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]

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

no, we don’t have, we need a PR first which make it rebindable, i.e, this line:

should be:

export const PreferencesWidgetFactory = Symbol('PreferencesWidgetFactory');
bind(PreferencesWidgetFactory).toDynamicValue(({ container }) => ({
    id: PreferencesTreeWidget.ID,
    createWidget: () => createPreferencesTreeWidget(container)

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


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