Bug 998031 - Reader Mode toolbar should scroll in and out instead of fading. r=bnicholson

--HG--
extra : rebase_source : f5021a6e3f36cb8d8e1e380ed1763361bad95489
extra : amend_source : 2304c25e5570f0e1f505b0778ac1873e9b86dd8c

mobile/android/themes/core/aboutReader.css

@@ -280,15 +280,12 @@ body {
 /*======= Controls toolbar =======*/
 
 .toolbar {
-  font-family: "Clear Sans",sans-serif;
-  transition-property: visibility, opacity;
-  transition-duration: 0.7s;
-  visibility: visible;
-  opacity: 1.0;
+  font-family: sans-serif;
+  transition-property: bottom;
+  transition-duration: 0.3s;
   position: fixed;
   width: 100%;
-  bottom: 0px;
-  left: 0px;
+  left: 0;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -296,11 +293,8 @@ body {
   border-top: 1px solid #D7D9DB;
 }
 
-.toolbar-hidden {
-  transition-property: visibility, opacity;
-  transition-duration: 0.7s;
-  visibility: hidden;
-  opacity: 0.0;
+.toolbar[visible] {
+  bottom: 0;
 }
 
 .toolbar > * {
@@ -590,12 +584,20 @@ body {
   .button {
     height: 56px;
   }
+
+  .toolbar {
+    bottom: -57px;
+  }
 }
 
 @media screen and (orientation: landscape) {
   .button {
     height: 40px;
   }
+
+  .toolbar {
+    bottom: -41px;
+  }
 }
 
 @media screen and (min-width: 960px) {

toolkit/components/reader/AboutReader.jsm

@@ -45,8 +45,6 @@ let AboutReader = function(mm, win) {
   this._toolbarElementRef = Cu.getWeakReference(doc.getElementById("reader-toolbar"));
   this._messageElementRef = Cu.getWeakReference(doc.getElementById("reader-message"));
 
-  this._toolbarEnabled = false;
-
   this._scrollOffset = win.pageYOffset;
 
   doc.getElementById("container").addEventListener("click", this, false);
@@ -256,7 +254,8 @@ AboutReader.prototype = {
 
           // Display the toolbar when all its initial component states are known
           if (isInitialStateChange) {
-            this._setToolbarVisibility(true);
+            // Hacks! Delay showing the toolbar to avoid position: fixed; jankiness. See bug 975533.
+            this._win.setTimeout(() => this._setToolbarVisibility(true), 500);
           }
         }
       }
@@ -524,24 +523,22 @@ AboutReader.prototype = {
   },
 
   _getToolbarVisibility: function Reader_getToolbarVisibility() {
-    return !this._toolbarElement.classList.contains("toolbar-hidden");
+    return this._toolbarElement.hasAttribute("visible");
   },
 
   _setToolbarVisibility: function Reader_setToolbarVisibility(visible) {
     let dropdown = this._doc.getElementById("style-dropdown");
     dropdown.classList.remove("open");
 
-    if (!this._toolbarEnabled)
+    if (this._getToolbarVisibility() === visible) {
       return;
+    }
 
-    // Don't allow visible toolbar until banner state is known
-    if (this._isReadingListItem == -1)
-      return;
-
-    if (this._getToolbarVisibility() === visible)
-      return;
-
-    this._toolbarElement.classList.toggle("toolbar-hidden");
+    if (visible) {
+      this._toolbarElement.setAttribute("visible", true);
+    } else {
+      this._toolbarElement.removeAttribute("visible");
+    }
     this._setSystemUIVisibility(visible);
 
     if (!visible) {
@@ -711,9 +708,6 @@ AboutReader.prototype = {
     this._updateImageMargins();
     this._requestReadingListStatus();
 
-    this._toolbarEnabled = true;
-    this._setToolbarVisibility(true);
-
     this._requestFavicon();
   },
 

toolkit/components/reader/content/aboutReader.html

@@ -26,7 +26,7 @@
     </div>
   </div>
 
-  <ul id="reader-toolbar" class="toolbar toolbar-hidden">
+  <ul id="reader-toolbar" class="toolbar">
     <li><button id="close-button" class="button close-button"/></li>
     <li><button id="share-button" class="button share-button"/></li>
     <ul id="style-dropdown" class="dropdown">