From 39d89690886bb88ab04d8ad767ef41fb7e38228f Mon Sep 17 00:00:00 2001
From: Margaret Leibovic <margaret.leibovic@gmail.com>
Date: Thu, 5 Mar 2015 11:23:27 -0800
Subject: [PATCH] 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    | 26 ++++++++++---------
 toolkit/components/reader/AboutReader.jsm     | 26 +++++++------------
 .../reader/content/aboutReader.html           |  2 +-
 3 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/mobile/android/themes/core/aboutReader.css b/mobile/android/themes/core/aboutReader.css
index 2edd6b67c8b8..bc7d5ba364ea 100644
--- a/mobile/android/themes/core/aboutReader.css
+++ b/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) {
diff --git a/toolkit/components/reader/AboutReader.jsm b/toolkit/components/reader/AboutReader.jsm
index 40b0482ef736..f1163955096b 100644
--- a/toolkit/components/reader/AboutReader.jsm
+++ b/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();
   },
 
diff --git a/toolkit/components/reader/content/aboutReader.html b/toolkit/components/reader/content/aboutReader.html
index 8fa9719743c2..61cd008eb767 100644
--- a/toolkit/components/reader/content/aboutReader.html
+++ b/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">