Bug 1278704 - Hide Fennec's floating reader view button when scrolling down. r?gijs
MozReview-Commit-ID: 48wHUpet8ES
--- 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 {