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..ffc5113c5c2eefeea9b11c886792ad08569a624c
--- /dev/null
+++ b/chrome/browser/resources/settings/site_settings/site_list.js
@@ -0,0 +1,242 @@
+// 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 origin that was selected by the user in the dropdown list.
+     */
+    selectedOrigin: {
+      type: String,
+      notify: true,
+    },
+
+    /**
+     * Array of sites to display in the widget.
+     */
+    sites_: {
+      type: Array,
+      value: function() { return []; },
+      observer: 'onDataChanged_',
+    },
+
+    /**
+     * 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: {
+      type: Boolean,
+      observer: 'onDataChanged_',
+    },
+
+    /**
+     * 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.setUpActionMenu_();
+      this.populateList_();
+    }.bind(this));
+  },
+
+  /**
+   * Handles the data changing, for example when the category is flipped from
+   * ALLOW to BLOCK or sites are added to the list.
+   * @private
+   */
+  onDataChanged_: function(newValue, oldValue) {
+    this.$.category.hidden =
+        !this.showSiteList_(this.sites_, this.categoryEnabled);
+  },
+
+  /**
+   * 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.computeCategoryExceptionsPrefName_(this.category));
+    var sites = pref.value;
+    for (var origin in sites) {
+      if (sites[origin]['setting'] == this.categorySubtype) {

[Dan Beam, 2015/10/29 21:10:39]

nit: sites[origin].setting

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

Done.

+        var tokens = origin.split(',');
+        newList.push({ url: tokens[0] });

[Dan Beam, 2015/10/29 21:10:39]

push({url: tokens[0]});
     ^  no spaces   ^

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

Done.

+      }
+    }
+
+    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 (siteList.length == 0)
+      return false;
+    // The Block list is only shown when the category is set to Allow since it
+    // is redundant to also list all the sites that are blocked.
+    if (this.isAllowList_())
+      return true;
+    else

[Dan Beam, 2015/10/29 21:10:39]

nit: no else after a return

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

Done.

+      return toggleState;
+  },
+
+  /**
+   * 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';
+  },
+});