PDF Viewer update: Adjust zoom level when PDF area resizes

In the new UI layout, the PDF area can be resized in two ways

1) expanding/collapsing the sidenav
2) resizing the entire window

Because of #1, the previous approach of listening for the Window's
'resize' event is no longer sufficient. Therefore a ResizeObserver
is used which works for both #1 and #2.

Bug: 1121351
Change-Id: I6fd895a55e4630f9562c8d8ea38dc7d4fc6ebb75
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2391335Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#808469}

chrome/browser/resources/pdf/pdf_viewer.html

@@ -107,8 +107,17 @@
     z-index: initial;
   }
 
+  /* #main and #scroller are intentionally different elements so that a
+   * ResizeObserver can be used on #main without triggering
+   * "ResizeObserver loop limit exceeded".
+   */
   #main {
     flex: 1;
+    overflow: hidden;
+  }
+
+  #scroller {
+    height: 100%;
     overflow: auto;
     position: relative;
   }
@@ -181,10 +190,12 @@
           on-navigate="onNavigate_">
       </viewer-pdf-sidenav>
     </div>
-    <div id="main" on-scroll="onScroll_">
+    <div id="main">
+      <div id="scroller" on-scroll="onScroll_">
         <div id="sizer"></div>
         <div id="content"></div>
       </div>
+    <div>
   </div>
 </template>
 

chrome/browser/resources/pdf/viewport.js

@@ -188,19 +188,26 @@ export class Viewport {
     // Set to a default zoom manager - used in tests.
     this.setZoomManager(new InactiveZoomManager(this.getZoom.bind(this), 1));
 
-    if (this.window_ === document.documentElement) {
+    // Case where |chrome_pdf::features::kPDFViewerUpdate| is disabled.
+    if (this.window_ === document.documentElement ||
+        // Necessary check since during testing a fake DOM element is used.
+        !(this.window_ instanceof HTMLElement)) {
       window.addEventListener('scroll', this.updateViewport_.bind(this));
       // The following line is only used in tests, since they expect
       // |scrollCallback| to be called on the mock |window_| object (legacy).
       this.window_.scrollCallback = this.updateViewport_.bind(this);
-    } else {
-      this.window_.addEventListener('scroll', this.updateViewport_.bind(this));
-    }
-
       window.addEventListener('resize', this.resizeWrapper_.bind(this));
       // The following line is only used in tests, since they expect
       // |resizeCallback| to be called on the mock |window_| object (legacy).
       this.window_.resizeCallback = this.resizeWrapper_.bind(this);
+    } else {
+      // Case where |chrome_pdf::features::kPDFViewerUpdate| is enabled.
+      this.window_.addEventListener('scroll', this.updateViewport_.bind(this));
+      const resizeObserver = new ResizeObserver(_ => this.resizeWrapper_());
+      const target = this.window_.parentElement;
+      assert(target.id === 'main');
+      resizeObserver.observe(target);
+    }
 
     document.body.addEventListener(
         'change-zoom', e => this.setZoom(e.detail.zoom));

chrome/test/data/pdf/annotations_feature_enabled_test.js

@@ -62,7 +62,7 @@ chrome.test.runTests([
       const updateEnabled =
           document.documentElement.hasAttribute('pdf-viewer-update-enabled');
       const scrollingContainer =
-          updateEnabled ? viewer.shadowRoot.querySelector('#main') : window;
+          updateEnabled ? viewer.shadowRoot.querySelector('#scroller') : window;
       scrollingContainer.scrollTo(100, 100);
       await animationFrame();