1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
5 /* CSS Variables specific to this panel that aren't defined by the themes */
8 --cell-border-color: #9C9CFF;
9 --cell-border-color-light: #A09090;
10 --focus-cell-border-color: #9C9CFF;
11 --row-alt-background-color: #402000;
12 --row-hover-background-color: #603000;
15 html, body, #app, #memory-tool {
21 * Flex: contains two children: .devtools-toolbar and #memory-tool-container,
22 * which need to be laid out vertically. The toolbar has a fixed height and
23 * the container needs to flex to fill out all remaining vertical space.
26 flex-direction: column;
27 --sidebar-width: 185px;
29 * If --heap-tree-row-height changes, be sure to change HEAP_TREE_ROW_HEIGHT
30 * in `devtools/client/memory/components/heap.js`.
32 --heap-tree-row-height: 14px;
33 --heap-tree-header-height: 17px;
42 * Flex: contains several children, which need to be laid out horizontally,
43 * and aligned vertically in the middle of the container.
49 .devtools-toolbar > .toolbar-group:nth-of-type(1) {
51 * We want this to be exactly at a `--sidebar-width` distance from the
52 * toolbar's start boundary. A `.devtools-toolbar` has a 3px start padding.
54 flex: 0 0 calc(var(--sidebar-width) - 4px);
55 border-inline-end: 1px solid var(--theme-splitter-color);
56 margin-inline-end: 5px;
60 .devtools-toolbar > .toolbar-group {
62 * Flex: contains several children, which need to be laid out horizontally,
63 * and aligned vertically in the middle of the container.
70 text-overflow: ellipsis;
73 .devtools-toolbar > .toolbar-group > label {
75 * Flex: contains form controls and text, which need to be laid out
76 * horizontally, vertically aligned in the middle of the container.
80 margin-inline-end: 5px;
83 .devtools-toolbar > .toolbar-group > label.display-by > span {
84 margin-inline-end: 5px;
87 .devtools-toolbar > .toolbar-group > label.label-by > span {
88 margin-inline-end: 5px;
91 .devtools-toolbar > label {
92 margin-inline-end: 5px;
96 margin-inline-start: 5px;
99 #take-snapshot::before {
100 background-image: url(images/command-screenshot.svg);
103 #clear-snapshots::before {
104 background-image: url(chrome://devtools/skin/images/clear.svg);
107 #diff-snapshots::before {
108 background-image: url(chrome://devtools/skin/images/diff.svg);
112 * Due to toolbar styles of `.devtools-toolbarbutton:not([label])` which overrides
113 * .devtools-toolbarbutton's min-width of 78px, reset the min-width.
117 -moz-box-align: center;
134 * Container (sidebar + main panel)
137 #memory-tool-container {
139 * Flex: contains two children: .list (sidebar) and #heap-view (main panel),
140 * which need to be laid out horizontally. The sidebar has a fixed width and
141 * the main panel needs to flex to fill out all remaining horizontal space.
145 * Flexing to fill out remaining vertical space. The preceeding sibling is
146 * the toolbar. @see #memory-tool.
157 width: var(--sidebar-width);
158 min-width: var(--sidebar-width);
162 background-color: var(--theme-sidebar-background);
163 border-inline-end: 1px solid var(--theme-splitter-color);
166 .snapshot-list-item {
168 * Flex: contains several children, which need to be laid out vertically.
171 flex-direction: column;
172 color: var(--theme-body-color);
173 border-bottom: 1px solid #A09090;
178 .snapshot-list-item.selected {
179 background-color: var(--theme-selection-background);
180 color: var(--theme-selection-color);
183 .snapshot-list-item.selected ::-moz-selection {
184 background-color: var(--theme-selection-color);
185 color: var(--theme-selection-background);
188 .snapshot-list-item .snapshot-info {
190 justify-content: space-between;
194 .snapshot-list-item .save {
195 text-decoration: underline;
199 .snapshot-list-item > .snapshot-title {
203 .snapshot-list-item > .snapshot-title > input[type=checkbox] {
205 margin-inline-end: 5px;
208 .snapshot-list-item > .snapshot-state,
209 .snapshot-list-item > .snapshot-totals {
211 color: var(--theme-body-color-alt);
214 .snapshot-list-item.selected > .snapshot-state,
215 .snapshot-list-item.selected > .snapshot-totals {
216 /* Text inside a selected item should not be custom colored. */
217 color: inherit !important;
226 flex-direction: column;
238 * By default, flex items have min-width: auto;
239 * (https://drafts.csswg.org/css-flexbox/#min-size-auto)
246 * Flex: contains a .heap-view-panel which needs to fill out all the
247 * available space, horizontally and vertically.
251 * Flexing to fill out remaining horizontal space. The preceeding sibling
252 * is the sidebar. @see #memory-tool-container.
255 background-color: var(--theme-body-background);
258 * By default, flex items have min-width: auto;
259 * (https://drafts.csswg.org/css-flexbox/#min-size-auto)
265 #heap-view > .heap-view-panel {
267 * Flex: can contain several children, including a tree with a header and
268 * multiple rows, all of which need to be laid out vertically. When the
269 * tree is visible, the header has a fixed height and tree body needs to flex
270 * to fill out all remaining vertical space.
273 flex-direction: column;
275 * Flexing to fill out remaining horizontal space. @see #heap-view.
280 * By default, flex items have min-width: auto;
281 * (https://drafts.csswg.org/css-flexbox/#min-size-auto)
286 #heap-view > .heap-view-panel > .snapshot-status,
287 #heap-view > .heap-view-panel > .take-snapshot,
289 #shortest-paths-select-node-msg {
295 #heap-view > .heap-view-panel > .take-snapshot {
299 #heap-view > .heap-view-panel[data-state="snapshot-state-error"] pre {
300 background-color: var(--theme-body-background);
306 * Heap tree view header
311 * Flex: contains several span columns, all of which need to be laid out
312 * horizontally. All columns except the last one have percentage widths, and
313 * the last one needs to flex to fill out all remaining horizontal space.
316 color: var(--theme-body-color);
317 background-color: var(--theme-tab-toolbar-background);
318 border-bottom: 1px solid var(--cell-border-color);
323 #shortest-paths-header {
324 text-overflow: ellipsis;
325 line-height: var(--heap-tree-header-height);
326 justify-content: center;
327 justify-self: center;
335 .header > .heap-tree-item-name {
336 justify-content: flex-start;
340 background-color: var(--theme-body-background);
346 #shortest-paths-select-node-msg {
347 justify-self: center;
351 * Heap tree view body
356 * Flexing to fill out remaining vertical space. @see .heap-view-panel
360 background-color: var(--theme-body-background);
364 height: var(--heap-tree-row-height);
365 line-height: var(--heap-tree-row-height);
370 padding-inline-end: 5px;
374 * Heap tree view columns
379 * Flex: contains several span columns, all of which need to be laid out
380 * horizontally. All columns except the last one have percentage widths, and
381 * the last one needs to flex to fill out all remaining horizontal space.
387 background-color: var(--row-alt-background-color);
391 background-color: var(--row-hover-background-color);
394 .heap-tree-item.focused {
395 background-color: var(--theme-selection-background);
396 color: var(--theme-selection-color);
399 .heap-tree-item.focused ::-moz-selection {
400 background-color: var(--theme-selection-color);
401 color: var(--theme-selection-background);
404 .heap-tree-item-bytes,
405 .heap-tree-item-count,
406 .heap-tree-item-total-bytes,
407 .heap-tree-item-total-count {
409 * Flex: contains several subcolumns, which need to be laid out horizontally.
410 * These subcolumns may have specific widths or need to flex.
414 border-inline-end: var(--cell-border-color) 1px solid;
417 .heap-tree-item-count,
418 .heap-tree-item-total-count,
419 .heap-tree-item-bytes,
420 .heap-tree-item-total-bytes {
423 * Provision for up to 19 characters:
425 * GG_MMM_KKK_BBB_100%
427 * '------------'|'--'
428 * 14 ch for 10s | 4 ch for the largest % we will
429 * of GB and | normally see: "100%"
433 * A space between the number and percent
438 .heap-tree-item-name {
440 * Flex: contains an .arrow and some text, which need to be laid out
441 * horizontally, vertically aligned in the middle of the container.
446 * Flexing to fill out remaining vertical space.
447 * @see .header and .heap-tree-item */
449 padding-inline-start: 5px;
453 * Heap tree view subcolumns
458 .heap-tree-item-name {
463 padding-inline-start: 3px;
467 padding-inline-start: 3px;
468 padding-inline-end: 3px;
473 font-family: var(--monospace-font-family);
478 color: var(--theme-content-color3);
485 .heap-tree-item.focused .heap-tree-number,
486 .heap-tree-item.focused .heap-tree-percent {
496 display: inline-block;
500 background-image: url(chrome://devtools/skin/images/webconsole.svg);
501 background-size: 72px 60px;
502 background-position: -24px -24px;
503 background-repeat: no-repeat;
506 margin-inline-end: 5px;
509 .theme-light .error::before {
510 background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
514 * Frame View components
519 .heap-tree-item-address {
525 .no-allocation-stacks {
526 border-color: var(--theme-splitter-color);
528 border-width: 0px 0px 1px 0px;
542 .theme-dark .edgePath path {
543 stroke: var(--theme-body-color-alt);
545 .theme-light .edgePath path {
546 stroke: var(--theme-splitter-color);
550 fill: var(--theme-body-background);
553 fill: var(--theme-body-color-alt);
561 stroke: var(--theme-tab-toolbar-background);
564 fill: var(--theme-tab-toolbar-background);
567 fill: var(--theme-toolbar-background);
572 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
577 fill: var(--theme-body-color-alt);