diff --git a/browser/components/aboutlogins/content/aboutLogins.ftl b/browser/components/aboutlogins/content/aboutLogins.ftl index 8161cf2a3a1c..7f6d031d2cda 100644 --- a/browser/components/aboutlogins/content/aboutLogins.ftl +++ b/browser/components/aboutlogins/content/aboutLogins.ftl @@ -29,10 +29,6 @@ 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 diff --git a/browser/components/aboutlogins/content/aboutLogins.html b/browser/components/aboutlogins/content/aboutLogins.html index 8e315d0b9687..e2540274d3c5 100644 --- a/browser/components/aboutlogins/content/aboutLogins.html +++ b/browser/components/aboutlogins/content/aboutLogins.html @@ -10,7 +10,6 @@ - @@ -32,10 +31,6 @@ -
-

@@ -115,14 +108,5 @@ - - diff --git a/browser/components/aboutlogins/content/components/copy-to-clipboard-button.css b/browser/components/aboutlogins/content/components/copy-to-clipboard-button.css deleted file mode 100644 index 5abc74de7663..000000000000 --- a/browser/components/aboutlogins/content/components/copy-to-clipboard-button.css +++ /dev/null @@ -1,29 +0,0 @@ -/* 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 { - --success-color: #00c100; -} - -@supports -moz-bool-pref("browser.in-content.dark-mode") { -@media (prefers-color-scheme: dark) { - :host { - --success-color: #86DE74; - } -} -} - -:host(:not([copied])) .copied-button-text, -:host([copied]) .copy-button-text { - display: none; -} - -:host([copied]) { - color: var(--success-color); -} - -:host([copied]) button { - background-color: transparent; - opacity: 1; /* override common.css fading out disabled buttons */ -} diff --git a/browser/components/aboutlogins/content/components/copy-to-clipboard-button.js b/browser/components/aboutlogins/content/components/copy-to-clipboard-button.js deleted file mode 100644 index ca7aec6cfb07..000000000000 --- a/browser/components/aboutlogins/content/components/copy-to-clipboard-button.js +++ /dev/null @@ -1,69 +0,0 @@ -/* 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)); - - 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) { - let copyButton = this.shadowRoot.querySelector(".copy-button"); - if (event.type != "click" || event.currentTarget != copyButton) { - return; - } - - 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 b7c4421b70b4..a83a2ddcbafa 100644 --- a/browser/components/aboutlogins/content/components/login-item.js +++ b/browser/components/aboutlogins/content/components/login-item.js @@ -23,8 +23,6 @@ class LoginItem extends ReflectedFluentElement { this.reflectFluentStrings(); for (let selector of [ - ".copy-password-button", - ".copy-username-button", ".delete-button", ".edit-button", ".open-site-button", @@ -37,21 +35,12 @@ 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(); } static get reflectedFluentIDs() { return [ "cancel-button", - "copied-password-button", - "copied-username-button", - "copy-password-button", - "copy-username-button", "delete-button", "edit-button", "hostname-label", @@ -73,20 +62,6 @@ 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)); @@ -129,12 +104,6 @@ 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, diff --git a/browser/components/aboutlogins/jar.mn b/browser/components/aboutlogins/jar.mn index 6bac6d8f9327..dd8883699885 100644 --- a/browser/components/aboutlogins/jar.mn +++ b/browser/components/aboutlogins/jar.mn @@ -3,8 +3,6 @@ # 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) diff --git a/browser/components/aboutlogins/tests/browser/browser.ini b/browser/components/aboutlogins/tests/browser/browser.ini index e0ad36550732..ced5a0a46683 100644 --- a/browser/components/aboutlogins/tests/browser/browser.ini +++ b/browser/components/aboutlogins/tests/browser/browser.ini @@ -2,7 +2,6 @@ prefs = signon.management.page.enabled=true -[browser_copyToClipboardButton.js] [browser_deleteLogin.js] [browser_loginListChanges.js] [browser_openSite.js] diff --git a/browser/components/aboutlogins/tests/browser/browser_copyToClipboardButton.js b/browser/components/aboutlogins/tests/browser/browser_copyToClipboardButton.js deleted file mode 100644 index e1d080c598db..000000000000 --- a/browser/components/aboutlogins/tests/browser/browser_copyToClipboardButton.js +++ /dev/null @@ -1,58 +0,0 @@ -/* Any copyright is dedicated to the Public Domain. - * http://creativecommons.org/publicdomain/zero/1.0/ */ - -add_task(async function test() { - await SpecialPowers.pushPrefEnv({"set": [["dom.events.testing.asyncClipboard", true]] }); - - await BrowserTestUtils.withNewTab({gBrowser, url: "about:logins"}, async function(browser) { - let TEST_LOGIN = { - guid: "70a", - username: "jared", - password: "deraj", - hostname: "https://www.example.com", - }; - - await ContentTask.spawn(browser, TEST_LOGIN, async function(login) { - let loginItem = Cu.waiveXrays(content.document.querySelector("login-item")); - - // The login object needs to be cloned into the content global. - loginItem.setLogin(Cu.cloneInto(login, content)); - - // Lower the timeout for the test. - let copyButton = loginItem.shadowRoot.querySelector(".copy-username-button"); - Object.defineProperty(copyButton.constructor, "BUTTON_RESET_TIMEOUT", { - configurable: true, - writable: true, - value: 1000, - }); - }); - - for (let testCase of [ - [TEST_LOGIN.username, ".copy-username-button"], - [TEST_LOGIN.password, ".copy-password-button"], - ]) { - let testObj = { - expectedValue: testCase[0], - copyButtonSelector: testCase[1], - }; - await SimpleTest.promiseClipboardChange(testObj.expectedValue, async () => { - await ContentTask.spawn(browser, testObj, async function(aTestObj) { - let loginItem = content.document.querySelector("login-item"); - let copyButton = loginItem.shadowRoot.querySelector(aTestObj.copyButtonSelector); - let innerButton = copyButton.shadowRoot.querySelector("button"); - info("Clicking 'copy' button"); - innerButton.click(); - }); - }); - ok(true, "Username is on clipboard now"); - - await ContentTask.spawn(browser, testObj, async function(aTestObj) { - let loginItem = content.document.querySelector("login-item"); - let copyButton = loginItem.shadowRoot.querySelector(aTestObj.copyButtonSelector); - ok(copyButton.hasAttribute("copied"), "Success message should be shown"); - await ContentTaskUtils.waitForCondition(() => !copyButton.hasAttribute("copied"), - "'copied' attribute should be removed after a timeout"); - }); - } - }); -});