Bridging the Gap Between the Classic and New UIs

Any significant update to the UI and UX of a professional tool is likely to pose challenges for its users. We recognize that the new UI of JetBrains IDEs represents a major change and understand how unsettling it can be when the software you rely on for productivity is significantly reworked. However, in order for us to evolve and innovate in line with global trends and emerging insights, change is essential.

In this post, we will tell you more about the motivation behind the new UI and how it was developed. We’ll also provide some useful tips for configuring it if you are used to the classic one.

Evolution of the UI and UX

In version 2024.2, the new UI became the default in JetBrains IDEs after being optional for several releases. Still, time flies and this may have happened sooner than expected. The classic UI was moved to an unbundled plugin, and our in-IDE tips and onboarding tour weren’t always enough for those who had to adjust during their busy workdays. However, this significant change was the natural final step in the long process of the UI’s evolution.

The idea for the new UI was born over four years ago, around the 20th anniversary of JetBrains in 2020. Our goal was to create a modern, lightweight interface that follows current industry trends while maintaining the powerful features our tools are known for.

We started working on this new interface in 2022 with a limited preview program joined by over 5000 users. We gathered feedback from Reddit, X, and a dedicated Slack channel, which allowed us to fix key usability issues raised by program participants. By the end of the year, with version 2022.3, the new UI was available in Beta for everyone to try. 

Ten months later, in version 2023.2, we made the new UI the default for new users, and its adoption rate has steadily increased. We conducted several UX studies to understand user perceptions and address any remaining usability issues. Working with all the feedback, we improved the new UI to its final form and released it as the default for everyone in version 2024.2.

While we appreciate the mostly positive feedback we received during the development of the new UI, we know that some users may be disappointed. We understand that adapting to significant changes in your trusted tools can be challenging. However, all the powerful features you rely on are still there, and you can configure the new UI to suit your preferences.

Dogfooding the new UI inside JetBrains

At JetBrains, developers create tools for developers. That’s why we involved our own development teams in the evaluation process of the new UI from the very beginning. We gathered extensive internal feedback and engaged in spirited discussions, allowing us to assess the impact of each change and quickly address any pain points.

Initially, many of our colleagues were skeptical about the new UI. However, the current internal adoption rates for the latest major IntelliJ IDEA version (2024.2) show a significant preference for it, with 98.8% of our team using it compared to just 1.2% using the classic UI.

What’s next for the classic UI?

Starting with version 2024.2, the classic UI is available as a plugin that you can download from JetBrains Marketplace. We are committed to maintaining it until at least July 2025. This means that it will be tested and supported for all IDE versions we release until then.

Maintaining two different UIs places a significant load on our development and testing resources that we cannot continue to bear indefinitely. We plan to evaluate your feedback, fix more issues, and implement support for missing use cases in the new UI, but at some point, the classic UI will be deprecated.

How to configure familiar behavior in the new UI

While we want to move forward with this new UI, we recognize people are still adapting to it. To ease the transition, we’ve made sure it is possible to configure the new UI to behave more like the classic one. Let’s look at some configuration tweaks you may want to make. 

In addition to outlining configuration options that are already available, we’ve also provided links to several tickets where you can vote for options you would like us to implement.

Use Compact mode

Enable Compact mode to reduce the heights of toolbars and tool window headers, scale down spacings and paddings, and make icons and buttons smaller. Just go to the main menu and select View | Appearance | Compact Mode.

Show the main menu in a separate toolbar (Windows and Linux)

To display the horizontally expanded main menu at the top of the window, go to View | Appearance in the main menu and enable the corresponding option. Alternatively, you can right-click on the main toolbar and enable Show Main Menu in Separate Toolbar.

Note: There’s a request to always show the expanded menu in the main toolbar – IJPL-43725.

Native OS window title (Linux)

To restore the native window title, go to Settings | Appearance & Behavior | Appearance, and disable the Merge main menu with window title option.

Add missing action buttons to the main toolbar

To add action buttons to the main toolbar, simply right-click on the toolbar, point to Add to Main Toolbar, and select the actions you want to add. If your desired action is not on the list, you can use the Customize Main Toolbar dialog to add it.

Move the navigation bar to the top of the window

To put the navigation bar containing project breadcrumbs at the top of the window, from the main menu, go to View | Appearance | Navigation Bar, then select Top.

Show tool window names on sidebars

To add labels to the tool window buttons, right-click the tool window bar and select Show Tool Window Names.

Note: There’s a request to restore vertical tool window names – IJPL-158776.

Always show folding arrows and tool window header icons

In the new UI, tool window header icons and code folding arrows in the editor gutter appear on hover and disappear when you move the mouse away.

To make them always visible:

In Settings | Advanced settings | Tool windows, enable Always show tool window header icons.

In Settings | Editor | General | Code Folding, select Always next to the Show code folding arrows.

Select a line in the editor by clicking the line number

In the new UI, clicking on a line number sets a breakpoint instead of selecting the line. To revert to the previous behavior, right-click the gutter and disable Appearance | Breakpoints Over Line Numbers.

Add actions to the Debug window toolbar

Some actions, like Evaluate Expression and Show Execution Point, have been moved into the three-dot menu. To make them visible on the toolbar, right-click the header of the Debug tool window and select Add Actions…, then simply select the action you want to add from the list.

Note: There is a request to restore the Show Execution Point and Evaluate Expression buttons to the toolbar by default – IJPL-83483.

Return tool windows to the sidebar

Some tool windows are no longer shown by default. To bring the missing tool windows back, right-click the More tool windows button in the sidebar and select the tool windows you need. Alternatively, in the main menu, go to View | Tool Windows and select the ones you want there.

Note: There are currently unsupported configurations for tool windows that we are collecting votes for and may consider implementing in the future:

Horizontal tool window bar at the bottom of the window – IJPL-43772.

Tool windows placed horizontally at the top of the window – IJPL-59816.

Is something still missing?

There might be configurations that are not easy to set up or that aren’t supported at all in the new UI. If you’re struggling to configure the IDE to suit your particular scenario, we encourage you to contact JetBrains support or file a new issue in our tracker. 

PhpStorm : The IDE that empowers PHP developers | The JetBrains Blog

Read More

Latest News

PHP-Releases

PHP 8.4.1 released!

PHP 8.1.31 released!

PHP 8.3.14 released!

PHP 8.2.26 released!

Generated by Feedzy