Wire up notifications to the New Tab page.

chrome/browser/resources/ntp/apps.css

 /* Apps */
 
 #apps-content {
   position: relative;
   max-width: 780px;  /* (124 + margin * 2) * 6 */
 }
 
 html.apps-promo-visible #apps-content {
   max-width: 650px; /* (124 + margin * 2) * 5 */
 }
@@ skipping 12 matching lines @@
 }
 
 .app,
 .app[new=installed] {
   box-sizing: border-box;
   -webkit-perspective: 400;
   border-radius: 10px;
   color: black;
   margin: 5px 3px;
   position: absolute;
-  height: 136px;
+  height: 150px;
   width: 124px; /* 920 / 7 - margin * 2 */
   visibility: hidden;
 }
 
 .app a {
   border-radius: 10px;
   bottom: 0;
   left: 0;
   position: absolute;
   right: 0;
@@ skipping 47 matching lines @@
 }
 
 .app.dragging > .app-settings {
   background-image: none;
 }
 
 .app.dragging {
   opacity: .7;
 }
 
+.app_notification {
+  color: Gray;  

[Evan Stade, 2011/06/30 23:20:33]

don't upper case the color

[Finnur, 2011/07/01 00:33:55]

Done.

+  display: block;
+  -webkit-transition: color .15s linear;
+}
+.app_notification:hover {
+  color: Blue;
+}
+
+.app_notification_close {
+  width: 14px;

[Evan Stade, 2011/06/30 23:20:33]

alphabetize

[Finnur, 2011/07/01 00:33:55]

Done.

+  height: 14px;
+  position: absolute;
+  right: 6px;
+  top: 6px;
+}
+
 #apps-content[launcher-animations=true] .app {
   -webkit-transition: top .2s, left .2s, right .2s, opacity .2s;
 }
 
 #apps-content.visible .app {
   visibility: visible;
 }
 
 @-webkit-keyframes bounce {
   0% {
@@ skipping 81 matching lines @@
   border-width: 6px 10px 12px 6px;
   -webkit-border-image: url('g-button-chocobo.png') 6 10 12 6;
   font-size: 1.3em;
   color: #fff !important;
   text-decoration: none;
   font-weight: bold;
   text-align: center;
   padding: 2px 10px;
   white-space: nowrap;
 }
+
+.notification_bubble {
+  /* Size and position */
+  width: 200px;

[Evan Stade, 2011/06/30 23:20:33]

alphabetize the properties

it is crappy that related properties such as width and height end up far from
each other, but it makes it easier to find whether a property is defined (don't
have to search through the whole list of properties)

[Finnur, 2011/07/01 00:33:55]

Done.

+  position: absolute;
+  min-height: 100px;

[Evan Stade, 2011/06/30 23:20:33]

where do you set height?

[Finnur, 2011/07/01 00:33:55]

I don't. This is set by the content at the moment.

On 2011/06/30 23:20:33, Evan Stade wrote:

+  min-width: 200px;

[Evan Stade, 2011/06/30 23:20:33]

where do you set width (besides above)?

[Finnur, 2011/07/01 00:33:55]

I don't follow. Why do I need to set it elsewhere (besides above)? The bubble
has a fixed width of 200px and grows down based on text content.

On 2011/06/30 23:20:33, Evan Stade wrote:

[Evan Stade, 2011/07/02 00:27:50]

how does it grow? If you set width as you have done, it will always be that
size. I think you just want min-width and not width?

+
+  /* General display properties, border, visibility */
+  opacity: 0;
+  border: 1px solid #B5B5B5;
+  -webkit-border-radius: 5px;
+  -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);

[Evan Stade, 2011/06/30 23:20:33]

write 0 instead of 0px

[Finnur, 2011/07/01 00:33:55]

Done.

+  -webkit-transition: opacity 0.2s linear;
+  
+  /* Content styles and formatting */
+  background-color: White;
+  padding: 10px 10px 10px 10px;

[Evan Stade, 2011/06/30 23:20:33]

padding: 10px suffices

[Finnur, 2011/07/01 00:33:55]

Done.

+  font-family: Helvetica, Arial, sans-serif;
+  font-size : 107%;
+}
+.notification_bubble:focus {
+  outline: none;
+}
+
+/* A content-less div with this setting, will create an arrow when coupled
+   with the arrow_* styles below it. */
+div.arrow {
+  opacity: 0;
+  border-style: solid;
+  border-width: 12px;
+  height: 0px;
+  width: 0px;
+  position: absolute;
+}
+div.arrow_contents {
+  border-color: transparent white transparent transparent;
+  z-index: 2;
+  -webkit-transition: opacity 0.2s linear;
+}
+div.arrow_shadow {
+  border-color: transparent gray transparent transparent;
+  -webkit-transition: opacity 0.2s linear;
+}
+div.arrow_border {
+  border-color: transparent #B5B5B5 transparent transparent;
+  z-index: 1;
+  -webkit-transition: opacity 0.2s linear;
+}