Flesh out the location-page class to make it more general.

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

Index: chrome/browser/resources/settings/site_settings/site_list.js
diff --git a/chrome/browser/resources/settings/site_settings/site_list.js b/chrome/browser/resources/settings/site_settings/site_list.js
new file mode 100644
index 0000000000000000000000000000000000000000..447d05a35b6b6f57123c49b5032d94c7dfa8de27
--- /dev/null
+++ b/chrome/browser/resources/settings/site_settings/site_list.js
@@ -0,0 +1,228 @@
+// 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
+ * 'settings-site-list' shows a list of Allowed and Blocked sites for a given
+ * category.
+ *
+ * Example:
+ *    <settings-site-list prefs="{{prefs}}"
+ *        category="[[category]]">
+ *    </settings-site-list>
+ *
+ * @group Chrome Settings Elements
+ * @element settings-site-list
+ */
+Polymer({
+  is: 'settings-site-list',
+  behaviors: [PrefsBehavior, SiteSettingsBehavior],
+
+  properties: {
+    /**
+     * Preferences state.
+     */
+    prefs: {
+      type: Object,
+      notify: true,
+    },
+
+    /**
+     * The site that was selected by the user in the dropdown list.
+     */
+    selectedOrigin: {

[michaelpg, 2015/10/28 18:02:20]

nit: selectedSite?

[Finnur, 2015/10/29 12:21:21]

Technically, Origin is more accurate than Site, since this is a list of origins
and it can contain multiple entries for the same site, such as:

http://foo.com:123
http://foo.com:234

I've fixed the comment, though.

+      type: String,
+      notify: true,
+    },
+
+    /**
+     * Array of sites to display in the widget.
+     */
+    sites_: {
+      type: Array,
+      value: function() { return []; },
+    },
+
+    /**
+     * The ID of the category this widget is displaying data for.
+     * See site_settings/constants.js for possible values.
+     */
+    category: Number,
+
+    /**
+      * The type of category this widget is displaying data for. Normally
+      * either ALLOW or BLOCK, representing which sites are allowed or blocked
+      * respectively.
+      */
+    categorySubtype: Number,
+
+    /**
+     * Represents the state of the main toggle shown for the category. For
+     * example, the Location category can be set to Block/Ask so false, in that
+     * case, represents Block and true represents Ask.
+     */
+    categoryEnabled: Boolean,
+
+    /**
+     * Whether to show the Allow action in the action menu.
+     */
+    showAllowAction_: Boolean,
+
+    /**
+     * Whether to show the Block action in the action menu.
+     */
+    showBlockAction_: Boolean,
+
+    /**
+     * All possible actions in the action menu.
+     */
+    actions_: {
+      readOnly: true,
+      type: Object,
+      values: {
+        ALLOW: 'Allow',
+        BLOCK: 'Block',
+        RESET: 'Reset',
+      }
+    },
+
+    i18n_: {
+      readOnly: true,
+      type: Object,
+      value: function() {
+        return {
+          allowAction: loadTimeData.getString('siteSettingsActionAllow'),
+          blockAction: loadTimeData.getString('siteSettingsActionBlock'),
+          resetAction: loadTimeData.getString('siteSettingsActionReset'),
+        };
+      },
+    },
+  },
+
+  ready: function() {
+    CrSettingsPrefs.initialized.then(function() {
+      this.categoryEnabled = this.isPrefEnabled_(this.category);
+
+      this.setUpActionMenu_();
+      this.populateList_();
+      this.$.category.hidden =
+          !this.showSiteList_(this.sites_, this.categoryEnabled);
+    }.bind(this));
+  },
+
+  /**
+   * Handles the expanding and collapsing of the sites list.
+   * @private
+   */
+  onToggle_: function(e) {
+    if (this.$.category.opened)
+      this.$.icon.icon = 'icons:expand-less';
+    else
+      this.$.icon.icon = 'icons:expand-more';
+  },
+
+  /**
+   * Populate the sites list for display.
+   * @private
+   */
+  populateList_: function() {
+    var newList = [];
+    var pref = this.getPref_(this.computeExceptionsPrefName_(this.category));
+    var sites = pref.value;
+    for (var origin in sites) {
+      if (sites[origin]['setting'] == this.categorySubtype) {
+        var tokens = origin.split(',');
+        newList.push({ url: tokens[0] });
+      }
+    }
+
+    this.sites_ = newList;
+  },
+
+  /**
+   * Setup the values to use for the action menu.
+   * @private
+   */
+  setUpActionMenu_: function() {
+    this.showAllowAction_ =
+        this.categorySubtype == settings.DefaultValues.BLOCK;
+    this.showBlockAction_ =
+        this.categorySubtype == settings.DefaultValues.ALLOW &&
+        this.category != settings.ContentSettingsTypes.FULLSCREEN;
+  },
+
+  /**
+   * A handler for selecting a site (by clicking on the origin).
+   * @private
+   */
+  onOriginTap_: function(event) {
+    this.selectedOrigin = event.model.item.url;
+  },
+
+  /**
+   * A handler for activating one of the menu action items.
+   * @private
+   */
+  onActionMenuIronSelect_: function(event) {
+    // TODO(finnur): Implement.
+  },
+
+  /**
+   * Returns the appropriate header value for display.
+   * @param {array<string>} siteList The list of all sites to display for this
+   *     category subtype.
+   * @param {boolean} toggleState The state of the global toggle for this
+   *     category.
+   * @private
+   */
+  computeSiteListHeader_: function(siteList, toggleState) {
+    if (this.categorySubtype == settings.DefaultValues.ALLOW) {
+      return loadTimeData.getStringF(
+          'titleAndCount',
+          loadTimeData.getString(
+              toggleState ? 'siteSettingsAllow' : 'siteSettingsExceptions'),
+          siteList.length);
+    } else {
+      return loadTimeData.getStringF(
+          'titleAndCount',
+          loadTimeData.getString('siteSettingsBlock'),
+          siteList.length);
+    }
+  },
+
+  /**
+   * Returns true if this widget is showing the allow list.
+   * @private
+   */
+  isAllowList_: function() {
+    return this.categorySubtype == settings.DefaultValues.ALLOW;
+  },
+
+  /**
+   * Returns whether to show the site list.
+   * @param {array} siteList The list of all sites to display for this category
+   *     subtype.
+   * @param {boolean} toggleState The state of the global toggle for this
+   *     category.
+   * @private
+   */
+  showSiteList_: function(siteList, toggleState) {
+    if (this.isAllowList_()) {
+      return siteList.length > 0;
+    } else {
+      return siteList.length > 0 && toggleState;

[michaelpg, 2015/10/28 18:02:20]

If this is a BLOCK list, and the category is set to ALLOW, then we never show
the list?

[Finnur, 2015/10/29 12:21:21]

At first I thought you'd spotted a bug, but on closer reading I see that this
function is correct.

Here is how it is supposed to work:
If this is a BLOCK list we only show it if it contains any entries *and* the
category is set to ALLOW.

The reasoning is that when the whole category is set to BLOCK, we don't need to
list the individual sites that are also blocked (it would be redundant). This
matches what we did for Chrome on Android, which is what we are trying to get
parity with.

But I'll reorder this function to try to clarify and add a comment.

Your comment, however, exposed a bug in that the categories are not changing
anymore when the data changes, but I've now rectified that.

[michaelpg, 2015/10/29 19:41:58]

If this is an ALLOW list, we always show it if it contains any entries, even if
the category is set to ALLOW. Is that right?

[Finnur, 2015/10/30 12:13:46]

Correct. That's how it works on Chrome for Android today. 

By default, the category is set to ALLOW, and we show both BLOCK and ALLOW. Once
the user flips the category default to BLOCK, we show the ALLOW list, but change
the header from 'Allowed' to 'Exceptions'.

+    }
+  },
+
+  /**
+   * Returns the icon to use for a given site.
+   * @param {string} url The url of the site to fetch the icon for.
+   * @private
+   */
+  computeSiteIcon_: function(url) {
+    // TODO(finnur): For now, we're returning a placeholder image for each site
+    // but the actual favicon for each site will need to be returned.
+    return 'communication:message';
+  },
+});