Improve scrolling performance in OOP PDF

chrome/browser/resources/pdf/viewport.js

 // Copyright 2014 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.
 
 /**
  * Returns the area of the intersection of two rectangles.
  * @param {Object} rect1 the first rect
  * @param {Object} rect2 the second rect
  * @return {number} the area of the intersection of the rects
  */
 function getIntersectionArea(rect1, rect2) {
   var xOverlap = Math.max(0,
       Math.min(rect1.x + rect1.width, rect2.x + rect2.width) -
       Math.max(rect1.x, rect2.x));
   var yOverlap = Math.max(0,
       Math.min(rect1.y + rect1.height, rect2.y + rect2.height) -
       Math.max(rect1.y, rect2.y));
   return xOverlap * yOverlap;
 }
 
 /**
  * Create a new viewport.
  * @param {Window} window the window
  * @param {Object} sizer is the element which represents the size of the
  *     document in the viewport
  * @param {Function} viewportChangedCallback is run when the viewport changes
+ * @param {Function} beforeZoomCallback is run before a change in zoom
+ * @param {Function} afterZoomCallback is run after a change in zoom
  * @param {number} scrollbarWidth the width of scrollbars on the page
  */
 function Viewport(window,
                   sizer,
                   viewportChangedCallback,
+                  beforeZoomCallback,
+                  afterZoomCallback,
                   scrollbarWidth) {
   this.window_ = window;
   this.sizer_ = sizer;
   this.viewportChangedCallback_ = viewportChangedCallback;
+  this.beforeZoomCallback_ = beforeZoomCallback;
+  this.afterZoomCallback_ = afterZoomCallback;
+  this.allowedToChangeZoom_ = false;
   this.zoom_ = 1;
   this.documentDimensions_ = null;
   this.pageDimensions_ = [];
   this.scrollbarWidth_ = scrollbarWidth;
   this.fittingType_ = Viewport.FittingType.NONE;
 
   window.addEventListener('scroll', this.updateViewport_.bind(this));
   window.addEventListener('resize', this.resize_.bind(this));
 }
 
