Print Preview: Pass direction keys to the PDF viewer when possible.

chrome/browser/resources/print_preview/print_preview.js

 // Copyright (c) 2012 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.
 
 // require: cr/ui/print_preview_cloud.js
 
 var localStrings = new LocalStrings();
 
 // If useCloudPrint is true we attempt to connect to cloud print
 // and populate the list of printers with cloud print printers.
@@ skipping 85 matching lines @@
 // The range of options in the printer dropdown controlled by cloud print.
 var firstCloudPrintOptionPos = 0;
 var lastCloudPrintOptionPos = firstCloudPrintOptionPos;
 
 // Store the current previewUid.
 var currentPreviewUid = '';
 
 // True if we need to generate draft preview data.
 var generateDraftData = true;
 
+// The last element clicked with the mouse.
+var lastClickedElement = null;
+
 // A dictionary of cloud printers that have been added to the printer
 // dropdown.
 var addedCloudPrinters = {};
 
 // The maximum number of cloud printers to allow in the dropdown.
 const maxCloudPrinters = 10;
 
 const MIN_REQUEST_ID = 0;
 const MAX_REQUEST_ID = 32000;
 
@@ skipping 27 matching lines @@
  */
 function onLoad() {
   cr.enablePlatformSpecificCSSRules();
   initialPreviewRequestID = randomInteger(MIN_REQUEST_ID, MAX_REQUEST_ID);
   lastPreviewRequestID = initialPreviewRequestID;
 
   previewArea = print_preview.PreviewArea.getInstance();
   printHeader = print_preview.PrintHeader.getInstance();
   document.addEventListener(customEvents.PDF_GENERATION_ERROR,
                             cancelPendingPrintRequest);
+  document.addEventListener('click', setLastClickedElement);
 
   if (!checkCompatiblePluginExists()) {
     disableInputElementsInSidebar();
     $('cancel-button').focus();
     previewArea.displayErrorMessageWithButtonAndNotify(
         localStrings.getString('noPlugin'),
         localStrings.getString('launchNativeDialog'),
         launchNativePrintDialog);
     $('mainview').parentElement.removeChild($('dummy-viewer'));
     return;
@@ skipping 56 matching lines @@
 /**
  * Enables the input elements in the sidebar.
  */
 function enableInputElementsInSidebar() {
   var els = $('navbar-container').querySelectorAll('input, button, select');
   for (var i = 0; i < els.length; i++)
     els[i].disabled = false;
 }
 
 /**
+ * Keep track of the last element to receive a mouse click.
+  * @param {MouseEvent} e The mouse event.

[dpapad, 2012/03/10 01:14:00]

extra space in front.

nit optional: Since this is a one line function could probably be an anonymous
function at line 156.

[Dan Beam, 2012/03/10 01:14:26]

1 less space
nit: Generally we say Event instead of MouseEvent so if that changes the doc
isn't stale (IIRC).

[Lei Zhang, 2012/03/10 01:35:45]

Ok, but this is intended to be for mouse events only.

[Dan Beam, 2012/03/10 01:57:33]

That's fine, though pressing space or enter also trigger a click, btw (and this
is convincing your user otherwise by being called a MouseEvent, but that's a
different problem).

[Lei Zhang, 2012/03/10 02:20:44]

Ok, I changed this to just "click event".

+ */
+function setLastClickedElement(e) {
+  lastClickedElement = e.target;
+}
+
+/**
  * Disables the controls in the sidebar, shows the throbber and instructs the
  * backend to open the native print dialog.
  */
 function onSystemDialogLinkClicked() {
   if (showingSystemDialog)
     return;
   showingSystemDialog = true;
   disableInputElementsInSidebar();
   printHeader.disableCancelButton();
   $('system-dialog-throbber').hidden = false;
@@ skipping 858 matching lines @@
   if (initiatorTabTitle == '')
     return;
   document.title = localStrings.getStringF(
       'printPreviewTitleFormat', initiatorTabTitle);
 }
 
 /**
  * Closes this print preview tab.
  */
 function closePrintPreviewTab() {
+  window.onkeydown = null;

[Dan Beam, 2012/03/10 01:14:26]

why don't you change to using addEventListener()/detachEventListener() or just
remove this? (I don't see why you'd care if the tab is being destroyed...)

[Lei Zhang, 2012/03/10 01:35:45]

I don't want any other events to get triggered after this point.

[Dan Beam, 2012/03/10 01:57:33]

removeEventListener** is cleaner, IMO, as maybe some day people want to trigger
synthetic events or call this function ad-hoc, ;), and now you've just set that
function to null.

[Lei Zhang, 2012/03/10 02:20:44]

Done.

   chrome.send('closePrintPreviewTab');
   chrome.send('DialogClose');
 }
 
 /**
+  * Pass certain directional keyboard events to the PDF viewer.
+  * @param {KeyboardEvent} e The keyboard event.

[Dan Beam, 2012/03/10 01:14:26]

nit: I'd say same here, but apparently is mattered a bit in this case so up to
you...

[Lei Zhang, 2012/03/10 01:35:45]

Done.

+  * @return {boolean} true if the keyboard event has been handled.

[Dan Beam, 2012/03/10 01:14:26]

nit: s/true i/I/

[Lei Zhang, 2012/03/10 01:35:45]

Done.

+  */
+function tryToHandleDirectionKeyDown(e) {
+  // Make sure the PDF plugin is there.
+  if (!previewArea.pdfPlugin)
+    return false;
+
+  // We only care about: PageUp, PageDown, Left, Up, Right, Down.
+  if (!(e.keyCode == 33 || e.keyCode == 34 ||
+        (e.keyCode >= 37 && e.keyCode <= 40))) {

[dpapad, 2012/03/10 01:14:00]

Nit: Indentation should be 4 spaces?

[Lei Zhang, 2012/03/10 01:35:45]

Done.

[Dan Beam, 2012/03/10 02:58:51]

Basically undoing this.

+    return false;
+  }
+
+  // If the user is holding a modifier key, ignore.
+  if (e.metaKey || e.altKey || e.shiftKey || e.ctrlKey)
+    return false;
+
+  // Don't handle the key event for these elements.
+  var tagName = document.activeElement.tagName;
+  if (tagName == "INPUT" || tagName == "SELECT" || tagName == "EMBED")
+    return false;
+

[Dan Beam, 2012/03/10 01:14:26]

nit: remove \n

[Lei Zhang, 2012/03/10 01:35:45]

Done.

+
+  // For the most part, if any div of header was the last clicked element,
+  // then the active element is the body. Starting with the last clicked
+  // element, and work up the DOM tree to see if any element has a scrollbar.
+  // If there exists a scrollbar, do not handle the key event here.
+  var element = document.activeElement;
+  if (element == document.body) {
+    if (lastClickedElement)
+      element = lastClickedElement;
+    while (element) {
+      if (element.scrollHeight > element.clientHeight)
+        return false;
+      element = element.parentElement;
+    }
+  }
+
+  // No scroll bar anywhere, or the active element is something else, like a
+  // button. Note: buttons have a bigger scrollHeight than clientHeight.
+  previewArea.pdfPlugin.sendKeyEvent(e.keyCode);
+  return true;
+}
+
+/**
   * Handle keyboard events.
   * @param {KeyboardEvent} e The keyboard event.
+  * @return {boolean} true to allow the browser to handle the key, else false.

[Dan Beam, 2012/03/10 01:14:27]

  * @return {boolean} Whether the key was handled.

[Lei Zhang, 2012/03/10 01:35:45]

Isn't it actually the opposite?

[Dan Beam, 2012/03/10 01:57:33]

See below (you shouldn't have to return anything).

   */
 function onKeyDown(e) {
   // Escape key closes the dialog.
   if (e.keyCode == 27 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
     printHeader.disableCancelButton();
     closePrintPreviewTab();
+    return false;
   }
+  // Ctrl + Shift + p / Mac equivalent.
   if (e.keyCode == 80) {
     if ((cr.isMac && e.metaKey && e.altKey && !e.shiftKey && !e.ctrlKey) ||
         (!cr.isMac && e.shiftKey && e.ctrlKey && !e.altKey && !e.metaKey)) {
       window.onkeydown = null;
       onSystemDialogLinkClicked();
+      return false;
     }
   }
+
+  return !tryToHandleDirectionKeyDown(e);

[Dan Beam, 2012/03/10 01:14:27]

who actually listens to this return value?

[Lei Zhang, 2012/03/10 01:35:45]

The renderer. It's like the return value in: <a href="http://foo.com"
onclick="alert('hi'); return false;">click does not navigate</a>

[Dan Beam, 2012/03/10 01:57:33]

use e.preventDefault() instead either here or inside the method, IMO (this can
still be tested as well)

[Lei Zhang, 2012/03/10 02:20:44]

Done.

 }
 
 window.addEventListener('DOMContentLoaded', onLoad);
 window.onkeydown = onKeyDown;
 
 /// Pull in all other scripts in a single shot.
 <include src="print_preview_animations.js"/>
 <include src="print_preview_cloud.js"/>
 <include src="print_preview_utils.js"/>
 <include src="print_header.js"/>
 <include src="page_settings.js"/>
 <include src="copies_settings.js"/>
 <include src="header_footer_settings.js"/>
 <include src="layout_settings.js"/>
 <include src="color_settings.js"/>
 <include src="margin_settings.js"/>
 <include src="margin_textbox.js"/>
 <include src="margin_utils.js"/>
 <include src="margins_ui.js"/>
 <include src="margins_ui_pair.js"/>
 <include src="preview_area.js"/>