Print Preview Refresh: Fix iron-list sizing

Fix the sizing of the print destinations list so that it is always set
to the maximum of the available space and 3 destinations of height.

This will ensure there is no double scrollbar unless the dialog is
extremely short.

Bug: 884741
Change-Id: Ieba1a4e634d667b2e6e5567cf6f80f5962bd0fde
Reviewed-on: https://chromium-review.googlesource.com/1235120Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#593250}

chrome/browser/resources/print_preview/new/destination_dialog.html

@@ -68,16 +68,23 @@
         width: auto
       }
 
+      cr-dialog [slot=body] {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+      }
+
       /* Height = 3 * destination item (28px) + 10px padding + 1 line text */
       #recentList {
-        height: calc(94px + 1rem);
+        flex: 0;
+        min-height: calc(94px + 1rem);
         padding-bottom: 18px;
       }
 
       /* Height = 100vh - recent (94px + 1 line + 18px) - padding (68px) - */
       /* header (82px + 1 line) - button (64px) - 2px spinner - 2px extra */
       #printList {
-        height: calc(100vh - 330px - 2rem);
+        flex: 1;
         min-height: calc(94px + 1rem);
         padding-bottom: 0;
       }
@@ -161,21 +168,19 @@
         </print-preview-search-box>
       </div>
       <div slot="body">
-        <div>
-          <print-preview-destination-list id="recentList"
-              destinations="[[recentDestinationList_]]"
-              search-query="[[searchQuery_]]"
-              list-name="$i18n{recentDestinationsTitle}"
-              on-destination-selected="onDestinationSelected_">
-          </print-preview-destination-list>
-          <print-preview-destination-list id="printList"
-              destinations="[[destinations_]]"
-              has-action-link loading-destinations="[[loadingDestinations_]]"
-              search-query="[[searchQuery_]]"
-              list-name="$i18n{printDestinationsTitle}"
-              on-destination-selected="onDestinationSelected_">
-          </print-preview-destination-list>
-        </div>
+        <print-preview-destination-list id="recentList"
+            destinations="[[recentDestinationList_]]"
+            search-query="[[searchQuery_]]"
+            list-name="$i18n{recentDestinationsTitle}"
+            on-destination-selected="onDestinationSelected_">
+        </print-preview-destination-list>
+        <print-preview-destination-list id="printList"
+            destinations="[[destinations_]]"
+            has-action-link loading-destinations="[[loadingDestinations_]]"
+            search-query="[[searchQuery_]]"
+            list-name="$i18n{printDestinationsTitle}"
+            on-destination-selected="onDestinationSelected_">
+        </print-preview-destination-list>
         <print-preview-provisional-destination-resolver id="provisionalResolver"
             destination-store="[[destinationStore]]">
         </print-preview-provisional-destination-resolver>

chrome/browser/resources/print_preview/new/destination_dialog.js

@@ -71,11 +71,6 @@ Polymer({
     },
   },
 
-  observers: [
-    'adjustHeight_(invitation_, showCloudPrintPromo, userInfo.loggedIn, ' +
-        'loadingDestinations_)',
-  ],
-
   listeners: {
     'keydown': 'onKeydown_',
   },
@@ -125,30 +120,6 @@ Polymer({
     }
   },
 
-  /** @private */
-  adjustHeight_: function() {
-    // Baseline size of recent list + buttons + title + search box + 2px extra
-    let px = 328;
-    let lines = 2;
-    if (this.invitation_) {
-      // Invitation promo size
-      px += 56;
-      lines += 4;
-    }
-    // Icon size + padding
-    if (this.showCloudPrintPromo)
-      px += 56;
-    // Dropdown menu size + margin
-    if (this.userInfo && this.userInfo.loggedIn)
-      px += 44;
-    // Spinner extra height
-    if (this.loadingDestinations_)
-      px += 2;
-
-    // Compute sizing
-    this.$.printList.style.height = `calc(100vh - ${px}px - ${lines}rem)`;
-  },
-
   /** @private */
   onDestinationStoreSet_: function() {
     assert(this.destinations_.length == 0);

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

@@ -18,10 +18,16 @@
   <template>
     <style include="print-preview-shared action-link cr-hidden-style throbber">
       :host {
-        display: block;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
         user-select: none;
       }
 
+      #listContainer {
+        flex: 1;
+      }
+
       .title,
       .total {
         color: var(--google-grey-refresh-700);
@@ -32,6 +38,8 @@
         align-items: center;
         border-bottom: 2px solid var(--google-grey-300);
         display: flex;
+        flex: 0;
+        min-height: 1em;
         padding-bottom: 8px;
       }
 
