Add the Firefox features notification bar to the viewer (bug 2057608)

The bar itself (`<pdf-features-notification>`) ships from mozilla-central, so
the viewer only hosts it.

Finally the maximum number of preferences is raised to 60, to match the change
made in mozilla-central in bug 2056102, since this adds a 51st one.

test/unit/app_options_spec.js

@@ -39,7 +39,7 @@ describe("AppOptions", function () {
     // If the following constant is updated then you *MUST* make the same change
     // in mozilla-central as well to ensure that preference-fetching works; see
     // https://searchfox.org/mozilla-central/source/toolkit/components/pdfjs/content/PdfStreamConverter.sys.mjs
-    const MAX_NUMBER_OF_PREFS = 50;
+    const MAX_NUMBER_OF_PREFS = 60;
 
     const options = AppOptions.getAll(OptionKind.PREFERENCE);
     expect(Object.keys(options).length).toBeLessThanOrEqual(

web/app.js

@@ -504,6 +504,66 @@ const PDFViewerApplication = {
       this.editorUndoBar = new EditorUndoBar(appConfig.editorUndoBar, eventBus);
     }
 
+    if (
+      (typeof PDFJSDev === "undefined" ||
+        PDFJSDev.test("MOZCENTRAL && !GECKOVIEW")) &&
+      !this.isViewerEmbedded &&
+      appConfig.featuresNotification &&
+      !AppOptions.get("featuresNotificationDismissed")
+    ) {
+      const { featuresNotification } = appConfig;
+      customElements.whenDefined("pdf-features-notification").then(() => {
+        if (AppOptions.get("featuresNotificationDismissed")) {
+          return;
+        }
+
+        featuresNotification.addEventListener(
+          "click",
+          event => {
+            if (!event.target.closest(".cta")) {
+              return;
+            }
+            event.preventDefault();
+            externalServices.openAboutPdfFeatures();
+          },
+          { signal: abortSignal }
+        );
+
+        const barResizeObserver = new ResizeObserver(entries => {
+          const box = entries[0]?.borderBoxSize?.[0];
+          const height = box
+            ? box.blockSize
+            : (entries[0]?.contentRect.height ?? 0);
+          docStyle.setProperty("--pfn-bar-height", `${Math.ceil(height)}px`);
+        });
+        barResizeObserver.observe(featuresNotification);
+
+        const hideBar = () => {
+          barResizeObserver.disconnect();
+          docStyle.setProperty("--pfn-bar-height", "0px");
+          featuresNotification.hidden = true;
+        };
+        featuresNotification.addEventListener(
+          "pdf-features-notification:dismissed",
+          () => {
+            hideBar();
+            this.preferences.set("featuresNotificationDismissed", true);
+          },
+          { once: true }
+        );
+        eventBus.on(
+          "featuresnotificationdismissed",
+          ({ value }) => {
+            if (value) {
+              hideBar();
+            }
+          },
+          { signal: abortSignal, ...internalOpt }
+        );
+        featuresNotification.show();
+      });
+    }
+
     const signatureManager =
       AppOptions.get("enableSignatureEditor") && appConfig.addSignatureDialog
         ? new SignatureManager(

web/app_options.js

@@ -309,6 +309,19 @@ const defaultOptions = {
     value: 0,
     kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
   },
+  ...(typeof PDFJSDev === "undefined" ||
+  PDFJSDev.test("MOZCENTRAL && !GECKOVIEW")
+    ? {
+        featuresNotificationDismissed: {
+          /** @type {boolean} */
+          value: false,
+          kind:
+            OptionKind.VIEWER +
+            OptionKind.PREFERENCE +
+            OptionKind.EVENT_DISPATCH,
+        },
+      }
+    : {}),
   highlightEditorColors: {
     /** @type {string} */
     value:

web/firefoxcom.js

@@ -769,6 +769,13 @@ class ExternalServices extends BaseExternalServices {
   dispatchGlobalEvent(event) {
     FirefoxCom.request("dispatchGlobalEvent", event);
   }
+
+  openAboutPdfFeatures() {
+    if (PDFJSDev.test("GECKOVIEW")) {
+      throw new Error("Not implemented: openAboutPdfFeatures");
+    }
+    FirefoxCom.request("openAboutPdfFeatures", null);
+  }
 }
 
 export { DownloadManager, ExternalServices, initCom, MLManager, Preferences };

web/viewer.css

@@ -292,6 +292,22 @@ body {
   transition-timing-function: var(--sidebar-transition-timing-function);
 }
 
+/*#if MOZCENTRAL*/
+#viewerContainer:not(.pdfPresentationMode) {
+  inset-block-start: calc(var(--toolbar-height) + var(--pfn-bar-height, 0px));
+}
+
+#outerContainer #toolbarContainer #loadingBar {
+  top: calc(var(--toolbar-height) + var(--pfn-bar-height, 0px));
+}
+
+#viewsManager {
+  inset-block-start: calc(
+    100% + var(--pfn-bar-height, 0px) + var(--sidebar-block-padding)
+  );
+}
+/*#endif*/
+
 #sidebarContainer :is(input, button, select) {
   font: message-box;
 }

web/viewer.html

@@ -69,6 +69,8 @@ See https://github.com/adobe-type-tools/cmap-resources
 
     <!--#if MOZCENTRAL-->
     <!--<script src="resource://pdf.js/web/viewer.mjs" type="module"></script>-->
+
+    <!--<script src="resource://pdf.js/pdfFeaturesNotification.mjs" type="module"></script>-->
     <!--#elif !MOZCENTRAL-->
     <!--<script src="viewer.mjs" type="module"></script>-->
     <!--#elif /* Development mode. */-->
@@ -880,6 +882,10 @@ See https://github.com/adobe-type-tools/cmap-resources
           </div>
         </div>
 
+        <!--#if MOZCENTRAL-->
+        <!--<pdf-features-notification id="pdfFeaturesNotification" data-focus-target="#viewerContainer" hidden></pdf-features-notification>-->
+        <!--#endif-->
+
         <div id="viewerContainer" tabindex="0">
           <div id="viewer" class="pdfViewer"></div>
         </div>

web/viewer.js

@@ -352,6 +352,14 @@ function getViewerConfiguration() {
       undoButton: document.getElementById("editorUndoBarUndoButton"),
       closeButton: document.getElementById("editorUndoBarCloseButton"),
     },
+    ...(typeof PDFJSDev === "undefined" ||
+    PDFJSDev.test("MOZCENTRAL && !GECKOVIEW")
+      ? {
+          featuresNotification: document.getElementById(
+            "pdfFeaturesNotification"
+          ),
+        }
+      : {}),
     editCommentDialog: {
       dialog: document.getElementById("commentManagerDialog"),
       toolbar: document.getElementById("commentManagerToolbar"),