Bug 1278704 - Hide Fennec's floating reader view button when scrolling down. r=Gijs
authorJan Henning <jh+bugzilla@buttercookie.de>
Sat, 22 Jul 2017 18:55:38 +0200
changeset 419619 798d2c7d1fdf8314a78e0978e8f626e972d194fa
parent 419618 89375283b43e26b49b067cf9f2e7b274ab1560ab
child 419620 8d22078682e411152d44ed6ee9e3b111f21c02a9
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1278704
milestone56.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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 {