New PDF Toolbar: Hook up zoom buttons

Hook up the +/- and fit to page/width buttons in the new PDF toolbar.

Note: This does not update or make use of the new zoom input field.

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

chrome/browser/resources/pdf/BUILD.gn

@@ -158,6 +158,7 @@ js_library("pdf_viewer") {
     "elements:viewer-error-screen",
     "elements:viewer-password-screen",
     "elements:viewer-pdf-toolbar",
+    "elements:viewer-pdf-toolbar-new",
     "elements:viewer-zoom-toolbar",
     "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:event_tracker.m",

chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.html

@@ -101,11 +101,20 @@
   <viewer-page-selector doc-length="[[docLength]]" page-no="[[pageNo]]">
   </viewer-page-selector>
   <span id="zoom-controls">
-    <cr-icon-button iron-icon="pdf:remove"></cr-icon-button>
+    <cr-icon-button iron-icon="pdf:remove" title="$i18n{tooltipZoomOut}"
+        on-click="onZoomOutClick_">
+    </cr-icon-button>
     <input type="text" value="100%"></input>
-    <cr-icon-button iron-icon="pdf:add"></cr-icon-button>
+    <cr-icon-button iron-icon="pdf:add" title="$i18n{tooltipZoomIn}"
+        on-click="onZoomInClick_">
+    </cr-icon-button>
   </span>
-  <cr-icon-button iron-icon="pdf:fit-to-height"></cr-icon-button>
+  <cr-icon-button iron-icon="[[fitToButtonIcon_]]"
+      title="[[getFitToButtonTooltip_('$i18nPolymer{tooltipFitToPage}',
+                                      '$i18nPolymer{tooltipFitToWidth}',
+                                      fittingType_)]]"
+      on-click="onFitToButtonClick_">
+  </cr-icon-button>
   <cr-icon-button iron-icon="pdf:rotate-left"></cr-icon-button>
 </div>
 <div id="end">

chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.js

@@ -6,7 +6,6 @@ import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/polymer/v3_0/paper-progress/paper-progress.js';
-
 import './icons.js';
 import './viewer-download-controls.js';
 import './viewer-page-selector.js';
