+++ /dev/null
-/* 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;
- background-size: calc(100% - 30px);
- background-image: linear-gradient(90deg,#9C9CFF,#9C9CFF);
- background-repeat: no-repeat;
- background-position: center center;
-}
-
-.devtools-toolbar::before,
-.devtools-toolbar::after {
- display: flex;
- content: "";
- width: 12px;
- min-height: 16px;
- height: 100%;
- background-color: #FF9F00;
-}
-
-.devtools-toolbar::before {
- border-radius: 8px 0px 0px 8px;
- border: none;
- border-inline-end: 3px solid black;
- margin-inline-end: 2px;
-}
-
-.devtools-toolbar::after {
- border-radius: 0px 8px 8px 0px;
- border: none;
- border-inline-start: 3px solid black;
- margin-inline-start: 2px;
-}
-
-.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. We want the end border to be after the sidebar,
- * and the startcap has to be subtracted.
- */
- flex: 0 0 calc(var(--sidebar-width) - 2px - 15px);
- border-inline-end: 3px solid var(--theme-toolbar-background);
- 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;
- height: 100%;
-}
-
-.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;
- color: var(--theme-button-color);
-}
-
-.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;
- flex: 1;
- color: var(--theme-button-color);
-}
-
-#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);
-}
-
-#import-snapshot::before {
- background-image: url(chrome://devtools/skin/images/import.svg);
-}
-
-#record-allocation-stacks-label,
-#pop-view-button-label {
- border-inline-end: 1px solid var(--theme-splitter-color);
- padding-inline-end: 5px;
- flex: none;
-}
-
-/**
- * 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; */
- font: inherit;
-}
-
-/**
- * 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 .snapshot-title {
- display: flex;
- justify-content: space-between;
-}
-
-.snapshot-list-item .save {
- text-decoration: underline;
- cursor: pointer;
-}
-
-.snapshot-list-item .delete {
- cursor: pointer;
- position: relative;
- min-height: 1em;
- min-width: 1.3em;
-}
-
-.theme-light .snapshot-list-item.selected .delete {
-/* filter: invert(100%);*/
-}
-
-.snapshot-list-item .delete::before {
- background-image: url("chrome://devtools/skin/images/close.svg");
- background-position: 0.2em 0;
-}
-
-.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;
-}
-
-.children-pointer:dir(rtl) {
- transform: scaleX(-1);
-}
-
-/**
- * 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-individuals,
-.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;
- /* Make sure units/decimals/... are always vertically aligned to right in both LTR and RTL locales */
- text-align: right;
- 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: 0 3px;
- flex: 1;
- color: var(--theme-content-color3);
- /* Make sure number doesn't appear backwards on RTL locales */
- direction: ltr;
-}
-
-.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-percent {
- width: 4ch;
-}
-
-.heap-tree-item.focused .heap-tree-number,
-.heap-tree-item.focused .heap-tree-percent {
- color: inherit;
-}
-
-.heap-tree-item-individuals {
- width: 38px;
- min-width: 20px;
- overflow: hidden;
- margin: 0;
-}
-
-.heap-tree-item-individuals > button {
- height: 10px;
- width: 32px;
-
- /* Override default styles for toolbar buttons to fix entire row height. */
- margin: 0 auto !important;
- padding: 0;
-}
-
-/**
- * Tree map
- */
-
-.tree-map-container {
- width: 100%;
- height: 100%;
- position: relative;
- overflow: hidden;
-}
-
-/**
- * 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;
-}
-
-.heap-tree-item-address {
- font-family: monospace;
-}
-
-.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);
-}
-
-
-
-/* Hide the actual checkbox */
-input[type="checkbox"] {
- opacity: 0;
- width: 0;
- pointer-events: none;
- position: absolute;
-}
-
-/* Create a box to style as the checkbox */
-input[type="checkbox"] + span::before {
- display: inline-block;
- content: "";
- vertical-align: -3px;
-}
-
-input[type="checkbox"] + span {
- line-height: 0px;
-}
-
-input[type="checkbox"] + span::before {
- -moz-appearance: none;
- width: 1em;
- height: 1em;
- border-radius: 0;
- border: 1px solid var(--theme-body-color);
- margin-inline-end: 10px;
- background-color: var(--theme-toolbar-background);
- background-position: center center;
- background-repeat: no-repeat;
-}
-
-input[type="checkbox"]:not(:disabled) + span:hover::before {
- border-color: var(--theme-hover-background);
-}
-input[type="checkbox"]:not(:disabled) + span:hover {
- color: var(--theme-hover-background);
-}
-input[type="checkbox"]:checked + span::before {
- background-image: url("chrome://global/skin/in-content/check.svg#check");
-}
-
-input[type="checkbox"]:checked:disabled + span::before {
- background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
-}
-input[type="checkbox"]:checked:not(:disabled) + span:hover::before {
- background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
-}
-input[type="checkbox"]:disabled + span::before {
- border-color: var(--theme-body-color-inactive);
-}
-input[type="checkbox"]:disabled + span {
- color: var(--theme-body-color-inactive);
-}
-
-select {
- border: 1px solid var(--theme-body-color);
- background-color: var(--theme-toolbar-background);
- color: var(--theme-body-color);
- background-image: url("chrome://global/skin/arrow/arrow-down.gif");
- background-repeat: no-repeat;
- background-position: calc(100% - 2px) center;
- border-radius: 3px;
- padding: 1px;
- margin: 1px;
- font: inherit;
-}
-select:hover {
- background-color: var(--theme-hover-background);
- color: var(--theme-hover-color);
- background-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
-}
-select:hover:active {
- background-color: var(--theme-active-background);
- color: var(--theme-active-color);
-}