Bug 1551696 - Add reveal icon. r=MattN draft
authorpulselistener
Sat, 18 May 2019 06:48:51 +0000
changeset 2008565 1c31be9b186f4d7e6d165a55a95e01a9570b2a94
parent 2008564 2a3841e6b9fc481b0f0a9f1314a8b62737f71027
child 2008566 bd75521ea5c0a9c0f6b11278c88f2cdfaf78793d
push id363923
push userreviewbot
push dateSat, 18 May 2019 06:49:52 +0000
treeherdertry@6eb4ec2cb49f [default view] [failures only]
reviewersMattN
bugs1551696
milestone68.0a1
Bug 1551696 - Add reveal icon. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D31290 Differential Diff: PHID-DIFF-eg3yqthmgszv5i4kjana
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");