Adding upstream version 86.0.1.upstream/86.0.1upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 237 insertions, 0 deletions

diff --git a/toolkit/components/aboutprocesses/content/aboutProcesses.css b/toolkit/components/aboutprocesses/content/aboutProcesses.css
new file mode 100644
index 0000000000..4cc1083857
--- /dev/null
+++ b/toolkit/components/aboutprocesses/content/aboutProcesses.css
@@ -0,0 +1,237 @@
+/* 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;
+}
+
+#process-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 */
+#process-tbody {
+  display: block;
+  margin-top: 2em;
+}
+#process-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%;
+}
+
+/* At least one column needs to have a flexible width,
+   so no width specified for td:nth-child(1) aka column-name*/
+
+/* column-memory-resident */
+td:nth-child(2) {
+  width: 15%;
+}
+#process-tbody td:nth-child(2) {
+  text-align: end;
+}
+
+/* column-cpu-total */
+td:nth-child(3) {
+  width: 15%;
+}
+#process-tbody td:nth-child(3) {
+  text-align: end;
+}
+
+/* column-action-icon */
+td:nth-child(4) {
+  width: 16px;
+  text-align: center;
+}
+
+#process-thead > tr {
+  height: inherit;
+}
+
+#process-thead > tr > td {
+  border: none;
+  background-color: var(--in-content-button-background);
+}
+#process-thead > tr > td:not(:first-child) {
+  border-inline-start: 1px 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: 16px;
+  max-height: 16px;
+  color: var(--in-content-text-color);
+  max-width: 70vw;
+  overflow: hidden;
+  white-space: nowrap;
+}
+td.type, td.favicon {
+  background-repeat: no-repeat;
+  background-origin: border-box;
+  background-size: 16px 16px;
+  background-position: 11px center;
+  padding-inline-start: 38px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+td.type:dir(rtl), td.favicon:dir(rtl) {
+  background-position-x: right 11px;
+}
+#process-tbody > tr > td:first-child {
+  text-overflow: ellipsis;
+}
+.twisty {
+  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 */
+  inset-inline-start: -16px;
+  width: 100%;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+.twisty:dir(rtl)::before {
+  content: url("chrome://global/skin/icons/twisty-collapsed-rtl.svg");
+}
+.twisty.open::before {
+  content: url("chrome://global/skin/icons/twisty-expanded.svg");
+}
+#process-tbody > tr > td.indent {
+  padding-inline: 48px 0;
+}
+#process-tbody > tr > td.double_indent {
+  padding-inline: 58px 0;
+}
+
+#process-tbody > tr[selected] > td {
+  background-color: var(--in-content-item-selected);
+  color: var(--in-content-selected-text);
+}
+#process-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,
+.desc {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+/*
+  Linux has conventions opposite to Windows, macOS on the direction of arrows
+  when sorting.
+*/
+%ifdef XP_LINUX
+.asc {
+  background-image: url(chrome://global/skin/icons/arrow-up-12.svg);
+}
+.desc {
+  background-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
+}
+%else
+.asc {
+  background-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
+}
+.desc {
+  background-image: url(chrome://global/skin/icons/arrow-up-12.svg);
+}
+%endif
+
+#process-thead > tr > td.clickable:hover {
+  background-color: var(--in-content-button-background-hover);
+}
+#process-thead > tr > td.clickable:hover:active {
+  background-color: var(--in-content-button-background-active);
+}
+
+#process-tbody > tr.process > td.type {
+  font-weight: bold;
+}
+#process-tbody > tr.thread {
+  font-size-adjust: 0.5;
+}
+
+.killing {
+  opacity: 0.3;
+  transition-property: opacity;
+  transition-duration: 1s;
+}
+
+.killed {
+  opacity: 0.3;
+}
+
+/* icons */
+.close-icon {
+  background: url("chrome://global/skin/icons/close.svg") no-repeat center;
+  opacity: 0;      /* Start out as transparent */
+  fill-opacity: 0; /* Make SVG background transparent */
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+}
+
+tr:is([selected], :hover):not(.killing) > .close-icon {
+  opacity: 1;
+}
+
+.close-icon:hover {
+  background-color: var(--in-content-button-background-hover);
+}
+
+.close-icon:hover:active {
+  background-color: var(--in-content-button-background-active);
+}
+
+/* column-name */
+
+/* When the process is reported as frozen, we display an hourglass before its name. */
+.process.hung > :first-child > :not(.twisty)::before {
+  content: "⌛️";
+}
+
+/*
+  Show a separation between process groups.
+ */
+
+#process-tbody > tr.separate-from-previous-process-group {
+  border-top: dotted 1px var(--in-content-box-border-color);
+  margin-top: -1px;
+}