/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ /* CSS Variables specific to this panel that aren't defined by the themes */ .theme-dark, .theme-light { --cell-border-color: #9C9CFF; --cell-border-color-light: #A09090; --focus-cell-border-color: #9C9CFF; --row-alt-background-color: #402000; --row-hover-background-color: #603000; } html, body, #app, #memory-tool { height: 100%; } #memory-tool { /** * Flex: contains two children: .devtools-toolbar and #memory-tool-container, * which need to be laid out vertically. The toolbar has a fixed height and * the container needs to flex to fill out all remaining vertical space. */ display: flex; flex-direction: column; --sidebar-width: 185px; /** * If --heap-tree-row-height changes, be sure to change HEAP_TREE_ROW_HEIGHT * in `devtools/client/memory/components/heap.js`. */ --heap-tree-row-height: 14px; --heap-tree-header-height: 17px; } /** * Toolbar */ .devtools-toolbar { /** * Flex: contains several children, which need to be laid out horizontally, * and aligned vertically in the middle of the container. */ display: flex; align-items: center; } .devtools-toolbar > .toolbar-group:nth-of-type(1) { /** * We want this to be exactly at a `--sidebar-width` distance from the * toolbar's start boundary. A `.devtools-toolbar` has a 3px start padding. */ flex: 0 0 calc(var(--sidebar-width) - 4px); border-inline-end: 1px solid var(--theme-splitter-color); margin-inline-end: 5px; padding-right: 1px; } .devtools-toolbar > .toolbar-group { /** * Flex: contains several children, which need to be laid out horizontally, * and aligned vertically in the middle of the container. */ display: flex; align-items: center; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .devtools-toolbar > .toolbar-group > label { /** * Flex: contains form controls and text, which need to be laid out * horizontally, vertically aligned in the middle of the container. */ display: flex; align-items: center; margin-inline-end: 5px; } .devtools-toolbar > .toolbar-group > label.display-by > span { margin-inline-end: 5px; } .devtools-toolbar > .toolbar-group > label.label-by > span { margin-inline-end: 5px; } .devtools-toolbar > label { margin-inline-end: 5px; } #select-view { margin-inline-start: 5px; } #take-snapshot::before { background-image: url(images/command-screenshot.svg); } #clear-snapshots::before { background-image: url(chrome://devtools/skin/images/clear.svg); } #diff-snapshots::before { background-image: url(chrome://devtools/skin/images/diff.svg); } /** * Due to toolbar styles of `.devtools-toolbarbutton:not([label])` which overrides * .devtools-toolbarbutton's min-width of 78px, reset the min-width. */ #import-snapshot, #clear-snapshots { -moz-box-align: center; flex-grow: 1; padding: 1px; margin: 2px 1px; min-width: unset; } .spacer { flex: 1; } #filter { align-self: stretch; margin: 2px; } /** * Container (sidebar + main panel) */ #memory-tool-container { /** * Flex: contains two children: .list (sidebar) and #heap-view (main panel), * which need to be laid out horizontally. The sidebar has a fixed width and * the main panel needs to flex to fill out all remaining horizontal space. */ display: flex; /** * Flexing to fill out remaining vertical space. The preceeding sibling is * the toolbar. @see #memory-tool. */ flex: 1; overflow: hidden; } /** * Sidebar */ .list { width: var(--sidebar-width); min-width: var(--sidebar-width); overflow-y: auto; margin: 0; padding: 0; background-color: var(--theme-sidebar-background); border-inline-end: 1px solid var(--theme-splitter-color); } .snapshot-list-item { /** * Flex: contains several children, which need to be laid out vertically. */ display: flex; flex-direction: column; color: var(--theme-body-color); border-bottom: 1px solid #A09090; padding: 8px; cursor: default; } .snapshot-list-item.selected { background-color: var(--theme-selection-background); color: var(--theme-selection-color); } .snapshot-list-item.selected ::-moz-selection { background-color: var(--theme-selection-color); color: var(--theme-selection-background); } .snapshot-list-item .snapshot-info { display: flex; justify-content: space-between; font-size: 90%; } .snapshot-list-item .save { text-decoration: underline; cursor: pointer; } .snapshot-list-item > .snapshot-title { margin-bottom: 14px; } .snapshot-list-item > .snapshot-title > input[type=checkbox] { margin: 0; margin-inline-end: 5px; } .snapshot-list-item > .snapshot-state, .snapshot-list-item > .snapshot-totals { font-size: 90%; color: var(--theme-body-color-alt); } .snapshot-list-item.selected > .snapshot-state, .snapshot-list-item.selected > .snapshot-totals { /* Text inside a selected item should not be custom colored. */ color: inherit !important; } /** * Main panel */ .vbox { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: auto; padding: 0; margin: 0; } .vbox > * { flex: 1; /** * By default, flex items have min-width: auto; * (https://drafts.csswg.org/css-flexbox/#min-size-auto) */ min-width: 0; } #heap-view { /** * Flex: contains a .heap-view-panel which needs to fill out all the * available space, horizontally and vertically. */; display: flex; /** * Flexing to fill out remaining horizontal space. The preceeding sibling * is the sidebar. @see #memory-tool-container. */ flex: 1; background-color: var(--theme-body-background); /** * By default, flex items have min-width: auto; * (https://drafts.csswg.org/css-flexbox/#min-size-auto) */ min-width: 0; font-size: 90%; } #heap-view > .heap-view-panel { /** * Flex: can contain several children, including a tree with a header and * multiple rows, all of which need to be laid out vertically. When the * tree is visible, the header has a fixed height and tree body needs to flex * to fill out all remaining vertical space. */ display: flex; flex-direction: column; /** * Flexing to fill out remaining horizontal space. @see #heap-view. */ flex: 1; /** * By default, flex items have min-width: auto; * (https://drafts.csswg.org/css-flexbox/#min-size-auto) */ min-width: 0; } #heap-view > .heap-view-panel > .snapshot-status, #heap-view > .heap-view-panel > .take-snapshot, #heap-view .empty, #shortest-paths-select-node-msg { margin: auto; margin-top: 65px; font-size: 120%; } #heap-view > .heap-view-panel > .take-snapshot { padding: 5px; } #heap-view > .heap-view-panel[data-state="snapshot-state-error"] pre { background-color: var(--theme-body-background); margin: 20px; padding: 20px; } /** * Heap tree view header */ .header { /** * Flex: contains several span columns, all of which need to be laid out * horizontally. All columns except the last one have percentage widths, and * the last one needs to flex to fill out all remaining horizontal space. */ display: flex; color: var(--theme-body-color); background-color: var(--theme-tab-toolbar-background); border-bottom: 1px solid var(--cell-border-color); flex: 0; } .header > span, #shortest-paths-header { text-overflow: ellipsis; line-height: var(--heap-tree-header-height); justify-content: center; justify-self: center; white-space: nowrap; } .header > span { overflow: hidden; } .header > .heap-tree-item-name { justify-content: flex-start; } #shortest-paths { background-color: var(--theme-body-background); overflow: hidden; height: 100%; width: 100%; } #shortest-paths-select-node-msg { justify-self: center; } /** * Heap tree view body */ .tree { /** * Flexing to fill out remaining vertical space. @see .heap-view-panel */ flex: 1; overflow-y: auto; background-color: var(--theme-body-background); } .tree-node { height: var(--heap-tree-row-height); line-height: var(--heap-tree-row-height); cursor: default; } .children-pointer { padding-inline-end: 5px; } /** * Heap tree view columns */ .heap-tree-item { /** * Flex: contains several span columns, all of which need to be laid out * horizontally. All columns except the last one have percentage widths, and * the last one needs to flex to fill out all remaining horizontal space. */ display: flex; } .tree-node-odd { background-color: var(--row-alt-background-color); } .tree-node:hover { background-color: var(--row-hover-background-color); } .heap-tree-item.focused { background-color: var(--theme-selection-background); color: var(--theme-selection-color); } .heap-tree-item.focused ::-moz-selection { background-color: var(--theme-selection-color); color: var(--theme-selection-background); } .heap-tree-item-bytes, .heap-tree-item-count, .heap-tree-item-total-bytes, .heap-tree-item-total-count { /** * Flex: contains several subcolumns, which need to be laid out horizontally. * These subcolumns may have specific widths or need to flex. */ display: flex; text-align: end; border-inline-end: var(--cell-border-color) 1px solid; } .heap-tree-item-count, .heap-tree-item-total-count, .heap-tree-item-bytes, .heap-tree-item-total-bytes { width: 10%; /* * Provision for up to 19 characters: * * GG_MMM_KKK_BBB_100% * | ||| | * '------------'|'--' * 14 ch for 10s | 4 ch for the largest % we will * of GB and | normally see: "100%" * spaces every | * 3 digits | * | * A space between the number and percent */ min-width: 19ch; } .heap-tree-item-name { /** * Flex: contains an .arrow and some text, which need to be laid out * horizontally, vertically aligned in the middle of the container. */ display: flex; align-items: center; /** * Flexing to fill out remaining vertical space. * @see .header and .heap-tree-item */ flex: 1; padding-inline-start: 5px; } /** * Heap tree view subcolumns */ .heap-tree-number, .heap-tree-percent, .heap-tree-item-name { white-space: nowrap; } .heap-tree-number { padding-inline-start: 3px; } .heap-tree-percent { padding-inline-start: 3px; padding-inline-end: 3px; } .heap-tree-number, .heap-tree-percent { font-family: var(--monospace-font-family); } .heap-tree-number { flex: 1; color: var(--theme-content-color3); } .heap-tree-percent { width: 4ch; } .heap-tree-item.focused .heap-tree-number, .heap-tree-item.focused .heap-tree-percent { color: inherit; } /** * Heap tree errors. */ .error::before { content: ""; display: inline-block; width: 12px; height: 12px; max-height: 12px; background-image: url(chrome://devtools/skin/images/webconsole.svg); background-size: 72px 60px; background-position: -24px -24px; background-repeat: no-repeat; margin: 0px; margin-top: 2px; margin-inline-end: 5px; } .theme-light .error::before { background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons); } /** * Frame View components */ .separator, .not-available, .heap-tree-item-address { opacity: .5; margin-left: .5em; margin-right: .5em; } .no-allocation-stacks { border-color: var(--theme-splitter-color); border-style: solid; border-width: 0px 0px 1px 0px; text-align: center; padding: 5px; } /** * Dagre-D3 graphs */ .edgePath path { stroke-width: 1px; fill: none; } .theme-dark .edgePath path { stroke: var(--theme-body-color-alt); } .theme-light .edgePath path { stroke: var(--theme-splitter-color); } g.edgeLabel rect { fill: var(--theme-body-background); } g.edgeLabel tspan { fill: var(--theme-body-color-alt); } .nodes rect { stroke-width: 1px; } .nodes rect { stroke: var(--theme-tab-toolbar-background); } .theme-light rect { fill: var(--theme-tab-toolbar-background); } .theme-dark rect { fill: var(--theme-toolbar-background); } text { font-weight: 300; font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; font-size: 14px; } text { fill: var(--theme-body-color-alt); }