Merge remote-tracking branch 'upstream/master'

examples/acroforms/index.html

@@ -25,6 +25,7 @@
   <script type="text/javascript" src="../../src/worker.js"></script>
   <script type="text/javascript" src="../../external/jpgjs/jpg.js"></script>
   <script type="text/javascript" src="../../src/jpx.js"></script>
+  <script type="text/javascript" src="../../src/jbig2.js"></script>
 
   <script type="text/javascript">
     // Specify the main script used to create a new PDF.JS web worker.

examples/helloworld/index.html

@@ -25,6 +25,7 @@
   <script type="text/javascript" src="../../src/worker.js"></script>
   <script type="text/javascript" src="../../external/jpgjs/jpg.js"></script>
   <script type="text/javascript" src="../../src/jpx.js"></script>
+  <script type="text/javascript" src="../../src/jbig2.js"></script>
 
   <script type="text/javascript">
     // Specify the main script used to create a new PDF.JS web worker.

l10n/nl/chrome.properties

@@ -0,0 +1,3 @@
+# Chrome notification bar messages and buttons
+unsupported_feature=Dit PDF document wordt misschien niet goed getoond.
+open_with_different_viewer=Bekijk in ander programma

l10n/nl/metadata.inc

@@ -0,0 +1,8 @@
+    <em:localized>
+      <Description>
+        <em:locale>nl</em:locale>
+        <em:name>PDF Viewer</em:name>
+        <em:description>Gebruikt HTML5 om PDF bestanden direct in de browser te openen.</em:description>
+      </Description>
+    </em:localized>
+

l10n/nl/viewer.properties

@@ -0,0 +1,89 @@
+# Main toolbar buttons (tooltips and alt text for images)
+previous.title=Vorige pagina
+previous_label=Vorige
+next.title=Volgende pagina
+next_label=Volgende
+
+# LOCALIZATION NOTE (page_label, page_of):
+# These strings are concatenated to form the "Page: X of Y" string.
+# Do not translate "{{pageCount}}", it will be substituted with a number
+# representing the total number of pages.
+page_label=Pagina:
+page_of=van {{pageCount}}
+
+zoom_out.title=Zoom uit
+zoom_out_label=Zoom uit
+zoom_in.title=Zoom in
+zoom_in_label=Zoom in
+zoom.title=Zoom
+print.title=Print
+print_label=Print
+open_file.title=Open bestand
+open_file_label=Open
+download.title=Download
+download_label=Download
+bookmark.title=Huidige beeld (kopieer of open in nieuw venster)
+bookmark_label=Huidige beeld
+
+# Tooltips and alt text for side panel toolbar buttons
+# (the _label strings are alt text for the buttons, the .title strings are
+# tooltips)
+toggle_slider.title=Zijbalk tonen
+toggle_slider_label=Zijbalk tonen
+outline.title=Toon document structuur
+outline_label=Document structuur
+thumbs.title=Toon miniaturen
+thumbs_label=Miniaturen
+search_panel.title=Doorzoek document
+search_panel_label=Zoek
+
+# Document outline messages
+no_outline=Geen structuur beschikbaar
+
+# Thumbnails panel item (tooltip and alt text for images)
+# LOCALIZATION NOTE (thumb_page_title): "{{page}}" will be replaced by the page
+# number.
+thumb_page_title=Pagina {{page}}
+# LOCALIZATION NOTE (thumb_page_canvas): "{{page}}" will be replaced by the page
+# number.
+thumb_page_canvas=Miniatuur van pagina {{page}}
+
+# Search panel button title and messages
+search=Zoek
+search_terms_not_found=(Niet gevonden)
+
+# Error panel labels
+error_more_info=Meer informatie
+error_less_info=Minder informatie
+error_close=Sluiten
+# LOCALIZATION NOTE (error_build): "{{build}}" will be replaced by the PDF.JS
+# build ID.
+error_build=PDF.JS Build: {{build}}
+# LOCALIZATION NOTE (error_message): "{{message}}" will be replaced by an
+# english string describing the error.
+error_message=Bericht: {{message}}
+# LOCALIZATION NOTE (error_stack): "{{stack}}" will be replaced with a stack
+# trace.
+error_stack=Stapel: {{stack}}
+# LOCALIZATION NOTE (error_file): "{{file}}" will be replaced with a filename
+error_file=Bestand: {{file}}
+# LOCALIZATION NOTE (error_line): "{{line}}" will be replaced with a line number
+error_line=Regel: {{line}}
+rendering_error=Er heeft zich een probleem voorgedaan bij het optekenen van de pagina.
+
+# Predefined zoom values
+page_scale_width=Paginabreedte
+page_scale_fit=Pagina passend
+page_scale_auto=Automatische Zoom
+page_scale_actual=Werkelijke grootte
+
+# Loading indicator messages
+loading_error_indicator=Fout
+loading_error=Er heeft zich een fout voorgedaan bij het laden van de PDF.
+
+# LOCALIZATION NOTE (text_annotation_type): This is used as a tooltip.
+# "{{type}}" will be replaced with an annotation type from a list defined in
+# the PDF spec (32000-1:2008 Table 169 – Annotation types).
+# Some common types are e.g.: "Check", "Text", "Comment", "Note"
+text_annotation_type=[{{type}} Annotation]
+request_password=PDF is beveiligd door een wachtwoord:

