Bug 1421737 - Part 2 - Convert the siteListItem XBL binding to plain JS and add a cookies row. r=Gijs

This commit primarily intends to add cookies to the site data manager,
but while touching this code I transformed the siteListItem XBL binding to plain JS.

This also removes the #SiteDataRemoveSelectedDialog binding rule, because it is
unnecessary, <dialog> elements already have this binding.

MozReview-Commit-ID: EpTd2E0vPN9

--HG--
extra : rebase_source : 90e6666e565aaa74bd2545e13534bdebe8f090ee

browser/components/preferences/jar.mn

@@ -35,9 +35,7 @@ browser.jar:
     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

browser/components/preferences/siteDataSettings.css

@@ -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");
-}

browser/components/preferences/siteDataSettings.js

@@ -16,16 +16,61 @@ 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)
@@ -50,6 +95,7 @@ let gSiteDataSettings = {
     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);
@@ -91,8 +137,8 @@ let gSiteDataSettings = {
     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;
@@ -108,6 +154,10 @@ let gSiteDataSettings = {
         };
         break;
 
+      case "cookiesCol":
+        sortFunc = (a, b) => a.cookies.length - b.cookies.length;
+        break;
+
       case "usageCol":
         sortFunc = (a, b) => a.usage - b.usage;
         break;
@@ -149,13 +199,7 @@ let gSiteDataSettings = {
         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();

browser/components/preferences/siteDataSettings.xul

@@ -12,7 +12,7 @@
 <!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();"
@@ -39,6 +39,7 @@
       <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>

browser/components/preferences/siteListItem.xml

@@ -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>

browser/locales/en-US/chrome/browser/preferences/siteDataSettings.dtd

@@ -2,9 +2,10 @@
    - 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">

browser/themes/shared/incontentprefs/siteDataSettings.css

@@ -9,8 +9,15 @@
   min-height: 20em;
 }
 
+#sitesList > richlistitem > hbox,
+.item-box > label {
+  -moz-box-flex: 1;
+}
+
 .item-box {
   padding: 5px 8px;
+  -moz-box-align: center;
+  width: 50px;
 }
 
 /**