summaryrefslogtreecommitdiffstats
path: root/devtools/client/themes/memory.css
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/themes/memory.css')
-rw-r--r--devtools/client/themes/memory.css637
1 files changed, 637 insertions, 0 deletions
diff --git a/devtools/client/themes/memory.css b/devtools/client/themes/memory.css
new file mode 100644
index 000000000..f77609621
--- /dev/null
+++ b/devtools/client/themes/memory.css
@@ -0,0 +1,637 @@
+/* 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 {
+ --cell-border-color: rgba(255,255,255,0.15);
+ --cell-border-color-light: rgba(255,255,255,0.1);
+ --focus-cell-border-color: rgba(255,255,255,0.5);
+ --row-alt-background-color: rgba(86, 117, 185, 0.15);
+ --row-hover-background-color: rgba(86, 117, 185, 0.25);
+}
+
+.theme-light {
+ --cell-border-color: rgba(0,0,0,0.15);
+ --cell-border-color-light: rgba(0,0,0,0.1);
+ --focus-cell-border-color: rgba(0,0,0,0.3);
+ --row-alt-background-color: rgba(76,158,217,0.1);
+ --row-hover-background-color: rgba(76,158,217,0.2);
+}
+
+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: 18px;
+ --heap-tree-header-height: 18px;
+}
+
+/**
+ * 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);
+}
+
+#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;
+}
+
+.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 rgba(128,128,128,0.15);
+ 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;
+}
+
+.snapshot-list-item.selected .delete::before {
+ filter: invert(1);
+}
+
+.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
+ */
+
+svg {
+ --arrow-color: var(--theme-splitter-color);
+ --text-color: var(--theme-body-color-alt);
+}
+
+.theme-dark svg {
+ --arrow-color: var(--theme-body-color-alt);
+}
+
+svg #arrowhead {
+ /* !important is needed to override inline style */
+ fill: var(--arrow-color) !important;
+}
+
+.edgePath path {
+ stroke-width: 1px;
+ fill: none;
+ stroke: var(--arrow-color);
+}
+
+g.edgeLabel rect {
+ fill: var(--theme-body-background);
+}
+
+g.edgeLabel tspan {
+ fill: var(--text-color);
+}
+
+.nodes rect {
+ stroke-width: 1px;
+ stroke: var(--theme-splitter-color);
+ fill: var(--theme-toolbar-background);
+}
+
+text {
+ font-size: 1.25em;
+ fill: var(--text-color);
+ /* Make sure text stays inside its container in RTL locales */
+ direction: ltr;
+}