Propagate browser zoom changes to embedded PDFs.

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 height of the intersection of two rectangles.
  * @param {Object} rect1 the first rect
  * @param {Object} rect2 the second rect
  * @return {number} the height of the intersection of the rects
  */
@@ skipping 36 matching lines @@
 /**
  * Create a new viewport.
  * @constructor
  * @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
- * @param {number} defaultZoom The default zoom level.
+ * @param {number} initialZoom The zoom level to initialize the viewer to.

[Sam McNally, 2016/12/04 23:56:45]

Let's leave this as it was. It's used for deciding how zoomed we want to be
rather than how zoomed we are initially.

The reason for getting both zoom values is that the initial zoom and default
zoom can be different by the time we actually check.

[Kevin McNee, 2016/12/05 22:21:00]

Done.

  * @param {number} topToolbarHeight The number of pixels that should initially
  *     be left blank above the document for the toolbar.
  */
 function Viewport(window,
                   sizer,
                   viewportChangedCallback,
                   beforeZoomCallback,
                   afterZoomCallback,
                   scrollbarWidth,
-                  defaultZoom,
+                  initialZoom,
                   topToolbarHeight) {
   this.window_ = window;
   this.sizer_ = sizer;
   this.viewportChangedCallback_ = viewportChangedCallback;
   this.beforeZoomCallback_ = beforeZoomCallback;
   this.afterZoomCallback_ = afterZoomCallback;
   this.allowedToChangeZoom_ = false;
-  this.zoom_ = 1;
+  this.internalZoom_ = 1;
+  this.zoomManager_ = new InactiveZoomManager(this, 1);
   this.documentDimensions_ = null;
   this.pageDimensions_ = [];
   this.scrollbarWidth_ = scrollbarWidth;
   this.fittingType_ = Viewport.FittingType.NONE;
-  this.defaultZoom_ = defaultZoom;
+  this.initialZoom_ = initialZoom;
   this.topToolbarHeight_ = topToolbarHeight;
   this.prevScale_ = 1;
   this.pinchPhase_ = Viewport.PinchPhase.PINCH_NONE;
   this.pinchPanVector_ = null;
   this.pinchCenter_ = null;
   this.firstPinchCenterInFrame_ = null;
 
   window.addEventListener('scroll', this.updateViewport_.bind(this));
   window.addEventListener('resize', this.resize_.bind(this));
 }
