Bug 1553209 - Show the title on login list items instead of the complete origin. r=MattN

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

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Jared Wein 2019-06-14 13:53:04 +00:00
parent 63fa17f03e
commit 0a1b917c07
4 changed files with 9 additions and 9 deletions

View File

@ -83,7 +83,7 @@
<template id="login-list-item-template">
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
<link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-list-item.css">
<span class="origin"></span>
<span class="title"></span>
<span class="username"></span>
</template>

View File

@ -29,11 +29,11 @@
background-color: var(--in-content-box-background-hover);
}
.origin {
.title {
font-weight: bold;
}
.origin,
.title,
.username {
display: block;
max-width: 50ch;

View File

@ -25,18 +25,18 @@ export default class LoginListItem extends HTMLElement {
}
render() {
let origin = this.shadowRoot.querySelector(".origin");
let title = this.shadowRoot.querySelector(".title");
let username = this.shadowRoot.querySelector(".username");
if (!this._login.guid) {
this.removeAttribute("guid");
origin.textContent = this.getAttribute("new-login-title");
title.textContent = this.getAttribute("new-login-title");
username.textContent = this.getAttribute("new-login-subtitle");
return;
}
this.setAttribute("guid", this._login.guid);
origin.textContent = this._login.origin;
title.textContent = this._login.title;
username.textContent = this._login.username.trim() || this.getAttribute("missing-username");
}

View File

@ -93,7 +93,7 @@ add_task(async function test_populated_list() {
is(loginListItems.length, 3, "A blank login and the two stored logins should be displayed");
ok(!loginListItems[0].hasAttribute("guid"), "first login-list-item should be the 'new' item");
is(loginListItems[1].getAttribute("guid"), TEST_LOGIN_1.guid, "login-list-item should have correct guid attribute");
is(loginListItems[1].shadowRoot.querySelector(".origin").textContent, TEST_LOGIN_1.origin,
is(loginListItems[1].shadowRoot.querySelector(".title").textContent, TEST_LOGIN_1.title,
"login-list-item origin should match");
is(loginListItems[1].shadowRoot.querySelector(".username").textContent, TEST_LOGIN_1.username,
"login-list-item username should match");
@ -161,7 +161,7 @@ add_task(async function test_login_modified() {
let loginListItems = gLoginList.shadowRoot.querySelectorAll("login-list-item");
is(loginListItems.length, 2, "Both logins should be displayed");
is(loginListItems[0].getAttribute("guid"), TEST_LOGIN_1.guid, "login-list-item should have correct guid attribute");
is(loginListItems[0].shadowRoot.querySelector(".origin").textContent, TEST_LOGIN_1.origin,
is(loginListItems[0].shadowRoot.querySelector(".title").textContent, TEST_LOGIN_1.title,
"login-list-item origin should match");
is(loginListItems[0].shadowRoot.querySelector(".username").textContent, modifiedLogin.username,
"login-list-item username should have been updated");
@ -178,7 +178,7 @@ add_task(async function test_login_added() {
is(loginListItems[0].getAttribute("guid"), TEST_LOGIN_1.guid, "login-list-item1 should have correct guid attribute");
is(loginListItems[1].getAttribute("guid"), TEST_LOGIN_2.guid, "login-list-item2 should have correct guid attribute");
is(loginListItems[2].getAttribute("guid"), newLogin.guid, "login-list-item3 should have correct guid attribute");
is(loginListItems[2].shadowRoot.querySelector(".origin").textContent, newLogin.origin,
is(loginListItems[2].shadowRoot.querySelector(".title").textContent, newLogin.title,
"login-list-item origin should match");
is(loginListItems[2].shadowRoot.querySelector(".username").textContent, newLogin.username,
"login-list-item username should have been updated");