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

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.
  */
 Polymer({
   is: 'site-details',
 
   behaviors: [SiteSettingsBehavior, settings.RouteObserverBehavior],
 
   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_',
     },
 
     /**
      * The amount of data stored for the origin.
      * @private
      */
     storedData_: {
       type: String,
       value: '',
     },
@@ skipping 19 matching lines @@
 
   /**
    * settings.RouteObserverBehavior
    * @param {!settings.Route} route
    * @protected
    */
   currentRouteChanged: function(route) {
     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 */
   onCloseDialog_: function() {
     this.$.confirmDeleteDialog.close();
   },
 
   /**
    * Confirms the deletion of storage for a site.
    * @param {!Event} e
    * @private
    */
   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();
   },
 
   /**
    * Clears all data stored for the current origin.
    * @private
    */
   onClearStorage_: function() {
-    this.$.usageApi.clearUsage(
-        this.toUrl(this.site.origin).href, this.storageType_);
+    this.$.usageApi.clearUsage(this.toUrl(this.origin).href, this.storageType_);
   },
 
   /**
    * Called when usage has been deleted for an origin.
    * @param {!{detail: !{origin: string}}} event
    * @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_();
     }
   },
 
   /**
    * Resets all permissions and clears all data stored for the current origin.
    * @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();
         });
 
     if (this.storedData_ != '')
       this.onClearStorage_();
     else
       this.navigateBackIfNoData_();
   },
 
   /**
@@ skipping 10 matching lines @@
    * @private
    */
   permissionShowing_: function() {
     return Array.prototype.some.call(
         this.root.querySelectorAll('site-details-permission'),
         function(element) {
           return element.offsetHeight > 0;
         });
   },
 });