--- a/browser/extensions/formautofill/content/formautofill.css
+++ b/browser/extensions/formautofill/content/formautofill.css
@@ -1,7 +1,17 @@
 /* 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/. */
 
-.autocomplete-richlistitem[originaltype="autofill-profile"] {
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-profile"] {
+  display: block;
+  margin: 0;
+  padding: 0;
+  height: auto;
+  min-height: auto;
+
   -moz-binding: url("chrome://formautofill/content/formautofill.xml#autocomplete-profile-listitem");
 }
+
+#PopupAutoComplete[firstresultstyle="autofill-profile"] {
+  min-width: 150px !important;
+}

--- a/browser/extensions/formautofill/content/formautofill.xml
+++ b/browser/extensions/formautofill/content/formautofill.xml
@@ -5,16 +5,21 @@
 
 <bindings id="formautofillBindings"
           xmlns="http://www.mozilla.org/xbl"
           xmlns:html="http://www.w3.org/1999/xhtml"
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:xbl="http://www.mozilla.org/xbl">
 
   <binding id="autocomplete-profile-listitem" extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
+    <resources>
+      <stylesheet src="chrome://formautofill-shared/skin/autocomplete-item.css"/>
+      <stylesheet src="chrome://formautofill/skin/autocomplete-item.css"/>
+    </resources>
+
     <xbl:content xmlns="http://www.w3.org/1999/xhtml">
       <div anonid="profile-item-box" class="profile-item-box">
         <div class="profile-label-col profile-item-col">
           <span anonid="profile-label" class="profile-label"></span>
         </div>
         <div class="profile-comment-col profile-item-col">
           <span anonid="profile-comment" class="profile-comment"></span>
         </div>
@@ -59,16 +64,19 @@
         <![CDATA[
           let outerBoxRect = this.parentNode.getBoundingClientRect();
           let value = this.getAttribute("ac-value");
           let comment = this.getAttribute("ac-comment");
 
           this._comment.textContent = comment;
           this._label.textContent = value;
 
+          // Make item fit in popup as XUL box could not constrain
+          // item's width
+          this._itemBox.style.width =  outerBoxRect.width + "px";
           // Use two-lines layout when width is smaller than 150px
           if (outerBoxRect.width <= 150) {
             this._itemBox.setAttribute("size", "small");
           } else {
             this._itemBox.removeAttribute("size");
           }
         ]]>
         </body>

--- a/browser/extensions/formautofill/jar.mn
+++ b/browser/extensions/formautofill/jar.mn
@@ -3,8 +3,14 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 [features/formautofill@mozilla.org] chrome.jar:
 % resource formautofill %res/
   res/ (*.jsm)
 
 % content formautofill %content/
   content/ (content/*)
+
+% skin formautofill classic/1.0 %skin/linux/
+% skin formautofill classic/1.0 %skin/osx/ os=Darwin
+% skin formautofill classic/1.0 %skin/windows/ os=WINNT
+% skin formautofill-shared classic/1.0 %skin/shared/
+  skin/  (skin/*)

new file mode 100644
--- /dev/null
+++ b/browser/extensions/formautofill/skin/linux/autocomplete-item.css
@@ -0,0 +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;
+}
+
+.profile-item-box > .profile-item-col > .profile-comment {
+  font-size: .7em;
+}

new file mode 100644
--- /dev/null
+++ b/browser/extensions/formautofill/skin/osx/autocomplete-item.css
@@ -0,0 +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;
+}
+
+.profile-item-box > .profile-item-col > .profile-comment {
+  font-size: .9em;
+}

new file mode 100644
--- /dev/null
+++ b/browser/extensions/formautofill/skin/shared/autocomplete-item.css
@@ -0,0 +1,65 @@
+/* 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");
+
+
+xul|richlistitem[originaltype="autofill-profile"][selected="true"] > .profile-item-box {
+  background-color: #F2F2F2;
+}
+
+.profile-item-box {
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(38,38,38,.15);
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-inline-start: 16px;
+  padding-inline-end: 10px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.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%;
+}
+
+.profile-item-box > .profile-label-col {
+  padding-inline-end: 10px;
+  text-align: start;
+}
+
+.profile-item-box > .profile-comment-col {
+  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;
+  text-align: start;
+}

new file mode 100644
--- /dev/null
+++ b/browser/extensions/formautofill/skin/windows/autocomplete-item.css
@@ -0,0 +1,21 @@
+/* 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;
+  }
+}

--- a/toolkit/components/satchel/AutoCompletePopup.jsm
+++ b/toolkit/components/satchel/AutoCompletePopup.jsm
@@ -150,16 +150,18 @@ this.AutoCompletePopup = {
         tabbrowser.selectedBrowser != browser) {
       // We were sent a message from a window or tab that went into the
       // background, so we'll ignore it for now.
       return;
     }
 
     this.weakBrowser = Cu.getWeakReference(browser);
     this.openedPopup = browser.autoCompletePopup;
+    // the layout varies according to different result type
+    this.openedPopup.setAttribute("firstresultstyle", results[0].style);
     this.openedPopup.hidden = false;
     // don't allow the popup to become overly narrow
     this.openedPopup.setAttribute("width", Math.max(100, rect.width));
     this.openedPopup.style.direction = dir;
 
     AutoCompleteResultView.setResults(results);
     this.openedPopup.view = AutoCompleteResultView;
     this.openedPopup.selectedIndex = -1;