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);