Wire up notifications to the New Tab page.

chrome/browser/resources/new_tab.html

Index: chrome/browser/resources/new_tab.html
===================================================================
--- chrome/browser/resources/new_tab.html	(revision 90942)
+++ chrome/browser/resources/new_tab.html	(working copy)
@@ -151,6 +151,15 @@
       <button id="apps-promo-hide"></button>
     </div>
     <div id="apps-content"></div>
+    <div id="notification_bubble" class="notification_bubble">
+      <img id="notification_close" src="chrome://theme/IDR_CLOSE_BAR"
+           class="app_notification_close" />

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

indent is 5, should be 4. Don't need / before >. Classes and IDs should use
hyphens rather than underscores.

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

Done.

+      <strong id="notification_title">Title</strong><br>

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

Do you really want this text content?

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

Done.

+      <span id="notification_message">Message</span><br><br>
+      <a class="notification_link" id="notification_link">Link</a></div>
+    <div id="arrow_contents" class="arrow arrow_contents"></div>
+    <div id="arrow_border" class="arrow arrow_border"></div>

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

I can't really say without seeing the final product, but it seems like there
should only be a single arrow div, and its appearance (border, shadow, etc.)
should be controlled with css

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

See screenshot in bug. 

In principal, I agree and I tried but I can't find any way to create a single
div that's triangular in shape and have borders and shadows work properly
(borders and shadows appear rectangular). In fact, this is the way people
recommend you do it because it is hard (impossible?) otherwise. If you have
tricks up your sleeve, I'd be willing to consider them for a future changelist
(I'm running out of time due to vacation that is coming up). :)

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

+    <div id="arrow_shadow" class="arrow arrow_shadow"></div>

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

why do you have arrow_shadow as both an id and class?

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

The class is for .css referencing and the id is to be able to do
GetElementById('arrow_border'). 

GetElementByClassName('arrow_border') doesn't work, probably because the classes
are 'arrow arrow_border' not 'arrow_border', and relying on the class names and
their order not changing seems brittle.

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

you can reference an item by ID in css

   </div>
   <div class="maxiview" id="most-visited-maxiview"></div>