Bug 1550093 - Style the Copied state to match the Lockwise addon. r=MattN,Pike
authorJared Wein <jwein@mozilla.com>
Fri, 17 May 2019 18:26:16 +0000
changeset 474421 c5515eb04c11787046da2a1cbf2a805a204404b2
parent 474420 f764dd06add44c2077a245ec2c92a1d5668ba068
child 474422 cfa094f6fd3ae066f3278cf5e4817d753f7a135e
push id113152
push userdluca@mozilla.com
push dateSat, 18 May 2019 10:33:03 +0000
treeherdermozilla-inbound@9b2f851979cb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN, Pike
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 - Style the Copied state to match the Lockwise addon. r=MattN,Pike Differential Revision: https://phabricator.services.mozilla.com/D31521
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 */
+}