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;
439 .children-pointer:dir(rtl) {
440 transform: scaleX(-1);
444 * Heap tree view columns
449 * Flex: contains several span columns, all of which need to be laid out
450 * horizontally. All columns except the last one have percentage widths, and
451 * the last one needs to flex to fill out all remaining horizontal space.
457 background-color: var(--row-alt-background-color);
461 background-color: var(--row-hover-background-color);
464 .heap-tree-item.focused {
465 background-color: var(--theme-selection-background);
466 color: var(--theme-selection-color);
469 .heap-tree-item.focused ::-moz-selection {
470 background-color: var(--theme-selection-color);
471 color: var(--theme-selection-background);
474 .heap-tree-item-individuals,
475 .heap-tree-item-bytes,
476 .heap-tree-item-count,
477 .heap-tree-item-total-bytes,
478 .heap-tree-item-total-count {
480 * Flex: contains several subcolumns, which need to be laid out horizontally.
481 * These subcolumns may have specific widths or need to flex.
484 /* Make sure units/decimals/... are always vertically aligned to right in both LTR and RTL locales */
486 border-inline-end: var(--cell-border-color) 1px solid;
489 .heap-tree-item-count,
490 .heap-tree-item-total-count,
491 .heap-tree-item-bytes,
492 .heap-tree-item-total-bytes {
495 * Provision for up to 19 characters:
497 * GG_MMM_KKK_BBB_100%
499 * '------------'|'--'
500 * 14 ch for 10s | 4 ch for the largest % we will
501 * of GB and | normally see: "100%"
505 * A space between the number and percent
510 .heap-tree-item-name {
512 * Flex: contains an .arrow and some text, which need to be laid out
513 * horizontally, vertically aligned in the middle of the container.
518 * Flexing to fill out remaining vertical space.
519 * @see .header and .heap-tree-item */
521 padding-inline-start: 5px;
525 * Heap tree view subcolumns
530 .heap-tree-item-name {
537 color: var(--theme-content-color3);
538 /* Make sure number doesn't appear backwards on RTL locales */
543 padding-inline-start: 3px;
544 padding-inline-end: 3px;
549 font-family: var(--monospace-font-family);
556 .heap-tree-item.focused .heap-tree-number,
557 .heap-tree-item.focused .heap-tree-percent {
561 .heap-tree-item-individuals {
568 .heap-tree-item-individuals > button {
572 /* Override default styles for toolbar buttons to fix entire row height. */
573 margin: 0 auto !important;
581 .tree-map-container {
594 display: inline-block;
598 background-image: url(chrome://devtools/skin/images/webconsole.svg);
599 background-size: 72px 60px;
600 background-position: -24px -24px;
601 background-repeat: no-repeat;
604 margin-inline-end: 5px;
607 .theme-light .error::before {
608 background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
612 * Frame View components
617 .heap-tree-item-address {
623 .heap-tree-item-address {
624 font-family: monospace;
627 .no-allocation-stacks {
628 border-color: var(--theme-splitter-color);
630 border-width: 0px 0px 1px 0px;
644 .theme-dark .edgePath path {
645 stroke: var(--theme-body-color-alt);
647 .theme-light .edgePath path {
648 stroke: var(--theme-splitter-color);
652 fill: var(--theme-body-background);
655 fill: var(--theme-body-color-alt);
663 stroke: var(--theme-tab-toolbar-background);
666 fill: var(--theme-tab-toolbar-background);
669 fill: var(--theme-toolbar-background);
674 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
679 fill: var(--theme-body-color-alt);
684 /* Hide the actual checkbox */
685 input[type="checkbox"] {
688 pointer-events: none;
692 /* Create a box to style as the checkbox */
693 input[type="checkbox"] + span::before {
694 display: inline-block;
696 vertical-align: -3px;
699 input[type="checkbox"] + span {
703 input[type="checkbox"] + span::before {
704 -moz-appearance: none;
708 border: 1px solid var(--theme-body-color);
709 margin-inline-end: 10px;
710 background-color: var(--theme-toolbar-background);
711 background-position: center center;
712 background-repeat: no-repeat;
715 input[type="checkbox"]:not(:disabled) + span:hover::before {
716 border-color: var(--theme-hover-background);
718 input[type="checkbox"]:not(:disabled) + span:hover {
719 color: var(--theme-hover-background);
721 input[type="checkbox"]:checked + span::before {
722 background-image: url("chrome://global/skin/in-content/check.svg#check");
725 input[type="checkbox"]:checked:disabled + span::before {
726 background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
728 input[type="checkbox"]:checked:not(:disabled) + span:hover::before {
729 background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
731 input[type="checkbox"]:disabled + span::before {
732 border-color: var(--theme-body-color-inactive);
734 input[type="checkbox"]:disabled + span {
735 color: var(--theme-body-color-inactive);
739 border: 1px solid var(--theme-body-color);
740 background-color: var(--theme-toolbar-background);
741 color: var(--theme-body-color);
742 background-image: url("chrome://global/skin/arrow/arrow-down.gif");
743 background-repeat: no-repeat;
744 background-position: calc(100% - 2px) center;
751 background-color: var(--theme-hover-background);
752 color: var(--theme-hover-color);
753 background-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
755 select:hover:active {
756 background-color: var(--theme-active-background);
757 color: var(--theme-active-color);