Theia: Add a global toolbar below the main menu

[HenningCash]

Maybe there is already an open issue for this but I could not find one, so: Every popular IDE has this toolbar below the main menu that allows you to perform various actions by clicking on icons, e.g. undo/redo, copy/clip/paste, run/debug, git actions, etc.
We live in the 21. century and developers perform their most used actions by keyboard shortcuts but somehow I miss the ability to perform some actions (like starting a debug session) without opening the corresponding panel first. The reactions to microsoft/vscode#41309 shows that this is a feature many people are requesting/expecting from an IDE.

Seems like the toolbar topic is dividing the developer community, but are there any plans to add a global toolbar to Theia IDE?

[marechal-p]

Seems like the toolbar topic is dividing the developer community [...]

Indeed, as I don't really like it :p

But Theia itself isn't so much an IDE as it is a framework for people to make IDE-like applications.
Anything can be added through Theia extensions, that's actually the way we add anything to Theia.
So all that would take is an extension setting up such a toolbar.

Although I don't know where to look for adding such a thing, I just know that it is possible.
https://www.theia-ide.org/doc/authoring_extensions

[HenningCash]

But Theia itself isn't so much an IDE as it is a framework for people to make IDE-like applications.

Yes, I understand Theia's position in the IDE-world. My question should have been "are there plans to add a toolbar as core feature?". A "no" would totally be acceptable as it is possible to define such an area in custom builds.

Although I don't know where to look for adding such a thing, I just know that it is possible.

I'm not sure if it is really possible currently to define custom areas via extensions. You would have to override/replace the ApplicationShell class and its createLayout method. This could interfere with other extensions doing the same. But I haven't looked into this enough, yet.

[marechal-p]

A "no" would totally be acceptable as it is possible to define such an area in custom builds.

I did not give you a "no" because it isn't up to me to decide this, but I'm not against someone implementing it, maybe having it in the main repo. Doesn't bother me.
But I won't speak for the others collaborators, that's just my point of view :)

I'm not sure if it is really possible currently to define custom areas via extensions. You would have to override/replace the ApplicationShell class and its createLayout method. This could interfere with other extensions doing the same. But I haven't looked into this enough, yet.

After taking a quick look it seems you are right. Although regarding other extensions also overriding the same component: in this case it sounds rather application specific, so I wouldn't expect a generic extension to have that kind of behavior.

Even if we were to support contributions to the main application shell, I'm not sure how we would handle it. But an "upgrade extension" can be made: it will override the original implementation with the new one supporting bars. Maybe you can get away by simply overriding the createTopPanel method for that. And then you could from your own extension expose new contributions points (say adding bars), effectively extending Theia's UI for later extensions that will depend on it.

[HenningCash]

Although regarding other extensions also overriding the same component: in this case it sounds rather application specific

If replacing the ApplicationShell is the extension-point for introducing custom areas this is very likely to happen. Just assume I am adding my precious toolbar and another extension adds a second sidebar or other areas. This will result in a conflict. So it would be nice if there is an API to extend or modify the shell layout and areas. This would allow to add an optional toolbar with its own API for adding items.

[akosyakov]

Every popular IDE has this toolbar below the main menu that allows you to perform various actions by clicking on icons, e.g. undo/redo, copy/clip/paste, run/debug, git actions, etc.

Well in web world VS Code and Chrome Dev Tools are quite popular and don't make use of global toolbar. Instead they provide the command palette as a starting point for all actions and widget-dependent toolbars. Agreed it's required to learn a new habit to hit F1 for all your actions instead of searching icons with mouse, but as a developer i like it more since:

• i don't need to touch my mouse at all
• i have more screen space for editors and terminals instead of crowded toolbars

Do you already use the command palette?

We live in the 21. century and developers perform their most used actions by keyboard shortcuts but somehow I miss the ability to perform some actions (like starting a debug session) without opening the corresponding panel first.

With debugging we could add a new command which allows to quick pick the debug config to run in order to make better use of the command palette. Also if you set the config once it will be used next time, so you can hit F5 to restart.

The reactions to Microsoft/vscode#41309 shows that this is a feature many people are requesting/expecting from an IDE. Seems like the toolbar topic is dividing the developer community, but are there any plans to add a global toolbar to Theia IDE?

I think it would be hard to pull as an external extension without compromising:

• to make it useful other extensions in core should make use of it
• or such extension need to depend on all core extensions and contribute it for them. It breaks modularity of extensions.

We could make it configurable via preferences, but it will add more unused code by default. Maybe we better to improve experience with the command palette and shortcuts for concrete cases.

[HenningCash]

I should add that the toolbar requirement is not for my own needs. We are developing a browser-based application for programming exercises. Our users are students that have little to none programming experience. We use Theia to given them a powerful pre-configured IDE but what currently is missing is an obvious way to run code. We are looking for a "large green play button", like the DebugSession dropdown from the Debug widget. In IntelliJ, Eclipse, etc. this widget is placed in a toolbar below the main menu. So for students it's pretty obvious how to execute the code or run tests, etc.

