Bug 998031 - Reader Mode toolbar should scroll in and out instead of fading. r=bnicholson a=readinglist
authorMargaret Leibovic <margaret.leibovic@gmail.com>
Thu, 05 Mar 2015 11:23:27 -0800
changeset 248423 47992ba93d42af911f841011c7306c8763e8d9e0
parent 248422 62207e715de5efdfe038b4dafec9aa9f612e74bf
child 248424 c8f5fabac3693dca7d0f8bf5a4855cd333bf05bc
push id7837
push userjwein@mozilla.com
push dateFri, 27 Mar 2015 00:27:16 +0000
treeherdermozilla-aurora@cb0db44ce60e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbnicholson, readinglist
bugs998031
milestone38.0a2
Bug 998031 - Reader Mode toolbar should scroll in and out instead of fading. r=bnicholson a=readinglist
mobile/android/themes/core/aboutReader.css
toolkit/components/reader/AboutReader.jsm
toolkit/components/reader/content/aboutReader.html
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -275,37 +275,31 @@ body {
 .content ol {
   -moz-padding-start: 35px !important;
   list-style: decimal !important;
 }
 
 /*======= 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;
   background-color: #EBEBF0;
   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 > * {
   float: right;
   width: 33%;
 }
 
 .button {
@@ -585,22 +579,30 @@ body {
     background-image: url('chrome://browser/skin/images/reader-plus-xxhdpi.png');
   }
 }
 
 @media screen and (orientation: portrait) {
   .button {
     height: 56px;
   }
+
+  .toolbar {
+    bottom: -57px;
+  }
 }
 
 @media screen and (orientation: landscape) {
   .button {
     height: 40px;
   }
+
+  .toolbar {
+    bottom: -41px;
+  }
 }
 
 @media screen and (min-width: 960px) {
   .button {
     width: 56px;
     height: 56px;
   }
 
--- a/toolkit/components/reader/AboutReader.jsm
+++ b/toolkit/components/reader/AboutReader.jsm
@@ -40,18 +40,16 @@ let AboutReader = function(mm, win) {
   this._headerElementRef = Cu.getWeakReference(doc.getElementById("reader-header"));
   this._domainElementRef = Cu.getWeakReference(doc.getElementById("reader-domain"));
   this._titleElementRef = Cu.getWeakReference(doc.getElementById("reader-title"));
   this._creditsElementRef = Cu.getWeakReference(doc.getElementById("reader-credits"));
   this._contentElementRef = Cu.getWeakReference(doc.getElementById("reader-content"));
   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);
 
   win.addEventListener("unload", this, false);
   win.addEventListener("scroll", this, false);
   win.addEventListener("resize", this, false);
 
@@ -251,17 +249,18 @@ AboutReader.prototype = {
       if (args.url == this._article.url) {
         if (this._isReadingListItem != args.inReadingList) {
           let isInitialStateChange = (this._isReadingListItem == -1);
           this._isReadingListItem = args.inReadingList;
           this._updateToggleButton();
 
           // 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);
           }
         }
       }
     };
 
     this._mm.addMessageListener("Reader:ListStatusData", handleListStatusData);
     this._mm.sendAsyncMessage("Reader:ListStatusRequest", { url: this._article.url });
   },
@@ -519,34 +518,32 @@ AboutReader.prototype = {
 
     this._mm.sendAsyncMessage("Reader:SetCharPref", {
       name: "reader.font_type",
       value: this._fontType
     });
   },
 
   _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)
-      return;
-
-    // Don't allow visible toolbar until banner state is known
-    if (this._isReadingListItem == -1)
+    if (this._getToolbarVisibility() === visible) {
       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) {
       this._mm.sendAsyncMessage("Reader:ToolbarHidden");
     }
   },
 
   _toggleToolbarVisibility: function Reader_toggleToolbarVisibility() {
@@ -706,19 +703,16 @@ AboutReader.prototype = {
     this._contentElement.innerHTML = "";
     this._contentElement.appendChild(contentFragment);
     this._maybeSetTextDirection(article);
 
     this._contentElement.style.display = "block";
     this._updateImageMargins();
     this._requestReadingListStatus();
 
-    this._toolbarEnabled = true;
-    this._setToolbarVisibility(true);
-
     this._requestFavicon();
   },
 
   _hideContent: function Reader_hideContent() {
     this._headerElement.style.display = "none";
     this._contentElement.style.display = "none";
   },
 
--- a/toolkit/components/reader/content/aboutReader.html
+++ b/toolkit/components/reader/content/aboutReader.html
@@ -21,17 +21,17 @@
 
     <div id="reader-content" class="content">
     </div>
 
     <div id="reader-message" class="message">
     </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">
       <li><button class="dropdown-toggle button style-button"/></li>
       <li class="dropdown-popup">
         <div id="font-type-buttons"></div>
         <hr></hr>
         <div id="font-size-buttons">