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

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
new file mode 100644
index 0000000000000000000000000000000000000000..078608165520b07b61bcdff25fb150021adda740
--- /dev/null
+++ b/chrome/browser/resources/settings/site_settings/cookie_tree_node.js
@@ -0,0 +1,271 @@
+// 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'],
+             ['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;
+
+    /**
+     * The child cookie nodes.
+     * @private {!Array<!settings.CookieTreeNode>}
+     */
+    this.children_ = [];
+  };
+
+  CookieTreeNode.prototype = {
+    /**
+     * Converts a list of cookies and add them as CookieTreeNode children to
+     * the given parent node.
+     * @param {!settings.CookieTreeNode} parentNode The parent node to add
+     *     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);
+      });
+      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);
+      node.children_.splice(firstChild, count);
+    },
+
+    /**
+     * Returns an array of cookies from the current node within the cookie tree.
+     * @return Array< {!CookieDataItem} > The Cookie List.
+     */
+    getCookieList: function() {
+      var list = [];
+
+      for (var group of this.children_) {
+        for (var cookie of group.children_) {
+          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;

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

I still suggest some cleanup to avoid the [[][][]]:

  var fields = cookieInfo[item.data_.type];
  for (var field of fields) {
    // Iterate...
    var key = field[0];
    if (item.data_[key].length > 0) {
      ...

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

Done.

+      for (var i = 0; i < cookieInfo[type].length; ++i) {
+        // 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 = item.data_[cookieInfo[type][i][0]];

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

this is the value, not the key (as evidenced below)

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

Fair enough.

+        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,
+  };
+});