or such extension need to depend on all core extensions and contribute it for them. It breaks modularity of extensions.

I thought about creating a toolbar extension and some "bridge extensions" that add core features, like the Debug widget, to it. Of course this would require a few more extensions but it's flexible, keeps the modularity and there is no need to add it as core feature to Theia.

[akosyakov]

@HenningCash Should they be able to debug a single file without even debug configuration (i.e. it should be auto generated)? Which language?

[akosyakov]

You could build a VS Code extension which adds a button to an editor toolbar, derives launch configuration from the opened file and run it. Maybe there is already one.

[akosyakov]

Maybe https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner. It seems to contribute a button to editor title (i.e. toolbar). In order to try you can follow: https://github.com/theia-ide/theia/wiki/Testing-VS-Code-extensions

Updated: it cannot show an icon because of this bug: https://github.com/theia-ide/theia/issues/5041

[HenningCash]

Should they be able to debug a single file without even debug configuration (i.e. it should be auto generated)? Which language?

They start based on a pre-configured boilerplate that already contains a launch.json. Currently we are starting with Java but other languages should be added later. For Java the debug-java core extension is working fine as it exposes the obvious Run/Debug buttons inline above the main method and (more importantly) allows debugging Java code.

Maybe there is already one.

Yes there is Code Runner. It allows simple Compile&Run instructions for many languages but does not support debugging. If there is full support for VSCode extensions in Theia we would like to utilize the CPP, Python, PHP, Lua, etc. debugger extensions as well, so the Code Runner extension is good but sadly not suited for our case.

So we would like to make the existing debug sessions more obvious and easier to access. We will start with a simple play button next to the main menu that runs the first debug configuration but for the future a dedicated toolbar would be a nice addition imho.

[marechal-p]

So it would be nice if there is an API to extend or modify the shell layout and areas. This would allow to add an optional toolbar with its own API for adding items.

That's the part where I cannot wrap my head around a generic way of handling arbitrary modular layouts. Maybe some kind of configuration to specify which extension's contribution goes where, to be written per application, since an application maker should be in control of that ends up contributed into his product (to some extent)? Inversify alone doesn't seem to be enough for customization?

Not really clear in my head right now...

We are looking for a "large green play button", like the DebugSession dropdown from the Debug widget. In IntelliJ, Eclipse, etc. this widget is placed in a toolbar below the main menu. So for students it's pretty obvious how to execute the code or run tests, etc.

So we would like to make the existing debug sessions more obvious and easier to access.

You can have your application have a pre-configured layout configuration, like opened panels and editors. If you were to have your own panel with the big buttons, it might make it just as good as a toolbar. Except now you can collapse it to gain space, and you can display more information as well, maybe more text/comments/titles to help users navigate the UI (I always hated the buttons where you had to guess the action from the icon, or hover to see some short title that did not really explain much more).

Of course that's just a way of avoiding adding toolbars, but it should stay obvious enough for the students.

[MikeRosoft]

We live in the 21. century and developers perform their most used actions by keyboard shortcuts

I, for one, disagree with the claim that having to remember dozens of keyboard shortcuts - or, worse, console commands - is the 21th century way. It's the eighties way. It's the design philosophy of vi and emacs, of providing dozens of advanced commands but not a convenient way for the user to access them.

[akosyakov]

With https://github.com/theia-ide/theia/pull/5057 merged, vscode code-runner extension should work nicely.

[akosyakov]

@MikeRosoft What advanced commands? Theia is designed in a way that all user functions are commands accessible from the command palette with same names like in menus, just you don't need to click around.

[MikeRosoft]

@akosyakov If you call the command palette a "convenient" way to access commands, then I must be using a very different definition of "convenient" from yours (and probably so do many other users, given the popular demands to create a user-customizable toolbar). I have tried to use the palette, but it was a complete nightmare. It was just a list of all commands dumped into a single combobox. (To make it not completely useless, 1) the command view should be hierarchical; 2) each command should have an associated icon, and 3) it should be possible to drag the icon into a customizable toolbar.)

[marechal-p]

I have tried to use the palette, but it was a complete nightmare.

You should just type what you are looking for in the search bar of the palette, and you will be able to find anything in no time, without leaving your hands from the keyboard (f1 to open). I find this really useful when I'm actually developing. You can also access any file from the same palette (ctrl+p). Then anything that I might use often, I simply configure/reconfigure a convenient binding for me. It makes things really enjoyable.

Now this all seems really subjective.

But as said, you can make an extension adding toolbars. Just like we designed Theia, you can make a master extension overriding the Theia shell to display the new widgets, and allow subsequent extension to rely on this customization to contribute toolbars.

Best course of action right now would be an extension in my opinion.

[MikeRosoft]

But then we're back to square one: Theia (or Visual Studio Code) doesn't have first class support for adding custom panels. In theory, an extension could override the main display; but that would conflict with other extensions doing the same (as per @HenningCash).