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

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

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