Print Preview: Display a throbber when the user requests the system print

chrome/browser/resources/print_preview/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;
 
 // 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 = [];
 
-// Timer id of the page range textfield. It is used to reset the timer whenever
+// Timer id of the page range text field. It is used to reset the timer whenever
 // needed.
 var timerId;
 
 // Store the last selected printer index.
 var lastSelectedPrinterIndex = 0;
 
 // Used to disable some printing options when the preview is not modifiable.
 var previewModifiable = false;
 
 // Destination list special value constants.
@@ skipping 14 matching lines @@
 
 // True when preview tab has some error.
 var hasError = false;
 
 // True when preview tab is hidden.
 var isTabHidden = false;
 
 // True when draft preview data is requested for preview.
 var draftDocument = true;
 
+// True if the user has click 'Advanced...' in order to open the system print
+// dialog.
+var showingSystemDialog = false;
+
 /**
  * Window onload handler, sets up the page and starts print preview by getting
  * the printer list.
  */
 function onLoad() {
   cr.enablePlatformSpecificCSSRules();
 
   $('cancel-button').addEventListener('click', handleCancelButtonClick);
 
   if (!checkCompatiblePluginExists()) {
+    disableInputElementsInSidebar();
     displayErrorMessageWithButton(localStrings.getString('noPlugin'),
                                   localStrings.getString('launchNativeDialog'),
-                                  showSystemDialog);
+                                  launchNativePrintDialog);
     $('mainview').parentElement.removeChild($('dummy-viewer'));
     return;
   }
 
-  $('system-dialog-link').addEventListener('click', showSystemDialog);
+  $('print-button').focus();

[dpapad, 2011/06/28 02:25:30]

Why remove the autofocus attribute from the html and add this here?

[James Hawkins, 2011/06/28 04:02:34]

autofocus is somewhat crappy and focuses disabled fields; we'd have to call
blur() when disabling input fields otherwise, which is even more hacky. Also,
all other WebUI explicitly sets focus using JS focus() (except for a loner in
bookmark manager).

+  $('system-dialog-link').addEventListener('click', onSystemDialogLinkClicked);
   $('mainview').parentElement.removeChild($('dummy-viewer'));
 
   $('printer-list').disabled = true;
   $('print-button').onclick = printFile;
 
   setDefaultHandlersForPagesAndCopiesControls();
   showLoadingAnimation();
   chrome.send('getDefaultPrinter');
 }
 
@@ skipping 83 matching lines @@
  */
 function removeEventListeners() {
   clearTimeout(timerId);
   setDefaultHandlersForPagesAndCopiesControls();
 
   // Controls that require preview rendering
   $('landscape').onclick = null;
   $('portrait').onclick = null;
   $('printer-list').onchange = null;
 
-  // Controls that dont require preview rendering.
+  // Controls that don't require preview rendering.
   $('two-sided').onclick = null;
   $('color').onclick = null;
   $('bw').onclick = null;
 }
 
 /**
+ * Disables the input elements in the sidebar.
+ */
+function disableInputElementsInSidebar() {
+  var els = $('sidebar').querySelectorAll('input, button, select');
+  for (var i = 0; i < els.length; i++)
+    els[i].disabled = true;
+}
+
+/**
  * Asks the browser to close the preview tab.
  */
 function handleCancelButtonClick() {
   chrome.send('closePrintPreviewTab');
 }
 
 /**
- * Asks the browser to show the native print dialog for printing.
+ * Disables the controls in the sidebar, shows the throbber and instructs the
+ * backend to open the native print dialog.
  */
-function showSystemDialog() {
+function onSystemDialogLinkClicked() {
+  showingSystemDialog = true;
+  disableInputElementsInSidebar();
+  $('system-dialog-throbber').classList.remove('hidden');
   chrome.send('showSystemDialog');
 }
 
+/**
+ * Similar to onSystemDialogLinkClicked(), but specific to the
+ * 'Launch native print dialog' UI.
+ */
+function launchNativePrintDialog() {
+  showingSystemDialog = true;
+  $('error-button').disabled = true;
+  $('native-print-dialog-throbber').classList.remove('hidden');
+  chrome.send('showSystemDialog');
+}
+
 /**
  * Disables the controls which need the initiator tab to generate preview
  * data. This function is called when the initiator tab is closed.
  * @param {string} initiatorTabURL The URL of the initiator tab.
  */
 function onInitiatorTabClosed(initiatorTabURL) {
   displayErrorMessageWithButton(
       localStrings.getString('initiatorTabClosed'),
       localStrings.getString('reopenPage'),
       function() { window.location = initiatorTabURL; });
@@ skipping 451 matching lines @@
 
   if (hasPendingPrintFileRequest)
     printFile();
 }
 
 /**
  * Create the PDF plugin or reload the existing one.
  * @param {string} previewUid Preview unique identifier.
  */
 function createPDFPlugin(previewUid) {
-  // Enable the print button.
-  if (!$('printer-list').disabled)
-    $('print-button').disabled = false;
-
   var pdfViewer = $('pdf-viewer');
   if (pdfViewer) {
     // Need to call this before the reload(), where the plugin resets its
     // internal page count.
     pdfViewer.goToPage('0');
 
     pdfViewer.reload();
     pdfViewer.grayscale(!isColor());
     return;
   }
@@ skipping 20 matching lines @@
           dummyPlugin.removePrintButton);
 }
 
 /**
  * Updates the state of print button depending on the user selection.
  * The button is enabled only when the following conditions are true.
  * 1) The selected page ranges are valid.
  * 2) The number of copies is valid (if applicable).
  */
 function updatePrintButtonState() {
+  if (showingSystemDialog)
+    return;
+
   if (getSelectedPrinterName() == PRINT_TO_PDF) {
     $('print-button').disabled = !isSelectedPagesValid();
   } else {
     $('print-button').disabled = (!isNumberOfCopiesValid() ||
                                   !isSelectedPagesValid());
   }
 }
 
 window.addEventListener('DOMContentLoaded', onLoad);
 
@@ skipping 254 matching lines @@
   this.isLandscape = '';
 }
 
 /**
  * Takes a snapshot of the print settings.
  */
 PrintSettings.prototype.save = function() {
   this.deviceName = getSelectedPrinterName();
   this.isLandscape = isLandscape();
 }