Bug 766961 - Apply fade in/out transitions to Reader Mode toolbar (r=mfinkle)

mobile/android/chrome/content/aboutReader.js

@@ -204,12 +204,7 @@ let AboutReader = {
     if (this._getToolbarVisibility() === visible)
       return;
 
-    let toolbarElement = this._toolbarElement;
-
-    if (visible)
-      toolbarElement.display = "block";
-
-    toolbarElement.classList.toggle("toolbar-hidden");
+    this._toolbarElement.classList.toggle("toolbar-hidden");
   },
 
   _toggleToolbarVisibility: function Reader_toggleToolbarVisibility(visible) {

mobile/android/themes/core/aboutReader.css

@@ -170,7 +170,10 @@ body {
 
 .toolbar {
   font-family: "Droid Sans",helvetica,arial,clean,sans-serif;
-  display: block;
+  -moz-transition-property: visibility opacity;
+  -moz-transition-duration: 0.7s;
+  visibility: visible;
+  opacity: 1.0;
   position: fixed;
   width: 100%;
   bottom: 0px;
@@ -182,7 +185,10 @@ body {
 }
 
 .toolbar-hidden {
-  display: none;
+  -moz-transition-property: visibility opacity;
+  -moz-transition-duration: 0.7s;
+  visibility: hidden;
+  opacity: 0.0;
 }
 
 .toolbar > * {