Polish the new tab notification code a bit, as per request in last review (style changes).

Polish the new tab notification code a bit, as per request in last review (style changes).

BUG=88067
TEST=None, notifications should work as before.
Committed: http://src.chromium.org/viewvc/chrome?view=rev&revision=96542

[Finnur, 2011-08-11 12:15:26]

As promised, here is an updated CL that addresses the smaller issues raised in
your previous code review:
http://codereview.chromium.org/7291004/

And, to answer the question raised outside of the code comments:

> having seen the arrow, it seems like you could create 
> a square div with border and shadow and apply
> -webkit-transform: rotate(45deg)

It's not that simple. I need layers of triangles with different z-indexes
because some of the triangles need to be below the bubble (think: shadow) and
some above it (think: white triangle that hides a part of the border of the
bubble).

The rotated square div idea breaks down primarily because it needs to be on top
and would therefore not only obscure the border (good) but -- due to it's
rectangular shape -- also obscure parts of the text contained within the bubble
(bad).

That aside, I've implemented your recommendations. Please take a look.

[Evan Stade, 2011-08-11 17:08:29]

thank you. LGTM.

I've actually already written the rotated-div bubble code (although it's not
committed yet). See here for how I did it:
http://codereview.chromium.org/7461160/

When you port this to ntp4, you should use that bubble class.

http://codereview.chromium.org/7623010/diff/1/chrome/browser/resources/ntp/ap...
File chrome/browser/resources/ntp/apps.css (right):

http://codereview.chromium.org/7623010/diff/1/chrome/browser/resources/ntp/ap...
chrome/browser/resources/ntp/apps.css:258: height: 0px;
0 (no px)

http://codereview.chromium.org/7623010/diff/1/chrome/browser/resources/ntp/ap...
chrome/browser/resources/ntp/apps.css:263: z-index: 2;
alphabetical