| Benedikt Meurer | 625c4bc | 2024-07-19 12:33:13 | [diff] [blame] | 1 | # Glossary |
| 2 | |
| 3 | To stop mixing terms for UI elements across DevTools UI, its docs, and code, familiarize yourself with the terms in this glossary. |
| 4 | |
| 5 | [TOC] |
| 6 | |
| 7 | ## Panel |
| 8 | |
| 9 | A top-level tab in the DevTools window, including tabs from the **Drawer** |
| 10 | because you can [move them to the top](https://developer.chrome.com/docs/devtools/customize#reorder). |
| 11 | |
| 12 | In other words, a panel is a fairly complex arrangement of information and |
| 13 | control elements put together on the basis of common sense. |
| 14 | |
| 15 |  |
| 16 | |
| 17 | Despite the fact that it's also a tab, the term "panel" has been in use for |
| 18 | ages and all users are familiar with it. At the time of writing, DevTools |
| 19 | has 32 panels. |
| 20 | |
| 21 | *** aside |
| 22 | Example: **Elements**, **Console**, **Network**, and **Sources** panels. |
| 23 | *** |
| 24 | |
| 25 | ## Tab |
| 26 | |
| 27 | *Inside a panel*, one of the labeled "bookmarks" in a set. Opens a single |
| 28 | respective "page" (view) when you "pull" it. |
| 29 | |
| 30 |  |
| 31 | |
| 32 | In other words, a single-select switch between several distinct UI parts. |
| 33 | Can be arranged: |
| 34 | |
| 35 | - Horizontally, like **Styles** ... **Properties** in **Elements** |
| 36 | - Vertically, like **Preferences** ... **Shortcuts** in **Settings** |
| 37 | |
| 38 | *** aside |
| 39 | Examples: **Styles**, **Computed**, and **Properties** tabs inside the |
| 40 | **Elements** panel, or **Page**, **Workspace**, and **Snippets** tabs |
| 41 | inside the sidebar of the **Sources** panel. |
| 42 | *** |
| 43 | |
| 44 | ## Section |
| 45 | |
| 46 | A set of UI elements inside a panel and/or tab that is put together on the |
| 47 | basis of common sense. Use this term when other terms don't seem to apply. |
| 48 | |
| 49 | *** aside |
| 50 | Example: **Watch**, **Breakpoints**, and other sections in the **Sources** > |
| 51 | **Debugger** sidebar. |
| 52 | *** |
| 53 | |
| 54 | ## Datagrid, table |
| 55 | |
| 56 | A spreadsheet-like tabular view of data with rows and columns. |
| 57 | |
| 58 | *** aside |
| 59 | Example: The request table in the **Network** panel. |
| 60 | *** |
| 61 | |
| 62 | ## Dialog [window] |
| 63 | |
| 64 | A fairly small window that pops up over DevTools, communicates information, |
| 65 | and prompts for a response. |
| 66 | |
| 67 | *** aside |
| 68 | Example: **Do you trust this code?** dialog in **Sources** > **Editor**. |
| 69 | *** |
| 70 | |
| 71 | ## Sidebar |
| 72 | |
| 73 | A set of UI elements, typically to the right or left side of a panel. |
| 74 | Sometimes can be closed or collapsed. Spelled without a space between |
| 75 | "side" and "bar". |
| 76 | |
| 77 | *** aside |
| 78 | Example: **Navigator** and **Debugger** sidebars in **Sources**. |
| 79 | *** |
| 80 | |
| 81 | ## Action bar |
| 82 | |
| 83 | A bar with control elements, such as buttons, filters, checkboxes, and menus. |
| 84 | Typically located at the top. |
| 85 | |
| 86 | *** aside |
| 87 | Example: Action bar at the top of the **Console**. |
| 88 | *** |
| 89 | |
| 90 | ## Status bar |
| 91 | |
| 92 | A bar with information and statistics, non-actionable. Typically located at |
| 93 | the bottom. |
| 94 | |
| 95 | *** aside |
| 96 | Example: Status bar at the bottom of the **Network** panel. |
| 97 | *** |
| 98 | |
| 99 | ## Navigation tree |
| 100 | A hierarchical tree-like structure that can have multiple levels of nesting. |
| 101 | |
| 102 | *** aside |
| 103 | Example: File tree in the **Sources** > **Page** tab. |
| 104 | *** |
| 105 | |
| 106 | ## Drop-down menu |
| 107 | A list of options that appears when you click the menu element. |
| 108 | Can have multi-select. |
| 109 | |
| 110 | *** aside |
| 111 | Example: **Network** > **Throttling**. |
| 112 | *** |
| 113 | |
| 114 | ## Context menu |
| 115 | |
| 116 | A context-sensitive list of actions shown when you right-click an element. |
| 117 | |
| 118 | ## Tooltip |
| 119 | |
| 120 | A small pop-up window with additional information that appears on hover. |
| 121 | Can have rich formatting. |
| 122 | |
| 123 | ## Controls |
| 124 | |
| 125 | Graphical control elements, such as buttons, radio buttons, checkboxes, toggle |
| 126 | switches, sliders, scroll bars, text boxes, links, and others. |
| 127 | |
| 128 | ## Pane [DEPRECATED] |
| 129 | |
| 130 | Deprecated. A duplicative and confusing term. Don't use. |
