Site Settings Desktop: Polish the Site Data section.

chrome/browser/resources/settings/site_settings/cookie_tree_node.js

Index: chrome/browser/resources/settings/site_settings/cookie_tree_node.js
diff --git a/chrome/browser/resources/settings/site_settings/cookie_tree_node.js b/chrome/browser/resources/settings/site_settings/cookie_tree_node.js
index 0763e803229157efe31ac345b5c7ac00a1530b7c..c6d9593f9a761f200e5d9a1356c21356137de6e5 100644
--- a/chrome/browser/resources/settings/site_settings/cookie_tree_node.js
+++ b/chrome/browser/resources/settings/site_settings/cookie_tree_node.js
@@ -12,6 +12,12 @@
 var CookieDetails;
 
 /**
+ * @typedef {{content: string,
+ *            label: string}}
+ */
+var CookieDataForDisplay;
+
+/**
  * @typedef {{title: string,
  *            id: string,
  *            data: CookieDetails}}
@@ -166,6 +172,9 @@ cr.define('settings', function() {
         var id = siteEntry.data_.id;
         var description = '';
 
+        if (siteEntry.children_.length == 0)
+          continue;
+
         for (var j = 0; j < siteEntry.children_.length; ++j) {
           var descriptionNode = siteEntry.children_[j];
           if (j > 0)
@@ -221,11 +230,11 @@ cr.define('settings', function() {
     },
 
     /**
-     * Add cookie data to a given HTML node.
-     * @param {HTMLElement} root The node to add the data to.
-     * @param {!settings.CookieTreeNode} item The data to add.
+     * Get cookie data for a given HTML node.
+     * @return {!Array<CookieDataForDisplay>}
      */
-    addCookieData: function(root, item) {
+    getCookieData: function(item) {
+      var out = [];

[dschuyler, 2016/10/07 21:14:48]

Let's put a @type on this.

[Finnur, 2016/10/10 09:56:55]

Done.

       var fields = cookieInfo[item.data_.type];
       for (var field of fields) {
         // Iterate through the keys found in |cookieInfo| for the given |type|
@@ -233,16 +242,13 @@ cr.define('settings', function() {
         // (in the order determined by |cookieInfo|).
         var key = field[0];
         if (item.data_[key].length > 0) {
-          var label = loadTimeData.getString(field[1]);
-
-          var header = document.createElement('div');
-          header.appendChild(document.createTextNode(label));
-          var content = document.createElement('div');
-          content.appendChild(document.createTextNode(item.data_[key]));
-          root.appendChild(header);
-          root.appendChild(content);
+          var entry = {};

[dschuyler, 2016/10/07 21:14:48]

I think we can set the type on this like
/** @type{CookieDataForDisplay} */
var entry = {};

Or,
var entry = /** @type{CookieDataForDisplay} */({});

Or,
var entry = /** @type{CookieDataForDisplay} */({
  label: loadTimeData.getString(field[1]),
  content: item.data_[key],
});

[Finnur, 2016/10/10 09:56:55]

I like the last one. Done.

+          entry.label = loadTimeData.getString(field[1]);
+          entry.content = item.data_[key];
+          out.push(entry);
         }
       }
+      return out;
     },
   };