[Media Router] Limit dialog height to 5 sink list items

This CL limits the height of the sink list view in the Media Router dialog to 5
items (including the search box).

This CL also adds margin-bottom to #sink-list-view instead of dynamically
adding padding-bottom to various elements.

Screenshots:
https://docs.google.com/document/d/12e2KFrz_sltuGsI6VcB_0W7FdgQD8_Z3j3xQXHXOiTU/edit

Bug: 738580
Change-Id: Ie97e4d04faec148ceb9a2870cbcebce494738f78
Reviewed-on: https://chromium-review.googlesource.com/574972
Commit-Queue: Takumi Fujimoto <takumif@chromium.org>
Reviewed-by: Jennifer Apacible <apacible@chromium.org>
Cr-Commit-Position: refs/heads/master@{#487509}

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

@@ -142,7 +142,7 @@ paper-menu {
   color: rgba(0, 0, 0, 0.87);
   overflow-x: hidden;
   overflow-y: auto;
-  padding-bottom: 12px;
+  padding-bottom: 0;
   padding-top: 4px;
 }
 
@@ -196,15 +196,16 @@ paper-menu {
   /* TODO(crbug/589697): Handle overflow of very long domain names. */
 }
 
-#sink-list-view {
-  position: relative;
-}
-
 #sink-list {
   overflow-x: hidden;
   overflow-y: auto;
 }
 
+#sink-list-view {
+  margin-bottom: 12px;
+  position: relative;
+}
+
 .sink-name {
   min-width: 10%;
 }
@@ -218,11 +219,6 @@ paper-menu {
   z-index: 1;
 }
 
-:host([search-use-bottom-padding]) #sink-search {
-  padding-bottom: 16px;
-  padding-top: 0;
-}
-
 /* Separate icon class is a consequence of box-sizing: border-box set by
  * paper-icon-button. This should achieve the same dimensions as .sink-icon. */
 #sink-search-icon {

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

@@ -299,17 +299,6 @@ Polymer({
       type: Array,
     },
 
-    /**
-     * Whether the search input should be padded as if it were at the bottom of
-     * the dialog.
-     * @type {boolean}
-     */
-    searchUseBottomPadding: {
-      type: Boolean,
-      reflectToAttribute: true,
-      value: true,
-    },
-
     /**
      * The selected cast mode menu item. The item with this index is bolded in
      * the cast mode menu.
@@ -1472,7 +1461,6 @@ Polymer({
         this.getElementVerticalPadding_(search);
     var searchPadding = searchInitialPaddingBottom + searchInitialPaddingTop;
     var searchHeight = search.offsetHeight - searchPadding;
-    this.searchUseBottomPadding = true;
     var searchFinalPaddingBottom, searchFinalPaddingTop;
     [searchFinalPaddingBottom, searchFinalPaddingTop] =
         this.getElementVerticalPadding_(search);
@@ -1591,6 +1579,9 @@ Polymer({
     var search = this.$$('#sink-search');
     var view = this.$['sink-list-view'];
 
+    // Set the max height for the results list before it's shown.
+    results.style.maxHeight = this.sinkListMaxHeight_ + 'px';
+
     // Saves current search container |offsetHeight| which includes bottom
     // padding.
     var searchInitialOffsetHeight = search.offsetHeight;
@@ -1604,8 +1595,6 @@ Polymer({
         this.getElementVerticalPadding_(search);
     var searchPadding = searchInitialPaddingBottom + searchInitialPaddingTop;
     var searchHeight = search.offsetHeight - searchPadding;
-    this.searchUseBottomPadding =
-        this.shouldSearchUseBottomPadding_(deviceMissing);
     var searchFinalPaddingBottom, searchFinalPaddingTop;
     [searchFinalPaddingBottom, searchFinalPaddingTop] =
         this.getElementVerticalPadding_(search);
@@ -1972,7 +1961,6 @@ Polymer({
     var list = this.$$('#sink-list');
     var resultsContainer = this.$$('#search-results-container');
     var view = this.$['sink-list-view'];
-    this.searchUseBottomPadding = true;
     search.style['top'] = '';
     if (resultsContainer) {
       resultsContainer.style['position'] = '';
@@ -1986,7 +1974,9 @@ Polymer({
       view.style['padding-bottom'] = search.offsetHeight + 'px';
       list.style['opacity'] = '';
     } else {
-      deviceMissing.style['margin-bottom'] = search.offsetHeight + 'px';
+      var bottomMargin = 12;
+      deviceMissing.style['margin-bottom'] =
+          (search.offsetHeight + bottomMargin) + 'px';
       search.style['margin-top'] = '';
       view.style['padding-bottom'] = '';
     }
@@ -2016,11 +2006,12 @@ Polymer({
     var search = this.$$('#sink-search');
     var view = this.$['sink-list-view'];
 
+    // Set the max height for the results list before it's shown.
+    results.style.maxHeight = this.sinkListMaxHeight_ + 'px';
+
     // 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,
@@ -2400,16 +2391,6 @@ Polymer({
       this.userHasSelectedCastMode_ = false;
   },
 
-  /**
-   * @param {?Element} deviceMissing Device missing message element.
-   * @return {boolean} Whether the search input should use vertical padding as
-   *     if it were the lowest (at the very bottom) item in the dialog.
-   * @private
-   */
-  shouldSearchUseBottomPadding_: function(deviceMissing) {
-    return !deviceMissing.hasAttribute('hidden');
-  },
-
   /**
    * Shows the cast mode list.
    *
@@ -2575,23 +2556,20 @@ Polymer({
           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.
-        this.$$('#sink-list-paper-menu').style.paddingBottom = '0';
-      }
       var sinkListPadding =
           sinkList ? this.computeElementVerticalPadding_(sinkList) : 0;
 
       this.sinkListMaxHeight_ = this.dialogHeight_ - headerHeight -
           firstRunFlowHeight - issueHeight - searchHeight + searchPadding -
           sinkListPadding;
-      if (sinkList) {
+
+      // Limit the height of the dialog to five items, including search.
+      var sinkItemHeight = 41;
+      var maxSinkItems = hasSearch ? 4 : 5;
+      this.sinkListMaxHeight_ =
+          Math.min(sinkItemHeight * maxSinkItems, this.sinkListMaxHeight_);
+      if (sinkList)
         sinkList.style.maxHeight = this.sinkListMaxHeight_ + 'px';
-        var searchResults = this.$$('#search-results');
-        if (searchResults)
-          searchResults.style.maxHeight = this.sinkListMaxHeight_ + 'px';
-      }
     });
   },