Site Settings Desktop: Implement the cookies list and details dialog.

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 {{title: string,
+ *            id: string,
+ *            data: CookieDetails}}
+ */
+var CookieDataItem;
+
+/**
+ * @typedef {{site: string,
+ *            id: string,
+ *            localData: string}}
+ */
+var CookieDataSummaryItem;
+
+// This structure maps the various cookie type names from C++ (hence the
+// underscores) to arrays of the different types of data each has, along with
+// the i18n name for the description of that data type.
+/** @const */ var cookieInfo = {
+  'cookie': [['name', 'label_cookie_name'],

[michaelpg, 2016/07/04 19:44:21]

Yikes. Can we generate this in C++ instead of duplicating it all?

[Finnur, 2016/07/05 11:04:49]

So... couple of comments. But first some background...

This list serves three purposes:

1) It lists what subset of the cookie data we want to show in the UI. For
example, we show 'content', 'domain' and 'path',  etc (as seen right below) but
we don't show: 'hasChildren', 'icon', 'id', 'name', 'title', or 'type' (because
they are omitted from this list).
2) It determines the order in which to show the data ('domain' before 'path',
for example, and 'created' before 'expired').
3) It determines which user friendly label to use to prefix the data with.

The way I see it, the list is always going to be manually curated (because it is
a subset in each case and order is important) and I see a few downsides to
moving it to C++:
a) Extra work and extra code.
b) This is primarily to look up what label to show, meaning it is purely UI code
that belongs with the remaining UI code.
c) It is copied from cookie_list.js and it would be slightly harder to track
changes to it if converted to C++.

Have I convinced you to keep it here? :)

[michaelpg, 2016/07/05 18:01:11]

The comment doesn't make that clear (that this was a curated subset rather than
a pure mapping from an existing structure in C++). Having that info would help
explain why this is, and help me decide whether I need to add something here
when I go to add a cookie type or metadata or whatever to Chrome.
-
If we replace $i18n{} template strings in JavaScript, we could do that for the
labels so the lookup is performed once by the (probably faster) C++ template
code, rather than every time the list updates. Perhaps ask dschuyler if that's
feasible, because:
https://cs.chromium.org/chromium/src/content/browser/webui/web_ui_data_source...
Yep, sounds fine. I would slightly prefer having it in its own JS file though,
since it's just a big chunk of (almost) JSON.

[Finnur, 2016/07/06 09:57:34]

I've updated the comment and moved it to a separate js file. I'll ask dschuyler
and do a follow-up CL if feasible.

