1 files changed, 83 insertions, 0 deletions
diff --git a/toolkit/content/aboutwebrtc/copyButton.mjs b/toolkit/content/aboutwebrtc/copyButton.mjs
new file mode 100644
index 0000000000..f39210c709
--- /dev/null
+++ b/toolkit/content/aboutwebrtc/copyButton.mjs
@@ -0,0 +1,83 @@
+/* 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/. */
+
+/*
+ * This creates a button that can be used to copy text to the clipboard.
+ * Whenever the button is pressed the getCopyContentsFn passed into the
+ * constructor is called and the resulting text is copied. It uses CSS
+ * transitions to perform a short animation.
+ */
+class CopyButton {
+  constructor(getCopyContentsFn) {
+    const button = document.createElement("span");
+    button.textContent = String.fromCodePoint(0x1f4cb);
+    button.classList.add("copy-button", "copy-button-base");
+    button.onclick = () => {
+      if (!button.classList.contains("copy-button")) {
+        return;
+      }
+
+      const handleAnimation = async () => {
+        const switchFadeDirection = () => {
+          if (button.classList.contains("copy-button-fade-out")) {
+            // We just faded out so let's fade in
+            button.classList.toggle("copy-button-fade-out");
+            button.classList.toggle("copy-button-fade-in");
+          } else {
+            // We just faded in so let's fade out
+            button.classList.toggle("copy-button-fade-out");
+            button.classList.toggle("copy-button-fade-in");
+          }
+        };
+
+        // Fade out clipboard icon
+        // Fade out the clipboard character
+        button.classList.toggle("copy-button-fade-out");
+        // Wait for CSS transition to end
+        await new Promise(r => (button.ontransitionend = r));
+
+        // Fade in checkmark icon
+        // This is the start of fade in.
+        // Switch to the checkmark character
+        button.textContent = String.fromCodePoint(0x2705);
+        // Trigger CSS fade in transition
+        switchFadeDirection();
+        // Wait for CSS transition to end
+        await new Promise(r => (button.ontransitionend = r));
+
+        // Fade out clipboard icon
+        // Trigger CSS fade out transition
+        switchFadeDirection();
+        // Wait for CSS transition to end
+        await new Promise(r => (button.ontransitionend = r));
+
+        // Fade in clipboard icon
+        // This is the start of fade in.
+        // Switch to the clipboard character
+        button.textContent = String.fromCodePoint(0x1f4cb);
+        // Trigger CSS fade in transition
+        switchFadeDirection();
+        // Wait for CSS transition to end
+        await new Promise(r => (button.ontransitionend = r));
+
+        // Remove fade
+        button.classList.toggle("copy-button-fade-in");
+        // Re-enable clicks and hidding when parent div has lost :hover
+        button.classList.add("copy-button");
+      };
+
+      // Note the fade effect is handled in the CSS, we just need to swap
+      // between the different CSS classes. This returns a promise that waits
+      // for the current fade to end, starts the next fade, then resolves.
+
+      navigator.clipboard.writeText(getCopyContentsFn());
+      // Prevent animation from disappearing when parent div losses :hover,
+      // and prevent additional clicks until the animation finishes.
+      button.classList.remove("copy-button");
+      handleAnimation(); // runs unawaited
+    };
+    this.element = button;
+  }
+}
+export { CopyButton };