Bug 1550093 - Clicking the Copy button places the related text on the clipboard. r=MattN draft
authorpulselistener
Sat, 18 May 2019 06:48:58 +0000
changeset 2008567 edd15d29ac166d08f312c3b6f5bc3a5c71fb7bd5
parent 2008566 bd75521ea5c0a9c0f6b11278c88f2cdfaf78793d
child 2008568 1dd61c1a35b7dded605f4ff434abf8f7472ab454
push id363923
push userreviewbot
push dateSat, 18 May 2019 06:49:52 +0000
treeherdertry@6eb4ec2cb49f [default view] [failures only]
reviewersMattN
bugs1550093
milestone68.0a1
Bug 1550093 - Clicking the Copy button places the related text on the clipboard. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D31520 Differential Diff: PHID-DIFF-jc5nivyrdljxe6ka4w24
browser/components/aboutlogins/content/components/copy-to-clipboard-button.js
browser/components/aboutlogins/content/components/login-item.js
--- a/browser/components/aboutlogins/content/components/copy-to-clipboard-button.js
+++ b/browser/components/aboutlogins/content/components/copy-to-clipboard-button.js
@@ -1,15 +1,25 @@
 /* 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/. */
 
 /* globals ReflectedFluentElement */
 
 class CopyToClipboardButton extends ReflectedFluentElement {
+  static get BUTTON_RESET_TIMEOUT() {
+    return 5000;
+  }
+
+  constructor() {
+    super();
+
+    this._relatedInput = null;
+  }
+
   connectedCallback() {
     if (this.children.length) {
       return;
     }
 
     let CopyToClipboardButtonTemplate = document.querySelector("#copy-to-clipboard-button-template");
     this.attachShadow({mode: "open"})
         .appendChild(CopyToClipboardButtonTemplate.content.cloneNode(true));
@@ -32,16 +42,28 @@ class CopyToClipboardButton extends Refl
     }
 
     let span = this.shadowRoot.querySelector("." + attrName);
     span.textContent = this.getAttribute(attrName);
     return true;
   }
 
   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);
--- a/browser/components/aboutlogins/content/components/login-item.js
+++ b/browser/components/aboutlogins/content/components/login-item.js
@@ -32,16 +32,21 @@ class LoginItem extends ReflectedFluentE
       ".cancel-button",
     ]) {
       let button = this.shadowRoot.querySelector(selector);
       button.addEventListener("click", this);
     }
 
     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();
   }
 
   static get reflectedFluentIDs() {
     return [
       "cancel-button",
       "copied-password-button",
       "copied-username-button",