feat(pdf): Update pdf.js to v2.2.228 and closure compiler to v20190729 (

#1048)

.eslintrc.js

@@ -9,7 +9,8 @@ module.exports = {
         DocumentTouch: false,
         Assert: false,
         fixture: false,
-        PDFJS: false,
+        pdfjsLib: false,
+        pdfjsViewer: false,
         sinon: false,
     },
     rules: {

build/karma.conf.js

@@ -3,7 +3,7 @@ const webpackConfig = require('./webpack.karma.config');
 
 // These should be updated to match the Preview version in package.json whenever a file in that third party directory
 // is updated. Also, update the matching configuration in constants.js, which is needed for main preview functionality
-const DOC_STATIC_ASSETS_VERSION = '1.60.0';
+const DOC_STATIC_ASSETS_VERSION = '2.16.0';
 const MEDIA_STATIC_ASSETS_VERSION = '2.14.0';
 const MODEL3D_STATIC_ASSETS_VERSION = '1.12.0';
 const SWF_STATIC_ASSETS_VERSION = '0.112.0';

build/minify_pdfjs.sh

@@ -1,20 +1,25 @@
-DOC_STATIC_ASSETS_VERSION=$1 || $(./build/current_version.sh)
+#!/bin/bash
+
+DOC_COMPILER_BINARY="build/closure-compiler-v20190729.jar"
+DOC_STATIC_ASSETS_VERSION=$(./build/current_version.sh)
 
 # Minify using Google Closure Compiler, options:
 # Output to ECMASCRIPT5 / ES5 (Box supports Chrome, IE11, Firefox, Safari, and newer versions of iOS, Android)
 # Skip rewriting polyfills since pdf.js includes its own WeakMap polyfill
 echo "-----------------------------------------------------------------------------------"
 echo "Minifying pdf.js files with Google Closure... Warnings are okay!"
 echo "-----------------------------------------------------------------------------------"
-java -jar build/closure-compiler-v20161201.jar --rewrite_polyfills false --language_out ECMASCRIPT5 --js src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/pdf.js --js_output_file src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/pdf.min.js
+java -jar ${DOC_COMPILER_BINARY} --rewrite_polyfills false --language_out ECMASCRIPT5 --js src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/pdf.js --js_output_file src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/pdf.min.js
+
+java -jar ${DOC_COMPILER_BINARY} --rewrite_polyfills false --language_out ECMASCRIPT5 --js src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/pdf.worker.js --js_output_file src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/pdf.worker.min.js
 
-java -jar build/closure-compiler-v20161201.jar --rewrite_polyfills false --language_out ECMASCRIPT5 --js src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/pdf.worker.js --js_output_file src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/pdf.worker.min.js
+java -jar ${DOC_COMPILER_BINARY} --rewrite_polyfills false --language_out ECMASCRIPT5 --js src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/pdf_viewer.js --js_output_file src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/pdf_viewer.min.js
 
-java -jar build/closure-compiler-v20161201.jar --rewrite_polyfills false --language_out ECMASCRIPT5 --js src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/pdf_viewer.js --js_output_file src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/pdf_viewer.min.js
 echo "-----------------------------------------------------------------------------------"
 echo "Minifying pdf.js CSS with cssnano"
 echo "-----------------------------------------------------------------------------------"
-./node_modules/.bin/cssnano src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/pdf_viewer.css src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/pdf_viewer.min.css
+./node_modules/.bin/cssnano src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/pdf_viewer.css src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/pdf_viewer.min.css
+
 echo "-----------------------------------------------------------------------------------"
 echo "Successfully updated and minified pdf.js files!"
 echo "-----------------------------------------------------------------------------------"

build/upgrade_pdfjs.sh

@@ -1,45 +1,55 @@
+#!/bin/bash
+# Run with specific branch/tag (e.g. ./upgrade_pdfjs.sh tags/v2.2.228) or with no arguments to use master
+
+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"
+DOC_STATIC_ASSETS_PATH="src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}"
 
-if [ ! -d $DOC_STATIC_ASSETS_PATH ]; then
-    DOC_LATEST_STATIC_ASSETS=`ls src/third-party/doc | sort -t "." -k1,1n -k2,2n -k3,3n | tail -1`
-    echo "Latest version is $DOC_LATEST_STATIC_ASSETS"
-    `cp -R src/third-party/doc/$DOC_LATEST_STATIC_ASSETS $DOC_STATIC_ASSETS_PATH`
-    echo "Created build directory for $DOC_STATIC_ASSETS_PATH"
-fi
+echo "Upgrading pdf.js to $DOC_STATIC_ASSETS_BRANCH";
 
 echo "-----------------------------------------------------------------------------------"
-echo "Fetching latest pdf.js files from pdfjs-dist repo..."
+echo "Creating target directory at $DOC_STATIC_ASSETS_PATH..."
+echo "-----------------------------------------------------------------------------------"
+
+rm -rf ${DOC_STATIC_ASSETS_PATH}
+
+DOC_LATEST_STATIC_ASSETS=`ls src/third-party/doc | sort -t "." -k1,1n -k2,2n -k3,3n | tail -1`
+echo "Usig base version from $DOC_LATEST_STATIC_ASSETS"
+`cp -R src/third-party/doc/${DOC_LATEST_STATIC_ASSETS} ${DOC_STATIC_ASSETS_PATH}`
+
+echo "-----------------------------------------------------------------------------------"
+echo "Cloining pdfjs-dist repo at branch: $DOC_STATIC_ASSETS_BRANCH..."
 echo "-----------------------------------------------------------------------------------"
 rm -rf ./pdfjs-dist/
-git clone https://github.com/mozilla/pdfjs-dist.git
+git clone https://github.com/mozilla/pdfjs-dist.git --depth 1 --single-branch --branch ${DOC_STATIC_ASSETS_BRANCH}
 
 echo "-----------------------------------------------------------------------------------"
 echo "Copying relevant files to Preview third-party dir..."
 echo "-----------------------------------------------------------------------------------"
-cp pdfjs-dist/build/pdf.js src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/
-cp pdfjs-dist/build/pdf.worker.js src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/
-cp pdfjs-dist/web/pdf_viewer.js src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/
-cp pdfjs-dist/web/pdf_viewer.css src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/
-cp pdfjs-dist/cmaps/* src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/cmaps/
+\cp -rf pdfjs-dist/build/pdf.js src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/
+\cp -rf pdfjs-dist/build/pdf.worker.js src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/
+\cp -rf pdfjs-dist/web/pdf_viewer.js src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/
+\cp -rf pdfjs-dist/web/pdf_viewer.css src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/
+\cp -rf pdfjs-dist/cmaps/* src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/cmaps/
 rm -rf ./pdfjs-dist/
 
 # Fix Chrome console warning issue by not testing for moz-chunked-arraybuffer support in Chrome
 echo "-----------------------------------------------------------------------------------"
 echo "Tweaking pdf.js for Chrome..."
 echo "-----------------------------------------------------------------------------------"
-sed -e 's/function supportsMozChunkedClosure/!\(\/Chrome\/\.test\(navigator\.userAgent\)\) \&\& function supportsMozChunkedClosure/' -i '' src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/pdf.js
+sed -e 's/function supportsMozChunkedClosure/!\(\/Chrome\/\.test\(navigator\.userAgent\)\) \&\& function supportsMozChunkedClosure/' -i '' src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/pdf.js
 
 # Decreased default cached pages size to 5 on mobile web to lower memory usage
 echo "-----------------------------------------------------------------------------------"
-echo "Decreasing # of cached pages on mobile web"
+echo "Decreasing # of cached pages on mobile web..."
 echo "-----------------------------------------------------------------------------------"
-sed -e 's@var DEFAULT_CACHE_SIZE = 10;@var DEFAULT_CACHE_SIZE = /iphone|ipad|ipod|android|blackberry|bb10|mini|windows\sce|palm/i.test(navigator.userAgent) ? 5 : 10;@' -i '' src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/pdf_viewer.js
+sed -e 's@var DEFAULT_CACHE_SIZE = 10;@var DEFAULT_CACHE_SIZE = /iphone|ipad|ipod|android|blackberry|bb10|mini|windows\sce|palm/i.test(navigator.userAgent) ? 5 : 10;@' -i '' src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/pdf_viewer.js
 
-# Deletes code hiding PDF signatures.
-# For preview purposes, it is acceptable to show signatures without verifying them.
+# Render e-signatures without validation
 echo "-----------------------------------------------------------------------------------"
-echo "Enabling PDF signatures"
+echo "Enabling e-signature rendering without validation..."
 echo "-----------------------------------------------------------------------------------"
-# Deletes a block of code that starts with `if (data.fieldType === 'Sig') {``, and ends with `}`
-sed -e "/if (data.fieldType === 'Sig') {/,/}/d" -i '' src/third-party/doc/$DOC_STATIC_ASSETS_VERSION/pdf.worker.js
+sed -e 's@_this2.setFlags(_util.AnnotationFlag.HIDDEN);@\/\/_this2.setFlags(_util.AnnotationFlag.HIDDEN);@' -i '' src/third-party/doc/${DOC_STATIC_ASSETS_VERSION}/pdf.worker.js
+
+# Miniy the libraries
+./build/minify_pdfjs.sh

package.json

@@ -135,7 +135,7 @@
         "test:e2e:open": "npm-run-all -p -r start:dev cy:open",
         "test:watch": "yarn test --no-single-run --auto-watch",
         "upgrade:annotations": "./build/upgrade_annotations.sh",
-        "upgrade:pdfjs": "./build/upgrade_pdfjs.sh && ./build/minify_pdfjs.sh"
+        "upgrade:pdfjs": "./build/upgrade_pdfjs.sh"
     },
     "browserslist": [
         "last 2 Chrome versions",
@@ -151,8 +151,7 @@
             "*.md": ["prettier --write --parser=markdown", "git add"],
             "*.json": ["prettier --write --parser=json", "git add"],
             "*.html": ["prettier --write --parser=html", "git add"],
-            "*.scss": ["prettier --write --parser=scss", "stylelint --syntax scss --fix", "git add"],
-            "*.css": ["prettier --write --parser=css", "stylelint --syntax css --fix", "git add"]
+            "*.scss": ["prettier --write --parser=scss", "stylelint --syntax scss --fix", "git add"]
         }
     },
     "husky": {

src/lib/ThumbnailsSidebar.js

@@ -172,7 +172,7 @@ class ThumbnailsSidebar {
         // Get the first page of the document, and use its dimensions
         // to set the thumbnails size of the thumbnails sidebar
         this.pdfViewer.pdfDocument.getPage(1).then(page => {
-            const { width, height } = page.getViewport(1);
+            const { width, height } = page.getViewport({ scale: 1 });
 
             // If the dimensions of the page are invalid then don't proceed further
             if (!(isFinite(width) && width > 0 && isFinite(height) && height > 0)) {
@@ -185,7 +185,7 @@ class ThumbnailsSidebar {
             this.scale = DEFAULT_THUMBNAILS_SIDEBAR_WIDTH / width;
             // Width : Height ratio of the page
             this.pageRatio = width / height;
-            const scaledViewport = page.getViewport(this.scale);
+            const scaledViewport = page.getViewport({ scale: this.scale });
             this.thumbnailHeight = Math.ceil(scaledViewport.height);
 
             this.virtualScroller.init({
@@ -347,7 +347,7 @@ class ThumbnailsSidebar {
         return this.pdfViewer.pdfDocument
             .getPage(pageNum)
             .then(page => {
-                const { width, height } = page.getViewport(1);
+                const { width, height } = page.getViewport({ scale: 1 });
                 // Get the current page w:h ratio in case it differs from the first page
                 const curPageRatio = width / height;
 
@@ -373,8 +373,8 @@ class ThumbnailsSidebar {
                 const scale = canvasWidth / width;
                 return page.render({
                     canvasContext: canvas.getContext('2d'),
-                    viewport: page.getViewport(scale),
-                });
+                    viewport: page.getViewport({ scale }),
+                }).promise;
             })
             .then(() => canvas.toDataURL());
     }

src/lib/__tests__/ThumbnailsSidebar-test.js

@@ -23,7 +23,9 @@ describe('ThumbnailsSidebar', () => {
         stubs.raf = sandbox.stub(window, 'requestAnimationFrame').callsFake(callback => callback());
 
         stubs.getViewport = sandbox.stub();
-        stubs.render = sandbox.stub();
+        stubs.render = sandbox.stub().returns({
+            promise: Promise.resolve(),
+        });
 
         page = {
             getViewport: stubs.getViewport,
@@ -281,14 +283,13 @@ describe('ThumbnailsSidebar', () => {
             thumbnailsSidebar.pageRatio = 1;
 
             // Current page has same ratio
-            stubs.getViewport.withArgs(1).returns({ width: 10, height: 10 });
-            stubs.render.returns(Promise.resolve());
+            stubs.getViewport.withArgs({ scale: 1 }).returns({ width: 10, height: 10 });
 
             const expScale = TEST_SCALE; // Should be DEFAULT_THUMBNAILS_SIDEBAR_WIDTH / 10
 
             return thumbnailsSidebar.getThumbnailDataURL(1).then(() => {
                 expect(stubs.getPage).to.be.called;
-                expect(stubs.getViewport.withArgs(expScale)).to.be.called;
+                expect(stubs.getViewport.withArgs({ scale: expScale })).to.be.called;
             });
         });
 
@@ -298,14 +299,13 @@ describe('ThumbnailsSidebar', () => {
             thumbnailsSidebar.pageRatio = 1;
 
             // Current page has ratio of 0.5 instead of 1
-            stubs.getViewport.withArgs(1).returns({ width: 10, height: 20 });
-            stubs.render.returns(Promise.resolve());
+            stubs.getViewport.withArgs({ scale: 1 }).returns({ width: 10, height: 20 });
 
             const expScale = TEST_SCALE / 2; // Should be DEFAULT_THUMBNAILS_SIDEBAR_WIDTH / 10 / 2
 
             return thumbnailsSidebar.getThumbnailDataURL(0).then(() => {
                 expect(stubs.getPage).to.be.called;
-                expect(stubs.getViewport.withArgs(expScale)).to.be.called;
+                expect(stubs.getViewport.withArgs({ scale: expScale })).to.be.called;
             });
         });
     });

src/lib/constants.js

@@ -105,7 +105,7 @@ export const PDFJS_HEIGHT_PADDING_PX = 5; // Should match VERTICAL_PADDING in pd
 
 // These should be updated to match the Preview version in package.json whenever a file in that third party directory
 // is updated. Also, update the matching configuration in karma.conf.js, which is needed for tests
-export const DOC_STATIC_ASSETS_VERSION = '1.60.0';
+export const DOC_STATIC_ASSETS_VERSION = '2.16.0';
 export const MEDIA_STATIC_ASSETS_VERSION = '2.14.0';
 export const MODEL3D_STATIC_ASSETS_VERSION = '1.12.0';
 export const SWF_STATIC_ASSETS_VERSION = '0.112.0';

src/lib/util.js

@@ -5,14 +5,25 @@ import Location from './Location';
 import PreviewError from './PreviewError';
 import { ERROR_CODE } from './events';
 
-const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
-const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
+const CLIENT_NAME = __NAME__; // eslint-disable-line no-undef
 const CLIENT_NAME_KEY = 'box_client_name';
 const CLIENT_VERSION_KEY = 'box_client_version';
-/* eslint-disable no-undef */
-const CLIENT_NAME = __NAME__;
-export const CLIENT_VERSION = __VERSION__;
-/* eslint-enable no-undef */
+export const CLIENT_VERSION = __VERSION__; // eslint-disable-line no-undef
+const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
+const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
+const PROMISE_MAP = {};
+
+/**
+ * Clears the promise map of any active promises
+ *
+ * @private
+ * @return {void}
+ */
+export function clearPromises() {
+    Object.keys(PROMISE_MAP).forEach(promiseKey => {
+        delete PROMISE_MAP[promiseKey];
+    });
+}
 
 /**
  * Creates an empty iframe or uses an existing one
@@ -340,28 +351,33 @@ export function loadScripts(urls, disableAMD = false) {
     }
 
     urls.forEach(url => {
-        if (!head.querySelector(`script[src="${url}"]`)) {
+        if (!head.querySelector(`script[src="${url}"]`) && !PROMISE_MAP[url]) {
             const script = createScript(url);
-            promises.push(
-                new Promise((resolve, reject) => {
-                    script.addEventListener('load', resolve);
-                    script.addEventListener('error', reject);
-                }),
-            );
+            PROMISE_MAP[url] = new Promise((resolve, reject) => {
+                script.addEventListener('load', resolve);
+                script.addEventListener('error', reject);
+            });
+
             head.appendChild(script);
         }
+
+        promises.push(PROMISE_MAP[url]);
     });
 
     return Promise.all(promises)
         .then(() => {
             if (disableAMD && amdPresent) {
                 define = defineRef;
             }
+
+            clearPromises();
         })
         .catch(() => {
             if (disableAMD && amdPresent) {
                 define = defineRef;
             }
+
+            clearPromises();
         });
 }