WebStorm 8.0.0 Web Help

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.

View | Tool Windows | Structure
Alt+7Alt+7Alt+7Alt+7Alt+7Alt+7Ctrl+7 or Alt+7Alt+7Command 7Command 7Command 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+F12Ctrl+F12Ctrl+0Ctrl+F12Ctrl+F12Ctrl+F12Ctrl+F12 or Ctrl+Shift+F12Ctrl+F3 or Ctrl+OCommand F12Command F12Command O


Both views help quickly navigate through the files' structure. Refer to the section Navigating with Structure Views.

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.

Tip

Refer to the section Symbols for the member icons in the tree view of a file in the Structure tool window.

Title Bar

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

Item Tooltip Description
collapseAll.png Collapse AllCtrl+NumPad - or Ctrl+MinusCtrl+NumPad - or Ctrl+MinusCtrl+NumPad - or Ctrl+MinusCtrl+NumPad - or Ctrl+MinusCtrl+NumPad - or Ctrl+MinusCtrl+NumPad - or Ctrl+MinusCtrl+NumPad - or Ctrl+MinusCtrl+NumPad - or Ctrl+MinusCommand NumPad - or Command MinusCommand NumPad - or Command MinusCommand NumPad - or Command Minus Click this button to have all the nodes in the tool window collapsed.
expandAll.png Expand AllCtrl+NumPad+ or Ctrl+EqualsCtrl+NumPad+ or Ctrl+EqualsCtrl+NumPad+ or Ctrl+EqualsCtrl+NumPad+ or Ctrl+EqualsCtrl+NumPad+ or Ctrl+EqualsCtrl+NumPad+ or Ctrl+EqualsCtrl+NumPad+ or Ctrl+EqualsCtrl+NumPad+ or Ctrl+EqualsCommand NumPad or Command EqualsCommand NumPad or Command EqualsCommand NumPad or Command Equals 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.
hideSide.png Hide Shift+EscapeShift+EscapeShift+EscapeShift+EscapeShift+EscapeShift+EscapeShift+EscapeShift+EscapeShift EscapeShift EscapeShift Escape Click this button to hide the tool window.

HTML, XML

Item Description
Sort Alphabetically Turn on this option to have the elements within a class sorted alphabetically.
HTML5 Outline Turn this option on to view HTML 5 outline of a HTML file:
html5_outline.png
Autoscroll to Source Turn on this option to enable automatic navigation to the line of source code that corresponds to the selected node when the focus switches to the editor.
Autoscroll from Source Turn on this option 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, CoffeeScript

Item Description
Sort Alphabetically Turn on this option to have the elements within a class sorted alphabetically.
Group Methods by Defining Type Turn on this option 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.
Show Fields Turn on this option to have all fields (properties) shown in the tree.
Show Inherited Turn on this option 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.
Autoscroll to Source Turn on this option to enable automatic navigation to the line of source code that corresponds to the selected node when the focus switches to the editor.
Autoscroll from Source Turn on this option 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.

See Also

Procedures:

Reference:

Getting Started:

Web Resources: