Commit 187ffcdd authored by Jared Wein's avatar Jared Wein
Browse files

Bug 1550099 - Use modal-input custom element for login-item. r=MattN

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

--HG--
extra : moz-landing-system : lando
parent ff2fac0d
......@@ -14,6 +14,7 @@
<script defer="defer" src="chrome://browser/content/aboutlogins/components/login-item.js"></script>
<script defer="defer" src="chrome://browser/content/aboutlogins/components/login-list.js"></script>
<script defer="defer" src="chrome://browser/content/aboutlogins/components/login-list-item.js"></script>
<script defer="defer" src="chrome://browser/content/aboutlogins/components/modal-input.js"></script>
<script defer="defer" src="chrome://browser/content/aboutlogins/aboutLogins.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://global/skin/in-content/common.css">
<link rel="stylesheet" type="text/css" href="chrome://browser/content/aboutlogins/aboutLogins.css">
......@@ -66,11 +67,11 @@
</label>
<label>
<span class="username-label field-label"></span>
<input name="username"/>
<modal-input name="username"/>
</label>
<label>
<span class="password-label field-label"></span>
<input type="password" name="password"/>
<modal-input type="password" name="password"/>
</label>
<p class="time-created meta-info"></p>
<p class="time-changed meta-info"></p>
......
......@@ -64,8 +64,8 @@ class LoginItem extends ReflectedFluentElement {
let hostnameNoScheme = this._login.hostname && new URL(this._login.hostname).hostname;
this.shadowRoot.querySelector(".header").textContent = hostnameNoScheme || "";
this.shadowRoot.querySelector(".hostname").textContent = this._login.hostname || "";
this.shadowRoot.querySelector("input[name='username']").value = this._login.username || "";
this.shadowRoot.querySelector("input[name='password']").value = this._login.password || "";
this.shadowRoot.querySelector("modal-input[name='username']").setAttribute("value", this._login.username || "");
this.shadowRoot.querySelector("modal-input[name='password']").setAttribute("value", this._login.password || "");
}
handleEvent(event) {
......@@ -86,11 +86,11 @@ class LoginItem extends ReflectedFluentElement {
let loginUpdates = {
guid: this._login.guid,
};
let formUsername = this.shadowRoot.querySelector("input[name='username']").value.trim();
let formUsername = this.shadowRoot.querySelector("modal-input[name='username']").value.trim();
if (formUsername != this._login.username) {
loginUpdates.username = formUsername;
}
let formPassword = this.shadowRoot.querySelector("input[name='password']").value.trim();
let formPassword = this.shadowRoot.querySelector("modal-input[name='password']").value.trim();
if (formPassword != this._login.password) {
loginUpdates.password = formPassword;
}
......
......@@ -44,8 +44,8 @@ add_task(async function test_login_item() {
}, "Waiting for login item to get populated");
ok(loginItemPopulated, "The login item should get populated");
let usernameInput = loginItem.shadowRoot.querySelector("input[name='username']");
let passwordInput = loginItem.shadowRoot.querySelector("input[name='password']");
let usernameInput = loginItem.shadowRoot.querySelector("modal-input[name='username']");
let passwordInput = loginItem.shadowRoot.querySelector("modal-input[name='password']");
usernameInput.value += "-undome";
passwordInput.value += "-undome";
......
......@@ -9,6 +9,7 @@ Test the login-item component
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="reflected-fluent-element.js"></script>
<script src="login-item.js"></script>
<script src="modal-input.js"></script>
<script src="aboutlogins_common.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
......@@ -54,8 +55,8 @@ add_task(async function setup() {
add_task(async function test_empty_item() {
ok(gLoginItem, "loginItem exists");
is(gLoginItem.shadowRoot.querySelector(".hostname").textContent, "", "hostname should be blank");
is(gLoginItem.shadowRoot.querySelector("input[name='username']").value, "", "username should be blank");
is(gLoginItem.shadowRoot.querySelector("input[name='password']").value, "", "password should be blank");
is(gLoginItem.shadowRoot.querySelector("modal-input[name='username']").value, "", "username should be blank");
is(gLoginItem.shadowRoot.querySelector("modal-input[name='password']").value, "", "password should be blank");
is(gLoginItem.shadowRoot.querySelector(".time-created").textContent, "", "time-created should be blank");
is(gLoginItem.shadowRoot.querySelector(".time-changed").textContent, "", "time-changed should be blank");
is(gLoginItem.shadowRoot.querySelector(".time-used").textContent, "", "time-used should be blank");
......@@ -66,8 +67,8 @@ add_task(async function test_set_login() {
await asyncElementRendered();
is(gLoginItem.shadowRoot.querySelector(".hostname").textContent, TEST_LOGIN_1.hostname, "hostname should be populated");
is(gLoginItem.shadowRoot.querySelector("input[name='username']").value, TEST_LOGIN_1.username, "username should be populated");
is(gLoginItem.shadowRoot.querySelector("input[name='password']").value, TEST_LOGIN_1.password, "password should be populated");
is(gLoginItem.shadowRoot.querySelector("modal-input[name='username']").value, TEST_LOGIN_1.username, "username should be populated");
is(gLoginItem.shadowRoot.querySelector("modal-input[name='password']").value, TEST_LOGIN_1.password, "password should be populated");
is(gLoginItem.shadowRoot.querySelector(".time-created").textContent, TEST_LOGIN_1.timeCreated, "time-created should be populated");
is(gLoginItem.shadowRoot.querySelector(".time-changed").textContent, TEST_LOGIN_1.timePasswordChanged, "time-changed should be populated");
is(gLoginItem.shadowRoot.querySelector(".time-used").textContent, TEST_LOGIN_1.timeLastUsed, "time-used should be populated");
......@@ -79,8 +80,8 @@ add_task(async function test_different_login_modified() {
await asyncElementRendered();
is(gLoginItem.shadowRoot.querySelector(".hostname").textContent, TEST_LOGIN_1.hostname, "hostname should be unchanged");
is(gLoginItem.shadowRoot.querySelector("input[name='username']").value, TEST_LOGIN_1.username, "username should be unchanged");
is(gLoginItem.shadowRoot.querySelector("input[name='password']").value, TEST_LOGIN_1.password, "password should be unchanged");
is(gLoginItem.shadowRoot.querySelector("modal-input[name='username']").value, TEST_LOGIN_1.username, "username should be unchanged");
is(gLoginItem.shadowRoot.querySelector("modal-input[name='password']").value, TEST_LOGIN_1.password, "password should be unchanged");
is(gLoginItem.shadowRoot.querySelector(".time-created").textContent, TEST_LOGIN_1.timeCreated, "time-created should be unchanged");
is(gLoginItem.shadowRoot.querySelector(".time-changed").textContent, TEST_LOGIN_1.timePasswordChanged, "time-changed should be unchanged");
is(gLoginItem.shadowRoot.querySelector(".time-used").textContent, TEST_LOGIN_1.timeLastUsed, "time-used should be unchanged");
......@@ -92,8 +93,8 @@ add_task(async function test_different_login_removed() {
await asyncElementRendered();
is(gLoginItem.shadowRoot.querySelector(".hostname").textContent, TEST_LOGIN_1.hostname, "hostname should be unchanged");
is(gLoginItem.shadowRoot.querySelector("input[name='username']").value, TEST_LOGIN_1.username, "username should be unchanged");
is(gLoginItem.shadowRoot.querySelector("input[name='password']").value, TEST_LOGIN_1.password, "password should be unchanged");
is(gLoginItem.shadowRoot.querySelector("modal-input[name='username']").value, TEST_LOGIN_1.username, "username should be unchanged");
is(gLoginItem.shadowRoot.querySelector("modal-input[name='password']").value, TEST_LOGIN_1.password, "password should be unchanged");
is(gLoginItem.shadowRoot.querySelector(".time-created").textContent, TEST_LOGIN_1.timeCreated, "time-created should be unchanged");
is(gLoginItem.shadowRoot.querySelector(".time-changed").textContent, TEST_LOGIN_1.timePasswordChanged, "time-changed should be unchanged");
is(gLoginItem.shadowRoot.querySelector(".time-used").textContent, TEST_LOGIN_1.timeLastUsed, "time-used should be unchanged");
......@@ -105,8 +106,8 @@ add_task(async function test_login_modified() {
await asyncElementRendered();
is(gLoginItem.shadowRoot.querySelector(".hostname").textContent, modifiedLogin.hostname, "hostname should be updated");
is(gLoginItem.shadowRoot.querySelector("input[name='username']").value, modifiedLogin.username, "username should be updated");
is(gLoginItem.shadowRoot.querySelector("input[name='password']").value, modifiedLogin.password, "password should be updated");
is(gLoginItem.shadowRoot.querySelector("modal-input[name='username']").value, modifiedLogin.username, "username should be updated");
is(gLoginItem.shadowRoot.querySelector("modal-input[name='password']").value, modifiedLogin.password, "password should be updated");
is(gLoginItem.shadowRoot.querySelector(".time-created").textContent, modifiedLogin.timeCreated, "time-created should be updated");
is(gLoginItem.shadowRoot.querySelector(".time-changed").textContent, modifiedLogin.timePasswordChanged, "time-changed should be updated");
is(gLoginItem.shadowRoot.querySelector(".time-used").textContent, modifiedLogin.timeLastUsed, "time-used should be updated");
......@@ -117,8 +118,8 @@ add_task(async function test_login_removed() {
await asyncElementRendered();
is(gLoginItem.shadowRoot.querySelector(".hostname").textContent, "", "hostname should be cleared");
is(gLoginItem.shadowRoot.querySelector("input[name='username']").value, "", "username should be cleared");
is(gLoginItem.shadowRoot.querySelector("input[name='password']").value, "", "password should be cleared");
is(gLoginItem.shadowRoot.querySelector("modal-input[name='username']").value, "", "username should be cleared");
is(gLoginItem.shadowRoot.querySelector("modal-input[name='password']").value, "", "password should be cleared");
is(gLoginItem.shadowRoot.querySelector(".time-created").textContent, "", "time-created should be cleared");
is(gLoginItem.shadowRoot.querySelector(".time-changed").textContent, "", "time-changed should be cleared");
is(gLoginItem.shadowRoot.querySelector(".time-used").textContent, "", "time-used should be cleared");
......
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