PDF Viewer Update: Remove the zoom toolbar when flag is on

Remove the zoom toolbar from the UI when the PDFViewerUpdate flag is
on, since zoom controls will be located in the main toolbar in this
case.

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

chrome/browser/resources/pdf/pdf_viewer.html

@@ -43,10 +43,12 @@
     on-password-submitted="onPasswordSubmitted_">
 </viewer-password-screen>
 
-<viewer-zoom-toolbar id="zoom-toolbar"
-    on-fit-to-changed="onFitToChanged"
-    on-zoom-in="onZoomIn" on-zoom-out="onZoomOut">
-</viewer-zoom-toolbar>
+<template is="dom-if" if="[[!pdfViewerUpdateEnabled_]]">
+  <viewer-zoom-toolbar id="zoom-toolbar"
+      on-fit-to-changed="onFitToChanged"
+      on-zoom-in="onZoomIn" on-zoom-out="onZoomOut">
+  </viewer-zoom-toolbar>
+</template>
 
 <viewer-error-screen id="error-screen"></viewer-error-screen>
 

chrome/browser/resources/pdf/pdf_viewer.js

@@ -220,11 +220,6 @@ class PDFViewerElement extends PDFViewerBaseElement {
     return /** @type {!HTMLDivElement} */ (this.$$('#sizer'));
   }
 
-  /** @override */
-  getZoomToolbar() {
-    return /** @type {!ViewerZoomToolbarElement} */ (this.$$('#zoom-toolbar'));
-  }
-
   /** @override */
   getErrorScreen() {
     return /** @type {!ViewerErrorScreenElement} */ (this.$$('#error-screen'));
@@ -238,6 +233,14 @@ class PDFViewerElement extends PDFViewerBaseElement {
     return /** @type {!ViewerPdfToolbarElement} */ (this.$$('#toolbar'));
   }
 
+  /**
+   * @return {!ViewerZoomToolbarElement}
+   * @private
+   */
+  getZoomToolbar_() {
+    return /** @type {!ViewerZoomToolbarElement} */ (this.$$('#zoom-toolbar'));
+  }
+
   /** @override */
   getBackgroundColor() {
     return BACKGROUND_COLOR;
@@ -290,9 +293,10 @@ class PDFViewerElement extends PDFViewerBaseElement {
       }
     });
 
-    this.toolbarManager_ = new ToolbarManager(
-        window, this.pdfViewerUpdateEnabled_ ? null : this.getToolbar_(),
-        this.getZoomToolbar());
+    if (!this.pdfViewerUpdateEnabled_) {
+      this.toolbarManager_ = new ToolbarManager(
+          window, this.getToolbar_(), this.getZoomToolbar_());
+    }
 
     // Setup the keyboard event listener.
     document.addEventListener(
@@ -311,6 +315,44 @@ class PDFViewerElement extends PDFViewerBaseElement {
     }
   }
 
