Bug 854960 - implementing pinned state graphic on fx start tiles. Also fixes selected state. r=fryn
authorSam Foster <sfoster@mozilla.com>
Fri, 19 Apr 2013 11:56:07 +0100
changeset 129318 7c34dfbf3d271b5dc289b9011ae820d5db228f19
parent 129317 aafed56a6c2e7195b0f7fb22505e98d6d84c30cf
child 129319 5517dbffd39da31c194223e41deb8bd46724f989
push id24567
push userryanvm@gmail.com
push dateFri, 19 Apr 2013 17:47:37 +0000
treeherdermozilla-central@cbfe9618bc2b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfryn
bugs854960
milestone23.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 854960 - implementing pinned state graphic on fx start tiles. Also fixes selected state. r=fryn
browser/metro/theme/images/pinned-hdpi.png
browser/metro/theme/images/pinned.png
browser/metro/theme/images/tile-selected-check-hdpi.png
browser/metro/theme/jar.mn
browser/metro/theme/platform.css
new file mode 100644
index 0000000000000000000000000000000000000000..044b6fd18336486147c8079da52bb5e3ef36e872
GIT binary patch
literal 1218
zc%17D@N?(olHy`uVBq!ia0vp^Ng&L@1|(N6W#a=<k|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+SW-M)978H@y}9k}FB~Yr_P|g7&XTEK+PbVFCT=kj`6{~<
z0;GgpR*LcHlsvrE%Kg8&v(tL}u@xVkrbKhMN-#}Y(J9U1D<b;%*d^8|1u>n*OV{{b
z&X~BRRq5@|WuNO#HoDGUSUm6ZywghxZaumb*6MW7T;y=juiAU>UcApMVNK@v$8ON!
zz|btfV!+`Drf!Icce)7eTVWjWBR7|OS7)HoHPyxJcaKOgNwg?5IC7v<l6DtzmnF5^
zvG1A`s5F5mNx-m2E<vE7Lln*2Af3`#>-8NT%sFTvnA8(jVp`3SAkf6XrU;|dBr1Pa
z{^6U*?2^>u!8WVt!p+EZ6S3#V4V13Tn)K1(M2OK2=c`xS7BWuXy5&mDfeMC6-Yo%p
zB@aZ*p7bp=^i@0CoNcG}R&%XP4ESlVSJJC((V{&*-|yT_UTs(5;Lh26X@!S4TX^Ws
z?GB3r|L+aod@|%kS=p^VIm<Q6FR@>FcIxf12a7IGC_8X9^=gKR)<<r)=7k5YUcFfG
zD#h2ZwN7DsMyJ8HUCck(6F02ieK08N+OglxuCA_?v9kSZuKkKyyh1-^XSP?{L!U&&
zXYRY(^0lT0C2QT>yZG4=LuVtFg<EbNy3^PGea-V(QocIpC9_!X3N2f~eezyNT->z#
zKc6_py1M>6cV~{w)nA$!i@9`kS(h*0%bhDOE4o-e{_l^yKdjF@O8fu2+SlnN&$N<S
zx8rOQcRnV&mzCPrUfJNi{`~znuD|az-_N_V$MomR&sUOisyL3%yvHz6sm-Ws;eDNB
z?fsMOU;CT)u35v<yv8bytNUx%wVn^RKb9A-eLFq=%-Qq$s=FuTmziCt`*|wcizBE>
zAX(*3<q-q7$%!$0%l`Hre;j*c^Rh3h$+;!J|8lQBeOh~=i@1ce^!)UlVkyo_Ek$Yv
z0^Z#ZUt0RzZu2Z()z*2L>+R!=YBm>ZUlCZsCCH!5n|R=6rtxgwTkq$+jPE_$C+L2A
zY5ldH1OtghRn9@J0?7qQEOwmfZ*-L}mL?=7J^CBteS4`Oqw<bjQp;wrt#sy)`0Fo!
zf4!){B2Ni1-D3|61>F<`IFtl4kL)P^{_m}RaD1)rw`&h8td$s()1DoFw5wTqrrK2I
zyKU!Zg=j5R7U7!jYw-2M`-fg$J(kAC_R}@}{BJTS>izpt8`rh*T-(abzq1}Pu^2EY
zmiFYdPLOGfns`^$M#ZMzWrO~7kx7c|9G(d$SetCx<|ue1pWtoMX^T=kFQo9sgN3)p
z&VhkhK*W&2k%d{n#o)?||2uZCOjB`Mc9Oy6&#TiWYziF-3{4y`YTNpiiA!>`yIq#_
zUF7f3ImW;u$m1Yz5K7(Hw*Kkqy(Mhjf9tnx^EhHQ_5O3wNs8V7H&5eY6LMr&T(2$B
zpwPs~p@dE)G&eHK3i6l>If{T>0dh?LLCz`X5;FfOA7HrlWph5$?~CVvg%X3OtDnm{
Hr-UW|iOdRC
new file mode 100644
index 0000000000000000000000000000000000000000..f52bb068914b797fa2031e6593275c69e069ea3e
GIT binary patch
literal 999
zc$@*}0~q{?P)<h;3K|Lk000e1NJLTq002e+002e^1^@s6aW3M70000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#iAh93RCwC#+iyq{VH^kW=boKLYSPwv
zQKJ{Vs8li&D+;0@D?-w>{)uLWAVq4knMxRvMVU#3z7XnNh+4f+=bu+WMVT)m{L>4q
zH}>a+R3sWxux#$Si@P|t+jh?9cDs9?AIxp%bGP%e?>)a~iqwi#YmWf{xEm=^LD$51
zJA2<wD7;{}F9gRA48aKiLvR)r#W0M|#(1-Zn~aZ=#CR2-oDKp*aOA__jst@Yz!e9|
z8H6JalsgbN9LaVasQ6ZHBZ<K@IWWZiI`obMm$0v{ao`g7*DVf>;1~jojU+}Ir<1^7
zfCCX9Pd7MFfnzF#LunmGjKd(ff%JWQSLf&DtP`Ctqx20bh>k2dG0S738t&BXK3iC@
zp2wlIni!!vQQ$Cup=g?h^|jY`I_yOo!f@WozW@RpxMN$I>E8ngshaAl?bTJ4iR@E@
z)?q@$;Vu_LMVWnLY03GN{~IX^lsoLHbvLgiD~Usc@Ra~_#2-X-bd<qlG%holOwn<1
zv2@0vgKHf2;uH>J!9ezT(YeCpxY$@&a<P1f-Q>|SOi-M=w`;eYIi0&X;C#a{;O)TR
z*RipWu1}x8%ovR;>8Yuob6ST9gu`5LRJ`*r9$1i{m*j8fmbNGFi%TyJvk&LREgkuy
zX|cb-<0{^4LGju)KglsP-m6b7$Uo(SGcY*(?Ldb0h1>1^qx8F{CX9e%m1qc2Z(cv&
zpO~=8EdEBO?c~#!ef{5+m{Zj1N`Wpbr&lL}51JacawsFCAAX1jPfSk!QtHx)G#J3c
zIED6nzo{WDC;NCpbL*qgU3=1>J#20r5eClA&d%cmBj9x1x>1vqn|&gorS0)(Non~Y
zyKT;1Ryic#Oi$0a!*xP5h@5i1>g%^~Yn01Zu8xSi4u?ZQ%EPwh-=YtZx}JQc63lg~
zEUzD)TJX^cv%~<t+jQ{v)^KA);v6G6=csuCkqV<a4h<r^ocv{EC5iE^E;W*)1sGLu
zv;q@$92#h=1eh$67-^ht0;3X+R$&y!(K3vpI5g0Hb@7Y9ERq=C>PDR$y}%&H(Gv_(
z9KFFH!=ZsbOMuBFiIK+XAuxz>^bQj;4h}FO;e_<(6RlRf*}|=k50k`rm1|;Lc5<+S
z;c<H8;9v(M7Y9oiIXKwD1jE4^CJ+wxFkU!e`CkGp;`EZl1i`^-<-3R#a^_zF1^}`x
VXmusaF3bP`002ovPDHLkV1mNJ)tUeR
new file mode 100644
index 0000000000000000000000000000000000000000..7261a8968137cf6fefff054a8850129c63221079
GIT binary patch
literal 666
zc$@*60%iS)P)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!JV``BRCwCt*e_25F%$ssw<;WyBqU@w
z<WS()6cR8X0gC}X0pk;ZBAEgt3Xmv<A;?J-TS!RehC~5<xiq<4+FQHz@4J`0+_s*$
zUtZs}YwfQC`CvS+c<utt_^uVe7>hh#c`i{DGs$mXJli}!33|s&G4MeZ%}T~dqS=IT
za%iS;4=FU$ypIf;8QdEudi@08cmS}_v<{9BjmV8NfO-R9{~2Iq+d4QN^jsZa>pHuN
z?|b)I#Vv#5KyO~ir!iLC0XQtWd61<nZrjelVbEArtgbAcP60-Jr(k>NM$5c!^U=Qn
zc)N7+(z1_61ioce({xhbVpXxa4wfbRXv7LAepXdl)we(20Czjt)iYS2TiWP6Rs=3B
z#VVHd?c*W;TR(KN)6$KBHd;14u|IKo=f_li`*IHO{@`qDX&;SCi0rK@(0En#?XU;X
z>li<n?1;x^Ec4_~R&rc~7=hCboWk8z?Y`AH@$gq^tT0wu_u&m+Qog3NJG92;A~e_@
z8aEf1p8gN}L8~?pIEG7*#{&RAXslonCi>R%iAOjzVhuJIA(y4umMr@*W)Lp)cVreL
zBsd5<G}t>j2C!FjEMRZwn804pv4NeVV+1=z#|n0ajv4F(9Xr@MIt8#*bShwL=#;=#
z(5ZoEMyCj#37sl<YIMrrsnDr|jnNdqMrbNvZ8RmY7MdD(BAOz&6ipSZL{kRK(2P2`
zh@P(kSfJN<cB=x$81X!+5*XvRYG9}w_+Nkl0BSbgd?-(RTmS$707*qoM6N<$f)qC+
A6951J
--- a/browser/metro/theme/jar.mn
+++ b/browser/metro/theme/jar.mn
@@ -77,10 +77,13 @@ chrome.jar:
   skin/images/pause-hdpi.png                (images/pause-hdpi.png)
   skin/images/mute-hdpi.png                 (images/mute-hdpi.png)
   skin/images/unmute-hdpi.png               (images/unmute-hdpi.png)
   skin/images/fullscreen-hdpi.png           (images/fullscreen-hdpi.png)
   skin/images/exitfullscreen-hdpi.png       (images/exitfullscreen-hdpi.png)
   skin/images/scrubber-hdpi.png             (images/scrubber-hdpi.png)
   skin/images/selection-monocle.png         (images/selection-monocle.png)
   skin/images/appbar-icons.png              (images/appbar-icons.png)
+  skin/images/pinned-hdpi.png               (images/pinned-hdpi.png)
+  skin/images/tile-selected-check-hdpi.png  (images/tile-selected-check-hdpi.png)
+
   skin/images/overlay-back.png              (images/overlay-back.png)
   skin/images/overlay-plus.png              (images/overlay-plus.png)
--- a/browser/metro/theme/platform.css
+++ b/browser/metro/theme/platform.css
@@ -468,42 +468,75 @@ richgriditem .richgrid-item-content {
   -moz-box-sizing: border-box;
   padding: 10px 8px 6px 8px;
   position: relative;
 }
 .richgrid-item-content {
   background: #fff;
 }
 
-richgriditem[selected] .richgrid-item-content {
-  border: @metro_border_xthick@ solid @selected_color@;
-  padding: @metro_spacing_xxsmall@;
+richgriditem[selected] .richgrid-item-content::after {
+    richgrid-item-content: "";
+    pointer-events: none;
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-image: url(chrome://browser/skin/images/tile-selected-check-hdpi.png);
+    background-origin: border-box;
+    background-position: right 0 top 0;
+    background-repeat: no-repeat;
+    /* scale the image whatever the dppx */
+    background-size: 35px 35px;
+    border: @metro_border_xthick@ solid @selected_color@;
 }
 
 richgriditem .richgrid-icon-container {
   padding-bottom: 2px;
 }
 
 richgriditem .richgrid-icon-box {
   padding: 4px;
   background: #fff;
   opacity: 1.0;
 }
-/* <sfoster> placeholder pinned-state indication, tracked as 854960 */
-richgriditem[pinned] .richgrid-item-content:after {
-    content: "\2193";
-    text-align: center;
-    position: absolute;
-    width: 16px;
-    right: 0;
-    top: 0;
-    outline: 1px solid rgb(255,153,0);
-    background-color: rgba(255,153,0,0.6);
-    color: rgb(153,51,0);
+
+
+/* tile pinned-state indication */
+richgriditem[pinned] .richgrid-item-content::before {
+  pointer-events:none;
+  content: "";
+  display: block;
+  position: absolute;
+  width: 35px;
+  height: 35px;
+  right: 0;
+  left: auto;
+  top: 0;
+  background-image: url(chrome://browser/skin/images/pinned-hdpi.png);
+  background-position: center;
+  background-repeat: no-repeat;
+  /* scale the image whatever the dppx */
+  background-size: 70px 70px;
 }
+
+/* Selected _and_ pinned tiles*/
+richgriditem[selected][pinned] .richgrid-item-content::before {
+  background-position: right -@metro_border_xthick@ top -@metro_border_xthick@;
+  width: 70px;
+  height: 70px;
+}
+
+richgriditem[pinned]:-moz-locale-dir(rtl) .richgrid-item-content::before {
+  left: 0;
+  right: auto;
+}
+
 richgriditem[customColor] {
   color: #f1f1f1;
 }
 richgriditem[customImage] {
   color: #1a1a1a;
 }