Wire up notifications to the New Tab page.

chrome/browser/resources/ntp/apps.css

Index: chrome/browser/resources/ntp/apps.css
===================================================================
--- chrome/browser/resources/ntp/apps.css	(revision 90942)
+++ chrome/browser/resources/ntp/apps.css	(working copy)
@@ -30,7 +30,7 @@
   color: black;
   margin: 5px 3px;
   position: absolute;
-  height: 136px;
+  height: 150px;
   width: 124px; /* 920 / 7 - margin * 2 */
   visibility: hidden;
 }
@@ -98,6 +98,23 @@
   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;
 }
@@ -199,3 +216,52 @@
   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;
+}