[api-minor] Modernize and simplify the ProgressBar class

The original `ProgressBar`-functionality is very old, and could thus do with some general clean-up.
In particular, while it currently accepts various options those have never really been used in either the default viewer or in any examples. The sort of "styling" that these options provided are *much better*, not to mention simpler, done directly with CSS rules.

As part of these changes, the "progress" is now updated using CSS variables rather than by directly modifying the `style` of DOM elements. This should hopefully simplify future changes to this code, see e.g. PR 14898.

Finally, this also fixes a couple of other small things in the "mobile viewer" example.

examples/mobile-viewer/viewer.css

@@ -13,6 +13,10 @@
  * limitations under the License.
  */
 
+:root {
+  --progressBar-percent: 0%;
+}
+
 * {
   padding: 0;
   margin: 0;
@@ -191,13 +195,12 @@ canvas {
   height: 0.6rem;
   background-color: rgba(51, 51, 51, 1);
   border-bottom: 1px solid rgba(51, 51, 51, 1);
-  margin-top: 5rem;
 }
 
 #loadingBar .progress {
   position: absolute;
   left: 0;
-  width: 0;
+  width: var(--progressBar-percent);
   height: 100%;
   background-color: rgba(221, 221, 221, 1);
   overflow: hidden;
@@ -217,6 +220,7 @@ canvas {
 }
 
 #loadingBar .progress.indeterminate {
+  width: 100%;
   background-color: rgba(153, 153, 153, 1);
   transition: none;
 }

examples/mobile-viewer/viewer.js

@@ -82,7 +82,9 @@ const PDFViewerApplication = {
         self.pdfDocument = pdfDocument;
         self.pdfViewer.setDocument(pdfDocument);
         self.pdfLinkService.setDocument(pdfDocument);
-        self.pdfHistory.initialize({ fingerprint: pdfDocument.fingerprint });
+        self.pdfHistory.initialize({
+          fingerprint: pdfDocument.fingerprints[0],
+        });
 
         self.loadingBar.hide();
         self.setTitleUsingMetadata(pdfDocument);
@@ -159,7 +161,7 @@ const PDFViewerApplication = {
   },
 
   get loadingBar() {
-    const bar = new pdfjsViewer.ProgressBar("#loadingBar", {});
+    const bar = new pdfjsViewer.ProgressBar("#loadingBar");
 
     return pdfjsLib.shadow(this, "loadingBar", bar);
   },
@@ -187,7 +189,7 @@ const PDFViewerApplication = {
       // Provides some basic debug information
       console.log(
         "PDF " +
-          pdfDocument.fingerprint +
+          pdfDocument.fingerprints[0] +
           " [" +
           info.PDFFormatVersion +
           " " +

web/ui_utils.js

@@ -23,8 +23,6 @@ const MAX_AUTO_SCALE = 1.25;
 const SCROLLBAR_PADDING = 40;
 const VERTICAL_PADDING = 5;
 
-const LOADINGBAR_END_OFFSET_VAR = "--loadingBar-end-offset";
-
 const RenderingStates = {
   INITIAL: 0,
   RUNNING: 1,
@@ -684,7 +682,16 @@ function clamp(v, min, max) {
 }
 
 class ProgressBar {
-  constructor(id, { height, width, units } = {}) {
+  constructor(id) {
+    if (
+      (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) &&
+      arguments.length > 1
+    ) {
+      throw new Error(
+        "ProgressBar no longer accepts any additional options, " +
+          "please use CSS rules to modify its appearance instead."
+      );
+    }
     this.visible = true;
 
     // Fetch the sub-elements for later.
@@ -692,26 +699,18 @@ class ProgressBar {
     // Get the loading bar element, so it can be resized to fit the viewer.
     this.bar = this.div.parentNode;
 
-    // Get options, with sensible defaults.
-    this.height = height || 100;
-    this.width = width || 100;
-    this.units = units || "%";
-
-    // Initialize heights.
-    this.div.style.height = this.height + this.units;
     this.percent = 0;
   }
 
-  _updateBar() {
+  #updateBar() {
     if (this._indeterminate) {
       this.div.classList.add("indeterminate");
-      this.div.style.width = this.width + this.units;
       return;
     }
-
     this.div.classList.remove("indeterminate");
-    const progressSize = (this.width * this._percent) / 100;
+
-    this.div.style.width = progressSize + this.units;
+    const doc = document.documentElement;
+    doc.style.setProperty("--progressBar-percent", `${this._percent}%`);
   }
 
   get percent() {
@@ -721,7 +720,7 @@ class ProgressBar {
   set percent(val) {
     this._indeterminate = isNaN(val);
     this._percent = clamp(val, 0, 100);
-    this._updateBar();
+    this.#updateBar();
   }
 
   setWidth(viewer) {
@@ -732,7 +731,7 @@ class ProgressBar {
     const scrollbarWidth = container.offsetWidth - viewer.offsetWidth;
     if (scrollbarWidth > 0) {
       const doc = document.documentElement;
-      doc.style.setProperty(LOADINGBAR_END_OFFSET_VAR, `${scrollbarWidth}px`);
+      doc.style.setProperty("--progressBar-end-offset", `${scrollbarWidth}px`);
     }
   }
 

web/viewer.css

@@ -22,7 +22,6 @@
   --sidebar-transition-timing-function: ease;
   --scale-select-container-width: 140px;
   --scale-select-overflow: 22px;
-  --loadingBar-end-offset: 0;
 
   --toolbar-icon-opacity: 0.7;
   --doorhanger-icon-opacity: 0.9;
@@ -32,6 +31,8 @@
   /*#if !MOZCENTRAL*/
   --errorWrapper-bg-color: rgba(255, 110, 110, 1);
   /*#endif*/
+  --progressBar-percent: 0%;
+  --progressBar-end-offset: 0;
   --progressBar-color: rgba(10, 132, 255, 1);
   --progressBar-indeterminate-bg-color: rgba(221, 221, 222, 1);
   --progressBar-indeterminate-blend-color: rgba(116, 177, 239, 1);
@@ -344,7 +345,7 @@ select {
 
 #loadingBar {
   position: absolute;
-  inset-inline: 0 var(--loadingBar-end-offset);
+  inset-inline: 0 var(--progressBar-end-offset);
   height: 4px;
   background-color: var(--body-bg-color);
   border-bottom: 1px solid var(--toolbar-border-color);
@@ -361,7 +362,7 @@ select {
   position: absolute;
   top: 0;
   left: 0;
-  width: 0%;
+  width: var(--progressBar-percent);
   height: 100%;
   background-color: var(--progressBar-color);
   overflow: hidden;
@@ -378,6 +379,7 @@ select {
 }
 
 #loadingBar .progress.indeterminate {
+  width: 100%;
   background-color: var(--progressBar-indeterminate-bg-color);
   transition: none;
 }