PDF Viewer: Move zoom toolbar to Print Preview only

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

chrome/browser/resources/pdf/BUILD.gn

@@ -67,8 +67,6 @@ preprocess_if_expr("preprocess_generated") {
     "elements/viewer-thumbnail-bar.js",
     "elements/viewer-thumbnail.js",
     "elements/viewer-toolbar-dropdown.js",
-    "elements/viewer-zoom-button.js",
-    "elements/viewer-zoom-toolbar.js",
     "pdf_viewer.js",
     "pdf_viewer_shared_style.js",
   ]
@@ -252,7 +250,6 @@ js_library("navigator") {
 
 js_library("toolbar_manager") {
   deps = [
-    "elements:viewer-pdf-toolbar",
     "elements:viewer-zoom-toolbar",
     "//ui/webui/resources/js:util.m",
   ]
@@ -322,7 +319,6 @@ js_library("pdf_viewer") {
     "elements:viewer-pdf-toolbar",
     "elements:viewer-pdf-toolbar-new",
     "elements:viewer-properties-dialog",
-    "elements:viewer-zoom-toolbar",
     "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:event_tracker.m",
     "//ui/webui/resources/js:load_time_data.m",

chrome/browser/resources/pdf/pdf_viewer.html

@@ -232,13 +232,6 @@
   </viewer-properties-dialog>
 </template>
 
-<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>
 
 <if expr="chromeos">

chrome/browser/resources/pdf/pdf_viewer.js

@@ -6,7 +6,6 @@ import './elements/viewer-error-screen.js';
 import './elements/viewer-password-dialog.js';
 import './elements/viewer-pdf-toolbar.js';
 import './elements/viewer-properties-dialog.js';
-import './elements/viewer-zoom-toolbar.js';
 import './elements/shared-vars.js';
 // <if expr="chromeos">
 import './elements/viewer-ink-host.js';
@@ -377,14 +376,6 @@ export class PDFViewerElement extends PDFViewerBaseElement {
     return /** @type {!ViewerPdfToolbarNewElement} */ (this.$$('#toolbar'));
   }
 
-  /**
-   * @return {!ViewerZoomToolbarElement}
-   * @private
-   */
-  getZoomToolbar_() {
-    return /** @type {!ViewerZoomToolbarElement} */ (this.$$('#zoom-toolbar'));
-  }
-
   /** @override */
   getBackgroundColor() {
     return BACKGROUND_COLOR;
@@ -450,11 +441,6 @@ export class PDFViewerElement extends PDFViewerBaseElement {
           this.getToolbar_().selectPageNumber();
         }
         return;
-      case '\\':
-        if (e.ctrlKey) {
-          this.getZoomToolbar_().fitToggleFromHotKey();
-        }
-        return;
     }
   }
 
@@ -794,11 +780,6 @@ export class PDFViewerElement extends PDFViewerBaseElement {
 
   /** @override */
   updateUIForViewportChange() {
-    if (!this.pdfViewerUpdateEnabled_) {
-      this.getZoomToolbar_().shiftForScrollbars(
-          this.viewport.documentHasScrollbars(), this.viewport.scrollbarWidth);
-    }
-
     // Update toolbar elements.
     this.clockwiseRotations_ = this.viewport.getClockwiseRotations();
     this.pageNo_ = this.viewport.getMostVisiblePage() + 1;

chrome/browser/resources/pdf/pdf_viewer_pp.html

@@ -4,6 +4,18 @@
     visibility: hidden;
     z-index: 2;
   }
+
+  @media(max-height: 200px) {
+    viewer-zoom-toolbar {
+      display: none;
+    }
+  }
+
+  @media(max-width: 300px) {
+    viewer-zoom-toolbar {
+      display: none;
+    }
+  }
 </style>
 
 <div id="sizer"></div>

chrome/browser/resources/pdf/pdf_viewer_shared_style.html

@@ -17,17 +17,5 @@
       position: absolute;
       z-index: 0;
     }
-
-    @media(max-height: 200px) {
-      viewer-zoom-toolbar {
-        display: none;
-      }
-    }
-
-    @media(max-width: 300px) {
-      viewer-zoom-toolbar {
-        display: none;
-      }
-    }
   </style>
 </template>

chrome/test/data/pdf/material_elements_test.js

@@ -2,33 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {FittingType} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/pdf_viewer_wrapper.js';
+import 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/pdf_viewer_wrapper.js';
 import {isChromeOS} from 'chrome://resources/js/cr.m.js';
 import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {createBookmarksForTest} from './test_util.js';
 
-/**
- * Captures 'fit-to-changed' events and verifies the last one has the expected
- * paylod.
- */
-class FitToEventChecker {
-  constructor(zoomToolbar) {
-    this.lastEvent_ = null;
-    zoomToolbar.addEventListener('fit-to-changed', e => this.lastEvent_ = e);
-  }
-
-  /**
-   * Asserts the last event has the expected payload.
-   * @param {FittingType} fittingType Expected fitting type.
-   */
-  assertEvent(fittingType) {
-    chrome.test.assertEq('fit-to-changed', this.lastEvent_.type);
-    chrome.test.assertEq(fittingType, this.lastEvent_.detail);
-    this.lastEvent_ = null;
-  }
-}
-
 /**
  * Standalone unit tests of the PDF Polymer elements.
  */
@@ -140,150 +119,6 @@ const tests = [
 
     chrome.test.succeed();
   },
-
-  /**
-   * Test that the zoom toolbar toggles between showing the fit-to-page and
-   * fit-to-width buttons.
-   */
-  function testZoomToolbarToggle() {
-    document.body.innerHTML = '';
-    const zoomToolbar = /** @type {!ViewerZoomToolbarElement} */ (
-        document.createElement('viewer-zoom-toolbar'));
-    document.body.appendChild(zoomToolbar);
-    const fitButton =
-        /** @type {!ViewerZoomButtonElement} */ (zoomToolbar.$['fit-button']);
-    const button =
-        /** @type {!CrIconButtonElement} */ (fitButton.$$('cr-icon-button'));
-
-    const fitWidthIcon = 'fullscreen';
-    const fitPageIcon = 'fullscreen-exit';
-
-    const fitToEventChecker = new FitToEventChecker(zoomToolbar);
-
-    // Initial: Show fit-to-page.
-    // TODO(tsergeant): This assertion attempts to be resilient to iconset
-    // changes. A better solution is something like
-    // https://github.com/PolymerElements/iron-icon/issues/68.
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
-
-    // Tap 1: Fire fit-to-changed(FIT_TO_PAGE), show fit-to-width.
-    button.click();
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_PAGE);
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitWidthIcon));
-
-    // Tap 2: Fire fit-to-changed(FIT_TO_WIDTH), show fit-to-page.
-    button.click();
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_WIDTH);
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
-
-    // Tap 3: Fire fit-to-changed(FIT_TO_PAGE) again.
-    button.click();
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_PAGE);
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitWidthIcon));
-
-    // Do the same as above, but with fitToggleFromHotKey().
-    zoomToolbar.fitToggleFromHotKey();
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_WIDTH);
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
-    zoomToolbar.fitToggleFromHotKey();
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_PAGE);
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitWidthIcon));
-    zoomToolbar.fitToggleFromHotKey();
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_WIDTH);
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
-
-    // Tap 4: Fire fit-to-changed(FIT_TO_PAGE) again.
-    button.click();
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_PAGE);
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitWidthIcon));
-
-    chrome.test.succeed();
-  },
-
-  function testZoomToolbarForceFitToPage() {
-    document.body.innerHTML = '';
-    const zoomToolbar = document.createElement('viewer-zoom-toolbar');
-    document.body.appendChild(zoomToolbar);
-    const fitButton = zoomToolbar.$['fit-button'];
-    const button = fitButton.$$('cr-icon-button');
-
-    const fitWidthIcon = 'fullscreen';
-    const fitPageIcon = 'fullscreen-exit';
-
-    const fitToEventChecker = new FitToEventChecker(zoomToolbar);
-
-    // Initial: Show fit-to-page.
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
-
-    // Test forceFit(FIT_TO_PAGE) from initial state.
-    zoomToolbar.forceFit(FittingType.FIT_TO_PAGE);
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitWidthIcon));
-
-    // Tap 1: Fire fit-to-changed(FIT_TO_WIDTH).
-    button.click();
-    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);
-    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);
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitWidthIcon));
-
-    // Tap 2: Fire fit-to-changed(FIT_TO_WIDTH).
-    button.click();
-    fitToEventChecker.assertEvent(FittingType.FIT_TO_WIDTH);
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
-
-    chrome.test.succeed();
-  },
-
-  function testZoomToolbarForceFitToWidth() {
-    document.body.innerHTML = '';
-    const zoomToolbar = document.createElement('viewer-zoom-toolbar');
-    document.body.appendChild(zoomToolbar);
-    const fitButton = zoomToolbar.$['fit-button'];
-    const button = fitButton.$$('cr-icon-button');
-
-    const fitWidthIcon = 'fullscreen';
-    const fitPageIcon = 'fullscreen-exit';
-
-    const fitToEventChecker = new FitToEventChecker(zoomToolbar);
-
-    // Initial: Show fit-to-page.
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
-
-    // Test forceFit(FIT_TO_WIDTH) from initial state.
-    zoomToolbar.forceFit(FittingType.FIT_TO_WIDTH);
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
-
-    // Tap 1: Fire fit-to-changed(FIT_TO_PAGE).
-    button.click();
-    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);
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
-
-    // Test forceFit(FIT_TO_WIDTH) from fit-to-width state.
-    zoomToolbar.forceFit(FittingType.FIT_TO_WIDTH);
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
-
-    // Tap 3: Fire fit-to-changed(FIT_TO_PAGE).
-    button.click();
-    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);
-    chrome.test.assertTrue(button.ironIcon.endsWith(fitPageIcon));
-
-    chrome.test.succeed();
-  },
 ];
 
 if (isChromeOS) {

chrome/test/data/webui/print_preview/BUILD.gn

@@ -67,6 +67,7 @@ js_type_check("closure_compile") {
     #":pages_settings_test",
     #":pdf_toolbar_manager_test",
     #":pdf_viewer_test",
+    #":pdf_zoom_toolbar_test",
     #":pin_settings_test",
     ":test_plugin_proxy",
 

chrome/test/data/webui/print_preview/pdf_zoom_toolbar_test.js

+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'chrome://print/pdf/elements/viewer-zoom-toolbar.js';
+import {FittingType} from 'chrome://print/pdf/constants.js';
+import {assert} from 'chrome://resources/js/assert.m.js';
+
+import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
+import {eventToPromise} from '../test_util.m.js';
+
+window.pdf_zoom_toolbar_test = {};
+pdf_zoom_toolbar_test.suiteName = 'PdfToolbarManagerTest';
+/** @enum {string} */
+pdf_zoom_toolbar_test.TestNames = {
+  Toggle: 'toggle',
+  ForceFitToPage: 'force fit to page',
+};
+
+suite(pdf_zoom_toolbar_test.suiteName, function() {
+  /** @type {!ViewerZoomToolbarElement} */
+  let zoomToolbar;
+
+  /** @type {!ViewerZoomButtonElement} */
+  let fitButton;
+
+  /** @type {!CrIconButtonElement} */
+  let button;
+
+  const fitWidthIcon = 'fullscreen';
+  const fitPageIcon = 'fullscreen-exit';
+
+  setup(function() {
+    document.body.innerHTML = '';
+
+    zoomToolbar = /** @type {!ViewerZoomToolbarElement} */ (
+        document.createElement('viewer-zoom-toolbar'));
+    document.body.appendChild(zoomToolbar);
+
+    fitButton =
+        /** @type {!ViewerZoomButtonElement} */ (zoomToolbar.$['fit-button']);
+    button =
+        /** @type {!CrIconButtonElement} */ (fitButton.$$('cr-icon-button'));
+  });
+
+  /**
+   * Test that the zoom toolbar toggles between showing the fit-to-page and
+   * fit-to-width buttons.
+   */
+  test(assert(pdf_zoom_toolbar_test.TestNames.Toggle), async () => {
+    // Initial: Show fit-to-page.
+    assertTrue(button.ironIcon.endsWith(fitPageIcon));
+
+    // Tap 1: Fire fit-to-changed(FIT_TO_PAGE), show fit-to-width.
+    let fitToChanged = eventToPromise('fit-to-changed', zoomToolbar);
+    button.click();
+    let result = await fitToChanged;
+    assertEquals(FittingType.FIT_TO_PAGE, result.detail);
+    assertTrue(button.ironIcon.endsWith(fitWidthIcon));
+
+    // Tap 2: Fire fit-to-changed(FIT_TO_WIDTH), show fit-to-page.
+    fitToChanged = eventToPromise('fit-to-changed', zoomToolbar);
+    button.click();
+    result = await fitToChanged;
+    assertEquals(FittingType.FIT_TO_WIDTH, result.detail);
+    assertTrue(button.ironIcon.endsWith(fitPageIcon));
+
+    // Tap 3: Fire fit-to-changed(FIT_TO_PAGE) again.
+    fitToChanged = eventToPromise('fit-to-changed', zoomToolbar);
+    button.click();
+    result = await fitToChanged;
+    assertEquals(FittingType.FIT_TO_PAGE, result.detail);
+    assertTrue(button.ironIcon.endsWith(fitWidthIcon));
+
+    // Do the same as above, but with fitToggleFromHotKey().
+    fitToChanged = eventToPromise('fit-to-changed', zoomToolbar);
+    zoomToolbar.fitToggleFromHotKey();
+    result = await fitToChanged;
+    assertEquals(FittingType.FIT_TO_WIDTH, result.detail);
+    assertTrue(button.ironIcon.endsWith(fitPageIcon));
+
+    fitToChanged = eventToPromise('fit-to-changed', zoomToolbar);
+    zoomToolbar.fitToggleFromHotKey();
+    result = await fitToChanged;
+    assertEquals(FittingType.FIT_TO_PAGE, result.detail);
+    assertTrue(button.ironIcon.endsWith(fitWidthIcon));
+
+    fitToChanged = eventToPromise('fit-to-changed', zoomToolbar);
+    zoomToolbar.fitToggleFromHotKey();
+    result = await fitToChanged;
+    assertEquals(FittingType.FIT_TO_WIDTH, result.detail);
+    assertTrue(button.ironIcon.endsWith(fitPageIcon));
+
+    // Tap 4: Fire fit-to-changed(FIT_TO_PAGE) again.
+    fitToChanged = eventToPromise('fit-to-changed', zoomToolbar);
+    button.click();
+    result = await fitToChanged;
+    assertEquals(FittingType.FIT_TO_PAGE, result.detail);
+    assertTrue(button.ironIcon.endsWith(fitWidthIcon));
+  });
+
+  test(assert(pdf_zoom_toolbar_test.TestNames.ForceFitToPage), async () => {
+    // Initial: Show fit-to-page.
+    assertTrue(button.ironIcon.endsWith(fitPageIcon));
+
+    // Test forceFit(FIT_TO_PAGE) from initial state.
+    zoomToolbar.forceFit(FittingType.FIT_TO_PAGE);
+    assertTrue(button.ironIcon.endsWith(fitWidthIcon));
+
+    // Tap 1: Fire fit-to-changed(FIT_TO_WIDTH).
+    let fitToChanged = eventToPromise('fit-to-changed', zoomToolbar);
+    button.click();
+    let result = await fitToChanged;
+    assertEquals(FittingType.FIT_TO_WIDTH, result.detail);
+    assertTrue(button.ironIcon.endsWith(fitPageIcon));
+
+    // Test forceFit(FIT_TO_PAGE) from fit-to-width mode.
+    zoomToolbar.forceFit(FittingType.FIT_TO_PAGE);
+    assertTrue(button.ironIcon.endsWith(fitWidthIcon));
+
+    // Test forceFit(FIT_TO_PAGE) when already in fit-to-page mode.
+    zoomToolbar.forceFit(FittingType.FIT_TO_PAGE);
+    assertTrue(button.ironIcon.endsWith(fitWidthIcon));
+
+    // Tap 2: Fire fit-to-changed(FIT_TO_WIDTH).
+    fitToChanged = eventToPromise('fit-to-changed', zoomToolbar);
+    button.click();
+    result = await fitToChanged;
+    assertEquals(FittingType.FIT_TO_WIDTH, result.detail);
+    assertTrue(button.ironIcon.endsWith(fitPageIcon));
+  });
+});

chrome/test/data/webui/print_preview/print_preview_ui_browsertest.js

@@ -169,6 +169,27 @@ TEST_F('PrintPreviewPdfViewerTest', 'PageIndicator', function() {
   this.runMochaTest(pdf_viewer_test.TestNames.PageIndicator);
 });
 
+// eslint-disable-next-line no-var
+var PrintPreviewPdfZoomToolbarTest = class extends PrintPreviewTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://print/test_loader.html?module=print_preview/pdf_zoom_toolbar_test.js';
+  }
+
+  /** @override */
+  get suiteName() {
+    return pdf_zoom_toolbar_test.suiteName;
+  }
+};
+
+TEST_F('PrintPreviewPdfZoomToolbarTest', 'Toggle', function() {
+  this.runMochaTest(pdf_zoom_toolbar_test.TestNames.Toggle);
+});
+
+TEST_F('PrintPreviewPdfZoomToolbarTest', 'ForceFitToPage', function() {
+  this.runMochaTest(pdf_zoom_toolbar_test.TestNames.ForceFitToPage);
+});
+
 // eslint-disable-next-line no-var
 var PrintPreviewPolicyTest = class extends PrintPreviewTest {
   /** @override */