gecko-dev/toolkit/components/aboutperformance/content/aboutPerformance.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/. */

@import url("chrome://global/skin/in-content/common.css");

html {
  background-color: var(--in-content-page-background);
}
body {
  overflow-x: hidden;
}
#dispatch-table {
  -moz-user-select: none;
  font-size: 1em;
  border-spacing: 0;
  background-color: var(--in-content-box-background);
  margin: 0;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  min-width: 40em;
}

/* Avoid scrolling the header */
#dispatch-tbody {
  display: block;
  margin-top: 2em;
}
#dispatch-thead {
  position: fixed;
  z-index: 1;
  height: 2em;
  border-bottom: 1px solid var(--in-content-border-color);
  min-width: 40em;
  background-color: var(--in-content-box-background);
}
tr {
  display: table;
  table-layout: fixed;
  width: 100%;
}
td:nth-child(2) {
  width: 8em;
}
td:nth-child(3) {
  width: 12em;
}
td:nth-child(4) {
  width: 5em;
}
#dispatch-tbody td:nth-child(4) {
  text-align: end;
}
td:nth-child(5) {
  width: 20px;
}

/* Show action icons on selected or hovered rows */
tr:-moz-any([selected], :hover) > td > .action-icon {
  padding: 1px 10px;
  opacity: 1;
}
/* The action icons have a relative position, so that we can use
 * absolutely positioned ::before and ::after pseudo elements.
 * ::before is used to display the square background on hover/active
 * ::after is used to display the icons as a background that can be
 * flipped using a CSS transform in RTL mode. */
.action-icon {
  position: relative;
  opacity: 0;
}
/* Ensure both pseudo elements have the same size and position. */
.action-icon::before, .action-icon::after {
  height: 200%;
  position: absolute;
  top: -50%;
  inset-inline-start: -3px;
  padding-inline: 13px;
}

/* square background */
.action-icon::before {
  content: "";
  background-color: currentColor;
  opacity: 0;
}
.action-icon:hover::before {
  opacity: 0.1;
}
.action-icon:hover:active::before {
  opacity: 0.2;
}

/* icons */
.action-icon::after {
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 0;
  background-repeat: no-repeat;
  background-position: center;
  line-height: 100%;
}
.addon-icon::after {
  content: url("chrome://global/skin/icons/shortcut.svg");
  top: 2px;
  inset-inline-start: -11px;
  width: 16px;
}
.addon-icon:dir(rtl)::after {
  transform: scaleX(-1);
}
.close-icon::after {
  content: url("chrome://global/skin/icons/close.svg");
  height: 100%;
  top: 0;
  inset-inline-start: -13px;
  transform: scale(1.2);
}

#dispatch-thead > tr {
  height: inherit;
}

#dispatch-thead > tr > td {
  border: none;
  background-color: var(--in-content-button-background);
}
#dispatch-thead > tr > td:not(:first-child) {
  border-inline-start-width: 1px;
  border-inline-start-style: solid;
  border-image: linear-gradient(transparent 0%, transparent 20%, var(--in-content-box-border-color) 20%, var(--in-content-box-border-color) 80%, transparent 80%, transparent 100%) 1 1;
  border-bottom: 1px solid var(--in-content-border-color);
}
td {
  padding: 5px 10px;
  min-height: 2em;
  color: var(--in-content-text-color);
  max-width: 70vw;
  overflow: hidden;
  white-space: nowrap;
}
#dispatch-tbody > tr > td:first-child {
  text-overflow: ellipsis;
  padding-inline-start: 32px;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position-y: center;
  -moz-context-properties: fill;
  fill: currentColor;
}
#dispatch-tbody > tr > td.root {
  background-position-x: left 36px;
  padding-inline-start: 62px;
}
#dispatch-tbody > tr > td.root:dir(rtl) {
  background-position-x: right 36px;
}
.twisty {
  margin-inline: -62px 26px;
  padding-inline: 18px;
  position: relative;
}
/* Putting the background image in a positioned pseudo element lets us
 * use CSS transforms on the background image, which we need for rtl. */
.twisty::before {
  content: url("chrome://global/skin/icons/twisty-collapsed.svg");
  position: absolute;
  display: block;
  line-height: 50%;
  top: 4px; /* Half the image's height */
  width: 100%;
  inset-inline-start: 0;
  text-align: center;
  -moz-context-properties: fill;
  fill: currentColor;
}
.twisty:dir(rtl)::before {
  transform: scaleX(-1);
}
.twisty.open::before {
  content: url("chrome://global/skin/icons/twisty-expanded.svg");
}
#dispatch-tbody > tr > td.indent {
  padding-inline-start: 88px;
  background-position-x: left 62px;
}
#dispatch-tbody > tr > td.indent:dir(rtl) {
  background-position-x: right 62px;
}
#dispatch-tbody > tr > td.tracker {
  background-image: url("chrome://browser/skin/controlcenter/trackers.svg");
  -moz-context-properties: fill;
  fill: rgb(224, 41, 29);
}
#dispatch-tbody > tr > td.worker {
  background-image: url("chrome://devtools/skin/images/debugging-workers.svg");
  -moz-context-properties: fill;
  fill: #808080;
}

#dispatch-tbody > tr[selected] > td {
  background-color: var(--in-content-item-selected);
  color: var(--in-content-selected-text);
}
#dispatch-tbody > tr:hover {
  background-color: var(--in-content-item-hover);
}

.clickable {
  background-repeat: no-repeat;
  background-position: right 4px center;
}
.clickable:dir(rtl) {
  background-position-x: left 4px;
}
.asc {
  background-image: url(chrome://global/skin/icons/arrow-up-12.svg);
  -moz-context-properties: fill;
  fill: currentColor;
}
.desc {
  background-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
  -moz-context-properties: fill;
  fill: currentColor;
}
#dispatch-thead > tr > td.clickable:hover {
  background-color: var(--in-content-button-background-hover);
}
#dispatch-thead > tr > td.clickable:active {
  background-color: var(--in-content-button-background-active);
}

.energy-impact {
  --bar-width: 0;
  background: linear-gradient(to right, var(--blue-40) calc(var(--bar-width) * 1%), transparent calc(var(--bar-width) * 1%));
}
.energy-impact:dir(rtl) {
  background: linear-gradient(to left, var(--blue-40) calc(var(--bar-width) * 1%), transparent calc(var(--bar-width) * 1%));
}