Print Preview Componentization: Add timeout to selects

Add a timeout to the select sections, so that the preview does not
immediately begin generating and freeze the dropdown when the value
is changed.

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

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

@@ -36,6 +36,7 @@ js_type_check("closure_compile") {
     ":print_preview_search_box",
     ":provisional_destination_resolver",
     ":scaling_settings",
+    ":select_behavior",
     ":settings_behavior",
     ":settings_select",
     ":state",
@@ -119,12 +120,14 @@ js_library("copies_settings") {
 
 js_library("layout_settings") {
   deps = [
+    ":select_behavior",
     ":settings_behavior",
   ]
 }
 
 js_library("color_settings") {
   deps = [
+    ":select_behavior",
     ":settings_behavior",
   ]
 }
@@ -138,6 +141,7 @@ js_library("media_size_settings") {
 
 js_library("margins_settings") {
   deps = [
+    ":select_behavior",
     ":settings_behavior",
   ]
 }
@@ -153,6 +157,7 @@ js_library("dpi_settings") {
 
 js_library("pages_per_sheet_settings") {
   deps = [
+    ":select_behavior",
     ":settings_behavior",
   ]
 }
@@ -194,6 +199,7 @@ js_library("number_settings_section") {
 
 js_library("settings_select") {
   deps = [
+    ":select_behavior",
     ":settings_behavior",
     "..:print_preview_utils",
     "//ui/webui/resources/js:cr",
@@ -213,6 +219,10 @@ js_library("input_behavior") {
   ]
 }
 
+js_library("select_behavior") {
+  deps = []
+}
+
 js_library("link_container") {
   deps = [
     "../data:destination",

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

@@ -2,6 +2,7 @@
 
 <link rel="import" href="print_preview_shared_css.html">
 <link rel="import" href="select_css.html">
+<link rel="import" href="select_behavior.html">
 <link rel="import" href="settings_section.html">
 
 <dom-module id="print-preview-color-settings">
@@ -11,8 +12,7 @@
     <print-preview-settings-section>
       <span id="color-label" slot="title">$i18n{optionColor}</span>
       <div slot="controls">
-        <select aria-labelledby="color-label" on-change="onChange_"
-          disabled$="[[disabled]]">
+        <select aria-labelledby="color-label" disabled$="[[disabled]]">
           <option value="bw" selected>$i18n{optionBw}</option>
           <option value="color">$i18n{optionColor}</option>
         </select>

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

@@ -5,7 +5,7 @@
 Polymer({
   is: 'print-preview-color-settings',
 
-  behaviors: [SettingsBehavior],
+  behaviors: [SettingsBehavior, print_preview_new.SelectBehavior],
 
   properties: {
     disabled: Boolean,
@@ -21,8 +21,8 @@ Polymer({
     this.$$('select').value = /** @type {boolean} */ (value) ? 'color' : 'bw';
   },
 
-  /** @private */
-  onChange_: function() {
-    this.setSetting('color', this.$$('select').value == 'color');
+  /** @param {string} value The new select value. */
+  onProcessSelectChange: function(value) {
+    this.setSetting('color', value == 'color');
   },
 });

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

@@ -2,6 +2,7 @@
 
 <link rel="import" href="print_preview_shared_css.html">
 <link rel="import" href="select_css.html">
+<link rel="import" href="select_behavior.html">
 <link rel="import" href="settings_behavior.html">
 <link rel="import" href="settings_section.html">
 
@@ -11,8 +12,7 @@
     <print-preview-settings-section>
       <span id="layout-label" slot="title">$i18n{layoutLabel}</span>
       <div slot="controls">
-        <select aria-labelledby="layout-label" on-change="onChange_"
-          disabled$="[[disabled]]">
+        <select aria-labelledby="layout-label" disabled$="[[disabled]]">
           <option value="portrait" selected>$i18n{optionPortrait}</option>
           <option value="landscape">$i18n{optionLandscape}</option>
         </select>

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

@@ -5,7 +5,7 @@
 Polymer({
   is: 'print-preview-layout-settings',
 
-  behaviors: [SettingsBehavior],
+  behaviors: [SettingsBehavior, print_preview_new.SelectBehavior],
 
   properties: {
     disabled: Boolean,
@@ -22,8 +22,8 @@ Polymer({
         /** @type {boolean} */ (value) ? 'landscape' : 'portrait';
   },
 
-  /** @private */
-  onChange_: function() {
-    this.setSetting('layout', this.$$('select').value == 'landscape');
+  /** @param {string} value The new select value. */
+  onProcessSelectChange: function(value) {
+    this.setSetting('layout', value == 'landscape');
   },
 });

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

@@ -2,6 +2,7 @@
 
 <link rel="import" href="print_preview_shared_css.html">
 <link rel="import" href="select_css.html">
+<link rel="import" href="select_behavior.html">
 <link rel="import" href="settings_behavior.html">
 <link rel="import" href="settings_section.html">
 
@@ -12,8 +13,7 @@
     <print-preview-settings-section>
       <span id="margins-label" slot="title">$i18n{marginsLabel}</span>
       <div slot="controls">
-        <select aria-labelledby="margins-label" on-change="onChange_"
-          disabled$="[[disabled]]">
+        <select aria-labelledby="margins-label" disabled$="[[disabled]]">
           <!-- The order of these options must match the natural order of their
           values, which come from
           print_preview.ticket_items.MarginsTypeValue. -->

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

@@ -5,7 +5,7 @@
 Polymer({
   is: 'print-preview-margins-settings',
 
-  behaviors: [SettingsBehavior],
+  behaviors: [SettingsBehavior, print_preview_new.SelectBehavior],
 
   properties: {
     disabled: Boolean,
@@ -21,8 +21,8 @@ Polymer({
     this.$$('select').value = /** @type {string} */ (value).toString();
   },
 
-  /** @private */
-  onChange_: function() {
-    this.setSetting('margins', parseInt(this.$$('select').value, 10));
+  /** @param {string} value The new select value. */
+  onProcessSelectChange: function(value) {
+    this.setSetting('margins', parseInt(value, 10));
   },
 });

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

@@ -2,6 +2,7 @@
 
 <link rel="import" href="print_preview_shared_css.html">
 <link rel="import" href="select_css.html">
+<link rel="import" href="select_behavior.html">
 <link rel="import" href="settings_behavior.html">
 <link rel="import" href="settings_section.html">
 
@@ -13,8 +14,8 @@
       <span id="pages-per-sheet-label" slot="title">$i18n{pagesPerSheetLabel}
       </span>
       <div slot="controls">
-        <select aria-labelledby="pages-per-sheet-label" on-change="onChange_"
-          disabled$="[[disabled]]">
+        <select aria-labelledby="pages-per-sheet-label"
+            disabled$="[[disabled]]">
           <option value="1" selected>1</option>
           <option value="2">2</option>
           <option value="4">4</option>

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

@@ -5,7 +5,7 @@
 Polymer({
   is: 'print-preview-pages-per-sheet-settings',
 
-  behaviors: [SettingsBehavior],
+  behaviors: [SettingsBehavior, print_preview_new.SelectBehavior],
 
   properties: {
     disabled: Boolean,
@@ -21,8 +21,8 @@ Polymer({
     this.$$('select').value = /** @type {number} */ (value).toString();
   },
 
-  /** @private */
-  onChange_: function() {
-    this.setSetting('pagesPerSheet', parseInt(this.$$('select').value, 10));
+  /** @param {string} value The new select value. */
+  onProcessSelectChange: function(value) {
+    this.setSetting('pagesPerSheet', parseInt(value, 10));
   },
 });

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

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

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

+// Copyright 2018 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_new', function() {
+  /**
+   * Helper functions for a select with timeout. Implemented by select settings
+   * sections, so that the preview does not immediately begin generating and
+   * freeze the dropdown when the value is changed.
+   * Assumes that the elements implementing this behavior have no more than one
+   * select element.
+   * @polymerBehavior
+   */
+  const SelectBehavior = {
+    /** @private {string} */
+    lastValue_: '',
+
+    /**
+     * Timeout used to delay processing of the selection.
+     * @private {?number}
+     */
+    timeout_: null,
+
+    /** @override */
+    ready: function() {
+      assert(this.shadowRoot.querySelectorAll('select').length == 1);
+      this.$$('select').addEventListener('change', () => {
+        if (this.timeout_) {
+          clearTimeout(this.timeout_);
+        }
+        this.timeout_ = setTimeout(this.onTimeout_.bind(this), 100);
+      });
+    },
+
+    /**
+     * Should be overridden by elements using this behavior to receive select
+     * value updates.
+     * @param {string} value The new select value to process.
+     */
+    onProcessSelectChange: function(value) {},
+
+    /**
+     * Called after a timeout after user selects a new option.
+     * @private
+     */
+    onTimeout_: function() {
+      this.timeout_ = null;
+      const value = /** @type {!HTMLSelectElement} */ (this.$$('select')).value;
+      if (this.lastValue_ != value) {
+        this.lastValue_ = value;
+        this.onProcessSelectChange(value);
+
+        // For testing only
+        this.fire('process-select-change');
+      }
+    },
+  };
+
+  return {SelectBehavior: SelectBehavior};
+});

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

@@ -2,6 +2,7 @@
 
 <link rel="import" href="../print_preview_utils.html">
 <link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="select_behavior.html">
 <link rel="import" href="select_css.html">
 <link rel="import" href="settings_behavior.html">
 
@@ -9,7 +10,7 @@
   <template>
     <style include="print-preview-shared select">
     </style>
-    <select on-change="onChange_" disabled$="[[disabled]]">
+    <select disabled$="[[disabled]]">
       <template is="dom-repeat" items="[[capability.option]]">
         <option selected="[[isSelected_(item, selectedValue_)]]"
             value="[[getValue_(item)]]">

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

@@ -17,7 +17,7 @@ print_preview_new.SelectOption;
 Polymer({
   is: 'print-preview-settings-select',
 
-  behaviors: [SettingsBehavior],
+  behaviors: [SettingsBehavior, print_preview_new.SelectBehavior],
 
   properties: {
     /** @type {{ option: Array<!print_preview_new.SelectOption> }} */
@@ -75,15 +75,15 @@ Polymer({
     return displayName || option.name || '';
   },
 
-  /** @private */
-  onChange_: function() {
-    let value = null;
+  /** @param {string} value The new select value. */
+  onProcessSelectChange: function(value) {
+    let newValue = null;
     try {
-      value = JSON.parse(this.$$('select').value);
+      newValue = JSON.parse(value);
     } catch (e) {
       assertNotReached();
       return;
     }
-    this.setSetting(this.settingName, /** @type {Object} */ (value));
+    this.setSetting(this.settingName, /** @type {Object} */ (newValue));
   },
 });

chrome/browser/resources/print_preview/print_preview_resources.grd

@@ -175,6 +175,12 @@
       <structure name="IDR_PRINT_PREVIEW_NEW_INPUT_BEHAVIOR_JS"
                  file="new/input_behavior.js"
                  type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_NEW_SELECT_BEHAVIOR_HTML"
+                 file="new/select_behavior.html"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_NEW_SELECT_BEHAVIOR_JS"
+                 file="new/select_behavior.js"
+                 type="chrome_html" />
       <structure name="IDR_PRINT_PREVIEW_NEW_STATE_HTML"
                  file="new/state.html"
                  type="chrome_html" />

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

@@ -637,7 +637,10 @@ cr.define('settings_sections_tests', function() {
       // Change to landscape
       layoutInput.value = 'landscape';
       layoutInput.dispatchEvent(new CustomEvent('change'));
-      assertTrue(page.settings.layout.value);
+      return test_util.eventToPromise('process-select-change', layoutElement)
+          .then(function() {
+            assertTrue(page.settings.layout.value);
+          });
     });
 
     test(assert(TestNames.SetColor), function() {
@@ -652,7 +655,10 @@ cr.define('settings_sections_tests', function() {
       // Change to black and white.
       colorInput.value = 'bw';
       colorInput.dispatchEvent(new CustomEvent('change'));
-      assertFalse(page.settings.color.value);
+      return test_util.eventToPromise('process-select-change', colorElement)
+          .then(function() {
+            assertFalse(page.settings.color.value);
+          });
     });
 
     test(assert(TestNames.SetMediaSize), function() {
@@ -675,7 +681,11 @@ cr.define('settings_sections_tests', function() {
       mediaSizeInput.value = squareOption;
       mediaSizeInput.dispatchEvent(new CustomEvent('change'));
 
-      expectEquals(squareOption, JSON.stringify(page.settings.mediaSize.value));
+      return test_util.eventToPromise('process-select-change', mediaSizeElement)
+          .then(function() {
+            expectEquals(
+                squareOption, JSON.stringify(page.settings.mediaSize.value));
+          });
     });
 
     test(assert(TestNames.SetDpi), function() {
@@ -703,8 +713,12 @@ cr.define('settings_sections_tests', function() {
           JSON.stringify(dpiElement.capabilityWithLabels_.option[1]);
       dpiInput.dispatchEvent(new CustomEvent('change'));
 
-      expectTrue(isDpiEqual(lowQualityOption, JSON.parse(dpiInput.value)));
-      expectTrue(isDpiEqual(lowQualityOption, page.settings.dpi.value));
+      return test_util.eventToPromise('process-select-change', dpiElement)
+          .then(function() {
+            expectTrue(isDpiEqual(
+                lowQualityOption, JSON.parse(dpiInput.value)));
+            expectTrue(isDpiEqual(lowQualityOption, page.settings.dpi.value));
+          });
     });
 
     test(assert(TestNames.SetMargins), function() {
@@ -725,9 +739,12 @@ cr.define('settings_sections_tests', function() {
       marginsInput.value =
           print_preview.ticket_items.MarginsTypeValue.MINIMUM.toString();
       marginsInput.dispatchEvent(new CustomEvent('change'));
-      expectEquals(
-          print_preview.ticket_items.MarginsTypeValue.MINIMUM,
-          page.settings.margins.value);
+      return test_util.eventToPromise('process-select-change', marginsElement)
+          .then(function() {
+            expectEquals(
+                print_preview.ticket_items.MarginsTypeValue.MINIMUM,
+                page.settings.margins.value);
+          });
     });
 
     test(assert(TestNames.SetScaling), function() {