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 */
7 --cell-border-color: rgba
(255,255,255,0.15);
8 --row-alt-background-color: rgba
(86, 117, 185, 0.15);
9 --row-hover-background-color: rgba
(86, 117, 185, 0.25);
10 --link-color: var
(--blue-40
);
11 --link-color-active: var
(--blue-30
);
15 --cell-border-color: rgba
(0,0,0,0.15);
16 --row-alt-background-color: rgba
(76,158,217,0.1);
17 --row-hover-background-color: rgba
(76,158,217,0.2);
18 --link-color: var
(--theme-link-color
);
19 --link-color-active: var
(--blue-70
);
22 html
, body
, #app
, #memory-tool
{
28 * Flex: contains two children: .devtools-toolbar and #memory-tool-container,
29 * which need to be laid out vertically. The toolbar has a fixed height and
30 * the container needs to flex to fill out all remaining vertical space.
33 flex-direction: column
;
34 --sidebar-width: 185px;
36 * If --heap-tree-row-height changes, be sure to change HEAP_TREE_ROW_HEIGHT
37 * in `devtools/client/memory/components/Heap.js`.
39 --heap-tree-row-height: 18px;
40 --heap-tree-header-height: 18px;
49 * Flex: contains several children, which need to be laid out horizontally,
50 * and aligned vertically in the middle of the container.
57 .devtools-toolbar > .toolbar-group:nth-of-type(1) {
59 * We want this to be exactly at a `--sidebar-width` distance from the
60 * toolbar's start boundary. A `.devtools-toolbar` has a 3px start padding.
62 flex: 0 0 calc
(var
(--sidebar-width
) - 4px);
63 border-inline-end: 1px solid var
(--theme-splitter-color
);
64 margin-inline-end: 5px;
68 .devtools-toolbar > .toolbar-group {
70 * Flex: contains several children, which need to be laid out horizontally,
71 * and aligned vertically in the middle of the container.
78 text-overflow: ellipsis
;
81 .devtools-toolbar > .toolbar-group > label {
83 * Flex: contains form controls and text, which need to be laid out
84 * horizontally, vertically aligned in the middle of the container.
88 margin-inline-end: 5px;
91 .devtools-toolbar > label {
92 margin-inline-end: 5px;
97 .devtools-toolbar > .toolbar-text {
102 .devtools-toolbar-select {
103 margin-inline-start: 5px;
106 #take-snapshot::before
{
107 background-image: url
(images
/command-screenshot
.svg
);
110 #clear-snapshots::before
{
111 background-image: url
(chrome://devtools
/skin
/images
/clear
.svg
);
114 #diff-snapshots::before
{
115 background-image: url
(chrome://devtools
/skin
/images
/diff
.svg
);
118 #import-snapshot::before
{
119 background-image: url
(chrome://devtools
/skin
/images
/import
.svg
);
122 #record-allocation-stacks-label,
123 #pop-view-button-label {
124 border-inline-end: 1px solid var
(--theme-splitter-color
);
125 padding-inline-end: 5px;
133 box-sizing: border-box
;
138 * Container (sidebar + main panel)
141 #memory-tool-container {
143 * Flex: contains two children: .list (sidebar) and #heap-view (main panel),
144 * which need to be laid out horizontally. The sidebar has a fixed width and
145 * the main panel needs to flex to fill out all remaining horizontal space.
149 * Flexing to fill out remaining vertical space. The preceeding sibling is
150 * the toolbar. @see #memory-tool.
161 width: var
(--sidebar-width
);
162 min-width: var
(--sidebar-width
);
166 background-color: var
(--theme-sidebar-background
);
167 border-inline-end: 1px solid var
(--theme-splitter-color
);
170 .snapshot-list-item {
172 * Flex: contains several children, which need to be laid out vertically.
175 flex-direction: column
;
176 color: var
(--theme-body-color
);
177 border-bottom: 1px solid var
(--theme-splitter-color
);
182 .snapshot-list-item.selected {
183 background-color: var
(--theme-selection-background
);
184 color: var
(--theme-selection-color
);
187 .snapshot-list-item.selected ::-moz-selection {
188 background-color: var
(--theme-selection-color
);
189 color: var
(--theme-selection-background
);
192 .snapshot-list-item .snapshot-info {
194 justify-content: space-between
;
198 .snapshot-list-item .snapshot-title {
200 justify-content: space-between
;
203 .snapshot-list-item .save {
204 text-decoration: underline
;
208 .snapshot-list-item .delete {
210 background-color: transparent
;
219 .snapshot-list-item .delete::before {
224 background-image: url
("chrome://devtools/skin/images/close.svg");
225 background-repeat: no-repeat
;
226 -moz-context-properties: fill
;
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-text-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
[data-state
="snapshot-state-error"] pre
{
327 background-color: var
(--theme-body-background
);
333 * Heap tree view header
338 * Flex: contains several span columns, all of which need to be laid out
339 * horizontally. All columns except the last one have percentage widths, and
340 * the last one needs to flex to fill out all remaining horizontal space.
343 color: var
(--theme-body-color
);
344 background-color: var
(--theme-tab-toolbar-background
);
345 border-bottom: 1px solid var
(--cell-border-color
);
350 #shortest-paths-header {
351 text-overflow: ellipsis
;
352 line-height: var
(--heap-tree-header-height
);
353 justify-content: center
;
354 justify-self: center
;
362 .header > .heap-tree-item-name {
363 justify-content: flex-start
;
367 background-color: var
(--theme-body-background
);
373 #shortest-paths-select-node-msg {
374 justify-self: center
;
378 * Heap tree view body
383 * Flexing to fill out remaining vertical space. @see .heap-view-panel
387 background-color: var
(--theme-body-background
);
391 height: var
(--heap-tree-row-height
);
392 line-height: var
(--heap-tree-row-height
);
397 display: inline-block
;
398 /* We use transform to reverse the icon in RTL,
399 * so `padding-right` will get reversed as well. */
403 .children-pointer:dir(rtl) {
404 transform: scaleX
(-1);
408 * Heap tree view columns
413 * Flex: contains several span columns, all of which need to be laid out
414 * horizontally. All columns except the last one have percentage widths, and
415 * the last one needs to flex to fill out all remaining horizontal space.
421 background-color: var
(--row-alt-background-color
);
425 background-color: var
(--row-hover-background-color
);
428 .heap-tree-item.focused {
429 background-color: var
(--theme-selection-background
);
430 color: var
(--theme-selection-color
);
433 .heap-tree-item.focused ::-moz-selection {
434 background-color: var
(--theme-selection-color
);
435 color: var
(--theme-selection-background
);
438 .heap-tree-item-individuals
,
439 .heap-tree-item-bytes
,
440 .heap-tree-item-count
,
441 .heap-tree-item-total-bytes
,
442 .heap-tree-item-total-count {
444 * Flex: contains several subcolumns, which need to be laid out horizontally.
445 * These subcolumns may have specific widths or need to flex.
448 /* Make sure units/decimals/... are always vertically aligned to right in both LTR and RTL locales */
450 border-inline-end: var
(--cell-border-color
) 1px solid
;
453 .heap-tree-item-count
,
454 .heap-tree-item-total-count
,
455 .heap-tree-item-bytes
,
456 .heap-tree-item-total-bytes {
459 * Provision for up to 19 characters:
461 * GG_MMM_KKK_BBB_100%
463 * '------------'|'--'
464 * 14 ch for 10s | 4 ch for the largest % we will
465 * of GB and | normally see: "100%"
469 * A space between the number and percent
474 .heap-tree-item-name {
476 * Flexing to fill out remaining vertical space.
477 * @see .header and .heap-tree-item */
479 padding-inline-start: 5px;
481 text-overflow: ellipsis
;
484 .heap-tree-item-name .arrow {
485 display: inline-block
;
486 vertical-align: middle
;
490 * Heap tree view subcolumns
495 .heap-tree-item-name {
502 color: var
(--theme-text-color-alt
);
503 /* Make sure number doesn't appear backwards on RTL locales */
508 padding-inline-start: 3px;
509 padding-inline-end: 3px;
514 font-family: var
(--monospace-font-family
);
521 .heap-tree-item
.focused
.heap-tree-number
,
522 .heap-tree-item.focused .heap-tree-percent {
526 .heap-tree-item-individuals {
532 .heap-tree-item-individuals > button {
534 /* Override default styles for toolbar buttons to fix entire row height. */
535 margin: 0 auto
!important
;
543 .tree-map-container {
552 color: var
(--link-color
);
555 .load-more-link:hover {
556 text-decoration: underline
;
559 .load-more-link:active {
560 color: var
(--link-color-active
);
569 display: inline-block
;
570 vertical-align: -2px;
574 margin-inline-end: 5px;
575 background-image: url
(chrome://devtools
/skin
/images
/alert-small
.svg
);
576 background-repeat: no-repeat
;
577 background-size: contain
;
578 -moz-context-properties: fill
;
579 fill: var
(--yellow-60
);
583 * Frame View components
588 .heap-tree-item-address {
594 .heap-tree-item-address {
595 font-family: monospace
;
598 .no-allocation-stacks {
599 border-color: var
(--theme-splitter-color
);
601 border-width: 0px 0px 1px 0px;
611 --arrow-color: var
(--theme-splitter-color
);
612 --text-color: var
(--theme-body-color
);
616 --arrow-color: var
(--theme-text-color-alt
);
620 /* !important is needed to override inline style */
621 fill: var
(--arrow-color
) !important
;
627 stroke: var
(--arrow-color
);
631 fill: var
(--theme-body-background
);
635 fill: var
(--text-color
);
640 stroke: var
(--theme-splitter-color
);
641 fill: var
(--theme-toolbar-background
);
646 fill: var
(--text-color
);
647 /* Make sure text stays inside its container in RTL locales */