Bug 1550093 - Style the Copied state to match the Lockwise addon. r=MattN,Pike
☠☠ backed out by 366a49e70140 ☠ ☠
authorJared Wein <jwein@mozilla.com>
Fri, 17 May 2019 18:26:16 +0000
changeset 533224 38cafbd4a35fc02e9c3b26f27338b7907878b6eb
parent 533223 510a686041bb31f70684c29a72e8a5f1163836b2
child 533225 058d6d7a23a64ffc0051d2cc1ec6a78c3d050897
push id11276
push userrgurzau@mozilla.com
push dateMon, 20 May 2019 13:11:24 +0000
treeherdermozilla-beta@847755a7c325 [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 */
+}