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

chrome/browser/resources/options/website_settings.js

+// 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);
+
+      $('website-settings-overlay-confirm').onclick =
+          OptionsPage.closeOverlay.bind(OptionsPage);
+
+      $('resourceType').onchange =

[Dan Beam, 2014/07/15 21:46:19]

$('resourceType').onchange = function() {
  var target = event.target;
  ...
};

[Daniel Nishi, 2014/07/15 22:18:23]

Done.

+          function(event) {
+            var target = event.target;
+            assert(target.tagName == 'SELECT');
+            chrome.send('updateOrigins',
+                        [target.options[target.selectedIndex].value]);

[Dan Beam, 2014/07/15 21:46:19]

isn't this the same as target.value?

[Daniel Nishi, 2014/07/15 22:18:23]

Appears to be so.

Switched to the simpler value.

+      };
+
+      var searchBox = $('website-settings-search-box');
+      searchBox.addEventListener('search',
+                                 this.handleSearchQueryChange_.bind(this));
+
+      searchBox.onkeydown = function(e) {
+        if (e.keyIdentifier == 'Enter')
+          e.preventDefault();
+      };
+
+      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.
+      this.originList_.dataModel = new ArrayDataModel(Object.keys(originDict));
+    },
+
+    /**
+     * Update the table with the origins filtered by the value in the search
+     * box.
+     * @private
+     */
+    searchOrigins: function() {
+      var filter =
+         $('website-settings-search-box').value;
+     chrome.send('updateOriginsSearchResults', [filter]);

[Dan Beam, 2014/07/15 21:46:19]

indent off

[Daniel Nishi, 2014/07/15 22:18:23]

Done.

+    },
+
+    /**
+     * Handle and delay search query changes.
+     * @param {!Event} e The event object.
+     * @private
+     */
+    handleSearchQueryChange_: function() {
+      if (this.queryDelayTimerId_)
+        window.clearTimeout(this.queryDelayTimerId_);
+
+      this.queryDelayTimerId_ = window.setTimeout(this.searchOrigins.bind(this),
+                                                  160);
+    },
+  };
+
+  WebsiteSettingsManager.populateOrigins = function(originDict) {
+    WebsiteSettingsManager.getInstance().populateOrigins_(originDict);
+  };
+
+  // Export
+  return {
+    WebsiteSettingsManager: WebsiteSettingsManager
+  };
+});