Add an option page for searching and managing resources and permissions.

chrome/browser/resources/options/website_settings.js

Index: chrome/browser/resources/options/website_settings.js
diff --git a/chrome/browser/resources/options/website_settings.js b/chrome/browser/resources/options/website_settings.js
new file mode 100644
index 0000000000000000000000000000000000000000..d4bfb294b71104b8cdd3e4d9660fe4edb309d9b1
--- /dev/null
+++ b/chrome/browser/resources/options/website_settings.js
@@ -0,0 +1,111 @@
+// Copyright 2014 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.
+
+cr.define('options', function() {
+
+  /** @const */ var OptionsPage = options.OptionsPage;
+  /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
+
+  /////////////////////////////////////////////////////////////////////////////
+  // WebsiteSettingsManager class:
+
+  /**
+   * Encapsulated handling of the website settings page.
+   * @constructor
+   */
+  function WebsiteSettingsManager() {
+    OptionsPage.call(this, 'websiteSettings',
+                     loadTimeData.getString('websitesOptionsPageTabTitle'),
+                     'website-settings-page');
+  }
+
+  cr.addSingletonGetter(WebsiteSettingsManager);
+
+  WebsiteSettingsManager.prototype = {
+    __proto__: OptionsPage.prototype,
+
+    /**
+     * The saved origins list.
+     * @type {OriginList}
+     * @private
+     */
+    originList_: null,
+
+    /** @override */
+    initializePage: function() {
+      OptionsPage.prototype.initializePage.call(this);
+
+      this.pageDiv.querySelector('.website-settings-overlay-confirm').onclick =

[Bernhard Bauer, 2014/07/10 08:47:42]

Would it make sense to make this an ID instead of a class?

[Daniel Nishi, 2014/07/10 19:00:09]

I think so.

Done.

[Bernhard Bauer, 2014/07/15 08:32:49]

We can probably do that for the other elements here as well.

+          OptionsPage.closeOverlay.bind(OptionsPage);
+
+      this.pageDiv.querySelector('.resource-type-select').onchange =

[Dan Beam, 2014/07/10 02:57:24]

      this.pageDiv.querySelector('.resource-type-select').onchange =
          function(event) {
        ...
      };

[Daniel Nishi, 2014/07/10 19:00:08]

Done.

+        function(event) {

[Dan Beam, 2014/07/10 02:57:24]

nit: assert(event.target.tagName == 'SELECT');

[Daniel Nishi, 2014/07/10 19:00:08]

Done.

+          chrome.send('updateOrigins',
+                      [event.target.options[event.target.selectedIndex].value]);
+        };
+
+      var searchBox =
+          this.pageDiv.querySelector('.website-settings-search-box');
+      searchBox.addEventListener('search',
+                                 this.handleSearchQueryChange_.bind(this));
+
+      searchBox.onkeydown = function(e) {
+        if (e.keyIdentifier == 'Enter')
+          e.stopPropagation();

[Dan Beam, 2014/07/10 02:57:24]

do you want to stop the propagation or prevent the default?

[Daniel Nishi, 2014/07/10 19:00:09]

Prevent the default is better.

Done.

+      };
+
+      this.createOriginsList_();
+      chrome.send('updateOrigins', ['geolocation']);
+    },
+
+    /**
+     * Creates, decorates and initializes the origin list.
+     * @private
+     */
+    createOriginsList_: function() {
+      this.originList_ = this.pageDiv.querySelector('.origin-list');
+      options.OriginList.decorate(this.originList_);
+      this.originList_.autoExpands = true;
+    },
+
+    /**
+     * Populate the origin list with all of the origins with a given permission
+     * or that are using a given resource.
+     * @private
+     */
+     populateOrigins_: function(originDict) {
+      // TODO(dhnishi): Include the last usage time instead of just pushing the
+      // keys.
+      entries = [];

[Dan Beam, 2014/07/10 02:57:24]

^ always start with var, this is creating a global |entries|

[Daniel Nishi, 2014/07/10 19:00:09]

Done.

+      for (var key in originDict) {
+        entries.push(key);
+      }
+      this.originList_.dataModel = new ArrayDataModel(entries);

[Dan Beam, 2014/07/10 02:57:24]

|entries| => Object.keys(originDict)

[Bernhard Bauer, 2014/07/10 08:47:42]

Alternatively, just pass an array to this method. If you want to make it a dict
mapping to the last time used, you can always do that later.

[Daniel Nishi, 2014/07/10 19:00:09]

Done.

+     },
+

[Dan Beam, 2014/07/10 02:57:24]

/** Doc comment */

[Daniel Nishi, 2014/07/10 19:00:09]

Done.

+     searchOrigins: function() {

[Dan Beam, 2014/07/10 02:57:24]

make @private

[Daniel Nishi, 2014/07/10 19:00:09]

Done.

+      var filter =
+          this.pageDiv.querySelector('.website-settings-search-box').value;
+      chrome.send('updateOriginsSearchResults', [filter]);

[Dan Beam, 2014/07/10 02:57:24]

indent off (needs 1 more \s)

[Daniel Nishi, 2014/07/10 19:00:09]

Oops. I think I had the outside indented wrong.

Should line up now.

+     },
+

[Dan Beam, 2014/07/10 02:57:24]

/**
 * Doc comment.
 * @private
 */

[Daniel Nishi, 2014/07/10 19:00:09]

Done.

+     handleSearchQueryChange_: function() {
+      if (this.queryDelayTimerId_)
+        window.clearTimeout(this.queryDelayTimerId_);
+
+      this.queryDelayTimerId_ = window.setTimeout(this.searchOrigins.bind(this),
+                                                  160);

[Dan Beam, 2014/07/10 02:57:24]

ident off (needs 1 more \s)

[Daniel Nishi, 2014/07/10 19:00:09]

Fixed function indentation.

+     },
+  };
+
+  WebsiteSettingsManager.populateOrigins = function(originDict) {
+    WebsiteSettingsManager.getInstance().populateOrigins_(originDict);
+  };
+
+  // Export
+  return {
+    WebsiteSettingsManager: WebsiteSettingsManager
+  };
+
+});