Implement viewporting for the out of process PDF plugin.

chrome/browser/resources/pdf/pdf.js

Index: chrome/browser/resources/pdf/pdf.js
diff --git a/chrome/browser/resources/pdf/pdf.js b/chrome/browser/resources/pdf/pdf.js
index 0d2d39994912dd224a19fd8b38b2476de6b13712..e7db180f9f5c6eb7f2b5c69d1df34465416ca9c4 100644
--- a/chrome/browser/resources/pdf/pdf.js
+++ b/chrome/browser/resources/pdf/pdf.js
@@ -4,50 +4,119 @@
 
 (function() {

[arv (Not doing code reviews), 2014/02/18 17:37:29]

'use strict';

[raymes, 2014/02/18 23:11:45]

Done.

 
+<include src="../../../../ui/webui/resources/js/util.js"></include>
+<include src="viewport.js"></include>
+
+// The plugin element is sized to fill the entire window and is set to be fixed
+// positioning, acting as a viewport. The plugin renders into this viewport
+// according to the scroll position of the window.
 var plugin;
+
+// This element is placed behind the plugin element to cause scrollbars to be
+// displayed in the window. It is sized according to the document size of the
+// pdf and zoom level.
 var sizer;
 
-function onScroll() {
-  var scrollMessage = {
-    type: 'scroll',
-    xOffset: window.pageXOffset,
-    yOffset: window.pageYOffset
-  };
-  plugin.postMessage(scrollMessage);
+// The toolbar element.
+var viewerToolbar;
+
+// The viewport object.
+var viewport;
+
+// Returns true if the fit-to-page button is enabled.
+function isFitToPageEnabled() {
+  return $('fit-to-page-button').classList.contains('polymer-selected');
 }
 
+// Called when a message is received from the plugin.
 function handleMessage(message) {
-  if (message.data['type'] == 'document_dimensions') {
-    if (sizer.style.height != message.data['document_height'] + 'px') {
-      sizer.style.height = message.data['document_height'] + 'px';
-      sizer.style.width = message.data['document_width'] + 'px';
-    }
+  if (message.data.type == 'documentDimensions') {
+    viewport.setDocumentDimensions(message.data);
   }
 }
 
+// Callback that's called when the viewport changes.
+function viewportChangedCallback(zoom, x, y, scrollbarWidth, hasScrollbars) {
+  // Offset the toolbar position so that it doesn't move if scrollbars appear.
+  var toolbarRight = hasScrollbars.y ? 0 : scrollbarWidth;
+  var toolbarBottom = hasScrollbars.x ? 0 : scrollbarWidth;
+  viewerToolbar.style.right = toolbarRight + 'px';
+  viewerToolbar.style.bottom = toolbarBottom + 'px';
+
+  // Notify the plugin of the viewport change.
+  plugin.postMessage({
+    type: 'viewport',
+    zoom: zoom,
+    xOffset: x,
+    yOffset: y
+  });
+}
+
 function load() {
-  window.addEventListener('scroll',
-      function() { webkitRequestAnimationFrame(onScroll); });
+  sizer = $('sizer');
+  viewerToolbar = $('toolbar');
 
+  // Create the viewport.
+  viewport = new Viewport(window,
+                          sizer,
+                          isFitToPageEnabled,
+                          viewportChangedCallback);
+
+  // Create the plugin object dynamically so we can set its src.
+  plugin = document.createElement('object');
+  plugin.id = 'plugin';
+  plugin.type = 'application/x-google-chrome-pdf';
+  plugin.addEventListener('message', handleMessage, false);
   // The pdf location is passed in the document url in the format:
   // http://<.../pdf.html>?<pdf location>.
   var url = window.location.search.substring(1);
-  plugin = document.createElement('object');
-  plugin.setAttribute('width', '100%');
-  plugin.setAttribute('height', '100%');
-  plugin.setAttribute('type', 'application/x-google-chrome-pdf');
   plugin.setAttribute('src', url);
-  plugin.style.zIndex = '1';
-  plugin.style.position = 'fixed';
-  plugin.addEventListener('message', handleMessage, false);
   document.body.appendChild(plugin);
 
-  sizer = document.createElement('div');
-  sizer.style.zIndex = '0';
-  sizer.style.position = 'absolute';
-  sizer.style.width = '100%';
-  sizer.style.height = '100%';
-  document.body.appendChild(sizer);
+  // Setup the button event listeners.
+  $('fit-to-width-button').addEventListener('click',
+      viewport.fitToWidth.bind(viewport));
+  $('fit-to-page-button').addEventListener('click',
+      viewport.fitToPage.bind(viewport));
+  $('zoom-in-button').addEventListener('click',
+      viewport.zoomIn.bind(viewport));
+  $('zoom-out-button').addEventListener('click',
+      viewport.zoomOut.bind(viewport));
+
+  // Setup keyboard event listeners.
+  document.onkeydown = function(e) {
+    switch (e.keyCode) {
+      case 37:  // Left arrow key.
+        // Go to the previous page if there are no horizontal scrollbars.
+        if (!viewport.documentHasScrollbars().x) {
+          viewport.goToPage(viewport.getMostVisiblePage() - 1);
+          // Since we do the movement of the page
+          e.preventDefault();
+        }
+        return;
+      case 33:  // Page up key.
+        // Go to the previous page if we are fit-to-page.
+        if (isFitToPageEnabled()) {
+          viewport.goToPage(viewport.getMostVisiblePage() - 1);
+          e.preventDefault();
+        }
+        return;
+      case 39:  // Right arrow key.
+        // Go to the next page if there are no horizontal scrollbars.
+        if (!viewport.documentHasScrollbars().x) {
+          viewport.goToPage(viewport.getMostVisiblePage() + 1);
+          e.preventDefault();
+        }
+        return;
+      case 34:  // Page down key.
+        // Go to the next page if we are fit-to-page.
+        if (isFitToPageEnabled()) {
+          viewport.goToPage(viewport.getMostVisiblePage() + 1);
+          e.preventDefault();
+        }
+        return;
+    }
+  };
 }
 
 load();