PhpStorm 2022.1 Help

Structure tool window, File structure popup

Structure tool window

View | Tool Windows | Structure or 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.

For diagrams, this tool window shows the diagram preview.

File Structure popup

Navigate | File Structure or 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.

Item

Tooltip

Description

Expand All

Expand All Ctrl+NumPad +

Click this button to have all the nodes in the tool window expanded.

Collapse All

Collapse All Ctrl+NumPad -

Click this button to have all the nodes in the tool window collapsed.

Show Options Menu

Click 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 window

Shift+Escape

Hide the tool window Shift+Escape.

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

In the PHP context, the title bar contains two additional toggle buttons besides the buttons common for all language contexts.

Item

Description

PHP

Toggle this button to view the hierarchy of PHP elements. The button is always present on the toolbar but is enabled only when the current PHP class or file contains fragments of HTML code.

HTML

Toggle this button to view the hierarchy of HTML elements in a PHP class or file. The button is only available is the current PHP class or file contains fragments of HTML code.

HTML, XML

Icon

Tooltip

Description

the Sort Alphabetically button

Sort Alphabetically

Click this button to have the elements within a class sorted alphabetically.

HTML5 icon

HTML5 Outline

Click this button on to view HTML 5 outline of an HTML file:

html5_outline.png

Collapse All

Collapse All Ctrl+NumPad -

Click this button to have all the nodes in the tool window collapsed.

Expand All

Expand All Ctrl+NumPad +

Click this button to have all the nodes in the tool window expanded.

the Navigate with Single Click button

Navigate with Single Click

Click 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 button

Always Select Opened Element

Click this button to have PhpStorm 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

Icon

Tooltip

Description

the Sort Alphabetically button

Sort Alphabetically

Click this button to have the elements within a class sorted alphabetically.

the Group Methods by Defining Type button

Group Methods by Defining Type

Click 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 button

Show Fields

Click this button to have all fields (properties) shown in the tree.

Show Inherited

Show Inherited

Click 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 All

Collapse All Ctrl+NumPad -

Click this button to have all the nodes in the tool window collapsed.

Expand All

Expand All Ctrl+NumPad +

Click this button to have all the nodes in the tool window expanded.

the Navigate with Single Click button

Navigate with Single Click

Click 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 button

Always Select Opened Element

Click this button to have PhpStorm 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.

PHP

Icon

Tooltip

Description

Sort by Visibility

Sort by Visibility

Click this button to have the items sorted by their visibility in the following order:

public - protected - package local - private.

the Sort Alphabetically button

Sort Alphabetically

Click this button to have the elements within a class sorted alphabetically.

the Group Methods by Type button

Group Methods by Type

Click 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 Includes button

Show Includes

Click this button to have all files included through include or require statements shown in the tree.

the Show Properties button

Show Properties

Click this button to have all properties shown in the tree.

the Show Constants button

Show Constants

Click this button to have constants shown in the tree.

the Show Protected Members button

Show Protected Members

Click this button to have protected class members shown in the tree.

the Show Private Members button

Show Private Members

Click this button to have private class members shown in the tree.

the Show Inherited button

Show Inherited

Click 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 distinguish them from the members defined in the current class.

The Show Anonymous Classes button

Show Anonymous Classes

Click this button to have anonymous classes shown in the tree.

The Show Lambdas button

Show Lambdas

Click this button to have lambdas shown in the tree.

Collapse All

Collapse All Ctrl+NumPad -

Click this button to have all the nodes in the tool window collapsed.

Expand All

Expand All Ctrl+NumPad +

Click this button to have all the nodes in the tool window expanded.

the Navigate with Single Click button

Navigate with Single Click

Click 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 button

Always Select Opened Element

Click this button to have PhpStorm 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: 20 April 2022