Site Settings Desktop: Polish the Site Data section.

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @typedef {{hasChildren: boolean,
  *            id: string,
  *            title: string,
  *            totalUsage: string,
  *            type: string}}
  */
 var CookieDetails;
 
 /**
+ * @typedef {{content: string,
+ *            label: string}}
+ */
+var CookieDataForDisplay;
+
+/**
  * @typedef {{title: string,
  *            id: string,
  *            data: CookieDetails}}
  */
 var CookieDataItem;
 
 /**
  * @typedef {{site: string,
  *            id: string,
  *            localData: string}}
@@ skipping 134 matching lines @@
      * @return {!Array<!CookieDataSummaryItem>} The summary list.
      */
     getSummaryList: function() {
       var list = [];
       for (var i = 0; i < this.children_.length; ++i) {
         var siteEntry = this.children_[i];
         var title = siteEntry.data_.title;
         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)
             description += ', ';
 
           // Some types, like quota, have no description nodes.
           var dataType = '';
           if (descriptionNode.data_.type != undefined) {
             dataType = descriptionNode.data_.type;
           } else {
@@ skipping 35 matching lines @@
         if (recursive) {
           var node = this.children_[i].fetchNodeById(id, true);
           if (node != null)
             return node;
         }
       }
       return null;
     },
 
     /**
-     * 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|
         // and see if those keys are present in the data. If so, display them
         // (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;
     },
   };
 
   return {
     CookieTreeNode: CookieTreeNode,
   };
 });