PDF Viewer: Make zoom field respond to input

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

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

@@ -124,7 +124,9 @@
       <cr-icon-button iron-icon="pdf:remove" title="$i18n{tooltipZoomOut}"
           on-click="onZoomOutClick_">
       </cr-icon-button>
-      <input type="text" value="100%"></input>
+      <input type="text" value="100%" on-input="onZoomInput_"
+          on-blur="onZoomInputBlur_">
+      </input>
       <cr-icon-button iron-icon="pdf:add" title="$i18n{tooltipZoomIn}"
           on-click="onZoomInClick_">
       </cr-icon-button>

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

@@ -98,6 +98,9 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
 
     /** @private {boolean} */
     this.loading_ = true;
+
+    /** @private {?number} */
+    this.zoomTimeout_ = null;
   }
 
   /**
@@ -128,7 +131,7 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
   /** @private */
   viewportZoomChanged_() {
     const zoom = Math.round(this.viewportZoom * 100);
-    this.shadowRoot.querySelector('#zoom-controls input').value = `${zoom}%`;
+    this.getZoomInput_().value = `${zoom}%`;
   }
 
   // <if expr="chromeos">
@@ -184,6 +187,52 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
     this.fitToggle();
   }
 
+  /**
+   * @return {!HTMLInputElement}
+   * @private
+   */
+  getZoomInput_() {
+    return /** @type {!HTMLInputElement} */ (
+        this.shadowRoot.querySelector('#zoom-controls input'));
+  }
+
+  /** @private */
+  onZoomInput_() {
+    if (this.zoomTimeout_) {
+      clearTimeout(this.zoomTimeout_);
+    }
+    this.zoomTimeout_ = setTimeout(() => this.sendZoomChanged_(), 250);
+  }
+
+  /**
+   * @return {boolean} Whether the zoom-changed event was sent.
+   * @private
+   */
+  sendZoomChanged_() {
+    this.zoomTimeout_ = null;
+    const value = Number.parseInt(this.getZoomInput_().value, 10);
+    if (Number.isNaN(value)) {
+      return false;
+    }
+    this.dispatchEvent(new CustomEvent('zoom-changed', {detail: value}));
+    return true;
+  }
+
+  /** @private */
+  onZoomInputBlur_() {
+    if (this.zoomTimeout_) {
+      clearTimeout(this.zoomTimeout_);
+    }
+
+    if (this.sendZoomChanged_()) {
+      return;
+    }
+
+    const zoom = Math.round(this.viewportZoom * 100);
+    const zoomString = `${zoom}%`;
+    this.getZoomInput_().value = zoomString;
+  }
+
   /** @private */
   onMoreClick_() {
     const menu = this.shadowRoot.querySelector('cr-action-menu');

chrome/browser/resources/pdf/pdf_viewer.html

@@ -62,6 +62,7 @@
     on-change-page="onChangePage_"
     on-dropdown-opened="onDropdownOpened_"
     on-fit-to-changed="onFitToChanged" on-zoom-in="onZoomIn"
+    on-zoom-changed="onZoomChanged"
     on-zoom-out="onZoomOut" on-rotate-left="rotateCounterclockwise"
 <if expr="chromeos">
     on-annotation-mode-toggled="onAnnotationModeToggled_"

chrome/browser/resources/pdf/pdf_viewer_base.js

@@ -604,6 +604,14 @@ export class PDFViewerBaseElement extends PolymerElement {
     PDFMetrics.recordZoomAction(/*isZoomIn=*/ true);
   }
 
+  /**
+   * @param {!CustomEvent<number>} e
+   * @protected
+   */
+  onZoomChanged(e) {
+    this.viewport_.setZoom(e.detail / 100);
+  }
+
   /** @protected */
   onZoomOut() {
     this.viewport_.zoomOut();

chrome/test/data/pdf/viewer_pdf_toolbar_new_test.js

@@ -125,6 +125,27 @@ const tests = [
     toolbar.addEventListener('rotate-left', e => chrome.test.succeed());
     rotateButton.click();
   },
+
+  function testZoomField() {
+    const toolbar = createToolbar();
+    toolbar.viewportZoom = .8;
+    const zoomField = toolbar.shadowRoot.querySelector('#zoom-controls input');
+    chrome.test.assertEq('80%', zoomField.value);
+
+    // Value is set based on viewport zoom.
+    toolbar.viewportZoom = .533;
+    chrome.test.assertEq('53%', zoomField.value);
+
+    // Setting a new value sends the value in a zoom-changed event.
+    let sentValue = -1;
+    toolbar.addEventListener('zoom-changed', e => {
+      sentValue = e.detail;
+      chrome.test.assertEq(110, sentValue);
+      chrome.test.succeed();
+    });
+    zoomField.value = '110%';
+    zoomField.dispatchEvent(new CustomEvent('input'));
+  }
 ];
 
 chrome.test.runTests(tests);