Bug 1129629 - Provide an indication to the user when auto-complete is suggesting saved logins. r=mconley
MozReview-Commit-ID: EQmCKnZBWAd
--- 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);