Remove some widgets from the IDE like explorer, search etc

Hello everyone, I am buidling something over Theia. I need to remove some widgets from the IDE like file explorer, search etc. Can someone please guide me how can I remove these?

[original thread by Hemkaran Raghav]

[Dominique Rochefort]

Hi @hemkaran, I am looking for the exact same thing. I have noticed that some buttons in the activity bar are part of @theia/core. My idea was to build an extension to override contribution points that are responsible for creating these buttons. I have looked in the Theia codebase, but I’m not clear which contribution point I should be looking for. Any guidance would be appreciated.

[Dominique Rochefort]

[Hemkaran Raghav]

After checking codebase of Theia, I found the WidgetManager in @theia/core package. I am using this to remove the widget. For example, to explorer/navigator widget. I am using this code.

import { WidgetManager } from '@theia/core/lib/browser';
import { FILE_NAVIGATOR_ID } from '@theia/navigator/lib/browser';
import { CommandRegistry } from '@theia/core/lib/common';

const fileNavigatorWidget = await this.widgetManager.getWidget(FILE_NAVIGATOR_ID);
if(fileNavigatorWidget && fileNavigatorWidget.isVisible) {
    await this.commandRegistry.executeCommand('fileNavigator:toggle');
}

Let me know if you have any questions on it.

@dominique-rochefort you think i want to completely remove them, then just don’t install extensions contributing them, i.e. remove @theia/navigator from your app package.json.

If you cannot do it then implement FrontendApplicationContribution.initializeLayout lifecycle callback with a code suggested by @hemkaran or you can explicit inject FileNavigatorContribution then call tryGetWidget and if it returns a widget then dispose it.

FrontendApplicationContribution provides you with application lifecycle hooks.

initializeLayout should be used to customize the default layout. It is not called on second opening of a window for the same workspace.

[Dominique Rochefort]

Thanks @anton-kosyakov , @hemkaran . Actually, I have already removed the @theia/navigator module, but the icons still show up. Seems they are part of @theia/core. I will try the suggested approach with a custom extension.

@dominique-rochefort please try a command Reset Workbench Layout, maybe some layout caching

[Hemkaran Raghav]

Thanks for suggesting, but just removing this package won’t work as this package is also a dependency of lot of other packages. git, scm, search-in-workspace to name a few.

Then you can rebind the contribution to a constant object which does not contribute any menus, keybindings and commands.

[Dominique Rochefort]

Here is an example of how I did it: https://gist.github.com/drochgenius/6374bbc13eb10168e05e3bf00be2d07e

[Hemkaran Raghav]

Thanks @dominique-rochefort , It helps

Need to hide/remove all widgets and only my custom widget should be visible.
Code from below link doesn’t work well.

What do you mean by doesn’t work well?

1 Like

@ballcoach12 welcome to the community, do you mind elaborating what you’re trying to achieve exactly?

1 Like

Our goal is to be able to build custom editors; we are starting with very simple use cases. One case would be where the editor does not have Terminal support.

My original thought was that we’d generate package.json files that do not have @theia/terminal included in the dependencies; by doing this we’d simply not include whatever contributions the terminal extension provides. But doing this still left us with the Terminal/New menu, and the command to open a new terminal.

My second thought (and the one that I like a little better) is that we’d create a custom extension that turns off features. So in the case where we don’t want the terminal, we’d just create a no-op contribution that turns off what we don’t want; namely, the Terminal/New menu. Here is what I tried in this regard:

@injectable()
export class TerminalFrontendNoOpContribution extends TerminalFrontendContribution {

public registerCommands(registry: CommandRegistry): void {}

public registerMenus(registry: MenuModelRegistry): void {}
}

In the module, I have this:

export default new ContainerModule((bind, unbind, isBound, rebind) => {
 bind(TerminalFrontendNoOpContribution).toSelf().inSingletonScope();
rebind(TerminalFrontendContribution).toService(TerminalFrontendNoOpContribution);
});

Neither approach seems to work for me so far, though.

My prior question to @akosyakov was how to issue the Reset Workbench Layout command. My assumption was that this is done in the Terminal window itself.

Got it to work. :smile: It was a simple mistake. I had not re-enabled the @theia/terminals extension in the package.json file. Using the contribution with the no-op approach does the trick!

1 Like

@ballcoach12 Glad to hear you found a solution!
I’m not sure how you got it to work, but I did it the following way:

import { ContainerModule } from '@theia/core/shared/inversify';
import { TerminalContribution } from '@theia/terminal/lib/browser/terminal-contribution';
import { TerminalFrontendContribution } from '@theia/terminal/lib/browser/terminal-frontend-contribution';
import { TerminalQuickOpenContribution } from '@theia/terminal/lib/browser/terminal-quick-open-service';

export default new ContainerModule((bind, unbind, isBound, rebind) => {
   rebind(TerminalFrontendContribution).toConstantValue({
       registerCommands: () => { },
       registerMenus: () => { },
       registerKeybindings: () => { },
       registerToolbarItems: () => { },
       registerColors: () => { }
   } as any);

   rebind(TerminalQuickOpenContribution).toConstantValue({
       registerCommands: () => { },
       registerQuickAccessProvider: () => { }
   } as any);

   rebind(TerminalContribution).toConstantValue({})

});
1 Like