WebStorm 2021.1 Help

Structure tool window, File structure popup

  • View | Tool Windows | Structure
    Alt+7

    This tool window displays the structure of a file currently opened in the editor and having the focus, or selected in the Project tool window.

  • Navigate | File Structure
    Ctrl+F12

    This popup displays the structure of a file, currently opened in the editor and having the focus.

Both views help quickly navigate through the file structure.

This section describes the buttons on the title bar of the tool window and the context menu options of the title bar. Turn these options on and off to have elements of certain types hidden or shown and configure the way they are presented.

The buttons on the title bar are common for all language contexts.

Title Bar

The buttons on the title bar are common for all language contexts.

ItemTooltipDescription
Expand AllExpand All Ctrl+NumPad +Click this button to have all the nodes in the tool window expanded.
Collapse AllCollapse All Ctrl+NumPad -Click this button to have all the nodes in the tool window collapsed.
Show Options MenuClick this button to open the context menu and configure the appearance of the tool window, its viewing mode, and the way it presents the structure of the current file by turning the menu items on or off.
Hide tool windowShift+Escape

Hide the tool window Shift+Escape.

To hide all the tool windows, press Ctrl+Shift+F12.

HTML, XML

IconTooltipDescription
the Sort Alphabetically buttonSort AlphabeticallyClick this button to have the elements within a class sorted alphabetically.
HTML5 iconHTML5 OutlineClick this button on to view HTML 5 outline of an HTML file:
html5_outline.png
Collapse AllCollapse All Ctrl+NumPad -Click this button to have all the nodes in the tool window collapsed.
Expand AllExpand All Ctrl+NumPad +Click this button to have all the nodes in the tool window expanded.
the Navigate with Single Click buttonNavigate with Single ClickClick this button to enable automatic navigation to the line of source code that corresponds to the selected node when the focus switches to the editor.
the Always Select Opened Element buttonAlways Select Opened ElementClick this button to have WebStorm automatically move the focus in the Structure tool window to the node that corresponds to the code where the cursor is currently positioned in the editor.

JavaScript, TypeScript, CoffeeScript

IconTooltipDescription
the Sort Alphabetically buttonSort AlphabeticallyClick this button to have the elements within a class sorted alphabetically.
the Group Methods by Defining Type buttonGroup Methods by Defining TypeClick this button to have all the methods that override/implement the methods of a particular class/interface grouped under the node that corresponds to this class/interface.
the Show Fields buttonShow FieldsClick this button to have all fields (properties) shown in the tree.
Show InheritedShow InheritedClick this button to display all the methods and fields inherited by the current class and accessible from it. The inherited members are displayed gray to tell them from the members defined in the current class.
Collapse AllCollapse All Ctrl+NumPad -Click this button to have all the nodes in the tool window collapsed.
Expand AllExpand All Ctrl+NumPad +Click this button to have all the nodes in the tool window expanded.
the Navigate with Single Click buttonNavigate with Single ClickClick this button to enable automatic navigation to the line of source code that corresponds to the selected node when the focus switches to the editor.
the Always Select Opened Element buttonAlways Select Opened ElementClick this button to have WebStorm automatically move the focus in the Structure tool window to the node that corresponds to the code where the cursor is currently positioned in the editor.
Last modified: 08 August 2021