Bug 1129629 - Provide an indication to the user when auto-complete is suggesting saved logins. r=mconley,rfeeley
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Wed, 23 Nov 2016 14:06:16 -0800
changeset 324131 089cb9e78d4a7b378f264f7371ec3befe9116b03
parent 324130 55405164269f027b2e028d56b10c8aa5261b997f
child 324132 49351d35d695abff020daa7a197516bbe511f972
push id24
push usermaklebus@msu.edu
push dateTue, 20 Dec 2016 03:11:33 +0000
reviewersmconley, rfeeley
bugs1129629
milestone53.0a1
Bug 1129629 - Provide an indication to the user when auto-complete is suggesting saved logins. r=mconley,rfeeley MozReview-Commit-ID: PU65IjwPcD
browser/themes/shared/autocomplete.inc.css
browser/themes/shared/notification-icons.svg
toolkit/components/passwordmgr/LoginManagerContent.jsm
--- a/browser/themes/shared/autocomplete.inc.css
+++ b/browser/themes/shared/autocomplete.inc.css
@@ -7,25 +7,42 @@
 #PopupAutoComplete > richlistbox > richlistitem {
   height: 20px;
   min-height: 20px;
   border: 0;
   border-radius: 0;
   padding: 0px 1px 0px 1px;
 }
 
+#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
+  margin-inline-start: 4px;
+  margin-inline-end: 0;
+}
+
 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
   font: icon;
-  margin-inline-start: 6px;
+  margin-inline-start: 4px;
 }
 
 #PopupAutoComplete > richlistbox {
   padding: 0;
 }
 
+
+/* Login form autocompletion */
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
+  display: initial;
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
+}
+
+
 /* Insecure field warning */
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
   background-color: #F6F6F6; /* Bug 1319176 */
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
   list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
 }
--- a/browser/themes/shared/notification-icons.svg
+++ b/browser/themes/shared/notification-icons.svg
@@ -16,16 +16,21 @@
     }
     .blocked:target ~ #strikeout {
       display: block;
     }
     .blocked {
       clip-path: url(#clip);
     }
 
+    #login-highlighted {
+      fill: HighlightText;
+      fill-opacity: 1;
+    }
+
     #plugin-blocked,
     #plugin-blocked:target ~ #strikeout {
       fill: #d92215;
       fill-opacity: 1;
     }
 
     #camera-sharing,
     #microphone-sharing,
@@ -68,16 +73,17 @@
   <use id="geo-linux-blocked" class="blocked" xlink:href="#geo-linux-icon" />
   <use id="geo-linux-detailed" xlink:href="#geo-linux-detailed-icon" />
   <use id="geo-windows" xlink:href="#geo-windows-icon" />
   <use id="geo-windows-blocked" class="blocked" xlink:href="#geo-windows-icon" />
   <use id="geo-windows-detailed" xlink:href="#geo-windows-detailed-icon" />
   <use id="indexedDB" xlink:href="#indexedDB-icon" />
   <use id="indexedDB-blocked" class="blocked" xlink:href="#indexedDB-icon" />
   <use id="login" xlink:href="#login-icon" />
+  <use id="login-highlighted" class="highlighted" xlink:href="#login-icon" />
   <use id="login-detailed" xlink:href="#login-detailed-icon" />
   <use id="microphone" xlink:href="#microphone-icon" />
   <use id="microphone-sharing" xlink:href="#microphone-icon"/>
   <use id="microphone-blocked" class="blocked" xlink:href="#microphone-icon" />
   <use id="microphone-detailed" xlink:href="#microphone-detailed-icon" />
   <use id="plugin" xlink:href="#plugin-icon" />
   <use id="plugin-blocked" class="blocked" xlink:href="#plugin-icon" />
   <use id="popup" xlink:href="#popup-icon" />
--- a/toolkit/components/passwordmgr/LoginManagerContent.jsm
+++ b/toolkit/components/passwordmgr/LoginManagerContent.jsm
@@ -1362,17 +1362,18 @@ UserAutoCompleteResult.prototype = {
   getCommentAt(index) {
     return "";
   },
 
   getStyleAt(index) {
     if (index == 0 && this._showInsecureFieldWarning) {
       return "insecureWarning";
     }
-    return "";
+
+    return "login";
   },
 
   getImageAt(index) {
     return "";
   },
 
   getFinalCompleteValueAt(index) {
     return this.getValueAt(index);