Print Preview Componentization: Update destinations more efficiently

Use ListPropertyUpdateBehavior to avoid always changing the full list
when new destinations load. Observed a ~10% improvement in time to
refresh the list when cloud destinations were added to destination
store.

Bug: 773928
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I11c00701c8c3dd1c8f3bf06937a72d3640ff43c5
Reviewed-on: https://chromium-review.googlesource.com/1141083
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#575962}

chrome/browser/resources/print_preview/new/BUILD.gn

@@ -296,6 +296,7 @@ js_library("destination_dialog") {
     "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog",
     "//ui/webui/resources/js:event_tracker",
     "//ui/webui/resources/js:i18n_behavior",
+    "//ui/webui/resources/js:list_property_update_behavior",
   ]
 }
 

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

@@ -5,6 +5,7 @@
 <link rel="import" href="chrome://resources/html/action_link_css.html">
 <link rel="import" href="chrome://resources/html/event_tracker.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/list_property_update_behavior.html">
 <link rel="import" href="../metrics.html">
 <link rel="import" href="../print_preview_utils.html">
 <link rel="import" href="../data/destination.html">

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

@@ -5,7 +5,7 @@
 Polymer({
   is: 'print-preview-destination-dialog',
 
-  behaviors: [I18nBehavior],
+  behaviors: [I18nBehavior, ListPropertyUpdateBehavior],
 
   properties: {
     /** @type {?print_preview.DestinationStore} */
@@ -149,9 +149,15 @@ Polymer({
     if (this.userInfo.loggedIn)
       this.showCloudPrintPromo = false;
 
-    this.destinations_ = this.userInfo ?
-        this.destinationStore.destinations(this.userInfo.activeUser) :
-        [];
+    if (this.userInfo) {
+      this.updateList(
+          'destinations_',
+          destination => destination.origin + '/' + destination.id,
+          this.destinationStore.destinations(this.userInfo.activeUser));
+    } else {
+      this.destinations_ = [];
+    }
+
     this.loadingDestinations_ =
         this.destinationStore.isPrintDestinationSearchInProgress;
   },

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

@@ -12,10 +12,7 @@ Polymer({
 
   properties: {
     /** @type {Array<!print_preview.Destination>} */
-    destinations: {
-      type: Array,
-      observer: 'destinationsChanged_',
-    },
+    destinations: Array,
 
     /** @type {boolean} */
     hasActionLink: {
@@ -57,9 +54,16 @@ Polymer({
     },
   },
 
+  observers: [
+    'destinationsChanged_(destinations.*)',
+  ],
+
   /** @private {boolean} */
   newDestinations_: false,
 
+  /** @private {boolean} */
+  initializedDestinations_: false,
+
   /** @private {!Array<!Node>} */
   highlights_: [],
 
@@ -68,9 +72,10 @@ Polymer({
    * @param {?Array<!print_preview.Destination>} previous
    * @private
    */
-  destinationsChanged_: function(current, previous) {
-    if (previous == undefined) {
+  destinationsChanged_: function() {
+    if (!this.initializedDestinations_) {
       this.matchingDestinationsCount_ = this.destinations.length;
+      this.initializedDestinations_ = true;
     } else {
       this.newDestinations_ = true;
     }