Add a page for showing the details for a given origin

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

+// Copyright 2015 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-details' show the details (permissions and usage) for a given origin
+ * under Site Settings.
+ *
+ * Example:
+ *
+ *      <site-details prefs="{{prefs}}" origin="{{origin}}">
+ *      </site-details>
+ *      ... other pages ...
+ *
+ * @group Chrome Settings Elements
+ * @element site-details
+ */
+Polymer({
+  is: 'site-details',
+
+  properties: {
+    /**
+     * Preferences state.
+     */
+    prefs: {
+      type: Object,
+      notify: true,
+    },
+
+    /**
+     * The origin that this widget is showing details for.
+     */
+    origin: {
+      type: String,
+      observer: 'onOriginChanged_',
+    },
+
+    /**
+     * The amount of data stored for the origin.
+     */
+    storedData: {
+      type: String,
+      value: '1337 MB',  // TODO(finnur): Fetch actual data.
+    },
+  },
+
+  ready: function() {
+    this.$.cookies.category = settings.ContentSettingsTypes.COOKIES;
+    this.$.javascript.category = settings.ContentSettingsTypes.JAVASCRIPT;
+    this.$.popups.category = settings.ContentSettingsTypes.POPUPS;
+    this.$.geolocation.category = settings.ContentSettingsTypes.GEOLOCATION;
+    this.$.notification.category = settings.ContentSettingsTypes.NOTIFICATION;
+    this.$.fullscreen.category = settings.ContentSettingsTypes.FULLSCREEN;
+    this.$.camera.category = settings.ContentSettingsTypes.CAMERA;
+    this.$.mic.category = settings.ContentSettingsTypes.MIC;
+
+    if (this.storedData !== undefined) {

[michaelpg, 2015/11/09 18:26:30]

i'd prefer doing this in an observer, unless there's a good reason a host can't
change storedData after creating this element

[Finnur, 2015/11/10 16:00:51]

Sure! Done.

I suspect a chrome.send call is required to fetch the actual storage data and so
the assignment will happen slightly differently in the future.

+      this.$.usage.hidden = false;

[michaelpg, 2015/11/09 18:26:30]

if they're logically grouped together, wrap them both in a single <div>?

[Finnur, 2015/11/10 16:00:51]

Usage is a header that, at the moment, only contains Storage, but should contain
things like Battery Usage. The idea here is that the header is hidden until one
or more subsection, like Storage, decides that it has data and shows itself and
requests the header to be shown as well.

+      this.$.storage.hidden = false;
+    }
+  },
+
+  onOriginChanged_: function() {
+    this.$.cookies.origin = this.origin;

[michaelpg, 2015/11/09 18:26:30]

what if origin is set before ready? why not set these origin properties in the
template?

[Finnur, 2015/11/10 16:00:51]

There was something that was not working before when I did this, but I just
checked and it works fine now, so I converted.

+    this.$.javascript.origin = this.origin;
+    this.$.popups.origin = this.origin;
+    this.$.geolocation.origin = this.origin;
+    this.$.notification.origin = this.origin;
+    this.$.fullscreen.origin = this.origin;
+    this.$.camera.origin = this.origin;
+    this.$.mic.origin = this.origin;
+  },
+
+  onClearStorage_: function() {
+    // TODO(finnur): Implement.
+  },
+
+  onClearAndReset_: function() {
+    this.$.cookies.resetPermission();

[michaelpg, 2015/11/09 18:26:30]

consider:

Array.prototype.forEach.call(
    this.querySelectorAll('site-details-permission'),
    function(el) { el.resetPermission(); }):

[Finnur, 2015/11/10 16:00:51]

Neat trick, but I can't get it to work. No matter what I pass in, be it class
names or element ids, it always returns an empty array. :/

[michaelpg, 2015/11/10 18:24:13]

Sorry, should be done on "this.root" (the local DOM), not "this":

  this.root.querySelectorAll

But it's up to you -- what you have is more straightforward (just potentially
prone to omissions).

[Finnur, 2015/11/11 11:37:37]

Sold!

+    this.$.javascript.resetPermission();
+    this.$.popups.resetPermission();
+    this.$.geolocation.resetPermission();
+    this.$.notification.resetPermission();
+    this.$.fullscreen.resetPermission();
+    this.$.camera.resetPermission();
+    this.$.mic.resetPermission();
+
+    this.onClearStorage_();
+  },
+});