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 323953 89eb5bb84d99324522bad7a707e08ff34932e6e9
parent 323952 89652aa76219bce7321e4452aa553699876f2817
child 323954 ec700560eba22e7efcb4e263650bc5e88f65d4bf
push id1128
push userjlund@mozilla.com
push dateWed, 01 Jun 2016 01:31:59 +0000
treeherdermozilla-release@fe0d30de989d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs, ahunt
bugs1226238
milestone47.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index ef53c28683bf39be6354caeef8ee3067a16e9a6e..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 308e78c25d3968232262b0ac62f2e7df0f962100..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index c1a2cac429c51ced17ee60d1b67e758decedc445..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 5b0a8109d8182dc3b21ae0fe6080d22e99b12a2b..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index d90f7e3f2244cd430653dad00c3cca0e4c99eb84..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
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..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
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();