gecko/browser/devtools/profiler/cleopatra/css/tree.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/. */

.treeViewContainer {
  -moz-user-select: none;
  user-select: none;
  cursor: default;
  line-height: 16px;
  height: 100%;
  outline: none; /* override the browser's focus styling */
  position: relative;
}

.treeHeader {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 16px;
  margin: 0;
  padding: 0;
}

.treeColumnHeader {
  position: absolute;
  display: block;
  background: linear-gradient(#FFF 45%, #EEE 60%);
  margin: 0;
  padding: 0;
  top: 0;
  height: 15px;
  line-height: 15px;
  border: 0 solid #CCC;
  border-bottom-width: 1px;
  text-indent: 5px;
}

.treeColumnHeader:not(:last-child) {
  border-right-width: 1px;
}

.treeColumnHeader0 {
  left: 0;
  width: 86px;
}

.treeColumnHeader1 {
  left: 99px;
  width: 35px;
}

.treeColumnHeader0,
.treeColumnHeader1 {
  text-align: right;
  padding-right: 12px;
}

.treeColumnHeader2 {
  left: 147px;
  right: 0;
}

.treeViewVerticalScrollbox {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
}

.treeViewNode,
.treeViewHorizontalScrollbox {
  display: block;
  margin: 0;
  padding: 0;
}

.treeViewNode {
  min-width: -moz-min-content;
  white-space: nowrap;
}

.treeViewHorizontalScrollbox {
  padding-left: 150px;
  overflow: hidden;
}

.treeViewVerticalScrollbox,
.treeViewHorizontalScrollbox {
  background: linear-gradient(white, white 50%, #F0F5FF 50%, #F0F5FF);
  background-size: 100px 32px;
}

.leftColumnBackground {
  background: linear-gradient(left, transparent, transparent 98px, #CCC 98px, #CCC 99px, transparent 99px),
    linear-gradient(white, white 50%, #F0F5FF 50%, #F0F5FF);
  background-size: auto, 100px 32px;
  position: absolute;
  top: 0;
  left: 0;
  width: 146px;
  min-height: 100%;
  border-right: 1px solid #CCC;
}

.sampleCount,
.samplePercentage,
.selfSampleCount {
  position: absolute;
  text-align: right;
}

.sampleCount {
  left: 2px;
  width: 50px;
}

.samplePercentage {
  left: 55px;
  width: 40px;
}

.selfSampleCount {
  left: 98px;
  width: 45px;
  padding-right: 2px;
  border: solid #CCC;
  border-width: 0 1px;
}

.libraryName {
  margin-left: 10px;
  color: #999;
}

.treeViewNode > .treeViewNodeList {
  margin-left: 1em;
}

.treeViewNode.collapsed > .treeViewNodeList {
  display: none;
}

.treeLine {
  /* extend the selection background almost infinitely to the left */
  margin-left: -10000px;
  padding-left: 10000px;
}

.treeLine.selected {
  color: black;
  background-color: -moz-dialog;
}

.treeLine.selected > .sampleCount {
  background-color: inherit;
  margin-left: -2px;
  padding-left: 2px;
  padding-right: 95px;
  margin-right: -95px;
}

.treeViewContainer:focus .treeLine.selected {
  color: highlighttext;
  background-color: highlight;
}

.treeViewContainer:focus .treeLine.selected > .libraryName {
  color: #CCC;
}

.expandCollapseButton,
.focusCallstackButton {
  background: none 0 0 no-repeat transparent;
  margin: 0;
  padding: 0;
  border: 0;
  width: 16px;
  height: 16px;
  overflow: hidden;
  vertical-align: top;
  color: transparent;
  font-size: 0;
}

.expandCollapseButton {
  background-image: url(../images/treetwisty.svg);
}

.focusCallstackButton {
  background-image: url(../images/circlearrow.svg);
  margin-left: 5px;
  visibility: hidden;
}

.expandCollapseButton:active:hover,
.focusCallstackButton:active:hover {
  background-position: -16px 0;
}

.treeViewNode.collapsed > .treeLine > .expandCollapseButton {
  background-position: 0 -16px;
}

.treeViewNode.collapsed > .treeLine > .expandCollapseButton:active:hover {
  background-position: -16px -16px;
}

.treeViewContainer:focus .treeLine.selected > .expandCollapseButton,
.treeViewContainer:focus .treeLine.selected > .focusCallstackButton {
  background-position: -32px 0;
}

.treeViewContainer:focus .treeViewNode.collapsed > .treeLine.selected > .expandCollapseButton {
  background-position: -32px -16px;
}

.treeViewContainer:focus .treeLine.selected > .expandCollapseButton:active:hover,
.treeViewContainer:focus .treeLine.selected > .focusCallstackButton:active:hover {
  background-position: -48px 0;
}

.treeViewContainer:focus .treeViewNode.collapsed > .treeLine.selected > .expandCollapseButton:active:hover {
  background-position: -48px -16px;
}

.treeViewNode.leaf > * > .expandCollapseButton {
  visibility: hidden;
}

.treeLine:hover > .focusCallstackButton {
  visibility: visible;
}