summaryrefslogtreecommitdiffstats
path: root/browser/components/screenshots/content/screenshots.js
diff options
context:
space:
mode:
Diffstat (limited to 'browser/components/screenshots/content/screenshots.js')
-rw-r--r--browser/components/screenshots/content/screenshots.js132
1 files changed, 106 insertions, 26 deletions
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);