@@ skipping 101 matching lines @@
     };
   },
 
   /**
    * Returns true if the document needs scrollbars at the current zoom level.
    * @return {Object} with 'x' and 'y' keys which map to bool values
    *     indicating if the horizontal and vertical scrollbars are needed
    *     respectively.
    */
   documentHasScrollbars: function() {
-    return this.documentNeedsScrollbars_(this.zoom_);
+    return this.documentNeedsScrollbars_(this.zoom);
   },
 
   /**
    * @private
    * Helper function called when the zoomed document size changes.
    */
   contentSizeChanged_: function() {
-    var zoomedDimensions = this.getZoomedDocumentDimensions_(this.zoom_);
+    var zoomedDimensions = this.getZoomedDocumentDimensions_(this.zoom);
     if (zoomedDimensions) {
       this.sizer_.style.width = zoomedDimensions.width + 'px';
       this.sizer_.style.height = zoomedDimensions.height +
           this.topToolbarHeight_ + 'px';
     }
   },
 
   /**
    * @private
    * Called when the viewport should be updated.
@@ skipping 30 matching lines @@
    * @type {Object} position the position to scroll to.
    */
   set position(position) {
     this.window_.scrollTo(position.x, position.y + this.topToolbarHeight_);
   },
 
   /**
    * @type {Object} the size of the viewport excluding scrollbars.
    */
   get size() {
-    var needsScrollbars = this.documentNeedsScrollbars_(this.zoom_);
+    var needsScrollbars = this.documentNeedsScrollbars_(this.zoom);
     var scrollbarWidth = needsScrollbars.vertical ? this.scrollbarWidth_ : 0;
     var scrollbarHeight = needsScrollbars.horizontal ? this.scrollbarWidth_ : 0;
     return {
       width: this.window_.innerWidth - scrollbarWidth,
       height: this.window_.innerHeight - scrollbarHeight
     };
   },
 
   /**
    * @type {number} the zoom level of the viewport.
    */
   get zoom() {
-    return this.zoom_;
+    return this.zoomManager_.applyBrowserZoom(this.internalZoom_);
   },
 
   /**
+   * Set the zoom manager.
+   * @type {ZoomManager} manager the zoom manager to set.
+   */
+  set zoomManager(manager) {
+    this.zoomManager_ = manager;
+  },
+
+  /**
    * @type {Viewport.PinchPhase} The phase of the current pinch gesture for
    *    the viewport.
    */
   get pinchPhase() {
     return this.pinchPhase_;
   },
 
   /**
    * @type {Object} The panning caused by the current pinch gesture (as
    *    the deltas of the x and y coordinates).
@@ skipping 29 matching lines @@
    * Sets the zoom of the viewport.
    * @param {number} newZoom the zoom level to zoom to.
    */
   setZoomInternal_: function(newZoom) {
     if (!this.allowedToChangeZoom_) {
       throw 'Called Viewport.setZoomInternal_ without calling ' +
             'Viewport.mightZoom_.';
     }
     // Record the scroll position (relative to the top-left of the window).
     var currentScrollPos = {
-      x: this.position.x / this.zoom_,
-      y: this.position.y / this.zoom_
+      x: this.position.x / this.zoom,
+      y: this.position.y / this.zoom
     };
-    this.zoom_ = newZoom;
+    this.internalZoom_ = newZoom;
     this.contentSizeChanged_();
     // Scroll to the scaled scroll position.
     this.position = {
-      x: currentScrollPos.x * newZoom,
-      y: currentScrollPos.y * newZoom
+      x: currentScrollPos.x * this.zoom,
+      y: currentScrollPos.y * this.zoom
     };
   },
 
   /**
    * @private
    * Sets the zoom of the viewport.
    * Same as setZoomInternal_ but for pinch zoom we have some more operations.
    * @param {number} scaleDelta The zoom delta.
    * @param {!Object} center The pinch center in content coordinates.
    */
   setPinchZoomInternal_: function(scaleDelta, center) {
     assert(this.allowedToChangeZoom_,
         'Called Viewport.setPinchZoomInternal_ without calling ' +
         'Viewport.mightZoom_.');
-    this.zoom_ = clampScale(this.zoom_ * scaleDelta);
+    this.internalZoom_ = clampScale(this.internalZoom_ * scaleDelta);
 
     var newCenterInContent = this.frameToContent(center);
     var delta = {
       x: (newCenterInContent.x - this.oldCenterInContent.x),
       y: (newCenterInContent.y - this.oldCenterInContent.y)
     };
 
     // Record the scroll position (relative to the pinch center).
     var currentScrollPos = {
-      x: this.position.x - delta.x * this.zoom_,
-      y: this.position.y - delta.y * this.zoom_
+      x: this.position.x - delta.x * this.zoom,
+      y: this.position.y - delta.y * this.zoom
     };
 
     this.contentSizeChanged_();
     // Scroll to the scaled scroll position.
     this.position = {
       x: currentScrollPos.x,
       y: currentScrollPos.y
     };
   },
 
   /**
    *  @private
    *  Converts a point from frame to content coordinates.
    *  @param {!Object} framePoint The frame coordinates.
    *  @return {!Object} The content coordinates.
    */
   frameToContent: function(framePoint) {
     // TODO(mcnee) Add a helper Point class to avoid duplicating operations
     // on plain {x,y} objects.
     return {
-      x: (framePoint.x + this.position.x) / this.zoom_,
-      y: (framePoint.y + this.position.y) / this.zoom_
+      x: (framePoint.x + this.position.x) / this.zoom,
+      y: (framePoint.y + this.position.y) / this.zoom
     };
   },
 
   /**
    * Sets the zoom to the given zoom level.
    * @param {number} newZoom the zoom level to zoom to.
    */
   setZoom: function(newZoom) {
     this.fittingType_ = Viewport.FittingType.NONE;
     newZoom = Math.max(Viewport.ZOOM_FACTOR_RANGE.min,
                        Math.min(newZoom, Viewport.ZOOM_FACTOR_RANGE.max));
     this.mightZoom_(function() {
       this.setZoomInternal_(newZoom);
       this.updateViewport_();
     }.bind(this));
   },
 
   /**
+   * Gets notified of the browser zoom changing seperately from the
+   * internal zoom.
+   * @param {number} oldBrowserZoom the previous value of the browser zoom.
+   */
+  updateZoomFromBrowserChange: function(oldBrowserZoom) {
+    this.mightZoom_(function() {
+      // Record the scroll position (relative to the top-left of the window).
+      var oldZoom = oldBrowserZoom * this.internalZoom_;
+      var currentScrollPos = {
+        x: this.position.x / oldZoom,
+        y: this.position.y / oldZoom
+      };
+      this.contentSizeChanged_();
+      // Scroll to the scaled scroll position.
+      this.position = {
+        x: currentScrollPos.x * this.zoom,
+        y: currentScrollPos.y * this.zoom
+      };
+      this.updateViewport_();
+    }.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 29 matching lines @@
     }
     return 0;
   },
 
   /**
    * Returns the page with the greatest proportion of its height in the current
    * viewport.
    * @return {int} the index of the most visible page.
    */
   getMostVisiblePage: function() {
-    var firstVisiblePage = this.getPageAtY_(this.position.y / this.zoom_);
+    var firstVisiblePage = this.getPageAtY_(this.position.y / this.zoom);
     if (firstVisiblePage == this.pageDimensions_.length - 1)
       return firstVisiblePage;
 
     var viewportRect = {
-      x: this.position.x / this.zoom_,
-      y: this.position.y / this.zoom_,
-      width: this.size.width / this.zoom_,
-      height: this.size.height / this.zoom_
+      x: this.position.x / this.zoom,
+      y: this.position.y / this.zoom,
+      width: this.size.width / this.zoom,
+      height: this.size.height / this.zoom
     };
     var firstVisiblePageVisibility = getIntersectionHeight(
         this.pageDimensions_[firstVisiblePage], viewportRect) /
         this.pageDimensions_[firstVisiblePage].height;
     var nextPageVisibility = getIntersectionHeight(
         this.pageDimensions_[firstVisiblePage + 1], viewportRect) /
         this.pageDimensions_[firstVisiblePage + 1].height;
     if (nextPageVisibility > firstVisiblePageVisibility)
       return firstVisiblePage + 1;
     return firstVisiblePage;
   },
 
   /**
    * @private
    * Compute the zoom level for fit-to-page or fit-to-width. |pageDimensions| is
    * the dimensions for a given page and if |widthOnly| is true, it indicates
    * that fit-to-page zoom should be computed rather than fit-to-page.
    * @param {Object} pageDimensions the dimensions of a given page
    * @param {boolean} widthOnly a bool indicating whether fit-to-page or
    *     fit-to-width should be computed.
-   * @return {number} the zoom to use
+   * @return {number} the internal zoom to set
    */
   computeFittingZoom_: function(pageDimensions, widthOnly) {
     // First compute the zoom without scrollbars.
     var zoomWidth = this.window_.innerWidth / pageDimensions.width;
     var zoom;
     var zoomHeight;
     if (widthOnly) {
       zoom = zoomWidth;
     } else {
       zoomHeight = this.window_.innerHeight / pageDimensions.height;
@@ skipping 30 matching lines @@
       windowWithScrollbars.width -= scrollbarWidth;
 
     // Recompute the zoom.
     zoomWidth = windowWithScrollbars.width / pageDimensions.width;
     if (widthOnly) {
       zoom = zoomWidth;
     } else {
       zoomHeight = windowWithScrollbars.height / pageDimensions.height;
       zoom = Math.min(zoomWidth, zoomHeight);
     }
-    return zoom;
+    return this.zoomManager_.internalZoomComponent(zoom);
   },
 
   /**
    * Zoom the viewport so that the page-width consumes the entire viewport.
    */
   fitToWidth: function() {
     this.mightZoom_(function() {
       this.fittingType_ = Viewport.FittingType.FIT_TO_WIDTH;
       if (!this.documentDimensions_)
         return;
@@ skipping 21 matching lines @@
       var page = this.getMostVisiblePage();
       // Fit to the current page's height and the widest page's width.
       var dimensions = {
         width: this.documentDimensions_.width,
         height: this.pageDimensions_[page].height,
       };
       this.setZoomInternal_(this.computeFittingZoom_(dimensions, false));
       if (scrollToTopOfPage) {
         this.position = {
           x: 0,
-          y: this.pageDimensions_[page].y * this.zoom_
+          y: this.pageDimensions_[page].y * this.zoom
         };
       }
       this.updateViewport_();
     }.bind(this));
   },
 
   /**
    * Zoom the viewport so that a page consumes the entire viewport. Also scrolls
    * the viewport to the top of the current page.
    */
   fitToPage: function() {
     this.fitToPageInternal_(true);
   },
 
   /**
    * Zoom out to the next predefined zoom level.
    */
   zoomOut: function() {
     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_)
+        if (Viewport.ZOOM_FACTORS[i] < this.internalZoom_)
           nextZoom = Viewport.ZOOM_FACTORS[i];
       }
       this.setZoomInternal_(nextZoom);
       this.updateViewport_();
     }.bind(this));
   },
 
   /**
    * Zoom in to the next predefined zoom level.
    */
   zoomIn: function() {
     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_)
