diff options
Diffstat (limited to 'browser/components/screenshots/content')
3 files changed, 134 insertions, 41 deletions
diff --git a/browser/components/screenshots/content/screenshots.css b/browser/components/screenshots/content/screenshots.css index 506f3658c9..b155c294f8 100644 --- a/browser/components/screenshots/content/screenshots.css +++ b/browser/components/screenshots/content/screenshots.css @@ -30,13 +30,12 @@ body { display: flex; align-items: center; justify-content: center; + gap: var(--space-xsmall); cursor: pointer; text-align: center; user-select: none; white-space: nowrap; - min-height: 36px; - font-size: 15px; - min-width: 36px; + min-width: 32px; } .preview-button > img { @@ -44,11 +43,23 @@ body { fill: currentColor; width: 16px; height: 16px; + pointer-events: none; +} + +#retry > img { + content: url("chrome://global/skin/icons/reload.svg"); +} + +#cancel > img { + content: url("chrome://global/skin/icons/close.svg"); } -#download > img, #copy > img { - margin-inline-end: 5px; + content: url("chrome://global/skin/icons/edit-copy.svg"); +} + +#download > img { + content: url("chrome://browser/skin/downloads/downloads.svg"); } .preview-image { diff --git a/browser/components/screenshots/content/screenshots.html b/browser/components/screenshots/content/screenshots.html index 88c71fb4fe..fea032700c 100644 --- a/browser/components/screenshots/content/screenshots.html +++ b/browser/components/screenshots/content/screenshots.html @@ -31,32 +31,34 @@ <button id="retry" class="preview-button" - data-l10n-id="screenshots-retry-button-title" + data-l10n-id="screenshots-component-retry-button" > - <img src="chrome://global/skin/icons/reload.svg" /> + <img /> </button> <button id="cancel" class="preview-button" - data-l10n-id="screenshots-cancel-button-title" + data-l10n-id="screenshots-component-cancel-button" > - <img src="chrome://global/skin/icons/close.svg" /> + <img /> </button> <button id="copy" class="preview-button" - data-l10n-id="screenshots-copy-button-title" + data-l10n-id="screenshots-component-copy-button" > - <img src="chrome://global/skin/icons/edit-copy.svg" /> - <span data-l10n-id="screenshots-copy-button" /> + <img /><label + data-l10n-id="screenshots-component-copy-button-label" + ></label> </button> <button id="download" class="preview-button primary" - data-l10n-id="screenshots-download-button-title" + data-l10n-id="screenshots-component-download-button" > - <img src="chrome://browser/skin/downloads/downloads.svg" /> - <span data-l10n-id="screenshots-download-button" /> + <img /><label + data-l10n-id="screenshots-component-download-button-label" + ></label> </button> </div> <div class="preview-image"> diff --git a/browser/components/screenshots/content/screenshots.js b/browser/components/screenshots/content/screenshots.js index 9e47570e07..8159206d18 100644 --- a/browser/components/screenshots/content/screenshots.js +++ b/browser/components/screenshots/content/screenshots.js @@ -6,15 +6,35 @@ "use strict"; ChromeUtils.defineESModuleGetters(this, { + AppConstants: "resource://gre/modules/AppConstants.sys.mjs", ScreenshotsUtils: "resource:///modules/ScreenshotsUtils.sys.mjs", + ShortcutUtils: "resource://gre/modules/ShortcutUtils.sys.mjs", }); -class ScreenshotsUI extends HTMLElement { +const lazy = {}; + +ChromeUtils.defineLazyGetter(lazy, "screenshotsLocalization", () => { + return new Localization(["browser/screenshots.ftl"], true); +}); + +class ScreenshotsPreview extends HTMLElement { constructor() { super(); // we get passed the <browser> as a param via TabDialogBox.open() this.openerBrowser = window.arguments[0]; + + window.ensureCustomElements("moz-button"); + + let [downloadKey, copyKey] = + lazy.screenshotsLocalization.formatMessagesSync([ + { id: "screenshots-component-download-key" }, + { id: "screenshots-component-copy-key" }, + ]); + + this.downloadKey = downloadKey.value; + this.copyKey = copyKey.value; } + async connectedCallback() { this.initialize(); } @@ -38,6 +58,29 @@ class ScreenshotsUI extends HTMLElement { this._copyButton.addEventListener("click", this); this._downloadButton = this.querySelector("#download"); this._downloadButton.addEventListener("click", this); + + let accelString = ShortcutUtils.getModifierString("accel"); + let copyShorcut = accelString + this.copyKey; + let downloadShortcut = accelString + this.downloadKey; + + document.l10n.setAttributes( + this._cancelButton, + "screenshots-component-cancel-button" + ); + + document.l10n.setAttributes( + this._copyButton, + "screenshots-component-copy-button", + { shortcut: copyShorcut } + ); + + document.l10n.setAttributes( + this._downloadButton, + "screenshots-component-download-button", + { shortcut: downloadShortcut } + ); + + window.addEventListener("keydown", this, true); } close() { @@ -45,31 +88,68 @@ class ScreenshotsUI extends HTMLElement { window.close(); } - async handleEvent(event) { - if (event.type == "click" && event.currentTarget == this._cancelButton) { - this.close(); - ScreenshotsUtils.recordTelemetryEvent("canceled", "preview_cancel", {}); - } 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 - ) { - ScreenshotsUtils.scheduleRetry(this.openerBrowser, "preview_retry"); - this.close(); + handleEvent(event) { + switch (event.type) { + case "click": + this.handleClick(event); + break; + case "keydown": + this.handleKeydown(event); + break; + } + } + + handleClick(event) { + switch (event.target.id) { + case "retry": + ScreenshotsUtils.scheduleRetry(this.openerBrowser, "preview_retry"); + this.close(); + break; + case "cancel": + this.close(); + ScreenshotsUtils.recordTelemetryEvent("canceled", "preview_cancel", {}); + break; + case "copy": + this.saveToClipboard( + this.ownerDocument.getElementById("placeholder-image").src + ); + break; + case "download": + this.saveToFile( + this.ownerDocument.getElementById("placeholder-image").src + ); + break; + } + } + + handleKeydown(event) { + switch (event.key) { + case this.copyKey.toLowerCase(): + if (this.getAccelKey(event)) { + event.preventDefault(); + event.stopPropagation(); + this.saveToClipboard( + this.ownerDocument.getElementById("placeholder-image").src + ); + } + break; + case this.downloadKey.toLowerCase(): + if (this.getAccelKey(event)) { + event.preventDefault(); + event.stopPropagation(); + this.saveToFile( + this.ownerDocument.getElementById("placeholder-image").src + ); + } + break; + } + } + + getAccelKey(event) { + if (AppConstants.platform === "macosx") { + return event.metaKey; } + return event.ctrlKey; } async saveToFile(dataUrl) { @@ -102,4 +182,4 @@ class ScreenshotsUI extends HTMLElement { } } } -customElements.define("screenshots-ui", ScreenshotsUI); +customElements.define("screenshots-preview", ScreenshotsPreview); |