Bug 1550093 - Create CustomElement for copy-to-clipboard. r=MattN,Pike

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

--HG--
extra : source : faf4415303fb85890222c1ca3b4a975ddd33b22a

browser/components/aboutlogins/content/aboutLogins.ftl

@@ -29,6 +29,10 @@ login-item =
   .hostname-label = Website Address
   .modal-input-reveal-checkbox-hide = Hide password
   .modal-input-reveal-checkbox-show = Show password
+  .copied-password-button = Copied!
+  .copied-username-button = Copied!
+  .copy-password-button = Copy
+  .copy-username-button = Copy
   .open-site-button = Launch
   .password-label = Password
   .save-changes-button = Save Changes

browser/components/aboutlogins/content/aboutLogins.html

@@ -10,6 +10,7 @@
     <title data-l10n-id="about-logins-page-title"></title>
     <link rel="localization" href="browser/aboutLogins.ftl">
     <script defer="defer" src="chrome://browser/content/aboutlogins/components/reflected-fluent-element.js"></script>
+    <script defer="defer" src="chrome://browser/content/aboutlogins/components/copy-to-clipboard-button.js"></script>
     <script defer="defer" src="chrome://browser/content/aboutlogins/components/login-filter.js"></script>
     <script defer="defer" src="chrome://browser/content/aboutlogins/components/login-item.js"></script>
     <script defer="defer" src="chrome://browser/content/aboutlogins/components/login-list.js"></script>
@@ -31,6 +32,10 @@
     <login-item data-l10n-id="login-item"
                 data-l10n-args='{"timeCreated": 0, "timeChanged": 0, "timeUsed": 0}'
                 data-l10n-attrs="cancel-button,
+                                 copy-password-button,
+                                 copy-username-button,
+                                 copied-password-button,
+                                 copied-username-button,
                                  delete-button,
                                  edit-button,
                                  hostname-label,
@@ -81,12 +86,14 @@
           <span class="username-label field-label"></span>
           <modal-input name="username"/>
         </label>
+        <copy-to-clipboard-button class="copy-username-button"></copy-to-clipboard-button>
       </div>
       <div class="detail-row">
         <label>
           <span class="password-label field-label"></span>
           <modal-input type="password" name="password"/>
         </label>
+        <copy-to-clipboard-button class="copy-password-button"></copy-to-clipboard-button>
       </div>
       <p class="time-created meta-info"></p>
       <p class="time-changed meta-info"></p>
@@ -108,5 +115,14 @@
       <input type="text" class="unlocked-value"/>
       <input type="checkbox" class="reveal-checkbox"/>
     </template>
+
+    <template id="copy-to-clipboard-button-template">
+      <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/copy-to-clipboard-button.css">
+      <button class="copy-button">
+        <span class="copied-button-text"></span>
+        <span class="copy-button-text"></span>
+      </button>
+    </template>
   </body>
 </html>

browser/components/aboutlogins/content/components/copy-to-clipboard-button.css

@@ -0,0 +1,8 @@
+/* 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/. */
+
+:host(:not([copied])) .copied-button-text,
+:host([copied]) .copy-button-text {
+  display: none;
+}

browser/components/aboutlogins/content/components/copy-to-clipboard-button.js

@@ -0,0 +1,47 @@
+/* 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 {
+  connectedCallback() {
+    if (this.children.length) {
+      return;
+    }
+
+    let CopyToClipboardButtonTemplate = document.querySelector("#copy-to-clipboard-button-template");
+    this.attachShadow({mode: "open"})
+        .appendChild(CopyToClipboardButtonTemplate.content.cloneNode(true));
+
+    this.shadowRoot.querySelector(".copy-button").addEventListener("click", this);
+  }
+
+  static get reflectedFluentIDs() {
+    return ["copy-button-text", "copied-button-text"];
+  }
+
+  static get observedAttributes() {
+    return CopyToClipboardButton.reflectedFluentIDs;
+  }
+
+  handleSpecialCaseFluentString(attrName) {
+    if (attrName != "copied-button-text" &&
+        attrName != "copy-button-text") {
+      return false;
+    }
+
+    let span = this.shadowRoot.querySelector("." + attrName);
+    span.textContent = this.getAttribute(attrName);
+    return true;
+  }
+
+  handleEvent(event) {
+    if (event.type != "click") {
+      return;
+    }
+
+    this.setAttribute("copied", "");
+  }
+}
+customElements.define("copy-to-clipboard-button", CopyToClipboardButton);

browser/components/aboutlogins/content/components/login-item.js

@@ -23,6 +23,8 @@ class LoginItem extends ReflectedFluentElement {
     this.reflectFluentStrings();
 
     for (let selector of [
+      ".copy-password-button",
+      ".copy-username-button",
       ".delete-button",
       ".edit-button",
       ".open-site-button",
@@ -41,6 +43,10 @@ class LoginItem extends ReflectedFluentElement {
   static get reflectedFluentIDs() {
     return [
       "cancel-button",
+      "copied-password-button",
+      "copied-username-button",
+      "copy-password-button",
+      "copy-username-button",
       "delete-button",
       "edit-button",
       "hostname-label",
@@ -62,6 +68,20 @@ class LoginItem extends ReflectedFluentElement {
 
   handleSpecialCaseFluentString(attrName) {
     switch (attrName) {
+      case "copied-password-button":
+      case "copy-password-button": {
+        let copyPasswordButton = this.shadowRoot.querySelector(".copy-password-button");
+        let newAttrName = attrName.substr(0, attrName.indexOf("-")) + "-button-text";
+        copyPasswordButton.setAttribute(newAttrName, this.getAttribute(attrName));
+        break;
+      }
+      case "copied-username-button":
+      case "copy-username-button": {
+        let copyUsernameButton = this.shadowRoot.querySelector(".copy-username-button");
+        let newAttrName = attrName.substr(0, attrName.indexOf("-")) + "-button-text";
+        copyUsernameButton.setAttribute(newAttrName, this.getAttribute(attrName));
+        break;
+      }
       case "modal-input-reveal-checkbox-hide": {
         this.shadowRoot.querySelector("modal-input[name='password']")
                        .setAttribute("reveal-checkbox-hide", this.getAttribute(attrName));
@@ -104,6 +124,12 @@ class LoginItem extends ReflectedFluentElement {
           this.render();
           return;
         }
+        if (event.target.classList.contains("copy-password-button")) {
+          return;
+        }
+        if (event.target.classList.contains("copy-username-button")) {
+          return;
+        }
         if (event.target.classList.contains("delete-button")) {
           document.dispatchEvent(new CustomEvent("AboutLoginsDeleteLogin", {
             bubbles: true,

browser/components/aboutlogins/jar.mn

@@ -3,6 +3,8 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 browser.jar:
+  content/browser/aboutlogins/components/copy-to-clipboard-button.css (content/components/copy-to-clipboard-button.css)
+  content/browser/aboutlogins/components/copy-to-clipboard-button.js  (content/components/copy-to-clipboard-button.js)
   content/browser/aboutlogins/components/login-filter.css      (content/components/login-filter.css)
   content/browser/aboutlogins/components/login-filter.js       (content/components/login-filter.js)
   content/browser/aboutlogins/components/login-item.css        (content/components/login-item.css)