Merge pull request #2011 from yurydelendik/progress-indeterminate

Adds support of the indeterminate loading progress
mozilla · Aug 23, 2012 · cb05144 · cb05144
2 parents 62e6b43 + 296b98f
commit cb05144
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 9 deletions.
diff --git a/extensions/firefox/components/PdfStreamConverter.js b/extensions/firefox/components/PdfStreamConverter.js
@@ -147,8 +147,7 @@ PdfDataListener.prototype = {
     }
     this.data.set(chunk, this.loaded);
     this.loaded = willBeLoaded;
-    if (this.length >= 0)
-      this.onprogress(this.loaded, this.length);
+    this.onprogress(this.loaded, this.length >= 0 ? this.length : void(0));
   },
   getData: function PdfDataListener_getData() {
     var data = this.data;

diff --git a/src/worker.js b/src/worker.js
@@ -135,12 +135,10 @@ var WorkerMessageHandler = {
         {
           url: source.url,
           progress: function getPDFProgress(evt) {
-            if (evt.lengthComputable) {
-              handler.send('DocProgress', {
-                loaded: evt.loaded,
-                total: evt.total
-              });
-            }
+            handler.send('DocProgress', {
+              loaded: evt.loaded,
+              total: evt.lengthComputable ? evt.total : void(0)
+            });
           },
           error: function getPDFError(e) {
             handler.send('DocError', 'Unexpected server response of ' +

diff --git a/web/viewer.css b/web/viewer.css
@@ -1025,6 +1025,28 @@ canvas {
   border-bottom-right-radius: 2px;
 }
 
+#loadingBar .progress.indeterminate {
+  width: 100%;
+  height: 25px;
+  background-image: -moz-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+  background-image: -webkit-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+  background-image: -ms-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+  background-image: -o-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+  background-size: 75px 25px;
+  -moz-animation: progressIndeterminate 1s linear infinite;
+  -webkit-animation: progressIndeterminate 1s linear infinite;
+}
+
+@-moz-keyframes progressIndeterminate {
+  from { background-position: 0px 0px; }
+  to { background-position: 75px 0px; }
+}
+
+@-webkit-keyframes progressIndeterminate {
+  from { background-position: 0px 0px; }
+  to { background-position: 75px 0px; }
+}
+
 .textLayer {
   position: absolute;
   left: 0;

diff --git a/web/viewer.js b/web/viewer.js
@@ -60,7 +60,6 @@ var ProgressBar = (function ProgressBarClosure() {
     this.height = opts.height || 100;
     this.width = opts.width || 100;
     this.units = opts.units || '%';
-    this.percent = opts.percent || 0;
 
     // Initialize heights
     this.div.style.height = this.height + this.units;
@@ -69,10 +68,18 @@ var ProgressBar = (function ProgressBarClosure() {
   ProgressBar.prototype = {
 
     updateBar: function ProgressBar_updateBar() {
+      if (this._indeterminate) {
+        this.div.classList.add('indeterminate');
+        return;
+      }
+
       var progressSize = this.width * this._percent / 100;
 
       if (this._percent > 95)
         this.div.classList.add('full');
+      else
+        this.div.classList.remove('full');
+      this.div.classList.remove('indeterminate');
 
       this.div.style.width = progressSize + this.units;
     },
@@ -82,6 +89,7 @@ var ProgressBar = (function ProgressBarClosure() {
     },
 
     set percent(val) {
+      this._indeterminate = isNaN(val);
       this._percent = clamp(val, 0, 100);
       this.updateBar();
     }
@@ -572,6 +580,10 @@ var PDFView = {
         }
       }
     }
+
+    var loadingBox = document.getElementById('loadingBox');
+    loadingBox.setAttribute('hidden', 'true');
+
 //#if !(FIREFOX || MOZCENTRAL)
     var errorWrapper = document.getElementById('errorWrapper');
     errorWrapper.removeAttribute('hidden');