Bug 1278704 - Hide Fennec's floating reader view button when scrolling down. r?gijs draft
authorJan Henning <jh+bugzilla@buttercookie.de>
Sat, 22 Jul 2017 18:55:38 +0200
changeset 615273 4821c4ac2ca38aeccccfba8f1e81b7bcdf9069f7
parent 613796 f8265ead3e4c095d8470c67b076d5e7622feceba
child 639116 389fdaa735b0a2434c4416c3bd9623ef2313d4f4
push id70284
push usermozilla@buttercookie.de
push dateTue, 25 Jul 2017 17:38:09 +0000
reviewersgijs
bugs1278704
milestone56.0a1
Bug 1278704 - Hide Fennec's floating reader view button when scrolling down. r?gijs MozReview-Commit-ID: 48wHUpet8ES
mobile/android/themes/core/aboutReaderControls.css
toolkit/components/reader/AboutReader.jsm
--- a/mobile/android/themes/core/aboutReaderControls.css
+++ b/mobile/android/themes/core/aboutReaderControls.css
@@ -58,16 +58,17 @@
   position: fixed;
   width: 100%;
   left: 0;
   margin: 0;
   padding: 0;
   bottom: 0;
   list-style: none;
   pointer-events: none;
+  transition: opacity 420ms linear;
 }
 
 .toolbar > * {
   float: right;
 }
 
 .button {
   width: 56px;
@@ -88,17 +89,18 @@
 }
 
 /* Remove dotted border when button is focused */
 .button::-moz-focus-inner,
 .dropdown-popup > div > button::-moz-focus-inner {
   border: 0;
 }
 
-.button[hidden] {
+.button[hidden],
+.toolbar[hidden] {
   display: none;
 }
 
 .dropdown-toggle,
 #reader-popup {
   pointer-events: auto;
 }
 
--- a/toolkit/components/reader/AboutReader.jsm
+++ b/toolkit/components/reader/AboutReader.jsm
@@ -241,18 +241,21 @@ AboutReader.prototype = {
         if (target.classList.contains("dropdown-toggle")) {
           this._toggleDropdownClicked(aEvent);
         } else if (!target.closest(".dropdown-popup")) {
           this._closeDropdowns();
         }
         break;
       case "scroll":
         this._closeDropdowns(true);
-        let isScrollingUp = this._scrollOffset > aEvent.pageY;
-        this._setSystemUIVisibility(isScrollingUp);
+        if (!gIsFirefoxDesktop && this._scrollOffset != aEvent.pageY) {
+          let isScrollingUp = this._scrollOffset > aEvent.pageY;
+          this._setSystemUIVisibility(isScrollingUp);
+          this._setToolbarVisibility(isScrollingUp);
+        }
         this._scrollOffset = aEvent.pageY;
         break;
       case "resize":
         this._updateImageMargins();
         if (this._isToolbarVertical) {
           this._win.setTimeout(() => {
             for (let dropdown of this._doc.querySelectorAll(".dropdown.open")) {
               this._updatePopupPosition(dropdown);
@@ -612,16 +615,34 @@ AboutReader.prototype = {
 
     AsyncPrefs.set("reader.font_type", this._fontType);
   },
 
   _setSystemUIVisibility(visible) {
     this._mm.sendAsyncMessage("Reader:SystemUIVisibility", { visible });
   },
 
+  _setToolbarVisibility(visible) {
+    let tb = this._toolbarElement;
+
+    if (visible) {
+      if (tb.style.opacity != "1") {
+        tb.removeAttribute("hidden");
+        tb.style.opacity = "1";
+      }
+    } else if (tb.style.opacity != "0") {
+      tb.addEventListener("transitionend", evt => {
+        if (tb.style.opacity == "0") {
+          tb.setAttribute("hidden", "");
+        }
+      }, { once: true });
+      tb.style.opacity = "0";
+    }
+  },
+
   async _loadArticle() {
     let url = this._getOriginalUrl();
     this._showProgressDelayed();
 
     let article;
     if (this._articlePromise) {
       article = await this._articlePromise;
     } else {