Bug 1357690 - Increase content density of autofill autocomplte results. r=MattN
MozReview-Commit-ID: EpV7ZSbq0Ia
--- a/browser/extensions/formautofill/skin/linux/autocomplete-item.css
+++ b/browser/extensions/formautofill/skin/linux/autocomplete-item.css
@@ -1,14 +1,14 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@namespace url("http://www.w3.org/1999/xhtml");
.profile-item-box > .profile-item-col > .profile-label {
- font-size: .9em;
+ font-size: .84em;
}
.profile-item-box > .profile-item-col > .profile-comment {
font-size: .7em;
}
--- a/browser/extensions/formautofill/skin/osx/autocomplete-item.css
+++ b/browser/extensions/formautofill/skin/osx/autocomplete-item.css
@@ -1,14 +1,14 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@namespace url("http://www.w3.org/1999/xhtml");
.profile-item-box > .profile-item-col > .profile-label {
- font-size: 1.18em;
+ font-size: 1.09em;
}
.profile-item-box > .profile-item-col > .profile-comment {
font-size: .9em;
}
--- a/browser/extensions/formautofill/skin/shared/autocomplete-item.css
+++ b/browser/extensions/formautofill/skin/shared/autocomplete-item.css
@@ -6,61 +6,65 @@
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
xul|richlistitem[originaltype="autofill-profile"][selected="true"] > .profile-item-box {
background-color: #F2F2F2;
}
.profile-item-box {
+ --item-padding-vertical: 6px;
+ --item-padding-horizontal: 10px;
+ --col-spacer: 7px;
+ --item-width: calc(50% - (var(--col-spacer) / 2));
+}
+
+.profile-item-box[size="small"] {
+ --item-padding-vertical: 7px;
+ --col-spacer: 0px;
+ --row-spacer: 3px;
+ --item-width: 100%;
+}
+
+.profile-item-box {
box-sizing: border-box;
+ margin: 0;
border-bottom: 1px solid rgba(38,38,38,.15);
- padding-top: 6px;
- padding-bottom: 6px;
- padding-inline-start: 16px;
- padding-inline-end: 10px;
+ padding: var(--item-padding-vertical) 0;
+ padding-inline-start: var(--item-padding-horizontal);
+ padding-inline-end: var(--item-padding-horizontal);
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
color: -moz-FieldText
}
.profile-item-box:last-child {
border-bottom: 0;
}
.profile-item-box > .profile-item-col {
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- width: 50%;
+ width: var(--item-width);
}
.profile-item-box > .profile-label-col {
- padding-inline-end: 10px;
text-align: start;
}
.profile-item-box > .profile-comment-col {
+ margin-inline-start: var(--col-spacer);
text-align: end;
color: GrayText;
}
.profile-item-box[size="small"] {
- padding-top: 10px;
- padding-bottom: 10px;
flex-direction: column;
}
-.profile-item-box[size="small"] > .profile-item-col {
- width: 100%;
-}
-
-.profile-item-box[size="small"] > .profile-label-col {
- padding-inline-end: 0;
-}
-
.profile-item-box[size="small"] > .profile-comment-col {
- margin-top: 7px;
+ margin-top: var(--row-spacer);
text-align: start;
}
--- a/browser/extensions/formautofill/skin/windows/autocomplete-item.css
+++ b/browser/extensions/formautofill/skin/windows/autocomplete-item.css
@@ -1,20 +1,16 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@namespace url("http://www.w3.org/1999/xhtml");
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-.profile-item-box > .profile-item-col > .profile-label {
- font-size: 1.08em;
-}
-
.profile-item-box > .profile-item-col > .profile-comment {
font-size: .83em;
}
@media (-moz-windows-default-theme: 0) {
xul|richlistitem[originaltype="autofill-profile"][selected="true"] > .profile-item-box {
background-color: Highlight;
}