Bug 1226238 - (Part 5) Update reader view toolbar styles. r=Gijs,ahunt
MozReview-Commit-ID: 6YjmXZgGwOu
--- a/mobile/android/themes/core/aboutReaderControls.css
+++ b/mobile/android/themes/core/aboutReaderControls.css
@@ -50,49 +50,45 @@
margin: 0px;
margin-bottom: 32px;
}
/*======= Controls toolbar =======*/
.toolbar {
font-family: sans-serif;
- transition-property: bottom;
- transition-duration: 0.3s;
position: fixed;
width: 100%;
left: 0;
margin: 0;
padding: 0;
+ bottom: 0;
list-style: none;
- background-color: #EBEBF0;
- border-top: 1px solid #D7D9DB;
-}
-
-.toolbar[visible] {
- bottom: 0;
}
.toolbar > * {
float: right;
- width: 33%;
}
.button {
+ width: 56px;
+ height: 56px;
display: block;
background-position: center;
- background-size: 30px 28px;
+ background-size: 26px 16px;
background-repeat: no-repeat;
- background-color: transparent;
+ background-color: #E66000;
+ border-radius: 10000px;
+ margin: 20px;
border: 0;
- width: 100%;
+ box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.40);
}
.button:active {
- background-color: #D7D7DC;
+ background-color: #DC5600;
}
/* Remove dotted border when button is focused */
.button::-moz-focus-inner,
.dropdown-popup > div > button::-moz-focus-inner {
border: 0;
}
@@ -104,48 +100,41 @@
left: 0;
text-align: center;
display: inline-block;
list-style: none;
margin: 0px;
padding: 0px;
}
-.dropdown li {
- margin: 0px;
- padding: 0px;
-}
-
-.dropdown-toggle {
- margin: 0px;
- padding: 0px;
-}
-
/*======= Font style popup =======*/
.dropdown-popup {
position: absolute;
left: 0;
- width: 100%;
+ width: calc(100% - 30px);
+ margin: 15px;
z-index: 1000;
background: #EBEBF0;
visibility: hidden;
- border-top: 1px solid #D7D9DB;
+ border: 0;
+ border-radius: 4px;
+ box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.40);
}
/* Only used on desktop */
.dropdown-popup > hr,
.dropdown-arrow,
#font-type-buttons > button > .name {
display: none;
}
.open > .dropdown-popup {
visibility: visible;
- bottom: 100%;
+ bottom: 0;
}
#font-type-buttons,
#font-size-buttons,
#color-scheme-buttons {
display: flex;
flex-direction: row;
}
@@ -239,124 +228,54 @@
/*======= Toolbar icons =======*/
/* desktop-only controls */
.close-button {
display: none;
}
.style-button {
- background-image: url('chrome://browser/skin/images/reader-style-icon-mdpi.png');
-}
-
-.open .style-button {
- background-image: url('chrome://browser/skin/images/reader-style-icon-active-mdpi.png');
+ background-image: url('chrome://browser/skin/images/reader-style-icon-hdpi.png');
}
.minus-button {
- background-image: url('chrome://browser/skin/images/reader-minus-mdpi.png');
+ background-image: url('chrome://browser/skin/images/reader-minus-hdpi.png');
}
.plus-button {
- background-image: url('chrome://browser/skin/images/reader-plus-mdpi.png');
-}
-
-@media screen and (min-resolution: 1.25dppx) {
- .style-button {
- background-image: url('chrome://browser/skin/images/reader-style-icon-hdpi.png');
- }
-
- .open .style-button {
- background-image: url('chrome://browser/skin/images/reader-style-icon-active-hdpi.png');
- }
-
- .minus-button {
- background-image: url('chrome://browser/skin/images/reader-minus-hdpi.png');
- }
-
- .plus-button {
- background-image: url('chrome://browser/skin/images/reader-plus-hdpi.png');
- }
+ background-image: url('chrome://browser/skin/images/reader-plus-hdpi.png');
}
@media screen and (min-resolution: 2dppx) {
.style-button {
background-image: url('chrome://browser/skin/images/reader-style-icon-xhdpi.png');
}
- .open .style-button {
- background-image: url('chrome://browser/skin/images/reader-style-icon-active-xhdpi.png');
- }
-
.minus-button {
background-image: url('chrome://browser/skin/images/reader-minus-xhdpi.png');
}
.plus-button {
background-image: url('chrome://browser/skin/images/reader-plus-xhdpi.png');
}
}
@media screen and (min-resolution: 3dppx) {
.style-button {
background-image: url('chrome://browser/skin/images/reader-style-icon-xxhdpi.png');
}
- .open .style-button {
- background-image: url('chrome://browser/skin/images/reader-style-icon-active-xxhdpi.png');
- }
-
.minus-button {
background-image: url('chrome://browser/skin/images/reader-minus-xxhdpi.png');
}
.plus-button {
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) {
+ .dropdown-popup {
+ width: 350px;
+ left: auto;
+ right: 0;
}
}
-
-@media screen and (min-width: 960px) {
- .button {
- width: 56px;
- height: 56px;
- }
-
- .toolbar {
- bottom: -57px;
- }
-
- .toolbar > * {
- width: 56px;
- }
-
- .dropdown-popup {
- position: absolute;
- width: 350px;
- left: auto;
- right: 15px;
- bottom: -12px;
- z-index: 1000;
- background: #EBEBF0;
- border: 1px solid #D7D9DB;
- border-radius: 4px;
- box-shadow: 0px 2px 4px 2px #BFBFBF;
- }
-}
deleted file mode 100644
index cb46de3d1e532a527cce8dff24f60cdbba24a5d0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index ef53c28683bf39be6354caeef8ee3067a16e9a6e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 308e78c25d3968232262b0ac62f2e7df0f962100..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index c1a2cac429c51ced17ee60d1b67e758decedc445..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 5b0a8109d8182dc3b21ae0fe6080d22e99b12a2b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index d90f7e3f2244cd430653dad00c3cca0e4c99eb84..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
index 8bd8fea7c176e4592e1d033e470442aafebcc5d4..ea7578d286d8d6c51df478c0a84fc3e7eb25fd41
GIT binary patch
literal 891
zc$@)y1BCpEP)<h;3K|Lk000e1NJLTq001Wd000;W1^@s6d5`2x00001b5ch_0Itp)
z=>Px&HAzH4R7efQmRpEUQ547La~szrF>+}nN{z&L9GR(^V)B9q8JFqfneyO;@*-q%
zdyqy+BPqkU=RuN`C^g2&C6qi2QR7l06XWvvt#j7?tZ$$5%{hv(>VMYSYyH>SYoERM
zcfOL66q3v37J)WJO^TF(qi9p8KrRg2%n38m&N%QT>??To@tly5_E*A#QdC(9r_}I<
zVy`jd|7Y@+?&w?ls9IF#|LaI+rioeFP%nD5+D^^;*9|6Z>pE@VBKiz?YZ}TLJGIHm
zN`WkTA*coAAgPbS`Xpq)OCYjXqUe3WD13CI<ou-)xOLz(_ym0UjAJVplD1g2R(Opb
zEJ^4&>T_y&QZb0K$R_YpllGt+z*4XobO9&LN%ev_>|>hIWE1eUyGrOwHWp{YsWN;q
z3$~E)R3K+s<QpiDtCROZ7zuiSNJTz?!FXff4Iff$qK*4Dad~T23Yrr>!7GNa%+)Bi
z$3hqb?qxEW$BwM}6nZ}x1|(m8^A3Vy(n8<|aOX1@L+moXX~vG4tm3M!WK%R6tn{2&
z>4P}VpZKVC*wowNawBgJ(qw{lO4z_yz7W1lF^;)#DtW^l#@DY2Up{}epc>SG*&rg3
z{f8mjB)790WPoh1j~;xzz)98_#WW3#0PDduIB&p7FcTaF=RvZN{1Aw&=#Nc&Z@>y4
z?@)3EV})22yb7to&D@1O$&s-SX-rgpTU|WR1S*yE9$j=YArr4qu2Zp#A-Ka4(48Q1
z;PJ&a=WlDHcH7Ds>Qg&b=`C(I!K|?ZlS!vzY%~5<<k_2PLQyl{9EId^G$`dnlp5<f
zZoKu>C^KU*7XUfGA|Gh%X=tW<=9`1Q1jrBSGm6|zmtG>jd0&+)i(BjE$;ELpmgYyf
zfv0UBUWg%yZ9rsuG+NvP|7?&IJ|0;nt}@`hslxC-h4Sf=^Y&eWD!(rT4*48i2J-h?
z<UZI9{I_7|mBq-%TX@fbmFo<4g5i>YZni<}Ti^(|38bl3Z~!>zz-R<jlKjMZJ#7zr
zL1Q}UZIAB{$186%ffhf=SpH$xE2kzVenWm_2Sk{B1{2K(ayHvJ*DsPL{spB4uV@<0
Rx+(ww002ovPDHLkV1gv`q{aXM
deleted file mode 100644
index 4f6a91a84dfda97073d1cf7a2e6e30f316ff05b0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
index 46e8645971b873b73976d07046ffca54ff678568..fb12ed007efec55bee2a427a084bb181b192db89
GIT binary patch
literal 1179
zc$@*71Z4Y(P)<h;3K|Lk000e1NJLTq001-q001Be1^@s6T|Zl900001b5ch_0Itp)
z=>Px(RY^oaR9Fesm}#g@Q547THRj1Y&qD}FGDYT+6cQryqexMdBxOkWAihwdkPKgt
zl8@%05aG)+6f)1#Lx>E|Z@stowa#+Rx#vElyXyb;8vbkVz0Tcd?|oi6m7|oDl%z@N
ztI}?z)9IJW&M%dM1_Lcy^Q!_gTPoS1t3iJYsu@~-m`uC?ya!e$=SKx*mQ*ptR^sd<
zhMFHHlRq3$(0BYT@}mkjOD5b5$izh+lr@3BOY^Ou#cKNV&@U=m)SLNM&{bE!7utGY
zuCsO1?|&C1hh$b^#yucia>Roiq+{{b!F~#=I=?jAiOp7axm5b@K;m%F95e>?!835n
z;V9$0Loc5&z((L@wC@GSe(!YcJK6#t&!r`=B9LY6R|0CJJSLKvM=s-}NURKAxUOG{
z?K?mp;rzOp>f=dUk{g3ls*^kDo4`U)2$lmK$1Ig;Nyo_WNE_vnrP-JXpkT{WeJTMZ
z$22FKPF@voQ{{^~DJ&2FBE!3ft(SaQTF^(r0o94TO93IaUd2U~t-WP{6l1`Z_t8pJ
zK@}ht8FFChRfri&eu28gM>@_`Uc}2G{GG-peNH#NI5TnajQ@j<&X~^HXuFa&Li7pv
z{7<?&B%WfBYZNX!U{4h<L|>!qICVe4?x2w($?h2?_f4Rcv7=2UdfxrK-)NgeF^S1R
zYh^$b|4;l3GT#go_<V_6awN%F(8mpag7y_Y+3|h@u>;_%<N9WXSN>MZ*q!K0uY}}X
zle`-IiO6S0xy~d%OY%Daxsk|u_Z)=DHqVzf^c^BgZV<We@w(?!ss`pbuqWt_w-{SC
ziHSgVx^9Yn4PE+@jcTUyXIJTTuzD1`&>JQ|BREe~o~XyOk5<Nj+aBx#KY$mx)vpBY
zd_U;1?~vyOT9Wi<_P{_e#vpGU&?1w|x(mTs2EMAq*XXlA=2qf|#g|(_BoqKy{~~e)
zk>!_2;C7ZIBP-&P;jS|LXV`Kn4HaUs1%>T$W9UiNzsMfWnUXR!`(L=%VO=!LLM9RV
zQ1CZ{yTtIP(a$5}OKgS}G+kxq^g_G5oho0{wjk<E8b(Ynt54WD-38$XBv6ohVnZF{
z98c<YfSt_P3+;=c&M>w&8+gUF#ks5qlUr&A3c@o5c;BwDgls-0R1D{k;f?2ERX08{
z?;2lIc=9n9C;AtS<CT66_>Zg4bX+^09UUciIIvP^Gaz)dB<u~ACpP{XU@efjX$c&x
zLQI2BV1Z)2L6=iH`O|Q-kQ~q-SdmNYAW+j!7+uCb3#@F$(F?Q&Bf%CRJMTwe|CM$U
zpI=p_m7m5DC-Se}T7D8yEgbn!D~{_(#pd{a@X5opPhC+n>M68#pj*cCOL>fX0W6cs
z{O5rm!?sdP=(cN!!b!SJGh_13-5^gc!B<Rw-aLmQN68SlvPl(z4?s&(jNYJ2l8NfX
tf2Q+v<zCqfbOrLM@(`S)h&!~2<tJ1I@~kD~=%4@q002ovPDHLkV1kjHG}Hh9
index 25e967a84d1b1d977d1ec0b477762d80ed106a56..57c6a1964ae8c45a64f41df93c9f94c72d3d04ff
GIT binary patch
literal 1791
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
--- a/mobile/android/themes/core/jar.mn
+++ b/mobile/android/themes/core/jar.mn
@@ -85,29 +85,22 @@ chrome.jar:
skin/images/cast-active-hdpi.png (images/cast-active-hdpi.png)
skin/images/mute-hdpi.png (images/mute-hdpi.png)
skin/images/unmute-hdpi.png (images/unmute-hdpi.png)
skin/images/scrubber-hdpi.png (images/scrubber-hdpi.png)
skin/images/about-btn-darkgrey.png (images/about-btn-darkgrey.png)
skin/images/logo-hdpi.png (images/logo-hdpi.png)
skin/images/wordmark-hdpi.png (images/wordmark-hdpi.png)
skin/images/config-plus.png (images/config-plus.png)
- skin/images/reader-minus-mdpi.png (images/reader-minus-mdpi.png)
skin/images/reader-minus-hdpi.png (images/reader-minus-hdpi.png)
skin/images/reader-minus-xhdpi.png (images/reader-minus-xhdpi.png)
skin/images/reader-minus-xxhdpi.png (images/reader-minus-xxhdpi.png)
- skin/images/reader-plus-mdpi.png (images/reader-plus-mdpi.png)
skin/images/reader-plus-hdpi.png (images/reader-plus-hdpi.png)
skin/images/reader-plus-xhdpi.png (images/reader-plus-xhdpi.png)
skin/images/reader-plus-xxhdpi.png (images/reader-plus-xxhdpi.png)
- skin/images/reader-style-icon-active-mdpi.png (images/reader-style-icon-active-mdpi.png)
- skin/images/reader-style-icon-active-hdpi.png (images/reader-style-icon-active-hdpi.png)
- skin/images/reader-style-icon-active-xhdpi.png (images/reader-style-icon-active-xhdpi.png)
- skin/images/reader-style-icon-active-xxhdpi.png (images/reader-style-icon-active-xxhdpi.png)
- skin/images/reader-style-icon-mdpi.png (images/reader-style-icon-mdpi.png)
skin/images/reader-style-icon-hdpi.png (images/reader-style-icon-hdpi.png)
skin/images/reader-style-icon-xhdpi.png (images/reader-style-icon-xhdpi.png)
skin/images/reader-style-icon-xxhdpi.png (images/reader-style-icon-xxhdpi.png)
skin/images/privatebrowsing-mask.png (images/privatebrowsing-mask.png)
skin/images/privatebrowsing-mask-and-shield.svg (images/privatebrowsing-mask-and-shield.svg)
skin/images/icon_floaty_hdpi.png (images/icon_floaty_hdpi.png)
skin/images/icon_floaty_mdpi.png (images/icon_floaty_mdpi.png)
skin/images/icon_floaty_xhdpi.png (images/icon_floaty_xhdpi.png)
--- a/toolkit/components/reader/AboutReader.jsm
+++ b/toolkit/components/reader/AboutReader.jsm
@@ -205,21 +205,22 @@ AboutReader.prototype = {
return;
switch (aEvent.type) {
case "click":
let target = aEvent.target;
while (target && target.id != "reader-popup")
target = target.parentNode;
if (!target)
- this._toggleToolbarVisibility();
+ this._closeDropdown();
break;
case "scroll":
+ this._closeDropdown();
let isScrollingUp = this._scrollOffset > aEvent.pageY;
- this._setToolbarVisibility(isScrollingUp);
+ this._setSystemUIVisibility(isScrollingUp);
this._scrollOffset = aEvent.pageY;
break;
case "resize":
this._updateImageMargins();
break;
case "devicelight":
this._handleDeviceLight(aEvent.value);
@@ -428,43 +429,16 @@ AboutReader.prototype = {
bodyClasses.add(this._fontType);
this._mm.sendAsyncMessage("Reader:SetCharPref", {
name: "reader.font_type",
value: this._fontType
});
},
- _getToolbarVisibility: function() {
- return this._toolbarElement.hasAttribute("visible");
- },
-
- _setToolbarVisibility: function(visible) {
- this._closeDropdown();
-
- if (this._getToolbarVisibility() === visible) {
- return;
- }
-
- if (visible) {
- this._toolbarElement.setAttribute("visible", true);
- } else {
- this._toolbarElement.removeAttribute("visible");
- }
- this._setSystemUIVisibility(visible);
-
- if (!visible) {
- this._mm.sendAsyncMessage("Reader:ToolbarHidden");
- }
- },
-
- _toggleToolbarVisibility: function() {
- this._setToolbarVisibility(!this._getToolbarVisibility());
- },
-
_setSystemUIVisibility: function(visible) {
this._mm.sendAsyncMessage("Reader:SystemUIVisibility", { visible: visible });
},
_loadArticle: Task.async(function* () {
let url = this._getOriginalUrl();
this._showProgressDelayed();