Bug 1226238 - (Part 5) Update reader view toolbar styles. r=Gijs,ahunt
authorMargaret Leibovic <margaret.leibovic@gmail.com>
Mon, 22 Feb 2016 14:28:02 -0800
changeset 285613 89eb5bb84d99324522bad7a707e08ff34932e6e9
parent 285612 89652aa76219bce7321e4452aa553699876f2817
child 285614 ec700560eba22e7efcb4e263650bc5e88f65d4bf
push id17837
push usermleibovic@mozilla.com
push dateFri, 26 Feb 2016 01:10:33 +0000
treeherderfx-team@89eb5bb84d99 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs, ahunt
bugs1226238
milestone47.0a1
Bug 1226238 - (Part 5) Update reader view toolbar styles. r=Gijs,ahunt MozReview-Commit-ID: 6YjmXZgGwOu
mobile/android/themes/core/aboutReaderControls.css
mobile/android/themes/core/images/reader-minus-mdpi.png
mobile/android/themes/core/images/reader-plus-mdpi.png
mobile/android/themes/core/images/reader-style-icon-active-hdpi.png
mobile/android/themes/core/images/reader-style-icon-active-mdpi.png
mobile/android/themes/core/images/reader-style-icon-active-xhdpi.png
mobile/android/themes/core/images/reader-style-icon-active-xxhdpi.png
mobile/android/themes/core/images/reader-style-icon-hdpi.png
mobile/android/themes/core/images/reader-style-icon-mdpi.png
mobile/android/themes/core/images/reader-style-icon-xhdpi.png
mobile/android/themes/core/images/reader-style-icon-xxhdpi.png
mobile/android/themes/core/jar.mn
toolkit/components/reader/AboutReader.jsm
--- 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();