[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 a7ff878d60e4a4ed299792617f10c1dcd9140c39..bf1aa431a700e237fe65347a47cf10038474701b 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}
      */
@@ -1308,7 +1319,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);
@@ -1418,7 +1429,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
@@ -1725,10 +1736,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'] = '';
@@ -1745,6 +1759,8 @@ Polymer({
       list.style['opacity'] = '';
     } else {
       deviceMissing.style['margin-bottom'] = search.offsetHeight + 'px';
+      search.style['margin-top'] = '';
+      view.style['padding-bottom'] = '';
     }
   },
 
@@ -1769,12 +1785,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);
@@ -1971,6 +1989,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;

[btolsch, 2016/05/20 17:54:00]

Done.

     this.filterSinks_(this.searchInputText_ || '');
     if (this.currentView_ != media_router.MediaRouterView.FILTER) {
       // This code is in the unique position of seeing |animationPromise_| as
@@ -2012,7 +2032,21 @@ 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) {
+      var that = this;
+      this.async(function() {
+        that.putSearchAtBottom_();
+      });
+    }
   },
 
   /**
@@ -2035,7 +2069,8 @@ Polymer({
    * @private
    */
   setSearchFocusHandlers_: function() {
-    var search = this.$['sink-search-input'];
+    var searchContainer = this.$$('#sink-search');

[apacible, 2016/05/20 16:46:39]

When referring to elements, please keep the naming consistent so it's easier to
follow. e.g. "search" in line 1739 vs. "searchContainer" here vs. "search" in
the next line, which is a different element.

[btolsch, 2016/05/20 17:54:00]

Done.

+    var search = this.$$('#sink-search-input');
     var that = this;
 
     // The window can see a blur event for two important cases: the window is
@@ -2052,11 +2087,13 @@ Polymer({
       that.isSearchFocusedOnWindowBlur_ =
           that.shadowRoot.activeElement == search;
     });
-    search.addEventListener('focus', function() {
-      if (!that.isSearchFocusedOnWindowBlur_) {
-        that.showSearchResults_();
-      }
-    });
+    if (this.hasConditionalElement_(searchContainer)) {
+      search.addEventListener('focus', function() {
+        if (!that.isSearchFocusedOnWindowBlur_) {
+          that.showSearchResults_();
+        }
+      });
+    }
   },
 
   /**
@@ -2229,17 +2266,22 @@ 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) {
+        sinkList.style.paddingBottom = '0';

[amp, 2016/05/18 22:25:25]

Does this ever need to be reset, or if search is visible is it always 0?

[btolsch, 2016/05/18 22:39:33]

As long as search is visible, it is always 0.  If we allowed search to be
re-disabled, it would need to be reset.  As things are now, that would be dead
code.

[apacible, 2016/05/20 16:46:39]

Please add this as a comment. ^

[btolsch, 2016/05/20 17:54:00]

Done.

+      }
       var sinkListPadding =
           sinkList ? this.computeElementVerticalPadding_(sinkList) : 0;
-      var searchPadding = this.computeElementVerticalPadding_(search);
 
       var sinkListMaxHeight = this.dialogHeight_ - headerHeight -
           firstRunFlowHeight - issueHeight - searchHeight + searchPadding -