Bug 1551696 - Add reveal icon. r=MattN
authorJared Wein <jwein@mozilla.com>
Thu, 16 May 2019 20:16:56 +0000
changeset 474243 8189bd3d8078b3155a425043b34f6975e9a799d8
parent 474242 871756833dc4996a9d6113e998ef66932c5b97eb
child 474244 137380671f01c6185f61a04b3fd55aac9617da4a
push id113144
push usershindli@mozilla.com
push dateFri, 17 May 2019 16:44:55 +0000
treeherdermozilla-inbound@f4c4b796f845 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1551696
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 1551696 - Add reveal icon. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D31290
browser/components/aboutlogins/content/components/modal-input.css
browser/components/aboutlogins/content/icons/hide-password.svg
browser/components/aboutlogins/content/icons/show-password.svg
browser/components/aboutlogins/jar.mn
browser/components/aboutlogins/tests/mochitest/test_modal_input.html
--- a/browser/components/aboutlogins/content/components/modal-input.css
+++ b/browser/components/aboutlogins/content/components/modal-input.css
@@ -1,12 +1,54 @@
 /* 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 {
+  --reveal-button-opacity: .8;
+  --reveal-button-opacity-hover: .6;
+  --reveal-button-opacity-active: 1;
+
+  display: flex;
+}
+
 :host([editing]) .locked-value,
 :host(:not([editing])) .unlocked-value {
   display: none;
 }
 
 :host(:not([type="password"])) .reveal-checkbox {
   display: none;
 }
+
+.reveal-checkbox {
+  /* !important is needed to override common.css styling for checkboxes */
+  background-color: transparent !important;
+  border-width: 0 !important;
+  background-image: url("chrome://browser/content/aboutlogins/icons/show-password.svg") !important;
+  margin-inline-start: 8px !important;
+  cursor: pointer;
+  -moz-context-properties: fill;
+  fill: currentColor !important;
+  opacity: var(--reveal-button-opacity);
+}
+
+.reveal-checkbox:hover {
+  opacity: var(--reveal-button-opacity-hover);
+}
+
+.reveal-checkbox:hover:active {
+  opacity: var(--reveal-button-opacity-active);
+}
+
+.reveal-checkbox:checked {
+  background-image: url("chrome://browser/content/aboutlogins/icons/hide-password.svg") !important;
+}
+
+@supports -moz-bool-pref("browser.in-content.dark-mode") {
+@media (prefers-color-scheme: dark) {
+  :host {
+    --reveal-button-opacity: .8;
+    --reveal-button-opacity-hover: 1;
+    --reveal-button-opacity-active: .6;
+  }
+}
+}
new file mode 100644
--- /dev/null
+++ b/browser/components/aboutlogins/content/icons/hide-password.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill">
+  <path d="M12 7l-4 4a4 4 0 0 0 4-4zm3.955.7a1 1 0 0 1 0 .6A8.325 8.325 0 0 1 8 14a8.478 8.478 0 0 1-2.59-.409l1.66-1.661c.308.046.619.069.93.07a6.331 6.331 0 0 0 5.943-4 5.781 5.781 0 0 0-1.118-1.828l1.41-1.41a7.817 7.817 0 0 1 1.72 2.938zm-1.248-6.407a1 1 0 0 1 0 1.414l-12 12a1 1 0 1 1-1.414-1.414l1.284-1.287A7.874 7.874 0 0 1 .045 8.294a1 1 0 0 1 0-.594A8.355 8.355 0 0 1 11.7 2.882l1.593-1.589a1 1 0 0 1 1.414 0zM8.5 5A1.5 1.5 0 0 0 7 6.5c.003.295.094.581.263.823l2.06-2.06A1.46 1.46 0 0 0 8.5 5zM2.057 8a5.928 5.928 0 0 0 1.936 2.595l.986-.986A3.933 3.933 0 0 1 4.557 5a6.061 6.061 0 0 0-2.5 3z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/components/aboutlogins/content/icons/show-password.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill">
+  <path d="M15.955 7.7A8.325 8.325 0 0 0 8 2 8.325 8.325 0 0 0 .045 7.7a1 1 0 0 0 0 .594A8.325 8.325 0 0 0 8 14a8.325 8.325 0 0 0 7.955-5.7 1 1 0 0 0 0-.6zM8.5 5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zM8 12a6.331 6.331 0 0 1-5.943-4 6.061 6.061 0 0 1 2.5-3A3.955 3.955 0 0 0 4 7a4 4 0 0 0 8 0 3.955 3.955 0 0 0-.555-2 6.061 6.061 0 0 1 2.5 3A6.331 6.331 0 0 1 8 12z"/>
+</svg>
--- a/browser/components/aboutlogins/jar.mn
+++ b/browser/components/aboutlogins/jar.mn
@@ -11,11 +11,13 @@ browser.jar:
   content/browser/aboutlogins/components/login-list.js         (content/components/login-list.js)
   content/browser/aboutlogins/components/login-list-item.css   (content/components/login-list-item.css)
   content/browser/aboutlogins/components/login-list-item.js    (content/components/login-list-item.js)
   content/browser/aboutlogins/components/modal-input.css       (content/components/modal-input.css)
   content/browser/aboutlogins/components/modal-input.js        (content/components/modal-input.js)
   content/browser/aboutlogins/components/reflected-fluent-element.js  (content/components/reflected-fluent-element.js)
   content/browser/aboutlogins/icons/delete.svg  (content/icons/delete.svg)
   content/browser/aboutlogins/icons/edit.svg    (content/icons/edit.svg)
