Bug 1357690 - Increase content density of autofill autocomplte results. r=MattN draft
authorRay Lin <ralin@mozilla.com>
Thu, 20 Apr 2017 10:39:44 +0800
changeset 566768 38c68bd27957627426c0f97016834808e0533130
parent 566767 d3b5f46026fd2da1cbec524927cc095f96fbaa37
child 625413 a83bed1d1546f609eb38e2277060d263383b2d28
push id55321
push userbmo:ralin@mozilla.com
push dateSun, 23 Apr 2017 05:30:12 +0000
reviewersMattN
bugs1357690
milestone55.0a1
Bug 1357690 - Increase content density of autofill autocomplte results. r=MattN MozReview-Commit-ID: EpV7ZSbq0Ia
browser/extensions/formautofill/skin/linux/autocomplete-item.css
browser/extensions/formautofill/skin/osx/autocomplete-item.css
browser/extensions/formautofill/skin/shared/autocomplete-item.css
browser/extensions/formautofill/skin/windows/autocomplete-item.css
--- 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;
   }