Bug 1548381 - Password generation autocomplete UI. r=sfoster

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

--HG--
extra : moz-landing-system : lando

browser/themes/shared/autocomplete.inc.css

@@ -71,7 +71,8 @@
   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="login"] > .ac-site-icon {
   display: initial;
@@ -80,16 +81,25 @@
   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="login"] > .ac-site-icon[selected] {
   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"] {
   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 */
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
   background-color: var(--arrowpanel-dimmed);

toolkit/components/passwordmgr/LoginAutoCompleteResult.jsm

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

toolkit/components/passwordmgr/test/unit/test_login_autocomplete_result.js

@@ -73,6 +73,7 @@ let expectedResults = [
       value: "",
       label: "This connection is not secure. Logins entered here could be compromised. Learn More",
       style: "insecureWarning",
+      comment: "",
     }, {
       value: "",
       label: "View Saved Logins",
@@ -89,6 +90,7 @@ let expectedResults = [
       value: "",
       label: "This connection is not secure. Logins entered here could be compromised. Learn More",
       style: "insecureWarning",
+      comment: "",
     }, {
       value: "",
       label: LABEL_NO_USERNAME,
@@ -167,6 +169,7 @@ let expectedResults = [
       value: "",
       label: "This connection is not secure. Logins entered here could be compromised. Learn More",
       style: "insecureWarning",
+      comment: "",
     }, {
       value: "emptypass1",
       label: LABEL_NO_USERNAME,
@@ -393,6 +396,7 @@ let expectedResults = [
       value: "",
       label: "This connection is not secure. Logins entered here could be compromised. Learn More",
       style: "insecureWarning",
+      comment: "",
     }, {
       value: "",
       label: LABEL_NO_USERNAME,
@@ -471,6 +475,7 @@ let expectedResults = [
       value: "",
       label: "This connection is not secure. Logins entered here could be compromised. Learn More",
       style: "insecureWarning",
+      comment: "",
     }, {
       value: "emptypass1",
       label: LABEL_NO_USERNAME,
@@ -706,6 +711,7 @@ let expectedResults = [
       value: "9ljgfd4shyktb45",
       label: "Use Generated Password",
       style: "generatedPassword",
+      comment: "9ljgfd4shyktb45",
     }, {
       value: "",
       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.getLabelAt(index), item.label, `Label ${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) {

toolkit/content/widgets/autocomplete-popup.js

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

toolkit/content/widgets/autocomplete.xml

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