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..5831dccdb6a97654f9c6be3dc577f368f10567ff 100644
--- a/chrome/browser/resources/settings/site_settings/cookie_tree_node.js
+++ b/chrome/browser/resources/settings/site_settings/cookie_tree_node.js
@@ -166,6 +166,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)
@@ -227,6 +230,7 @@ cr.define('settings', function() {
      */
     addCookieData: function(root, item) {
       var fields = cookieInfo[item.data_.type];
+      var first = true;
       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
@@ -236,11 +240,22 @@ cr.define('settings', function() {
           var label = loadTimeData.getString(field[1]);
 
           var header = document.createElement('div');
+          if (!first) {
+            header.style.cssText +=
+                'border-top: 1px solid rgba(0, 0, 0, 0.14);' +
+                'margin-top: 7px;' +
+                'padding-top: 7px;';

[Finnur, 2016/10/05 13:42:22]

I'd like to do the styling in the html section for the polymer object
(site_data_details_dialog.html), but I was unsuccessful in setting a class name
here and then style it via the html/css. If you have tips I'd gladly accept
them.

[dschuyler, 2016/10/05 22:04:02]

Let's call the above Option A.

Here's Option B:

How about using a dom-repeat to fill in the data.
There's an example at CL 2395883003 that could
be diff'd against this CL.
https://codereview.chromium.org/2395883003/

In that CL, I changed the addCookieData (that returned 
HTML elements) to a getCookieData that returns an array
of objects to expand in the dom-repeat.

I also made some changes to the shared css to make
it easier to style this list. Some of the styles 
were scoped within .settings-box or similar and I
don't think that's necessary (now that I'm more
experienced with shadow dom than I was when I scoped
those css classes).

Option C

Another option would be to create a dom-module that
is the list of cookie data. This would essentially
add another level of shadow dom and move the dom-repeat
to a separate file. 

My thoughts:

I like Option B or C. Option B is a little leaner
while Option C has better code encapsulation. So
there's just a trade-off there (i.e. someone
will say Option B is better than Option C; and vice
versa).

It's hard for me to know if I'm explaining this well,
please let me know if I could/should provide more
details.

[Finnur, 2016/10/07 15:16:42]

I love it. Done. 

+          }
           header.appendChild(document.createTextNode(label));
+
           var content = document.createElement('div');
+          content.style.cssText +=
+              'color: var(--settings-secondary_-_color);' +
+              'margin-top: 3px;';
           content.appendChild(document.createTextNode(item.data_[key]));
           root.appendChild(header);
           root.appendChild(content);
+          first = false;
         }
       }
     },