feat(viewer): Upgrade pdf.js to latest for modern browsers (#1441)

* feat(viewer): Upgrade pdf.js to 2.11.338 for modern browsers

* feat(viewer): Upgrade pdf.js to v2.14.305 for modern browsers

* feat(viewer): Revert to google compiler and legacy build

* feat(viewer): Update e2e tests

* feat(viewer): Fix find next and previous buttons

Co-authored-by: Karen Lee <[email protected]>
Co-authored-by: karelee7 <[email protected]>

babel.config.js

@@ -29,19 +29,6 @@ module.exports = api => {
                     ],
                 ],
             },
-            {
-                test: ['./src/third-party/doc/**'],
-                plugins: ['@babel/plugin-proposal-private-methods'],
-                presets: [
-                    [
-                        '@babel/preset-env',
-                        {
-                            exclude: ['@babel/plugin-transform-unicode-regex'],
-                            include: ['@babel/plugin-proposal-unicode-property-regex'],
-                        },
-                    ],
-                ],
-            },
         ],
         env: {
             test: {

build/upgrade_pdfjs.sh

@@ -1,6 +1,7 @@
 #!/bin/bash
 # Run with specific branch/tag (e.g. ./upgrade_pdfjs.sh tags/v2.2.228) or with no arguments to use master
 
+DOC_COMPILER_BINARY="build/closure-compiler-v20200719.jar"
 DOC_STATIC_ASSETS_BRANCH=${1:-master}
 DOC_STATIC_ASSETS_VERSION=$(./build/current_version.sh)
 DOC_STATIC_ASSETS_PATH="src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}"
@@ -29,12 +30,12 @@ git clone https://github.com/mozilla/pdfjs-dist.git --depth 1 --single-branch --
 echo "-----------------------------------------------------------------------------------"
 echo "Copying relevant files to third-party directory..."
 echo "-----------------------------------------------------------------------------------"
-\cp -rf pdfjs-dist/build/pdf.js ${DOC_STATIC_ASSETS_PATH}
-\cp -rf pdfjs-dist/build/pdf.min.js ${DOC_STATIC_ASSETS_PATH}
-\cp -rf pdfjs-dist/build/pdf.worker.js ${DOC_STATIC_ASSETS_PATH}
-\cp -rf pdfjs-dist/build/pdf.worker.min.js ${DOC_STATIC_ASSETS_PATH}
-\cp -rf pdfjs-dist/web/pdf_viewer.css ${DOC_STATIC_ASSETS_PATH}
-\cp -rf pdfjs-dist/web/pdf_viewer.js ${DOC_STATIC_ASSETS_PATH}
+\cp -rf pdfjs-dist/legacy/build/pdf.js ${DOC_STATIC_ASSETS_PATH}
+\cp -rf pdfjs-dist/legacy/build/pdf.min.js ${DOC_STATIC_ASSETS_PATH}
+\cp -rf pdfjs-dist/legacy/build/pdf.worker.js ${DOC_STATIC_ASSETS_PATH}
+\cp -rf pdfjs-dist/legacy/build/pdf.worker.min.js ${DOC_STATIC_ASSETS_PATH}
+\cp -rf pdfjs-dist/legacy/web/pdf_viewer.css ${DOC_STATIC_ASSETS_PATH}
+\cp -rf pdfjs-dist/legacy/web/pdf_viewer.js ${DOC_STATIC_ASSETS_PATH}
 \cp -rf pdfjs-dist/cmaps ${DOC_STATIC_ASSETS_PATH}/cmaps
 rm -rf ./pdfjs-dist/
 
@@ -50,16 +51,13 @@ echo "Enabling e-signature rendering without validation..."
 echo "-----------------------------------------------------------------------------------"
 sed -e 's@;r.setFlags(o.AnnotationFlag.HIDDEN)@@' -i '' ${DOC_STATIC_ASSETS_PATH}/pdf.worker.min.js
 
-# Fix for Courier font PDF not rendering applied to src/third-party/doc/2.76.0/pdf.worker*.js which is PDFJS v2.2.228
-# Link to issue: https://github.com/mozilla/pdf.js/issues/13771
-# This fix may not need to be applied if next upgrade is >= 2.5.x
-# See https://github.com/box/box-content-preview/pull/1414 for more details
-
-# Minify using Babel
+# Minify using Google Closure Compiler, options:
+# Output to ES5 (Box supports Chrome, Edge, IE11, Firefox, Safari, and newer versions of iOS, Android)
+# Do not minify pdf.js or pdf.worker.js, as the closure compiler will mangle function names and cause bugs
 echo "-----------------------------------------------------------------------------------"
-echo "Minifying pdf.js files with Babel"
+echo "Minifying pdf.js files with Google Closure... Warnings are okay!"
 echo "-----------------------------------------------------------------------------------"
-babel ${DOC_STATIC_ASSETS_PATH}/pdf_viewer.js --out-file ${DOC_STATIC_ASSETS_PATH}/pdf_viewer.min.js
+java -jar ${DOC_COMPILER_BINARY} --rewrite_polyfills false --language_out ECMASCRIPT5 --js ${DOC_STATIC_ASSETS_PATH}/pdf_viewer.js --js_output_file ${DOC_STATIC_ASSETS_PATH}/pdf_viewer.min.js
 
 echo "-----------------------------------------------------------------------------------"
 echo "Minifying pdf.js CSS with cssnano"

package.json

@@ -9,10 +9,8 @@
         "url": "[email protected]:box/box-content-preview.git"
     },
     "devDependencies": {
-        "@babel/cli": "^7.18.6",
         "@babel/core": "^7.18.6",
         "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-private-methods": "^7.18.6",
         "@babel/plugin-transform-object-assign": "^7.18.6",
         "@babel/preset-env": "^7.18.6",
         "@babel/preset-react": "^7.18.6",

src/lib/constants.js

@@ -101,7 +101,8 @@ export const PDFJS_MAX_AUTO_SCALE = 1.25; // Should match MAX_AUTO_SCALE in pdf_
 export const PDFJS_WIDTH_PADDING_PX = 40; // Should match SCROLLBAR_PADDING in pdf_viewer.js
 export const PDFJS_HEIGHT_PADDING_PX = 5; // Should match VERTICAL_PADDING in pdf_viewer.js
 
-export const DOC_STATIC_ASSETS_VERSION = '2.76.0';
+export const DOC_LEGACY_STATIC_ASSETS_VERSION = '2.76.0'; // IE11 only
+export const DOC_STATIC_ASSETS_VERSION = '2.84.0'; // Modern browsers
 export const MEDIA_STATIC_ASSETS_VERSION = '2.66.0';
 export const MODEL3D_STATIC_ASSETS_VERSION = '1.12.0';
 export const SWF_STATIC_ASSETS_VERSION = '0.112.0';

src/lib/viewers/doc/DocBaseViewer.js

@@ -22,7 +22,6 @@ import {
     CLASS_HIDDEN,
     CLASS_IS_SCROLLABLE,
     DISCOVERABILITY_ATTRIBUTE,
-    DOC_STATIC_ASSETS_VERSION,
     DOCUMENT_FTUX_CURSOR_SEEN_KEY,
     ENCODING_TYPES,
     PERMISSION_DOWNLOAD,
@@ -40,7 +39,7 @@ import {
 } from '../../util';
 import { checkPermission, getRepresentation } from '../../file';
 import { ICON_PRINT_CHECKMARK } from '../../icons';
-import { JS, PRELOAD_JS, CSS } from './docAssets';
+import { CMAP, CSS, IMAGES, JS, PRELOAD_JS, WORKER } from './docAssets';
 import {
     ERROR_CODE,
     LOAD_METRIC,
@@ -665,7 +664,7 @@ class DocBaseViewer extends BaseViewer {
         this.pdfLinkService = new this.pdfjsViewer.PDFLinkService({
             eventBus: this.pdfEventBus,
             externalLinkRel: 'noopener noreferrer nofollow', // Prevent referrer hijacking
-            externalLinkTarget: this.pdfjsLib.LinkTarget.BLANK, // Open links in new tab
+            externalLinkTarget: Browser.isIE() ? this.pdfjsLib.LinkTarget.BLANK : this.pdfjsViewer.LinkTarget.BLANK, // Open links in new tab
         });
 
         this.pdfFindController = new this.pdfjsViewer.PDFFindController({
@@ -711,7 +710,7 @@ class DocBaseViewer extends BaseViewer {
         // Load PDF from representation URL and set as document for pdf.js. Cache task for destruction
         this.pdfLoadingTask = this.pdfjsLib.getDocument({
             cMapPacked: true,
-            cMapUrl: assetUrlCreator(`third-party/doc/${DOC_STATIC_ASSETS_VERSION}/cmaps/`),
+            cMapUrl: assetUrlCreator(CMAP),
             disableCreateObjectURL,
             disableFontFace,
             disableRange,
@@ -770,16 +769,18 @@ class DocBaseViewer extends BaseViewer {
      */
     initPdfViewerClass(PdfViewerClass) {
         const { file, location } = this.options;
+        const { AnnotationMode: PDFAnnotationMode = {} } = this.pdfjsLib;
         const assetUrlCreator = createAssetUrlCreator(location);
         const hasDownload = checkPermission(file, PERMISSION_DOWNLOAD);
         const hasTextLayer = hasDownload && !this.getViewerOption('disableTextLayer');
         const textLayerMode = this.isMobile ? PDFJS_TEXT_LAYER_MODE.ENABLE : PDFJS_TEXT_LAYER_MODE.ENABLE_ENHANCE;
 
         return new PdfViewerClass({
+            annotationMode: PDFAnnotationMode.ENABLE, // Show annotations, but not forms
             container: this.docEl,
             eventBus: this.pdfEventBus,
             findController: this.pdfFindController,
-            imageResourcesPath: assetUrlCreator(`third-party/doc/${DOC_STATIC_ASSETS_VERSION}/images/`),
+            imageResourcesPath: assetUrlCreator(IMAGES),
             linkService: this.pdfLinkService,
             maxCanvasPixels: this.isMobile ? MOBILE_MAX_CANVAS_SIZE : -1,
             renderInteractiveForms: false, // Enabling prevents unverified signatures from being displayed
@@ -912,9 +913,8 @@ class DocBaseViewer extends BaseViewer {
         // Set pdf.js worker source location
         const { location } = this.options;
         const assetUrlCreator = createAssetUrlCreator(location);
-        const workerSrc = assetUrlCreator(`third-party/doc/${DOC_STATIC_ASSETS_VERSION}/pdf.worker.min.js`);
 
-        this.pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
+        this.pdfjsLib.GlobalWorkerOptions.workerSrc = assetUrlCreator(WORKER);
     }
 
     /**

src/lib/viewers/doc/DocFindBar.js

@@ -1,4 +1,5 @@
 import EventEmitter from 'events';
+import Browser from '../../Browser';
 import { decodeKeydown } from '../../util';
 import { USER_DOCUMENT_FIND_EVENTS, VIEWER_EVENT } from '../../events';
 import { CLASS_BOX_PREVIEW_FIND_BAR, CLASS_HIDDEN } from '../../constants';
@@ -137,12 +138,15 @@ class DocFindBar extends EventEmitter {
      * @return {void}
      */
     dispatchFindEvent(type, findPrev) {
-        this.findController.executeCommand(type, {
+        const options = {
             query: this.findFieldEl.value,
             phraseSearch: true, // true by default
             highlightAll: true, // true by default
             findPrevious: findPrev,
-        });
+        };
+        return Browser.isIE()
+            ? this.findController.executeCommand(type, options)
+            : this.eventBus.dispatch('find', { ...options, type });
     }
 
     /**
@@ -335,7 +339,8 @@ class DocFindBar extends EventEmitter {
             if (!clicked) {
                 this.findNextButtonEl.focus();
             } else {
-                this.dispatchFindEvent('findagain', false);
+                const type = Browser.isIE() ? 'findagain' : 'again';
+                this.dispatchFindEvent(type, false);
             }
 
             // Emit a metric that the user navigated forward in the find bar
@@ -357,7 +362,8 @@ class DocFindBar extends EventEmitter {
             if (!clicked) {
                 this.findPreviousButtonEl.focus();
             } else {
-                this.dispatchFindEvent('findagain', true);
+                const type = Browser.isIE() ? 'findagain' : 'again';
+                this.dispatchFindEvent(type, true);
             }
 
             // Emit a metric that the user navigated back in the find bar

src/lib/viewers/doc/PresentationViewer.js

@@ -322,6 +322,7 @@ class PresentationViewer extends DocBaseViewer {
 
             return {
                 first: currentPageObj,
+                ids: new Set([currentPageObj.id]),
                 last: currentPageObj,
                 views: visible,
             };

src/lib/viewers/doc/__tests__/DocFindBar-test.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-expressions */
 import * as util from '../../../util';
+import Browser from '../../../Browser';
 import DocFindBar from '../DocFindBar';
 import { CLASS_BOX_PREVIEW_FIND_BAR, CLASS_HIDDEN } from '../../../constants';
 import { VIEWER_EVENT, USER_DOCUMENT_FIND_EVENTS } from '../../../events';
@@ -24,7 +25,7 @@ describe('lib/viewers/doc/DocFindBar', () => {
         fixture.load('viewers/doc/__tests__/DocFindBar-test.html');
 
         containerEl = document.querySelector('.test-container');
-        eventBus = { off: jest.fn(), on: jest.fn() };
+        eventBus = { dispatch: jest.fn(), off: jest.fn(), on: jest.fn() };
         findController = {
             executeCommand: jest.fn(),
             linkService: {},
@@ -149,7 +150,8 @@ describe('lib/viewers/doc/DocFindBar', () => {
     });
 
     describe('dispatchFindEvent()', () => {
-        test('should execute the find controller command with the given params', () => {
+        test('should execute the find controller command with the given params on IE', () => {
+            jest.spyOn(Browser, 'isIE').mockImplementation(() => true);
             docFindBar.findFieldEl.value = 'value';
             const params = {
                 query: docFindBar.findFieldEl.value,
@@ -161,6 +163,21 @@ describe('lib/viewers/doc/DocFindBar', () => {
             docFindBar.dispatchFindEvent('string', 'test');
             expect(findController.executeCommand).toBeCalledWith('string', params);
         });
+
+        test('should execute the find controller command with the given params on modern browsers', () => {
+            jest.spyOn(Browser, 'isIE').mockImplementation(() => false);
+            docFindBar.findFieldEl.value = 'value';
+            const params = {
+                query: docFindBar.findFieldEl.value,
+                phraseSearch: true,
+                highlightAll: true,
+                findPrevious: 'test',
+                type: 'string',
+            };
+
+            docFindBar.dispatchFindEvent('string', 'test');
+            expect(eventBus.dispatch).toBeCalledWith('find', params);
+        });
     });
 
     describe('updateUIState()', () => {

src/lib/viewers/doc/__tests__/SinglePageViewer-test.js

@@ -51,6 +51,7 @@ describe('lib/viewers/doc/SinglePageViewer', () => {
             stubs.pdfViewerClass = jest.fn(() => stubs.pdfViewer);
             stubs.urlCreator = jest.spyOn(util, 'createAssetUrlCreator').mockReturnValue(() => 'asset');
 
+            doc.pdfjsLib = {};
             doc.pdfjsViewer = {
                 PDFSinglePageViewer: stubs.pdfViewerClass,
             };

src/lib/viewers/doc/docAssets.js

@@ -1,6 +1,13 @@
-import { DOC_STATIC_ASSETS_VERSION } from '../../constants';
+import Browser from '../../Browser';
+import { DOC_LEGACY_STATIC_ASSETS_VERSION, DOC_STATIC_ASSETS_VERSION } from '../../constants';
 
-const STATIC_URI = `third-party/doc/${DOC_STATIC_ASSETS_VERSION}/`;
-export const JS = [`${STATIC_URI}pdf.min.js`, `${STATIC_URI}pdf_viewer.min.js`, `${STATIC_URI}exif.min.js`];
-export const PRELOAD_JS = [`${STATIC_URI}pdf.worker.min.js`];
-export const CSS = [`${STATIC_URI}pdf_viewer.min.css`];
+const STATIC_VERSION = Browser.isIE() ? DOC_LEGACY_STATIC_ASSETS_VERSION : DOC_STATIC_ASSETS_VERSION;
+const STATIC_URI = `third-party/doc/${STATIC_VERSION}`;
+
+export const CMAP = `${STATIC_URI}/cmaps/`;
+export const IMAGES = `${STATIC_URI}/images/`;
+export const WORKER = `${STATIC_URI}/pdf.worker.min.js`;
+
+export const JS = [`${STATIC_URI}/pdf.min.js`, `${STATIC_URI}/pdf_viewer.min.js`, `${STATIC_URI}/exif.min.js`];
+export const CSS = [`${STATIC_URI}/pdf_viewer.min.css`];
+export const PRELOAD_JS = [WORKER];

src/third-party/doc/2.84.0/cmaps/CNS2-V.bcmap

@@ -0,0 +1,3 @@
+�RCopyright 1990-2009 Adobe Systems Incorporated.
+All rights reserved.
+See ./LICENSE�CNS2-H

src/third-party/doc/2.84.0/cmaps/ETenms-B5-H.bcmap

@@ -0,0 +1,3 @@
+�RCopyright 1990-2009 Adobe Systems Incorporated.
+All rights reserved.
+See ./LICENSE�	ETen-B5-H`
 ^

src/third-party/doc/2.84.0/cmaps/GB-H.bcmap

@@ -0,0 +1,4 @@
+�RCopyright 1990-2009 Adobe Systems Incorporated.
+All rights reserved.
+See ./LICENSE

!!��]aX!!]`�21�>	�p�z�$]��"R�d�-U�7�*�4�%�+ �Z �{�/�%�<�9K�b�1]�.�"��`]�,�"]�
+�"]�h�"]�F�"]�$�"]��"]�`�"]�>�"]��"]�z�"]�X�"]�6�"]��"]�r�"]�P�"]�.�"]��"]�j�"]�H�"]�&�"]��"]�b�"]�@�"]��"]�|�"]�Z�"]�8�"]��"]�t�"]�R�"]�0�"]��"]�l�"]�J�"]�(�"]��"]�d�"]�B�"]� �"X�~�']�W�"]�5�"]��"]�q�"]�O�"]�-�"]��"]�i�"]�G�"]�%�"]��"]�a�"]�?�"]��"]�{�"]�Y�"]�7�"]��"]�s�"]�Q�"]�/�"]��"]�k�"]�I�"]�'�"]��"]�c�"]�A�"]��"]�}�"]�[�"]�9

