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() {
+  var individualPages = $('individual-pages');

[James Hawkins, 2011/05/23 21:24:06]

Move this var to where it's first used.

[dpapad, 2011/05/23 23:04:07]

Done.

+  $('print-button').onclick = printFile;
+
+  // Controls that require preview rendering.
+  $('all-pages').onclick = onPageSelectionMayHaveChanged;
+  $('print-pages').onclick = handleIndividualPagesCheckbox;
+  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 = copiesFieldChanged;
+  $('two-sided').onclick = handleTwoSidedClick;
+  $('color').onclick = function() { setColor(true); };
+  $('bw').onclick = function() { setColor(false); };
+  $('increment').onclick = function() { onCopiesButtonsClicked(1); };
+  $('decrement').onclick = function() { onCopiesButtonsClicked(-1); };
+}
+
+/**
+ * Removes event listeners from the settings controls.
+ */
+function removeEventListeners() {
+  var individualPages = $('individual-pages');

[James Hawkins, 2011/05/23 21:24:06]

Same here.

[dpapad, 2011/05/23 23:04:07]

Done.

+
+  // Controls that require preview rendering.
+  $('print-button').disabled = true;
+  $('all-pages').onclick = null;
+  $('print-pages').onclick = null;
+  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 = null;
+  $('two-sided').onclick = null;
+  $('color').onclick = null;
+  $('bw').onclick = null;
+  $('increment').onclick = null;
+  $('decrement').onclick = null;
+}
+
+/**
  * 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 154 matching lines @@
  * Asks the browser to print the preview PDF based on current print settings.
  */
 function printFile() {
   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 48 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) {
+    requestPrintPreview();
+    return;
+  } else if (getSelectedPagesValidityLevel() == 1) {
+    var currentlySelectedPages = getSelectedPagesSet();
+    if (!areArraysEqual(previouslySelectedPages, currentlySelectedPages)) {
+      previouslySelectedPages = currentlySelectedPages;
+      requestPrintPreview();
+      return;
+    }
+  }
+
+  if (getSelectedPagesValidityLevel() != 1)
+    pageRangesFieldChanged();

[dpapad, 2011/05/23 21:17:06]

I think it is more readable now.

 
   // Update the current tab title.
   document.title = localStrings.getStringF('printPreviewTitleFormat', jobTitle);
 
   createPDFPlugin();
-  isPreviewStillLoading = false;
   updatePrintSummary();
+  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 189 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'));
@@ skipping 207 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() {
+  var printerList = $('printer-list')
+  var selectedPrinter = printerList.selectedIndex;
+  if (selectedPrinter >= 0)
+    this.deviceName = printerList.options[selectedPrinter].value;
+  else
+    this.deviceName = '';
+  this.isLandscape = isLandscape();
+}