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

chrome/browser/resources/settings/location_page/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
+ * 'cr-settings-site-list' is the widget that shows Allowed and Blocked sites.
+ *
+ * Example:
+ *
+ *      <cr-settings-site-list
+ *          category="[[category]]"
+ *          categories="[[categories]]"
+ *          category-subtype="[[allowOrBlock.BLOCK]]"
+ *          category-subtypes="[[allowOrBlock]]>
+ *      </cr-settings-site-list>
+ *      ... other pages ...

[Dan Beam, 2015/10/10 01:27:40]

indent weird

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

Done.

+ *
+ * @group Chrome Settings Elements
+ * @element cr-settings-site-list
+ */
+Polymer({
+  is: 'cr-settings-site-list',
+
+  properties: {
+    /**
+     * Array of sites to display in the widget.
+     */
+    siteList_: {
+      type: Array,
+    },
+
+    /**
+     * The ID of the category this widget is displaying data for.
+     * See |categories| for possible values.
+     */
+    category: {
+      type: Number,
+    },
+
+    /**
+     * An enum containing all the possible category numbers. Corresponds to
+     * the values found in the ContentSettingsType.
+     */
+    categories: {
+      type: Object,
+    },

[Dan Beam, 2015/10/10 01:27:40]

can this be removed?

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

Done.

+
+    /**
+      * 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,
+    },
+
+    /**
+      * An enum containing the list of all possible category subtypes.
+      */
+    categorySubtypes: {
+      type: Object,
+    },

[Dan Beam, 2015/10/10 01:27:40]

do we need this?

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

Done.

+
+    /**
+     * What the main toggle for the category is set to (the global default if

[Dan Beam, 2015/10/10 01:27:40]

i still have no idea what this means

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

Sorry, forgot to update this comment, only did so in the other file (which also
keeps track of this var).

+     * no other policy is in effect).
+     */
+    toggleState_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * The site that was selected by the user in the dropdown list.
+     */
+    selectedOrigin: {

[Dan Beam, 2015/10/10 01:27:40]

siteOrigin?

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

I kind of like your previous suggestion better (selectedOrigin). It conveys to
the outside (of the polymer object) that that's the origin the user selected,
which is what I was going for. Or is there a polymer convention not to convey
such facts to the outside?

+      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,
+    },
+
+    /**
+     * The label to show for the Allow action menu item.
+     */
+    allowActionLabel_: {
+      type: String,
+    },
+
+    /**
+     * The label to show for the Block action menu item.
+     */
+    blockActionLabel_: {
+      type: String,
+    },
+
+    /**
+     * The label to show for the Reset action menu item.
+     */
+    resetActionLabel_: {
+      type: String,
+    },

[Dan Beam, 2015/10/10 01:27:40]

for all these Label_*, can we do 1 of 2 things:

a) use I18nBehavior
b) create a private i18n_ object, like this:

i18n_: {
  readOnly: true,
  type: Object,
  value: function() {
    return {
      blockAction: loadTimeData.getString('siteSettingsActionBlock'),
      ...
    },
  },
},

which can be used from HTML as [[i18n_.blockAction]]

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

Oooh, I like that idea. Converted to b).

+  },
+
+  ready: function() {
+    // By default we hide and only appear if there's something to show.
+    this.hidden = true;

[Dan Beam, 2015/10/10 01:27:40]

move this to the template's HTML

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

Done.

+
+    this.setupActionMenu_();
+    chrome.send('fetchContentSettingsData',
+        [this.category, this.categorySubtype == this.categorySubtypes.ALLOW]);
+  },
+
+  attached: function() {
+    var self = this;
+    if (this.categorySubtype == this.categorySubtypes.ALLOW) {
+      cr.define('Settings', function() {
+        return {
+          receiveAllowedData: function() {
+            return self.receiveSiteList_.apply(self, arguments);
+          },
+        };
+      });
+    } else {
+      cr.define('Settings', function() {
+        return {
+          receiveBlockedData: function() {
+            return self.receiveSiteList_.apply(self, arguments);
+          },
+        };
+      });
+    }
+  },
+
+  /**
+   * Setup the values to use for the action menu.
+   * @private
+   */
+  setupActionMenu_: function() {
+    this.showAllowAction_ = this.categorySubtype == this.categorySubtypes.BLOCK;
+    this.showBlockAction_ =
+        this.categorySubtype == this.categorySubtypes.ALLOW &&
+        this.category != this.categories.FULLSCREEN;
+
+    this.allowActionLabel_ = loadTimeData.getString('siteSettingsActionAllow');
+    this.blockActionLabel_ = loadTimeData.getString('siteSettingsActionBlock');
+    this.resetActionLabel_ = loadTimeData.getString('siteSettingsActionReset');
+  },
+
+  /**
+   * Receive the site list and the toggle state (from the native level).
+   * @param {array} siteList The list of all sites to display for this category

[Dan Beam, 2015/10/10 01:27:40]

Array preferably with types, i.e. Array<string>

also consider closure compiling your code:
https://chromium.googlesource.com/chromium/src/+/master/docs/closure_compilat...

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

Done.

Need to figure out the closure compiling thing. I get a NOTIMPL thrown in
landmines.py when I try to use it on Windows...

+   *    subtype.
+   * @param {boolean} toggleState The state of the global toggle for this
+   *    category.
+   * @private
+   */
+  receiveSiteList_: function(siteList, toggleState) {
+    this.siteList_ = siteList;
+    this.toggleState_ = toggleState;
+    this.hidden = !this.showSiteList_(siteList, toggleState);
+  },
+
+  /**
+   * A handler for selecting a site (by clicking on the name).
+   * @private
+   */
+  handleClick_: function(event) {
+    this.selectedOrigin = event.model.item.url;
+  },
+
+  /**
+   * A handler for activating one of the menu action items.
+   * @private
+   */
+  selectAction_: function(event) {
+    // TODO(finnur): Implement.
+  },
+
+  /**
+   * Returns the appropriate header value for display.
+   * @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
+   */
+  computeSiteListHeader_: function(siteList, toggleState) {
+    if (this.categorySubtype == this.categorySubtypes.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 == this.categorySubtypes.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.

[Dan Beam, 2015/10/10 01:27:40]

favicons are the icons you see next to the title of the page in the tab handle

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

I am aware of that, as evident by the fact that I implemented the async fetching
of favicons for this very same screen on Android. :) 

Favicon fetching is probably worthy of its own CL, so this icon is simply a
placeholder (so we can verify that an icon appears for sites).

[Dan Beam, 2015/10/19 07:24:27]

what I'm saying is that this comment seems as if this code will affect the
favicon of this page rather than get the icon associated with the site we're
showing. that was my impression when first reading your comment. I understand I
misread it. hopefully it won't be there to long for others to make these same
mistake i did.

[Finnur, 2015/10/19 13:53:58]

Oh, I see. Good point. Changed.

+  },
+
+});