Print Preview: Making the UI not block when preview is generated

chrome/browser/resources/print_preview.js

 // Copyright (c) 2011 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.
 
 var localStrings = new LocalStrings();
 
 // The total page count of the previewed document regardless of which pages the
 // user has selected.
 var totalPageCount = -1;
 
 // The previously selected pages by the user. It is used in
 // onPageSelectionMayHaveChanged() to make sure that a new preview is not
 // requested more often than necessary.
 var previouslySelectedPages = [];
 
-// The previously selected layout mode. It is used in order to prevent the
-// preview from updating when the user clicks on the already selected layout
-// mode.
-var previouslySelectedLayout = null;
-
 // Timer id of the page range textfield. It is used to reset the timer whenever
 // needed.
 var timerId;
 
 // Store the last selected printer index.
 var lastSelectedPrinterIndex = 0;
 
-// Indicates whether a preview has been requested but not received yet.
-var isPreviewStillLoading = true;
-
-// Currently selected printer capabilities.
-var printerCapabilities;
-
 // Used to disable some printing options when the preview is not modifiable.
 var previewModifiable = false;
 
 // Destination list special value constants.
 const PRINT_TO_PDF = 'Print To PDF';
 const MANAGE_PRINTERS = 'Manage Printers';
 
+// State of the print preview settings.
+var printSettings = new PrintSettings();
+
 /**
  * Window onload handler, sets up the page and starts print preview by getting
  * the printer list.
  */
 function onLoad() {
   $('system-dialog-link').addEventListener('click', showSystemDialog);
   $('cancel-button').addEventListener('click', handleCancelButtonClick);
 
   if (!checkCompatiblePluginExists()) {
     displayErrorMessage(localStrings.getString('noPlugin'), false);
     $('mainview').parentElement.removeChild($('dummy-viewer'));
     return;
   }
   $('mainview').parentElement.removeChild($('dummy-viewer'));
 
   $('printer-list').disabled = true;
   $('print-button').disabled = true;
-  $('print-button').addEventListener('click', printFile);
-  $('all-pages').addEventListener('click', onPageSelectionMayHaveChanged);
-  $('copies').addEventListener('input', copiesFieldChanged);
-  $('print-pages').addEventListener('click', handleIndividualPagesCheckbox);
-  $('individual-pages').addEventListener('blur', function() {
-      clearTimeout(timerId);
-      onPageSelectionMayHaveChanged();
-  });
-  $('individual-pages').addEventListener('focus', addTimerToPageRangeField);
-  $('individual-pages').addEventListener('input', resetPageRangeFieldTimer);
-  $('two-sided').addEventListener('click', handleTwoSidedClick)
-  $('landscape').addEventListener('click', onLayoutModeToggle);
-  $('portrait').addEventListener('click', onLayoutModeToggle);
-  $('color').addEventListener('click', function() { setColor(true); });
-  $('bw').addEventListener('click', function() { setColor(false); });
-  $('printer-list').addEventListener(
-      'change', updateControlsWithSelectedPrinterCapabilities);
-  $('increment').addEventListener('click',
-                                  function() { onCopiesButtonsClicked(1); });
-  $('decrement').addEventListener('click',
-                                  function() { onCopiesButtonsClicked(-1); });
   $('controls').onsubmit = function() { return false; };
   $('dancing-dots').classList.remove('invisible');
   chrome.send('getPrinters');
 }
 
 /**
+ * Adds event listeners to the settings controls.
+ */
+function addEventListeners() {
+  $('print-button').onclick = printFile;
+
+  // Controls that require preview rendering.
+  $('all-pages').onclick = onPageSelectionMayHaveChanged;
+  $('print-pages').onclick = handleIndividualPagesCheckbox;
+  var individualPages = $('individual-pages');
+  individualPages.onblur = function() {
+      clearTimeout(timerId);
+      onPageSelectionMayHaveChanged();
+  };
+  individualPages.onfocus = addTimerToPageRangeField;
+  individualPages.oninput = resetPageRangeFieldTimer;
+  $('landscape').onclick = onLayoutModeToggle;
+  $('portrait').onclick = onLayoutModeToggle;
+  $('printer-list').onchange = updateControlsWithSelectedPrinterCapabilities;
+
+  // Controls that dont require preview rendering.
+  $('copies').oninput = function() {
+    copiesFieldChanged();
+    updatePrintButtonState();
+    updatePrintSummary();
+  };
+  $('two-sided').onclick = handleTwoSidedClick;
+  $('color').onclick = function() { setColor(true); };
+  $('bw').onclick = function() { setColor(false); };
+  $('increment').onclick = function() {
+    onCopiesButtonsClicked(1);
+    updatePrintButtonState();
+    updatePrintSummary();
+  };
+  $('decrement').onclick = function() {
+    onCopiesButtonsClicked(-1);
+    updatePrintButtonState();
+    updatePrintSummary();
+  };
+}
+
+/**
+ * Removes event listeners from the settings controls.
+ */
+function removeEventListeners() {
+  // Controls that require preview rendering.
+  $('print-button').disabled = true;
+  $('all-pages').onclick = null;
+  $('print-pages').onclick = null;
+  var individualPages = $('individual-pages');
+  individualPages.onblur = null;
+  individualPages.onfocus = null;
+  individualPages.oninput = null;
+  clearTimeout(timerId);
+  $('landscape').onclick = null;
+  $('portrait').onclick = null;
+  $('printer-list').onchange = null;
+
+  // Controls that dont require preview rendering.
+  $('copies').oninput = copiesFieldChanged;
+  $('two-sided').onclick = null;
+  $('color').onclick = null;
+  $('bw').onclick = null;
+  $('increment').onclick = function() { onCopiesButtonsClicked(1); };
+  $('decrement').onclick = function() { onCopiesButtonsClicked(-1); };
+}
+
+/**
  * Asks the browser to close the preview tab.
  */
 function handleCancelButtonClick() {
   chrome.send('closePrintPreviewTab');
 }
 
 /**
  * Asks the browser to show the native print dialog for printing.
  */
 function showSystemDialog() {
@@ skipping 39 matching lines @@
 
   // Regenerate the preview data based on selected printer settings.
   setDefaultValuesAndRegeneratePreview();
 }
 
 /**
  * Updates the controls with printer capabilities information.
  * @param {Object} settingInfo printer setting information.
  */
 function updateWithPrinterCapabilities(settingInfo) {
-  printerCapabilities = settingInfo;
-
-  if (isPreviewStillLoading)
-    return;
-
   var disableColorOption = settingInfo.disableColorOption;
   var setColorAsDefault = settingInfo.setColorAsDefault;
   var colorOption = $('color');
   var bwOption = $('bw');
 
   if (disableColorOption)
     $('color-options').classList.add("hidden");
   else
     $('color-options').classList.remove("hidden");
 
@@ skipping 80 matching lines @@
 function isColor() {
   return $('color').checked;
 }
 
 /**
  * Checks whether the preview collate setting value is set or not.
  *
  * @return {boolean} true if collate setting is enabled and checked.
  */
 function isCollated() {
-  var collateField = $('collate');
-  return !collateField.disabled && collateField.checked;
+  return !$('collate-option').classList.contains('hidden') &&
+      $('collate').checked;
 }
 
 /**
  * Returns the number of copies currently indicated in the copies textfield. If
  * the contents of the textfield can not be converted to a number or if <1 it
  * returns 1.
  *
  * @return {number} number of copies.
  */
 function getCopies() {
@@ skipping 57 matching lines @@
   return deviceName;
 }
 
 /**
  * Asks the browser to print the preview PDF based on current print settings.
  */
 function printFile() {
   $('print-button').classList.add('loading');
   $('cancel-button').classList.add('loading');
   $('print-summary').innerHTML = localStrings.getString('printing');
+  removeEventListeners();
 
   if (getSelectedPrinterName() != PRINT_TO_PDF) {
     window.setTimeout(function() { chrome.send('print', [getSettingsJSON()]); },
                       1000);
   } else
     chrome.send('print', [getSettingsJSON()]);
 }
 
 /**
  * Asks the browser to generate a preview PDF based on current print settings.
  */
 function requestPrintPreview() {
-  isPreviewStillLoading = true;
-  setControlsDisabled(true);
+  removeEventListeners();
+  printSettings.save();
   $('dancing-dots').classList.remove('invisible');
   chrome.send('getPreview', [getSettingsJSON()]);
 }
 
 /**
  * Fill the printer list drop down.
  * Called from PrintPreviewHandler::SendPrinterList().
  * @param {Array} printers Array of printer info objects.
  * @param {number} defaultPrinterIndex The index of the default printer.
  */
@@ skipping 50 matching lines @@
   pdfViewer.grayscale(!color);
 }
 
 /**
  * Display an error message in the center of the preview area.
  * @param {string} errorMessage The error message to be displayed.
  * @param {boolean} showButton Indivates whether the "Reopen the page" button
  * should be displayed.
  */
 function displayErrorMessage(errorMessage, showButton) {
-  isPreviewStillLoading = false;
   $('dancing-dots').classList.remove('invisible');
   $('dancing-dots-text').classList.add('hidden');
   $('error-text').innerHTML = errorMessage;
   $('error-text').classList.remove('hidden');
   if (showButton)
     $('reopen-page').classList.remove('hidden');
   else
     $('reopen-page').classList.add('hidden');
 
   setControlsDisabled(true);
@@ skipping 14 matching lines @@
 /**
  * Called when the PDF plugin loads its document.
  */
 function onPDFLoad() {
   if (isLandscape())
     $('pdf-viewer').fitToWidth();
   else
     $('pdf-viewer').fitToHeight();
 
   $('dancing-dots').classList.add('invisible');
-  setControlsDisabled(false);
 
   if (!previewModifiable) {
     $('landscape').disabled = true;
     $('portrait').disabled = true;
   }
 
   updateCopiesButtonsState();
-  updateWithPrinterCapabilities(printerCapabilities);
 }
 
 /**
  * Update the print preview when new preview data is available.
  * Create the PDF plugin as needed.
  * Called from PrintPreviewUI::PreviewDataIsAvailable().
  * @param {number} pageCount The expected total pages count.
  * @param {string} jobTitle The print job title.
  * @param {boolean} modifiable If the preview is modifiable.
  *
  */
 function updatePrintPreview(pageCount, jobTitle, modifiable) {
+  var tempPrintSettings = new PrintSettings();
+  tempPrintSettings.save();
+
   previewModifiable = modifiable;
 
   if (totalPageCount == -1)
     totalPageCount = pageCount;
 
   if (previouslySelectedPages.length == 0)
     for (var i = 0; i < totalPageCount; i++)
       previouslySelectedPages.push(i+1);
 
-  if (previouslySelectedLayout == null)
-    previouslySelectedLayout = $('portrait');
+  if (printSettings.deviceName != tempPrintSettings.deviceName) {
+    updateControlsWithSelectedPrinterCapabilities();
+    return;
+  } else if (printSettings.isLandscape != tempPrintSettings.isLandscape) {
+    setDefaultValuesAndRegeneratePreview();
+    return;
+  } else if (getSelectedPagesValidityLevel() == 1) {
+    var currentlySelectedPages = getSelectedPagesSet();
+    if (!areArraysEqual(previouslySelectedPages, currentlySelectedPages)) {
+      previouslySelectedPages = currentlySelectedPages;
+      requestPrintPreview();
+      return;
+    }
+  }
+
+  if (getSelectedPagesValidityLevel() != 1)
+    pageRangesFieldChanged();
 
   // Update the current tab title.
   document.title = localStrings.getStringF('printPreviewTitleFormat', jobTitle);
 
   createPDFPlugin();
-  isPreviewStillLoading = false;
   updatePrintSummary();
+  updatePrintButtonState();
+  addEventListeners();
 }
 
 /**
  * Create the PDF plugin or reload the existing one.
  */
 function createPDFPlugin() {
   // Enable the print button.
   if (!$('printer-list').disabled) {
     $('print-button').disabled = false;
   }
@@ skipping 49 matching lines @@
 }
 
 window.addEventListener('DOMContentLoaded', onLoad);
 
 /**
  * Listener function that executes whenever a change occurs in the 'copies'
  * field.
  */
 function copiesFieldChanged() {
   updateCopiesButtonsState();
-  updatePrintButtonState();
-  $('collate-option').hidden = getCopies() <= 1;
-  updatePrintSummary();
+  // TODO: change the following if else to
+  // $('collate-option').hidden = getCopies() <= 1;
+  // once the span[hidden] {display: none;} rule is applied correctly and also
+  // update isCollated() function. Currently it is not reducing the size of the
+  // span to 0x0.

[dpapad, 2011/05/24 18:04:57]

I left it as a span. Changing it into a div makes it appear on the next line
(and requires a display: inline-block; rule to fix it).

+  if (getCopies() <= 1)
+    $('collate-option').classList.add('hidden');
+  else
+    $('collate-option').classList.remove('hidden');
 }
 
 /**
  * Executes whenever a blur event occurs on the 'individual-pages'
  * field or when the timer expires. It takes care of
  * 1) showing/hiding warnings/suggestions
  * 2) updating print button/summary
  */
 function pageRangesFieldChanged() {
   var currentlySelectedPages = getSelectedPagesSet();
@@ skipping 117 matching lines @@
   $('individual-pages').focus();
 }
 
 /**
  * When the user switches printing orientation mode the page field selection is
  * reset to "all pages selected". After the change the number of pages will be
  * different and currently selected page numbers might no longer be valid.
  * Even if they are still valid the content of these pages will be different.
  */
 function onLayoutModeToggle() {
-  var currentlySelectedLayout = $('portrait').checked ? $('portrait') :
-      $('landscape');
-
   // If the chosen layout is same as before, nothing needs to be done.
-  if (previouslySelectedLayout == currentlySelectedLayout)
+  if (printSettings.isLandscape == isLandscape())
     return;
 
-  previouslySelectedLayout = currentlySelectedLayout;
   $('individual-pages').classList.remove('invalid');
   setDefaultValuesAndRegeneratePreview();
 }
 
 /**
  * Sets the default values and sends a request to regenerate preview data.
  */
 function setDefaultValuesAndRegeneratePreview() {
-  $('individual-pages').value = '';
   hideInvalidHint($('individual-pages-hint'));
-  $('all-pages').checked = true;
   totalPageCount = -1;
   previouslySelectedPages.length = 0;
   requestPrintPreview();
 }
 
 /**
  * Returns a list of all pages in the specified ranges. The pages are listed in
  * the order they appear in the 'individual-pages' textbox and duplicates are
  * not eliminated. If the page ranges can't be parsed an empty list is
  * returned.
@@ skipping 196 matching lines @@
     copiesField.value = 1;
   else {
     var newValue = getCopies() + sign * 1;
     if (newValue < copiesField.min || newValue > copiesField.max)
       return;
     copiesField.value = newValue;
   }
   copiesFieldChanged();
 }
 
+/**
+ * Class that represents the state of the print settings.
+ */
+function PrintSettings() {
+  this.deviceName = '';
+  this.isLandscape = '';
+}
+
+/**
+ * Takes a snapshot of the print settings.
+ */
+PrintSettings.prototype.save = function() {
+  this.deviceName = getSelectedPrinterName();
+  this.isLandscape = isLandscape();
+}