Calculate an expected number of visible destinations more accurately to...

Calculate an expected number of visible destinations more accurately to prevent extra (and unnecessary) destination search window resize. In some cases, since select control dropdown is not moved along with the control, close the select element on destination select window resize to keep UI consistent.

BUG=363557

Review URL: https://codereview.chromium.org/259873002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@266604 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/print_preview/search/destination_list.css

@@ -26,10 +26,14 @@
 }
 
 .destination-list .throbber-container {
-  -webkit-box-align: center;
-  display: -webkit-box;
-  height: 30px;
-  padding: 0 22px;
+  display: inline;
+  padding: 0 16px 0 8px;
+  position: relative;
+}
+
+.destination-list .throbber {
+  position: absolute;
+  top: -1px;
 }
 
 .destination-list .no-destinations-message {

chrome/browser/resources/print_preview/search/destination_list.html

@@ -2,11 +2,11 @@
   <header>
     <h4 class="title"></h4>
     <button class="action-link link-button" hidden></button>
+    <div class="throbber-container">
+      <div class="throbber"></div>
+    </div>
   </header>
   <ul></ul>
-  <div class="throbber-container">
-    <div class="throbber"></div>
-  </div>
   <div class="no-destinations-message"
       i18n-content="noDestinationsMessage"></div>
   <footer hidden>

chrome/browser/resources/print_preview/search/destination_list.js

@@ -128,11 +128,7 @@ cr.define('print_preview', function() {
       numItems = Math.min(numItems, this.destinations_.length);
       var headerHeight =
           this.getChildElement('.destination-list > header').offsetHeight;
-      var throbberHeight =
-          getIsVisible(this.getChildElement('.throbber-container')) ?
-              DestinationList.HEIGHT_OF_ITEM_ : 0;
-      return headerHeight + numItems * DestinationList.HEIGHT_OF_ITEM_ +
-          throbberHeight;
+      return headerHeight + numItems * DestinationList.HEIGHT_OF_ITEM_;
     },
 
     /** @param {boolean} isVisible Whether the throbber is visible. */

chrome/browser/resources/print_preview/search/destination_search.js

@@ -367,34 +367,57 @@ cr.define('print_preview', function() {
         lists.push(this.cloudList_);
       }
 
+      var getListsTotalHeight = function(lists, counts) {
+        return lists.reduce(function(sum, list, index) {
+          return sum + list.getEstimatedHeightInPixels(counts[index]) +
+              DestinationSearch.LIST_BOTTOM_PADDING_;
+        }, 0);
+      };
+      var getCounts = function(lists, count) {
+        return lists.map(function(list) { return count; });
+      };
+
       var availableHeight = this.getAvailableListsHeight_();
-      this.getChildElement('.lists').style.maxHeight = availableHeight + 'px';
+      var listsEl = this.getChildElement('.lists');
+      listsEl.style.maxHeight = availableHeight + 'px';
 
       var maxListLength = lists.reduce(function(prevCount, list) {
         return Math.max(prevCount, list.getDestinationsCount());
       }, 0);
       for (var i = 1; i <= maxListLength; i++) {
-        var listsHeight = lists.reduce(function(sum, list) {
-          return sum + list.getEstimatedHeightInPixels(i) +
-              DestinationSearch.LIST_BOTTOM_PADDING_;
-        }, 0);
-        if (listsHeight > availableHeight) {
-          i -= 1;
+        if (getListsTotalHeight(lists, getCounts(lists, i)) > availableHeight) {
+          i--;
           break;
         }
       }
+      var counts = getCounts(lists, i);
+      // Fill up the possible n-1 free slots left by the previous loop.
+      if (getListsTotalHeight(lists, counts) < availableHeight) {
+        for (var countIndex = 0; countIndex < counts.length; countIndex++) {
+          counts[countIndex]++;
+          if (getListsTotalHeight(lists, counts) > availableHeight) {
+            counts[countIndex]--;
+            break;
+          }
+        }
+      }
 
-      lists.forEach(function(list) {
-        list.updateShortListSize(i);
+      lists.forEach(function(list, index) {
+        list.updateShortListSize(counts[index]);
       });
 
       // Set height of the list manually so that search filter doesn't change
       // lists height.
-      this.getChildElement('.lists').style.height =
-          lists.reduce(function(sum, list) {
-            return sum + list.getEstimatedHeightInPixels(i) +
-                DestinationSearch.LIST_BOTTOM_PADDING_;
-          }, 0) + 'px';
+      var listsHeight = getListsTotalHeight(lists, counts) + 'px';
+      if (listsHeight != listsEl.style.height) {
+        // Try to close account select if there's a possibility it's open now.
+        var accountSelectEl = this.getChildElement('.account-select');
+        if (!accountSelectEl.disabled) {
+          accountSelectEl.disabled = true;
+          accountSelectEl.disabled = false;
+        }
+        listsEl.style.height = listsHeight;
+      }
     },
 
     /**