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..b5310c23c79f1cf83f6a8dc1540aa4f5ccd3331c
--- /dev/null
+++ b/chrome/browser/resources/settings/site_settings/site_list.js
@@ -0,0 +1,193 @@
+// 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' is the widget that shows a list of Allowed and
+ * Blocked sites.
+ *
+ * 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: [SiteSettingsBehavior],
+
+  properties: {
+    /**
+     * Preferences state.
+     */
+    prefs: {
+      type: Object,
+      notify: true,
+    },
+
+    /**
+     * Array of sites to display in the widget.
+     */
+    siteList_: {
+      type: Array,
+      value: [],
+    },
+
+    /**
+     * The ID of the category this widget is displaying data for.
+     * See |categories| for possible values.
+     */
+    category: {
+      type: 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: {
+      type: 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,
+    },
+
+    /**
+     * The site that was selected by the user in the dropdown list.
+     */
+    selectedOrigin: {
+      type: String,
+      notify: true,
+    },
+
+    /**
+     * Whether to show the Allow action in the action menu.
+     */
+    showAllowAction_: {
+      type: Boolean,
+    },
+
+    /**
+     * Whether to show the Block action in the action menu.
+     */
+    showBlockAction_: {
+      type: Boolean,
+    },
+
+    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);
+

[Finnur, 2015/10/15 15:46:34]

If you are interested in testing this locally, add the following lines here:

      if (this.categorySubtype == siteSettings.DefaultValues.ALLOW) {
        this.siteList_ = [ {url: "http://foo.com"}, {url: "http://bar.com"} ];
      } else if (this.categorySubtype == siteSettings.DefaultValues.BLOCK) {
        this.siteList_ = [ {url: "http://foo2.com"}, {url: "http://bar2.com"} ];
      } else {
        assertNotReached();
      }

+      this.setupActionMenu_();
+      this.$.category.hidden =
+          !this.showSiteList_(this.siteList_, this.categoryEnabled);
+    }.bind(this));
+  },
+
+  /**
+   * Setup the values to use for the action menu.
+   * @private
+   */
+  setupActionMenu_: function() {
+    this.showAllowAction_ =
+        this.categorySubtype == siteSettings.DefaultValues.BLOCK;
+    this.showBlockAction_ =
+        this.categorySubtype == siteSettings.DefaultValues.ALLOW &&
+        this.category != siteSettings.ContentSettingsTypes.FULLSCREEN;
+  },
+
+  /**
+   * A handler for selecting a site (by clicking on the origin).
+   * @private
+   */
+  onOriginClick_: 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 == siteSettings.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 == siteSettings.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;
+    }
+  },
+
+  /**
+   * 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) {
+    return 'communication:message';  // TODO(finnur): Implement actual favicons.
+  },
+});