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.
47 background-size: calc(100% - 30px);
48 background-image: linear-gradient(90deg,#9C9CFF,#9C9CFF);
49 background-repeat: no-repeat;
50 background-position: center center;
53 .devtools-toolbar::before,
54 .devtools-toolbar::after {
60 background-color: #FF9F00;
63 .devtools-toolbar::before {
64 border-radius: 8px 0px 0px 8px;
66 border-inline-end: 3px solid black;
67 margin-inline-end: 2px;
70 .devtools-toolbar::after {
71 border-radius: 0px 8px 8px 0px;
73 border-inline-start: 3px solid black;
74 margin-inline-start: 2px;
77 .devtools-toolbar > .toolbar-group:nth-of-type(1) {
79 * We want this to be exactly at a `--sidebar-width` distance from the
80 * toolbar's start boundary. We want the end border to be after the sidebar,
81 * and the startcap has to be subtracted.
83 flex: 0 0 calc(var(--sidebar-width) - 2px - 15px);
84 border-inline-end: 3px solid var(--theme-toolbar-background);
85 margin-inline-end: 5px;
89 .devtools-toolbar > .toolbar-group {
91 * Flex: contains several children, which need to be laid out horizontally,
92 * and aligned vertically in the middle of the container.
99 text-overflow: ellipsis;
103 .devtools-toolbar > .toolbar-group > label {
105 * Flex: contains form controls and text, which need to be laid out
106 * horizontally, vertically aligned in the middle of the container.
110 margin-inline-end: 5px;
111 color: var(--theme-button-color);
114 .devtools-toolbar > .toolbar-group > label.display-by > span {
115 margin-inline-end: 5px;
118 .devtools-toolbar > .toolbar-group > label.label-by > span {
119 margin-inline-end: 5px;
122 .devtools-toolbar > label {
123 margin-inline-end: 5px;
125 color: var(--theme-button-color);
129 margin-inline-start: 5px;
132 #take-snapshot::before {
133 background-image: url(images/command-screenshot.svg);
136 #clear-snapshots::before {
137 background-image: url(chrome://devtools/skin/images/clear.svg);
140 #diff-snapshots::before {
141 background-image: url(chrome://devtools/skin/images/diff.svg);
144 #import-snapshot::before {
145 background-image: url(chrome://devtools/skin/images/import.svg);
148 #record-allocation-stacks-label,
149 #pop-view-button-label {
150 border-inline-end: 1px solid var(--theme-splitter-color);
151 padding-inline-end: 5px;
156 * Due to toolbar styles of `.devtools-toolbarbutton:not([label])` which overrides
157 * .devtools-toolbarbutton's min-width of 78px, reset the min-width.
161 -moz-box-align: center;
179 * Container (sidebar + main panel)
182 #memory-tool-container {
184 * Flex: contains two children: .list (sidebar) and #heap-view (main panel),
185 * which need to be laid out horizontally. The sidebar has a fixed width and
186 * the main panel needs to flex to fill out all remaining horizontal space.
190 * Flexing to fill out remaining vertical space. The preceeding sibling is
191 * the toolbar. @see #memory-tool.
202 width: var(--sidebar-width);
203 min-width: var(--sidebar-width);
207 background-color: var(--theme-sidebar-background);
208 border-inline-end: 1px solid var(--theme-splitter-color);
211 .snapshot-list-item {
213 * Flex: contains several children, which need to be laid out vertically.
216 flex-direction: column;
217 color: var(--theme-body-color);
218 border-bottom: 1px solid #A09090;
223 .snapshot-list-item.selected {
224 background-color: var(--theme-selection-background);
225 color: var(--theme-selection-color);
228 .snapshot-list-item.selected ::-moz-selection {
229 background-color: var(--theme-selection-color);
230 color: var(--theme-selection-background);
233 .snapshot-list-item .snapshot-info {
235 justify-content: space-between;
239 .snapshot-list-item .snapshot-title {
241 justify-content: space-between;
244 .snapshot-list-item .save {
245 text-decoration: underline;
249 .snapshot-list-item .delete {
256 .theme-light .snapshot-list-item.selected .delete {
257 /* filter: invert(100%);*/
260 .snapshot-list-item .delete::before {
261 background-image: url("chrome://devtools/skin/images/close.svg");
262 background-position: 0.2em 0;
265 .snapshot-list-item > .snapshot-title {
269 .snapshot-list-item > .snapshot-title > input[type=checkbox] {
271 margin-inline-end: 5px;
274 .snapshot-list-item > .snapshot-state,
275 .snapshot-list-item > .snapshot-totals {
277 color: var(--theme-body-color-alt);
280 .snapshot-list-item.selected > .snapshot-state,
281 .snapshot-list-item.selected > .snapshot-totals {
282 /* Text inside a selected item should not be custom colored. */
283 color: inherit !important;
292 flex-direction: column;
304 * By default, flex items have min-width: auto;
305 * (https://drafts.csswg.org/css-flexbox/#min-size-auto)
312 * Flex: contains a .heap-view-panel which needs to fill out all the
313 * available space, horizontally and vertically.
317 * Flexing to fill out remaining horizontal space. The preceeding sibling
318 * is the sidebar. @see #memory-tool-container.
321 background-color: var(--theme-body-background);
324 * By default, flex items have min-width: auto;
325 * (https://drafts.csswg.org/css-flexbox/#min-size-auto)
331 #heap-view > .heap-view-panel {
333 * Flex: can contain several children, including a tree with a header and
334 * multiple rows, all of which need to be laid out vertically. When the
335 * tree is visible, the header has a fixed height and tree body needs to flex
336 * to fill out all remaining vertical space.
339 flex-direction: column;
341 * Flexing to fill out remaining horizontal space. @see #heap-view.
346 * By default, flex items have min-width: auto;
347 * (https://drafts.csswg.org/css-flexbox/#min-size-auto)
352 #heap-view > .heap-view-panel > .snapshot-status,
353 #heap-view > .heap-view-panel > .take-snapshot,
355 #shortest-paths-select-node-msg {
361 #heap-view > .heap-view-panel > .take-snapshot {
365 #heap-view > .heap-view-panel[data-state="snapshot-state-error"] pre {
366 background-color: var(--theme-body-background);
372 * Heap tree view header
377 * Flex: contains several span columns, all of which need to be laid out
378 * horizontally. All columns except the last one have percentage widths, and
379 * the last one needs to flex to fill out all remaining horizontal space.
382 color: var(--theme-body-color);
383 background-color: var(--theme-tab-toolbar-background);
384 border-bottom: 1px solid var(--cell-border-color);
389 #shortest-paths-header {
390 text-overflow: ellipsis;
391 line-height: var(--heap-tree-header-height);
392 justify-content: center;
393 justify-self: center;
401 .header > .heap-tree-item-name {
402 justify-content: flex-start;
406 background-color: var(--theme-body-background);
412 #shortest-paths-select-node-msg {
413 justify-self: center;
417 * Heap tree view body
422 * Flexing to fill out remaining vertical space. @see .heap-view-panel
426 background-color: var(--theme-body-background);
430 height: var(--heap-tree-row-height);
431 line-height: var(--heap-tree-row-height);
436 padding-inline-end: 5px;
440 * Heap tree view columns
445 * Flex: contains several span columns, all of which need to be laid out
446 * horizontally. All columns except the last one have percentage widths, and
447 * the last one needs to flex to fill out all remaining horizontal space.
453 background-color: var(--row-alt-background-color);
457 background-color: var(--row-hover-background-color);
460 .heap-tree-item.focused {
461 background-color: var(--theme-selection-background);
462 color: var(--theme-selection-color);
465 .heap-tree-item.focused ::-moz-selection {
466 background-color: var(--theme-selection-color);
467 color: var(--theme-selection-background);
470 .heap-tree-item-individuals,
471 .heap-tree-item-bytes,
472 .heap-tree-item-count,
473 .heap-tree-item-total-bytes,
474 .heap-tree-item-total-count {
476 * Flex: contains several subcolumns, which need to be laid out horizontally.
477 * These subcolumns may have specific widths or need to flex.
481 border-inline-end: var(--cell-border-color) 1px solid;
484 .heap-tree-item-count,
485 .heap-tree-item-total-count,
486 .heap-tree-item-bytes,
487 .heap-tree-item-total-bytes {
490 * Provision for up to 19 characters:
492 * GG_MMM_KKK_BBB_100%
494 * '------------'|'--'
495 * 14 ch for 10s | 4 ch for the largest % we will
496 * of GB and | normally see: "100%"
500 * A space between the number and percent
505 .heap-tree-item-name {
507 * Flex: contains an .arrow and some text, which need to be laid out
508 * horizontally, vertically aligned in the middle of the container.
513 * Flexing to fill out remaining vertical space.
514 * @see .header and .heap-tree-item */
516 padding-inline-start: 5px;
520 * Heap tree view subcolumns
525 .heap-tree-item-name {
530 padding-inline-start: 3px;
534 padding-inline-start: 3px;
535 padding-inline-end: 3px;
540 font-family: var(--monospace-font-family);
545 color: var(--theme-content-color3);
552 .heap-tree-item.focused .heap-tree-number,
553 .heap-tree-item.focused .heap-tree-percent {
557 .heap-tree-item-individuals {
564 .heap-tree-item-individuals > button {
568 /* Override default styles for toolbar buttons to fix entire row height. */
569 margin: 0 auto !important;
577 .tree-map-container {
590 display: inline-block;
594 background-image: url(chrome://devtools/skin/images/webconsole.svg);
595 background-size: 72px 60px;
596 background-position: -24px -24px;
597 background-repeat: no-repeat;
600 margin-inline-end: 5px;
603 .theme-light .error::before {
604 background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
608 * Frame View components
613 .heap-tree-item-address {
619 .heap-tree-item-address {
620 font-family: monospace;
623 .no-allocation-stacks {
624 border-color: var(--theme-splitter-color);
626 border-width: 0px 0px 1px 0px;
640 .theme-dark .edgePath path {
641 stroke: var(--theme-body-color-alt);
643 .theme-light .edgePath path {
644 stroke: var(--theme-splitter-color);
648 fill: var(--theme-body-background);
651 fill: var(--theme-body-color-alt);
659 stroke: var(--theme-tab-toolbar-background);
662 fill: var(--theme-tab-toolbar-background);
665 fill: var(--theme-toolbar-background);
670 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
675 fill: var(--theme-body-color-alt);
680 /* Hide the actual checkbox */
681 input[type="checkbox"] {
684 pointer-events: none;
688 /* Create a box to style as the checkbox */
689 input[type="checkbox"] + span::before {
690 display: inline-block;
692 vertical-align: -3px;
695 input[type="checkbox"] + span {
699 input[type="checkbox"] + span::before {
700 -moz-appearance: none;
704 border: 1px solid var(--theme-body-color);
705 margin-inline-end: 10px;
706 background-color: var(--theme-toolbar-background);
707 background-position: center center;
708 background-repeat: no-repeat;
711 input[type="checkbox"]:not(:disabled) + span:hover::before {
712 border-color: var(--theme-hover-background);
714 input[type="checkbox"]:not(:disabled) + span:hover {
715 color: var(--theme-hover-background);
717 input[type="checkbox"]:checked + span::before {
718 background-image: url("chrome://global/skin/in-content/check.svg#check");
721 input[type="checkbox"]:checked:disabled + span::before {
722 background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
724 input[type="checkbox"]:checked:not(:disabled) + span:hover::before {
725 background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
727 input[type="checkbox"]:disabled + span::before {
728 border-color: var(--theme-body-color-inactive);
730 input[type="checkbox"]:disabled + span {
731 color: var(--theme-body-color-inactive);
735 border: 1px solid var(--theme-body-color);
736 background-color: var(--theme-toolbar-background);
737 color: var(--theme-body-color);
738 background-image: url("chrome://global/skin/arrow/arrow-down.gif");
739 background-repeat: no-repeat;
740 background-position: calc(100% - 2px) center;
747 background-color: var(--theme-hover-background);
748 color: var(--theme-hover-color);
749 background-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
751 select:hover:active {
752 background-color: var(--theme-active-background);
753 color: var(--theme-active-color);