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..c9a6e0d119ece677857e0dc69c150b28989774c4 100644
--- a/chrome/browser/resources/pdf/pdf.js
+++ b/chrome/browser/resources/pdf/pdf.js
@@ -4,50 +4,132 @@
 
 (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 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 gPlugin;

[arv (Not doing code reviews), 2014/02/13 23:47:41]

Why gPlugin instead of plugin?

[raymes, 2014/02/17 00:54:03]

Done.

+
+// 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 gSizer;
+
+// The toolbar element.
+var gViewerToolbar;
+
+// The viewport object.
+var gViewport;
+
+// Returns true if the fit-to-page button is enabled.
+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');

[arv (Not doing code reviews), 2014/02/13 23:47:41]

Any reason why this is created in script instead of in the html

Also, can the style be moved to a style element/css file?

[raymes, 2014/02/17 00:54:03]

The plugin gets loaded when the the object node is added to the DOM so we need
to create it dynamically. I moved the style to the html file as well as the
sizer element.

+  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);

[arv (Not doing code reviews), 2014/02/13 23:47:41]

plugin.src = 

[raymes, 2014/02/17 00:54:03]

That doesn't work, for some reason. I suspect it's due to some weird
plugin-loading related behavior.

+  // Add the elements to the document.
+  document.body.appendChild(gPlugin);
+  document.body.appendChild(gSizer);
+
+  // Setup the button event listeners.
+  $('fit-to-width-button').addEventListener('click',
+      function() { gViewport.fitToWidth(); });

[arv (Not doing code reviews), 2014/02/13 23:47:41]

or

$('fit-to-width-button').addEventListener('click', 
    gViewport.fitToWidth.bind(gViewport));

[raymes, 2014/02/17 00:54:03]

Done.

+  $('fit-to-page-button').addEventListener('click',
+      function() { gViewport.fitToPage(); });
+  $('zoom-in-button').addEventListener('click',
+      function() { gViewport.zoomIn(); });
+  $('zoom-out-button').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();

[arv (Not doing code reviews), 2014/02/13 23:47:41]

why do you need to stop the event propagation. Please add comment why  it is
needed

[raymes, 2014/02/17 00:54:03]

It's not needed. Thanks.

+          return false;

[arv (Not doing code reviews), 2014/02/13 23:47:41]

Please use `event.preventDefault()`

[raymes, 2014/02/17 00:54:03]

Done.

+        }
+        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();