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

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

Index: chrome/browser/resources/settings/site_settings/site_data_details_dialog.js
diff --git a/chrome/browser/resources/settings/site_settings/site_data_details_dialog.js b/chrome/browser/resources/settings/site_settings/site_data_details_dialog.js
new file mode 100644
index 0000000000000000000000000000000000000000..c9388e54651b9b272f606b3a194ce7b40e60d7f0
--- /dev/null
+++ b/chrome/browser/resources/settings/site_settings/site_data_details_dialog.js
@@ -0,0 +1,166 @@
+// 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.
+
+/**
+ * @fileoverview
+ * 'site-data-details-dialog' provides a dialog to show details of site data
+ * stored by a given site.
+ */
+Polymer({
+  is: 'site-data-details-dialog',
+
+  behaviors: [SiteSettingsBehavior],
+
+  properties: {
+    /**
+     * The title of the dialog.
+     */
+    title_: String,
+
+    /**
+     * The site to show details for.
+     * @type {!settings.CookieTreeNode}
+     * @private
+     */
+    site_: Object,
+
+    /**
+     * The cookie entries for the given site.
+     * @type {!Array<!CookieDataItem>}
+     * @private
+     */
+    entries_: Array,
+
+    /**
+     * The index of the last selected item.
+     */
+     lastSelectedIndex_: Number,
+
+     /**
+      * Our WebUI listener.
+      * @type {?WebUIListener}
+      */
+     listener_: Object,
+  },
+
+  /**
+   * Opens the dialog.
+   * @param {!settings.CookieTreeNode} site The site to show data for.
+   */
+  open: function(site) {
+    this.site_ = site;
+    this.populateDialog_();
+    this.listener_ = cr.addWebUIListener(
+        'onTreeItemRemoved', this.onTreeItemRemoved_.bind(this));
+    this.$.dialog.open();
+  },
+
+  /**
+   * Populates the dialog with the data about the site.
+   */
+  populateDialog_: function() {
+    this.title_ = loadTimeData.getStringF('siteSettingsCookieDialog',
+                                          this.site_.data_.title);
+
+    this.entries_ = this.site_.getCookieList();
+    if (this.entries_.length < 2) {
+      // When there's only one item to show, hide the picker and change the
+      // 'Remove All' button to read 'Remove' instead.
+      this.$.container.hidden = true;
+      this.$.clear.textContent =

[michaelpg, 2016/07/06 17:31:00]

when do you "undo" these changes to hidden and textContent? eg, if I open the
site in another tab and it adds cookies, i'd expect the container to be shown

[Finnur, 2016/07/07 10:54:01]

So... The list of data stored by the website is mostly static, meaning: you'd
have to refresh the page to see changes. The exception is when cookies are
deleted -- that's reflected right away (it would be really weird if it didn't).

The reason the list is static is mostly down to priorities and time remaining:
a) The CL had gotten large and complex enough to review without also including
dynamic updating for when cookies are added.
b) If the CL were larger I wouldn't have been able to complete the CL in time
for my vacation.
c) Dynamically updating is probably lower priority than some of the other Site
Settings things that need to happen for this to launch (e.g. the categories for
USB, protocol handlers and Zoom are currently missing).

[michaelpg, 2016/07/07 20:21:29]

Acknowledged. Could you please open a separate bug to track this?

[Finnur, 2016/07/08 09:40:47]

The bug for the missing settings is here: http://crbug.com/614277
The new bug for dynamically updating the Cookie Data list is here:
http://crbug.com/626619

+          loadTimeData.getString('siteSettingsCookieRemove');
+    } else {
+      this.$.picker.selected = this.entries_[0].id;
+      this.lastSelectedIndex_ = 0;
+    }
+
+    this.populateItem_(this.entries_[0].id, this.site_);
+  },
+
+  /**
+   * Recursively look up a node path for a leaf node with a given id.
+   * @param {!settings.CookieTreeNode} node The node to start with.
+   * @param {string} currentPath The path constructed so far.
+   * @param {string} targetId The id of the target leaf node to look for.
+   * @return {string} The path of the node returned (or blank if not found).
+   */
+  nodePath_: function(node, currentPath, targetId) {
+    if (node.data_.id == targetId)
+      return currentPath;
+
+    for (var i = 0; i < node.children_.length; ++i) {
+      var child = node.children_[i];
+      var path = this.nodePath_(
+          child, currentPath + ',' + child.data_.id, targetId);
+      if (path.length > 0)
+        return path;
+    }
+
+    return '';
+  },
+
+  /**
+   * Add the cookie data to the content section of this dialog.
+   * @param {string} id The id of the cookie node to display.
+   * @param {!settings.CookieTreeNode} site The current site.
+   */
+  populateItem_: function(id, site) {
+    // Out with the old...
+    var root = this.$.content;
+    while (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
+
+    // In with the new...
+    var node = site.fetchNodeById(id, true);
+    if (node)
+      site.addCookieData(root, node);
+  },
+
+  onTreeItemRemoved_: function(args) {
+    this.entries_ = this.site_.getCookieList();
+    if (args[0] == this.site_.data_.id || this.entries_.length == 0) {
+      this.$.dialog.close();
+      return;
+    }
+
+    if (this.entries_.length <= this.lastSelectedIndex_)
+      this.lastSelectedIndex_ = this.entries_.length - 1;
+    var selectedId = this.entries_[this.lastSelectedIndex_].id;
+    this.$.picker.selected = selectedId;
+    this.populateItem_(selectedId, this.site_);
+  },
+
+  /**
+   * A handler for when the user changes the dropdown box (switches cookies).
+   */
+  onItemSelected_: function(event) {
+    this.populateItem_(event.detail.selected, this.site_);
+
+    // Store the index of what was selected so we can re-select the next value
+    // when things get deleted.
+    for (var i = 0; i < this.entries_.length; ++i) {
+      if (this.entries_[i].data.id == event.detail.selected) {
+        this.lastSelectedIndex_ = i;
+        break;
+      }
+    }
+  },
+
+  /**
+   * A handler for when the user opts to remove a single cookie.
+   */
+  onRemove_: function(event) {
+    this.browserProxy.removeCookie(this.nodePath_(
+        this.site_, this.site_.data_.id, this.$.picker.selected));
+  },
+
+  /**
+   * A handler for when the user opts to remove all cookies.
+   */
+  onRemoveAll_: function(event) {
+    cr.removeWebUIListener(this.listener_);
+    this.browserProxy.removeCookie(this.site_.data_.id);
+  },
+});