src/third-party/doc/2.84.0/cmaps/LICENSE

@@ -0,0 +1,36 @@
+%%Copyright: -----------------------------------------------------------
+%%Copyright: Copyright 1990-2009 Adobe Systems Incorporated.
+%%Copyright: All rights reserved.
+%%Copyright:
+%%Copyright: Redistribution and use in source and binary forms, with or
+%%Copyright: without modification, are permitted provided that the
+%%Copyright: following conditions are met:
+%%Copyright:
+%%Copyright: Redistributions of source code must retain the above
+%%Copyright: copyright notice, this list of conditions and the following
+%%Copyright: disclaimer.
+%%Copyright:
+%%Copyright: Redistributions in binary form must reproduce the above
+%%Copyright: copyright notice, this list of conditions and the following
+%%Copyright: disclaimer in the documentation and/or other materials
+%%Copyright: provided with the distribution. 
+%%Copyright:
+%%Copyright: Neither the name of Adobe Systems Incorporated nor the names
+%%Copyright: of its contributors may be used to endorse or promote
+%%Copyright: products derived from this software without specific prior
+%%Copyright: written permission. 
+%%Copyright:
+%%Copyright: THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND
+%%Copyright: CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
+%%Copyright: INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+%%Copyright: MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+%%Copyright: DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
+%%Copyright: CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+%%Copyright: SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
+%%Copyright: NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+%%Copyright: LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+%%Copyright: HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+%%Copyright: CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+%%Copyright: OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+%%Copyright: SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+%%Copyright: -----------------------------------------------------------