Bug 1145567 - Display toolbar only after Domcontentloaded is triggered. r=margaret, a=sledru
authorvivek <vivekb.balakrishnan@gmail.com>
Mon, 13 Apr 2015 13:37:37 -0700
changeset 258489 df47a99c442f
parent 258488 199b60ec60dc
child 258490 58f203b17be2
push id4679
push userryanvm@gmail.com
push date2015-04-15 17:06 +0000
treeherdermozilla-beta@6c7e8d9f955c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmargaret, sledru
bugs1145567
milestone38.0
Bug 1145567 - Display toolbar only after Domcontentloaded is triggered. r=margaret, a=sledru
mobile/android/themes/core/aboutReader.css
toolkit/components/reader/AboutReader.jsm
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -285,16 +285,17 @@ body {
   position: fixed;
   width: 100%;
   left: 0;
   margin: 0;
   padding: 0;
   list-style: none;
   background-color: #EBEBF0;
   border-top: 1px solid #D7D9DB;
+  display: none;
 }
 
 .toolbar[visible] {
   bottom: 0;
 }
 
 .toolbar > * {
   float: right;
--- a/toolkit/components/reader/AboutReader.jsm
+++ b/toolkit/components/reader/AboutReader.jsm
@@ -265,18 +265,22 @@ 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) {
-            // Hacks! Delay showing the toolbar to avoid position: fixed; jankiness. See bug 975533.
-            this._win.setTimeout(() => this._setToolbarVisibility(true), 500);
+            // Toolbar display is updated here to avoid it appearing in the middle of the screen on page load. See bug 1145567.
+            this._win.setTimeout(() => {
+              this._toolbarElement.style.display = "block";
+              // Delay showing the toolbar to have a nice slide from bottom animation.
+              this._win.setTimeout(() => this._setToolbarVisibility(true), 200);
+            }, 500);
           }
         }
       }
     };
 
     this._mm.addMessageListener("Reader:ListStatusData", handleListStatusData);
     this._mm.sendAsyncMessage("Reader:ListStatusRequest", { url: this._article.url });
   },