l10n/sv/chrome.properties

@@ -0,0 +1,3 @@
+# Chrome notification bar messages and buttons
+unsupported_feature=Denna PDF kanske inte visas korrekt.
+open_with_different_viewer=Öppna med annan pdf-visare.

l10n/sv/viewer.properties

@@ -1,45 +1,89 @@
-bookmark.title=Aktuell vy (visa eller öppna i nytt fönster)
+# Main toolbar buttons (tooltips and alt text for images)
 previous.title=Föregående sida
+previous_label=Föregående
 next.title=Nästa sida
-print.title=Skriv ut
+next_label=Nästa
-download.title=Ladda ner
+
+# LOCALIZATION NOTE (page_label, page_of):
+# These strings are concatenated to form the "Page: X of Y" string.
+# Do not translate "{{pageCount}}", it will be substituted with a number
+# representing the total number of pages.
+page_label=Sida:
+page_of=av {{pageCount}}
+
 zoom_out.title=Zooma ut
+zoom_out_label=Zooma ut
 zoom_in.title=Zooma in
+zoom_in_label=Zooma in
+zoom.title=Zooma
+print.title=Skriv ut
+print_label=Skriv ut
+open_file.title=Öppna fil
+open_file_label=Öppna
+download.title=Ladda ner
+download_label=Ladda ner
+bookmark.title=Aktuell vy (kopiera eller öppna i nytt fönster)
+bookmark_label=Aktuell vy
+
+# Tooltips and alt text for side panel toolbar buttons
+# (the _label strings are alt text for the buttons, the .title strings are
+# tooltips)
+toggle_slider.title=Visa/Dölj panel
+toggle_slider_label=Visa/Dölj panel
+outline.title=Visa dokumentdisposition
+outline_label=Dokumentdisposition
+thumbs.title=Visa miniatyrer
+thumbs_label=Miniatyrer
+search_panel.title=Sök i dokumentet
+search_panel_label=Sök
+
+# Document outline messages
+no_outline=Ingen dokumentdisposition tillgänglig
+
+# Thumbnails panel item (tooltip and alt text for images)
+# LOCALIZATION NOTE (thumb_page_title): "{{page}}" will be replaced by the page
+# number.
+thumb_page_title=Sida {{page}}
+# LOCALIZATION NOTE (thumb_page_canvas): "{{page}}" will be replaced by the page
+# number.
+thumb_page_canvas=Miniatyr av sida {{page}}
+
+# Search panel button title and messages
+search=Hitta
+search_terms_not_found=(hittades inte)
+
+# Error panel labels
 error_more_info=Mer information
 error_less_info=Mindre information
 error_close=Stäng
-error_build=PDF.JS bygge: {{build}}
+# LOCALIZATION NOTE (error_build): "{{build}}" will be replaced by the PDF.JS
+# build ID.
+error_build=PDF.JS Bygge: {{build}}
+# LOCALIZATION NOTE (error_message): "{{message}}" will be replaced by an
+# english string describing the error.
 error_message=Meddelande: {{message}}
+# LOCALIZATION NOTE (error_stack): "{{stack}}" will be replaced with a stack
+# trace.
 error_stack=Stack: {{stack}}
+# LOCALIZATION NOTE (error_file): "{{file}}" will be replaced with a filename
 error_file=Fil: {{file}}
+# LOCALIZATION NOTE (error_line): "{{line}}" will be replaced with a line number
 error_line=Rad: {{line}}
+rendering_error=Ett fel inträffade när sidan renderades.
+
+# Predefined zoom values
 page_scale_width=Sidbredd
 page_scale_fit=Passa sida
-page_scale_auto=Automatisk zoom
+page_scale_auto=Automatisk Zoom
 page_scale_actual=Faktisk storlek
-toggle_slider.title=Visa/Dölj panel
+
-thumbs.title=Visa miniatyrer
+# Loading indicator messages
-outline.title=Visa dokumentdisposition
-loading=Laddar... {{percent}}%
 loading_error_indicator=Fel
-loading_error=Ett fel inträffade när PDF dokumentet laddades.
+loading_error=Ett fel inträffade när PDFen skulle laddas.
-rendering_error=Ett fel inträffade när PDF dokumentet renderades.
+
-page_label=Sida:
+# LOCALIZATION NOTE (text_annotation_type): This is used as a tooltip.
-page_of=av {{pageCount}}
+# "{{type}}" will be replaced with an annotation type from a list defined in
-no_outline=Ingen dokumentdisposition tillgänglig
+# the PDF spec (32000-1:2008 Table 169 – Annotation types).
-open_file.title=Öppna fil
+# Some common types are e.g.: "Check", "Text", "Comment", "Note"
 text_annotation_type=[{{type}} Annotering]
