Bug 1550093 - Style the Copied state to match the Lockwise addon. r=MattN,Pike draft
authorpulselistener
Sat, 18 May 2019 06:39:47 +0000
changeset 2008506 446dfe5411e2081778fa58e9357b47b8e429d350
parent 2008505 46d70160d85f930da32a93a94d5cc33e646c3e66
child 2008507 e5593c84eb403a15de6dc3a5f82fd5fb32a24ad1
push id363919
push userreviewbot
push dateSat, 18 May 2019 06:40:24 +0000
treeherdertry@6d5ea5dbe638 [default view] [failures only]
reviewersMattN, Pike
bugs1550093
milestone68.0a1
Bug 1550093 - Style the Copied state to match the Lockwise addon. r=MattN,Pike Differential Revision: https://phabricator.services.mozilla.com/D31521 Differential Diff: PHID-DIFF-7bpbizfaa6wttbrb4k7p
browser/components/aboutlogins/content/aboutLogins.ftl
browser/components/aboutlogins/content/components/copy-to-clipboard-button.css
--- a/browser/components/aboutlogins/content/aboutLogins.ftl
+++ b/browser/components/aboutlogins/content/aboutLogins.ftl
@@ -24,18 +24,18 @@ login-list =
 
 login-item =
   .cancel-button = Cancel
   .delete-button = Delete
   .edit-button = Edit
   .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!
+  .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
   .time-created = Created: { DATETIME($timeCreated, day: "numeric", month: "long", year: "numeric") }
   .time-changed = Last changed: { DATETIME($timeChanged, day: "numeric", month: "long", year: "numeric") }
   .time-used = Last used: { DATETIME($timeUsed, day: "numeric", month: "long", year: "numeric") }
--- a/browser/components/aboutlogins/content/components/copy-to-clipboard-button.css
+++ b/browser/components/aboutlogins/content/components/copy-to-clipboard-button.css
@@ -1,8 +1,29 @@
 /* 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 */
+}