WebStorm 2022.3 Help

New UI

The new user interface (UI) reduces visual complexity, provides easy access to essential features, and progressively discloses complex functionality as needed – resulting in a cleaner look and feel.

Among the key changes are the simplified main toolbar, new tool window layout, new themes, and updated icons.

Overview

Enable the new UI

  1. Press Ctrl+Alt+S to open the IDE settings and select Appearance and Behaviour | New UI.

  2. Select the Enable new UI checkbox and apply the changes. Restart the IDE.

Main changes

Themes, icons, fonts

  • The new Light and Dark color themes have improved contrast and a consistent color palette.

    Light theme in the new UI
    Dark theme in the new UI
  • The Inter font is used for the UI on all supported OSs.

  • A new icon set has more distinguishable shapes and colors designed for legibility and visual balance.

Window header

Several new widgets are located in the main window header. From left to right:

Window header
  1. Main menu (Windows and Linux only)

    The main menu is now located under the hamburger icon. You can open it from the keyboard with the Alt+\ shortcut.

    You can bring back the full menu: go to Settings | Appearance & Behavior | Appearance and enable the Show main menu in separate toolbar option.

  2. Project widget

    The widget shows the current project's name, allows switching between recent projects, creating new projects, and opening the existing ones.

  3. VCS widget

    The widget shows the current branch, allows switching branches, and provides the most popular VCS actions. It has replaced the branch widget previously located in the status bar at the bottom of the main window.

  4. Run widget

    The widget allows you to start run/debug configurations, select other configurations to run, change the mode for the current configuration (run or debug), and edit or delete the current configuration.

    It shows the current state of the process. When a process is running, you can restart or stop it using the widget.

New UI: header widgets

Tool windows

Tool windows have a new layout and behaviour:

  • The tool window bars have big icons for easier visual navigation and a cleaner look. To see a tool window's name, hover over its icon for a tooltip.

    Tool window icon tooltips
  • Top left and right tool window bars open vertical windows on the left and right sides accordingly.

    Bottom left and right bars open horizontal tool windows at the bottom of the IDE.

    Tool window bars
  • The vertical split view, in which two tool windows could previously be open on the same side vertically, will be added later. The horizontal split works as usual.

  • The More tool windows button shows tool windows not yet present on any of the tool window stripes. When a tool window is selected, it is opened and its button appears on the default stripe for this tool window.

    Move and hide tool windows

Editor tabs

  • Tabs use more space and a bigger font for better legibility.

  • Working with multiple editor tabs is now more convenient: if tabs do not fit the screen, you can choose between using a scroll bar or squeezing the tabs to place all of them on the screen. Go to Settings | Editor | General | Editor Tabs and select the required option.

  • File colors are temporarily turned off for editor tabs as we are working on an improved presentation of file colors. If needed, you can bring back the previous file colors in Settings | Appearance & Behavior | File Colors | Use in editor tabs.

Editor tabs

Gutter

  • Breakpoints are now placed over line numbers by default to save horizontal space.

    You can place breakpoints near line numbers: press Ctrl+Shift+A, type Breakpoints Over Line Numbers, and disable the option.

    Breakpoints
  • Folding icons have been updated. Icons for unfolded areas show up on hover for a less cluttered look.

    Code folding
  • Annotations (Git Blame) have an updated color palette to help you see the recent changes faster.

    Git Blame annotations

Debug tool window

Two separate toolbars with the main debug actions were streamlined and moved to a single toolbar near the tool window tabs for better screen space management.

Tabs for switching between the Threads & Variables view and Console now also appear in the tool window tabs when there is a single running configuration.

Debugger tool window

Run tool window

The toolbar with run actions was also moved to the tool window tabs for consistency with the Debug tool window.

Run tool window

The navigation bar is now located in the status bar at the bottom of the main window.

Navigation bar

If you prefer the former location, you can move it back to the top, or even turn it off completely. To do so, go to the main menu and select View | Appearance | Navigation Bar.

Last modified: 11 January 2023