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 click.
+ * @param {Event} e The 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.removeEventListener('keydown', onKeyDown);
   chrome.send('closePrintPreviewTab');
   chrome.send('DialogClose');
 }
 
 /**
+ * Pass certain directional keyboard events to the PDF viewer.
+ * @param {Event} e The keydown event.
+ */
+function tryToHandleDirectionKeyDown(e) {
+  // Make sure the PDF plugin is there.
+  if (!previewArea.pdfPlugin)
+    return;
+
+  // We only care about: PageUp, PageDown, Left, Up, Right, Down.
+  if (!(e.keyCode == 33 || e.keyCode == 34 ||
+        (e.keyCode >= 37 && e.keyCode <= 40))) {
+    return;
+  }
+
+  // If the user is holding a modifier key, ignore.
+  if (e.metaKey || e.altKey || e.shiftKey || e.ctrlKey)
+    return;
+
+  // Don't handle the key event for these elements.
+  var tagName = document.activeElement.tagName;
+  if (tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'EMBED')
+    return;
+
+  // 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;
+      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);
+  e.preventDefault();
+}
+
+/**
   * Handle keyboard events.
   * @param {KeyboardEvent} e The keyboard event.
   */
 function onKeyDown(e) {
   // Escape key closes the dialog.
   if (e.keyCode == 27 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
     printHeader.disableCancelButton();
     closePrintPreviewTab();
+    e.preventDefault();
   }
+  // 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;
+      window.removeEventListener('keydown', onKeyDown);
       onSystemDialogLinkClicked();
+      e.preventDefault();
     }
   }
+
+  tryToHandleDirectionKeyDown(e);
 }
 
 window.addEventListener('DOMContentLoaded', onLoad);
-window.onkeydown = onKeyDown;
+window.addEventListener('keydown', 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"/>