Adding upstream version 126.0.upstream/126.0

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

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