@@ -103,15 +111,17 @@
     <div class="no-destinations-message" hidden$="[[hasDestinations_]]">
       $i18n{noDestinationsMessage}
     </div>
-    <iron-list id="list" items="[[matchingDestinations_]]">
-      <template>
-        <print-preview-destination-list-item class="list-item"
-            search-query="[[searchQuery]]" destination="[[item]]"
-            on-click="onDestinationSelected_" on-keydown="onKeydown_"
-            tabindex$="[[tabIndex]]">
-        </print-preview-destination-list-item>
-      </template>
-    </iron-list>
+    <div id="listContainer">
+      <iron-list id="list" items="[[matchingDestinations_]]">
+        <template>
+          <print-preview-destination-list-item class="list-item"
+              search-query="[[searchQuery]]" destination="[[item]]"
+              on-click="onDestinationSelected_" on-keydown="onKeydown_"
+              tabindex$="[[tabIndex]]">
+          </print-preview-destination-list-item>
+        </template>
+      </iron-list>
+    </div>
   </template>
   <script src="destination_list.js"></script>
 </dom-module>

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

@@ -41,7 +41,6 @@ Polymer({
     hasDestinations_: {
       type: Boolean,
       value: true,
-      observer: 'hasDestinationsChanged_',
     },
 
     /** @private {boolean} */
@@ -56,6 +55,32 @@ Polymer({
     'matchingDestinationsChanged_(matchingDestinations_.*)',
   ],
 
+  /** @private {?ResizeObserver} */
+  resizeObserver_: null,
+
+  attached: function() {
+    this.resizeObserver_ = new ResizeObserver(entries => {
+      if (entries === null)
+        return;
+
+      const entry = assert(entries[0]);
+      const fullHeight = entry.contentRect.height;
+      // Setting maxHeight to 0 freezes the UI when re-rendering the dialog.
+      if (fullHeight > 0) {
+        this.$.list.style.maxHeight = `${fullHeight}px`;
+        this.forceIronResize();
+      }
+    });
+    this.resizeObserver_.observe(this.$.listContainer);
+  },
+
+  detached: function() {
+    if (this.resizeObserver_) {
+      this.resizeObserver_.disconnect();
+      this.resizeObserver_ = null;
+    }
+  },
+
   // This is a workaround to ensure that the iron-list correctly updates the
   // displayed destination information when the elements in the
   // |matchingDestinations_| array change, instead of using stale information
@@ -79,6 +104,7 @@ Polymer({
             this.destinations.filter(
                 d => d.matches(/** @type {!RegExp} */ (this.searchQuery))) :
             this.destinations.slice());
+    this.forceIronResize();
   },
 
   /** @private */
@@ -111,12 +137,5 @@ Polymer({
   onDestinationSelected_: function(e) {
     this.fire('destination-selected', e.target);
   },
-
-  /** @private */
-  hasDestinationsChanged_: function() {
-    // If there are no destinations, leave space for "no destinations" message.
-    this.$.list.style.height = this.hasDestinations_ ?
-        'calc(100% - 1rem - 9px)' : 'calc(100% - 2rem - 9px)';
-  },
 });
 })();

chrome/browser/resources/print_preview/new/print_preview_shared_css.html

@@ -83,11 +83,11 @@
         };
       }
 
-      cr-dialog div[slot='title'] {
+      #dialog div[slot='title'] {
         padding-bottom: 0;
       }
 
-      cr-dialog div[slot='button-container'] {
+      #dialog div[slot='button-container'] {
         align-items: center;
         box-shadow: 0 -1px 1px 0 rgba(60, 64, 67, 0.3);
         min-height: 64px;