Add a new App launcher promo to the apps page / NTP.

chrome/browser/resources/ntp4/apps_page.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 .app {
   outline: none;
   position: absolute;
   text-align: center;
 }
 
@@ skipping 81 matching lines @@
   cursor: pointer;
 }
 
 .app-img-container > img:first-child {
   display: block;
 }
 
 .app .invisible {
   visibility: hidden;
 }
+
+.app-launcher-promo {
+  background-color: white;
+  border: 1px solid lightgray;
+  border-bottom-width: 3px;
+  border-radius: 2px;
+  border-top-width: 2px;
+  bottom: 90px;
+  height: 120px;
+  left: 50%;
+  margin-left: -300px;
+  position: fixed;
+  width: 600px;
+}
+
+.app-launcher-promo > .close-button {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 14px;
+}
+
+.apps-promo-text {
+  color: #222;
+  font: 16px normal Arial, Helvetica, sans-serif;

[arv (Not doing code reviews), 2013/03/25 15:04:38]

Why does the font need to be reset? It is usually better to just inherit the
font.

[MAD, 2013/03/25 15:32:24]

You mean set the font on the outer div and inherit it in the inner divs, right?
If so, done!

[arv (Not doing code reviews), 2013/03/26 14:02:39]

The font is already set on the body.

+  left: 30px;
+  line-height: 24px;
+  position: absolute;
+  top: 30px;
+}
+
+.apps-promo-learn-more {
+  background-color: rgb(77, 144, 254);
+  border: 1px solid rgb(47, 91, 183);
+  border-radius: 2px;
+  box-shadow: rgba(0, 0, 0, 0.0980392) 0 1px 1px 0;

[arv (Not doing code reviews), 2013/03/25 15:04:38]

in case 0.0980391 is too dark?

[MAD, 2013/03/25 15:32:24]

I copied this from the internal style recommendation, I don't mind removing
it...

[arv (Not doing code reviews), 2013/03/26 14:02:39]

I just thought it really strange that they it is not 0.098

+  color: white;
+  cursor: default;
+  font: normal bold 11px Arial, Helvetica, sans-serif;
+  height: 27px;
+  left: 30px;
+  line-height: 27px;
+  margin: 0;

[arv (Not doing code reviews), 2013/03/25 15:04:38]

why is this needed?

[MAD, 2013/03/25 15:32:24]

Again, copied from internal styling... I don't mind removing...

[arv (Not doing code reviews), 2013/03/26 14:02:39]

The goal is to not have anything that is not needed here. It makes things harder
to maintain (as well as increases code size in general).

+  outline-color: white;

[arv (Not doing code reviews), 2013/03/25 15:04:38]

Can't you do "outline: 0 none white"?

Which makes me wonder why you need anything but "outline: 0"?

If you are removing outline you need some other way to make :focused have a
distinct look.

[MAD, 2013/03/25 15:32:24]

Done.

+  outline-style: none;
+  outline-width: 0;
+  padding: 0 8px;
+  position: absolute;
+  text-align: center;
+  text-decoration: none;
+  top: 70px;
+  vertical-align: baseline;

[arv (Not doing code reviews), 2013/03/25 15:04:38]

baseline is the default, isn't it?

I don't understand why you need to specify all of these properties? Try opening
your page and the web inspector and disable one by one and see which ones are
actually needed.

[MAD, 2013/03/25 15:32:24]

Done.

+  width: 90px;
+}
+
+.apps-promo-learn-more:hover {
+  background-image: -webkit-linear-gradient(
+      top, rgb(77, 144, 254), rgb(53, 122, 232));
+  border: 1px solid rgb(47, 91, 183);
+}
+
+.app-launcher-promo > img {
+  bottom: 0;
+  position: absolute;
+  right: 30px;
+}