-toggle_slider_label=Visa/Dölj panel
+request_password=PDFen är skyddad av lösenord:
-thumbs_label=Miniatyrer
-outline_label=Disposition
-bookmark_label=Aktuell vy
-previous_label=Föregående
-next_label=Nästa
-print_label=Skriv ut
-download_label=Ladda ner
-zoom_out_label=Zooma ut
-zoom_in_label=Zooma in
-zoom.title=Zooma
-thumb_page_title=Sida {{page}}
-thumb_page_canvas=Miniatyr av sida {{page}}
-request_password=PDF dokumentet är skyddat av ett lösenord:

make.js

@@ -166,6 +166,7 @@ target.bundle = function() {
         'worker.js',
         '../external/jpgjs/jpg.js',
         'jpx.js',
+        'jbig2.js',
         'bidi.js',
         'metadata.js'];
 

src/api.js

@@ -234,7 +234,11 @@ var PDFPageProxy = (function PDFPageProxyClosure() {
      * {
      *   canvasContext(required): A 2D context of a DOM Canvas object.,
      *   textLayer(optional): An object that has beginLayout, endLayout, and
-     *                        appendText functions.
+     *                        appendText functions.,
+     *   continueCallback(optional): A function that will be called each time
+     *                               the rendering is paused.  To continue
+     *                               rendering call the function that is the
+     *                               first argument to the callback.
      * }.
      * @return {Promise} A promise that is resolved when the page finishes
      * rendering.
@@ -270,6 +274,7 @@ var PDFPageProxy = (function PDFPageProxyClosure() {
         else
           promise.resolve();
       };
+      var continueCallback = params.continueCallback;
 
       // Once the operatorList and fonts are loaded, do the actual rendering.
       this.displayReadyPromise.then(
@@ -282,7 +287,7 @@ var PDFPageProxy = (function PDFPageProxyClosure() {
           var gfx = new CanvasGraphics(params.canvasContext,
             this.objs, params.textLayer);
           try {
-            this.display(gfx, params.viewport, complete);
+            this.display(gfx, params.viewport, complete, continueCallback);
           } catch (e) {
             complete(e);
           }
@@ -340,7 +345,8 @@ var PDFPageProxy = (function PDFPageProxyClosure() {
     /**
      * For internal use only.
      */
-    display: function PDFPageProxy_display(gfx, viewport, callback) {
+    display: function PDFPageProxy_display(gfx, viewport, callback,
+                                           continueCallback) {
       var stats = this.stats;
       stats.time('Rendering');
 
@@ -356,10 +362,16 @@ var PDFPageProxy = (function PDFPageProxyClosure() {
         stepper.nextBreakPoint = stepper.getNextBreakPoint();
       }
 
+      var continueWrapper;
+      if (continueCallback)
+        continueWrapper = function() { continueCallback(next); }
+      else
+        continueWrapper = next;
+
       var self = this;
       function next() {
-        startIdx =
+        startIdx = gfx.executeOperatorList(operatorList, startIdx,
-          gfx.executeOperatorList(operatorList, startIdx, next, stepper);
+                                           continueWrapper, stepper);
         if (startIdx == length) {
           gfx.endDrawing();
           stats.timeEnd('Rendering');
@@ -367,7 +379,7 @@ var PDFPageProxy = (function PDFPageProxyClosure() {
           if (callback) callback();
         }
       }
-      next();
+      continueWrapper();
     },
     /**
      * @return {Promise} That is resolved with the a {string} that is the text

src/fonts.js

@@ -532,7 +532,7 @@ var FontLoader = {
 
       // XXX we should have a time-out here too, and maybe fire
       // pdfjsFontLoadFailed?
-      var src = '<!DOCTYPE HTML><html><head>';
+      var src = '<!DOCTYPE HTML><html><head><meta charset="utf-8">';
       src += '<style type="text/css">';
       for (var i = 0, ii = rules.length; i < ii; ++i) {
         src += rules[i];

src/parser.js

@@ -253,7 +253,8 @@ var Parser = (function ParserClosure() {
         return new RunLengthStream(stream);
       }
       if (name == 'JBIG2Decode') {
-        error('JBIG2 image format is not currently supprted.');
+        var bytes = stream.getBytes(length);
+        return new Jbig2Stream(bytes, stream.dict);
       }
       warn('filter "' + name + '" not supported yet');
       return stream;

src/stream.js

@@ -979,6 +979,50 @@ var JpxStream = (function JpxStreamClosure() {
   return JpxStream;
 })();
 
+/**
+ * For JBIG2's we use a library to decode these images and
+ * the stream behaves like all the other DecodeStreams.
+ */
+var Jbig2Stream = (function Jbig2StreamClosure() {
+  function Jbig2Stream(bytes, dict) {
+    this.dict = dict;
+    this.bytes = bytes;
+
+    DecodeStream.call(this);
+  }
+
+  Jbig2Stream.prototype = Object.create(DecodeStream.prototype);
+
+  Jbig2Stream.prototype.ensureBuffer = function Jbig2Stream_ensureBuffer(req) {
+    if (this.bufferLength)
+      return;
+
+    var jbig2Image = new Jbig2Image();
+
+    var chunks = [], decodeParams = this.dict.get('DecodeParms');
+    if (decodeParams && decodeParams.has('JBIG2Globals')) {
+      var globalsStream = decodeParams.get('JBIG2Globals');
+      var globals = globalsStream.getBytes();
+      chunks.push({data: globals, start: 0, end: globals.length});
+    }
+    chunks.push({data: this.bytes, start: 0, end: this.bytes.length});
+    var data = jbig2Image.parseChunks(chunks);
+    var dataLength = data.length;
+
+    // JBIG2 had black as 1 and white as 0, inverting the colors
+    for (var i = 0; i < dataLength; i++)
+      data[i] ^= 0xFF;
+
+    this.buffer = data;
+    this.bufferLength = dataLength;
+  };
+  Jbig2Stream.prototype.getChar = function Jbig2Stream_getChar() {
+    error('internal error: getChar is not valid on Jbig2Stream');
+  };
+
+  return Jbig2Stream;
+})();
+
 var DecryptStream = (function DecryptStreamClosure() {
   function DecryptStream(str, decrypt) {
     this.str = str;

src/worker_loader.js

@@ -24,6 +24,7 @@ var files = [
   'stream.js',
   'worker.js',
   'jpx.js',
+  'jbig2.js',
   'bidi.js',
   '../external/jpgjs/jpg.js'
 ];

test/pdfs/issue1810.pdf.link

@@ -0,0 +1 @@
+http://www.freepatentsonline.com/pdf/documents/uspt/D661/USD661296/USD661296S1.pdf

test/test_manifest.json

@@ -589,6 +589,14 @@
       "link": true,
       "type": "eq"
     },
+    {  "id": "issue1810",
+      "file": "pdfs/issue1810.pdf",
+      "md5": "b173a9dfb7bf00e1a298c6e8cb95c03e",
+      "rounds": 1,
+      "pageLimit": 3,
+      "link": true,
+      "type": "eq"
+    },
     {  "id": "issue1597",
       "file": "pdfs/issue1597.pdf",
       "md5": "a5ebef467fd6e2fc0aeb56c9eb725ae3",

test/test_slave.html

@@ -24,6 +24,7 @@
     <script type="text/javascript" src="/src/worker.js"></script>
     <script type="text/javascript" src="/external/jpgjs/jpg.js"></script>
     <script type="text/javascript" src="/src/jpx.js"></script>
+    <script type="text/javascript" src="/src/jbig2.js"></script>
     <script type="text/javascript" src="/src/bidi.js"></script>
     <script type="text/javascript" src="driver.js"></script>
 

web/viewer.html

@@ -35,6 +35,7 @@
     <script type="text/javascript" src="../src/worker.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
     <script type="text/javascript" src="../external/jpgjs/jpg.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
     <script type="text/javascript" src="../src/jpx.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/jbig2.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
     <script type="text/javascript" src="../src/bidi.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
     <script type="text/javascript">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
     <script type="text/javascript" src="debugger.js"></script>

web/viewer.js

@@ -14,6 +14,13 @@ var kMinScale = 0.25;
 var kMaxScale = 4.0;
 var kImageDirectory = './images/';
 var kSettingsMemory = 20;
+var RenderingStates = {
+  INITIAL: 0,
+  RUNNING: 1,
+  PAUSED: 2,
+  FINISHED: 3
+};
+
 
 var mozL10n = document.mozL10n || document.webL10n;
 
@@ -83,36 +90,6 @@ var ProgressBar = (function ProgressBarClosure() {
   return ProgressBar;
 })();
 
-var RenderingQueue = (function RenderingQueueClosure() {
-  function RenderingQueue() {
-    this.items = [];
-  }
-
-  RenderingQueue.prototype = {
-    enqueueDraw: function RenderingQueueEnqueueDraw(item) {
-      if (!item.drawingRequired())
-        return; // as no redraw required, no need for queueing.
-
-      this.items.push(item);
-      if (this.items.length > 1)
-        return; // not first item
-
-      item.draw(this.continueExecution.bind(this));
-    },
-    continueExecution: function RenderingQueueContinueExecution() {
-      var item = this.items.shift();
-
-      if (this.items.length == 0)
-        return; // queue is empty
-
-      item = this.items[0];
-      item.draw(this.continueExecution.bind(this));
-    }
-  };
-
-  return RenderingQueue;
-})();
-
 var FirefoxCom = (function FirefoxComClosure() {
   return {
     /**
@@ -246,7 +223,6 @@ var Settings = (function SettingsClosure() {
 })();
 
 var cache = new Cache(kCacheSize);
-var renderingQueue = new RenderingQueue();
 var currentPageNumber = 1;
 
 var PDFView = {
@@ -258,16 +234,48 @@ var PDFView = {
   startedTextExtraction: false,
   pageText: [],
   container: null,
+  thumbnailContainer: null,
   initialized: false,
   fellback: false,
   pdfDocument: null,
+  sidebarOpen: false,
+  pageViewScroll: null,
+  thumbnailViewScroll: null,
+
   // called once when the document is loaded
   initialize: function pdfViewInitialize() {
-    this.container = document.getElementById('viewerContainer');
+    var container = this.container = document.getElementById('viewerContainer');
+    this.pageViewScroll = {};
+    this.watchScroll(container, this.pageViewScroll, updateViewarea);
+
+    var thumbnailContainer = this.thumbnailContainer =
+                             document.getElementById('thumbnailView');
+    this.thumbnailViewScroll = {};
+    this.watchScroll(thumbnailContainer, this.thumbnailViewScroll,
+                     this.renderHighestPriority.bind(this));
+
     this.initialized = true;
   },
 
-  setScale: function pdfViewSetScale(val, resetAutoSettings) {
+  // Helper function to keep track whether a div was scrolled up or down and
+  // then call a callback.
+  watchScroll: function pdfViewWatchScroll(viewAreaElement, state, callback) {
+    state.down = true;
+    state.lastY = viewAreaElement.scrollTop;
+    viewAreaElement.addEventListener('scroll', function webViewerScroll(evt) {
+      var currentY = viewAreaElement.scrollTop;
+      var lastY = state.lastY;
+      if (currentY > lastY)
+        state.down = true;
+      else if (currentY < lastY)
+        state.down = false;
+      // else do nothing and use previous value
+      state.lastY = currentY;
+      callback();
+    }, true);
+  },
+
+  setScale: function pdfViewSetScale(val, resetAutoSettings, noScroll) {
     if (val == this.currentScale)
       return;
 
@@ -275,7 +283,7 @@ var PDFView = {
     for (var i = 0; i < pages.length; i++)
       pages[i].update(val * kCssUnits);
 
-    if (this.currentScale != val)
+    if (!noScroll && this.currentScale != val)
       this.pages[this.page - 1].scrollIntoView();
     this.currentScale = val;
 
@@ -286,14 +294,14 @@ var PDFView = {
     window.dispatchEvent(event);
   },
 
-  parseScale: function pdfViewParseScale(value, resetAutoSettings) {
+  parseScale: function pdfViewParseScale(value, resetAutoSettings, noScroll) {
     if ('custom' == value)
       return;
 
     var scale = parseFloat(value);
     this.currentScaleValue = value;
     if (scale) {
-      this.setScale(scale, true);
+      this.setScale(scale, true, noScroll);
       return;
     }
 
@@ -305,22 +313,22 @@ var PDFView = {
                            currentPage.height * currentPage.scale / kCssUnits;
     switch (value) {
       case 'page-actual':
-        this.setScale(1, resetAutoSettings);
+        scale = 1;
         break;
       case 'page-width':
-        this.setScale(pageWidthScale, resetAutoSettings);
+        scale = pageWidthScale;
         break;
       case 'page-height':
-        this.setScale(pageHeightScale, resetAutoSettings);
+        scale = pageHeightScale;
         break;
       case 'page-fit':
-        this.setScale(
+        scale = Math.min(pageWidthScale, pageHeightScale);
-            Math.min(pageWidthScale, pageHeightScale), resetAutoSettings);
         break;
       case 'auto':
-        this.setScale(Math.min(1.0, pageWidthScale), resetAutoSettings);
+        scale = Math.min(1.0, pageWidthScale);
         break;
     }
+    this.setScale(scale, resetAutoSettings, noScroll);
 
     selectScaleOption(value);
   },
@@ -606,7 +614,6 @@ var PDFView = {
       // when page is painted, using the image as thumbnail base
       pageView.onAfterDraw = function pdfViewLoadOnAfterDraw() {
         thumbnailView.setImage(pageView.canvas);
-        preDraw();
       };
     }
 
@@ -733,6 +740,88 @@ var PDFView = {
     }
   },
 
+  renderHighestPriority: function pdfViewRenderHighestPriority() {
+    // Pages have a higher priority than thumbnails, so check them first.
+    var visiblePages = this.getVisiblePages();
+    var pageView = this.getHighestPriority(visiblePages, this.pages,
+                                           this.pageViewScroll.down);
+    if (pageView) {
+      this.renderView(pageView, 'page');
+      return;
+    }
+    // No pages needed rendering so check thumbnails.
+    if (this.sidebarOpen) {
+      var visibleThumbs = this.getVisibleThumbs();
+      var thumbView = this.getHighestPriority(visibleThumbs,
+                                              this.thumbnails,
+                                              this.thumbnailViewScroll.down);
+      if (thumbView)
+        this.renderView(thumbView, 'thumbnail');
+    }
+  },
+
+  getHighestPriority: function pdfViewGetHighestPriority(visibleViews, views,
+                                                         scrolledDown) {
+    // The state has changed figure out which page has the highest priority to
+    // render next (if any).
+    // Priority:
+    // 1 visible pages
+    // 2 if last scrolled down page after the visible pages
+    // 2 if last scrolled up page before the visible pages
+    var numVisible = visibleViews.length;
+    if (numVisible === 0) {
+      info('No visible views.');
+      return false;
+    }
+    for (var i = 0; i < numVisible; ++i) {
+      var view = visibleViews[i].view;
+      if (!this.isViewFinshed(view))
+        return view;
+    }
+
+    // All the visible views have rendered, try to render next/previous pages.
+    if (scrolledDown) {
+      var lastVisible = visibleViews[visibleViews.length - 1];
+      var nextPageIndex = lastVisible.id;
+      // ID's start at 1 so no need to add 1.
+      if (views[nextPageIndex] && !this.isViewFinshed(views[nextPageIndex]))
+        return views[nextPageIndex];
+    } else {
+      var previousPageIndex = visibleViews[0].id - 2;
+      if (views[previousPageIndex] &&
+          !this.isViewFinshed(views[previousPageIndex]))
+        return views[previousPageIndex];
+    }
+    // Everything that needs to be rendered has been.
+    return false;
+  },
+
+  isViewFinshed: function pdfViewNeedsRendering(view) {
+    return view.renderingState === RenderingStates.FINISHED;
+  },
+
+  // Render a page or thumbnail view. This calls the appropriate function based
+  // on the views state. If the view is already rendered it will return false.
+  renderView: function pdfViewRender(view, type) {
+    var state = view.renderingState;
+    switch (state) {
+      case RenderingStates.FINISHED:
+        return false;
+      case RenderingStates.PAUSED:
+        PDFView.highestPriorityPage = type + view.id;
+        view.resume();
+        break;
+      case RenderingStates.RUNNING:
+        PDFView.highestPriorityPage = type + view.id;
+        break;
+      case RenderingStates.INITIAL:
+        PDFView.highestPriorityPage = type + view.id;
+        view.draw(this.renderHighestPriority.bind(this));
+        break;
+    }
+    return true;
+  },
+
   search: function pdfViewStartSearch() {
     // Limit this function to run every <SEARCH_TIMEOUT>ms.
     var SEARCH_TIMEOUT = 250;
@@ -856,7 +945,7 @@ var PDFView = {
         outlineView.classList.add('hidden');
         searchView.classList.add('hidden');
 
-        updateThumbViewArea();
+        PDFView.renderHighestPriority();
         break;
 
       case 'outline':
@@ -906,63 +995,39 @@ var PDFView = {
   },
 
   getVisiblePages: function pdfViewGetVisiblePages() {
-    var pages = this.pages;
+    return this.getVisibleElements(this.container,
-    var kBottomMargin = 10;
+                                   this.pages);
-    var kTopPadding = 30;
-    var visiblePages = [];
-
-    var currentHeight = kTopPadding + kBottomMargin;
-    var container = this.container;
-    // Add 1px to the scrolltop to give a little wiggle room if the math is off,
-    // this won't be needed if we calc current page number based off the middle
-    // of the screen instead of the top.
-    var containerTop = container.scrollTop + 1;
-    for (var i = 1; i <= pages.length; ++i) {
-      var page = pages[i - 1];
-      var pageHeight = page.height + kBottomMargin;
-      if (currentHeight + pageHeight > containerTop)
-        break;
-
-      currentHeight += pageHeight;
-    }
-
-    var containerBottom = containerTop + container.clientHeight;
-    for (; i <= pages.length && currentHeight < containerBottom; ++i) {
-      var singlePage = pages[i - 1];
-      visiblePages.push({ id: singlePage.id, y: currentHeight,
-                          view: singlePage });
-      currentHeight += page.height + kBottomMargin;
-    }
-    return visiblePages;
   },
 
   getVisibleThumbs: function pdfViewGetVisibleThumbs() {
-    var thumbs = this.thumbnails;
+    return this.getVisibleElements(this.thumbnailContainer,
-    var kBottomMargin = 15;
+                                   this.thumbnails);
-    var visibleThumbs = [];
+  },
 
-    var view = document.getElementById('thumbnailView');
+  // Generic helper to find out what elements are visible within a scroll pane.
-    var currentHeight = kBottomMargin;
+  getVisibleElements: function pdfViewGetVisibleElements(scrollEl, views) {
+    var currentHeight = 0, view;
+    var top = scrollEl.scrollTop;
 
-    var top = view.scrollTop;
+    for (var i = 1; i <= views.length; ++i) {
-    for (var i = 1; i <= thumbs.length; ++i) {
+      view = views[i - 1];
-      var thumb = thumbs[i - 1];
+      currentHeight = view.el.offsetTop;
-      var thumbHeight = thumb.height * thumb.scaleY + kBottomMargin;
+      if (currentHeight + view.el.clientHeight > top)
-      if (currentHeight + thumbHeight > top)
         break;
-
+      currentHeight += view.el.clientHeight;
-      currentHeight += thumbHeight;
     }
 
-    var bottom = top + view.clientHeight;
+    var visible = [];
-    for (; i <= thumbs.length && currentHeight < bottom; ++i) {
+    var bottom = top + scrollEl.clientHeight;
-      var singleThumb = thumbs[i - 1];
+    for (; i <= views.length && currentHeight < bottom; ++i) {
-      visibleThumbs.push({ id: singleThumb.id, y: currentHeight,
+      view = views[i - 1];
-                          view: singleThumb });
+      currentHeight = view.el.offsetTop;
-      currentHeight += singleThumb.height * singleThumb.scaleY + kBottomMargin;
+      visible.push({ id: view.id, y: currentHeight,
+                     view: view });
+      currentHeight += view.el.clientHeight;
     }
 
-    return visibleThumbs;
+    return visible;
   },
 
   // Helper function to parse query string (e.g. ?param1=value&parm2=...).
@@ -987,10 +1052,13 @@ var PageView = function pageView(container, pdfPage, id, scale,
   this.scale = scale || 1.0;
   this.viewport = this.pdfPage.getViewport(this.scale);
 
+  this.renderingState = RenderingStates.INITIAL;
+  this.resume = null;
+
   var anchor = document.createElement('a');
   anchor.name = '' + this.id;
 
-  var div = document.createElement('div');
+  var div = this.el = document.createElement('div');
   div.id = 'pageContainer' + this.id;
   div.className = 'page';
 
@@ -1003,6 +1071,9 @@ var PageView = function pageView(container, pdfPage, id, scale,
   };
 
   this.update = function pageViewUpdate(scale) {
+    this.renderingState = RenderingStates.INITIAL;
+    this.resume = null;
+
     this.scale = scale || this.scale;
     var viewport = this.pdfPage.getViewport(this.scale);
 
@@ -1176,9 +1247,9 @@ var PageView = function pageView(container, pdfPage, id, scale,
       }
 
       if (scale && scale !== PDFView.currentScale)
-        PDFView.parseScale(scale, true);
+        PDFView.parseScale(scale, true, true);
       else if (PDFView.currentScale === kUnknownScale)
-        PDFView.parseScale(kDefaultScale, true);
+        PDFView.parseScale(kDefaultScale, true, true);
 
       var boundingRect = [
         this.viewport.convertToViewportPoint(x, y),
@@ -1205,16 +1276,11 @@ var PageView = function pageView(container, pdfPage, id, scale,
       }, 0);
   };
 
-  this.drawingRequired = function() {
-    return !div.querySelector('canvas');
-  };
-
   this.draw = function pageviewDraw(callback) {
-    if (!this.drawingRequired()) {
+    if (this.renderingState !== RenderingStates.INITIAL)
-      this.updateStats();
+      error('Must be in new state before drawing');
-      callback();
+
-      return;
+    this.renderingState = RenderingStates.RUNNING;
-    }
 
     var canvas = document.createElement('canvas');
     canvas.id = 'page' + this.id;
@@ -1244,6 +1310,8 @@ var PageView = function pageView(container, pdfPage, id, scale,
 
     var self = this;
     function pageViewDrawCallback(error) {
+      self.renderingState = RenderingStates.FINISHED;
+
       if (self.loadingIconDiv) {
         div.removeChild(self.loadingIconDiv);
         delete self.loadingIconDiv;
@@ -1266,7 +1334,18 @@ var PageView = function pageView(container, pdfPage, id, scale,
     var renderContext = {
       canvasContext: ctx,
       viewport: this.viewport,
-      textLayer: textLayer
+      textLayer: textLayer,
+      continueCallback: function pdfViewcContinueCallback(cont) {
+        if (PDFView.highestPriorityPage !== 'page' + self.id) {
+          self.renderingState = RenderingStates.PAUSED;
+          self.resume = function resumeCallback() {
+            self.renderingState = RenderingStates.RUNNING;
+            cont();
+          };
+          return;
+        }
+        cont();
+      }
     };
     this.pdfPage.render(renderContext).then(
       function pdfPageRenderCallback() {
@@ -1309,7 +1388,7 @@ var ThumbnailView = function thumbnailView(container, pdfPage, id) {
   var scaleX = this.scaleX = (canvasWidth / pageWidth);
   var scaleY = this.scaleY = (canvasHeight / pageHeight);
 
-  var div = document.createElement('div');
+  var div = this.el = document.createElement('div');
   div.id = 'thumbnailContainer' + id;
   div.className = 'thumbnail';
 
@@ -1317,6 +1396,7 @@ var ThumbnailView = function thumbnailView(container, pdfPage, id) {
   container.appendChild(anchor);
 
   this.hasImage = false;
+  this.renderingState = RenderingStates.INITIAL;
 
   function getPageDrawContext() {
     var canvas = document.createElement('canvas');
@@ -1349,22 +1429,40 @@ var ThumbnailView = function thumbnailView(container, pdfPage, id) {
   };
 
   this.draw = function thumbnailViewDraw(callback) {
+    if (this.renderingState !== RenderingStates.INITIAL)
+      error('Must be in new state before drawing');
+
+    this.renderingState = RenderingStates.RUNNING;
     if (this.hasImage) {
       callback();
       return;
     }
 
+    var self = this;
     var ctx = getPageDrawContext();
     var drawViewport = pdfPage.getViewport(scaleX);
     var renderContext = {
       canvasContext: ctx,
-      viewport: drawViewport
+      viewport: drawViewport,
+      continueCallback: function(cont) {
+        if (PDFView.highestPriorityPage !== 'thumbnail' + self.id) {
+          self.renderingState = RenderingStates.PAUSED;
+          self.resume = function() {
+            self.renderingState = RenderingStates.RUNNING;
+            cont();
+          };
+          return;
+        }
+        cont();
+      }
     };
     pdfPage.render(renderContext).then(
       function pdfPageRenderCallback() {
+        self.renderingState = RenderingStates.FINISHED;
         callback();
       },
       function pdfPageRenderError(error) {
+        self.renderingState = RenderingStates.FINISHED;
         callback();
       }
     );
@@ -1374,7 +1472,7 @@ var ThumbnailView = function thumbnailView(container, pdfPage, id) {
   this.setImage = function thumbnailViewSetImage(img) {
     if (this.hasImage || !img)
       return;
-
+    this.renderingState = RenderingStates.FINISHED;
     var ctx = getPageDrawContext();
     ctx.drawImage(img, 0, 0, img.width, img.height,
                   0, 0, ctx.canvas.width, ctx.canvas.height);
@@ -1616,9 +1714,6 @@ window.addEventListener('load', function webViewerLoad(evt) {
     }
   });
 
-  var thumbsView = document.getElementById('thumbnailView');
-  thumbsView.addEventListener('scroll', updateThumbViewArea, true);
-
   var mainContainer = document.getElementById('mainContainer');
   var outerContainer = document.getElementById('outerContainer');
   mainContainer.addEventListener('transitionend', function(e) {
@@ -1635,56 +1730,19 @@ window.addEventListener('load', function webViewerLoad(evt) {
       this.classList.toggle('toggled');
       outerContainer.classList.add('sidebarMoving');
       outerContainer.classList.toggle('sidebarOpen');
-      updateThumbViewArea();
+      PDFView.sidebarOpen = outerContainer.classList.contains('sidebarOpen');
+      PDFView.renderHighestPriority();
     });
 
   PDFView.open(file, 0);
 }, true);
 
-/**
- * Render the next not yet visible page already such that it is
- * hopefully ready once the user scrolls to it.
- */
-function preDraw() {
-  var pages = PDFView.pages;
-  var visible = PDFView.getVisiblePages();
-  var last = visible[visible.length - 1];
-  // PageView.id is the actual page number, which is + 1 compared
-  // to the index in `pages`. That means, pages[last.id] is the next
-  // PageView instance.
-  if (pages[last.id] && pages[last.id].drawingRequired()) {
-    renderingQueue.enqueueDraw(pages[last.id]);
-    return;
-  }
-  // If there is nothing to draw on the next page, maybe the user
-  // is scrolling up, so, let's try to render the next page *before*
-  // the first visible page
-  if (pages[visible[0].id - 2]) {
-    renderingQueue.enqueueDraw(pages[visible[0].id - 2]);
-  }
-}
-
 function updateViewarea() {
   if (!PDFView.initialized)
     return;
   var visiblePages = PDFView.getVisiblePages();
-  var pageToDraw;
-  for (var i = 0; i < visiblePages.length; i++) {
-    var page = visiblePages[i];
-    var pageObj = PDFView.pages[page.id - 1];
 
-    pageToDraw |= pageObj.drawingRequired();
+  PDFView.renderHighestPriority();
-    renderingQueue.enqueueDraw(pageObj);
-  }
-
-  if (!visiblePages.length)
-    return;
-
-  // If there is no need to draw a page that is currenlty visible, preDraw the
-  // next page the user might scroll to.
-  if (!pageToDraw) {
-    preDraw();
-  }
 
   updateViewarea.inProgress = true; // used in "set page"
   var currentId = PDFView.page;
@@ -1715,29 +1773,6 @@ function updateViewarea() {
   document.getElementById('viewBookmark').href = href;
 }
 
-window.addEventListener('scroll', function webViewerScroll(evt) {
-  updateViewarea();
-}, true);
-
-var thumbnailTimer;
-
-function updateThumbViewArea() {
-  // Only render thumbs after pausing scrolling for this amount of time
-  // (makes UI more responsive)
-  var delay = 50; // in ms
-
-  if (thumbnailTimer)
-    clearTimeout(thumbnailTimer);
-
-  thumbnailTimer = setTimeout(function() {
-    var visibleThumbs = PDFView.getVisibleThumbs();
-    for (var i = 0; i < visibleThumbs.length; i++) {
-      var thumb = visibleThumbs[i];
-      renderingQueue.enqueueDraw(PDFView.thumbnails[thumb.id - 1]);
-    }
-  }, delay);
-}
-
 window.addEventListener('resize', function webViewerResize(evt) {
   if (PDFView.initialized &&
       (document.getElementById('pageWidthOption').selected ||