PDF Viewer: Add option to view document in full screen mode.

Bug: 1144866
Change-Id: I9607f191e309b2ce5f57f475157c17df778445f6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2512902
Commit-Queue: dpapad <dpapad@chromium.org>
Reviewed-by: Daniel Hosseinian <dhoss@chromium.org>
Cr-Commit-Position: refs/heads/master@{#824171}

chrome/browser/pdf/pdf_extension_test.cc

@@ -911,6 +911,12 @@ IN_PROC_BROWSER_TEST_F(PDFExtensionJSUpdatesEnabledTest, ViewerThumbnail) {
   RunTestsInJsModule("viewer_thumbnail_test.js", "test.pdf");
 }
 
+IN_PROC_BROWSER_TEST_F(PDFExtensionJSUpdatesEnabledTest, Fullscreen) {
+  // Although this test file does not require a PDF to be loaded, loading the
+  // elements without loading a PDF is difficult.
+  RunTestsInJsModule("fullscreen_test.js", "test.pdf");
+}
+
 class PDFExtensionJSTest : public PDFExtensionJSTestBase,
                            public testing::WithParamInterface<bool> {
  public:

chrome/browser/pdf/pdf_extension_util.cc

@@ -56,6 +56,7 @@ void AddPdfViewerStrings(base::Value* dict) {
     {"bookmarkExpandIconAriaLabel", IDS_PDF_BOOKMARK_EXPAND_ICON_ARIA_LABEL},
     {"downloadEdited", IDS_PDF_DOWNLOAD_EDITED},
     {"downloadOriginal", IDS_PDF_DOWNLOAD_ORIGINAL},
+    {"fullscreen", IDS_PDF_FULLSCREEN},
     {"labelPageNumber", IDS_PDF_LABEL_PAGE_NUMBER},
     {"menu", IDS_MENU},
     {"moreActions", IDS_DOWNLOAD_MORE_ACTIONS},

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

@@ -168,6 +168,11 @@
     margin-inline-end: 12px;
     width: 16px;
   }
+
+  cr-action-menu hr {
+    border: none;
+    border-top: var(--cr-separator-line);
+  }
 </style>
 <div id="toolbar">
   <div id="start">
@@ -266,6 +271,13 @@
     </span>
     $i18n{annotationsShowToggle}
   </button>
+
+  <hr>
+  <button id="fullscreen-button" class="dropdown-item"
+      on-click="onFullscreenClick_">
+    <span class="check-container" aria-hidden="true"></span>
+    $i18n{fullscreen}
+  </button>
 </cr-action-menu>
 
 <if expr="chromeos">

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

@@ -223,6 +223,12 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
     // </if>
   }
 
+  /** @private */
+  onFullscreenClick_() {
+    this.getMenu_().close();
+    this.dispatchEvent(new CustomEvent('fullscreen-click'));
+  }
+
   /**
    * @param {boolean} checked
    * @return {string}

chrome/browser/resources/pdf/pdf_viewer.html

@@ -171,6 +171,7 @@
     on-display-annotations-changed="onDisplayAnnotationsChanged_"
     on-dropdown-opened="onDropdownOpened_"
     on-fit-to-changed="onFitToChanged"
+    on-fullscreen-click="onFullscreenClick_"
     on-annotation-mode-dialog-confirmed="onResetView_"
     on-sidenav-toggle-click="onSidenavToggleClick_"
     on-two-up-view-changed="onTwoUpViewChanged_"

chrome/browser/resources/pdf/pdf_viewer.js

@@ -678,6 +678,11 @@ export class PDFViewerElement extends PDFViewerBaseElement {
     }
   }
 
+  /** @private */
+  onFullscreenClick_() {
+    this.shadowRoot.querySelector('#main').requestFullscreen();
+  }
+
   /**
    * Changes two up view mode for the controller. Controller will trigger
    * layout update later, which will update the viewport accordingly.

chrome/test/data/pdf/BUILD.gn

@@ -19,6 +19,7 @@ js_type_check("closure_compile") {
     ":beep_test",
     ":bookmarks_test",
     ":download_controls_test",
+    ":fullscreen_test",
     ":gesture_detector_test",
     ":layout_test",
     ":material_elements_test",
@@ -127,6 +128,14 @@ js_library("download_controls_test") {
   externs_list = [ "$externs_path/test.js" ]
 }
 
+js_library("fullscreen_test") {
+  deps = [
+    "../webui:test_util.m",
+    "//chrome/browser/resources/pdf:pdf_viewer",
+  ]
+  externs_list = [ "$externs_path/test.js" ]
+}
+
 js_library("navigator_test") {
   deps = [
     ":test_util",

chrome/test/data/pdf/fullscreen_test.js

+// Copyright 2020 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 {eventToPromise} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/_test_resources/webui/test_util.m.js';
+import {PDFViewerElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/pdf_viewer.js';
+
+const tests = [
+  function testFullscreen() {
+    const viewer = /** @type {!PDFViewerElement} */ (
+        document.body.querySelector('pdf-viewer'));
+    const toolbar = viewer.shadowRoot.querySelector('viewer-pdf-toolbar-new');
+    toolbar.dispatchEvent(new CustomEvent('fullscreen-click'));
+    eventToPromise('fullscreenchange', viewer).then(e => {
+      chrome.test.assertEq(
+          viewer.shadowRoot.querySelector('#main'), e.composedPath()[0]);
+      chrome.test.succeed();
+    });
+  },
+];
+
+chrome.test.runTests(tests);

chrome/test/data/pdf/viewer_pdf_toolbar_new_test.js

@@ -297,6 +297,14 @@ const tests = [
         'sidenav-toggle-click', () => chrome.test.succeed());
     toggleButton.click();
   },
+
+  function testEnterFullscreenButton() {
+    const toolbar = createToolbar();
+    const button = toolbar.shadowRoot.querySelector('#fullscreen-button');
+    const whenFired = eventToPromise('fullscreen-click', toolbar);
+    button.click();
+    whenFired.then(() => chrome.test.succeed());
+  },
 ];
 
 chrome.test.runTests(tests);

components/pdf_strings.grdp

@@ -7,6 +7,9 @@
     <message name="IDS_PDF_DOWNLOAD_EDITED" desc="The label for the menu option to download the edited PDF document (with user's changes).">
       With your changes
     </message>
+    <message name="IDS_PDF_FULLSCREEN" desc="The label for the menu option to switch to fullscreen mode.">
+      Full screen
+    </message>
     <message name="IDS_PDF_NEED_PASSWORD" desc="A message asking the user for a password to open a PDF file.">
       This document is password protected.  Please enter a password.
     </message>

components/pdf_strings_grdp/IDS_PDF_FULLSCREEN.png.sha1

+63b8c9b6924406cdbc617e3209fbade2e54b1fe3
\ No newline at end of file