gecko-dev/devtools/client/themes/memory.css

/* 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(29,79,115,0.15);
  --row-hover-background-color: rgba(29,79,115,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, .theme-body, #app, #memory-tool, #memory-tool-container {
  height: 100%;
}

.theme-body {
  overflow: hidden;
  /* Not sure why .theme-body declares it as `background` and overrides */
  background-color: var(--theme-toolbar-background) !important;
}

#memory-tool-container {
  display: flex;
  flex-direction: row;
  --toolbar-height: 20px;
  /**
   * 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;
}

/**
 * TODO bug 1213100
 * should generalize toolbar buttons with images in them
 * toolbars.inc.css contains definitions for .devtools-button,
 * I wager that many of the below styles can be rolled into that
 */
.devtools-toolbar .devtools-button.take-snapshot {
  margin: 2px 1px;
  padding: 1px;
  border-width: 0px;
  /* [standalone] buttons override min-height from 18px to 24px -- why? */
  min-height: 18px;
  /* not sure why this is needed for positioning */
  display: -moz-box;
}

.devtools-toolbar .devtools-button.take-snapshot::before {
  background-image: url(images/command-screenshot.png);
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  background-size: 64px 16px;
  background-position: 0 center;
  background-repeat: no-repeat;
}
@media (min-resolution: 1.1dppx) {
  .devtools-toolbar .devtools-button.take-snapshot::before {
    background-image: url(images/command-screenshot@2x.png);
  }
}

/**
 * TODO bug 1213100
 * Should this be codified in .devtools-toolbar itself?
 */
#memory-tool .devtools-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: var(--toolbar-height);
}

/**
 * TODO bug 1213100
 * Once we figure out how to store invertable buttons (pseudo element like in this case?)
 * we should add a .invertable class to handle this generally, rather than the definitions
 * in toolbars.inc.css.
 *
 * @see bug 1173397 for another inverted related bug
 */
.theme-light .devtools-toolbarbutton.take-snapshot::before {
  filter: url(images/filters.svg#invert);
}

/**
 * TODO bug 1213100
 * The .list style is for a generalized React list component. It's children (.list > li)
 * are generally styled here, as the component can take any type of child component.
 * Memory tool specific styling are handling in (li.snapshot-list-item).
 */

.list {
  margin: 0;
  padding: 0;
  width: 186px;
  list-style-type: none;
  font-size: 12px;
  height: 100%;
  overflow-y: scroll;
  background-color: var(--theme-toolbar-background);
  color: var(--theme-body-color-alt);
  border-color: var(--theme-splitter-color);
  border-style: solid;
  border-width: 0px 1px 0px 0px;
}

.list > li {
  height: 40px;
  color: var(--theme-body-color);
  border-bottom: 1px solid rgba(128,128,128,0.15);
  padding: 8px;
  cursor: pointer;
}

.list > li.selected {
  background-color: var(--theme-selection-background);
  color: var(--theme-selection-color);
}

.snapshot-list-item span {
  display: block;
}

.snapshot-list-item .snapshot-state {
  font-size: 90%;
  color: var(--theme-body-color-alt);
}

.snapshot-list-item.selected .snapshot-state {
  /* Text inside a selected item should not be custom colored. */
  color: inherit !important;
}

/**
 * Main panel
 */

#heap-view {
  flex: 1 1 auto;
  border-color: var(--theme-splitter-color);
  color: var(--theme-body-color);
  border-left-width: 1px;
}

#heap-view .heap-view-panel {
  width: 100%;
  height: 100%;
  background-color: var(--theme-toolbar-background)
}

#heap-view .heap-view-panel .snapshot-status, #heap-view .take-snapshot {
  font-size: 120%;
  display: block;
  margin: 65px auto;
}

#heap-view .heap-view-panel .snapshot-status {
  width: 500px;
  text-align: center;
}

#heap-view .take-snapshot {
  padding: 5px;
}

#heap-view .heap-view-panel[data-state="snapshot-state-error"] pre {
  background-color: var(--theme-body-background);
  overflow-y: scroll;
  height: 100px;
  margin: 20px;
  padding: 20px;
}

/**
 * Heap Tree View
 */

#heap-view .theme-twisty {
  float: left;
}

.tree {
  height: 100%;
  overflow-y: scroll;
  background-color: var(--theme-body-background);
}

.tree .header {
  height: 17px;
  overflow: hidden;
  color: var(--theme-body-color);
  background-color: var(--theme-tab-toolbar-background);
}

.tree span {
  border-left-color: var(--cell-border-color);
  border-left-width: 1px;
}

.tree-node {
  height: var(--heap-tree-row-height);
}

.heap-tree-item, .header {
  list-style-type: none;
  height: var(--heap-tree-row-height);
}

.heap-tree-item span, .header span {
  float: left;
}

.tree-node:nth-child(2n) {
  background-color: var(--row-alt-background-color);
}

.tree-node:hover {
  background-color: var(--row-hover-background-color);
}

.tree-node:focus, .heap-tree-item.focused {
  background-color: var(--theme-selection-background);
  color: var(--theme-selection-color);
}

.header {
  background-color: var(--theme-tab-toolbar-background);
}

.header span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  font-size: 90%;
}

.heap-tree-item-bytes,
.heap-tree-item-count,
.heap-tree-item-total-bytes,
.heap-tree-item-total-count {
  text-align: right;
  border-right: var(--cell-border-color) 1px solid;
  padding-right: 5px;
}

.heap-tree-item-count,
.heap-tree-item-total-count {
  width: 5vw;
}

.heap-tree-item-bytes,
.heap-tree-item-total-bytes {
  width: 7vw;
}

.heap-tree-item-name {
  padding-left: 10px;
}

.error::before {
  content: "";
  background-image: url(chrome://devtools/skin/themes/images/webconsole.svg);
  background-repeat: no-repeat;
  background-size: 72px 60px;
  width: 12px;
  height: 12px;
  display: inline-block;

  background-position: -24px -24px;
  margin: 2px 5px 0 0;
  max-height: 12px;
}
.theme-light .error::before {
  background-image: url(chrome://devtools/skin/themes/images/webconsole.svg#light-icons);
}