+             ['content', 'label_cookie_content'],
+             ['domain', 'label_cookie_domain'],
+             ['path', 'label_cookie_path'],
+             ['sendfor', 'label_cookie_send_for'],
+             ['accessibleToScript', 'label_cookie_accessible_to_script'],
+             ['created', 'label_cookie_created'],
+             ['expires', 'label_cookie_expires']],
+  'app_cache': [['manifest', 'label_app_cache_manifest'],
+                ['size', 'label_local_storage_size'],
+                ['created', 'label_cookie_created'],
+                ['accessed', 'label_cookie_last_accessed']],
+  'database': [['name', 'label_cookie_name'],
+               ['desc', 'label_webdb_desc'],
+               ['size', 'label_local_storage_size'],
+               ['modified', 'label_local_storage_last_modified']],
+  'local_storage': [['origin', 'label_local_storage_origin'],
+                    ['size', 'label_local_storage_size'],
+                    ['modified', 'label_local_storage_last_modified']],
+  'indexed_db': [['origin', 'label_indexed_db_origin'],
+                 ['size', 'label_indexed_db_size'],
+                 ['modified', 'label_indexed_db_last_modified']],
+  'file_system': [['origin', 'label_file_system_origin'],
+                  ['persistent', 'label_file_system_persistent_usage'],
+                  ['temporary', 'label_file_system_temporary_usage']],
+  'channel_id': [['serverId', 'label_channel_id_server_id'],
+                        ['certType', 'label_channel_id_type'],
+                        ['created', 'label_channel_id_created']],
+  'service_worker': [['origin', 'label_service_worker_origin'],
+                     ['size', 'label_service_worker_size'],
+                     ['scopes', 'label_service_worker_scopes']],
+  'cache_storage': [['origin', 'label_cache_storage_origin'],
+                     ['size', 'label_cache_storage_size'],
+                     ['modified', 'label_cache_storage_last_modified']],
+  'flash_lso': [['domain', 'label_cookie_domain']],
+};
+
+cr.define('settings', function() {
+  'use strict';
+
+  /**
+   * @constructor
+   */
+  function CookieTreeNode(data) {
+    /**
+     * The data for this cookie node.
+     * @private {CookieDetails}
+     */
+    this.data = data;

[michaelpg, 2016/07/04 19:44:20]

throughout: trailing underscores for private members

[Finnur, 2016/07/05 11:04:49]

Done.

+
+    /**
+     * The child cookie nodes.
+     * @private {!Array<settings.CookieTreeNode>}
+     */
+    this.children = [];
+  };
+
+  CookieTreeNode.prototype = {
+    /**
+     * Converts a list of cookies and add them as CookieTreenode children to

[michaelpg, 2016/07/04 19:44:21]

Node

[Finnur, 2016/07/05 11:04:49]

Done.

+     * the given parent node.
+     * @param {settings.CookieTreeNode} parentNode The parent node to add

[michaelpg, 2016/07/04 19:44:21]

{!...}

[Finnur, 2016/07/05 11:04:48]

Done.

+     *     children to.
+     * @param {!Array<CookieDetails>} newNodes The list containing the data to
+     *     add.
+     */
+    addChildNodes: function(parentNode, newNodes) {
+      var nodes = newNodes.map(function(x) {
+          return new settings.CookieTreeNode(x);

[michaelpg, 2016/07/04 19:44:20]

2-space indent for function

[Finnur, 2016/07/05 11:04:49]

Done.

+      });
+      parentNode.children = nodes;
+    },
+
+    /**
+     * Looks up a parent node and adds a list of CookieTreeNodes to them.
+     * @param {string} parentId The ID of the parent to add the nodes to.
+     * @param {settings.CookieTreeNode} startingNode The node to start with when
+     *     looking for the parent node to add the children to.
+     * @param {!Array<CookieDetails>} newNodes The list containing the data to
+         add.
+     * @return {boolean} True if the parent node was found.
+     */
+    populateChildNodes: function(parentId, startingNode, newNodes) {
+      for (var i = 0; i < startingNode.children.length; ++i) {
+        if (startingNode.children[i].data.id == parentId) {
+          this.addChildNodes(startingNode.children[i], newNodes);
+          return true;
+        }
+
+        if (this.populateChildNodes(
+            parentId, startingNode.children[i], newNodes)) {
+          return true;
+        }
+      }
+      return false;
+    },
+
+    /**
+     * Removes child nodes from a node with a given id.
+     * @param {string} id The id of the parent node to delete from.
+     * @param {number} firstChild The index of the first child to start deleting
+     *     from.
+     * @param {number} count The number of children to delete.
+     */
+    removeByParentId: function(id, firstChild, count) {
+      var node = id == null ? this : this.fetchNodeById(id, true);
+      while (count--)

[michaelpg, 2016/07/04 19:44:21]

node.children.splice(firstChild, count) ?

[Finnur, 2016/07/05 11:04:48]

Bah. Of course. Done. :)

+        node.children.splice(firstChild, 1);
+    },
+
+    /**
+     * Returns an array of cookies from the current node within the cookie tree.
+     * @return Array< {CookieDataItem} > The Cookie List.

[michaelpg, 2016/07/04 19:44:20]

nit: no spaces <{...}>

[Finnur, 2016/07/05 11:04:49]

The presubmit check barfs on that...

Found JavaScript style violations in
chrome/browser/resources/settings/site_settings/cookie_tree_node.js:
  line 143: E0002: Missing space before "> The Cookie List."
     * @return Array<{!CookieDataItem}> The Cookie List.
                                      ^^^^^^^^^^^^^^^^^^
  line 143: E0002: Missing space before "{"
     * @return Array<{!CookieDataItem}> The Cookie List.
                     ^

[michaelpg, 2016/07/05 18:01:11]

try wrapping Array in {}

[Finnur, 2016/07/06 09:57:34]

Done.

+     */
+    getCookieList: function() {
+      var list = [];
+      for (var i = 0; i < this.children.length; ++i) {
+        var group = this.children[i];
+        for (var j = 0; j < group.children.length; ++j) {

[michaelpg, 2016/07/04 19:44:21]

opt nit: for-of for nested loops for readability:
    for (var group of this.children) {
      for (var cookie of group.children) {

[Finnur, 2016/07/05 11:04:49]

Done.

+          var cookie = group.children[j];
+          list.push({title: cookie.data.title,
+                     id: cookie.data.id,
+                     data: cookie.data});
+        }
+      }
+
+      return list;
+    },
+
+    /**
+     * Get a summary list of all sites and their stored data.
+     * @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 = '';
+
+        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
+            dataType = descriptionNode.children[0].data.type;
+
+          var category = '';
+          if (dataType == 'cookie') {
+            var cookieCount = descriptionNode.children.length;
+            if (cookieCount > 1)
+              category = loadTimeData.getStringF('cookie_plural', cookieCount);
+            else
+              category = loadTimeData.getString('cookie_singular');
+          } else if (dataType == 'database') {
+            category = loadTimeData.getString('cookie_database_storage');
+          } else if (dataType == 'local_storage' || dataType == 'indexed_db') {
+            category = loadTimeData.getString('cookie_local_storage');
+          } else if (dataType == 'app_cache') {
+            category = loadTimeData.getString('cookie_app_cache');
+          } else if (dataType == 'file_system') {
+            category = loadTimeData.getString('cookie_file_system');
+          } else if (dataType == 'quota') {
+            category = descriptionNode.data.totalUsage;
+          } else if (dataType == 'channel_id') {
+            category = loadTimeData.getString('cookie_channel_id');
+          } else if (dataType == 'service_worker') {
+            category = loadTimeData.getString('cookie_service_worker');
+          } else if (dataType == 'cache_storage') {
+            category = loadTimeData.getString('cookie_cache_storage');
+          } else if (dataType == 'flash_lso') {
+            category = loadTimeData.getString('cookie_flash_lso');
+          }
+
+          description += category;
+        }
+        list.push({ site: title, id: id, localData: description });
+      }
+      list.sort(function(a, b) {
+        return a.site.localeCompare(b.site);
+      });
+      return list;
+    },
+
+    /**
+     * Fetch a CookieTreeNode by ID.
+     * @param {string} id The ID to look up.
+     * @param {boolean} recursive Whether to search the children also.
+     * @return {settings.CookieTreeNode} The node found, if any.
+     */
+    fetchNodeById: function(id, recursive) {
+      for (var i = 0; i < this.children.length; ++i) {
+        if (this.children[i] == null)
+          return null;
+        if (this.children[i].data.id == id)
+          return this.children[i];
+        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.
+     */
+    addCookieData: function(root, item) {
+      var type = item.data.type;
+      for (var i = 0; i < cookieInfo[type].length; ++i) {
+        var key = item.data[cookieInfo[type][i][0]];

[michaelpg, 2016/07/04 19:44:21]

now my brain hurts >_<

[Finnur, 2016/07/05 11:04:49]

I've made an attempt at commenting what is going on here. See if it helps.

[michaelpg, 2016/07/05 18:01:11]

Yes, very much!

+        if (key.length > 0) {
+          var label = loadTimeData.getString(cookieInfo[type][i][1]);
+          var value = item.data[cookieInfo[type][i][0]];
+
+          var header = document.createElement('div');
+          header.appendChild(document.createTextNode(label));
+          var content = document.createElement('div');
+          content.appendChild(document.createTextNode(value));
+          root.appendChild(header);
+          root.appendChild(content);
+        }
+      }
+    },
+  };
+
+  return {
+    CookieTreeNode: CookieTreeNode,
+  };
+});