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

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

Index: chrome/browser/resources/settings/site_settings/cookie_info.js
diff --git a/chrome/browser/resources/settings/site_settings/cookie_info.js b/chrome/browser/resources/settings/site_settings/cookie_info.js
new file mode 100644
index 0000000000000000000000000000000000000000..e78751399db895d0bb7e9439f974422e3fb83d97
--- /dev/null
+++ b/chrome/browser/resources/settings/site_settings/cookie_info.js
@@ -0,0 +1,48 @@
+// 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.
+
+// This structure maps the various cookie type names from C++ (hence the

[dschuyler, 2016/07/06 17:19:38]

Instead of having any mapping like this, could these
be inlined into HTML and use $i18n{}? Maybe a 
dom-module for the cookies - that may be more
Polymerific, imo. This looks like it's doing it the old
options way of doing things before we had Polymer
and $i18n{} replacements. I may be missing something, 
please let me know if what I'm suggesting doesn't
work.

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

I'm sure it would be an improvement, even though I'm not entirely sure how to
approach it. But it is getting to be a moot point because I'm quickly running
out of time (my vacation starts at EOD tomorrow) and I'd like to get this (and
hopefully another CL) out of the way. I guess I'm asking if we can punt on this
for now? :)

+// underscores) to arrays of the different types of data each has, along with

[dschuyler, 2016/07/06 17:19:38]

Are the underscore labels passed from c++ to JS? It *looks* like
these are only used to map the i18n text. If that's the case they
can be camelCase instead(?).

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

This comment refers to the keys in this structure, e.g. 'flash_lso' at the
bottom. That's not part of the i18n.

I have, though, changed the i18n *labels* to use camelCase. I don't think you
were asking for more (e.g. for me to change e.g. the 'flash_lso' *key* to
'flashLso'). So: If you are happy with the change I made here, you can stop
reading. Otherwise:

The C++ code creates a list of entries, each represented as a dictionary with
keys like 'flash_lso'. See for example:
https://cs.chromium.org/chromium/src/chrome/browser/ui/webui/cookies_tree_mod...

To change the keys here to camelCase, I'd have to change the constants in C++ to
match and I have no idea what breaks if I do that.

+// the i18n name for the description of that data type.
+// This structure serves three purposes:
+// 1) to list what subset of the cookie data we want to show in the UI.
+// 2) What order to show it in.
+// 3) What user friendly label to prefix the data with.
+/** @const */ var cookieInfo = {
+  'cookie': [['name', 'label_cookie_name'],

[dschuyler, 2016/07/06 17:19:38]

Having 'label_' on each is not informative imo. :)
Maybe 'site settings' instead of 'label' or omitting
the prefix altogether?

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

Done.

+             ['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']],

[dschuyler, 2016/07/06 17:19:38]

The indent looks off here.

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

Done.

+  'flash_lso': [['domain', 'label_cookie_domain']],
+};