+        if (Viewport.ZOOM_FACTORS[i] > this.internalZoom_)
           nextZoom = Viewport.ZOOM_FACTORS[i];
       }
       this.setZoomInternal_(nextZoom);
       this.updateViewport_();
     }.bind(this));
   },
 
   /**
    * Pinch zoom event handler.
    * @param {!Object} e The pinch event.
    */
   pinchZoom: function(e) {
     this.mightZoom_(function() {
       this.pinchPhase_ = e.direction == 'out' ?
                          Viewport.PinchPhase.PINCH_UPDATE_ZOOM_OUT :
                          Viewport.PinchPhase.PINCH_UPDATE_ZOOM_IN;
 
       var scaleDelta = e.startScaleRatio / this.prevScale_;
       this.pinchPanVector_ =
           vectorDelta(e.center, this.firstPinchCenterInFrame_);
 
       var needsScrollbars = this.documentNeedsScrollbars_(
-          clampScale(this.zoom_ * scaleDelta));
+          this.zoomManager_.applyBrowserZoom(
+              clampScale(this.internalZoom_ * scaleDelta)));
 
       this.pinchCenter_ = e.center;
 
       // If there's no horizontal scrolling, keep the content centered so the
       // user can't zoom in on the non-content area.
       // TODO(mcnee) Investigate other ways of scaling when we don't have
       // horizontal scrolling. We want to keep the document centered,
       // but this causes a potentially awkward transition when we start
       // using the gesture center.
       if (!needsScrollbars.horizontal) {
@@ skipping 13 matching lines @@
       this.prevScale_ = e.startScaleRatio;
     }.bind(this));
   },
 
   pinchZoomStart: function(e) {
     this.pinchPhase_ = Viewport.PinchPhase.PINCH_START;
     this.prevScale_ = 1;
     this.oldCenterInContent =
         this.frameToContent(frameToPluginCoordinate(e.center));
 
-    var needsScrollbars = this.documentNeedsScrollbars_(this.zoom_);
+    var needsScrollbars = this.documentNeedsScrollbars_(this.zoom);
     this.keepContentCentered_ = !needsScrollbars.horizontal;
     // We keep track of begining of the pinch.
     // By doing so we will be able to compute the pan distance.
     this.firstPinchCenterInFrame_ = e.center;
   },
 
   pinchZoomEnd: function(e) {
     this.mightZoom_(function() {
       this.pinchPhase_ = Viewport.PinchPhase.PINCH_END;
       var scaleDelta = e.startScaleRatio / this.prevScale_;
@@ skipping 23 matching lines @@
       if (page >= this.pageDimensions_.length)
         page = this.pageDimensions_.length - 1;
       var dimensions = this.pageDimensions_[page];
       var toolbarOffset = 0;
       // Unless we're in fit to page mode, scroll above the page by
       // |this.topToolbarHeight_| so that the toolbar isn't covering it
       // initially.
       if (this.fittingType_ != Viewport.FittingType.FIT_TO_PAGE)
         toolbarOffset = this.topToolbarHeight_;
       this.position = {
-        x: dimensions.x * this.zoom_,
-        y: dimensions.y * this.zoom_ - toolbarOffset
+        x: dimensions.x * this.zoom,
+        y: dimensions.y * this.zoom - toolbarOffset
       };
       this.updateViewport_();
     }.bind(this));
   },
 
   /**
    * Set the dimensions of the document.
    * @param {Object} documentDimensions the dimensions of the document
    */
   setDocumentDimensions: function(documentDimensions) {
     this.mightZoom_(function() {
       var initialDimensions = !this.documentDimensions_;
       this.documentDimensions_ = documentDimensions;
       this.pageDimensions_ = this.documentDimensions_.pageDimensions;
       if (initialDimensions) {
         this.setZoomInternal_(
-            Math.min(this.defaultZoom_,
+            Math.min(this.initialZoom_,
                      this.computeFittingZoom_(this.documentDimensions_, true)));
         this.position = {
           x: 0,
           y: -this.topToolbarHeight_
         };
       }
       this.contentSizeChanged_();
       this.resize_();
     }.bind(this));
   },
@@ skipping 29 matching lines @@
     };
 
     // Compute the x-coordinate of the page within the document.
     // TODO(raymes): This should really be set when the PDF plugin passes the
     // page coordinates, but it isn't yet.
     var x = (this.documentDimensions_.width - pageDimensions.width) / 2 +
         Viewport.PAGE_SHADOW.left;
     // Compute the space on the left of the document if the document fits
     // completely in the screen.
     var spaceOnLeft = (this.size.width -
-        this.documentDimensions_.width * this.zoom_) / 2;
+        this.documentDimensions_.width * this.zoom) / 2;
     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_
+      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
     };
   }
 };