Print Preview: Fix an issue with iron-list in destinations dialog

The destinations iron-list in Print Preview has an initial height of 0,
since it is sized based on its contents. This results in iron-list
setting an optimal physical size of Infinity and rendering a list with
length equal to the number of destinations that have been retrieved
initially. This causes the dialog to be extremely slow in cases where
there are many printers.

Instead, set the height of the iron-list in JS before updating the list
of printers it displays, and merge this logic with the logic to update
the throbber (since it is performing similar compuations).

Also removing unused listName property.

Bug: 1038434
Change-Id: Id38ccc6252bb2bbbb2f99b67504328f17ccdff64
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1984717Reviewed-by: Dan Beam <dbeam@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#728677}

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

@@ -139,7 +139,6 @@
         destinations="[[destinations_]]"
         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"

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

@@ -330,7 +330,6 @@ Polymer({
         this.$$('select').value = this.activeUser;
       });
     }
-    this.$.printList.forceIronResize();
   },
 
   /** @return {boolean} Whether the dialog is open. */

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

@@ -15,6 +15,8 @@ import {afterNextRender, html, Polymer} from 'chrome://resources/polymer/v3_0/po
 
 import {Destination} from '../data/destination.js';
 
+const DESTINATION_ITEM_HEIGHT = 32;
+
 Polymer({
   is: 'print-preview-destination-list',
 
@@ -35,8 +37,6 @@ Polymer({
       value: false,
     },
 
-    listName: String,
-
     /** @private {!Array<!Destination>} */
     matchingDestinations_: {
       type: Array,
@@ -57,19 +57,20 @@ Polymer({
   },
 
   observers: [
-    'updateMatchingDestinations_(destinations.*, searchQuery)',
-    'matchingDestinationsChanged_(' +
-        'matchingDestinations_.*, loadingDestinations)',
-    'updateThrobberHidden_(matchingDestinations_.*, loadingDestinations)',
+    'updateMatchingDestinations_(' +
+        'destinations.*, searchQuery, loadingDestinations)',
   ],
 
-  // 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
-  // (a known iron-list issue). The event needs to be fired while the list is
-  // visible, so firing it immediately when the change occurs does not always
-  // work.
-  forceIronResize: function() {
+  /**
+   * 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
+   * (a known iron-list issue). The event needs to be fired while the list is
+   * visible, so firing it immediately when the change occurs does not always
+   * work.
+   * @private
+   */
+  forceIronResize_: function() {
     this.$.list.fire('iron-resize');
   },
 
@@ -79,18 +80,30 @@ Polymer({
       return;
     }
 
+    const matchingDestinations = this.searchQuery ?
+        this.destinations.filter(
+            d => d.matches(/** @type {!RegExp} */ (this.searchQuery))) :
+        this.destinations.slice();
+
+    const maxDisplayedItems = this.offsetHeight / DESTINATION_ITEM_HEIGHT;
+    const isListFullHeight = maxDisplayedItems <= matchingDestinations.length;
+    const listHeight = isListFullHeight ?
+        this.offsetHeight :
+        matchingDestinations.length * DESTINATION_ITEM_HEIGHT;
+
+    // Update the throbber and "No destinations" message.
+    this.hasDestinations_ =
+        matchingDestinations.length > 0 || this.loadingDestinations;
+    this.throbberHidden_ =
+        !this.loadingDestinations || isListFullHeight || !this.hasDestinations_;
+
+    // Update the height before updating the list.
+    this.$.list.style.height = `${listHeight}px`;
     this.updateList(
         'matchingDestinations_', destination => destination.key,
-        this.searchQuery ?
-            this.destinations.filter(
-                d => d.matches(/** @type {!RegExp} */ (this.searchQuery))) :
-            this.destinations.slice());
-  },
+        matchingDestinations);
 
-  /** @private */
-  matchingDestinationsChanged_: function() {
-    const count = this.matchingDestinations_.length;
-    this.hasDestinations_ = count > 0 || this.loadingDestinations;
+    this.forceIronResize_();
   },
 
   /**
@@ -115,20 +128,4 @@ Polymer({
 
     this.fire('destination-selected', e.target);
   },
-
-  /** @private */
-  updateThrobberHidden_: function() {
-    if (!this.loadingDestinations) {
-      this.throbberHidden_ = true;
-    } else if (!this.matchingDestinations_) {
-      this.throbberHidden_ = false;
-    } else {
-      const maxDisplayedItems = this.offsetHeight / 32;
-      this.throbberHidden_ =
-          maxDisplayedItems <= this.matchingDestinations_.length;
-    }
-    afterNextRender(this, () => {
-      this.forceIronResize();
-    });
-  }
 });