diff --git a/images/ui/tool_window/find.png b/images/ui/tool_window/find.png deleted file mode 100644 index 0df8829d2bb..00000000000 Binary files a/images/ui/tool_window/find.png and /dev/null differ diff --git a/images/ui/tool_window/git.png b/images/ui/tool_window/git.png deleted file mode 100644 index 69634409c6b..00000000000 Binary files a/images/ui/tool_window/git.png and /dev/null differ diff --git a/images/ui/tool_window/pull_requests.png b/images/ui/tool_window/pull_requests.png deleted file mode 100644 index b0177b9d447..00000000000 Binary files a/images/ui/tool_window/pull_requests.png and /dev/null differ diff --git a/images/ui/tool_window/tool_window_example.png b/images/ui/tool_window/tool_window_example.png deleted file mode 100644 index e0ae7c8bbee..00000000000 Binary files a/images/ui/tool_window/tool_window_example.png and /dev/null differ diff --git a/images/ui/tool_window/tool_window_structure.png b/images/ui/tool_window/tool_window_structure.png deleted file mode 100644 index 0f12dd1c439..00000000000 Binary files a/images/ui/tool_window/tool_window_structure.png and /dev/null differ diff --git a/images/ui/tool_window/toolwindow.png b/images/ui/tool_window/toolwindow.png new file mode 100644 index 00000000000..fe7451db028 Binary files /dev/null and b/images/ui/tool_window/toolwindow.png differ diff --git a/images/ui/tool_window/toolwindow_badge.png b/images/ui/tool_window/toolwindow_badge.png new file mode 100644 index 00000000000..66cb26161b3 Binary files /dev/null and b/images/ui/tool_window/toolwindow_badge.png differ diff --git a/images/ui/tool_window/toolwindow_badge_dark.png b/images/ui/tool_window/toolwindow_badge_dark.png new file mode 100644 index 00000000000..cd9e9d5d8fa Binary files /dev/null and b/images/ui/tool_window/toolwindow_badge_dark.png differ diff --git a/images/ui/tool_window/toolwindow_dark.png b/images/ui/tool_window/toolwindow_dark.png new file mode 100644 index 00000000000..d979c9fc4c1 Binary files /dev/null and b/images/ui/tool_window/toolwindow_dark.png differ diff --git a/images/ui/tool_window/toolwindow_empty_state_correct.png b/images/ui/tool_window/toolwindow_empty_state_correct.png new file mode 100644 index 00000000000..71fbc079a2e Binary files /dev/null and b/images/ui/tool_window/toolwindow_empty_state_correct.png differ diff --git a/images/ui/tool_window/toolwindow_empty_state_correct_dark.png b/images/ui/tool_window/toolwindow_empty_state_correct_dark.png new file mode 100644 index 00000000000..b18ade4a274 Binary files /dev/null and b/images/ui/tool_window/toolwindow_empty_state_correct_dark.png differ diff --git a/images/ui/tool_window/toolwindow_empty_state_incorrect.png b/images/ui/tool_window/toolwindow_empty_state_incorrect.png new file mode 100644 index 00000000000..0c28a0c241c Binary files /dev/null and b/images/ui/tool_window/toolwindow_empty_state_incorrect.png differ diff --git a/images/ui/tool_window/toolwindow_empty_state_incorrect_dark.png b/images/ui/tool_window/toolwindow_empty_state_incorrect_dark.png new file mode 100644 index 00000000000..036ca5123ac Binary files /dev/null and b/images/ui/tool_window/toolwindow_empty_state_incorrect_dark.png differ diff --git a/images/ui/tool_window/toolwindow_horizontal.png b/images/ui/tool_window/toolwindow_horizontal.png new file mode 100644 index 00000000000..832fb0a8261 Binary files /dev/null and b/images/ui/tool_window/toolwindow_horizontal.png differ diff --git a/images/ui/tool_window/toolwindow_horizontal_dark.png b/images/ui/tool_window/toolwindow_horizontal_dark.png new file mode 100644 index 00000000000..e1eaf440675 Binary files /dev/null and b/images/ui/tool_window/toolwindow_horizontal_dark.png differ diff --git a/images/ui/tool_window/toolwindow_more_correct.png b/images/ui/tool_window/toolwindow_more_correct.png new file mode 100644 index 00000000000..5526fe2f266 Binary files /dev/null and b/images/ui/tool_window/toolwindow_more_correct.png differ diff --git a/images/ui/tool_window/toolwindow_more_correct_dark.png b/images/ui/tool_window/toolwindow_more_correct_dark.png new file mode 100644 index 00000000000..678ab4448cc Binary files /dev/null and b/images/ui/tool_window/toolwindow_more_correct_dark.png differ diff --git a/images/ui/tool_window/toolwindow_more_incorrect.png b/images/ui/tool_window/toolwindow_more_incorrect.png new file mode 100644 index 00000000000..b6bae8901f8 Binary files /dev/null and b/images/ui/tool_window/toolwindow_more_incorrect.png differ diff --git a/images/ui/tool_window/toolwindow_more_incorrect_dark.png b/images/ui/tool_window/toolwindow_more_incorrect_dark.png new file mode 100644 index 00000000000..36485a4ccf9 Binary files /dev/null and b/images/ui/tool_window/toolwindow_more_incorrect_dark.png differ diff --git a/images/ui/tool_window/toolwindow_name.png b/images/ui/tool_window/toolwindow_name.png new file mode 100644 index 00000000000..eeb6d26f945 Binary files /dev/null and b/images/ui/tool_window/toolwindow_name.png differ diff --git a/images/ui/tool_window/toolwindow_name_dark.png b/images/ui/tool_window/toolwindow_name_dark.png new file mode 100644 index 00000000000..09facd95123 Binary files /dev/null and b/images/ui/tool_window/toolwindow_name_dark.png differ diff --git a/images/ui/tool_window/toolwindow_name_stripes.png b/images/ui/tool_window/toolwindow_name_stripes.png new file mode 100644 index 00000000000..3c2be7c8b94 Binary files /dev/null and b/images/ui/tool_window/toolwindow_name_stripes.png differ diff --git a/images/ui/tool_window/toolwindow_name_stripes_dark.png b/images/ui/tool_window/toolwindow_name_stripes_dark.png new file mode 100644 index 00000000000..702503d72c4 Binary files /dev/null and b/images/ui/tool_window/toolwindow_name_stripes_dark.png differ diff --git a/images/ui/tool_window/toolwindow_structure.png b/images/ui/tool_window/toolwindow_structure.png new file mode 100644 index 00000000000..2f7db9c0bc1 Binary files /dev/null and b/images/ui/tool_window/toolwindow_structure.png differ diff --git a/images/ui/tool_window/toolwindow_structure_dark.png b/images/ui/tool_window/toolwindow_structure_dark.png new file mode 100644 index 00000000000..f4fea462e2a Binary files /dev/null and b/images/ui/tool_window/toolwindow_structure_dark.png differ diff --git a/images/ui/tool_window/toolwindow_tabs.png b/images/ui/tool_window/toolwindow_tabs.png new file mode 100644 index 00000000000..973c219d9d2 Binary files /dev/null and b/images/ui/tool_window/toolwindow_tabs.png differ diff --git a/images/ui/tool_window/toolwindow_tabs_dark.png b/images/ui/tool_window/toolwindow_tabs_dark.png new file mode 100644 index 00000000000..5b9c790d5df Binary files /dev/null and b/images/ui/tool_window/toolwindow_tabs_dark.png differ diff --git a/images/ui/tool_window/toolwindow_vertical.png b/images/ui/tool_window/toolwindow_vertical.png new file mode 100644 index 00000000000..a6b4b3fcd9d Binary files /dev/null and b/images/ui/tool_window/toolwindow_vertical.png differ diff --git a/images/ui/tool_window/toolwindow_vertical_dark.png b/images/ui/tool_window/toolwindow_vertical_dark.png new file mode 100644 index 00000000000..e4a00695fe4 Binary files /dev/null and b/images/ui/tool_window/toolwindow_vertical_dark.png differ diff --git a/topics/ui/components/tool_window.md b/topics/ui/components/tool_window.md index fe5b1e95a51..86f55dddd40 100644 --- a/topics/ui/components/tool_window.md +++ b/topics/ui/components/tool_window.md @@ -6,50 +6,114 @@ A tool window is a pane inside the main IDE window. For information about tool windows, see [IntelliJ IDEA Web Help](https://www.jetbrains.com/help/idea/tool-windows.html). For information about implementing tool windows, see [](tool_windows.md). -![](tool_window_example.png){width=960} +![](toolwindow.png){width=706} ## When to use -Use the tool window to show a large amount of information that the user needs while working side-by-side with the editor or other tool windows. For example, viewing the project structure, running and debugging an application, and viewing git log. +Tool windows provide access to information, tools, and services that support coding. They let users manage the project, run and debug applications, view git changes, and work with external systems — all without leaving the main workspace. -If the amount of information is small, show it in the editor, main toolbar, status bar or popup. For example, show version control changes on the editor gutter, breadcrumbs in the main toolbar, current branch and file details in the status bar, quick doc in a popup. + + +## Tool window structure + +![](toolwindow_structure.png){width=706} -Give the tool window a name: +### Tool window name * The name should be [short and descriptive](writing_short.md), preferably not longer than two words. * Use title-case capitalization. +* Provide an abbreviation if a common one exists when tool window names are shown in the stripes. For example, Pull Requests becomes PR. + + + + + + +
+ + + +### Icon + +Add an icon for the tool window button. The icon should be created in two sizes: 20×20px and 16×16px, grey, and monochromatic. See how to create icons in the [icons guidelines](icons_style.md). + + + +#### Icon badge for feedback + +Show a colored badge above the icon if the tool window content changes and can contain different types of feedback, for example, new updates or errors. + +Do not change the icon for the tool window button when the content changes. + +![](toolwindow_badge.png){width=706} + + + +### Tabs + +Add [tabs](tabs.md) to group related content or create similar instances, like run sessions, history for files, find results. The tabs for similar entities should be closable. + +![](toolwindow_tabs.png){width=706} + +### Toolbar + +Add a toolbar for [frequently used actions and filters](toolbar.md#what-items-to-add-on-toolbar). For more details, see the [toolbar guidelines](toolbar.md). + + + +## How to use + +### Visibility -Show the tool window name in the tool window button and header. If there are tabs in the tool window header, add a colon after the tool window name. Otherwise, do not add it. +If a tool window has no content yet, show its button by default only if the window contains basic functionality that is likely to be used for all projects, for example, Version Control or Problems. Otherwise, hide the tool window button by default. Hidden tool windows are still available under More tool windows menu. -![](pull_requests.png){width=308} + + + + + +
CorrectIncorrect
-Add an icon for the tool window. The icon is 13px x 13px, grey and monochromatic. See how to create icons in the [icons guidelines](icons_style.md). +Don't show the tool window button if the tool window is not relevant to the current project configuration. For example, don't show the Maven tool window for a project without Maven configuration files. -**Exception:** Problems and Event Log icons change color and show the current status. +### Orientation -Select the tool window orientation depending on the content. Vertical tool windows work better for trees, for example, Project, Structure, or Maven tool windows. Horizontal tool windows work better for tables, wide content or master-detail panels, for example, Git Log, Terminal, or Problems. +#### Vertical window -Do **not** show the tool window button if the tool window is not relevant to the current project configuration. For example, do not show the Maven tool window for a project without Maven configuration files. +Vertical tool windows work better for trees, for example, Project, Structure, or Maven tool windows. -If a tool window has no content yet, show its button by default only if the window contains basic functionality that is likely to be used for all projects, for example, Version Control or Problems. Otherwise, do not show the tool window button by default. +![](toolwindow_vertical.png){width=706} -Add a toolbar for [frequently used actions and filters](toolbar.md#what-items-to-add-on-toolbar). Use a horizontal toolbar for vertical tool windows and a vertical toolbar for horizontal tool windows. For more details, see the [toolbar guidelines](toolbar.md). +#### Horizontal window -Put tool window viewing mode settings under the gear icon in the header. If there is no toolbar, put other options under the gear icon as well. For example, see the gear icon in the Project tool window. +Horizontal tool windows work better for tables, wide content, or master-detail panels, for example, Git Log, Terminal, or Problems. -Add tabs if all the information does not fit in one tab or refers to similar instances, like run sessions, history for files, find results. The tabs for entities should be closable. +![](toolwindow_horizontal.png){width=706} -![](git.png){width=308 style=block} -*Separate tabs are added for each file history.* +### Empty state -![](find.png){width=448 style=block} -*Separate tabs are added for different search queries.* +If a tool window has no content yet, show [empty state](empty_state.md) to help users start working with the tool window. + + + + + +
CorrectIncorrect