Smooth scrolling effect to mosaic view.

Smooth scrolling effect to mosaic view.

In slide view we have nice sliding transition effect, while in mosaic view not. This patch adds a simple sliding animation, which is especially visible when using a keyboard. Along the way, adds scrolling margins, so it is possible to navigate without using keyboard. Refer to a screenshot in the bug description.

TEST=Open a directory (on Drive) with lots of pictures, enter mosaic view, scroll using keyboard.
BUG=174575
Committed: https://src.chromium.org/viewvc/chrome?view=rev&revision=181860

[mtomasz, 2013-02-12 01:10:29]

@yoshiki: PTAL.

[yoshiki, 2013-02-12 01:30:52]

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
File chrome/browser/resources/file_manager/js/photo/mosaic_mode.js (right):

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
chrome/browser/resources/file_manager/js/photo/mosaic_mode.js:185:
clearInterval(this.scrollTimer_);
Assign null or undefined after clearing the interval.

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
chrome/browser/resources/file_manager/js/photo/mosaic_mode.js:202:
this.scrollTimer_ = setInterval(function() {
It is better to use "requestAnimationFrame" on animation purpose.

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
chrome/browser/resources/file_manager/js/photo/mosaic_mode.js:209:
console.log(step);
Remove?

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
chrome/browser/resources/file_manager/js/photo/mosaic_mode.js:212: if
(lastScrollLeft == this.scrollLeft) {
We can replace this condition with just "step == 0", right?

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
chrome/browser/resources/file_manager/js/photo/mosaic_mode.js:250: if (tile)
tile.scrollIntoView();
Add the boolean argument |opt_animated|.

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
chrome/browser/resources/file_manager/js/photo/mosaic_mode.js:413: if (tile)
tile.scrollIntoView();
Add the boolean argument |opt_animated|.

[mtomasz, 2013-02-12 04:19:21]

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
File chrome/browser/resources/file_manager/js/photo/mosaic_mode.js (right):

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
chrome/browser/resources/file_manager/js/photo/mosaic_mode.js:185:
clearInterval(this.scrollTimer_);
On 2013/02/12 01:30:52, yoshiki wrote:
> Assign null or undefined after clearing the interval.

Done.

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
chrome/browser/resources/file_manager/js/photo/mosaic_mode.js:202:
this.scrollTimer_ = setInterval(function() {
On 2013/02/12 01:30:52, yoshiki wrote:
> It is better to use "requestAnimationFrame" on animation purpose.

This is great, I didn't know about it! Done.

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
chrome/browser/resources/file_manager/js/photo/mosaic_mode.js:209:
console.log(step);
On 2013/02/12 01:30:52, yoshiki wrote:
> Remove?

Done.

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
chrome/browser/resources/file_manager/js/photo/mosaic_mode.js:212: if
(lastScrollLeft == this.scrollLeft) {
On 2013/02/12 01:30:52, yoshiki wrote:
> We can replace this condition with just "step == 0", right?

Nope, this didn't work when reaching edges, eg. when scrollLeft is less than
step. I believe this if is easier than checking if step == 0 and >= than
scrollLeft and <= scrollLeft + width.

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
chrome/browser/resources/file_manager/js/photo/mosaic_mode.js:250: if (tile)
tile.scrollIntoView();
On 2013/02/12 01:30:52, yoshiki wrote:
> Add the boolean argument |opt_animated|.

Can you clarify? This argument is optional.

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
chrome/browser/resources/file_manager/js/photo/mosaic_mode.js:413: if (tile)
tile.scrollIntoView();
On 2013/02/12 01:30:52, yoshiki wrote:
> Add the boolean argument |opt_animated|.

As above, please clarify.

[yoshiki, 2013-02-12 04:49:10]

lgtm

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
File chrome/browser/resources/file_manager/js/photo/mosaic_mode.js (right):

https://codereview.chromium.org/12208042/diff/6001/chrome/browser/resources/f...
chrome/browser/resources/file_manager/js/photo/mosaic_mode.js:250: if (tile)
tile.scrollIntoView();
Sorry, it was my mistake. It's optional.

On 2013/02/12 04:19:21, mtomasz wrote:
> On 2013/02/12 01:30:52, yoshiki wrote:
> > Add the boolean argument |opt_animated|.
> 
> Can you clarify? This argument is optional.