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..29a532afd16f313949a9a11bcb21274aedc539d4 100644
--- a/chrome/browser/resources/pdf/pdf.js
+++ b/chrome/browser/resources/pdf/pdf.js
@@ -4,50 +4,128 @@
 
 (function() {
 
-var plugin;
-var sizer;
-
-function onScroll() {
-  var scrollMessage = {
-    type: 'scroll',
-    xOffset: window.pageXOffset,
-    yOffset: window.pageYOffset
-  };
-  plugin.postMessage(scrollMessage);
+<include src="../../../../ui/webui/resources/js/util.js"></include>
+<include src="viewport.js"></include>
+
+// The plugin element.
+var gPlugin;
+
+// The sizer element. This represents the zoomed size of the document in the
+// page.
+var gSizer;

[koz (OOO until 15th September), 2014/02/03 03:40:43]

Maybe instead of saying that it represents the size, describe how that works.
Eg, it's a sibling of the plugin element that is used to stretch the size of the
body (if that is how it works...). An explanation of why we need to resize the
sizer, rather than the plugin element itself would be useful, too.

[raymes, 2014/02/05 06:05:17]

Done.

+
+// The toolbar element.
+var gViewerToolbar;
+
+// The viewport object.
+var gViewport;
+
+function isFitToPageEnabled() {
+  return $('btn-ftp').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') {
+    gViewport.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;
+  gViewerToolbar.style.right = toolbarRight + 'px';
+  gViewerToolbar.style.bottom = toolbarBottom + 'px';
+
+  // Notify the plugin of the viewport change.
+  gPlugin.postMessage({
+    type: 'viewport',
+    zoom: zoom,
+    xOffset: x,
+    yOffset: y
+  });
+}
+
 function load() {
-  window.addEventListener('scroll',
-      function() { webkitRequestAnimationFrame(onScroll); });
+  // Create the plugin and sizer elements.
+  gPlugin = document.createElement('object');
+  gPlugin.style.width = '100%';
+  gPlugin.style.height = '100%';
+  gPlugin.setAttribute('type', 'application/x-google-chrome-pdf');
+  gPlugin.style.zIndex = 1;
+  gPlugin.style.position = 'fixed';
+  gPlugin.addEventListener('message', handleMessage, false);
+
+  gSizer = document.createElement('div');
+  gSizer.style.zIndex = 0;
+  gSizer.style.position = 'absolute';
 
+  // Create the viewport.
+  gViewport = new Viewport(window,
+                           gSizer,
+                           isFitToPageEnabled,
+                           viewportChangedCallback);
+
+  // Set the plugin URL which will initialize the plugin.
   // 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);
+  gPlugin.setAttribute('src', url);
+  // Add the elements to the document.
+  document.body.appendChild(gPlugin);
+  document.body.appendChild(gSizer);
+
+  // Setup the button event listeners.
+  $('btn-ftw').addEventListener('click',
+                                function() { gViewport.fitToWidth(); });
+  $('btn-ftp').addEventListener('click', function() { gViewport.fitToPage(); });
+  $('btn-zoom-in').addEventListener('click',
+                                    function() { gViewport.zoomIn(); });
+  $('btn-zoom-out').addEventListener('click',
+                                     function() { gViewport.zoomOut(); });
+
+  gViewerToolbar = $('toolbar');
+
+  // 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 (!gViewport.documentHasScrollbars().x) {
+          gViewport.goToPage(gViewport.getMostVisiblePage() - 1);
+          e.stopPropagation();
+          return false;
+        }
+        return true;
+      case 33:  // Page up key.
+        // Go to the previous page if we are fit-to-page.
+        if (isFitToPageEnabled()) {
+          gViewport.goToPage(gViewport.getMostVisiblePage() - 1);
+          e.stopPropagation();
+          return false;
+        }
+        return true;
+      case 39:  // Right arrow key.
+        // Go to the next page if there are no horizontal scrollbars.
+        if (!gViewport.documentHasScrollbars().y) {
+          gViewport.goToPage(gViewport.getMostVisiblePage() + 1);
+          e.stopPropagation();
+          return false;
+        }
+        return true;
+      case 34:  // Page down key.
+        // Go to the next page if we are fit-to-page.
+        if (isFitToPageEnabled()) {
+          gViewport.goToPage(gViewport.getMostVisiblePage() + 1);
+          e.stopPropagation();
+          return false;
+        }
+        return true;
+    }
+  };
 }
 
 load();