Commit 3c6818e9 authored by Jared Wein's avatar Jared Wein
Browse files

Bug 1550099 - Add Edit button that toggles between editing/not-editing a LoginItem. r=MattN,Pike

Differential Revision: https://phabricator.services.mozilla.com/D30960

--HG--
extra : moz-landing-system : lando
parent 495653bb
......@@ -25,6 +25,7 @@ login-list =
login-item =
.cancel-button = Cancel
.delete-button = Delete
.edit-button = Edit
.hostname-label = Website Address
.password-label = Password
.save-changes-button = Save Changes
......
......@@ -31,6 +31,7 @@
data-l10n-args='{"timeCreated": 0, "timeChanged": 0, "timeUsed": 0}'
data-l10n-attrs="cancel-button,
delete-button,
edit-button,
hostname-label,
password-label,
save-changes-button,
......@@ -61,6 +62,7 @@
<link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-item.css">
<div class="header">
<h2 class="title"></h2>
<button class="edit-button"></button>
<button class="delete-button"></button>
</div>
<label>
......
......@@ -8,6 +8,11 @@
padding-right: 40px;
}
:host(:not([editing])) .save-changes-button,
:host(:not([editing])) .cancel-button {
display: none;
}
.header {
display: flex;
border-bottom: 1px solid var(--in-content-box-border-color);
......
......@@ -24,6 +24,7 @@ class LoginItem extends ReflectedFluentElement {
for (let selector of [
".delete-button",
".edit-button",
".save-changes-button",
".cancel-button",
]) {
......@@ -40,6 +41,7 @@ class LoginItem extends ReflectedFluentElement {
return [
"cancel-button",
"delete-button",
"edit-button",
"hostname-label",
"password-label",
"save-changes-button",
......@@ -75,6 +77,11 @@ class LoginItem extends ReflectedFluentElement {
break;
}
case "click": {
if (event.target.classList.contains("cancel-button")) {
this.toggleEditing();
this.render();
return;
}
if (event.target.classList.contains("delete-button")) {
document.dispatchEvent(new CustomEvent("AboutLoginsDeleteLogin", {
bubbles: true,
......@@ -82,6 +89,10 @@ class LoginItem extends ReflectedFluentElement {
}));
return;
}
if (event.target.classList.contains("edit-button")) {
this.toggleEditing();
return;
}
if (event.target.classList.contains("save-changes-button")) {
let loginUpdates = {
guid: this._login.guid,
......@@ -98,10 +109,6 @@ class LoginItem extends ReflectedFluentElement {
bubbles: true,
detail: loginUpdates,
}));
return;
}
if (event.target.classList.contains("cancel-button")) {
this.render();
}
break;
}
......@@ -119,6 +126,7 @@ class LoginItem extends ReflectedFluentElement {
}
this._login = login;
this.toggleEditing(false);
this.render();
}
......@@ -129,5 +137,13 @@ class LoginItem extends ReflectedFluentElement {
this._login = {};
this.render();
}
toggleEditing(force) {
let shouldEdit = force !== undefined ? force : !this.hasAttribute("editing");
this.shadowRoot.querySelector(".edit-button").disabled = shouldEdit;
this.shadowRoot.querySelectorAll("modal-input")
.forEach(el => el.toggleAttribute("editing", shouldEdit));
this.toggleAttribute("editing", shouldEdit);
}
}
customElements.define("login-item", LoginItem);
......@@ -47,6 +47,10 @@ add_task(async function test_login_item() {
let usernameInput = loginItem.shadowRoot.querySelector("modal-input[name='username']");
let passwordInput = loginItem.shadowRoot.querySelector("modal-input[name='password']");
let editButton = loginItem.shadowRoot.querySelector(".edit-button");
editButton.click();
await Promise.resolve();
usernameInput.value += "-undome";
passwordInput.value += "-undome";
......@@ -56,6 +60,9 @@ add_task(async function test_login_item() {
is(usernameInput.value, login.username, "Username change should be reverted");
is(passwordInput.value, login.password, "Password change should be reverted");
editButton.click();
await Promise.resolve();
usernameInput.value += "-saveme";
passwordInput.value += "-saveme";
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment