Different approach to NTP layout

Instead of trying to arrange things so that there is something covering all the parts of the scrollable area we don't want to see, use -webkit-image-mask to only show the parts we do want to see.

This change also fixes overflow of miniview items. Under some circumstances, the old JS approach wasn't working. Used a CSS one instead.

TEST=Set up most visisted so that it has items. Start it in
expanded mode. Minimize it. There should be no clipped last
item.

Committed: http://src.chromium.org/viewvc/chrome?view=rev&revision=58451

[arv (Not doing code reviews), 2010-09-01 23:48:33]

LGTM with nits

http://codereview.chromium.org/3363001/diff/1/3
File chrome/browser/resources/new_new_tab.js (right):

http://codereview.chromium.org/3363001/diff/1/3#newcode121
chrome/browser/resources/new_new_tab.js:121:
parseInt(computedStyle.getPropertyValue("margin-top")) +
Don't use parseInt without a radix.

Single quotes... but you don't need to use getPropertyValue

return elm.offsetHeight + 
    parseFloat(computedStyle.marginTop) +
    parseFloat(computedStyle.marginBottom);

[Aaron Boodman, 2010-09-02 07:08:06]

I ended up doing this a different way. Please take a second look.

[arv (Not doing code reviews), 2010-09-02 15:56:15]

LGTM

[Aaron Boodman, 2010-09-02 19:06:53]

I updated this cl to include the new layout approach we talked about yesterday.

This makes it much more flexible because we don't have to ensure that something
is always covering unwanted areas of the scrollable content.

I brought back the sync section as a test of the concept.

See screen cap here:
http://imgur.com/k8DsF

Spacing still needs futzing, but I'm futzed out for the moment.

[arv (Not doing code reviews), 2010-09-03 00:24:22]

LGTM

http://codereview.chromium.org/3363001/diff/3002/12003
File chrome/browser/resources/new_new_tab.js (right):

http://codereview.chromium.org/3363001/diff/3002/12003#newcode240
chrome/browser/resources/new_new_tab.js:240: var gradientDestination =
"rgba(0,0,0," + (gradientHeightPx / 10) + ")";
s/"/'/

http://codereview.chromium.org/3363001/diff/3002/12003#newcode261
chrome/browser/resources/new_new_tab.js:261: console.log(gradient);
can you remove this log?