PDF Viewer Update: Disable zoom buttons when at limits

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

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

@@ -186,6 +186,7 @@
     </viewer-page-selector>
     <span id="zoom-controls">
       <cr-icon-button iron-icon="pdf:remove" title="$i18n{tooltipZoomOut}"
+          disabled="[[isAtMinimumZoom_(zoomBounds.min, viewportZoomPercent_)]]"
           aria-label="$i18n{tooltipZoomOut}" on-click="onZoomOutClick_">
       </cr-icon-button>
       <input type="text" value="100%"
@@ -194,6 +195,7 @@
           on-blur="onZoomChange_">
       </input>
       <cr-icon-button iron-icon="pdf:add" title="$i18n{tooltipZoomIn}"
+          disabled="[[isAtMaximumZoom_(zoomBounds.max, viewportZoomPercent_)]]"
           aria-label="$i18n{tooltipZoomIn}" on-click="onZoomInClick_">
       </cr-icon-button>
     </span>

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

@@ -72,10 +72,7 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
       pdfFormSaveEnabled: Boolean,
       printingEnabled: Boolean,
       rotated: Boolean,
-      viewportZoom: {
-        type: Number,
-        observer: 'viewportZoomChanged_',
-      },
+      viewportZoom: Number,
       /** @type {!{min: number, max: number}} */
       zoomBounds: Object,
 
@@ -95,6 +92,13 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
         computed: 'computeFitToButtonIcon_(fittingType_)',
       },
 
+      /** @private */
+      viewportZoomPercent_: {
+        type: Number,
+        computed: 'computeViewportZoomPercent_(viewportZoom)',
+        observer: 'viewportZoomPercentChanged_',
+      },
+
       // <if expr="chromeos">
       /** @private */
       showAnnotationsModeDialog_: {
@@ -155,6 +159,14 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
                                                            'pdf:fit-to-width';
   }
 
+  /**
+   * @return {number}
+   * @private
+   */
+  computeViewportZoomPercent_() {
+    return Math.round(100 * this.viewportZoom);
+  }
+
   /**
    * @param {string} fitToPageTooltip
    * @param {string} fitToWidthTooltip
@@ -172,9 +184,8 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
   }
 
   /** @private */
-  viewportZoomChanged_() {
-    const zoom = Math.round(this.viewportZoom * 100);
-    this.getZoomInput_().value = `${zoom}%`;
+  viewportZoomPercentChanged_() {
+    this.getZoomInput_().value = `${this.viewportZoomPercent_}%`;
   }
 
   // <if expr="chromeos">
@@ -300,8 +311,7 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
       return;
     }
 
-    const zoom = Math.round(this.viewportZoom * 100);
-    const zoomString = `${zoom}%`;
+    const zoomString = `${this.viewportZoomPercent_}%`;
     input.value = zoomString;
   }
 
@@ -351,6 +361,24 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
     this.moreMenuOpen_ = e.detail.value;
   }
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  isAtMinimumZoom_() {
+    return this.zoomBounds !== undefined &&
+        this.viewportZoomPercent_ === this.zoomBounds.min;
+  }
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  isAtMaximumZoom_() {
+    return this.zoomBounds !== undefined &&
+        this.viewportZoomPercent_ === this.zoomBounds.max;
+  }
+
   // <if expr="chromeos">
   /** @private */
   onDialogClose_() {

chrome/test/data/pdf/viewer_pdf_toolbar_new_test.js

@@ -105,6 +105,8 @@ const tests = [
 
   function testZoomButtons() {
     const toolbar = createToolbar();
+    toolbar.zoomBounds = {min: 25, max: 500};
+    toolbar.viewportZoom = 1;
 
     let zoomInCount = 0;
     let zoomOutCount = 0;
@@ -112,6 +114,8 @@ const tests = [
     toolbar.addEventListener('zoom-out', () => zoomOutCount++);
 
     const zoomButtons = getCrIconButtons(toolbar, 'zoom-controls');
+    chrome.test.assertFalse(zoomButtons[0].disabled);
+    chrome.test.assertFalse(zoomButtons[1].disabled);
 
     // Zoom out
     chrome.test.assertEq('pdf:remove', zoomButtons[0].ironIcon);
@@ -119,12 +123,23 @@ const tests = [
     chrome.test.assertEq(0, zoomInCount);
     chrome.test.assertEq(1, zoomOutCount);
 
+    // Set zoom to min. Zoom out is disabled.
+    toolbar.viewportZoom = .25;
+    chrome.test.assertTrue(zoomButtons[0].disabled);
+    chrome.test.assertFalse(zoomButtons[1].disabled);
+
     // Zoom in
     chrome.test.assertEq('pdf:add', zoomButtons[1].ironIcon);
     zoomButtons[1].click();
     chrome.test.assertEq(1, zoomInCount);
     chrome.test.assertEq(1, zoomOutCount);
 
+    // Set zoom to max. Zoom in is disabled.
+    toolbar.zoomBounds = {min: 25, max: 500};
+    toolbar.viewportZoom = 5;
+    chrome.test.assertFalse(zoomButtons[0].disabled);
+    chrome.test.assertTrue(zoomButtons[1].disabled);
+
     chrome.test.succeed();
   },