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}}
@@ skipping 148 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 41 matching lines @@
       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.
      */
     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
         // (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');
+          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;
         }
       }
     },
   };
 
   return {
     CookieTreeNode: CookieTreeNode,
   };
 });