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

chrome/browser/resources/settings/search_engines_page/search_engines_page.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 '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
  */
 Polymer({
   is: 'settings-search-engines-page',
 
   properties: {
     /** @type {!Array<!SearchEngine>} */
     defaultEngines: {
       type: Array,
       value: function() { return []; }
     },
 
     /** @type {!Array<!SearchEngine>} */
     otherEngines: {
       type: Array,
       value: function() { return []; }
     },
 
     /** @type {boolean} */
-    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.
+   * @private {!Array<!WebUIListener>}
+   */
+  webUIListeners_: [],

[Dan Beam, 2016/02/13 02:03:02]

probably makes sense to make a behavior to do stuff like this in the future
(similar to EventTracker)

[dpapad, 2016/02/16 18:48:05]

Agreed, this functionality can be re-used by putting it in a behavior, added a
TODO.

[dpapad, 2016/02/17 01:12:20]

FYI, extracting this as a behavior in follow-up CL
(https://codereview.chromium.org/1702063003).

+
   /** @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)));
+  },
+
+  /** @override */
+  detached: function() {
+    this.webUIListeners_.forEach(function(listener) {
+      cr.removeWebUIListener(listener);
+    });
   },
 
   /** @private */
-  enginesChanged_: function() {
-    chrome.searchEnginesPrivate.getSearchEngines(function(engines) {
-      this.defaultEngines = engines.filter(function(engine) {
-        return engine.type ==
-            chrome.searchEnginesPrivate.SearchEngineType.DEFAULT;
-      }, this);
-
-      this.otherEngines = engines.filter(function(engine) {
-        return engine.type ==
-            chrome.searchEnginesPrivate.SearchEngineType.OTHER;
-      }, this);
-    }.bind(this));
+  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));
   },
 });