Bug 1550093 - Clicking the Copy button places the related text on the clipboard. r=MattN
authorJared Wein <jwein@mozilla.com>
Fri, 17 May 2019 18:26:08 +0000
changeset 536319 f764dd06add44c2077a245ec2c92a1d5668ba068
parent 536318 6bd4c5122a6a47b0b25090c334befd38404adf5d
child 536320 c5515eb04c11787046da2a1cbf2a805a204404b2
push id2082
push userffxbld-merge
push dateMon, 01 Jul 2019 08:34:18 +0000
treeherdermozilla-release@2fb19d0466d2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1550093
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1550093 - Clicking the Copy button places the related text on the clipboard. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D31520
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",