[GeckoView] Add a Nimbus experiment for the toolbar (bug 1833093)

web/app.js

@@ -152,6 +152,10 @@ class DefaultExternalServices {
   static get canvasMaxAreaInBytes() {
     return shadow(this, "canvasMaxAreaInBytes", -1);
   }
+
+  static getNimbusExperimentData() {
+    return shadow(this, "getNimbusExperimentData", Promise.resolve(null));
+  }
 }
 
 const PDFViewerApplication = {
@@ -230,12 +234,21 @@ const PDFViewerApplication = {
   _printAnnotationStoragePromise: null,
   _touchInfo: null,
   _isCtrlKeyDown: false,
+  _nimbusDataPromise: null,
 
   // Called once when the document is loaded.
   async initialize(appConfig) {
     this.preferences = this.externalServices.createPreferences();
     this.appConfig = appConfig;
 
+    if (
+      typeof PDFJSDev === "undefined"
+        ? window.isGECKOVIEW
+        : PDFJSDev.test("GECKOVIEW")
+    ) {
+      this._nimbusDataPromise = this.externalServices.getNimbusExperimentData();
+    }
+
     await this._initializeOptions();
     this._forceCssTheme();
     await this._initializeL10n();
@@ -587,7 +600,12 @@ const PDFViewerApplication = {
           : PDFJSDev.test("GECKOVIEW")
       ) {
         if (AppOptions.get("enableFloatingToolbar")) {
-          this.toolbar = new Toolbar(appConfig.toolbar, eventBus, this.l10n);
+          this.toolbar = new Toolbar(
+            appConfig.toolbar,
+            eventBus,
+            this.l10n,
+            await this._nimbusDataPromise
+          );
         }
       } else {
         this.toolbar = new Toolbar(appConfig.toolbar, eventBus, this.l10n);

web/firefoxcom.js

@@ -446,6 +446,14 @@ class FirefoxExternalServices extends DefaultExternalServices {
     const maxArea = FirefoxCom.requestSync("getCanvasMaxArea");
     return shadow(this, "canvasMaxAreaInBytes", maxArea);
   }
+
+  static async getNimbusExperimentData() {
+    const nimbusData = await FirefoxCom.requestAsync(
+      "getNimbusExperimentData",
+      null
+    );
+    return nimbusData && JSON.parse(nimbusData);
+  }
 }
 PDFViewerApplication.externalServices = FirefoxExternalServices;
 

web/toolbar-geckoview.js

@@ -29,14 +29,43 @@ class Toolbar {
    * @param {ToolbarOptions} options
    * @param {EventBus} eventBus
    * @param {IL10n} _l10n - Localization service.
+   * @param {Object} nimbusData - Nimbus configuration.
    */
-  constructor(options, eventBus, _l10n) {
+  constructor(options, eventBus, _l10n, nimbusData) {
     this.#eventBus = eventBus;
-    this.#buttons = [
+    const buttons = [
-      { element: options.download, eventName: "download" },
+      {
-      { element: options.openInApp, eventName: "openinexternalapp" },
+        element: options.download,
+        eventName: "download",
+        nimbusName: "download-button",
+      },
+      {
+        element: options.openInApp,
+        eventName: "openinexternalapp",
+        nimbusName: "open-in-app-button",
+      },
     ];
 
+    if (nimbusData) {
+      this.#buttons = [];
+      for (const button of buttons) {
+        if (nimbusData[button.nimbusName]) {
+          this.#buttons.push(button);
+        } else {
+          button.element.remove();
+        }
+      }
+      if (this.#buttons.length > 0) {
+        options.container.classList.add("show");
+      } else {
+        options.container.remove();
+        options.mainContainer.classList.add("noToolbar");
+      }
+    } else {
+      options.container.classList.add("show");
+      this.#buttons = buttons;
+    }
+
     // Bind the event listeners for click and various other actions.
     this.#bindListeners(options);
   }

web/viewer-geckoview.css

@@ -102,10 +102,15 @@ body {
 #viewerContainer {
   overflow: auto;
   position: absolute;
-  inset: 41px 0 0;
+  inset-block: 41px 0;
+  inset-inline: 0;
   outline: none;
 }
 
+#viewerContainer.noToolbar {
+  inset-block-start: 0;
+}
+
 .dialogButton {
   border: none;
   background: none;

web/viewer-geckoview.html

@@ -81,7 +81,7 @@ See https://github.com/adobe-type-tools/cmap-resources
 
       <div id="mainContainer">
 
-        <div id="floatingToolbar" class="show">
+        <div id="floatingToolbar">
           <button id="download" class="toolbarButton" title="Save" tabindex="31" data-l10n-id="download">
             <span data-l10n-id="download_label">Download</span>
           </button>