Bug 1548381 - Password generation autocomplete UI. r=sfoster

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

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Matthew Noorenberghe 2019-05-21 00:24:20 +00:00
Родитель 49af8c9279
Коммит c7e2647572
5 изменённых файлов: 24 добавлений и 3 удалений

Просмотреть файл

@ -71,7 +71,8 @@
opacity: .6; opacity: .6;
} }
/* Login form autocompletion with and without origin showing */ /* Login form autocompletion (with and without origin showing) and generated passwords */
#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon, #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon { #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
display: initial; display: initial;
@ -80,16 +81,25 @@
fill: GrayText; fill: GrayText;
} }
#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"][selected] > .two-line-wrapper > .ac-site-icon,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"][selected] > .two-line-wrapper > .ac-site-icon, #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"][selected] > .two-line-wrapper > .ac-site-icon,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] { #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
fill: HighlightText; fill: HighlightText;
} }
/* Login form autocompletion with origin showing */ /* Login form autocompletion with origin showing and generated passwords */
#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"],
#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] { #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] {
padding: 4px; padding: 4px;
} }
#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] + richlistitem[originaltype="generatedPassword"],
#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] + richlistitem[originaltype="generatedPassword"] {
/* Separator between logins and generated passwords */
border-top: 1px solid var(--panel-separator-color);
}
/* Insecure field warning */ /* Insecure field warning */
#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] { #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
background-color: var(--arrowpanel-dimmed); background-color: var(--arrowpanel-dimmed);

Просмотреть файл

@ -147,6 +147,7 @@ class LoginAutocompleteItem extends AutocompleteItem {
class GeneratedPasswordAutocompleteItem extends AutocompleteItem { class GeneratedPasswordAutocompleteItem extends AutocompleteItem {
constructor(generatedPassword) { constructor(generatedPassword) {
super("generatedPassword"); super("generatedPassword");
this.comment = generatedPassword;
this.value = generatedPassword; this.value = generatedPassword;
XPCOMUtils.defineLazyGetter(this, "label", () => { XPCOMUtils.defineLazyGetter(this, "label", () => {

Просмотреть файл

@ -73,6 +73,7 @@ let expectedResults = [
value: "", value: "",
label: "This connection is not secure. Logins entered here could be compromised. Learn More", label: "This connection is not secure. Logins entered here could be compromised. Learn More",
style: "insecureWarning", style: "insecureWarning",
comment: "",
}, { }, {
value: "", value: "",
label: "View Saved Logins", label: "View Saved Logins",
@ -89,6 +90,7 @@ let expectedResults = [
value: "", value: "",
label: "This connection is not secure. Logins entered here could be compromised. Learn More", label: "This connection is not secure. Logins entered here could be compromised. Learn More",
style: "insecureWarning", style: "insecureWarning",
comment: "",
}, { }, {
value: "", value: "",
label: LABEL_NO_USERNAME, label: LABEL_NO_USERNAME,
@ -167,6 +169,7 @@ let expectedResults = [
value: "", value: "",
label: "This connection is not secure. Logins entered here could be compromised. Learn More", label: "This connection is not secure. Logins entered here could be compromised. Learn More",
style: "insecureWarning", style: "insecureWarning",
comment: "",
}, { }, {
value: "emptypass1", value: "emptypass1",
label: LABEL_NO_USERNAME, label: LABEL_NO_USERNAME,
@ -393,6 +396,7 @@ let expectedResults = [
value: "", value: "",
label: "This connection is not secure. Logins entered here could be compromised. Learn More", label: "This connection is not secure. Logins entered here could be compromised. Learn More",
style: "insecureWarning", style: "insecureWarning",
comment: "",
}, { }, {
value: "", value: "",
label: LABEL_NO_USERNAME, label: LABEL_NO_USERNAME,
@ -471,6 +475,7 @@ let expectedResults = [
value: "", value: "",
label: "This connection is not secure. Logins entered here could be compromised. Learn More", label: "This connection is not secure. Logins entered here could be compromised. Learn More",
style: "insecureWarning", style: "insecureWarning",
comment: "",
}, { }, {
value: "emptypass1", value: "emptypass1",
label: LABEL_NO_USERNAME, label: LABEL_NO_USERNAME,
@ -706,6 +711,7 @@ let expectedResults = [
value: "9ljgfd4shyktb45", value: "9ljgfd4shyktb45",
label: "Use Generated Password", label: "Use Generated Password",
style: "generatedPassword", style: "generatedPassword",
comment: "9ljgfd4shyktb45",
}, { }, {
value: "", value: "",
label: "View Saved Logins", label: "View Saved Logins",
@ -744,7 +750,7 @@ add_task(async function test_all_patterns() {
equal(actual.getValueAt(index), item.value, `Value ${index}`); equal(actual.getValueAt(index), item.value, `Value ${index}`);
equal(actual.getLabelAt(index), item.label, `Label ${index}`); equal(actual.getLabelAt(index), item.label, `Label ${index}`);
equal(actual.getStyleAt(index), item.style, `Style ${index}`); equal(actual.getStyleAt(index), item.style, `Style ${index}`);
equal(actual.getCommentAt(index), item.comment || "", `Comment ${index}`); equal(actual.getCommentAt(index), item.comment, `Comment ${index}`);
}); });
if (pattern.items.length != 0) { if (pattern.items.length != 0) {

Просмотреть файл

@ -377,6 +377,7 @@ MozElements.MozAutocompleteRichlistboxPopup = class MozAutocompleteRichlistboxPo
"autofill-footer", "autofill-footer",
"autofill-clear-button", "autofill-clear-button",
"autofill-insecureWarning", "autofill-insecureWarning",
"generatedPassword",
"insecureWarning", "insecureWarning",
"loginsFooter", "loginsFooter",
"loginWithOrigin", "loginWithOrigin",
@ -409,6 +410,7 @@ MozElements.MozAutocompleteRichlistboxPopup = class MozAutocompleteRichlistboxPo
case "loginsFooter": case "loginsFooter":
options = { is: "autocomplete-richlistitem-logins-footer" }; options = { is: "autocomplete-richlistitem-logins-footer" };
break; break;
case "generatedPassword":
case "loginWithOrigin": case "loginWithOrigin":
options = { is: "autocomplete-two-line-richlistitem" }; options = { is: "autocomplete-two-line-richlistitem" };
break; break;

Просмотреть файл

@ -1015,6 +1015,7 @@
"autofill-footer", "autofill-footer",
"autofill-clear-button", "autofill-clear-button",
"autofill-insecureWarning", "autofill-insecureWarning",
"generatedPassword",
"insecureWarning", "insecureWarning",
"loginsFooter", "loginsFooter",
"loginWithOrigin", "loginWithOrigin",
@ -1047,6 +1048,7 @@
case "loginsFooter": case "loginsFooter":
options = { is: "autocomplete-richlistitem-logins-footer" }; options = { is: "autocomplete-richlistitem-logins-footer" };
break; break;
case "generatedPassword":
case "loginWithOrigin": case "loginWithOrigin":
options = { is: "autocomplete-two-line-richlistitem" }; options = { is: "autocomplete-two-line-richlistitem" };
break; break;