diff options
Diffstat (limited to 'browser/components/screenshots/content')
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); |
