[Local NTP] Implement style updates for Material Design

[Local NTP] Implement style updates for Material Design

Applying new styling, with some refactoring and bug fixes. Details:

- Sizing and positioning tweaks.
- Change of assets for "X" and for default favicon (if it's missing).
  - Using image as mask, and setting color by CSS (since design uses
    solid colors).
- The new PNG files have been minimized.
- Fixed bug: "Undo" and "Restore All" links continue to be selectable
  via tab after they fades out.
- Alternative Google logo (white): using image as mask and setting
  background color to #eee.  Will delete old image for M39.
- Theme title color in title.html <iframe>: now injecting it from local
  NTP in "c=RRGGBBAA" format. The old behavior of reading it from
  <iframe> and using it to override "c=RRGGBB" are kept, for
  compatibility with server-side NTP.

BUG=407943
NOTRY=1
R=mathp@chromium.org, oshima@chromium.org

Committed: https://chromium.googlesource.com/chromium/src/+/00f25d4b013c5aa5e619aacd9e160de53379fe75

[huangs, 2014-08-27 02:21:02]

Patchset #1 (id:1) has been deleted

[huangs, 2014-08-27 02:21:38]

huangs@chromium.org changed reviewers:
+ mathp@chromium.org

[huangs, 2014-08-27 02:21:38]

PTAL.

[Mathieu, 2014-08-27 14:54:53]

Looks really good

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
File chrome/browser/resources/local_ntp/local_ntp.css (right):

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
chrome/browser/resources/local_ntp/local_ntp.css:56: -webkit-mask-image:
url(images/google_logo.png@2x);
are we no longer using white logo? If so, we could remove it from resources.

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
File chrome/browser/resources/local_ntp/local_ntp.js (right):

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
chrome/browser/resources/local_ntp/local_ntp.js:266: * @type {string}
string|null ?

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
chrome/browser/resources/local_ntp/local_ntp.js:310: * Determines whether a
theme should be considered to have dark background.
Mention that you are now looking at the text color to determine this, instead of
the backgroundColor...

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
chrome/browser/resources/local_ntp/local_ntp.js:661:
tileElem.addEventListener('mousedown', function(e) {
Seems to me like it's going to prevent more than what the description says. Can
you think of a case where suppressing mousedown will cause problems?

If you are strictly worried about the X, can you suppress mousedown on the X div
only?

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
File chrome/browser/resources/local_ntp/most_visited_util.js (right):

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
chrome/browser/resources/local_ntp/most_visited_util.js:169: * @return {string}
The color to use.
nit: can you mention output format

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
chrome/browser/resources/local_ntp/most_visited_util.js:181: // For backward
compatibility with server-side NTP, look at themes directly
nit: have you tested with server ntp to make sure this works well?

https://codereview.chromium.org/512583002/diff/20001/ui/resources/ui_resource...
File ui/resources/ui_resources.grd (right):

https://codereview.chromium.org/512583002/diff/20001/ui/resources/ui_resource...
ui/resources/ui_resources.grd:354: <structure type="chrome_scaled_image"
name="IDR_NTP_DEFAULT_FAVICON" file="ntp_default_favicon.png" />
perhaps we can put in <if expr="not is_android and not is_ios"> to save space on
these devices.

[huangs, 2014-08-27 18:13:53]

Updated, PTAL.

There is an existing problem in Chrome themes that by default, makes Google logo
white (alternate logo) if alternate logo is unspecified.  This should be a
separate fix.

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
File chrome/browser/resources/local_ntp/local_ntp.css (right):

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
chrome/browser/resources/local_ntp/local_ntp.css:56: -webkit-mask-image:
url(images/google_logo.png@2x);
Done, removing IDR_LOCAL_NTP_IMAGES_WHITE_LOGO_PNG = ntp_white_google_logo.png.

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
File chrome/browser/resources/local_ntp/local_ntp.js (right):

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
chrome/browser/resources/local_ntp/local_ntp.js:266: * @type {string}
On 2014/08/27 14:54:53, Mathieu Perreault wrote:
> string|null ?

Done.

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
chrome/browser/resources/local_ntp/local_ntp.js:310: * Determines whether a
theme should be considered to have dark background.
Updated comment.  The text color portion is implementation detail, so the
comment is placed inside the routine.

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
chrome/browser/resources/local_ntp/local_ntp.js:661:
tileElem.addEventListener('mousedown', function(e) {
It's not just "X", but also any area outside of <iframe>s (title and favicon). 
Blocking mousedown does not prevent click, so there should be no ill effect.

Updated comments.

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
File chrome/browser/resources/local_ntp/most_visited_util.js (right):

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
chrome/browser/resources/local_ntp/most_visited_util.js:169: * @return {string}
The color to use.
On 2014/08/27 14:54:53, Mathieu Perreault wrote:
> nit: can you mention output format

Done.

https://codereview.chromium.org/512583002/diff/20001/chrome/browser/resources...
chrome/browser/resources/local_ntp/most_visited_util.js:181: // For backward
compatibility with server-side NTP, look at themes directly
Yeah it's easy to test.

https://codereview.chromium.org/512583002/diff/20001/ui/resources/ui_resource...
File ui/resources/ui_resources.grd (right):

https://codereview.chromium.org/512583002/diff/20001/ui/resources/ui_resource...
ui/resources/ui_resources.grd:354: <structure type="chrome_scaled_image"
name="IDR_NTP_DEFAULT_FAVICON" file="ntp_default_favicon.png" />
Good idea.  Done.

[Mathieu, 2014-08-27 19:28:54]

chrome/browser/resources/local_ntp lgtm

https://codereview.chromium.org/512583002/diff/40001/ui/resources/ui_resource...
File ui/resources/ui_resources.grd (right):

https://codereview.chromium.org/512583002/diff/40001/ui/resources/ui_resource...
ui/resources/ui_resources.grd:355: <structure type="chrome_scaled_image"
name="IDR_NTP_DEFAULT_FAVICON" file="ntp_default_favicon.png" />
nit: create a new section of <if expr="not is_android and not is_ios"> just for
this file.

[huangs, 2014-08-27 19:55:36]

huangs@chromium.org changed reviewers:
+ oshima@chromium.org

[huangs, 2014-08-27 19:55:36]

OWNER review to oshima@ for image assets:
  - added 2 * {100%, 200%} images
  - removed 1 * {100%, 200%) images
Please note this we intend to merge this CL into Beta.  Thanks!

https://codereview.chromium.org/512583002/diff/40001/ui/resources/ui_resource...
File ui/resources/ui_resources.grd (right):

https://codereview.chromium.org/512583002/diff/40001/ui/resources/ui_resource...
ui/resources/ui_resources.grd:355: <structure type="chrome_scaled_image"
name="IDR_NTP_DEFAULT_FAVICON" file="ntp_default_favicon.png" />
On 2014/08/27 19:28:54, Mathieu Perreault wrote:
> nit: create a new section of <if expr="not is_android and not is_ios"> just
for
> this file.

Done.

[oshima, 2014-08-27 21:10:33]

can you move new png files to common subdirectory like the old files were?

[huangs, 2014-08-27 21:36:43]

Just confirming before actually moving the files:

Then new PNG do not replace the one that got deleted.  I made close_3_mask.png
live in the same directory as close_2_*.png (these kept for backward
compatibility), and then ntp_default_favicon.png follow close_3_mask.png.

[oshima, 2014-08-27 22:16:55]

On 2014/08/27 21:36:43, huangs1 wrote:
> Just confirming before actually moving the files:
> 
> Then new PNG do not replace the one that got deleted.  I made close_3_mask.png
> live in the same directory as close_2_*.png (these kept for backward
> compatibility), and then ntp_default_favicon.png follow close_3_mask.png.

We no longer use the base directory (for new png files). The correct locations
are common/, cros/, win/.

There are still files in default_xxx_percent/ for historical reasons, but they
should be moved eventually.
Can you move other close buttons too? (or separate CL is fine too)

[huangs, 2014-08-28 16:09:03]

Updated. I was going to move close_2*.png, but turns out they are used
elsewhere, and I don't want to overcomplicate CL (which needs to be Beta
merged)..

PTAL.

[oshima, 2014-08-28 21:48:29]

lgtm

[huangs, 2014-08-28 21:50:06]

Note that there's a bug in CSS checker that would cause presubmit to complain. 
The bug is filed in

https://code.google.com/p/chromium/issues/detail?id=408759

[huangs, 2014-08-28 21:51:14]

The CQ bit was checked by huangs@chromium.org

[commit-bot: I haz the power, 2014-08-28 21:51:54]

CQ is trying da patch. Follow status at
 https://chromium-status.appspot.com/cq/huangs@chromium.org/512583002/80001

[commit-bot: I haz the power, 2014-08-28 22:06:24]

FYI, CQ is re-trying this CL (attempt #1).
The failing builders are:
  linux_gpu on tryserver.chromium.gpu
(http://build.chromium.org/p/tryserver.chromium.gpu/builders/linux_gpu/builds/...)
  mac_gpu on tryserver.chromium.gpu
(http://build.chromium.org/p/tryserver.chromium.gpu/builders/mac_gpu/builds/47825)
  win_gpu on tryserver.chromium.gpu
(http://build.chromium.org/p/tryserver.chromium.gpu/builders/win_gpu/builds/53165)
  android_aosp on tryserver.chromium.linux
(http://build.chromium.org/p/tryserver.chromium.linux/builders/android_aosp/bu...)
  android_arm64_dbg_recipe on tryserver.chromium.linux
(http://build.chromium.org/p/tryserver.chromium.linux/builders/android_arm64_d...)
  android_chromium_gn_compile_rel on tryserver.chromium.linux
(http://build.chromium.org/p/tryserver.chromium.linux/builders/android_chromiu...)
  android_clang_dbg_recipe on tryserver.chromium.linux
(http://build.chromium.org/p/tryserver.chromium.linux/builders/android_clang_d...)
  android_dbg_tests_recipe on tryserver.chromium.linux
(http://build.chromium.org/p/tryserver.chromium.linux/builders/android_dbg_tes...)
  chromium_presubmit on tryserver.chromium.linux
(http://build.chromium.org/p/tryserver.chromium.linux/builders/chromium_presub...)
  linux_chromium_chromeos_rel_swarming on tryserver.chromium.linux
(http://build.chromium.org/p/tryserver.chromium.linux/builders/linux_chromium_...)
  linux_chromium_gn_rel on tryserver.chromium.linux
(http://build.chromium.org/p/tryserver.chromium.linux/builders/linux_chromium_...)
  linux_chromium_rel_swarming on tryserver.chromium.linux
(http://build.chromium.org/p/tryserver.chromium.linux/builders/linux_chromium_...)
  ios_dbg_simulator on tryserver.chromium.mac
(http://build.chromium.org/p/tryserver.chromium.mac/builders/ios_dbg_simulator...)
  ios_rel_device on tryserver.chromium.mac
(http://build.chromium.org/p/tryserver.chromium.mac/builders/ios_rel_device/bu...)
  ios_rel_device_ninja on tryserver.chromium.mac
(http://build.chromium.org/p/tryserver.chromium.mac/builders/ios_rel_device_ni...)
  mac_chromium_compile_dbg on tryserver.chromium.mac
(http://build.chromium.org/p/tryserver.chromium.mac/builders/mac_chromium_comp...)
  mac_chromium_rel_swarming on tryserver.chromium.mac
(http://build.chromium.org/p/tryserver.chromium.mac/builders/mac_chromium_rel_...)
  win8_chromium_rel on tryserver.chromium.win
(http://build.chromium.org/p/tryserver.chromium.win/builders/win8_chromium_rel...)
  win_chromium_compile_dbg on tryserver.chromium.win
(http://build.chromium.org/p/tryserver.chromium.win/builders/win_chromium_comp...)
  win_chromium_rel_swarming on tryserver.chromium.win
(http://build.chromium.org/p/tryserver.chromium.win/builders/win_chromium_rel_...)
  win_chromium_x64_rel_swarming on tryserver.chromium.win
(http://build.chromium.org/p/tryserver.chromium.win/builders/win_chromium_x64_...)

[commit-bot: I haz the power, 2014-08-28 22:08:51]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2014-08-28 22:08:52]

Try jobs failed on following builders:
  mac_gpu on tryserver.chromium.gpu
(http://build.chromium.org/p/tryserver.chromium.gpu/builders/mac_gpu/builds/47839)

[huangs, 2014-08-29 15:47:18]

This CL collided with https://codereview.chromium.org/512943003 , where the
Google logo assets get moved.

Also, it looks like the white Google logo is used elsewhere, so we cannot delete
it yet.

[huangs, 2014-08-29 18:45:39]

The CQ bit was checked by huangs@chromium.org

[commit-bot: I haz the power, 2014-08-29 18:47:32]

CQ is trying da patch. Follow status at
 https://chromium-status.appspot.com/cq/huangs@chromium.org/512583002/120001

[huangs, 2014-08-29 19:25:56]

The CQ bit was unchecked by huangs@chromium.org

[huangs, 2014-08-29 20:45:23]

The CQ bit was checked by huangs@chromium.org

[commit-bot: I haz the power, 2014-08-29 21:59:21]

CQ is trying da patch. Follow status at
 https://chromium-status.appspot.com/cq/huangs@chromium.org/512583002/140001

[commit-bot: I haz the power, 2014-08-29 23:14:20]

FYI, CQ is re-trying this CL (attempt #1).
The failing builders are:
  chromium_presubmit on tryserver.chromium.linux
(http://build.chromium.org/p/tryserver.chromium.linux/builders/chromium_presub...)

[commit-bot: I haz the power, 2014-08-29 23:19:24]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2014-08-29 23:19:26]

Try jobs failed on following builders:
  chromium_presubmit on tryserver.chromium.linux
(http://build.chromium.org/p/tryserver.chromium.linux/builders/chromium_presub...)

[huangs, 2014-08-31 07:49:16]

The presubmit failure is is caused by CSS check bug, detailed in.

https://code.google.com/p/chromium/issues/detail?id=408759

I made a comment change, but going to run trybots to ensure there's no conflict
with oddity.  Once normal tests pass, I'll submit with NOTRY=1.

[huangs, 2014-08-31 07:49:26]

The CQ bit was checked by huangs@chromium.org

[commit-bot: I haz the power, 2014-08-31 07:50:11]

CQ is trying da patch. Follow status at
 https://chromium-status.appspot.com/cq/huangs@chromium.org/512583002/160001

[commit-bot: I haz the power, 2014-08-31 08:44:29]

FYI, CQ is re-trying this CL (attempt #1).
The failing builders are:
  chromium_presubmit on tryserver.chromium.linux
(http://build.chromium.org/p/tryserver.chromium.linux/builders/chromium_presub...)

[commit-bot: I haz the power, 2014-08-31 08:47:58]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2014-08-31 08:48:00]

Try jobs failed on following builders:
  chromium_presubmit on tryserver.chromium.linux
(http://build.chromium.org/p/tryserver.chromium.linux/builders/chromium_presub...)

[huangs, 2014-08-31 14:43:44]

The CQ bit was checked by huangs@chromium.org

[commit-bot: I haz the power, 2014-08-31 14:44:35]

CQ is trying da patch. Follow status at
 https://chromium-status.appspot.com/cq/huangs@chromium.org/512583002/160001

[commit-bot: I haz the power, 2014-08-31 14:47:15]

FYI, CQ is re-trying this CL (attempt #1).
The failing builders are:
  chromium_presubmit on tryserver.chromium.linux
(http://build.chromium.org/p/tryserver.chromium.linux/builders/chromium_presub...)

[commit-bot: I haz the power, 2014-08-31 14:51:15]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2014-08-31 14:51:16]

Try jobs failed on following builders:
  chromium_presubmit on tryserver.chromium.linux
(http://build.chromium.org/p/tryserver.chromium.linux/builders/chromium_presub...)

[huangs, 2014-08-31 14:53:02]

Will have to use "git cl land".

[huangs, 2014-08-31 18:20:39]

Committed patchset #8 (id:160001) manually as 00f25d4 (presubmit successful).

[commit-bot: I haz the power, 2014-09-10 03:15:09]

Patchset 8 (id:??) landed as
https://crrev.com/00f25d4b013c5aa5e619aacd9e160de53379fe75
Cr-Commit-Position: refs/heads/master@{#292820}