[GeckoView] Show the download button by default and add a pref to disable it (bug 1827963)

For the moment there is no real consensus on how we should download a pdf on Android.
Hence we keep this solution for the moment but behind a pref (which will be true on
nightly only).

web/app.js

@@ -588,7 +588,17 @@ const PDFViewerApplication = {
     }
 
     if (appConfig.toolbar) {
-      this.toolbar = new Toolbar(appConfig.toolbar, eventBus, this.l10n);
+      if (
+        typeof PDFJSDev === "undefined"
+          ? window.isGECKOVIEW
+          : PDFJSDev.test("GECKOVIEW")
+      ) {
+        if (AppOptions.get("enableFloatingToolbar")) {
+          this.toolbar = new Toolbar(appConfig.toolbar, eventBus, this.l10n);
+        }
+      } else {
+        this.toolbar = new Toolbar(appConfig.toolbar, eventBus, this.l10n);
+      }
     }
 
     if (appConfig.secondaryToolbar) {
@@ -2917,17 +2927,6 @@ function webViewerTouchEnd(evt) {
 }
 
 function webViewerClick(evt) {
-  if (
-    typeof PDFJSDev === "undefined"
-      ? window.isGECKOVIEW
-      : PDFJSDev.test("GECKOVIEW")
-  ) {
-    if (
-      document.activeElement === PDFViewerApplication.appConfig.mainContainer
-    ) {
-      PDFViewerApplication.toolbar?.toggle();
-    }
-  }
   if (!PDFViewerApplication.secondaryToolbar?.isOpen) {
     return;
   }

web/app_options.js

@@ -88,6 +88,11 @@ const defaultOptions = {
     value: false,
     kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
   },
+  enableFloatingToolbar: {
+    /** @type {boolean} */
+    value: typeof PDFJSDev === "undefined",
+    kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
+  },
   enablePermissions: {
     /** @type {boolean} */
     value: false,

web/toolbar-geckoview.js

@@ -20,16 +20,24 @@
  * @property {HTMLButtonElement} download - Button to download the document.
  */
 
+const TIME_BEFORE_SHOWING_TOOLBAR = 200;
+
 class Toolbar {
   #buttons;
 
+  #checkForScrollEndBound = this.#checkForScrollEnd.bind(this);
+
   #eventBus;
 
-  #toolbar;
+  #hideBound = this.#hide.bind(this);
 
   #mainContainer;
 
-  #toggleBound = this.toggle.bind(this);
+  #scrollEndTimeoutId = null;
+
+  #showBound = this.#show.bind(this);
+
+  #toolbar;
 
   /**
    * @param {ToolbarOptions} options
@@ -44,6 +52,7 @@ class Toolbar {
 
     // Bind the event listeners for click and various other actions.
     this.#bindListeners(options);
+    this.#checkForScrollEnd();
   }
 
   setPageNumber(pageNumber, pageLabel) {}
@@ -67,12 +76,34 @@ class Toolbar {
 
   updateLoadingIndicatorState(loading = false) {}
 
-  toggle() {
-    if (this.#toolbar.classList.toggle("show")) {
-      this.#mainContainer.addEventListener("scroll", this.#toggleBound);
-    } else {
-      this.#mainContainer.removeEventListener("scroll", this.#toggleBound);
+  #checkForScrollEnd() {
+    if (this.#scrollEndTimeoutId !== null) {
+      clearTimeout(this.#scrollEndTimeoutId);
     }
+    this.#scrollEndTimeoutId = setTimeout(
+      this.#showBound,
+      TIME_BEFORE_SHOWING_TOOLBAR
+    );
+  }
+
+  #show() {
+    this.#toolbar.classList.toggle("show", true);
+    this.#mainContainer.removeEventListener(
+      "scroll",
+      this.#checkForScrollEndBound
+    );
+    this.#scrollEndTimeoutId = null;
+    this.#mainContainer.addEventListener("scroll", this.#hideBound);
+  }
+
+  #hide() {
+    this.#toolbar.classList.toggle("show", false);
+    this.#mainContainer.removeEventListener("scroll", this.#hideBound);
+    this.#mainContainer.addEventListener(
+      "scroll",
+      this.#checkForScrollEndBound
+    );
+    this.#checkForScrollEnd();
   }
 }
 

web/viewer-geckoview.css

@@ -19,7 +19,7 @@
   --dir-factor: 1;
   --scale-select-width: 140px;
 
-  --toolbar-icon-opacity: 0.7;
+  --toolbar-icon-opacity: 1;
   --doorhanger-icon-opacity: 0.9;
 
   --main-color: rgba(12, 12, 13, 1);
@@ -158,15 +158,18 @@ body {
   bottom: 5%;
   right: 5%;
   background-color: transparent;
-  z-index: 100000;
+  transition-property: opacity;
+  transition-duration: 400ms;
 }
 
 #floatingToolbar.show {
-  display: block;
+  z-index: 100000;
+  opacity: 1;
 }
 
 #floatingToolbar:not(show) {
-  display: none;
+  z-index: -1;
+  opacity: 0;
 }
 
 .toolbarButton {