Implement layout of NTP apps promo.

chrome/browser/resources/ntp/apps.css

Index: chrome/browser/resources/ntp/apps.css
diff --git a/chrome/browser/resources/ntp/apps.css b/chrome/browser/resources/ntp/apps.css
index a199154816ad5a97af460766bac61d7d7f8f6d11..45301ab594c27a6d028f636c7335bc2df80bd80b 100644
--- a/chrome/browser/resources/ntp/apps.css
+++ b/chrome/browser/resources/ntp/apps.css
@@ -90,10 +90,57 @@ html[install-animation-enabled=true] .app[new=installed] {
   -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;
+}
+