1 files changed, 223 insertions, 0 deletions
diff --git a/toolkit/components/aboutperformance/content/aboutPerformance.css b/toolkit/components/aboutperformance/content/aboutPerformance.css
new file mode 100644
index 0000000000..6b65e13c78
--- /dev/null
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.css
@@ -0,0 +1,223 @@
+/* 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 {
+  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: 24px;
+  padding: 2px 4px;
+}
+
+/* Show action icons on selected or hovered rows */
+tr:is([selected], :hover) > td > .action-icon {
+  opacity: 1;
+}
+
+.action-icon {
+  opacity: 0;
+  display: flex;
+  align-items: center;
+}
+.action-icon::before {
+  content: "";
+  display: inline-block;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px;
+  border-radius: 4px;
+}
+.action-icon:hover::before {
+  background-color: color-mix(in srgb, currentColor 15%, transparent);
+}
+.action-icon:hover:active::before {
+  background-color: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+/* icons */
+
+.addon-icon::before {
+  background-image: url("chrome://global/skin/icons/shortcut.svg");
+}
+.addon-icon:dir(rtl)::before {
+  transform: scaleX(-1);
+}
+.close-icon::before {
+  background-image: url("chrome://global/skin/icons/close.svg");
+}
+
+#dispatch-thead > tr {
+  height: inherit;
+}
+
+#dispatch-thead > tr > td {
+  border: none;
+}
+#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;
+  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/arrow-right-12.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 {
+  content: url("chrome://global/skin/icons/arrow-left-12.svg");
+}
+.twisty.open::before {
+  content: url("chrome://global/skin/icons/arrow-down-12.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://global/skin/icons/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:hover {
+  background-color: var(--in-content-item-hover);
+  color: var(--in-content-item-hover-text);
+}
+#dispatch-tbody > tr[selected] {
+  background-color: var(--in-content-item-selected);
+  color: var(--in-content-item-selected-text);
+}
+
+.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-down-12.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+#dispatch-thead > tr > td.clickable:hover {
+  background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
+}
+#dispatch-thead > tr > td.clickable:hover:active {
+  background-color: var(--in-content-button-background-active);
+  color: var(--in-content-button-text-color-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%));
+}