Implement layout of NTP apps promo.

chrome/browser/resources/ntp/apps.css

 /* Apps */
 
 .app,
 .app[new=installed] {
   -webkit-box-sizing: border-box;
   -webkit-perspective: 400;
   border-radius: 10px;
   color: black;
   display: inline-block;
   margin: 5px 3px;
@@ skipping 72 matching lines @@
 
 html[install-animation-enabled=true] .app[new=new] {
   opacity: 0;
 }
 
 html[install-animation-enabled=true] .app[new=installed] {
   -webkit-animation: bounce .5s ease-in-out;
   -webkit-transition: opacity .5s;
 }
 
-a[app-id=web-store-entry] {
+.app[app-id=web-store-entry] > a {
   background-image: url("web_store_icon.png");
 }
 
 menu > button.default {
   font-weight: bold;
 }
+
+#apps-promo {
+  display: none;
+}
+
+html[appspromovisible=true] #apps-promo {
+  display: block;
+}
+
+#apps-promo > h3 {

[Bons, 2010/10/06 20:04:06]

do we care that this is inefficient as a selector?

[arv (Not doing code reviews), 2010/10/06 20:48:36]

This is not inefficient. Direct descendant selectors are efficient.

also, the inefficient selector history is mostly in Gecko. WebKit does not have
the same performance issue with descendant selectors as Gecko does.

+  font-size: 16px;
+  margin-top: 1em;
+  margin-bottom: 0.25em;
+}
+
+#apps-promo-text1 {
+  margin-top: 0;
+}
+
+#apps-promo-hide {
+  float: right;
+  -webkit-appearance: none;
+  -webkit-transition: opacity .15s;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 90%;
+  text-decoration: underline;
+}
+
+html[dir=rtl] #apps-promo-hide {
+  float: left;
+}
+
+html[appspromovisible=true] .app[app-id=web-store-entry] {
+  left: 25px;
+}
+
+html[appspromovisible=true][dir=rtl] .app[app-id=web-store-entry] {
+  right: 25px;
+}
+
+html[appspromovisible=true] .app[app-id=web-store-entry] a {

[Bons, 2010/10/06 20:04:06]

this too

+  font-weight: bold;
+}
+