From 7891929ef0e3894daabab980e97908e74d7bd976 Mon Sep 17 00:00:00 2001
From: Jared Wein <jwein@mozilla.com>
Date: Fri, 17 May 2019 18:26:08 +0000
Subject: [PATCH] Bug 1550093 - Clicking the Copy button places the related
 text on the clipboard. r=MattN

Differential Revision: https://phabricator.services.mozilla.com/D31520

--HG--
extra : source : 510a686041bb31f70684c29a72e8a5f1163836b2
---
 .../components/copy-to-clipboard-button.js    | 26 +++++++++++++++++--
 .../content/components/login-item.js          |  5 ++++
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/browser/components/aboutlogins/content/components/copy-to-clipboard-button.js b/browser/components/aboutlogins/content/components/copy-to-clipboard-button.js
index a90668b3a708..ca7aec6cfb07 100644
--- a/browser/components/aboutlogins/content/components/copy-to-clipboard-button.js
+++ b/browser/components/aboutlogins/content/components/copy-to-clipboard-button.js
@@ -5,6 +5,16 @@
 /* globals ReflectedFluentElement */
 
 class CopyToClipboardButton extends ReflectedFluentElement {
+  static get BUTTON_RESET_TIMEOUT() {
+    return 5000;
+  }
+
+  constructor() {
+    super();
+
+    this._relatedInput = null;
+  }
+
   connectedCallback() {
     if (this.children.length) {
       return;
@@ -37,11 +47,23 @@ class CopyToClipboardButton extends ReflectedFluentElement {
   }
 
   handleEvent(event) {
-    if (event.type != "click") {
+    let copyButton = this.shadowRoot.querySelector(".copy-button");
+    if (event.type != "click" || event.currentTarget != copyButton) {
       return;
     }
 
-    this.setAttribute("copied", "");
+    copyButton.disabled = true;
+    navigator.clipboard.writeText(this._relatedInput.value).then(() => {
+      this.setAttribute("copied", "");
+      setTimeout(() => {
+        copyButton.disabled = false;
+        this.removeAttribute("copied");
+      }, CopyToClipboardButton.BUTTON_RESET_TIMEOUT);
+    }, () => copyButton.disabled = false);
+  }
+
+  set relatedInput(val) {
+    this._relatedInput = val;
   }
 }
 customElements.define("copy-to-clipboard-button", CopyToClipboardButton);
diff --git a/browser/components/aboutlogins/content/components/login-item.js b/browser/components/aboutlogins/content/components/login-item.js
index 4ac6c356e376..b7c4421b70b4 100644
--- a/browser/components/aboutlogins/content/components/login-item.js
+++ b/browser/components/aboutlogins/content/components/login-item.js
@@ -37,6 +37,11 @@ class LoginItem extends ReflectedFluentElement {
 
     window.addEventListener("AboutLoginsLoginSelected", this);
 
+    let copyUsernameButton = this.shadowRoot.querySelector(".copy-username-button");
+    let copyPasswordButton = this.shadowRoot.querySelector(".copy-password-button");
+    copyUsernameButton.relatedInput = this.shadowRoot.querySelector("modal-input[name='username']");
+    copyPasswordButton.relatedInput = this.shadowRoot.querySelector("modal-input[name='password']");
+
     this.render();
   }