Flexible window layout in Theia IDE

Theia is an open source IDE for cloud and desktop. The project is relatively young, but currently moving forward with an astonishing speed. This post describes one of the numerous recent contributions: a more flexible window layout.

Components of a Theia window

A Theia window has four areas where editors, views etc. (called widgets in the following) can be placed, as shown in the figure below.

The main area is used for editors, while the other areas contain views such as the Files navigator or Terminal instances. The four areas have different properties:

• The main area is always visible. A horizontal tab is shown for each contained widget. The area can be split horizontally or vertically in order to show the content of multiple widgets.
• The bottom panel behaves the same way as the main area, but can be hidden. It is always hidden when empty.
• The left and right panels show the titles of their contained widgets vertically. The panels can be collapsed and expanded by clicking on such a title. Similarly to the bottom panel, the side panels and the related title bars are hidden when empty. These panels cannot be split, so each can show at most one widget.

Theia is not a specific IDE, but rather a framework for building IDEs and similar applications. Therefore the window areas can be used differently depending on the context (this concept is called Perspective in Eclipse). This means that every Theia-based application can have a different set of widgets and a different arrangement of these widgets in the application window.

Drag & drop between panels

A few days ago I contributed a change that allows to drag widgets from any area of the application window to any other area. The following screencast demonstrates this: When a panel is currently hidden, it is shown temporarily during a mouse drag operation as soon as the mouse cursor gets close to the respective border of the window. For example, in the screencast the right panel pops in as the user drags the Problems view to the right.

Try it!

The example application contained in the Theia repository can be built and started with a few steps. Feel free to try the new drag & drop feature, and let us know what you think.