PhpStorm 2018.2 Help

Structure Tool Window, File Structure Popup

Structure tool window

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.

View | Tool Windows | Structure
Alt+7


File Structure pop-up window

This pop-up window displays the structure of a file, currently opened in the editor and having the focus.

Navigate | File Structure
Ctrl+F12


Both views help quickly navigate through the files' structure.

This section describes the buttons on the title bar of the tool window and the options on the context menu 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. The set of options on the context menu depends on the context.

Title Bar

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

Item

Tooltip

Description

icon_collapse_all_on_title_bar.png

Collapse AllCtrl+NumPad -

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

icon expand all on title bar

Expand AllCtrl+NumPad Plus

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

viewMode.png

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.

icons general hideToolWindow svgShift+Escape Use this icon or shortcut to hide the tool window.

When used in combination with the Alt key, clicking this icon hides all the tool windows attached to the same tool window bar.

HTML, XML

Icon

Tooltip

Description

img

Sort Alphabetically

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

html5

HTML5 Outline

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

html5_outline.png

icons actions collapseall svg

Collapse AllCtrl+NumPad -

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

icons actions expandall svg

Expand AllCtrl+NumPad Plus

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

icons general autoscrollToSource

Autoscroll to Source

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.

icons general autoscrollFromSource

Autoscroll from Source

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

img

Sort Alphabetically

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

img

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.

icons nodes field svg

Show Fields

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

img

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.

icons actions collapseall svg

Collapse AllCtrl+NumPad -

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

icons actions expandall svg

Expand AllCtrl+NumPad Plus

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

icons general autoscrollToSource

Autoscroll to Source

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.

icons general autoscrollFromSource

Autoscroll from Source

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

Title Bar

Besides the buttons that are common for all language contexts, the title bar in the PHP context contains two additional toggle buttons.

Icon

Tooltip

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.

Context Menu

Icon

Tooltip

Description

img

Sort by Visibility

Click this button to have the items sorted by their visibility in the following order:
public - protected - package local - private.

img

Sort Alphabetically

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

img

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.

show_includes.png

Show Includes

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

icons nodes field svg

Show Fields

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

php_storm_structure_show_constants.png

Show Constants

Click this button to have constants shown in the tree.

icons actions collapseall svg

Collapse AllCtrl+NumPad -

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

icons actions expandall svg

Expand AllCtrl+NumPad Plus

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

icons general autoscrollToSource

Autoscroll to Source

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.

icons general autoscrollFromSource

Autoscroll from Source

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: 10 October 2018

See Also