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);
111 #import-snapshot::before {
112 background-image: url(chrome://devtools/skin/images/import.svg);
115 #record-allocation-stacks-label,
116 #pop-view-button-label {
117 border-inline-end: 1px solid var(--theme-splitter-color);
118 padding-inline-end: 5px;
122 * Due to toolbar styles of `.devtools-toolbarbutton:not([label])` which overrides
123 * .devtools-toolbarbutton's min-width of 78px, reset the min-width.
127 -moz-box-align: center;
144 * Container (sidebar + main panel)
147 #memory-tool-container {
149 * Flex: contains two children: .list (sidebar) and #heap-view (main panel),
150 * which need to be laid out horizontally. The sidebar has a fixed width and
151 * the main panel needs to flex to fill out all remaining horizontal space.
155 * Flexing to fill out remaining vertical space. The preceeding sibling is
156 * the toolbar. @see #memory-tool.
167 width: var(--sidebar-width);
168 min-width: var(--sidebar-width);
172 background-color: var(--theme-sidebar-background);
173 border-inline-end: 1px solid var(--theme-splitter-color);
176 .snapshot-list-item {
178 * Flex: contains several children, which need to be laid out vertically.
181 flex-direction: column;
182 color: var(--theme-body-color);
183 border-bottom: 1px solid #A09090;
188 .snapshot-list-item.selected {
189 background-color: var(--theme-selection-background);
190 color: var(--theme-selection-color);
193 .snapshot-list-item.selected ::-moz-selection {
194 background-color: var(--theme-selection-color);
195 color: var(--theme-selection-background);
198 .snapshot-list-item .snapshot-info {
200 justify-content: space-between;
204 .snapshot-list-item .snapshot-title {
206 justify-content: space-between;
209 .snapshot-list-item .save {
210 text-decoration: underline;
214 .snapshot-list-item .delete {
221 .theme-light .snapshot-list-item.selected .delete {
222 /* filter: invert(100%);*/
225 .snapshot-list-item .delete::before {
226 background-image: url("chrome://devtools/skin/images/close.svg");
227 background-position: 0.2em 0;
230 .snapshot-list-item > .snapshot-title {
234 .snapshot-list-item > .snapshot-title > input[type=checkbox] {
236 margin-inline-end: 5px;
239 .snapshot-list-item > .snapshot-state,
240 .snapshot-list-item > .snapshot-totals {
242 color: var(--theme-body-color-alt);
245 .snapshot-list-item.selected > .snapshot-state,
246 .snapshot-list-item.selected > .snapshot-totals {
247 /* Text inside a selected item should not be custom colored. */
248 color: inherit !important;
257 flex-direction: column;
269 * By default, flex items have min-width: auto;
270 * (https://drafts.csswg.org/css-flexbox/#min-size-auto)
277 * Flex: contains a .heap-view-panel which needs to fill out all the
278 * available space, horizontally and vertically.
282 * Flexing to fill out remaining horizontal space. The preceeding sibling
283 * is the sidebar. @see #memory-tool-container.
286 background-color: var(--theme-body-background);
289 * By default, flex items have min-width: auto;
290 * (https://drafts.csswg.org/css-flexbox/#min-size-auto)
296 #heap-view > .heap-view-panel {
298 * Flex: can contain several children, including a tree with a header and
299 * multiple rows, all of which need to be laid out vertically. When the
300 * tree is visible, the header has a fixed height and tree body needs to flex
301 * to fill out all remaining vertical space.
304 flex-direction: column;
306 * Flexing to fill out remaining horizontal space. @see #heap-view.
311 * By default, flex items have min-width: auto;
312 * (https://drafts.csswg.org/css-flexbox/#min-size-auto)
317 #heap-view > .heap-view-panel > .snapshot-status,
318 #heap-view > .heap-view-panel > .take-snapshot,
320 #shortest-paths-select-node-msg {
326 #heap-view > .heap-view-panel > .take-snapshot {
330 #heap-view > .heap-view-panel[data-state="snapshot-state-error"] pre {
331 background-color: var(--theme-body-background);
337 * Heap tree view header
342 * Flex: contains several span columns, all of which need to be laid out
343 * horizontally. All columns except the last one have percentage widths, and
344 * the last one needs to flex to fill out all remaining horizontal space.
347 color: var(--theme-body-color);
348 background-color: var(--theme-tab-toolbar-background);
349 border-bottom: 1px solid var(--cell-border-color);
354 #shortest-paths-header {
355 text-overflow: ellipsis;
356 line-height: var(--heap-tree-header-height);
357 justify-content: center;
358 justify-self: center;
366 .header > .heap-tree-item-name {
367 justify-content: flex-start;
371 background-color: var(--theme-body-background);
377 #shortest-paths-select-node-msg {
378 justify-self: center;
382 * Heap tree view body
387 * Flexing to fill out remaining vertical space. @see .heap-view-panel
391 background-color: var(--theme-body-background);
395 height: var(--heap-tree-row-height);
396 line-height: var(--heap-tree-row-height);
401 padding-inline-end: 5px;
405 * Heap tree view columns
410 * Flex: contains several span columns, all of which need to be laid out
411 * horizontally. All columns except the last one have percentage widths, and
412 * the last one needs to flex to fill out all remaining horizontal space.
418 background-color: var(--row-alt-background-color);
422 background-color: var(--row-hover-background-color);
425 .heap-tree-item.focused {
426 background-color: var(--theme-selection-background);
427 color: var(--theme-selection-color);
430 .heap-tree-item.focused ::-moz-selection {
431 background-color: var(--theme-selection-color);
432 color: var(--theme-selection-background);
435 .heap-tree-item-individuals,
436 .heap-tree-item-bytes,
437 .heap-tree-item-count,
438 .heap-tree-item-total-bytes,
439 .heap-tree-item-total-count {
441 * Flex: contains several subcolumns, which need to be laid out horizontally.
442 * These subcolumns may have specific widths or need to flex.
446 border-inline-end: var(--cell-border-color) 1px solid;
449 .heap-tree-item-count,
450 .heap-tree-item-total-count,
451 .heap-tree-item-bytes,
452 .heap-tree-item-total-bytes {
455 * Provision for up to 19 characters:
457 * GG_MMM_KKK_BBB_100%
459 * '------------'|'--'
460 * 14 ch for 10s | 4 ch for the largest % we will
461 * of GB and | normally see: "100%"
465 * A space between the number and percent
470 .heap-tree-item-name {
472 * Flex: contains an .arrow and some text, which need to be laid out
473 * horizontally, vertically aligned in the middle of the container.
478 * Flexing to fill out remaining vertical space.
479 * @see .header and .heap-tree-item */
481 padding-inline-start: 5px;
485 * Heap tree view subcolumns
490 .heap-tree-item-name {
495 padding-inline-start: 3px;
499 padding-inline-start: 3px;
500 padding-inline-end: 3px;
505 font-family: var(--monospace-font-family);
510 color: var(--theme-content-color3);
517 .heap-tree-item.focused .heap-tree-number,
518 .heap-tree-item.focused .heap-tree-percent {
522 .heap-tree-item-individuals {
529 .heap-tree-item-individuals > button {
533 /* Override default styles for toolbar buttons to fix entire row height. */
534 margin: 0 auto !important;
542 .tree-map-container {
555 display: inline-block;
559 background-image: url(chrome://devtools/skin/images/webconsole.svg);
560 background-size: 72px 60px;
561 background-position: -24px -24px;
562 background-repeat: no-repeat;
565 margin-inline-end: 5px;
568 .theme-light .error::before {
569 background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
573 * Frame View components
578 .heap-tree-item-address {
584 .heap-tree-item-address {
585 font-family: monospace;
588 .no-allocation-stacks {
589 border-color: var(--theme-splitter-color);
591 border-width: 0px 0px 1px 0px;
605 .theme-dark .edgePath path {
606 stroke: var(--theme-body-color-alt);
608 .theme-light .edgePath path {
609 stroke: var(--theme-splitter-color);
613 fill: var(--theme-body-background);
616 fill: var(--theme-body-color-alt);
624 stroke: var(--theme-tab-toolbar-background);
627 fill: var(--theme-tab-toolbar-background);
630 fill: var(--theme-toolbar-background);
635 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
640 fill: var(--theme-body-color-alt);