From 975c1eea0b21a179f2dbf6cd41b2a772a585ecc6 Mon Sep 17 00:00:00 2001
From: Conrad Chan <conrad@box.com>
Date: Wed, 10 Apr 2019 14:07:53 -0700
Subject: [PATCH] Update: Higher resolution thumbnails (#982)

---
 src/lib/ThumbnailsSidebar.js                | 7 ++++---
 src/lib/__tests__/ThumbnailsSidebar-test.js | 4 ++--
 src/lib/viewers/doc/_docBase.scss           | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/lib/ThumbnailsSidebar.js b/src/lib/ThumbnailsSidebar.js
index a5ec64831..0b9432233 100644
--- a/src/lib/ThumbnailsSidebar.js
+++ b/src/lib/ThumbnailsSidebar.js
@@ -9,6 +9,7 @@ const CLASS_BOX_PREVIEW_THUMBNAIL_IMAGE_LOADED = 'bp-thumbnail-image-loaded';
 const CLASS_BOX_PREVIEW_THUMBNAIL_IS_SELECTED = 'bp-thumbnail-is-selected';
 const CLASS_BOX_PREVIEW_THUMBNAIL_PAGE_NUMBER = 'bp-thumbnail-page-number';
 export const DEFAULT_THUMBNAILS_SIDEBAR_WIDTH = 154; // 225px sidebar width - 25px margin right, - 40px for page number - 6px for border
+const THUMBNAIL_IMAGE_WIDTH = DEFAULT_THUMBNAILS_SIDEBAR_WIDTH * 2; // Multiplied by a scaling factor so that we render the image at a higher resolution
 const THUMBNAIL_MARGIN = 15;
 const BORDER_WIDTH = 6;
 
@@ -316,16 +317,16 @@ class ThumbnailsSidebar {
                 // landscape
                 if (curPageRatio < this.pageRatio) {
                     // Set the canvas height to that of the thumbnail max height
-                    canvas.height = Math.ceil(DEFAULT_THUMBNAILS_SIDEBAR_WIDTH / this.pageRatio);
+                    canvas.height = Math.ceil(THUMBNAIL_IMAGE_WIDTH / this.pageRatio);
                     // Find the canvas width based on the curent page ratio
                     canvas.width = canvas.height * curPageRatio;
                 } else {
                     // In case the current page ratio is same as the first page
                     // or in case it's larger (which means that it's wider), keep
                     // the width at the max thumbnail width
-                    canvas.width = DEFAULT_THUMBNAILS_SIDEBAR_WIDTH;
+                    canvas.width = THUMBNAIL_IMAGE_WIDTH;
                     // Find the height based on the current page ratio
-                    canvas.height = Math.ceil(DEFAULT_THUMBNAILS_SIDEBAR_WIDTH / curPageRatio);
+                    canvas.height = Math.ceil(THUMBNAIL_IMAGE_WIDTH / curPageRatio);
                 }
 
                 // The amount for which to scale down the current page
diff --git a/src/lib/__tests__/ThumbnailsSidebar-test.js b/src/lib/__tests__/ThumbnailsSidebar-test.js
index 7d151ef7e..3349aaa61 100644
--- a/src/lib/__tests__/ThumbnailsSidebar-test.js
+++ b/src/lib/__tests__/ThumbnailsSidebar-test.js
@@ -3,7 +3,7 @@ import ThumbnailsSidebar, { DEFAULT_THUMBNAILS_SIDEBAR_WIDTH } from '../Thumbnai
 import VirtualScroller from '../VirtualScroller';
 
 const sandbox = sinon.sandbox.create();
-const TEST_SCALE = DEFAULT_THUMBNAILS_SIDEBAR_WIDTH / 10;
+const TEST_SCALE = DEFAULT_THUMBNAILS_SIDEBAR_WIDTH * 2 / 10;
 
 describe('ThumbnailsSidebar', () => {
     let thumbnailsSidebar;
@@ -103,7 +103,7 @@ describe('ThumbnailsSidebar', () => {
 
             return pagePromise.then(() => {
                 expect(stubs.getViewport).to.be.called;
-                expect(thumbnailsSidebar.scale).to.be.equal(TEST_SCALE); // DEFAULT_THUMBNAILS_SIDEBAR_WIDTH / width
+                expect(thumbnailsSidebar.scale).to.be.equal(DEFAULT_THUMBNAILS_SIDEBAR_WIDTH / 10);
                 expect(thumbnailsSidebar.pageRatio).to.be.equal(1);
                 expect(stubs.vsInit).to.be.called;
             });
diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
index d8ce8d18a..41d40facd 100644
--- a/src/lib/viewers/doc/_docBase.scss
+++ b/src/lib/viewers/doc/_docBase.scss
@@ -65,7 +65,7 @@ $thumbnail-sidebar-width: 226px;
     .bp-thumbnail-image {
         background-position: center;
         background-repeat: no-repeat;
-        background-size: contain;
+        background-size: contain; // Needed for the case of document with portrait and landscape orientations
         pointer-events: none;
     }