MD Settings: Update Site Details dynamically when permissions change.

Make the Site Details web UI update permission values when they change without
needing to reload the Site Details page.

Manual test - With #enable-site-details on, open https://permission.site. Open
the Page Info bubble, click "Site settings", and drag the Site Details tab out
into a new window so that the https://permission.site and the Site Details
windows are viewable at the same time. On https://permission.site, open the Page
Info bubble and change a permission there. It should automatically update to
show the same permission in the Site Details page.

Bug: 656758
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: If1b28afbed3317a7ac43ada1d8ca02424137b50d
Reviewed-on: https://chromium-review.googlesource.com/595299
Commit-Queue: Patti <patricialor@chromium.org>
Reviewed-by: Dave Schuyler <dschuyler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#491653}

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

@@ -10,7 +10,9 @@
 Polymer({
   is: 'site-details',
 
-  behaviors: [SiteSettingsBehavior, settings.RouteObserverBehavior],
+  behaviors: [
+    SiteSettingsBehavior, settings.RouteObserverBehavior, WebUIListenerBehavior
+  ],
 
   properties: {
     /**
@@ -59,6 +61,13 @@ Polymer({
     'usage-deleted': 'onUsageDeleted_',
   },
 
+  /** @override */
+  attached: function() {
+    this.addWebUIListener(
+        'contentSettingSitePermissionChanged',
+        this.onPermissionChanged_.bind(this));
+  },
+
   /** @override */
   ready: function() {
     this.ContentSettingsTypes = settings.ContentSettingsTypes;
@@ -84,16 +93,55 @@ Polymer({
     if (this.enableSiteSettings_)
       this.$.usageApi.fetchUsageTotal(this.toUrl(this.origin).hostname);
 
-    var siteDetailsPermissions =
-        /** @type {!NodeList<!SiteDetailsPermissionElement>} */
-        (this.root.querySelectorAll('site-details-permission'));
+    this.updatePermissions_(this.getCategoryList_());
+  },
 
-    this.browserProxy.getOriginPermissions(this.origin, this.getCategoryList_())
+  /**
+   * Called when a site within a category has been changed.
+   * @param {!settings.ContentSettingsTypes} category The category that changed.
+   * @param {string} origin The origin of the site that changed.
+   * @param {string} embeddingOrigin The embedding origin of the site that
+   *     changed.
+   * @private
+   */
+  onPermissionChanged_: function(category, origin, embeddingOrigin) {
+    if (this.origin === undefined || this.origin == '' ||
+        origin === undefined || origin == '')
+      return;
+    if (!this.getCategoryList_().includes(category))
+      return;
+
+    // Site details currently doesn't support embedded origins, so ignore it and
+    // just check whether the origins are the same.
+    if (this.toUrl(origin).origin == this.toUrl(this.origin).origin)
+      this.updatePermissions_([category]);
+  },
+
+  /**
+   * Retrieves the permissions listed in |categoryList| from the backend for
+   * |this.origin|.
+   * @param {!Array<!settings.ContentSettingsTypes>} categoryList The list of
+   *     categories to update permissions for.
+   * @private
+   */
+  updatePermissions_: function(categoryList) {
+    var permissionsMap =
+        /** @type {!Object<!settings.ContentSettingsTypes,
+         *         !SiteDetailsPermissionElement>} */
+        (Array.prototype.reduce.call(
+            this.root.querySelectorAll('site-details-permission'),
+            (map, element) => {
+              if (categoryList.includes(element.category))
+                map[element.category] = element;
+              return map;
+            },
+            {}));
+
+    this.browserProxy.getOriginPermissions(this.origin, categoryList)
         .then((exceptionList) => {
           exceptionList.forEach((exception, i) => {
-            // |exceptionList| should be in the same order as the category list,
-            // which is in the same order as |siteDetailsPermissions|.
-            siteDetailsPermissions[i].site = exception;
+            // |exceptionList| should be in the same order as |categoryList|.
+            permissionsMap[categoryList[i]].site = exception;
           });
 
           // The displayName won't change, so just use the first exception.
@@ -155,7 +203,7 @@ Polymer({
 
   /**
    * Returns list of categories for each permission displayed in <site-details>.
-   * @return {!Array<string>}
+   * @return {!Array<!settings.ContentSettingsTypes>}
    * @private
    */
   getCategoryList_: function() {

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

@@ -10,7 +10,7 @@
 Polymer({
   is: 'site-details-permission',
 
-  behaviors: [SiteSettingsBehavior, WebUIListenerBehavior],
+  behaviors: [SiteSettingsBehavior],
 
   properties: {
     /**
@@ -27,27 +27,7 @@ Polymer({
     defaultSetting_: String,
   },
 
-  observers: ['siteChanged_(site, category)'],
-
-  /** @override */
-  attached: function() {
-    this.addWebUIListener(
-        'contentSettingSitePermissionChanged',
-        this.sitePermissionChanged_.bind(this));
-  },
-
-  /**
-   * Returns true if the origins match, e.g. http://google.com and
-   * http://[*.]google.com.
-   * @param {string} left The first origin to compare.
-   * @param {string} right The second origin to compare.
-   * @return {boolean} True if the origins are the same.
-   * @private
-   */
-  sameOrigin_: function(left, right) {
-    return this.removePatternWildcard(left) ==
-        this.removePatternWildcard(right);
-  },
+  observers: ['siteChanged_(site)'],
 
   /**
    * Updates the drop-down value after |site| has changed.
@@ -80,27 +60,6 @@ Polymer({
     }
   },
 
-  /**
-   * Called when a site within a category has been changed.
-   * @param {number} category The category that changed.
-   * @param {string} origin The origin of the site that changed.
-   * @param {string} embeddingOrigin The embedding origin of the site that
-   *     changed.
-   * @private
-   */
-  sitePermissionChanged_: function(category, origin, embeddingOrigin) {
-    if (this.site === undefined)
-      return;
-    if (category != this.category)
-      return;
-
-    if (origin == '' ||
-        (origin == this.site.origin &&
-         embeddingOrigin == this.site.embeddingOrigin)) {
-      this.siteChanged_(this.site);
-    }
-  },
-
   /**
    * Handles the category permission changing for this origin.
    * @private

chrome/test/data/webui/settings/site_details_tests.js

@@ -259,4 +259,55 @@ suite('SiteDetails', function() {
       assertEquals(settings.ContentSetting.DEFAULT, args[2]);
     })
   });
+
+  test('permissions update dynamically', function() {
+    browserProxy.setPrefs(prefs);
+    testElement = createSiteDetails('https://foo.com:443');
+
+    var siteDetailsPermission =
+        testElement.root.querySelector('#notifications');
+
+    // Wait for all the permissions to be populated initially.
+    return browserProxy.whenCalled('getOriginPermissions')
+        .then(function(result) {
+          // Make sure initial state is as expected.
+          assertEquals(
+              settings.ContentSetting.BLOCK,
+              siteDetailsPermission.site.setting);
+          assertEquals(
+              settings.SiteSettingSource.POLICY,
+              siteDetailsPermission.site.source);
+          assertEquals(
+              settings.ContentSetting.BLOCK,
+              siteDetailsPermission.$.permission.value);
+
+          // Set new prefs and make sure only that permission is updated.
+          var newException = {
+            embeddingOrigin: testElement.origin,
+            origin: testElement.origin,
+            setting: settings.ContentSetting.ASK,
+            source: settings.SiteSettingSource.DEFAULT,
+          };
+          browserProxy.resetResolver('getOriginPermissions');
+          browserProxy.setSinglePref(
+              settings.ContentSettingsTypes.NOTIFICATIONS, newException);
+          return browserProxy.whenCalled('getOriginPermissions');
+        })
+        .then(function(args) {
+          // The notification pref was just updated, so make sure the call to
+          // getOriginPermissions was to check notifications.
+          assertTrue(
+              args[1].includes(settings.ContentSettingsTypes.NOTIFICATIONS));
+
+          // Check |siteDetailsPermission| now shows the new permission value.
+          assertEquals(
+              settings.ContentSetting.ASK, siteDetailsPermission.site.setting);
+          assertEquals(
+              settings.SiteSettingSource.DEFAULT,
+              siteDetailsPermission.site.source);
+          assertEquals(
+              settings.ContentSetting.DEFAULT,
+              siteDetailsPermission.$.permission.value);
+        });
+  });
 });

chrome/test/data/webui/settings/test_site_settings_prefs_browser_proxy.js

@@ -130,6 +130,27 @@ class TestSiteSettingsPrefsBrowserProxy extends TestBrowserProxy {
     }
   }
 
+  /**
+   * Sets one exception for a given category, replacing any existing exceptions
+   * for the same origin. Note this ignores embedding origins.
+   * @param {!settings.ContentSettingsTypes} category The category the new
+   *     exception belongs to.
+   * @param {!RawSiteException} newException The new preference to add/replace.
+   */
+  setSinglePref(category, newException) {
+    // Remove entries from the current prefs which have the same origin.
+    var newPrefs = /** @type {!Array<RawSiteException>} */
+        (this.prefs_.exceptions[category].filter((categoryException) => {
+          if (categoryException.origin != newException.origin)
+            return true;
+        }));
+    newPrefs.push(newException);
+    this.prefs_.exceptions[category] = newPrefs;
+
+    cr.webUIListenerCallback(
+        'contentSettingSitePermissionChanged', category, newException.origin);
+  }
+
   /**
    * Sets the prefs to use when testing.
    * @param {!Array<ZoomLevelEntry>} list The zoom list to set.
@@ -327,7 +348,7 @@ class TestSiteSettingsPrefsBrowserProxy extends TestBrowserProxy {
 
       var setting;
       var source;
-      this.prefs_.exceptions[contentType].some(function(originPrefs) {
+      this.prefs_.exceptions[contentType].some((originPrefs) => {
         if (originPrefs.origin == origin) {
           setting = originPrefs.setting;
           source = originPrefs.source;
@@ -335,7 +356,7 @@ class TestSiteSettingsPrefsBrowserProxy extends TestBrowserProxy {
         }
       });
       assert(
-          settings !== undefined,
+          setting != undefined,
           'There was no exception set for origin: ' + origin +
               ' and contentType: ' + contentType);