@@ -14,7 +13,9 @@ import './shared-css.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
-class ViewerPdfToolbarNewElement extends PolymerElement {
+import {FittingType} from '../constants.js';
+
+export class ViewerPdfToolbarNewElement extends PolymerElement {
   static get is() {
     return 'viewer-pdf-toolbar-new';
   }
@@ -45,16 +46,47 @@ class ViewerPdfToolbarNewElement extends PolymerElement {
       pdfAnnotationsEnabled: Boolean,
       pdfFormSaveEnabled: Boolean,
       printingEnabled: Boolean,
+
+      fittingType_: Number,
+
+      /** @private {string} */
+      fitToButtonIcon_: {
+        type: String,
+        computed: 'computeFitToButtonIcon_(fittingType_)',
+      },
     };
   }
 
   constructor() {
     super();
 
+    /** @private {!FittingType} */
+    this.fittingType_ = FittingType.FIT_TO_PAGE;
+
     /** @private {boolean} */
     this.loading_ = true;
   }
 
+  /**
+   * @return {string}
+   * @private
+   */
+  computeFitToButtonIcon_() {
+    return this.fittingType_ === FittingType.FIT_TO_PAGE ? 'pdf:fit-to-height' :
+                                                           'pdf:fit-to-width';
+  }
+
+  /**
+   * @param {string} fitToPageTooltip
+   * @param {string} fitToWidthTooltip
+   * @return {string} The appropriate tooltip for the current state
+   * @private
+   */
+  getFitToButtonTooltip_(fitToPageTooltip, fitToWidthTooltip) {
+    return this.fittingType_ === FittingType.FIT_TO_PAGE ? fitToPageTooltip :
+                                                           fitToWidthTooltip;
+  }
+
   /** @private */
   loadProgressChanged_() {
     this.loading_ = this.loadProgress < 100;
@@ -64,6 +96,35 @@ class ViewerPdfToolbarNewElement extends PolymerElement {
   onPrintClick_() {
     this.dispatchEvent(new CustomEvent('print'));
   }
+
+  /** @private */
+  onZoomInClick_() {
+    this.dispatchEvent(new CustomEvent('zoom-in'));
+  }
+
+  /** @private */
+  onZoomOutClick_() {
+    this.dispatchEvent(new CustomEvent('zoom-out'));
+  }
+
+  /** @param {!FittingType} fittingType */
+  forceFit(fittingType) {
+    this.fittingType_ = fittingType;
+  }
+
+  fitToggle() {
+    const newState = this.fittingType_ === FittingType.FIT_TO_PAGE ?
+        FittingType.FIT_TO_WIDTH :
+        FittingType.FIT_TO_PAGE;
+    this.dispatchEvent(
+        new CustomEvent('fit-to-changed', {detail: this.fittingType_}));
+    this.fittingType_ = newState;
+  }
+
+  /** @private */
+  onFitToButtonClick_() {
+    this.fitToggle();
+  }
 }
 
 customElements.define(

chrome/browser/resources/pdf/elements/viewer-zoom-toolbar.js

@@ -14,14 +14,6 @@ import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bun
 
 import {FittingType} from '../constants.js';
 
-/**
- * @typedef {{
- *   fittingType: !FittingType,
- *   userInitiated: boolean,
- * }}
- */
-export let FitToChangedEvent;
-
 const FIT_TO_PAGE_BUTTON_STATE = 0;
 const FIT_TO_WIDTH_BUTTON_STATE = 1;
 
@@ -92,8 +84,7 @@ Polymer({
     this.fireFitToChangedEvent_(
         this.$['fit-button'].activeIndex === FIT_TO_WIDTH_BUTTON_STATE ?
             FittingType.FIT_TO_WIDTH :
-            FittingType.FIT_TO_PAGE,
-        true);
+            FittingType.FIT_TO_PAGE);
   },
 
   /** Handle the keyboard shortcut equivalent of fit-button clicks. */
@@ -113,8 +104,6 @@ Polymer({
    * @param {!FittingType} fittingType Page fitting type to force.
    */
   forceFit(fittingType) {
-    this.fireFitToChangedEvent_(fittingType, false);
-
     // Set the button state since there was no mouse click.
     const nextButtonState =
         (fittingType === FittingType.FIT_TO_WIDTH ? FIT_TO_PAGE_BUTTON_STATE :
@@ -125,14 +114,10 @@ Polymer({
   /**
    * Fire a 'fit-to-changed' {CustomEvent} with the given FittingType as detail.
    * @param {!FittingType} fittingType to include as payload.
-   * @param {boolean} userInitiated whether the event was initiated by a user
-   *     action.
    * @private
    */
-  fireFitToChangedEvent_(fittingType, userInitiated) {
-    this.fire(
-        'fit-to-changed',
-        {fittingType: fittingType, userInitiated: userInitiated});
+  fireFitToChangedEvent_(fittingType) {
+    this.fire('fit-to-changed', fittingType);
   },
 
   /** Handle clicks of the zoom-in-button. */

chrome/browser/resources/pdf/pdf_viewer.html

@@ -47,6 +47,8 @@
     pdf-form-save-enabled="[[pdfFormSaveEnabled_]]"
     printing-enabled="[[printingEnabled_]]"
     is-form-field-focused="[[isFormFieldFocused_]]"
+    on-fit-to-changed="onFitToChanged"
+    on-zoom-in="onZoomIn" on-zoom-out="onZoomOut"
     on-print="onPrint_" on-save="onToolbarSave_" hidden>
   </viewer-pdf-toolbar-new>
 </template>

chrome/browser/resources/pdf/pdf_viewer.js

@@ -5,7 +5,7 @@
 import './elements/viewer-error-screen.js';
 import './elements/viewer-password-screen.js';
 import './elements/viewer-pdf-toolbar.js';
-import './elements/viewer-pdf-toolbar-new.js';
+import './elements/viewer-zoom-toolbar.js';
 import './elements/shared-vars.js';
 // <if expr="chromeos">
 import './elements/viewer-ink-host.js';
@@ -21,6 +21,10 @@ import {html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.
 import {Bookmark} from './bookmark_type.js';
 import {BrowserApi} from './browser_api.js';
 import {FittingType, SaveRequestType, TwoUpViewAction} from './constants.js';
+import {ViewerPdfToolbarNewElement} from './elements/viewer-pdf-toolbar-new.js';
+// <if expr="chromeos">
+import {InkController} from './ink_controller.js';
+//</if>
 import {PDFMetrics} from './metrics.js';
 import {NavigatorDelegate, PdfNavigator} from './navigator.js';
 import {OpenPdfParamsParser} from './open_pdf_params_parser.js';
@@ -30,10 +34,6 @@ import {DestinationMessageData, DocumentDimensionsMessageData, shouldIgnoreKeyEv
 import {ToolbarManager} from './toolbar_manager.js';
 import {Point} from './viewport.js';
 
-// <if expr="chromeos">
-import {InkController} from './ink_controller.js';
-// </if>
-
 
 /**
  * @typedef {{
@@ -267,6 +267,15 @@ class PDFViewerElement extends PDFViewerBaseElement {
     return /** @type {!ViewerPdfToolbarElement} */ (this.$$('#toolbar'));
   }
 
+  /**
+   * @return {!ViewerPdfToolbarNewElement}
+   * @private
+   */
+  getToolbarNew_() {
+    assert(this.pdfViewerUpdateEnabled_);
+    return /** @type {!ViewerPdfToolbarNewElement} */ (this.$$('#toolbar'));
+  }
+
   /**
    * @return {!ViewerZoomToolbarElement}
    * @private
@@ -356,7 +365,10 @@ class PDFViewerElement extends PDFViewerBaseElement {
    */
   handleToolbarKeyEvent_(e) {
     if (this.pdfViewerUpdateEnabled_) {
-      // TODO: Add handling for any relevant hotkeys for the new unified
+      if (e.key === '\\' && e.ctrlKey) {
+        this.getToolbarNew_().fitToggle();
+      }
+      // TODO: Add handling for additional relevant hotkeys for the new unified
       // toolbar.
       return;
     }
@@ -515,8 +527,8 @@ class PDFViewerElement extends PDFViewerBaseElement {
       return;
     }
 
-    if (e.detail.fittingType === FittingType.FIT_TO_PAGE ||
-        e.detail.fittingType === FittingType.FIT_TO_HEIGHT) {
+    if (e.detail === FittingType.FIT_TO_PAGE ||
+        e.detail === FittingType.FIT_TO_HEIGHT) {
       this.toolbarManager_.forceHideTopToolbar();
     }
   }
@@ -702,9 +714,14 @@ class PDFViewerElement extends PDFViewerBaseElement {
   /** @override */
   forceFit(view) {
     if (!this.pdfViewerUpdateEnabled_) {
+      if (view === FittingType.FIT_TO_PAGE ||
+          view === FittingType.FIT_TO_HEIGHT) {
+        this.toolbarManager_.forceHideTopToolbar();
+      }
       this.getZoomToolbar_().forceFit(view);
+    } else {
+      this.getToolbarNew_().forceFit(view);
     }
-    // TODO: Add handling for the case where the new toolbar is enabled.
   }
 
   /** @override */

chrome/browser/resources/pdf/pdf_viewer_base.js

@@ -11,7 +11,6 @@ import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/poly
 import {BrowserApi} from './browser_api.js';
 import {FittingType} from './constants.js';
 import {ContentController, MessageData, PluginController} from './controller.js';
-import {FitToChangedEvent} from './elements/viewer-zoom-toolbar.js';
 import {PDFMetrics} from './metrics.js';
 import {OpenPdfParamsParser} from './open_pdf_params_parser.js';
 import {LoadState} from './pdf_scripting_api.js';
@@ -502,6 +501,7 @@ export class PDFViewerBaseElement extends PolymerElement {
 
     if (params.view) {
       this.isUserInitiatedEvent = false;
+      this.updateViewportFit(params.view);
       this.forceFit(params.view);
       if (params.viewPosition) {
         const zoomedPositionShift =
@@ -562,22 +562,27 @@ export class PDFViewerBaseElement extends PolymerElement {
   }
 
   /**
-   * Request to change the viewport fitting type.
-   * @param {!CustomEvent<FitToChangedEvent>} e
+   * @param {!FittingType} fittingType
    * @protected
    */
-  onFitToChanged(e) {
-    if (e.detail.fittingType === FittingType.FIT_TO_PAGE) {
+  updateViewportFit(fittingType) {
+    if (fittingType === FittingType.FIT_TO_PAGE) {
       this.viewport_.fitToPage();
-    } else if (e.detail.fittingType === FittingType.FIT_TO_WIDTH) {
+    } else if (fittingType === FittingType.FIT_TO_WIDTH) {
       this.viewport_.fitToWidth();
-    } else if (e.detail.fittingType === FittingType.FIT_TO_HEIGHT) {
+    } else if (fittingType === FittingType.FIT_TO_HEIGHT) {
       this.viewport_.fitToHeight();
     }
+  }
 
-    if (e.detail.userInitiated) {
-      PDFMetrics.recordFitTo(e.detail.fittingType);
-    }
+  /**
+   * Request to change the viewport fitting type.
+   * @param {!CustomEvent<!FittingType>} e
+   * @protected
+   */
+  onFitToChanged(e) {
+    this.updateViewportFit(e.detail);
+    PDFMetrics.recordFitTo(e.detail);
   }
 
   /** @protected */

chrome/browser/resources/pdf/pdf_viewer_pp.js

@@ -4,6 +4,7 @@
 
 import './elements/viewer-error-screen.js';
 import './elements/viewer-page-indicator.js';
+import './elements/viewer-zoom-toolbar.js';
 import './elements/shared-vars.js';
 import './pdf_viewer_shared_style.js';
 
@@ -239,6 +240,7 @@ class PDFViewerPPElement extends PDFViewerBaseElement {
           this.inPrintPreviewMode_ = true;
           this.isUserInitiatedEvent = false;
           this.forceFit(FittingType.FIT_TO_PAGE);
+          this.updateViewportFit(FittingType.FIT_TO_PAGE);
           this.isUserInitiatedEvent = true;
         }
 

chrome/test/data/pdf/material_elements_test.js

@@ -20,12 +20,10 @@ class FitToEventChecker {
   /**
    * Asserts the last event has the expected payload.
    * @param {FittingType} fittingType Expected fitting type.
-   * @param {boolean} userInitiated Expected "is user initiated" flag.
    */
-  assertEvent(fittingType, userInitiated) {
+  assertEvent(fittingType) {
     chrome.test.assertEq('fit-to-changed', this.lastEvent_.type);
-    chrome.test.assertEq(fittingType, this.lastEvent_.detail.fittingType);
-    chrome.test.assertEq(userInitiated, this.lastEvent_.detail.userInitiated);
+    chrome.test.assertEq(fittingType, this.lastEvent_.detail);
     this.lastEvent_ = null;
   }
 }
@@ -240,27 +238,24 @@ const tests = [
 
     // Test forceFit(FIT_TO_PAGE) from initial state.
     zoomToolbar.forceFit(FittingType.FIT_TO_PAGE);
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_PAGE, false);
     chrome.test.assertTrue(button.ironIcon.endsWith(fitWidthIcon));
 
     // Tap 1: Fire fit-to-changed(FIT_TO_WIDTH).
     button.click();
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_WIDTH, true);
+    fitToEventChecker.assertEvent(FittingType.FIT_TO_WIDTH);
     chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
 
     // Test forceFit(FIT_TO_PAGE) from fit-to-width mode.
     zoomToolbar.forceFit(FittingType.FIT_TO_PAGE);
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_PAGE, false);
     chrome.test.assertTrue(button.ironIcon.endsWith(fitWidthIcon));
 
     // Test forceFit(FIT_TO_PAGE) when already in fit-to-page mode.
     zoomToolbar.forceFit(FittingType.FIT_TO_PAGE);
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_PAGE, false);
     chrome.test.assertTrue(button.ironIcon.endsWith(fitWidthIcon));
 
     // Tap 2: Fire fit-to-changed(FIT_TO_WIDTH).
     button.click();
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_WIDTH, true);
+    fitToEventChecker.assertEvent(FittingType.FIT_TO_WIDTH);
     chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
 
     chrome.test.succeed();
@@ -283,32 +278,29 @@ const tests = [
 
     // Test forceFit(FIT_TO_WIDTH) from initial state.
     zoomToolbar.forceFit(FittingType.FIT_TO_WIDTH);
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_WIDTH, false);
     chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
 
     // Tap 1: Fire fit-to-changed(FIT_TO_PAGE).
     button.click();
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_PAGE, true);
+    fitToEventChecker.assertEvent(FittingType.FIT_TO_PAGE);
     chrome.test.assertTrue(button.ironIcon.endsWith(fitWidthIcon));
 
     // Tap 2: Fire fit-to-changed(FIT_TO_WIDTH).
     button.click();
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_WIDTH, true);
+    fitToEventChecker.assertEvent(FittingType.FIT_TO_WIDTH);
     chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
 
     // Test forceFit(FIT_TO_WIDTH) from fit-to-width state.
     zoomToolbar.forceFit(FittingType.FIT_TO_WIDTH);
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_WIDTH, false);
     chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
 
     // Tap 3: Fire fit-to-changed(FIT_TO_PAGE).
     button.click();
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_PAGE, true);
+    fitToEventChecker.assertEvent(FittingType.FIT_TO_PAGE);
     chrome.test.assertTrue(button.ironIcon.endsWith(fitWidthIcon));
 
     // Test forceFit(FIT_TO_WIDTH) from fit-to-page state.
     zoomToolbar.forceFit(FittingType.FIT_TO_WIDTH);
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_WIDTH, false);
     chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
 
     chrome.test.succeed();