MD Settings: Manage search engines 3/3, hooking up UI.

chrome/browser/resources/settings/search_engines_page/search_engines_page.js

Index: chrome/browser/resources/settings/search_engines_page/search_engines_page.js
diff --git a/chrome/browser/resources/settings/search_engines_page/search_engines_page.js b/chrome/browser/resources/settings/search_engines_page/search_engines_page.js
index be4cee5ed938f1b7bc20815c2bfae4c44ba0966f..03df897faabbf73fd7b82e48377f2125784ea83b 100644
--- a/chrome/browser/resources/settings/search_engines_page/search_engines_page.js
+++ b/chrome/browser/resources/settings/search_engines_page/search_engines_page.js
@@ -5,15 +5,9 @@
 /**
  * @fileoverview 'settings-search-engines-page' is the settings page
  * containing search engines settings.
- *
- * Example:
- *
- *    <core-animated-pages>
- *      <settings-search-engines-page prefs="{{prefs}}">
- *      </settings-search-engines-page>
- *      ... other pages ...
- *    </core-animated-pages>
- *
+ */
+
+/**
  * @group Chrome Settings Elements
  * @element settings-search-engines-page
  */
@@ -34,46 +28,63 @@ Polymer({
     },
 
     /** @type {boolean} */

[Dan Beam, 2016/02/18 03:08:19]

@type -> @private

[dpapad, 2016/02/18 19:34:51]

Done.

-    showAddSearchEngineDialog_: {
+    showAddSearchEngineDialog_: Boolean,
+
+    /** @type {boolean} */
+    otherSearchEnginesExpanded_: {
       type: Boolean,
-      value: false,
+      value: true,
     },
   },
 
+  /**
+   * Holds WebUI listeners that need to be removed when this element is
+   * destroyed.
+   * TODO(dpapad): Move listener tracking logic to a Polymer behavior class,
+   * such that it can be re-used.

[Dan Beam, 2016/02/18 03:08:19]

^ this sounds cool!

[dpapad, 2016/02/18 19:34:51]

https://codereview.chromium.org/1702063003, will send it out after this CL
lands.

+   * @private {!Array<!WebUIListener>}
+   */
+  webUIListeners_: [],
+
   /** @override */
   ready: function() {
-    chrome.searchEnginesPrivate.onSearchEnginesChanged.addListener(
-        this.enginesChanged_.bind(this));
-    this.enginesChanged_();
+    settings.SearchEnginesBrowserProxy.getInstance().
+        getSearchEnginesList().then(this.enginesChanged_.bind(this));
+    this.webUIListeners_.push(
+        cr.addWebUIListener(
+            'search-engines-changed',
+            this.enginesChanged_.bind(this)));

[Dan Beam, 2016/02/18 03:08:19]

nit: this can be less lines

[dpapad, 2016/02/18 19:34:51]

Done.

   },
 
-  /** @private */
-  enginesChanged_: function() {
-    chrome.searchEnginesPrivate.getSearchEngines(function(engines) {
-      this.defaultEngines = engines.filter(function(engine) {
-        return engine.type ==
-            chrome.searchEnginesPrivate.SearchEngineType.DEFAULT;
-      }, this);
+  /** @override */
+  detached: function() {
+    this.webUIListeners_.forEach(function(listener) {
+      cr.removeWebUIListener(listener);
+    });
+  },
 
-      this.otherEngines = engines.filter(function(engine) {
-        return engine.type ==
-            chrome.searchEnginesPrivate.SearchEngineType.OTHER;
-      }, this);
-    }.bind(this));
+  /**
+   * @param {!SearchEnginesInfo} searchEnginesInfo
+   * @private
+   */
+  enginesChanged_: function(searchEnginesInfo) {
+    this.defaultEngines = searchEnginesInfo['defaults'];
+    this.otherEngines = searchEnginesInfo['others'];
+    // TODO(dpapad): Use searchEnginesInfo['extensions'] once UI mocks are
+    // provided.
   },
 
   /** @private */
   onAddSearchEngineTap_: function() {
     this.showAddSearchEngineDialog_ = true;
     this.async(function() {
-      var dialog = this.$$('settings-add-search-engine-dialog');
+      var dialog = this.$$('settings-search-engine-dialog');
       // Register listener to detect when the dialog is closed. Flip the boolean
       // once closed to force a restamp next time it is shown such that the
       // previous dialog's contents are cleared.
       dialog.addEventListener('iron-overlay-closed', function() {
         this.showAddSearchEngineDialog_ = false;
       }.bind(this));
-      dialog.open();
     }.bind(this));
   },
 });