Print Preview componentization: change model

- Change model to be a Polymer UI element
- Leverage existing classes to store data
- Add behavior for setting/getting settings values

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

chrome/browser/resources/print_preview/data/coordinate2d.html

+<link rel="import" href="chrome://resources/html/cr.html">
+
+<script src="coordinate2d.js"></script>

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

+<link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="../print_preview_utils.html">
+
+<script src="destination.js"></script>

chrome/browser/resources/print_preview/data/document_info.html

+<link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/html/cr/event_target.html">
+<link rel="import" href="size.html">
+<link rel="import" href="coordinate2d.html">
+<link rel="import" href="printable_area.html">
+
+<script src="document_info.js"></script>

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

@@ -36,6 +36,12 @@ cr.define('print_preview', function() {
        */
       this.isScalingDisabled_ = false;
 
+      /**
+       * Scaling required to fit to page.
+       * @private {number}
+       */
+      this.fitToPageScaling_ = 100;
+
       /**
        * Margins of the document in points.
        * @private {print_preview.Margins}
@@ -100,6 +106,11 @@ cr.define('print_preview', function() {
       return this.isScalingDisabled_;
     }
 
+    /** @return {number} Scaling required to fit to page. */
+    get fitToPageScaling() {
+      return this.fitToPageScaling_;
+    }
+
     /** @return {print_preview.Margins} Margins of the document in points. */
     get margins() {
       return this.margins_;

chrome/browser/resources/print_preview/data/printable_area.html

+<link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="size.html">
+<link rel="import" href="coordinate2d.html">
+
+<script src="printable_area.js"></script>

chrome/browser/resources/print_preview/data/size.html

+<link rel="import" href="chrome://resources/html/cr.html">
+
+<script src="size.js"></script>

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="model.html">
 <link rel="import" href="header.html">
 <link rel="import" href="destination_settings.html">
 <link rel="import" href="pages_settings.html">
@@ -30,7 +31,7 @@
         min-width: 310px;
       }
 
-      #settings {
+      #settings-sections {
         background: #fbfbfb;
         border-top: 1px solid #f3f3f3;
         flex: 1;
@@ -46,25 +47,45 @@
         justify-content: center;
       }
     </style>
+    <print-preview-model id="model" settings="{{settings}}"
+        destination="{{destination}}" document-info="{{documentInfo}}"
+        state="{{state}}"></print-preview-model>
     <div id="sidebar">
-      <print-preview-header model="[[model_]]"></print-preview-header>
-      <div id="settings">
-        <print-preview-destination-settings model="{{model_}}">
+      <print-preview-header destination="[[destination]]" state="[[state]]"
+          settings="[[settings]]"></print-preview-header>
+      <div id="settings-sections">
+        <print-preview-destination-settings destination="[[destination]]">
         </print-preview-destination-settings>
-        <print-preview-pages-settings model="{{model_}}">
+        <print-preview-pages-settings settings="{{settings}}"
+            document-info="[[documentInfo]]"
+            hidden$="[[!settings.pages.available]]">
         </print-preview-pages-settings>
-        <print-preview-copies-settings model="{{model_}}">
+        <print-preview-copies-settings settings="{{settings}}"
+            hidden$="[[!settings.copies.available]]">
         </print-preview-copies-settings>
-        <print-preview-layout-settings></print-preview-layout-settings>
-        <print-preview-color-settings></print-preview-color-settings>
-        <print-preview-media-size-settings></print-preview-media-size-settings>
-        <print-preview-margins-settings></print-preview-margins-settings>
-        <print-preview-dpi-settings></print-preview-dpi-settings>
-        <print-preview-scaling-settings model="{{model_}}">
+        <print-preview-layout-settings settings="{{settings}}"
+            hidden$="[[!settings.layout.available]]">
+        </print-preview-layout-settings>
+        <print-preview-color-settings settings="{{settings}}"
+            hidden$="[[!settings.color.available]]">
+        </print-preview-color-settings>
+        <print-preview-media-size-settings settings="{{settings}}"
+            hidden$="[[!settings.mediaSize.available]]">
+        </print-preview-media-size-settings>
+        <print-preview-margins-settings settings="{{settings}}"
+            hidden$="[[!settings.margins.available]]">
+        </print-preview-margins-settings>
+        <print-preview-dpi-settings settings="{{settings}}"
+            hidden$="[[!settings.dpi.available]]">
+        </print-preview-dpi-settings>
+        <print-preview-scaling-settings settings="{{settings}}"
+            document-info="[[documentInfo]]"
+            hidden$="[[!settings.scaling.available]]">
         </print-preview-scaling-settings>
-        <print-preview-other-options-settings model="{{model_}}">
+        <print-preview-other-options-settings settings="{{settings}}">
         </print-preview-other-options-settings>
-        <print-preview-advanced-options-settings>
+        <print-preview-advanced-options-settings settings="{{settings}}"
+            hidden$="[[!settings.vendorItems.available]]">
         </print-preview-advanced-options-settings>
       </div>
     </div>

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

@@ -6,30 +6,32 @@ Polymer({
   is: 'print-preview-app',
 
   properties: {
-    /** @private {!print_preview_new.Model} */
-    model_: {
+    /**
+     * Object containing current settings of Print Preview, for use by Polymer
+     * controls.
+     * @type {!Object}
+     */
+    settings: {
       type: Object,
       notify: true,
-      value: {
-        previewLoading: false,
-        previewFailed: false,
-        cloudPrintError: '',
-        privetExtensionError: '',
-        invalidSettings: false,
-        destinationId: 'Foo Printer',
-        destinationLocation: 'ABC-123',
-        destinationOfflineStatus: '',
-        destinationIcon: '../images/1x/printer.png',
-        copies: 1,
-        pageRange: [1, 2, 3, 4, 5],
-        duplex: false,
-        copiesInvalid: false,
-        scalingInvalid: false,
-        pagesInvalid: false,
-        isPdfDocument: true,
-        fitToPageScaling: '94',
-        documentNumPages: 5,
-      },
     },
-  }
+
+    /** @type {print_preview.Destination} */
+    destination: {
+      type: Object,
+      notify: true,
+    },
+
+    /** @type {print_preview.DocumentInfo} */
+    documentInfo: {
+      type: Object,
+      notify: true,
+    },
+
+    /** @type {!print_preview_new.State} */
+    state: {
+      type: Object,
+      notify: true,
+    },
+  },
 });

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

@@ -25,7 +25,8 @@
     {
       'target_name': 'header',
       'dependencies': [
-        'model',
+        '../data/compiled_resources2.gyp:destination',
+        'settings_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
@@ -33,14 +34,15 @@
     {
       'target_name': 'destination_settings',
       'dependencies': [
-        'model',
+        '../data/compiled_resources2.gyp:destination',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
       'target_name': 'pages_settings',
       'dependencies': [
-        'model',
+        'settings_behavior',
+        '../data/compiled_resources2.gyp:document_info',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
       ],
@@ -49,8 +51,8 @@
     {
       'target_name': 'copies_settings',
       'dependencies': [
-        'model',
         'number_settings_section',
+        'settings_behavior',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -87,22 +89,22 @@
     {
       'target_name': 'scaling_settings',
       'dependencies': [
-        'model',
+        '../data/compiled_resources2.gyp:document_info',
         'number_settings_section',
+        'settings_behavior',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
       'target_name': 'other_options_settings',
       'dependencies': [
-        'model',
+        'settings_behavior',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
       'target_name': 'advanced_options_settings',
       'dependencies': [
-        'model',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -112,10 +114,20 @@
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'settings_behavior',
+      'dependencies': [
+        'model',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
     {
       'target_name': 'model',
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+        '../data/compiled_resources2.gyp:destination',
+        '../data/compiled_resources2.gyp:document_info',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     }

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

@@ -3,6 +3,7 @@
 <link rel="import" href="checkbox_radio_css.html">
 <link rel="import" href="number_settings_section.html">
 <link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="settings_behavior.html">
 
 <dom-module id="print-preview-copies-settings">
   <template>

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

@@ -5,13 +5,9 @@
 Polymer({
   is: 'print-preview-copies-settings',
 
-  properties: {
-    /** @type {!print_preview_new.Model} */
-    model: {
-      type: Object,
-      notify: true,
-    },
+  behaviors: [SettingsBehavior],
 
+  properties: {
     /** @private {string} */
     inputString_: String,
 
@@ -19,17 +15,35 @@ Polymer({
     inputValid_: Boolean,
   },
 
-  observers: ['onCopiesChanged_(inputString_, inputValid_)'],
+  /** @private {boolean} */
+  isInitialized_: false,
+
+  observers: [
+    'onInputChanged_(inputString_, inputValid_)',
+    'onInitialized_(settings.copies.value)'
+  ],
+
+  /**
+   * Updates the input string when the setting has been initialized.
+   * @private
+   */
+  onInitialized_: function() {
+    if (this.isInitialized_)
+      return;
+    this.isInitialized_ = true;
+    const copies = this.getSetting('copies');
+    this.set('inputString_', copies.value);
+  },
 
   /**
    * Updates model.copies and model.copiesInvalid based on the validity
    * and current value of the copies input.
    * @private
    */
-  onCopiesChanged_: function() {
-    this.set(
-        'model.copies', this.inputValid_ ? parseInt(this.inputString_, 10) : 1);
-    this.set('model.copiesInvalid', !this.inputValid_);
+  onInputChanged_: function() {
+    this.setSetting(
+        'copies', this.inputValid_ ? parseInt(this.inputString_, 10) : 1);
+    this.setSettingValid('copies', this.inputValid_);
   },
 
   /**

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

@@ -2,6 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="button_css.html">
+<link rel="import" href="../data/destination.html">
 <link rel="import" href="print_preview_shared_css.html">
 <link rel="import" href="throbber_css.html">
 <link rel="import" href="settings_section.html">
@@ -64,13 +65,12 @@
         </div>
         <div class="destination-settings-box" hidden="[[loadingDestination_]]">
           <img class="destination-icon"
-             src="[[model.destinationIcon]]" alt="">
+             src="[[destination.iconUrl]]" alt="">
           <div class="destination-info-wrapper">
-            <div class="destination-name">[[model.destinationId]]</div>
-            <div class="destination-location">
-                [[model.destinationLocation]]</div>
+            <div class="destination-name">[[destination.id]]</div>
+            <div class="destination-location">[[destination.hint]]</div>
             <div class="destination-offline-status">
-                [[model.destinationOfflineStatus]]</div>
+                [[destination.offlineStatusText]]</div>
           </div>
         </div>
         <button>$i18n{changeDestination}</button>

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

@@ -6,11 +6,8 @@ Polymer({
   is: 'print-preview-destination-settings',
 
   properties: {
-    /** @type {!print_preview_new.Model} */
-    model: {
-      type: Object,
-      notify: true,
-    },
+    /** @type {!print_preview.Destination} */
+    destination: Object,
 
     /** @private {boolean} */
     loadingDestination_: Boolean,

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="print_preview_shared_css.html">
 <link rel="import" href="button_css.html">
+<link rel="import" href="../data/destination.html">
+<link rel="import" href="settings_behavior.html">
+<link rel="import" href="print_preview_shared_css.html">
 <link rel="import" href="strings.html">
 
 <dom-module id="print-preview-header">
@@ -75,7 +77,7 @@
       </button>
       <button class="print default" on-tap="onPrintButtonTap_"
           disabled$="[[printButtonDisabled_(currentErrorOrState_)]]">
-        [[getPrintButton_(model.destinationId)]]
+        [[getPrintButton_(destination.id)]]
       </button>
     </div>
   </template>

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

@@ -2,21 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/**
- * Enumeration of Google-promoted destination IDs.
- * @enum {string}
- */
-const GooglePromotedId = {
-  DOCS: '__google__docs',
-  SAVE_AS_PDF: 'Save as PDF'
-};
-
 Polymer({
   is: 'print-preview-header',
 
+  behaviors: [SettingsBehavior],
+
   properties: {
-    /** @type {!print_preview_new.Model} */
-    model: Object,
+    /** @type {!print_preview.Destination} */
+    destination: Object,
+
+    /** @type {!print_preview_new.State} */
+    state: Object,
 
     /** @private {boolean} */
     printInProgress_: {
@@ -31,11 +27,9 @@ Polymer({
      */
     currentErrorOrState_: {
       type: String,
-      computed: 'computeErrorOrStateString_(model.previewLoading, ' +
-          'model.previewFailed, model.cloudPrintError, ' +
-          'model.privetExtensionError, model.invalidSettings, ' +
-          'model.copiesInvalid, model.scalingInvalid, model.pagesInvalid, ' +
-          'printInProgress_)'
+      computed: 'computeErrorOrStateString_(state.*, ' +
+          'settings.copies.valid, settings.scaling.valid, ' +
+          'settings.pages.valid, printInProgress_)'
     },
 
     /**
@@ -46,8 +40,9 @@ Polymer({
      */
     labelInfo_: {
       type: Object,
-      computed: 'getLabelInfo_(currentErrorOrState_, model.destinationId, ' +
-          'model.copies, model.pageRange, model.duplex)'
+      computed: 'getLabelInfo_(currentErrorOrState_, destination.id, ' +
+          'settings.copies.value, settings.pages.value, ' +
+          'settings.duplex.value)'
     },
   },
 
@@ -66,8 +61,9 @@ Polymer({
    * @private
    */
   isPdfOrDrive_: function() {
-    return this.model.destinationId == GooglePromotedId.SAVE_AS_PDF ||
-        this.model.destinationId == GooglePromotedId.DOCS;
+    return this.destination.id ==
+        print_preview.Destination.GooglePromotedId.SAVE_AS_PDF ||
+        this.destination.id == print_preview.Destination.GooglePromotedId.DOCS;
   },
 
   /**
@@ -84,13 +80,13 @@ Polymer({
    * @private
    */
   computeErrorOrStateString_: function() {
-    if (this.model.cloudPrintError != '')
-      return this.model.cloudPrintError;
-    if (this.model.privetExtensionError != '')
-      return this.model.privetExtensionError;
-    if (this.model.invalidSettings || this.model.previewFailed ||
-        this.model.previewLoading || this.model.copiesInvalid ||
-        this.model.scalingInvalid || this.model.pagesInvalid) {
+    if (this.state.cloudPrintError != '')
+      return this.state.cloudPrintError;
+    if (this.state.privetExtensionError != '')
+      return this.state.privetExtensionError;
+    if (this.state.invalidSettings || this.state.previewFailed ||
+        this.state.previewLoading || !this.getSetting('copies').valid ||
+        !this.getSetting('scaling').valid || !this.getSetting('pages').valid) {
       return '';
     }
     if (this.printInProgress_) {
@@ -109,13 +105,13 @@ Polymer({
    */
   getLabelInfo_: function() {
     const saveToPdfOrDrive = this.isPdfOrDrive_();
-    let numPages = this.model.pageRange.length;
+    let numPages = this.getSetting('pages').value.length;
     let numSheets = numPages;
-    if (!saveToPdfOrDrive && this.model.duplex) {
+    if (!saveToPdfOrDrive && this.getSetting('duplex').value) {
       numSheets = Math.ceil(numPages / 2);
     }
 
-    const copies = this.model.copies;
+    const copies = /** @type {number} */ (this.getSetting('copies').value);
     numSheets *= copies;
     numPages *= copies;
 

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="../data/destination.html">
+<link rel="import" href="../data/document_info.html">
+
+<script src="model.js"></script>

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

@@ -4,6 +4,16 @@
 
 cr.exportPath('print_preview_new');
 
+/**
+ * @typedef {{
+ *   value: *,
+ *   valid: boolean,
+ *   available: boolean,
+ *   updatesPreview: boolean
+ * }}
+ */
+print_preview_new.Setting;
+
 /**
  * @typedef {{
  *   previewLoading: boolean,
@@ -11,19 +21,177 @@ cr.exportPath('print_preview_new');
  *   cloudPrintError: string,
  *   privetExtensionError: string,
  *   invalidSettings: boolean,
- *   destinationId: string,
- *   destinationHint: string,
- *   destinationOfflineStatus: string,
- *   destinationIcon: string,
- *   copies: number,
- *   pageRange: !Array<number>,
- *   duplex: boolean,
- *   copiesInvalid: boolean,
- *   scalingInvalid: boolean,
- *   pagesInvalid: boolean,
- *   isPdfDocument: boolean,
- *   fitToPageScaling: string,
- *   documentNumPages: number,
  * }}
  */
-print_preview_new.Model;
+print_preview_new.State;
+
+Polymer({
+  is: 'print-preview-model',
+
+  properties: {
+    /**
+     * Object containing current settings of Print Preview, for use by Polymer
+     * controls.
+     * @type {{
+     *   pages: !print_preview_new.Setting,
+     *   copies: !print_preview_new.Setting,
+     *   collate: !print_preview_new.Setting,
+     *   layout: !print_preview_new.Setting,
+     *   color: !print_preview_new.Setting,
+     *   mediaSize: !print_preview_new.Setting,
+     *   margins: !print_preview_new.Setting,
+     *   dpi: !print_preview_new.Setting,
+     *   fitToPage: !print_preview_new.Setting,
+     *   scaling: !print_preview_new.Setting,
+     *   duplex: !print_preview_new.Setting,
+     *   cssBackground: !print_preview_new.Setting,
+     *   selectionOnly: !print_preview_new.Setting,
+     *   headerFooter: !print_preview_new.Setting,
+     *   rasterize: !print_preview_new.Setting,
+     *   vendorItems: !print_preview_new.Setting,
+     * }}
+     */
+    settings: {
+      type: Object,
+      notify: true,
+      value: {
+        pages: {
+          value: [1, 2, 3, 4, 5],
+          valid: true,
+          available: true,
+          updatesPreview: true,
+        },
+        copies: {
+          value: '1',
+          valid: true,
+          available: true,
+          updatesPreview: false,
+        },
+        collate: {
+          value: true,
+          valid: true,
+          available: true,
+          updatesPreview: false,
+        },
+        layout: {
+          value: false, /* portrait */
+          valid: true,
+          available: true,
+          updatesPreview: true,
+        },
+        color: {
+          value: true, /* color */
+          valid: true,
+          available: true,
+          updatesPreview: true,
+        },
+        mediaSize: {
+          value: {
+            width_microns: 215900,
+            height_microns: 279400,
+          },
+          valid: true,
+          available: true,
+          updatesPreview: true,
+        },
+        margins: {
+          value: 0,
+          valid: true,
+          available: true,
+          updatesPreview: true,
+        },
+        dpi: {
+          value: {},
+          valid: true,
+          available: true,
+          updatesPreview: false,
+        },
+        fitToPage: {
+          value: false,
+          valid: true,
+          available: true,
+          updatesPreview: true,
+        },
+        scaling: {
+          value: '100',
+          valid: true,
+          available: true,
+          updatesPreview: true,
+        },
+        duplex: {
+          value: true,
+          valid: true,
+          available: true,
+          updatesPreview: false,
+        },
+        cssBackground: {
+          value: false,
+          valid: true,
+          available: true,
+          updatesPreview: true,
+        },
+        selectionOnly: {
+          value: false,
+          valid: true,
+          available: true,
+          updatesPreview: true,
+        },
+        headerFooter: {
+          value: true,
+          valid: true,
+          available: true,
+          updatesPreview: true,
+        },
+        rasterize: {
+          value: false,
+          valid: true,
+          available: true,
+          updatesPreview: false,
+        },
+        vendorItems: {
+          value: {},
+          valid: true,
+          available: true,
+          updatesPreview: false,
+        },
+      },
+    },
+
+    /** @type {print_preview.Destination} */
+    destination: {
+      type: Object,
+      notify: true,
+      value: new print_preview.Destination(
+          'Foo Printer', print_preview.DestinationType.LOCAL,
+          print_preview.DestinationOrigin.LOCAL, 'Foo Printer', true,
+          print_preview.DestinationConnectionStatus.ONLINE,
+          {description: 'PrinterBrandAA 12345'}),
+    },
+
+    /** @type {print_preview.DocumentInfo} */
+    documentInfo: {
+      type: Object,
+      notify: true,
+      value: function() {
+        const info = new print_preview.DocumentInfo();
+        info.init(false, 'DocumentTitle', true);
+        info.updatePageCount(5);
+        info.fitToPageScaling_ = 94;
+        return info;
+      },
+    },
+
+    /** @type {!print_preview_new.State} */
+    state: {
+      type: Object,
+      notify: true,
+      value: {
+        previewLoading: false,
+        previewFailed: false,
+        cloudPrintError: '',
+        privetExtensionError: '',
+        invalidSettings: false,
+      },
+    },
+  },
+});

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

@@ -35,11 +35,6 @@ Polymer({
     hintMessage: String,
   },
 
-  /** @override */
-  ready: function() {
-    this.inputString = this.defaultValue;
-  },
-
   /**
    * @param {!KeyboardEvent} e The keyboard event
    */

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

@@ -19,7 +19,7 @@
         </div>
         <div id="duplex-container">
           <label aria-live="polite">
-            <input type="checkbox" checked="{{model.duplex::change}}">
+            <input type="checkbox" checked="{{duplexValue_::change}}">
             <span>$i18n{optionTwoSided}</span>
           </label>
         </div>

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

@@ -5,11 +5,28 @@
 Polymer({
   is: 'print-preview-other-options-settings',
 
+  behaviors: [SettingsBehavior],
+
   properties: {
-    /** @type {!print_preview_new.Model} */
-    model: {
-      type: Object,
-      notify: true,
-    },
+    /** @private {boolean} */
+    duplexValue_: Boolean,
+  },
+
+  observers: [
+    'onInitialized_(settings.duplex.value)',
+    'onDuplexChange_(duplexValue_)',
+  ],
+
+  isInitialized_: false,
+
+  onInitialized_: function() {
+    if (this.isInitialized_)
+      return;
+    this.set('duplexValue_', this.getSetting('duplex').value);
+    this.isInitialized_ = true;
+  },
+
+  onDuplexChange_: function() {
+    this.setSetting('duplex', this.duplexValue_);
   },
 });

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

@@ -2,8 +2,10 @@
 
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="checkbox_radio_css.html">
+<link rel="import" href="../data/document_info.html">
 <link rel="import" href="input_css.html">
 <link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="settings_behavior.html">
 <link rel="import" href="settings_section.html">
 
 <dom-module id="print-preview-pages-settings">
@@ -46,7 +48,7 @@
         </div>
         <span class="hint" aria-live="polite"
             inner-h-t-m-l="[[getHintMessage_(errorState_,
-                                             model.documentNumPages)]]"
+                                             documentInfo.pageCount)]]"
             hidden$="[[hintHidden_(inputString_, errorState_)]]">
         </span>
       </div>

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

@@ -14,12 +14,11 @@ const PagesInputErrorState = {
 Polymer({
   is: 'print-preview-pages-settings',
 
+  behaviors: [SettingsBehavior],
+
   properties: {
-    /** @type {!print_preview_new.Model} */
-    model: {
-      type: Object,
-      notify: true,
-    },
+    /** @type {!print_preview.DocumentInfo} */
+    documentInfo: Object,
 
     /** @private {string} */
     inputString_: {
@@ -30,7 +29,7 @@ Polymer({
     /** @private {!Array<number>} */
     allPagesArray_: {
       type: Array,
-      computed: 'computeAllPagesArray_(model.documentNumPages)',
+      computed: 'computeAllPagesArray_(documentInfo.pageCount)',
     },
 
     /** @private {boolean} */
@@ -70,7 +69,7 @@ Polymer({
    * @private
    */
   computeAllPagesArray_: function() {
-    const array = new Array(this.model.documentNumPages);
+    const array = new Array(this.documentInfo.pageCount);
     for (let i = 0; i < array.length; i++)
       array[i] = i + 1;
     return array;
@@ -148,13 +147,13 @@ Polymer({
    */
   onRangeChange_: function() {
     if (this.errorState_ != PagesInputErrorState.NO_ERROR) {
-      this.set('model.pagesInvalid', true);
+      this.setSettingValid('pages', false);
       this.$$('.user-value').classList.add('invalid');
       return;
     }
     this.$$('.user-value').classList.remove('invalid');
-    this.set('model.pagesInvalid', false);
-    this.set('model.pageRange', this.pagesToPrint_);
+    this.setSettingValid('pages', true);
+    this.setSetting('pages', this.pagesToPrint_);
   },
 
   /** @private */
@@ -202,7 +201,7 @@ Polymer({
           loadTimeData.getString('examplePageRangeText'));
     } else {
       return loadTimeData.getStringF(
-          'pageRangeLimitInstructionWithValue', this.model.documentNumPages);
+          'pageRangeLimitInstructionWithValue', this.documentInfo.pageCount);
     }
   },
 

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="checkbox_radio_css.html">
+<link rel="import" href="../data/document_info.html">
 <link rel="import" href="number_settings_section.html">
 <link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="settings_behavior.html">
 
 <dom-module id="print-preview-scaling-settings">
   <template>
@@ -13,7 +15,7 @@
         input-string="{{inputString_}}" input-valid="{{inputValid_}}"
         hint-message="$i18n{scalingInstruction}" class="multirow-controls">
       <div slot="opt-outside-content" id="fit-to-page-container"
-          class="checkbox" hidden$="[[!model.isPdfDocument]]">
+          class="checkbox" hidden$="[[!settings.fitToPage.available]]">
         <label aria-live="polite">
           <input class="checkbox" type="checkbox"
               on-change="onFitToPageChange_">

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

@@ -5,12 +5,11 @@
 Polymer({
   is: 'print-preview-scaling-settings',
 
+  behaviors: [SettingsBehavior],
+
   properties: {
-    /** @type {!print_preview_new.Model} */
-    model: {
-      type: Object,
-      notify: true,
-    },
+    /** @type {Object} */
+    documentInfo: Object,
 
     /** @private {string} */
     inputString_: String,
@@ -25,25 +24,46 @@ Polymer({
   /** @private {number} */
   fitToPageFlag_: 0,
 
-  observers: ['onScalingChanged_(inputString_, inputValid_)'],
+  /** @private {boolean} */
+  isInitialized_: false,
+
+  observers: [
+    'onInputChanged_(inputString_, inputValid_, documentInfo.isModifiable)',
+    'onInitialized_(settings.scaling.value)'
+  ],
 
   /**
-   * Updates model.scaling and model.scalingInvalid based on the validity
-   * and current value of the scaling input.
+   * Updates the input string when the setting has been initialized.
    * @private
    */
-  onScalingChanged_: function() {
+  onInitialized_: function() {
+    // Avoid loops from setting inputString_ -> onInputChanged_ sets scaling
+    // value -> onInitialized_ sets inputString_
+    if (this.isInitialized_)
+      return;
+    this.isInitialized_ = true;
+    const scaling = this.getSetting('scaling');
+    this.inputString_ = /** @type {string} */ (scaling.value);
+  },
+
+  /**
+   * Updates model.settings.scaling based on the validity and current value of
+   * the scaling input.
+   * @private
+   */
+  onInputChanged_: function() {
     if (this.fitToPageFlag_ > 0) {
       this.fitToPageFlag_--;
-      return;
-    }
-    const checkbox = this.$$('.checkbox input[type="checkbox"]');
-    if (checkbox.checked && this.model.isPdfDocument) {
-      checkbox.checked = false;
-    } else if (this.inputValid_) {
-      this.lastValidScaling_ = this.inputString_;
+    } else {
+      const checkbox = this.$$('.checkbox input[type="checkbox"]');
+      if (checkbox.checked && !this.documentInfo.isModifiable) {
+        checkbox.checked = false;
+      } else if (this.inputValid_) {
+        this.lastValidScaling_ = this.inputString_;
+      }
+      this.setSetting('scaling', this.inputString_);
     }
-    this.set('model.scalingInvalid', !this.inputValid_);
+    this.setSettingValid('scaling', this.inputValid_);
   },
 
   /**
@@ -52,7 +72,7 @@ Polymer({
   onFitToPageChange_: function() {
     if (this.$$('.checkbox input[type="checkbox"]').checked) {
       this.fitToPageFlag_ = 2;
-      this.set('inputString_', this.model.fitToPageScaling);
+      this.set('inputString_', this.documentInfo.fitToPageScaling);
     } else {
       this.set('inputString_', this.lastValidScaling_);
     }

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

+<link rel="import" href="chrome://resources/html/assert.html">
+
+<script src="settings_behavior.js"></script>

chrome/browser/resources/print_preview/new/settings_behavior.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.
+
+/** @polymerBehavior */
+const SettingsBehavior = {
+  properties: {
+    /** @type {Object} */
+    settings: {
+      type: Object,
+      notify: true,
+    },
+  },
+
+  /**
+   * @param {string} settingName Name of the setting to get.
+   * @return {print_preview_new.Setting} The setting object.
+   */
+  getSetting: function(settingName) {
+    const setting = /** @type {print_preview_new.Setting} */ (
+        this.get(settingName, this.settings));
+    assert(!!setting, 'Setting is missing: ' + settingName);
+    return setting;
+  },
+
+  /**
+   * @param {string} settingName Name of the setting to set
+   * @param {boolean | string | number | Array | Object} value The value to set
+   *     the setting to.
+   */
+  setSetting: function(settingName, value) {
+    const setting = this.getSetting(settingName);
+    assert(setting.available, 'Setting is not available: ' + settingName);
+    this.set(`settings.${settingName}.value`, value);
+  },
+
+  /**
+   * @param {string} settingName Name of the setting to set
+   * @param {boolean} valid Whether the setting value is currently valid.
+   */
+  setSettingValid: function(settingName, valid) {
+    const setting = this.getSetting(settingName);
+    assert(setting.available, 'Setting is not available: ' + settingName);
+    this.set(`settings.${settingName}.valid`, valid);
+  }
+};

chrome/browser/resources/print_preview/print_preview_resources.grd

@@ -23,12 +23,60 @@
       <structure name="IDR_PRINT_PREVIEW_NEW_APP_JS"
                  file="new/app.js"
                  type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_NEW_MODEL_HTML"
+                 file="new/model.html"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_NEW_MODEL_JS"
+                 file="new/model.js"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_DATA_DESTINATION_HTML"
+                 file="data/destination.html"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_DATA_DESTINATION_JS"
+                 file="data/destination.js"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_PRINT_PREVIEW_UTILS_HTML"
+                 file="print_preview_utils.html"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_PRINT_PREVIEW_UTILS_JS"
+                 file="print_preview_utils.js"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_DATA_DOCUMENT_INFO_HTML"
+                 file="data/document_info.html"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_DATA_DOCUMENT_INFO_JS"
+                 file="data/document_info.js"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_DATA_SIZE_HTML"
+                 file="data/size.html"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_DATA_SIZE_JS"
+                 file="data/size.js"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_DATA_COORDINATE2D_HTML"
+                 file="data/coordinate2d.html"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_DATA_COORDINATE2D_JS"
+                 file="data/coordinate2d.js"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_DATA_PRINTABLE_AREA_HTML"
+                 file="data/printable_area.html"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_DATA_PRINTABLE_AREA_JS"
+                 file="data/printable_area.js"
+                 type="chrome_html" />
       <structure name="IDR_PRINT_PREVIEW_NEW_HEADER_HTML"
                  file="new/header.html"
                  type="chrome_html" />
       <structure name="IDR_PRINT_PREVIEW_NEW_HEADER_JS"
                  file="new/header.js"
                  type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_NEW_SETTINGS_BEHAVIOR_HTML"
+                 file="new/settings_behavior.html"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_NEW_SETTINGS_BEHAVIOR_JS"
+                 file="new/settings_behavior.js"
+                 type="chrome_html" />
       <structure name="IDR_PRINT_PREVIEW_NEW_SETTINGS_SECTION_HTML"
                  file="new/settings_section.html"
                  type="chrome_html" />

chrome/browser/resources/print_preview/print_preview_utils.html

+<link rel="import" href="chrome://resources/html/cr.html">
+
+<script src="print_preview_utils.js"></script>