Adding upstream version 110.0.1.upstream/110.0.1upstream

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

1 files changed, 435 insertions, 0 deletions

diff --git a/browser/components/screenshots/overlay/overlay.css b/browser/components/screenshots/overlay/overlay.css
new file mode 100644
index 0000000000..0c03e18ce7
--- /dev/null
+++ b/browser/components/screenshots/overlay/overlay.css
@@ -0,0 +1,435 @@
+/* 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/. */
+
+:-moz-native-anonymous #screenshots-component {
+  width: 100%;
+  height: 100%;
+  overflow: clip;
+  user-select: none;
+  pointer-events: auto;
+  touch-action: none;
+}
+
+/**
+ * Overlay content is position: fixed as we need to allow for the possiblily
+ * of the document scrolling or changing size while the overlay is visible
+ */
+:-moz-native-anonymous #screenshots-overlay-container {
+  /*
+  Content CSS applying to the html element can impact the overlay.
+  To avoid that, possible cases have been set to initial.
+  */
+  text-transform: initial;
+  text-indent: initial;
+  letter-spacing: initial;
+  word-spacing: initial;
+  color: initial;
+  direction: initial;
+  writing-mode: initial;
+  z-index: 1;
+  position: absolute;
+  pointer-events: auto;
+  cursor: crosshair;
+}
+
+:-moz-native-anonymous #preview-container {
+  background-color: rgba(0, 0, 0, 0.7);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+:-moz-native-anonymous #selection-container {
+  overflow: clip;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+:-moz-native-anonymous #screenshots-overlay-container[hidden] {
+  display: none;
+}
+
+:-moz-native-anonymous #screenshots-overlay-container[dragging] {
+  cursor: grabbing;
+}
+
+:-moz-native-anonymous #screenshots-cancel-button {
+  background-color: transparent;
+  width: fit-content;
+  cursor: pointer;
+  outline: none;
+  border-radius: 3px;
+  border: 1px #9b9b9b solid;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
+  font-size: 16px;
+  margin-top: 40px;
+  padding: 10px 25px;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  :-moz-native-anonymous #screenshots-cancel-button {
+    border-color: ButtonBorder;
+  }
+}
+
+:-moz-native-anonymous .screenshots-button {
+  cursor: pointer;
+  appearance: none;
+  pointer-events: auto;
+  background-color: #f9f9fa;
+  color: #38383d;
+  border: 0;
+  border-radius: 3px;
+  font-size: 16px;
+  font-weight: 400;
+  height: 40px;
+  min-width: 40px;
+  outline: none;
+  padding: 0 10px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: background 150ms cubic-bezier(0.07, 0.95, 0, 1), border 150ms cubic-bezier(0.07, 0.95, 0, 1);
+  user-select: none;
+  white-space: nowrap;
+  margin: 0 5px;
+  box-shadow: 0 0 0 1px rgba(12, 12, 13, 0.1), 0 2px 8px rgba(12, 12, 13, 0.1);
+  z-index: 6;
+}
+
+:-moz-native-anonymous .screenshots-button:hover,
+:-moz-native-anonymous #download:hover {
+  background-color: #52525e;
+  color: #fff;
+}
+
+:-moz-native-anonymous .screenshots-button:hover > img {
+  fill: #fff;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  :-moz-native-anonymous .screenshots-button {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  :-moz-native-anonymous .screenshots-button:hover {
+    background-color: ButtonText;
+    color: ButtonFace;
+  }
+}
+
+:-moz-native-anonymous button img {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+:-moz-native-anonymous #buttons {
+  position: absolute;
+  margin: 10px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:-moz-native-anonymous #cancel {
+  width: 40px;
+}
+
+:-moz-native-anonymous #cancel > img {
+  color: #38383d;
+  content: url('chrome://browser/content/screenshots/cancel.svg');
+  width: 20px;
+  height: 20px;
+  padding: 10px 0;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  :-moz-native-anonymous #cancel > img {
+    color: ButtonText;
+  }
+
+  :-moz-native-anonymous #cancel:hover > img {
+    color: ButtonFace;
+  }
+}
+
+:-moz-native-anonymous #copy > img {
+  color: #38383d;
+  content: url('chrome://browser/content/screenshots/copy.svg');
+  width: 16px;
+  height: 16px;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  :-moz-native-anonymous #copy > img {
+    color: ButtonText;
+  }
+
+  :-moz-native-anonymous #copy:hover > img {
+    color: ButtonFace;
+  }
+}
+
+:-moz-native-anonymous #download {
+  background-color: #0a84ff;
+  color: #fff;
+}
+
+:-moz-native-anonymous #download > img {
+  content: url('chrome://browser/content/screenshots/download.svg');
+  width: 16px;
+  height: 16px;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  :-moz-native-anonymous #download {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  :-moz-native-anonymous #download:hover {
+    background-color: ButtonText;
+    color: ButtonFace;
+  }
+}
+
+:-moz-native-anonymous .fixed-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: center;
+  inset-inline-start: 0;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+:-moz-native-anonymous .face-container {
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+
+:-moz-native-anonymous .face {
+  width: 62px;
+  height: 62px;
+  display: block;
+  background-image: url("chrome://browser/content/screenshots/icon-welcome-face-without-eyes.svg");
+}
+
+:-moz-native-anonymous .eye {
+  background-color: #fff;
+  width: 10px;
+  height: 14px;
+  position: absolute;
+  border-radius: 100%;
+  overflow: hidden;
+  inset-inline-start: 16px;
+  top: 19px;
+}
+
+:-moz-native-anonymous .eyeball {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background-color: #000;
+  border-radius: 50%;
+  inset-inline-start: 2px;
+  top: 4px;
+  z-index: 10;
+}
+
+:-moz-native-anonymous .left {
+  margin-inline-start: 0;
+}
+
+:-moz-native-anonymous .right {
+  margin-inline-start: 20px;
+}
+
+:-moz-native-anonymous .preview-instructions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: pulse 125mm cubic-bezier(0.07, 0.95, 0, 1);
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
+  font-size: 24px;
+  line-height: 32px;
+  text-align: center;
+  padding-top: 20px;
+  width: 400px;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  :-moz-native-anonymous .preview-instructions {
+    color: CanvasText;
+  }
+}
+
+:-moz-native-anonymous #hover-highlight {
+  animation: fade-in 125ms forwards cubic-bezier(0.07, 0.95, 0, 1);
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 1px;
+  pointer-events: none;
+  position: absolute;
+  z-index: 11;
+}
+
+:-moz-native-anonymous #hover-highlight::before {
+  border: 2px dashed rgba(255, 255, 255, 0.4);
+  bottom: 0;
+  content: "";
+  inset-inline-start: 0;
+  position: absolute;
+  inset-inline-end: 0;
+  top: 0;
+}
+
+:-moz-native-anonymous .bghighlight {
+  background-color: rgba(0, 0, 0, 0.7);
+  position: absolute;
+  overflow: clip;
+}
+
+:-moz-native-anonymous .highlight {
+  border-radius: 1px;
+  border: 2px dashed rgba(255, 255, 255, 0.8);
+  box-sizing: border-box;
+  cursor: move;
+  position: absolute;
+  pointer-events: auto;
+  z-index: 2;
+}
+
+:-moz-native-anonymous .mover-target {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 5;
+  pointer-events: auto;
+}
+
+:-moz-native-anonymous .mover-target.direction-topLeft {
+  cursor: nwse-resize;
+  height: 60px;
+  left: -30px;
+  top: -30px;
+  width: 60px;
+}
+
+:-moz-native-anonymous .mover-target.direction-top {
+  cursor: ns-resize;
+  height: 60px;
+  inset-inline-start: 0;
+  top: -30px;
+  width: 100%;
+  z-index: 4;
+}
+
+:-moz-native-anonymous .mover-target.direction-topRight {
+  cursor: nesw-resize;
+  height: 60px;
+  right: -30px;
+  top: -30px;
+  width: 60px;
+}
+
+:-moz-native-anonymous .mover-target.direction-left {
+  cursor: ew-resize;
+  height: 100%;
+  left: -30px;
+  top: 0;
+  width: 60px;
+  z-index: 4;
+}
+
+:-moz-native-anonymous .mover-target.direction-right {
+  cursor: ew-resize;
+  height: 100%;
+  right: -30px;
+  top: 0;
+  width: 60px;
+  z-index: 4;
+}
+
+:-moz-native-anonymous .mover-target.direction-bottomLeft {
+  bottom: -30px;
+  cursor: nesw-resize;
+  height: 60px;
+  left: -30px;
+  width: 60px;
+}
+
+:-moz-native-anonymous .mover-target.direction-bottom {
+  bottom: -30px;
+  cursor: ns-resize;
+  height: 60px;
+  inset-inline-start: 0;
+  width: 100%;
+  z-index: 4;
+}
+
+:-moz-native-anonymous .mover-target.direction-bottomRight {
+  bottom: -30px;
+  cursor: nwse-resize;
+  height: 60px;
+  right: -30px;
+  width: 60px;
+}
+
+:-moz-native-anonymous .mover-target:hover .mover {
+  transform: scale(1.05);
+}
+
+:-moz-native-anonymous .mover {
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+  height: 16px;
+  opacity: 1;
+  position: relative;
+  transition: transform 125ms cubic-bezier(0.07, 0.95, 0, 1);
+  width: 16px;
+}
+
+:-moz-native-anonymous .small-selection .mover {
+  height: 10px;
+  width: 10px;
+}
+
+:-moz-native-anonymous .direction-topLeft .mover,
+:-moz-native-anonymous .direction-left .mover,
+:-moz-native-anonymous .direction-bottomLeft .mover {
+  left: -1px;
+}
+
+:-moz-native-anonymous .direction-topLeft .mover,
+:-moz-native-anonymous .direction-top .mover,
+:-moz-native-anonymous .direction-topRight .mover {
+  top: -1px;
+}
+
+:-moz-native-anonymous .direction-topRight .mover,
+:-moz-native-anonymous .direction-right .mover,
+:-moz-native-anonymous .direction-bottomRight .mover {
+  right: -1px;
+}
+
+:-moz-native-anonymous .direction-bottomRight .mover,
+:-moz-native-anonymous .direction-bottom .mover,
+:-moz-native-anonymous .direction-bottomLeft .mover {
+  bottom: -1px;
+}