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 ...
+ *
+ * @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,
+    },
+
+    /**
+      * 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,
+    },
+
+    /**
+     * What the main toggle for the category is set to (the global default if
+     * no other policy is in effect).
+     */
+    toggleState: {

[Dan Beam, 2015/10/05 16:52:57]

categoryEnabled or typeEnabled

[Finnur, 2015/10/06 16:31:09]

Done.

+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * The site that was selected by the user in the dropdown list.
+     */
+    siteSelected: {

[Dan Beam, 2015/10/05 16:52:57]

selectedSite or selectedOrigin

[Finnur, 2015/10/06 16:31:09]

Done.

+      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/05 16:52:57]

all of these should be private where possible (i.e. just _ at end, you can't
currently use @private afaik)

[Finnur, 2015/10/06 16:31:09]

Done.

[Jeremy Klein, 2015/10/06 17:07:21]

I believe this was fixed in mid-August here:

https://github.com/google/closure-compiler/commit/8c959cd226cef914cc502b72b98...

let me know if you still have issues with @private.

[Dan Beam, 2015/10/07 15:21:16]

our version of the compiler is older than that

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

[Dan Beam, 2015/10/05 16:52:57]

please do this in css instead

[Finnur, 2015/10/06 16:31:09]

Do you mean something like this? (first answer)
http://stackoverflow.com/questions/20816163/how-can-i-make-custom-polymer-ele...

+
+    this.setupActionMenu_();
+    chrome.send('fetchContentSettingsData',
+        [this.category, this.categorySubtype == this.categorySubtypes.ALLOW]);

[Dan Beam, 2015/10/05 16:52:57]

why can't we get these prefs from |this.prefs| and prefs.js?

[Finnur, 2015/10/06 16:31:09]

I've converted the other file to use prefs, I don't want to go too far down the
rabbit hole in case my approach needs altering. If you are OK with my use of
prefs in the other file, I'll work on converting this to prefs also.

+  },
+
+  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 = 'Allow';  // TODO(finnur): i18n.
+    this.blockActionLabel = 'Block';
+    this.resetActionLabel = 'Reset to Ask';
+  },
+
+  /**
+   * 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
+   *    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 double clicking on the name).

[Dan Beam, 2015/10/05 16:52:57]

why are we handling double click?  do the mocks say this?

[Finnur, 2015/10/06 16:31:09]

Hmm... I guess not. Click is more appropriate, I presume?

+   * @private
+   */
+  handleDblClick_: function(event) {
+    this.siteSelected = event.model.item.url;
+  },
+
+  /**
+   * A handler for activating one of the menu action items.
+   * @private
+   */
+  selectAction_: function(event) {
+    console.log('site: ' + event.model.item.url);
+    console.log('action ' + event.target.selectedItems[0].textContent);

[Dan Beam, 2015/10/05 16:52:58]

debugging code

[Finnur, 2015/10/06 16:31:09]

Done.

+  },
+
+  /**
+   * 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 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.categorySubtype == this.categorySubtypes.ALLOW) {

[Dan Beam, 2015/10/05 16:52:57]

pull this.categorySubtype == this.categorySubtypes.ALLOW into a method

[Finnur, 2015/10/06 16:31:09]

Done.

+      return siteList.length > 0;
+    } else {
+      return siteList.length > 0 && toggleState;
+    }

[Dan Beam, 2015/10/05 16:52:57]

no curlies

[Finnur, 2015/10/06 16:31:09]

Done.

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