+  /**
+   * Helper for handleKeyEvent_ dealing with events that control toolbars.
+   * @param {!KeyboardEvent} e the event to handle.
+   * @private
+   */
+  handleToolbarKeyEvent_(e) {
+    if (this.pdfViewerUpdateEnabled_) {
+      // TODO: Add handling for any relevant hotkeys for the new unified
+      // toolbar.
+      return;
+    }
+
+    switch (e.key) {
+      case 'Tab':
+        this.toolbarManager_.showToolbarsForKeyboardNavigation();
+        return;
+      case 'Escape':
+        this.toolbarManager_.hideSingleToolbarLayer();
+        return;
+      case 'g':
+        if (this.toolbarEnabled_ && (e.ctrlKey || e.metaKey) && e.altKey) {
+          this.toolbarManager_.showToolbars();
+          this.getToolbar_().selectPageNumber();
+        }
+        return;
+      case '\\':
+        if (e.ctrlKey) {
+          this.getZoomToolbar_().fitToggleFromHotKey();
+        }
+        return;
+    }
+
+    // Show toolbars as a fallback.
+    if (!(e.shiftKey || e.ctrlKey || e.altKey)) {
+      this.toolbarManager_.showToolbars();
+    }
+  }
+
   /**
    * Handle key events. These may come from the user directly or via the
    * scripting API.
@@ -322,7 +364,9 @@ class PDFViewerElement extends PDFViewerBaseElement {
       return;
     }
 
-    this.toolbarManager_.hideToolbarsAfterTimeout();
+    if (!this.pdfViewerUpdateEnabled_) {
+      this.toolbarManager_.hideToolbarsAfterTimeout();
+    }
 
     // Let the viewport handle directional key events.
     if (this.viewport.handleDirectionalKeyEvent(e, this.isFormFieldFocused_)) {
@@ -330,12 +374,6 @@ class PDFViewerElement extends PDFViewerBaseElement {
     }
 
     switch (e.key) {
-      case 'Tab':
-        this.toolbarManager_.showToolbarsForKeyboardNavigation();
-        return;
-      case 'Escape':
-        this.toolbarManager_.hideSingleToolbarLayer();
-        return;
       case 'a':
         if (e.ctrlKey || e.metaKey) {
           this.pluginController.selectAll();
@@ -343,22 +381,11 @@ class PDFViewerElement extends PDFViewerBaseElement {
           e.preventDefault();
         }
         return;
-      case 'g':
-        if (this.toolbarEnabled_ && (e.ctrlKey || e.metaKey) && e.altKey) {
-          this.toolbarManager_.showToolbars();
-          this.getToolbar_().selectPageNumber();
-        }
-        return;
       case '[':
         if (e.ctrlKey) {
           this.rotateCounterclockwise();
         }
         return;
-      case '\\':
-        if (e.ctrlKey) {
-          this.getZoomToolbar().fitToggleFromHotKey();
-        }
-        return;
       case ']':
         if (e.ctrlKey) {
           this.rotateClockwise();
@@ -366,10 +393,8 @@ class PDFViewerElement extends PDFViewerBaseElement {
         return;
     }
 
-    // Show toolbars as a fallback.
-    if (!(e.shiftKey || e.ctrlKey || e.altKey)) {
-      this.toolbarManager_.showToolbars();
-    }
+    // Handle toolbar related key events.
+    this.handleToolbarKeyEvent_(e);
   }
 
   /**
@@ -452,6 +477,10 @@ class PDFViewerElement extends PDFViewerBaseElement {
   onFitToChanged(e) {
     super.onFitToChanged(e);
 
+    if (this.pdfViewerUpdateEnabled_) {
+      return;
+    }
+
     if (e.detail.fittingType === FittingType.FIT_TO_PAGE ||
         e.detail.fittingType === FittingType.FIT_TO_HEIGHT) {
       this.toolbarManager_.forceHideTopToolbar();
@@ -467,7 +496,9 @@ class PDFViewerElement extends PDFViewerBaseElement {
   onTwoUpViewChanged_(e) {
     this.currentController.setTwoUpView(
         e.detail === TwoUpViewAction.TWO_UP_VIEW_ENABLE);
-    this.toolbarManager_.forceHideTopToolbar();
+    if (!this.pdfViewerUpdateEnabled_) {
+      this.toolbarManager_.forceHideTopToolbar();
+    }
     this.getToolbar_().annotationAvailable =
         (e.detail !== TwoUpViewAction.TWO_UP_VIEW_ENABLE);
 
@@ -514,7 +545,7 @@ class PDFViewerElement extends PDFViewerBaseElement {
       this.getToolbar_().loadProgress = progress;
     }
     super.updateProgress(progress);
-    if (progress === 100) {
+    if (progress === 100 && !this.pdfViewerUpdateEnabled_) {
       this.toolbarManager_.hideToolbarsAfterTimeout();
     }
   }
@@ -538,23 +569,25 @@ class PDFViewerElement extends PDFViewerBaseElement {
     const horizontalScrollbarWidth =
         hasScrollbars.horizontal ? scrollbarWidth : 0;
 
-    // Shift the zoom toolbar to the left by half a scrollbar width. This
-    // gives a compromise: if there is no scrollbar visible then the toolbar
-    // will be half a scrollbar width further left than the spec but if there
-    // is a scrollbar visible it will be half a scrollbar width further right
-    // than the spec. In RTL layout normally, the zoom toolbar is on the left
-    // left side, but the scrollbar is still on the right, so this is not
-    // necessary.
-    const zoomToolbar = this.getZoomToolbar();
-    if (!isRTL()) {
-      zoomToolbar.style.right =
-          -verticalScrollbarWidth + (scrollbarWidth / 2) + 'px';
-    }
-    // Having a horizontal scrollbar is much rarer so we don't offset the
-    // toolbar from the bottom any more than what the spec says. This means
-    // that when there is a scrollbar visible, it will be a full scrollbar
-    // width closer to the bottom of the screen than usual, but this is ok.
-    zoomToolbar.style.bottom = -horizontalScrollbarWidth + 'px';
+    if (!this.pdfViewerUpdateEnabled_) {
+      // Shift the zoom toolbar to the left by half a scrollbar width. This
+      // gives a compromise: if there is no scrollbar visible then the toolbar
+      // will be half a scrollbar width further left than the spec but if there
+      // is a scrollbar visible it will be half a scrollbar width further right
+      // than the spec. In RTL layout normally, the zoom toolbar is on the left
+      // left side, but the scrollbar is still on the right, so this is not
+      // necessary.
+      const zoomToolbar = this.getZoomToolbar_();
+      if (!isRTL()) {
+        zoomToolbar.style.right =
+            -verticalScrollbarWidth + (scrollbarWidth / 2) + 'px';
+      }
+      // Having a horizontal scrollbar is much rarer so we don't offset the
+      // toolbar from the bottom any more than what the spec says. This means
+      // that when there is a scrollbar visible, it will be a full scrollbar
+      // width closer to the bottom of the screen than usual, but this is ok.
+      zoomToolbar.style.bottom = -horizontalScrollbarWidth + 'px';
+    }
 
     // Update the page indicator.
     const visiblePage = this.viewport.getMostVisiblePage();
@@ -644,6 +677,14 @@ class PDFViewerElement extends PDFViewerBaseElement {
     assertNotReached('Unknown message type received: ' + data.type);
   }
 
+  /** @override */
+  forceFit(view) {
+    if (!this.pdfViewerUpdateEnabled_) {
+      this.getZoomToolbar_().forceFit(view);
+    }
+    // TODO: Add handling for the case where the new toolbar is enabled.
+  }
+
   /** @override */
   setDocumentDimensions(documentDimensions) {
     super.setDocumentDimensions(documentDimensions);

chrome/browser/resources/pdf/pdf_viewer_base.js

@@ -134,16 +134,16 @@ export class PDFViewerBaseElement extends PolymerElement {
   getSizer() {}
 
   /**
-   * @return {!ViewerZoomToolbarElement}
+   * @return {!ViewerErrorScreenElement}
    * @protected
    */
-  getZoomToolbar() {}
+  getErrorScreen() {}
 
   /**
-   * @return {!ViewerErrorScreenElement}
+   * @param {!FittingType} view
    * @protected
    */
-  getErrorScreen() {}
+  forceFit(view) {}
 
   /**
    * @param {string} query
@@ -502,7 +502,7 @@ export class PDFViewerBaseElement extends PolymerElement {
 
     if (params.view) {
       this.isUserInitiatedEvent = false;
-      this.getZoomToolbar().forceFit(params.view);
+      this.forceFit(params.view);
       if (params.viewPosition) {
         const zoomedPositionShift =
             params.viewPosition * this.viewport_.getZoom();

chrome/browser/resources/pdf/pdf_viewer_pp.js

@@ -55,11 +55,6 @@ class PDFViewerPPElement extends PDFViewerBaseElement {
     return /** @type {!HTMLDivElement} */ (this.$$('#sizer'));
   }
 
-  /** @override */
-  getZoomToolbar() {
-    return /** @type {!ViewerZoomToolbarElement} */ (this.$$('#zoom-toolbar'));
-  }
-
   /** @override */
   getErrorScreen() {
     return /** @type {!ViewerErrorScreenElement} */ (this.$$('#error-screen'));
@@ -70,12 +65,20 @@ class PDFViewerPPElement extends PDFViewerBaseElement {
     return PRINT_PREVIEW_BACKGROUND_COLOR;
   }
 
+  /**
+   * @return {!ViewerZoomToolbarElement}
+   * @private
+   */
+  getZoomToolbar_() {
+    return /** @type {!ViewerZoomToolbarElement} */ (this.$$('#zoom-toolbar'));
+  }
+
   /** @param {!BrowserApi} browserApi */
   init(browserApi) {
     super.init(browserApi);
 
     this.toolbarManager_ =
-        new ToolbarManager(window, null, this.getZoomToolbar());
+        new ToolbarManager(window, null, this.getZoomToolbar_());
 
     // Setup the keyboard event listener.
     document.addEventListener(
@@ -120,7 +123,7 @@ class PDFViewerPPElement extends PDFViewerBaseElement {
         return;
       case '\\':
         if (e.ctrlKey) {
-          this.getZoomToolbar().fitToggleFromHotKey();
+          this.getZoomToolbar_().fitToggleFromHotKey();
         }
         return;
       case ']':
@@ -165,7 +168,7 @@ class PDFViewerPPElement extends PDFViewerBaseElement {
     // than the spec. In LTR layout, the zoom toolbar is on the left
     // left side, but the scrollbar is still on the right, so this is not
     // necessary.
-    const zoomToolbar = this.getZoomToolbar();
+    const zoomToolbar = this.getZoomToolbar_();
     if (isRTL()) {
       zoomToolbar.style.right =
           -verticalScrollbarWidth + (scrollbarWidth / 2) + 'px';
@@ -235,7 +238,7 @@ class PDFViewerPPElement extends PDFViewerBaseElement {
         if (!this.inPrintPreviewMode_) {
           this.inPrintPreviewMode_ = true;
           this.isUserInitiatedEvent = false;
-          this.getZoomToolbar().forceFit(FittingType.FIT_TO_PAGE);
+          this.forceFit(FittingType.FIT_TO_PAGE);
           this.isUserInitiatedEvent = true;
         }
 
@@ -337,10 +340,14 @@ class PDFViewerPPElement extends PDFViewerBaseElement {
     return this.isPrintPreviewLoadingFinished_;
   }
 
+  /** @override */
+  forceFit(view) {
+    this.getZoomToolbar_().forceFit(view);
+  }
+
   /** @override */
   handleStrings(strings) {
     super.handleStrings(strings);
-
     if (!strings) {
       return;
     }