Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ The _UI Inspector_ displays the icon details:

![Internal Icon Info](internal_ui_inspector_icon_info.png)

## `added-at` Property
## `added-at` Property {id="added-at-property"}

Sometimes, inspecting complex component's properties is not enough to understand how the component was created and configured.
_UI Inspector_ gives the possibility of finding the code where the selected component was added, which makes it much easier to understand which APIs can be used to build custom components with similar complexity.
Expand Down
47 changes: 23 additions & 24 deletions topics/ui/components/tool_window.md
Original file line number Diff line number Diff line change
@@ -1,55 +1,54 @@
<!-- Copyright 2000-2024 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -->

# Tool Window
# 工具窗口

<link-summary>UI guidelines on using tool windows.</link-summary>
<link-summary>工具窗口的指南</link-summary>

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).
工具窗口是在IDE主窗口内的一个面板。有关工具窗口的信息,请参考[IntelliJ IDEA Web Help](https://www.jetbrains.com/help/idea/tool-windows.html)。有关实现工具窗口的信息,请参考[](tool_windows.md)

![](tool_window_example.png){width=960}

## When to use
## 什么时候使用
您可以在编辑器或其它工具窗口旁边使用工具窗口,这样可以展示用户需要的大量信息。比如查看文件结构、运行及调试应用、查看git提交日志等。

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.
如果这些信息足够少,您应该将它显示在编辑器内、主工具栏、状态栏或者弹出窗口中。比如在编辑器侧边栏显示文件的变化,在主工具栏中显示面包屑导航,在状态栏中显示当前分支和文件详细信息,在弹出窗口中显示快捷文档等。

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.
如果用户不需要这些主窗口中的信息来完成操作,您应该把它们现实在弹出窗口或者对话框中。比如随处搜索弹窗和设置对话框。

If the user does not need the information from the main window to complete an operation, show the content in the popup or dialog window. For example, Search Everywhere popup, Settings dialog.

## Tool window structure
## 工具窗口结构

![](tool_window_structure.png){width=483}

## How to use
## 如何使用

Give the tool window a name:
为工具窗口命名:

* The name should be [short and descriptive](writing_short.md), preferably not longer than two words.
* Use title-case capitalization.
* 名称应该[言简意赅](writing_short.md),最好不超过两个词(这里指英文的两个词,中文请酌情考虑)。
* 使用标题大小写。

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.
请在工具窗口按钮(Tool window button)和页眉(Header)处显示窗口名称。如果窗口内分了标签页,请在窗口名称后面添加一个冒号,反之则不用。

![](pull_requests.png){width=308}

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).
请为工具窗口添加一个灰色纯色图标,大小为13px × 13px。创建图标请参考[](icons_style.md)

**Exception:** <control>Problems</control> and <control>Event Log</control> icons change color and show the current status.
**例外:**<control>Problems</control><control>Event Log</control>会改变颜色来展现当前状态。

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.
请根据具体内容选择工具窗口的布局方向。垂直布局的窗口更适合树,例如项目、结构或Maven工具窗口。水平布局的窗口更适合表格、宽内容或详细信息,例如Git日志、终端以及问题。

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.
请**不要**展示与当前项目无关的工具窗口。比如,不要在没有Maven配置文件的项目中展示Maven工具窗口。

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.
如果一个工具窗口没有内容,则仅当其包含几乎对所有项目都有用的基础功能时,才应该显示它的按钮,比如版本控制和问题窗口;否则应该默认不显示。

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).
为[经常使用的功能和筛选程序](toolbar.md#what-items-to-add-on-toolbar)添加一个工具栏。Use a horizontal toolbar for vertical tool windows and a vertical toolbar for horizontal tool windows. 另请参考[](toolbar.md)

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.
请将工具窗口的设置放在页眉的齿轮图标中。如果没有工具栏,则应将其它选项也放进齿轮图标中。比如项目窗口中的齿轮图标。

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.
当所有信息并不适合放在一个标签页中,或者不指代类似的东西时,请添加标签页,比如运行、文件历史、查找结果。这些标签页应该是可以关闭的。

![](git.png){width=308 style=block}
*Separate tabs are added for each file history.*
*为每个文件的历史添加单独的标签页*

![](find.png){width=448 style=block}
*Separate tabs are added for different search queries.*
*为每个搜索添加各自的标签页*

Loading