Merge pull request #4150 from Snuffleupagus/issue-3990

Add a page loading indicator to the page number input

web/ui_utils.js

@@ -355,4 +355,3 @@ var Cache = function cacheCache(size) {
     }
   };
 };
-

web/viewer.css

@@ -1053,6 +1053,12 @@ html[dir='rtl'] .verticalToolbarSeparator {
   width: 40px;
 }
 
+.toolbarField.pageNumber.visiblePageIsLoading {
+  background-image: url(images/loading-small.png);
+  background-repeat: no-repeat;
+  background-position: 1px;
+}
+
 .toolbarField.pageNumber::-webkit-inner-spin-button,
 .toolbarField.pageNumber::-webkit-outer-spin-button {
     -webkit-appearance: none;
@@ -1528,6 +1534,12 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
     left: 186px;
   }
 
+  .toolbarField.pageNumber.visiblePageIsLoading,
+  #findInput[data-status="pending"] {
+    background-image: url(images/loading-small@2x.png);
+    background-size: 16px 17px;
+  }
+
   .dropdownToolbarButton {
     background: url(images/toolbarButton-menuArrows@2x.png) no-repeat;
     background-size: 7px 16px;

web/viewer.js

@@ -22,7 +22,7 @@
            DocumentProperties, DocumentOutlineView, DocumentAttachmentsView,
            OverlayManager, PDFFindController, PDFFindBar, getVisibleElements,
            watchScroll, PDFViewer, PDFRenderingQueue, PresentationModeState,
-           DEFAULT_SCALE, UNKNOWN_SCALE,
+           RenderingStates, DEFAULT_SCALE, UNKNOWN_SCALE,
            IGNORE_CURRENT_POSITION_ON_ZOOM: true */
 
 'use strict';
@@ -34,7 +34,7 @@ var MAX_SCALE = 10.0;
 var VIEW_HISTORY_MEMORY = 20;
 var SCALE_SELECT_CONTAINER_PADDING = 8;
 var SCALE_SELECT_PADDING = 22;
-
+var PAGE_NUMBER_LOADING_INDICATOR = 'visiblePageIsLoading';
 //#if B2G
 //PDFJS.useOnlyCssZoom = true;
 //PDFJS.disableTextLayer = true;
@@ -878,13 +878,11 @@ var PDFViewerApplication = {
     });
 
     var pagesCount = pdfDocument.numPages;
-
-    var id = pdfDocument.fingerprint;
     document.getElementById('numPages').textContent =
       mozL10n.get('page_of', {pageCount: pagesCount}, 'of {{pageCount}}');
     document.getElementById('pageNumber').max = pagesCount;
 
-    this.documentFingerprint = id;
+    var id = this.documentFingerprint = pdfDocument.fingerprint;
     var store = this.store = new ViewHistory(id);
 
     var pdfViewer = this.pdfViewer;
@@ -1646,13 +1644,11 @@ function webViewerInitialized() {
       PDFViewerApplication.zoomOut();
     });
 
-  document.getElementById('pageNumber').addEventListener('click',
-    function() {
+  document.getElementById('pageNumber').addEventListener('click', function() {
     this.select();
   });
 
-  document.getElementById('pageNumber').addEventListener('change',
-    function() {
+  document.getElementById('pageNumber').addEventListener('change', function() {
     // Handle the user inputting a floating point number.
     PDFViewerApplication.page = (this.value | 0);
 
@@ -1756,6 +1752,13 @@ document.addEventListener('pagerendered', function (e) {
 //  }));
 //});
 //#endif
+
+  // If the page is still visible when it has finished rendering,
+  // ensure that the page number input loading indicator is hidden.
+  if ((pageIndex + 1) === PDFViewerApplication.page) {
+    var pageNumberInput = document.getElementById('pageNumber');
+    pageNumberInput.classList.remove(PAGE_NUMBER_LOADING_INDICATOR);
+  }
 }, true);
 
 window.addEventListener('presentationmodechanged', function (e) {
@@ -1797,6 +1800,17 @@ window.addEventListener('updateviewarea', function () {
 
   // Update the current bookmark in the browsing history.
   PDFHistory.updateCurrentBookmark(location.pdfOpenParams, location.pageNumber);
+
+  // Show/hide the loading indicator in the page number input element.
+  var pageNumberInput = document.getElementById('pageNumber');
+  var currentPage =
+    PDFViewerApplication.pdfViewer.getPageView(PDFViewerApplication.page - 1);
+
+  if (currentPage.renderingState === RenderingStates.FINISHED) {
+    pageNumberInput.classList.remove(PAGE_NUMBER_LOADING_INDICATOR);
+  } else {
+    pageNumberInput.classList.add(PAGE_NUMBER_LOADING_INDICATOR);
+  }
 }, true);
 
 window.addEventListener('resize', function webViewerResize(evt) {