[Media Router WebUI] Disable search by default.

chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js

Index: chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
diff --git a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js b/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
index 10655d7d85da075900929b6b2f0de33568841572..2079e5fd8f0a3763e59225c88cbc3a350aaa9d28 100644
--- a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
+++ b/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
@@ -275,6 +275,17 @@ Polymer({
     },
 
     /**
+     * Whether the search feature is enabled and we should show the search
+     * input.
+     * @private {boolean}
+     */
+    searchEnabled_: {
+      type: Boolean,
+      value: false,
+      observer: 'searchEnabledChanged_',
+    },
+
+    /**
      * Search text entered by the user into the sink search input.
      * @private {string}
      */
@@ -1309,7 +1320,7 @@ Polymer({
     var deviceMissing = this.$['device-missing'];
     var list = this.$$('#sink-list');
     var resultsContainer = this.$$('#search-results-container');
-    var search = this.$['sink-search'];
+    var search = this.$$('#sink-search');
     var view = this.$['sink-list-view'];
 
     var hasList = this.hasConditionalElement_(list);
@@ -1419,7 +1430,7 @@ Polymer({
     var noMatches = this.$$('#no-search-matches');
     var results = this.$$('#search-results');
     var resultsContainer = this.$$('#search-results-container');
-    var search = this.$['sink-search'];
+    var search = this.$$('#sink-search');
     var view = this.$['sink-list-view'];
 
     // Saves current search container |offsetHeight| which includes bottom
@@ -1726,10 +1737,13 @@ Polymer({
    * @private
    */
   putSearchAtBottom_: function() {
+    var search = this.$$('#sink-search');
+    if (!this.hasConditionalElement_(search)) {
+      return;
+    }
     var deviceMissing = this.$['device-missing'];
     var list = this.$$('#sink-list');
     var resultsContainer = this.$$('#search-results-container');
-    var search = this.$['sink-search'];
     var view = this.$['sink-list-view'];
     this.searchUseBottomPadding = true;
     search.style['top'] = '';
@@ -1746,6 +1760,8 @@ Polymer({
       list.style['opacity'] = '';
     } else {
       deviceMissing.style['margin-bottom'] = search.offsetHeight + 'px';
+      search.style['margin-top'] = '';
+      view.style['padding-bottom'] = '';
     }
   },
 
@@ -1770,12 +1786,14 @@ Polymer({
     var noMatches = this.$$('#no-search-matches');
     var results = this.$$('#search-results');
     var resultsContainer = this.$$('#search-results-container');
-    var search = this.$['sink-search'];
+    var search = this.$$('#sink-search');
     var view = this.$['sink-list-view'];
 
     // If there is a height mismatch between where the animation calculated the
     // height should be and where it is now because the search results changed
     // during the animation, correct it with... another animation.
+    this.searchUseBottomPadding =
+        this.shouldSearchUseBottomPadding_(deviceMissing);
     var resultsPadding = this.computeElementVerticalPadding_(results);
     var finalHeight = this.computeTotalSearchHeight_(deviceMissing, noMatches,
         results, search.offsetHeight, this.sinkListMaxHeight_ + resultsPadding);
@@ -1972,6 +1990,8 @@ Polymer({
       return sink.isPseudoSink && !!sink.domain;
     });
     this.rebuildSinksToShow_();
+    this.searchEnabled_ = this.searchEnabled_ || this.pseudoSinks_.length > 0 ||
+        this.sinksToShow_.length >= media_router.MINIMUM_SINKS_FOR_SEARCH;
     this.filterSinks_(this.searchInputText_ || '');
     if (this.currentView_ != media_router.MediaRouterView.FILTER) {
       // This code is in the unique position of seeing |animationPromise_| as
@@ -2013,7 +2033,20 @@ Polymer({
     // clicks the search button, a focus event will not fire and so its event
     // handler from ready() will not run.
     this.showSearchResults_();
-    this.$['sink-search-input'].focus();
+    this.$$('#sink-search-input').focus();
+  },
+
+  /**
+   * Initializes the position of the search input if search becomes enabled.
+   * @param {boolean} searchEnabled The new value of |searchEnabled_|.
+   * @private
+   */
+  searchEnabledChanged_: function(searchEnabled) {
+    if (searchEnabled) {
+      this.async(function() {
+        this.putSearchAtBottom_();
+      });
+    }
   },
 
   /**
@@ -2036,7 +2069,8 @@ Polymer({
    * @private
    */
   setSearchFocusHandlers_: function() {
-    var search = this.$['sink-search-input'];
+    var search = this.$$('#sink-search');
+    var searchInput = this.$$('#sink-search-input');
     var that = this;
 
     // The window can see a blur event for two important cases: the window is
@@ -2053,11 +2087,13 @@ Polymer({
       that.isSearchFocusedOnWindowBlur_ =
           that.shadowRoot.activeElement == search;
     });
-    search.addEventListener('focus', function() {
-      if (!that.isSearchFocusedOnWindowBlur_) {
-        that.showSearchResults_();
-      }
-    });
+    if (this.hasConditionalElement_(search)) {
+      searchInput.addEventListener('focus', function() {
+        if (!that.isSearchFocusedOnWindowBlur_) {
+          that.showSearchResults_();
+        }
+      });
+    }
   },
 
   /**
@@ -2230,17 +2266,24 @@ Polymer({
       var issueHeight = this.$$('#issue-banner') &&
           this.$$('#issue-banner').style.display != 'none' ?
               this.$$('#issue-banner').offsetHeight : 0;
-      var search = this.$['sink-search'];
-      var searchHeight = search.offsetHeight;
+      var search = this.$$('#sink-search');
+      var hasSearch = this.hasConditionalElement_(search);
+      var searchHeight = hasSearch ? search.offsetHeight : 0;
+      var searchPadding =
+          hasSearch ? this.computeElementVerticalPadding_(search) : 0;
 
       this.$['container-header'].style.marginTop = firstRunFlowHeight + 'px';
       this.$['content'].style.marginTop =
           firstRunFlowHeight + headerHeight + 'px';
 
       var sinkList = this.$$('#sink-list');
+      if (hasSearch && sinkList) {
+        // This would need to be reset to '' if search could be disabled again,
+        // but once it's enabled it can't be disabled again.
+        sinkList.style.paddingBottom = '0';
+      }
       var sinkListPadding =
           sinkList ? this.computeElementVerticalPadding_(sinkList) : 0;
-      var searchPadding = this.computeElementVerticalPadding_(search);
 
       this.sinkListMaxHeight_ = this.dialogHeight_ - headerHeight -
           firstRunFlowHeight - issueHeight - searchHeight + searchPadding -