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

--HG--
extra : rebase_source : f5021a6e3f36cb8d8e1e380ed1763361bad95489
extra : amend_source : 2304c25e5570f0e1f505b0778ac1873e9b86dd8c
This commit is contained in:
Margaret Leibovic 2015-03-05 11:23:27 -08:00
Родитель eb3938e55c
Коммит 39d8969088
3 изменённых файлов: 25 добавлений и 29 удалений

Просмотреть файл

@ -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) {

Просмотреть файл

@ -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();
},

Просмотреть файл

@ -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">