From 441a4df084ea2c3d28f23b68de0672095208dbe8 Mon Sep 17 00:00:00 2001
From: Sam Foster <sfoster@mozilla.com>
Date: Fri, 19 Apr 2013 11:56:07 +0100
Subject: [PATCH] Bug 854960 - implementing pinned state graphic on fx start
 tiles. Also fixes selected state. r=fryn

---
 browser/metro/theme/images/pinned-hdpi.png    | Bin 0 -> 1218 bytes
 browser/metro/theme/images/pinned.png         | Bin 0 -> 999 bytes
 .../theme/images/tile-selected-check-hdpi.png | Bin 0 -> 666 bytes
 browser/metro/theme/jar.mn                    |   3 +
 browser/metro/theme/platform.css              |  61 ++++++++++++++----
 5 files changed, 50 insertions(+), 14 deletions(-)
 create mode 100644 browser/metro/theme/images/pinned-hdpi.png
 create mode 100644 browser/metro/theme/images/pinned.png
 create mode 100644 browser/metro/theme/images/tile-selected-check-hdpi.png

diff --git a/browser/metro/theme/images/pinned-hdpi.png b/browser/metro/theme/images/pinned-hdpi.png
new file mode 100644
index 0000000000000000000000000000000000000000..044b6fd18336486147c8079da52bb5e3ef36e872
GIT binary patch
literal 1218
zcmeAS@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

literal 0
HcmV?d00001

diff --git a/browser/metro/theme/images/pinned.png b/browser/metro/theme/images/pinned.png
new file mode 100644
index 0000000000000000000000000000000000000000..f52bb068914b797fa2031e6593275c69e069ea3e
GIT binary patch
literal 999
zcmV<D0~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

literal 0
HcmV?d00001

diff --git a/browser/metro/theme/images/tile-selected-check-hdpi.png b/browser/metro/theme/images/tile-selected-check-hdpi.png
new file mode 100644
index 0000000000000000000000000000000000000000..7261a8968137cf6fefff054a8850129c63221079
GIT binary patch
literal 666
zcmV;L0%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

literal 0
HcmV?d00001

diff --git a/browser/metro/theme/jar.mn b/browser/metro/theme/jar.mn
index c0bf4fdf1254..146e0de6940d 100644
--- a/browser/metro/theme/jar.mn
+++ b/browser/metro/theme/jar.mn
@@ -82,5 +82,8 @@ chrome.jar:
   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)
diff --git a/browser/metro/theme/platform.css b/browser/metro/theme/platform.css
index 8600fd00451a..742ca4f1e6f6 100644
--- a/browser/metro/theme/platform.css
+++ b/browser/metro/theme/platform.css
@@ -473,9 +473,22 @@ richgriditem .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 {
@@ -487,18 +500,38 @@ richgriditem .richgrid-icon-box {
   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;
 }