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

chrome/browser/resources/settings/site_settings/site_list.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
+ * 'settings-site-list' is the widget that shows a list of Allowed and

[michaelpg, 2015/10/22 16:11:34]

nit: "is the widget that shows" --> "shows"

[Finnur, 2015/10/26 14:38:04]

Done.

+ * 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,
+    },
+
+    /**
+     * The site that was selected by the user in the dropdown list.
+     */
+    selectedOrigin: {
+      type: String,
+      notify: true,
+    },
+
+    /**
+     * Array of sites to display in the widget.

[michaelpg, 2015/10/22 16:11:34]

/** @type {Array<{url: String}>} */

[Finnur, 2015/10/26 14:38:04]

Doesn't work. Not sure what the error means...

  line 41: Don't use wrapper types (i.e. new String() or @type {String})
     * @type {Array<{url: String}>}
                          ^^^^^^

+     */
+    sites_: {
+      type: Array,
+      value: [],

[michaelpg, 2015/10/22 16:11:34]

function() { return []; },

^ so multiple <settings-site-list>s don't refer to the same sites_ array

[Finnur, 2015/10/26 14:38:04]

Done.

+    },
+
+    /**
+     * The ID of the category this widget is displaying data for.
+     * See |categories| for possible values.

[michaelpg, 2015/10/22 16:11:33]

update reference

[Finnur, 2015/10/26 14:38:04]

Done.

+     */
+    category: {

[michaelpg, 2015/10/22 16:11:34]

category: Number,

&c for all following properties

[Finnur, 2015/10/26 14:38:04]

Done.

+      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,
+    },
+
+    /**
+     * 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,
+    },
+
+    /**
+     * All possible actions in the action menu.
+     */
+    actions_: {
+      type: Object,

[michaelpg, 2015/10/22 16:11:33]

readOnly: true,

[Finnur, 2015/10/26 14:38:04]

Done.

+      values: {
+        ALLOW: 'Allow',
+        BLOCK: 'Block',
+        RESET: 'Reset',
+      }
+    },
+
+    i18n_: {
+      readOnly: true,
+      type: Object,
+      value: function() {
+        return {
+            allowAction: loadTimeData.getString('siteSettingsActionAllow'),

[michaelpg, 2015/10/22 16:11:34]

2-space indent

[Finnur, 2015/10/26 14:38:04]

Done.

+            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'];

[michaelpg, 2015/10/22 16:11:33]

nit: pref.value

[Finnur, 2015/10/26 14:38:04]

Done.

+    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() {

[michaelpg, 2015/10/22 16:11:34]

ubernit: setUpActionMenu_

[Finnur, 2015/10/26 14:38:04]

uberdone.

+    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
+   */
+  onOriginClick_: function(event) {

[michaelpg, 2015/10/22 16:11:34]

Tap

[Finnur, 2015/10/26 14:38:04]

Done.

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