@@ skipping 30 matching lines @@
 Viewport.prototype = {
   /**
    * @private
    * Returns true if the document needs scrollbars at the given zoom level.
    * @param {number} zoom compute whether scrollbars are needed at this zoom
    * @return {Object} with 'horizontal' and 'vertical' keys which map to bool
    *     values indicating if the horizontal and vertical scrollbars are needed
    *     respectively.
    */
   documentNeedsScrollbars_: function(zoom) {
+    if (!this.documentDimensions_) {
+      return {
+        horizontal: false,
+        vertical: false
+      };
+    }
     var documentWidth = this.documentDimensions_.width * zoom;
     var documentHeight = this.documentDimensions_.height * zoom;
     return {
       horizontal: documentWidth > this.window_.innerWidth,
       vertical: documentHeight > this.window_.innerHeight
     };
   },
 
   /**
    * Returns true if the document needs scrollbars at the current zoom level.
@@ skipping 72 matching lines @@
 
   /**
    * @type {number} the zoom level of the viewport.
    */
   get zoom() {
     return this.zoom_;
   },
 
   /**
    * @private
+   * Used to wrap a function that might perform zooming on the viewport. This is
+   * required so that we can notify the plugin that zooming is in progress
+   * so that while zooming is taking place it can stop reacting to scroll events
+   * from the viewport. This is to avoid flickering.
+   */
+  mightZoom_: function(f) {
+    this.beforeZoomCallback_();
+    this.allowedToChangeZoom_ = true;
+    f();
+    this.allowedToChangeZoom_ = false;
+    this.afterZoomCallback_();
+  },
+
+  /**
+   * @private
    * Sets the zoom of the viewport.
    * @param {number} newZoom the zoom level to zoom to.
    */
   setZoom_: function(newZoom) {
+    if (!this.allowedToChangeZoom_)
+      throw 'Called Viewport.setZoom_ without calling Viewport.mightZoom_.';
     var oldZoom = this.zoom_;
     this.zoom_ = newZoom;
     // Record the scroll position (relative to the middle of the window).
     var currentScrollPos = [
       (this.window_.pageXOffset + this.window_.innerWidth / 2) / oldZoom,
       (this.window_.pageYOffset + this.window_.innerHeight / 2) / oldZoom
     ];
     this.contentSizeChanged_();
     // Scroll to the scaled scroll position.
     this.window_.scrollTo(
         currentScrollPos[0] * newZoom - this.window_.innerWidth / 2,
         currentScrollPos[1] * newZoom - this.window_.innerHeight / 2);
   },
 
   /**
+   * @private
+   * Sets the zoom for testing purposes.
+   */
+  setZoomForTest_: function(newZoom) {
+    this.mightZoom_(function() {
+      this.setZoom_(newZoom);
+    }.bind(this));
+  },
+
+  /**
    * @type {number} the width of scrollbars in the viewport in pixels.
    */
   get scrollbarWidth() {
     return this.scrollbarWidth_;
   },
 
   /**
    * @type {Viewport.FittingType} the fitting type the viewport is currently in.
    */
   get fittingType() {
@@ skipping 119 matching lines @@
       var zoomHeight = windowWithScrollbars.height / pageDimensions.height;
       zoom = Math.min(zoomWidth, zoomHeight);
     }
     return zoom;
   },
 
   /**
    * Zoom the viewport so that the page-width consumes the entire viewport.
    */
   fitToWidth: function() {
-    this.fittingType_ = Viewport.FittingType.FIT_TO_WIDTH;
-    if (!this.documentDimensions_)
-      return;
-    // Track the last y-position so we stay at the same position after zooming.
-    var oldY = this.window_.pageYOffset / this.zoom_;
-    // When computing fit-to-width, the maximum width of a page in the document
-    // is used, which is equal to the size of the document width.
-    this.setZoom_(this.computeFittingZoom_(this.documentDimensions_, true));
-    var page = this.getMostVisiblePage();
-    this.window_.scrollTo(0, oldY * this.zoom_);
-    this.updateViewport_();
+    this.mightZoom_(function() {
+      this.fittingType_ = Viewport.FittingType.FIT_TO_WIDTH;
+      if (!this.documentDimensions_)
+        return;
+      // Track the last y-position to stay at the same position after zooming.
+      var oldY = this.window_.pageYOffset / this.zoom_;
+      // When computing fit-to-width, the maximum width of a page in the
+      // document is used, which is equal to the size of the document width.
+      this.setZoom_(this.computeFittingZoom_(this.documentDimensions_, true));
+      var page = this.getMostVisiblePage();
+      this.window_.scrollTo(0, oldY * this.zoom_);
+      this.updateViewport_();
+    }.bind(this));
   },
 
   /**
    * Zoom the viewport so that a page consumes the entire viewport. Also scrolls
    * to the top of the most visible page.
    */
   fitToPage: function() {
-    this.fittingType_ = Viewport.FittingType.FIT_TO_PAGE;
-    if (!this.documentDimensions_)
-      return;
-    var page = this.getMostVisiblePage();
-    this.setZoom_(this.computeFittingZoom_(this.pageDimensions_[page], false));
-    // Center the document in the page by scrolling by the amount of empty
-    // space to the left of the document.
-    var xOffset =
-        (this.documentDimensions_.width - this.pageDimensions_[page].width) *
-        this.zoom_ / 2;
-    this.window_.scrollTo(xOffset,
-                          this.pageDimensions_[page].y * this.zoom_);
-    this.updateViewport_();
+    this.mightZoom_(function() {
+      this.fittingType_ = Viewport.FittingType.FIT_TO_PAGE;
+      if (!this.documentDimensions_)
+        return;
+      var page = this.getMostVisiblePage();
+      this.setZoom_(this.computeFittingZoom_(
+          this.pageDimensions_[page], false));
+      // Center the document in the page by scrolling by the amount of empty
+      // space to the left of the document.
+      var xOffset =
+          (this.documentDimensions_.width - this.pageDimensions_[page].width) *
+          this.zoom_ / 2;
+      this.window_.scrollTo(xOffset,
+                            this.pageDimensions_[page].y * this.zoom_);
+      this.updateViewport_();
+    }.bind(this));
   },
 
   /**
    * Zoom out to the next predefined zoom level.
    */
   zoomOut: function() {
-    this.fittingType_ = Viewport.FittingType.NONE;
-    var nextZoom = Viewport.ZOOM_FACTORS[0];
-    for (var i = 0; i < Viewport.ZOOM_FACTORS.length; i++) {
-      if (Viewport.ZOOM_FACTORS[i] < this.zoom_)
-        nextZoom = Viewport.ZOOM_FACTORS[i];
-    }
-    this.setZoom_(nextZoom);
-    this.updateViewport_();
+    this.mightZoom_(function() {
+      this.fittingType_ = Viewport.FittingType.NONE;
+      var nextZoom = Viewport.ZOOM_FACTORS[0];
+      for (var i = 0; i < Viewport.ZOOM_FACTORS.length; i++) {
+        if (Viewport.ZOOM_FACTORS[i] < this.zoom_)
+          nextZoom = Viewport.ZOOM_FACTORS[i];
+      }
+      this.setZoom_(nextZoom);
+      this.updateViewport_();
+    }.bind(this));
   },
 
   /**
    * Zoom in to the next predefined zoom level.
    */
   zoomIn: function() {
-    this.fittingType_ = Viewport.FittingType.NONE;
-    var nextZoom = Viewport.ZOOM_FACTORS[Viewport.ZOOM_FACTORS.length - 1];
-    for (var i = Viewport.ZOOM_FACTORS.length - 1; i >= 0; i--) {
-      if (Viewport.ZOOM_FACTORS[i] > this.zoom_)
-        nextZoom = Viewport.ZOOM_FACTORS[i];
-    }
-    this.setZoom_(nextZoom);
-    this.updateViewport_();
+    this.mightZoom_(function() {
+      this.fittingType_ = Viewport.FittingType.NONE;
+      var nextZoom = Viewport.ZOOM_FACTORS[Viewport.ZOOM_FACTORS.length - 1];
+      for (var i = Viewport.ZOOM_FACTORS.length - 1; i >= 0; i--) {
+        if (Viewport.ZOOM_FACTORS[i] > this.zoom_)
+          nextZoom = Viewport.ZOOM_FACTORS[i];
+      }
+      this.setZoom_(nextZoom);
+      this.updateViewport_();
+    }.bind(this));
   },
 
   /**
    * Go to the given page index.
    * @param {number} page the index of the page to go to.
    */
   goToPage: function(page) {
-    if (this.pageDimensions_.length == 0)
-      return;
-    if (page < 0)
-      page = 0;
-    if (page >= this.pageDimensions_.length)
-      page = this.pageDimensions_.length - 1;
-    var dimensions = this.pageDimensions_[page];
-    this.window_.scrollTo(dimensions.x * this.zoom_, dimensions.y * this.zoom_);
+    this.mightZoom_(function() {
+      if (this.pageDimensions_.length == 0)
+        return;
+      if (page < 0)
+        page = 0;
+      if (page >= this.pageDimensions_.length)
+        page = this.pageDimensions_.length - 1;
+      var dimensions = this.pageDimensions_[page];
+      this.window_.scrollTo(dimensions.x * this.zoom_,
+                            dimensions.y * this.zoom_);
+      this.updateViewport_();
+    }.bind(this));
   },
 
   /**
    * Set the dimensions of the document.
    * @param {Object} documentDimensions the dimensions of the document
    */
   setDocumentDimensions: function(documentDimensions) {
-    var initialDimensions = !this.documentDimensions_;
-    this.documentDimensions_ = documentDimensions;
-    this.pageDimensions_ = this.documentDimensions_.pageDimensions;
-    if (initialDimensions) {
-      this.setZoom_(this.computeFittingZoom_(this.documentDimensions_, true));
-      if (this.zoom_ > 1)
-        this.setZoom_(1);
-      this.window_.scrollTo(0, 0);
-    }
-    this.contentSizeChanged_();
-    this.resize_();
+    this.mightZoom_(function() {
+      var initialDimensions = !this.documentDimensions_;
+      this.documentDimensions_ = documentDimensions;
+      this.pageDimensions_ = this.documentDimensions_.pageDimensions;
+      if (initialDimensions) {
+        this.setZoom_(this.computeFittingZoom_(this.documentDimensions_, true));
+        if (this.zoom_ > 1)
+          this.setZoom_(1);
+        this.window_.scrollTo(0, 0);
+      }
+      this.contentSizeChanged_();
+      this.resize_();
+    }.bind(this));
   },
 
   /**
    * Get the coordinates of the page contents (excluding the page shadow)
    * relative to the screen.
    * @param {number} page the index of the page to get the rect for.
    * @return {Object} a rect representing the page in screen coordinates.
    */
   getPageScreenRect: function(page) {
+    if (!this.documentDimensions_) {
+      return {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      };
+    }
     if (page >= this.pageDimensions_.length)
       page = this.pageDimensions_.length - 1;
 
     var pageDimensions = this.pageDimensions_[page];
 
     // Compute the page dimensions minus the shadows.
     var insetDimensions = {
       x: pageDimensions.x + Viewport.PAGE_SHADOW.left,
       y: pageDimensions.y + Viewport.PAGE_SHADOW.top,
       width: pageDimensions.width - Viewport.PAGE_SHADOW.left -
@@ skipping 14 matching lines @@
     spaceOnLeft = Math.max(spaceOnLeft, 0);
 
     return {
       x: x * this.zoom_ + spaceOnLeft - this.window_.pageXOffset,
       y: insetDimensions.y * this.zoom_ - this.window_.pageYOffset,
       width: insetDimensions.width * this.zoom_,
       height: insetDimensions.height * this.zoom_
     };
   }
 };