Print Preview Componentization: Use destination updates

Listen for destination events and update UI when destination changes.

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

chrome/browser/resources/print_preview/data/app_state.js

@@ -26,24 +26,6 @@ print_preview.AppStateField = {
   VENDOR_OPTIONS: 'vendorOptions'
 };
 
-/**
- * Creates a |RecentDestination| to represent |destination| in the app
- * state.
- * @param {!print_preview.Destination} destination The destination to store.
- * @return {!print_preview.RecentDestination}
- */
-function makeRecentDestination(destination) {
-  return {
-    id: destination.id,
-    origin: destination.origin,
-    account: destination.account || '',
-    capabilities: destination.capabilities,
-    displayName: destination.displayName || '',
-    extensionId: destination.extensionId || '',
-    extensionName: destination.extensionName || '',
-  };
-}
-
 cr.define('print_preview', function() {
   'use strict';
   class AppState extends cr.EventTarget {
@@ -221,7 +203,8 @@ cr.define('print_preview', function() {
 
       // Determine if this destination is already in the recent destinations,
       // and where in the array it is located.
-      const newDestination = makeRecentDestination(assert(destination));
+      const newDestination =
+          print_preview.makeRecentDestination(assert(destination));
       let indexFound =
           this.state_[print_preview.AppStateField.RECENT_DESTINATIONS]
               .findIndex(function(recent) {

chrome/browser/resources/print_preview/data/destination.js

@@ -108,9 +108,38 @@ print_preview.CddCapabilities;
  */
 print_preview.Cdd;
 
+/**
+ * @typedef {{id: string,
+ *            origin: print_preview.DestinationOrigin,
+ *            account: string,
+ *            capabilities: ?print_preview.Cdd,
+ *            displayName: string,
+ *            extensionId: string,
+ *            extensionName: string}}
+ */
+print_preview.RecentDestination;
+
 cr.define('print_preview', function() {
   'use strict';
 
+  /**
+   * Creates a |RecentDestination| to represent |destination| in the app
+   * state.
+   * @param {!print_preview.Destination} destination The destination to store.
+   * @return {!print_preview.RecentDestination}
+   */
+  function makeRecentDestination(destination) {
+    return {
+      id: destination.id,
+      origin: destination.origin,
+      account: destination.account || '',
+      capabilities: destination.capabilities,
+      displayName: destination.displayName || '',
+      extensionId: destination.extensionId || '',
+      extensionName: destination.extensionName || '',
+    };
+  }
+
   class Destination {
     /**
      * Print destination data object that holds data for both local and cloud
@@ -599,5 +628,6 @@ cr.define('print_preview', function() {
   // Export
   return {
     Destination: Destination,
+    makeRecentDestination: makeRecentDestination,
   };
 });

chrome/browser/resources/print_preview/data/destination_store.js

@@ -4,17 +4,6 @@
 
 cr.exportPath('print_preview');
 
-/**
- * @typedef {{id: string,
- *            origin: print_preview.DestinationOrigin,
- *            account: string,
- *            capabilities: ?print_preview.Cdd,
- *            displayName: string,
- *            extensionId: string,
- *            extensionName: string}}
- */
-print_preview.RecentDestination;
-
 /**
  * Printer search statuses used by the destination store.
  * @enum {string}

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/html/event_tracker.html">
 <link rel="import" href="chrome://resources/html/webui_listener_tracker.html">
 <link rel="import" href="../native_layer.html">
 <link rel="import" href="../data/destination.html">

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

@@ -59,63 +59,6 @@ Polymer({
     destination_: {
       type: Object,
       notify: true,
-      value: function() {
-        const dest = new print_preview.Destination(
-            'Foo Printer', print_preview.DestinationType.LOCAL,
-            print_preview.DestinationOrigin.LOCAL, 'Foo Printer', true,
-            print_preview.DestinationConnectionStatus.ONLINE,
-            {description: 'PrinterBrandAA 12345'});
-        dest.capabilities = {
-          version: '1.0',
-          printer: {
-            collate: {default: true},
-            color: {
-              option: [
-                {type: 'STANDARD_COLOR', is_default: true},
-                {type: 'STANDARD_MONOCHROME'}
-              ]
-            },
-            copies: {default: 1, max: 1000},
-            dpi: {
-              option: [
-                {horizontal_dpi: 200, vertical_dpi: 200, is_default: true},
-                {horizontal_dpi: 100, vertical_dpi: 100},
-              ]
-            },
-            duplex: {
-              option: [
-                {type: 'NO_DUPLEX', is_default: true}, {type: 'LONG_EDGE'},
-                {type: 'SHORT_EDGE'}
-              ]
-            },
-            page_orientation: {
-              option: [
-                {type: 'PORTRAIT', is_default: true}, {type: 'LANDSCAPE'},
-                {type: 'AUTO'}
-              ]
-            },
-            media_size: {
-              option: [
-                {
-                  name: 'NA_LETTER',
-                  width_microns: 215900,
-                  height_microns: 279400,
-                  is_default: true,
-                  custom_display_name: 'Letter',
-                },
-                {
-                  name: 'CUSTOM_SQUARE',
-                  width_microns: 215900,
-                  height_microns: 215900,
-                  custom_display_name: 'CUSTOM_SQUARE',
-                }
-              ]
-            },
-            vendor_capability: [],
-          }
-        };
-        return dest;
-      },
     },
 
     /** @private {!print_preview_new.State} */
@@ -132,6 +75,16 @@ Polymer({
     },
   },
 
+  observers: [
+    'updateRecentDestinations_(destination_, destination_.capabilities)',
+  ],
+
+  /**
+   * @private {number} Number of recent destinations to save.
+   * @const
+   */
+  NUM_DESTINATIONS_: 3,
+
   /** @private {?print_preview.NativeLayer} */
   nativeLayer_: null,
 
@@ -141,6 +94,12 @@ Polymer({
   /** @private {?WebUIListenerTracker} */
   listenerTracker_: null,
 
+  /** @private {?print_preview.DestinationStore} */
+  destinationStore_: null,
+
+  /** @private {!EventTracker} */
+  tracker_: new EventTracker(),
+
   /** @type {!print_preview.MeasurementSystem} */
   measurementSystem_: new print_preview.MeasurementSystem(
       ',', '.', print_preview.MeasurementSystemUnitType.IMPERIAL),
@@ -156,6 +115,15 @@ Polymer({
     this.listenerTracker_ = new WebUIListenerTracker();
     this.destinationStore_ = new print_preview.DestinationStore(
         this.userInfo_, this.listenerTracker_);
+    this.tracker_.add(
+        this.destinationStore_,
+        print_preview.DestinationStore.EventType.DESTINATION_SELECT,
+        this.onDestinationSelect_.bind(this));
+    this.tracker_.add(
+        this.destinationStore_,
+        print_preview.DestinationStore.EventType
+            .SELECTED_DESTINATION_CAPABILITIES_READY,
+        this.onDestinationUpdated_.bind(this));
     this.nativeLayer_.getInitialSettings().then(
         this.onInitialSettingsSet_.bind(this));
   },
@@ -163,6 +131,7 @@ Polymer({
   /** @override */
   detached: function() {
     this.listenerTracker_.removeAll();
+    this.tracker_.removeAll();
   },
 
   /**
@@ -193,6 +162,53 @@ Polymer({
         this.recentDestinations_);
   },
 
+  /** @private */
+  onDestinationSelect_: function() {
+    this.destination_ = this.destinationStore_.selectedDestination;
+  },
+
+  /** @private */
+  onDestinationUpdated_: function() {
+    this.set(
+        'destination_.capabilities',
+        this.destinationStore_.selectedDestination.capabilities);
+  },
+
+  /** @private */
+  updateRecentDestinations_: function() {
+    if (!this.destination_)
+      return;
+
+    // Determine if this destination is already in the recent destinations,
+    // and where in the array it is located.
+    const newDestination =
+        print_preview.makeRecentDestination(assert(this.destination_));
+    let indexFound = this.recentDestinations_.findIndex(function(recent) {
+      return (
+          newDestination.id == recent.id &&
+          newDestination.origin == recent.origin);
+    });
+
+    // No change
+    if (indexFound == 0 &&
+        this.recentDestinations_[0].capabilities ==
+            newDestination.capabilities) {
+      return;
+    }
+
+    // Shift the array so that the nth most recent destination is located at
+    // index n.
+    if (indexFound == -1 &&
+        this.recentDestinations_.length == this.NUM_DESTINATIONS_) {
+      indexFound = this.NUM_DESTINATIONS_ - 1;
+    }
+    if (indexFound != -1)
+      this.recentDestinations_.splice(indexFound, 1);
+
+    // Add the most recent destination
+    this.recentDestinations_.splice(0, 0, newDestination);
+  },
+
   /**
    * @param {?string} savedSettingsStr The sticky settings from native layer
    * @private

chrome/browser/resources/print_preview/new/compiled_resources2.gyp

@@ -26,6 +26,8 @@
         '../data/compiled_resources2.gyp:document_info',
         '../data/compiled_resources2.gyp:measurement_system',
         '../data/compiled_resources2.gyp:user_info',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:event_tracker',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:webui_listener_tracker',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],

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

@@ -23,6 +23,7 @@
         align-items: center;
         display: flex;
         min-height: 28px;
+        overflow: hidden;
       }
 
       .destination-icon {
@@ -36,6 +37,7 @@
         display: flex;
         flex: 1;
         flex-direction: column;
+        overflow: hidden;
         width: 100%;
       }
 

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

@@ -175,6 +175,7 @@ Polymer({
        'destination.id, destination.capabilities, ' +
        'documentInfo.isModifiable, documentInfo.hasCssMediaStyles,' +
        'documentInfo.hasSelection)'],
+
   /**
    * @private {!Array<string>} List of capability types considered color.
    * @const

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

@@ -12,13 +12,15 @@
 
       ::slotted([slot=controls]) {
         flex: 1;
+        overflow: hidden;
       }
 
       ::slotted([slot=title]) {
         -webkit-padding-end: 20px;
         color: #646464;
         font-size: 1em;
-        width: 70px;
+        max-width: 70px;
+        min-width: 70px;
         word-break: break-word;
       }
 

chrome/test/data/webui/print_preview/new_print_preview_ui_browsertest.js

@@ -50,6 +50,7 @@ PrintPreviewSettingsSectionsTest = class extends NewPrintPreviewTest {
   /** @override */
   get extraLibraries() {
     return super.extraLibraries.concat([
+      'print_preview_test_utils.js',
       'settings_section_test.js',
     ]);
   }
@@ -103,7 +104,7 @@ PrintPreviewRestoreStateTest = class extends NewPrintPreviewTest {
     return super.extraLibraries.concat([
       '../test_browser_proxy.js',
       'native_layer_stub.js',
-      'print_preview_tests.js',
+      'print_preview_test_utils.js',
       'restore_state_test.js',
     ]);
   }

chrome/test/data/webui/print_preview/print_preview_test_utils.js

+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+cr.define('print_preview_test_utils', function() {
+
+  /**
+   * @param {string} printerId
+   * @param {string=} opt_printerName Defaults to an empty string.
+   * @return {!print_preview.PrinterCapabilitiesResponse}
+   */
+  function getCddTemplate(printerId, opt_printerName) {
+    return {
+      printer: {
+        deviceName: printerId,
+        printerName: opt_printerName || '',
+      },
+      capabilities: {
+        version: '1.0',
+        printer: {
+          supported_content_type: [{content_type: 'application/pdf'}],
+          collate: {default: true},
+          copies: {default: 1, max: 1000},
+          color: {
+            option: [
+              {type: 'STANDARD_COLOR', is_default: true},
+              {type: 'STANDARD_MONOCHROME'}
+            ]
+          },
+          dpi: {
+            option: [
+              {horizontal_dpi: 200, vertical_dpi: 200, is_default: true},
+              {horizontal_dpi: 100, vertical_dpi: 100},
+            ]
+          },
+          duplex: {
+            option: [
+              {type: 'NO_DUPLEX', is_default: true},
+              {type: 'LONG_EDGE'},
+              {type: 'SHORT_EDGE'}
+            ]
+          },
+          page_orientation: {
+            option: [
+              {type: 'PORTRAIT', is_default: true},
+              {type: 'LANDSCAPE'},
+              {type: 'AUTO'}
+            ]
+          },
+          media_size: {
+            option: [
+              { name: 'NA_LETTER',
+                width_microns: 215900,
+                height_microns: 279400,
+                is_default: true,
+                custom_display_name: "Letter",
+              },
+              {
+                name: 'CUSTOM_SQUARE',
+                width_microns: 215900,
+                height_microns: 215900,
+                custom_display_name: "CUSTOM_SQUARE",
+              }
+            ]
+          }
+        }
+      }
+    };
+  }
+
+  return {
+    getCddTemplate: getCddTemplate,
+  };
+});

chrome/test/data/webui/print_preview/print_preview_ui_browsertest.js

@@ -4,7 +4,7 @@
 
 /** @fileoverview Runs the Print Preview tests. */
 
-var ROOT_PATH = '../../../../../';
+const ROOT_PATH = '../../../../../';
 
 /**
  * @constructor
@@ -59,6 +59,7 @@ PrintPreviewUIBrowserTest.prototype = {
     'print_preview_tests.js',
     'native_layer_stub.js',
     'plugin_stub.js',
+    'print_preview_test_utils.js',
   ],
 };
 

chrome/test/data/webui/print_preview/restore_state_test.js

@@ -72,7 +72,7 @@ cr.define('restore_state_test', function() {
 
       nativeLayer.setInitialSettings(initialSettings);
       nativeLayer.setLocalDestinationCapabilities(
-          print_preview_test.getCddTemplate(initialSettings.printerName));
+          print_preview_test_utils.getCddTemplate(initialSettings.printerName));
 
       page = document.createElement('print-preview-app');
       document.body.appendChild(page);

chrome/test/data/webui/print_preview/settings_section_test.js

@@ -24,60 +24,16 @@ cr.define('settings_sections_tests', function() {
       PolymerTest.clearBody();
       page = document.createElement('print-preview-app');
       document.body.appendChild(page);
-    });
 
-    /** @return {!print_preview.Cdd} */
-    function getCdd() {
-      return {
-        version: '1.0',
-        printer: {
-          collate: {default: true},
-          copies: {default: 1, max: 1000},
-          color: {
-            option: [
-              {type: 'STANDARD_COLOR', is_default: true},
-              {type: 'STANDARD_MONOCHROME'}
-            ]
-          },
-          dpi: {
-            option: [
-              {horizontal_dpi: 200, vertical_dpi: 200, is_default: true},
-              {horizontal_dpi: 100, vertical_dpi: 100},
-            ]
-          },
-          duplex: {
-            option: [
-              {type: 'NO_DUPLEX', is_default: true}, {type: 'LONG_EDGE'},
-              {type: 'SHORT_EDGE'}
-            ]
-          },
-          page_orientation: {
-            option: [
-              {type: 'PORTRAIT', is_default: true}, {type: 'LANDSCAPE'},
-              {type: 'AUTO'}
-            ]
-          },
-          media_size: {
-            option: [
-              {
-                name: 'NA_LETTER',
-                width_microns: 215900,
-                height_microns: 279400,
-                is_default: true,
-                custom_display_name: 'Letter',
-              },
-              {
-                name: 'CUSTOM_SQUARE',
-                width_microns: 215900,
-                height_microns: 215900,
-                custom_display_name: 'CUSTOM_SQUARE',
-              }
-            ]
-          },
-          vendor_capability: [],
-        },
-      };
-    }
+      const fooDestination = new print_preview.Destination(
+          'FooPrinter', print_preview.DestinationType.LOCAL,
+          print_preview.DestinationOrigin.LOCAL, 'Foo Printer',
+          false /*isRecent*/, print_preview.DestinationConnectionStatus.ONLINE);
+      fooDestination.capabilities =
+          print_preview_test_utils.getCddTemplate(fooDestination.id)
+              .capabilities;
+      page.set('destination_', fooDestination);
+    });
 
     /** @param {boolean} isPdf Whether the document should be a PDF. */
     function setPdfDocument(isPdf) {
@@ -93,7 +49,9 @@ cr.define('settings_sections_tests', function() {
           print_preview.DestinationOrigin.LOCAL,
           loadTimeData.getString('printToPDF'), false /*isRecent*/,
           print_preview.DestinationConnectionStatus.ONLINE);
-      saveAsPdfDestination.capabilities = getCdd();
+      saveAsPdfDestination.capabilities =
+          print_preview_test_utils.getCddTemplate(saveAsPdfDestination.id)
+              .capabilities;
       page.set('destination_', saveAsPdfDestination);
     }
 
@@ -102,7 +60,8 @@ cr.define('settings_sections_tests', function() {
       expectEquals(false, copiesElement.hidden);
 
       // Remove copies capability.
-      const capabilities = getCdd();
+      let capabilities =
+          print_preview_test_utils.getCddTemplate('FooPrinter').capabilities;
       delete capabilities.printer.copies;
 
       // Copies section should now be hidden.
@@ -118,16 +77,16 @@ cr.define('settings_sections_tests', function() {
       expectEquals(false, layoutElement.hidden);
 
       // Remove layout capability.
-      let capabilities = getCdd();
+      let capabilities =
+          print_preview_test_utils.getCddTemplate('FooPrinter').capabilities;
       delete capabilities.printer.page_orientation;
 
       // Each of these settings should not show the capability.
-      [
-        null,
-        {option: [{ type: 'PORTRAIT', is_default: true }]},
-        {option: [{ type: 'LANDSCAPE', is_default: true}]},
+      [null, {option: [{type: 'PORTRAIT', is_default: true}]},
+       {option: [{type: 'LANDSCAPE', is_default: true}]},
       ].forEach(layoutCap => {
-        capabilities = getCdd();
+        capabilities =
+            print_preview_test_utils.getCddTemplate('FooPrinter').capabilities;
         capabilities.printer.page_orientation = layoutCap;
         // Layout section should now be hidden.
         page.set('destination_.capabilities', capabilities);
@@ -135,7 +94,8 @@ cr.define('settings_sections_tests', function() {
       });
 
       // Reset full capabilities
-      capabilities = getCdd();
+      capabilities =
+          print_preview_test_utils.getCddTemplate('FooPrinter').capabilities;
       page.set('destination_.capabilities', capabilities);
       expectEquals(false, layoutElement.hidden);
 
@@ -149,20 +109,26 @@ cr.define('settings_sections_tests', function() {
       expectEquals(false, colorElement.hidden);
 
       // Remove color capability.
-      let capabilities = getCdd();
+      let capabilities =
+          print_preview_test_utils.getCddTemplate('FooPrinter').capabilities;
       delete capabilities.printer.color;
 
       // Each of these settings should not show the capability.
-      [
-        null,
-        {option: [{ type: 'STANDARD_COLOR', is_default: true }]},
-        {option: [{ type: 'STANDARD_COLOR', is_default: true },
-                  { type: 'CUSTOM_COLOR'}]},
-        {option: [{ type: 'STANDARD_MONOCHROME', is_default: true },
-                  { type: 'CUSTOM_MONOCHROME' }]},
-        {option: [{ type: 'STANDARD_MONOCHROME', is_default: true}]},
+      [null, {option: [{type: 'STANDARD_COLOR', is_default: true}]}, {
+        option: [
+          {type: 'STANDARD_COLOR', is_default: true}, {type: 'CUSTOM_COLOR'}
+        ]
+      },
+       {
+         option: [
+           {type: 'STANDARD_MONOCHROME', is_default: true},
+           {type: 'CUSTOM_MONOCHROME'}
+         ]
+       },
+       {option: [{type: 'STANDARD_MONOCHROME', is_default: true}]},
       ].forEach(colorCap => {
-        capabilities = getCdd();
+        capabilities =
+            print_preview_test_utils.getCddTemplate('FooPrinter').capabilities;
         capabilities.printer.color = colorCap;
         // Layout section should now be hidden.
         page.set('destination_.capabilities', capabilities);
@@ -170,7 +136,8 @@ cr.define('settings_sections_tests', function() {
       });
 
       // Custom color and monochrome options should make the section visible.
-      capabilities = getCdd();
+      capabilities =
+          print_preview_test_utils.getCddTemplate('FooPrinter').capabilities;
       capabilities.printer.color =
         {option: [{ type: 'CUSTOM_COLOR', is_default: true },
                   { type: 'CUSTOM_MONOCHROME' }]};
@@ -183,7 +150,8 @@ cr.define('settings_sections_tests', function() {
       expectEquals(false, mediaSizeElement.hidden);
 
       // Remove capability.
-      let capabilities = getCdd();
+      let capabilities =
+          print_preview_test_utils.getCddTemplate('FooPrinter').capabilities;
       delete capabilities.printer.media_size;
 
       // Section should now be hidden.
@@ -191,7 +159,8 @@ cr.define('settings_sections_tests', function() {
       expectEquals(true, mediaSizeElement.hidden);
 
       // Reset
-      capabilities = getCdd();
+      capabilities =
+          print_preview_test_utils.getCddTemplate('FooPrinter').capabilities;
       page.set('destination_.capabilities', capabilities);
 
       // Set PDF document type.
@@ -224,7 +193,8 @@ cr.define('settings_sections_tests', function() {
       expectEquals(false, dpiElement.hidden);
 
       // Remove capability.
-      let capabilities = getCdd();
+      let capabilities =
+          print_preview_test_utils.getCddTemplate('FooPrinter').capabilities;
       delete capabilities.printer.dpi;
 
       // Section should now be hidden.
@@ -232,7 +202,8 @@ cr.define('settings_sections_tests', function() {
       expectEquals(true, dpiElement.hidden);
 
       // Does not show up for only 1 option.
-      capabilities = getCdd();
+      capabilities =
+          print_preview_test_utils.getCddTemplate('FooPrinter').capabilities;
       capabilities.printer.dpi.option.pop();
       page.set('destination_.capabilities', capabilities);
       expectEquals(true, dpiElement.hidden);
@@ -273,7 +244,8 @@ cr.define('settings_sections_tests', function() {
 
       // Start with HTML + duplex capability.
       setPdfDocument(false);
-      let capabilities = getCdd();
+      let capabilities =
+          print_preview_test_utils.getCddTemplate('FooPrinter').capabilities;
       page.set('destination_.capabilities', capabilities);
       expectEquals(false, optionsElement.hidden);
       expectEquals(false, headerFooter.hidden);
@@ -290,7 +262,8 @@ cr.define('settings_sections_tests', function() {
       expectEquals(false, selectionOnly.hidden);
 
       // Remove duplex capability.
-      capabilities = getCdd();
+      capabilities =
+          print_preview_test_utils.getCddTemplate('FooPrinter').capabilities;
       delete capabilities.printer.duplex;
       page.set('destination_.capabilities', capabilities);
       expectEquals(false, optionsElement.hidden);
@@ -313,7 +286,8 @@ cr.define('settings_sections_tests', function() {
       expectEquals(true, selectionOnly.hidden);
 
       // Add duplex.
-      capabilities = getCdd();
+      capabilities =
+          print_preview_test_utils.getCddTemplate('FooPrinter').capabilities;
       page.set('destination_.capabilities', capabilities);
       expectEquals(false, optionsElement.hidden);
       expectEquals(false, duplex.hidden);