X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Fmemory.css;fp=LCARStrek%2Fdevtools%2Fmemory.css;h=25fd76c2a3bf0e47797181eb3ec76b83f64a1a26;hp=0000000000000000000000000000000000000000;hb=dc9d5d64a3f915cb832f43050545b432f33504f7;hpb=ecfc58b0361c617fa298d4b1bb69ea2484d37de2

diff --git a/LCARStrek/devtools/memory.css b/LCARStrek/devtools/memory.css
new file mode 100644
index 00000000..25fd76c2
--- /dev/null
+++ b/LCARStrek/devtools/memory.css
@@ -0,0 +1,578 @@
+/* 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);
+}