Implement viewporting for the out of process PDF plugin.

chrome/browser/resources/pdf/pdf.js

 // Copyright 2013 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.
 
 (function() {
 
-var plugin;
-var sizer;
+<include src="../../../../ui/webui/resources/js/util.js"></include>
+<include src="viewport.js"></include>
 
-function onScroll() {
-  var scrollMessage = {
-    type: 'scroll',
-    xOffset: window.pageXOffset,
-    yOffset: window.pageYOffset
-  };
-  plugin.postMessage(scrollMessage);
+// 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);
+  gPlugin.setAttribute('src', url);
+  // Add the elements to the document.
+  document.body.appendChild(gPlugin);
+  document.body.appendChild(gSizer);
 
-  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.
+  $('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();
 
 })();