+  content/browser/aboutlogins/icons/hide-password.svg (content/icons/hide-password.svg)
+  content/browser/aboutlogins/icons/show-password.svg (content/icons/show-password.svg)
   content/browser/aboutlogins/aboutLogins.css   (content/aboutLogins.css)
   content/browser/aboutlogins/aboutLogins.js    (content/aboutLogins.js)
   content/browser/aboutlogins/aboutLogins.html  (content/aboutLogins.html)
--- a/browser/components/aboutlogins/tests/mochitest/test_modal_input.html
+++ b/browser/components/aboutlogins/tests/mochitest/test_modal_input.html
@@ -36,35 +36,35 @@ add_task(async function setup() {
   gModalInput.setAttribute("value", TEST_INPUT_VALUE);
   displayEl.appendChild(gModalInput);
 });
 
 add_task(async function test_initial_state() {
   ok(gModalInput, "modalInput exists");
   is(gModalInput.shadowRoot.querySelector(".locked-value").textContent, TEST_INPUT_VALUE, "Values are set initially");
   is(gModalInput.shadowRoot.querySelector(".unlocked-value").value, TEST_INPUT_VALUE, "Values are set initially");
-  is(getComputedStyle(gModalInput.shadowRoot.querySelector(".locked-value")).display, "inline", ".locked-value is visible by default");
+  is(getComputedStyle(gModalInput.shadowRoot.querySelector(".locked-value")).display, "block", ".locked-value is visible by default");
   is(getComputedStyle(gModalInput.shadowRoot.querySelector(".unlocked-value")).display, "none", ".unlocked-value is hidden by default");
 });
 
 add_task(async function test_editing_set_unset() {
   let lockedValue = gModalInput.shadowRoot.querySelector(".locked-value");
   let unlockedValue = gModalInput.shadowRoot.querySelector(".unlocked-value");
   gModalInput.setAttribute("editing", "");
   is(getComputedStyle(lockedValue).display, "none", ".locked-value is hidden when editing");
-  is(getComputedStyle(unlockedValue).display, "inline", ".unlocked-value is visible when editing");
+  is(getComputedStyle(unlockedValue).display, "block", ".unlocked-value is visible when editing");
 
   const NEW_VALUE = "editedValue";
   SpecialPowers.wrap(unlockedValue).setUserInput(NEW_VALUE);
   gModalInput.removeAttribute("editing");
 
   is(lockedValue.textContent, NEW_VALUE, "Values are updated from edit");
   is(unlockedValue.value, NEW_VALUE, "Values are updated from edit");
   is(gModalInput.getAttribute("value"), NEW_VALUE, "The value attribute on the host element is updated from edit");
-  is(getComputedStyle(lockedValue).display, "inline", ".locked-value is visible when not editing");
+  is(getComputedStyle(lockedValue).display, "block", ".locked-value is visible when not editing");
   is(getComputedStyle(unlockedValue).display, "none", ".unlocked-value is hidden when not editing");
 });
 
 add_task(async function test_password() {
   gModalInput.setAttribute("type", "password");
   let lockedValue = gModalInput.shadowRoot.querySelector(".locked-value");
   let unlockedValue = gModalInput.shadowRoot.querySelector(".unlocked-value");