X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdevtools%2Fmemory.css;fp=LCARStrek%2Fbrowser%2Fdevtools%2Fmemory.css;h=0000000000000000000000000000000000000000;hp=25fd76c2a3bf0e47797181eb3ec76b83f64a1a26;hb=dc9d5d64a3f915cb832f43050545b432f33504f7;hpb=ecfc58b0361c617fa298d4b1bb69ea2484d37de2 diff --git a/LCARStrek/browser/devtools/memory.css b/LCARStrek/browser/devtools/memory.css deleted file mode 100644 index 25fd76c2..00000000 --- a/LCARStrek/browser/devtools/memory.css +++ /dev/null @@ -1,578 +0,0 @@ -/* 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); -}