--- a/browser/components/preferences/jar.mn
+++ b/browser/components/preferences/jar.mn
@@ -30,14 +30,12 @@ browser.jar:
     content/browser/preferences/containers.js
     content/browser/preferences/permissions.js
     content/browser/preferences/sanitize.xul
     content/browser/preferences/sanitize.js
     content/browser/preferences/selectBookmark.xul
     content/browser/preferences/selectBookmark.js
     content/browser/preferences/siteDataSettings.xul
     content/browser/preferences/siteDataSettings.js
-    content/browser/preferences/siteDataSettings.css
 *   content/browser/preferences/siteDataRemoveSelected.xul
     content/browser/preferences/siteDataRemoveSelected.js
-    content/browser/preferences/siteListItem.xml
     content/browser/preferences/translation.xul
     content/browser/preferences/translation.js

deleted file mode 100644
--- a/browser/components/preferences/siteDataSettings.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/* 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/. */
-
-#sitesList > richlistitem {
-  -moz-binding: url("chrome://browser/content/preferences/siteListItem.xml#siteListItem");
-}
-
-#SiteDataRemoveSelectedDialog {
-  -moz-binding: url("chrome://global/content/bindings/dialog.xml#dialog");
-}

--- a/browser/components/preferences/siteDataSettings.js
+++ b/browser/components/preferences/siteDataSettings.js
@@ -11,26 +11,71 @@ ChromeUtils.defineModuleGetter(this, "Do
                                "resource://gre/modules/DownloadUtils.jsm");
 
 "use strict";
 
 let gSiteDataSettings = {
 
   // Array of metadata of sites. Each array element is object holding:
   // - uri: uri of site; instance of nsIURI
+  // - baseDomain: base domain of the site
+  // - cookies: array of cookies of that site
   // - status: persistent-storage permission status
   // - usage: disk usage which site uses
   // - userAction: "remove" or "update-permission"; the action user wants to take.
-  //               If not specified, means no action to take
   _sites: null,
 
   _list: null,
   _searchBox: null,
   _prefStrBundle: null,
 
+  _createSiteListItem(site) {
+    let item = document.createElement("richlistitem");
+    item.setAttribute("host", site.host);
+    let container = document.createElement("hbox");
+
+    // Creates a new column item with the specified relative width.
+    function addColumnItem(value, flexWidth) {
+      let box = document.createElement("hbox");
+      box.className = "item-box";
+      box.setAttribute("flex", flexWidth);
+      let label = document.createElement("label");
+      label.setAttribute("crop", "end");
+      if (value) {
+        box.setAttribute("tooltiptext", value);
+        label.setAttribute("value", value);
+      }
+      box.appendChild(label);
+      container.appendChild(box);
+    }
+
+    // Add "Host" column.
+    addColumnItem(site.host, "4");
+
+    // Add "Status" column
+    addColumnItem(site.persisted ?
+      this._prefStrBundle.getString("persistent") : null, "2");
+
+    // Add "Cookies" column.
+    addColumnItem(site.cookies.length, "1");
+
+    // Add "Storage" column
+    if (site.usage > 0) {
+      let size = DownloadUtils.convertByteUnits(site.usage);
+      let str = this._prefStrBundle.getFormattedString("siteUsage", size);
+      addColumnItem(str, "1");
+    } else {
+      // Pass null to avoid showing "0KB" when there is no site data stored.
+      addColumnItem(null, "1");
+    }
+
+    item.appendChild(container);
+    return item;
+  },
+
   init() {
     function setEventListener(id, eventType, callback) {
       document.getElementById(id)
               .addEventListener(eventType, callback.bind(gSiteDataSettings));
     }
 
     this._list = document.getElementById("sitesList");
     this._searchBox = document.getElementById("searchBox");
@@ -45,16 +90,17 @@ let gSiteDataSettings = {
 
     let brandShortName = document.getElementById("bundle_brand").getString("brandShortName");
     let settingsDescription = document.getElementById("settingsDescription");
     settingsDescription.textContent = this._prefStrBundle.getFormattedString("siteDataSettings2.description", [brandShortName]);
 
     setEventListener("sitesList", "select", this.onSelect);
     setEventListener("hostCol", "click", this.onClickTreeCol);
     setEventListener("usageCol", "click", this.onClickTreeCol);
+    setEventListener("cookiesCol", "click", this.onClickTreeCol);
     setEventListener("statusCol", "click", this.onClickTreeCol);
     setEventListener("cancel", "command", this.close);
     setEventListener("save", "command", this.saveChanges);
     setEventListener("searchBox", "command", this.onCommandSearch);
     setEventListener("removeAll", "command", this.onClickRemoveAll);
     setEventListener("removeSelected", "command", this.onClickRemoveSelected);
   },
 
@@ -86,33 +132,37 @@ let gSiteDataSettings = {
       // Sort on the current column, flip the sorting direction
       sortDirection = sortDirection === "ascending" ? "descending" : "ascending";
     }
 
     let sortFunc = null;
     switch (col.id) {
       case "hostCol":
         sortFunc = (a, b) => {
-          let aHost = a.host.toLowerCase();
-          let bHost = b.host.toLowerCase();
+          let aHost = a.baseDomain.toLowerCase();
+          let bHost = b.baseDomain.toLowerCase();
           return aHost.localeCompare(bHost);
         };
         break;
 
       case "statusCol":
         sortFunc = (a, b) => {
           if (a.persisted && !b.persisted) {
             return 1;
           } else if (!a.persisted && b.persisted) {
             return -1;
           }
           return 0;
         };
         break;
 
+      case "cookiesCol":
+        sortFunc = (a, b) => a.cookies.length - b.cookies.length;
+        break;
+
       case "usageCol":
         sortFunc = (a, b) => a.usage - b.usage;
         break;
     }
     if (sortDirection === "descending") {
       sites.sort((a, b) => sortFunc(b, a));
     } else {
       sites.sort(sortFunc);
@@ -144,23 +194,17 @@ let gSiteDataSettings = {
       if (keyword && !host.includes(keyword)) {
         continue;
       }
 
       if (site.userAction === "remove") {
         continue;
       }
 
-      let size = DownloadUtils.convertByteUnits(site.usage);
-      let item = document.createElement("richlistitem");
-      item.setAttribute("host", host);
-      item.setAttribute("usage", this._prefStrBundle.getFormattedString("siteUsage", size));
-      if (site.persisted) {
-        item.setAttribute("status", this._prefStrBundle.getString("persistent"));
-      }
+      let item = this._createSiteListItem(site);
       this._list.appendChild(item);
     }
     this._updateButtonsState();
   },
 
   _removeSiteItems(items) {
     for (let i = items.length - 1; i >= 0; --i) {
       let item = items[i];

--- a/browser/components/preferences/siteDataSettings.xul
+++ b/browser/components/preferences/siteDataSettings.xul
@@ -7,17 +7,17 @@
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/content/preferences/siteDataSettings.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/preferences/in-content/siteDataSettings.css" type="text/css"?>
 
 <!DOCTYPE dialog SYSTEM "chrome://browser/locale/preferences/siteDataSettings.dtd" >
 
 <window id="SiteDataSettingsDialog" windowtype="Browser:SiteDataSettings"
-        class="windowDialog" title="&window.title;"
+        class="windowDialog" title="&window1.title;"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         style="width: 45em;"
         onload="gSiteDataSettings.init();"
         onkeypress="gSiteDataSettings.onKeyPress(event);"
         persist="screenX screenY width height">
 
   <script src="chrome://browser/content/preferences/siteDataSettings.js"/>
 
@@ -34,16 +34,17 @@
         placeholder="&searchTextboxPlaceHolder;" accesskey="&searchTextboxPlaceHolder.accesskey;"/>
     </hbox>
     <separator class="thin"/>
 
     <richlistbox id="sitesList" orient="vertical" flex="1">
       <listheader>
         <treecol flex="4" width="50" label="&hostCol.label;" id="hostCol"/>
         <treecol flex="2" width="50" label="&statusCol.label;" id="statusCol"/>
+        <treecol flex="1" width="50" label="&cookiesCol.label;" id="cookiesCol"/>
         <!-- Sorted by usage so the user can quickly see which sites use the most data. -->
         <treecol flex="1" width="50" label="&usageCol.label;" id="usageCol" data-isCurrentSortCol="true"/>
       </listheader>
     </richlistbox>
   </vbox>
 
   <hbox align="start">
     <button id="removeSelected" label="&removeSelected.label;" accesskey="&removeSelected.accesskey;"/>

deleted file mode 100644
--- a/browser/components/preferences/siteListItem.xml
+++ /dev/null
@@ -1,36 +0,0 @@
-<?xml version="1.0"?>
-
-<!-- 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/. -->
-<!-- import-globals-from siteDataSettings.js -->
-
-<!DOCTYPE overlay [
-  <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
-  <!ENTITY % applicationsDTD SYSTEM "chrome://browser/locale/preferences/siteDataSettings.dtd">
-  %brandDTD;
-  %applicationsDTD;
-]>
-
-<bindings id="siteListItemBindings"
-          xmlns="http://www.mozilla.org/xbl"
-          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-          xmlns:xbl="http://www.mozilla.org/xbl">
-
-  <binding id="siteListItem" extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
-    <content>
-      <xul:hbox flex="1">
-        <xul:hbox flex="4" width="50" class="item-box" align="center" xbl:inherits="tooltiptext=host">
-          <xul:label flex="1" crop="end" xbl:inherits="value=host"/>
-        </xul:hbox>
-        <xul:hbox flex="2" width="50" class="item-box" align="center" xbl:inherits="tooltiptext=status">
-          <xul:label flex="1" crop="end" xbl:inherits="value=status"/>
-        </xul:hbox>
-        <xul:hbox flex="1" width="50" class="item-box" align="center" xbl:inherits="tooltiptext=usage">
-          <xul:label flex="1" crop="end" xbl:inherits="value=usage"/>
-        </xul:hbox>
-      </xul:hbox>
-    </content>
-  </binding>
-
-</bindings>

--- a/browser/locales/en-US/chrome/browser/preferences/siteDataSettings.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/siteDataSettings.dtd
@@ -1,15 +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/. -->
 
-<!ENTITY     window.title                  "Settings - Site Data">
+<!ENTITY     window1.title                 "Settings - Cookies and Site Data">
 <!ENTITY     hostCol.label                 "Site">
 <!ENTITY     statusCol.label               "Status">
+<!ENTITY     cookiesCol.label              "Cookies">
 <!ENTITY     usageCol.label                "Storage">
 <!ENTITY     searchTextboxPlaceHolder             "Search websites">
 <!ENTITY     searchTextboxPlaceHolder.accesskey   "S">
 <!ENTITY     removeSelected.label          "Remove Selected">
 <!ENTITY     removeSelected.accesskey      "r">
 <!ENTITY     save.label                    "Save Changes">
 <!ENTITY     save.accesskey                "a">
 <!ENTITY     cancel.label                  "Cancel">

--- a/browser/themes/shared/incontentprefs/siteDataSettings.css
+++ b/browser/themes/shared/incontentprefs/siteDataSettings.css
@@ -4,18 +4,25 @@
 
 /**
  * Site Data - Settings dialog
  */
 #sitesList {
   min-height: 20em;
 }
 
+#sitesList > richlistitem > hbox,
+.item-box > label {
+  -moz-box-flex: 1;
+}
+
 .item-box {
   padding: 5px 8px;
+  -moz-box-align: center;
+  width: 50px;
 }
 
 /**
  * Confirmation dialog of removing sites selected
  */
 #SiteDataRemoveSelectedDialog {
   padding: 16px;
 }