MD Settings: Set all content setting values in Site Details Javascript.

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

Index: chrome/browser/resources/settings/site_settings/site_details.js
diff --git a/chrome/browser/resources/settings/site_settings/site_details.js b/chrome/browser/resources/settings/site_settings/site_details.js
index c75cfa7eb5ef01263f393ee2e09d2dd7fda4fc11..c89b56aa7d774dab30f18dc0ddca64a35f2d6cde 100644
--- a/chrome/browser/resources/settings/site_settings/site_details.js
+++ b/chrome/browser/resources/settings/site_settings/site_details.js
@@ -14,12 +14,12 @@ Polymer({
 
   properties: {
     /**
-     * The site that this widget is showing details for.
-     * @type {SiteException}
+     * The origin that this widget is showing details for.
+     * @private
      */
-    site: {
-      type: Object,
-      observer: 'onSiteChanged_',
+    origin: {
+      type: String,
+      observer: 'onOriginChanged_',
     },
 
     /**
@@ -59,21 +59,25 @@ Polymer({
     var site = settings.getQueryParameters().get('site');
     if (!site)
       return;
-    this.browserProxy.getSiteDetails(site).then(function(siteInfo) {
-      this.site = this.expandSiteException(siteInfo);
-    }.bind(this));
+    this.origin = site;
   },
 
   /**
    * Handler for when the origin changes.
    * @private
    */
-  onSiteChanged_: function() {
-    // origin may be initially undefined if the user follows a direct
-    // link (URL) to this page.
-    var origin = this.site.origin;
-    if (origin !== undefined)
-      this.$.usageApi.fetchUsageTotal(this.toUrl(origin).hostname);
+  onOriginChanged_: function() {
+    this.$.usageApi.fetchUsageTotal(this.toUrl(this.origin).hostname);
+
+    // Retrieve the setting for each category shown.
+    this.root.querySelectorAll('site-details-permission')
+        .forEach(function(element) {

[tsergeant, 2017/06/21 01:49:56]

Nit: you probably want to tell closure that |element| is a specific polymer
element type.

I think the way to do that here is

.forEach(function(/** @type {SiteDetailsPermissionElement} */ element) {

[Patti Lor, 2017/06/21 06:36:37]

As discussed offline, we will skip this?

Summary of why (please correct me if I'm wrong Tim): Making this change verbatim
makes closure complain that "SiteDetailsPermissionElement" is not of type
Element, number, or NodeList<Element>, even though it *should* be inheriting
from Element. Trying to cast the entire list as a
NodeList<SiteDetailsPermissionElement> is fine, but inspecting |element|
afterwards still says it's of type "element" where it should be
SiteDetailsPermissionElement. We aren't sure why calling
element.expandSiteException() on line 78 is fine with closure if it doesn't know
what type it is.

[tsergeant, 2017/06/21 06:52:10]

Slight correction on the last sentence: Our global Closure configuration means
that Closure is fine with calling functions that don't exist on an object, so
long as it has seen that function defined somewhere else previously.

[Patti Lor, 2017/06/22 05:31:59]

Thanks Tim :)

+          this.browserProxy
+              .getCategoryPermissionForOrigin(element.category, this.origin)
+              .then(function(permissionResult) {
+                element.site = element.expandSiteException(permissionResult);
+              }.bind(element));
+        }.bind(this));
   },
 
   /** @private */
@@ -89,8 +93,7 @@ Polymer({
   onConfirmClearStorage_: function(e) {
     e.preventDefault();
     this.confirmationDeleteMsg_ = loadTimeData.getStringF(
-        'siteSettingsSiteRemoveConfirmation',
-        this.toUrl(this.site.origin).href);
+        'siteSettingsSiteRemoveConfirmation', this.toUrl(this.origin).href);
     this.$.confirmDeleteDialog.showModal();
   },
 
@@ -99,8 +102,7 @@ Polymer({
    * @private
    */
   onClearStorage_: function() {
-    this.$.usageApi.clearUsage(
-        this.toUrl(this.site.origin).href, this.storageType_);
+    this.$.usageApi.clearUsage(this.toUrl(this.origin).href, this.storageType_);
   },
 
   /**
@@ -109,7 +111,7 @@ Polymer({
    * @private
    */
   onUsageDeleted_: function(event) {
-    if (event.detail.origin == this.toUrl(this.site.origin).href) {
+    if (event.detail.origin == this.toUrl(this.origin).href) {
       this.storedData_ = '';
       this.navigateBackIfNoData_();
     }
@@ -120,9 +122,8 @@ Polymer({
    * @private
    */
   onClearAndReset_: function() {
-    Array.prototype.forEach.call(
-        this.root.querySelectorAll('site-details-permission'),
-        function(element) {
+    this.root.querySelectorAll('site-details-permission')
+        .forEach(function(element) {
           element.resetPermission();
         });