Adding upstream version 110.0.1.upstream/110.0.1upstream

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

11 files changed, 708 insertions, 0 deletions

diff --git a/browser/components/screenshots/content/cancel.svg b/browser/components/screenshots/content/cancel.svg
new file mode 100644
index 0000000000..0c176be25f
--- /dev/null
+++ b/browser/components/screenshots/content/cancel.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10.5 8.7L5.2 3.3c-.5-.5-1.3-.5-1.8 0s-.5 1.3 0 1.8l5.3 5.3-5.3 5.3c-.5.5-.5 1.3 0 1.8s1.3.5 1.8 0l5.3-5.3 5.3 5.3c.5.5 1.3.5 1.8 0s.5-1.3 0-1.8l-5.3-5.3 5.3-5.3c.5-.5.5-1.3 0-1.8s-1.3-.5-1.8 0l-5.3 5.4z" fill="context-fill #3e3d40"/></svg>
diff --git a/browser/components/screenshots/content/copied-notification.svg b/browser/components/screenshots/content/copied-notification.svg
new file mode 100644
index 0000000000..2310b41aef
--- /dev/null
+++ b/browser/components/screenshots/content/copied-notification.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="context-fill" d="M44.121 24.879l-9-9A3 3 0 0 0 33 15h-3v-3a3 3 0 0 0-.879-2.121l-9-9A3 3 0 0 0 18 0H9a6 6 0 0 0-6 6v21a6 6 0 0 0 6 6h9v9a6 6 0 0 0 6 6h15a6 6 0 0 0 6-6V27a3 3 0 0 0-.879-2.121zM37.758 27H33v-4.758zm-15-15H18V7.242zM18 21v6H9V6h6v7.5a1.5 1.5 0 0 0 1.5 1.5H24a6 6 0 0 0-6 6zm6 21V21h6v7.5a1.5 1.5 0 0 0 1.5 1.5H39v12z"/></svg>
\ No newline at end of file
diff --git a/browser/components/screenshots/content/copy.svg b/browser/components/screenshots/content/copy.svg
new file mode 100644
index 0000000000..3e3d49122c
--- /dev/null
+++ b/browser/components/screenshots/content/copy.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="context-fill #3e3d40" d="M14.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/></svg>
diff --git a/browser/components/screenshots/content/download-white.svg b/browser/components/screenshots/content/download-white.svg
new file mode 100644
index 0000000000..bb6a7de845
--- /dev/null
+++ b/browser/components/screenshots/content/download-white.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.1 12L4.9 7.9c-.5-.5-1.3-.5-1.8 0s-.5 1.3 0 1.8l6.2 6.2c.5.5 1.3.5 1.8 0l6.2-6.2c.5-.5.5-1.3 0-1.8s-1.3-.5-1.8 0L11.6 12V1.2C11.6.6 11 0 10.3 0c-.7 0-1.2.6-1.2 1.2V12zM4 20c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2h12.5c.7 0 1.2.6 1.2 1.2s-.5 1.2-1.2 1.2H4z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/browser/components/screenshots/content/download.svg b/browser/components/screenshots/content/download.svg
new file mode 100644
index 0000000000..a85f745937
--- /dev/null
+++ b/browser/components/screenshots/content/download.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.1 12L4.9 7.9c-.5-.5-1.3-.5-1.8 0s-.5 1.3 0 1.8l6.2 6.2c.5.5 1.3.5 1.8 0l6.2-6.2c.5-.5.5-1.3 0-1.8s-1.3-.5-1.8 0L11.6 12V1.2C11.6.6 11 0 10.3 0c-.7 0-1.2.6-1.2 1.2V12zM4 20c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2h12.5c.7 0 1.2.6 1.2 1.2s-.5 1.2-1.2 1.2H4z" fill="context-fill #3e3d40"/></svg>
diff --git a/browser/components/screenshots/content/icon-welcome-face-without-eyes.svg b/browser/components/screenshots/content/icon-welcome-face-without-eyes.svg
new file mode 100644
index 0000000000..138308af57
--- /dev/null
+++ b/browser/components/screenshots/content/icon-welcome-face-without-eyes.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#fff}</style><g id="Visual-design"><g id="_x31_.2-Div-selection" transform="translate(-575 -503)"><g id="Introduction" transform="translate(250 503)"><g id="icon-welcomeface" transform="translate(325)"><g id="Layer_1_1_"><path id="Shape" class="st0" d="M11.4.9v2.9h-6c-.9 0-1.5.8-1.5 1.5v6H.8V3.8C.8 2.1 2.2.7 3.9.7h7.6v.2h-.1z"/><path id="Shape_1_" class="st0" d="M63.2 11.4h-3.1v-6c0-.8-.6-1.5-1.5-1.5h-6v-3h7.6c1.7 0 3.1 1.4 3.1 3.1l-.1 7.4z"/><path id="Shape_2_" class="st0" d="M52.6 63.2v-3.1h6c.9 0 1.5-.6 1.5-1.5v-6h3.1v7.6c0 1.7-1.4 3.1-3.1 3.1l-7.5-.1z"/><path id="Shape_3_" class="st0" d="M.8 52.7h3.1v6c0 .9.6 1.5 1.5 1.5h6v3.1H3.8c-1.7 0-3.1-1.4-3.1-3.1l.1-7.5z"/><path id="Shape_6_" class="st0" d="M33.3 49.2H33c-4.6-.1-7.8-3.6-7.9-3.8-.6-.8-.6-2 .1-2.7.8-.8 1.9-.6 2.6.1 0 0 2.3 2.6 5.2 2.6 1.8 0 3.6-.9 5.2-2.6.8-.8 1.9-.8 2.7 0s.8 1.9 0 2.7c-2.2 2.4-4.9 3.7-7.6 3.7z"/></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/browser/components/screenshots/content/menu-fullpage.svg b/browser/components/screenshots/content/menu-fullpage.svg
new file mode 100644
index 0000000000..6552ef8cdd
--- /dev/null
+++ b/browser/components/screenshots/content/menu-fullpage.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 46"><path id="bg" d="M7 42h32V5.1H7z" fill="context-stroke #00fdff"/><g id="frame" transform="translate(0 6)"><path d="M40 5c.5 0 1 .4 1 1v24c0 .5-.5 1-1 1H6c-.6 0-1-.5-1-1V6c0-.6.4-1 1-1h34zM7 29h32V7H7v22z" fill="context-fill"/><path id="Fill-4" fill="context-fill" d="M7 7h32V5H7z"/><path id="Fill-6" fill="context-fill" d="M7 31h32v-2H7z"/></g><path id="dash" d="M38 11h1V9h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm-1 1h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-2-3H7v3h2v-1H8v-2zm-1-1h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1V9H7v2zm2-6H7v3h1V6h1V5zm1 1h2V5h-2v1zm3 0h2V5h-2v1zm3 0h2V5h-2v1zm3 0h2V5h-2v1zm3 0h2V5h-2v1zm3 0h2V5h-2v1zm3 0h2V5h-2v1zm3 0h2V5h-2v1zm3 0h2V5h-2v1zm5-1h-2v1h1v2h1V5z" fill="context-fill" opacity="0.5"/></svg>
\ No newline at end of file
diff --git a/browser/components/screenshots/content/menu-visible.svg b/browser/components/screenshots/content/menu-visible.svg
new file mode 100644
index 0000000000..98cb1bfd3e
--- /dev/null
+++ b/browser/components/screenshots/content/menu-visible.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 46"><path d="M5 12c0-.6.5-1 1-1h34c.6 0 1 .5 1 1v24c0 .6-.5 1-1 1H6c-.6 0-1-.5-1-1V12zm2 23V13h32v22H7z" fill="context-fill"/><path d="M7 35h32V13H7z" fill="context-stroke #00fdff"/><path id="dash" d="M38 19h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm-1 1h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-2-3H7v3h2v-1H8v-2zm-1-1h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm2-6H7v3h1v-2h1v-1zm1 1h2v-1h-2v1zm3 0h2v-1h-2v1zm3 0h2v-1h-2v1zm3 0h2v-1h-2v1zm3 0h2v-1h-2v1zm3 0h2v-1h-2v1zm3 0h2v-1h-2v1zm3 0h2v-1h-2v1zm3 0h2v-1h-2v1zm5-1h-2v1h1v2h1v-3z" fill="context-fill" opacity="0.5"/></svg>
\ No newline at end of file
diff --git a/browser/components/screenshots/content/screenshots.css b/browser/components/screenshots/content/screenshots.css
new file mode 100644
index 0000000000..48fe7c3038
--- /dev/null
+++ b/browser/components/screenshots/content/screenshots.css
@@ -0,0 +1,535 @@
+/* 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/. */
+
+html,
+body {
+  padding:  0;
+  margin:  0;
+  background-color: transparent;
+  height: 100vh;
+  width: 100vw;
+}
+
+.button,
+.preview-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 3px;
+  cursor: pointer;
+  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;
+}
+
+button img {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.button.hidden,
+.hidden.preview-button {
+  display: none;
+}
+
+.button.small,
+.small.preview-button {
+  height: 32px;
+  line-height: 32px;
+  padding: 0 8px;
+}
+
+.button.active,
+.active.preview-button {
+  background-color: #dedede;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  .button.active,
+  .active.preview-button {
+    background-color: ButtonFace;
+  }
+}
+
+.button.tiny,
+.tiny.preview-button {
+  font-size: 14px;
+  height: 26px;
+  border: 1px solid #c7c7c7;
+}
+
+.button.tiny:hover,
+.tiny.preview-button:hover,
+.button.tiny:focus,
+.tiny.preview-button:focus {
+  background: #ededf0;
+  border-color: #989898;
+}
+
+.button.tiny:active,
+.tiny.preview-button:active {
+  background: #dedede;
+  border-color: #989898;
+}
+
+.button.block-button,
+.block-button.preview-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: 0;
+  border-inline-end: 1px solid #c7c7c7;
+  box-shadow: none;
+  border-radius: 0;
+  flex-shrink: 0;
+  font-size: 20px;
+  height: 100px;
+  line-height: 100%;
+  overflow: hidden;
+}
+
+@media (max-width: 719px) {
+  .button.block-button,
+  .block-button.preview-button {
+    justify-content: flex-start;
+    font-size: 16px;
+    height: 72px;
+    margin-inline-end: 10px;
+    padding: 0 5px;
+  }
+}
+
+.button.block-button:hover,
+.block-button.preview-button:hover {
+  background: #ededf0;
+}
+
+.button.block-button:active,
+.block-button.preview-button:active {
+  background: #dedede;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  .button.block-button:hover,
+  .block-button.preview-button:hover {
+    background-color: ButtonText;
+  }
+
+  .button.block-button:active,
+  .block-button.preview-button:active {
+    background-color: ButtonFace;
+  }
+}
+
+.button.download,
+.download.preview-button,
+.button.flag,
+.flag.preview-button {
+  background-repeat: no-repeat;
+  background-size: 50%;
+  background-position: center;
+  margin-inline-end: 10px;
+  transition: background-color 150ms cubic-bezier(0.07, 0.95, 0, 1);
+}
+
+.button.download,
+.download.highlight-button-retry,
+.download.highlight-button-cancel,
+.download.highlight-button-download,
+.download.highlight-button-copy {
+  background-image: url("chrome://browser/content/screenshots/download.svg");
+}
+
+.button.download:hover,
+.download.preview-button:hover {
+  background-color: #ededf0;
+}
+
+.button.download:active,
+.download.preview-button:active {
+  background-color: #dedede;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  .button.download:hover,
+  .download.preview-button:hover {
+    background-color: ButtonText;
+    color: ButtonFace;
+  }
+
+  .button.download:active,
+  .download.preview-button:active {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+}
+
+.button.primary,
+.primary.highlight-retry-cancel,
+.primary.highlight-button-cancel,
+.highlight-button-download,
+.primary.highlight-button-copy {
+  background-color: #0a84ff;
+  color: #fff;
+}
+
+.button.primary:hover,
+.primary.highlight-button-retry:hover,
+.primary.highlight-button-cancel:hover,
+.highlight-button-download:hover,
+.primary.highlight-button-copy:hover,
+.button.primary:focus,
+.primary.highlight-button-retry:focus,
+.primary.highlight-button-cancel:focus,
+.highlight-button-download:focus,
+.primary.highlight-button-copy:focus {
+  background-color: #0072e5;
+}
+
+.button.primary:active,
+.primary.highlight-button-retry:active,
+.primary.highlight-button-cancel:active,
+.highlight-button-download:active,
+.primary.highlight-button-copy:active {
+  background-color: #0065cc;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  .button.primary,
+  .primary.highlight-retry-cancel,
+  .primary.highlight-button-cancel,
+  .highlight-button-download,
+  .primary.highlight-button-copy {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  .button.primary:hover,
+  .primary.highlight-button-retry:hover,
+  .primary.highlight-button-cancel:hover,
+  .highlight-button-download:hover,
+  .primary.highlight-button-copy:hover,
+  .button.primary:focus,
+  .primary.highlight-button-retry:focus,
+  .primary.highlight-button-cancel:focus,
+  .highlight-button-download:focus,
+  .primary.highlight-button-copy:focus {
+    background-color: ButtonText;
+    color: ButtonFace;
+  }
+
+  .button.primary:active,
+  .primary.highlight-button-retry:active,
+  .primary.highlight-button-cancel:active,
+  .highlight-button-download:active,
+  .primary.highlight-button-copy:active {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+}
+
+.button.secondary,
+.highlight-button-retry,
+.highlight-button-cancel,
+.secondary.highlight-button-download,
+.highlight-button-copy {
+  background-color: #f9f9fa;
+  color: #38383d;
+}
+
+.button.secondary:hover,
+.highlight-button-retry:hover,
+.highlight-button-cancel:hover,
+.secondary.highlight-button-download:hover,
+.highlight-button-copy:hover {
+  background-color: #ededf0;
+}
+
+.button.secondary:active,
+.highlight-button-retry:active,
+.highlight-button-cancel:active,
+.secondary.highlight-button-download:active,
+.highlight-button-copy:active {
+  background-color: #dedede;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  .button.secondary,
+  .highlight-button-retry,
+  .highlight-button-cancel,
+  .secondary.highlight-button-download,
+  .highlight-button-copy {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  .button.secondary:hover,
+  .highlight-button-retry:hover,
+  .highlight-button-cancel:hover,
+  .secondary.highlight-button-download:hover,
+  .highlight-button-copy:hover {
+    background-color: ButtonText;
+    color: ButtonFace;
+  }
+
+  .button.secondary:active,
+  .highlight-button-retry:active,
+  .highlight-button-cancel:active,
+  .secondary.highlight-button-download:active,
+  .highlight-button-copy:active {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+}
+
+.button.transparent,
+.transparent.preview-button {
+  background-color: transparent;
+  color: #38383d;
+}
+
+.button.transparent:hover,
+.transparent.preview-button:hover {
+  background-color: #ededf0;
+}
+
+.button.transparent:focus,
+.transparent.preview-button:focus,
+.button.transparent:active,
+.transparent.preview-button:active {
+  background-color: #dedede;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  .button.transparent,
+  .transparent.preview-button {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  .button.transparent:hover,
+  .transparent.preview-button:hover {
+    background-color: ButtonText;
+    color: ButtonFace;
+  }
+
+  .button.transparent:focus,
+  .transparent.preview-button:focus,
+  .button.transparent:active,
+  .transparent.preview-button:active {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+}
+
+.button.warning,
+.warning.preview-button {
+  color: #fff;
+  background: #d92215;
+}
+
+.button.warning:hover,
+.warning.preview-button:hover,
+.button.warning:focus,
+.warning.preview-button:focus {
+  background: #b81d12;
+}
+
+.button.warning:active,
+.warning.preview-button:active {
+  background: #a11910;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  .button.warning,
+  .warning.preview-button {
+    color: ButtonText;
+    background-color: ButtonFace;
+  }
+
+  .button.warning:hover,
+  .warning.preview-button:hover,
+  .button.warning:focus,
+  .warning.preview-button:focus {
+    background-color: ButtonText;
+    color: ButtonFace;
+  }
+
+  .button.warning:active,
+  .warning.preview-button:active {
+    background-color: ButtonFace;
+  }
+}
+
+@keyframes bounce {
+  0% {
+    transform: translateX(-40px);
+  }
+  100% {
+    transform: translate(190px);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  70% {
+    opacity: 0.25;
+    transform: scale(1.04);
+  }
+  100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+}
+
+.highlight {
+  border-radius: 1px;
+  border: 2px dashed rgba(255, 255, 255, 0.8);
+  box-sizing: border-box;
+  cursor: move;
+  position: absolute;
+  z-index: 9999999999;
+}
+
+/* When prefers contrast is fully supported, we should change these quereies to cover both high and low prefers contrast cases */
+@media (forced-colors: active) {
+  .highlight {
+    border: 2px dashed white;
+    opacity: 1.0;
+  }
+}
+
+.highlight-button-cancel {
+  margin: 5px;
+  width: 40px;
+}
+
+.highlight-button-download {
+  margin: 5px;
+  width: auto;
+  font-size: 18px;
+}
+
+.highlight-button-download img {
+  height: 16px;
+  width: 16px;
+}
+
+.highlight-button-download:-moz-locale-dir(rtl) {
+  flex-direction: column-reverse;
+}
+
+.highlight-button-download img:-moz-locale-dir(ltr) {
+  padding-inline-end: 8px;
+}
+
+.highlight-button-download img:-moz-locale-dir(rtl) {
+  padding-inline-start: 8px;
+}
+
+.highlight-button-copy {
+  margin: 5px;
+  width: auto;
+}
+
+.highlight-button-copy img {
+  height: 16px;
+  width: 16px;
+}
+
+.highlight-button-copy:-moz-locale-dir(rtl) {
+  flex-direction: column-reverse;
+}
+
+.highlight-button-copy img:-moz-locale-dir(ltr) {
+  padding-inline-end: 8px;
+}
+
+.highlight-button-copy img:-moz-locale-dir(rtl) {
+  padding-inline-start: 8px;
+}
+
+.preview-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-inline-end: 4px;
+  inset-inline-end: 0;
+  width: 100%;
+  height: 60px;
+  border-radius: 4px 4px 0 0;
+  background: rgba(249, 249, 250, 0.8);
+  top: 0;
+  border: 1px solid rgba(249, 249, 250, 0.2);
+  border-bottom: 0;
+  box-sizing: border-box;
+}
+
+.preview-image {
+  background-color: rgba(249, 249, 250, 0.8);
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+.preview-image-area {
+  margin: 10%;
+  margin-top: 2%;
+}
+
+.image-view {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: column;
+}
+
+.left {
+  margin-inline-start: 0;
+}
+
+.right {
+  margin-inline-start: 20px;
+}
+
+#placeholder-image {
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.06);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/browser/components/screenshots/content/screenshots.html b/browser/components/screenshots/content/screenshots.html
new file mode 100644
index 0000000000..e7ccc26797
--- /dev/null
+++ b/browser/components/screenshots/content/screenshots.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<!-- 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/. -->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <meta http-equiv="Content-Security-Policy" content="default-src chrome:;img-src data:; object-src 'none'">
+
+    <link rel="localization" href="browser/screenshots.ftl">
+
+    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+    <link rel="stylesheet" href="chrome://browser/content/screenshots/screenshots.css">
+    <script defer src="chrome://browser/content/screenshots/screenshots.js"></script>
+  </head>
+
+  <body>
+    <template id="screenshots-dialog-template">
+      <div class="image-view">
+        <div class="preview-buttons">
+          <button class="highlight-button-retry preview-button" data-l10n-id="screenshots-retry-button-title">
+            <img src="chrome://global/skin/icons/reload.svg"/>
+          </button>
+          <button class="highlight-button-cancel preview-button" data-l10n-id="screenshots-cancel-button-title">
+            <img src="chrome://browser/content/screenshots/cancel.svg"/>
+          </button>
+          <button class="highlight-button-copy preview-button" data-l10n-id="screenshots-copy-button-title">
+            <img src="chrome://browser/content/screenshots/copy.svg"/>
+            <span data-l10n-id="screenshots-copy-button"/>
+          </button>
+          <button class="highlight-button-download preview-button" data-l10n-id="screenshots-download-button-title">
+            <img src="chrome://browser/content/screenshots/download-white.svg"/>
+            <span data-l10n-id="screenshots-download-button"/>
+          </button>
+        </div>
+        <div class="preview-image">
+          <div id="preview-image-div" class="preview-image-area">
+          </div>
+        </div>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/browser/components/screenshots/content/screenshots.js b/browser/components/screenshots/content/screenshots.js
new file mode 100644
index 0000000000..1436b3803f
--- /dev/null
+++ b/browser/components/screenshots/content/screenshots.js
@@ -0,0 +1,97 @@
+/* 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/. */
+/* eslint-env mozilla/browser-window */
+
+"use strict";
+
+const { XPCOMUtils } = ChromeUtils.importESModule(
+  "resource://gre/modules/XPCOMUtils.sys.mjs"
+);
+
+ChromeUtils.defineESModuleGetters(this, {
+  Downloads: "resource://gre/modules/Downloads.sys.mjs",
+  FileUtils: "resource://gre/modules/FileUtils.sys.mjs",
+  ScreenshotsUtils: "resource:///modules/ScreenshotsUtils.sys.mjs",
+});
+
+class ScreenshotsUI extends HTMLElement {
+  constructor() {
+    super();
+  }
+  async connectedCallback() {
+    this.initialize();
+  }
+
+  initialize() {
+    if (this._initialized) {
+      return;
+    }
+    this._initialized = true;
+    let template = this.ownerDocument.getElementById(
+      "screenshots-dialog-template"
+    );
+    let templateContent = template.content;
+    this.appendChild(templateContent.cloneNode(true));
+
+    this._retryButton = this.querySelector(".highlight-button-retry");
+    this._retryButton.addEventListener("click", this);
+    this._cancelButton = this.querySelector(".highlight-button-cancel");
+    this._cancelButton.addEventListener("click", this);
+    this._copyButton = this.querySelector(".highlight-button-copy");
+    this._copyButton.addEventListener("click", this);
+    this._downloadButton = this.querySelector(".highlight-button-download");
+    this._downloadButton.addEventListener("click", this);
+  }
+
+  close() {
+    URL.revokeObjectURL(document.getElementById("placeholder-image").src);
+    window.close();
+  }
+
+  async handleEvent(event) {
+    if (event.type == "click" && event.currentTarget == this._cancelButton) {
+      this.close();
+    } else if (
+      event.type == "click" &&
+      event.currentTarget == this._copyButton
+    ) {
+      this.saveToClipboard(
+        this.ownerDocument.getElementById("placeholder-image").src
+      );
+    } else if (
+      event.type == "click" &&
+      event.currentTarget == this._downloadButton
+    ) {
+      await this.saveToFile(
+        this.ownerDocument.getElementById("placeholder-image").src
+      );
+    } else if (
+      event.type == "click" &&
+      event.currentTarget == this._retryButton
+    ) {
+      Services.obs.notifyObservers(
+        window.parent.ownerGlobal,
+        "menuitem-screenshot",
+        "retry"
+      );
+    }
+  }
+
+  async saveToFile(dataUrl) {
+    await ScreenshotsUtils.downloadScreenshot(
+      null,
+      dataUrl,
+      window.parent.ownerGlobal.gBrowser.selectedBrowser
+    );
+
+    this.close();
+  }
+
+  saveToClipboard(dataUrl) {
+    ScreenshotsUtils.copyScreenshot(dataUrl);
+
+    this.close();
+  }
+}
+customElements.define("screenshots-ui", ScreenshotsUI);