[NTP] Increase size of MV icons

- Favicon size increased from 16dp to 24dp.
- Icon background size increased from 40dp to 48dp.

Bug: 855194
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I8a9e9bede375da1b0ffa7050f97a1de1dd1162ac
Reviewed-on: https://chromium-review.googlesource.com/1132527
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Mathieu Perreault <mathp@chromium.org>
Cr-Commit-Position: refs/heads/master@{#574210}

chrome/browser/resources/local_ntp/local_ntp.css

@@ -4,7 +4,7 @@
 
 html {
   /* Material Design constants */
-  --md-tile-height: 104px;
+  --md-tile-height: 128px;
   --md-tile-margin: 8px;
 
   /* This will be overridden based on the viewport width, see below. */

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -4,18 +4,19 @@
 
 html {
   /* Material Design constants */
-  --md-fallback-letter-size: 17px;
-  --md-favicon-size: 16px;
+  --md-fallback-letter-size: 21px;
+  --md-favicon-size: 24px;
   --md-icon-margin-bottom: 16px;
-  --md-icon-size: 40px;
+  --md-icon-size: 48px;
   --md-max-tiles-row: 5;
   --md-menu-margin-side: 2px;
   --md-menu-margin-top: 4px;
   --md-menu-size: 12px;
-  --md-tile-height: 104px;
+  --md-tile-height: 128px;
   --md-tile-margin: 8px;
-  --md-tile-padding: 8px;
-  --md-tile-width: 88px;
+  --md-tile-padding-horizontal: 8px;
+  --md-tile-padding-vertical: 16px;
+  --md-tile-width: 96px;
   --md-title-font-size: 12px;
   --md-title-height: 32px;
 
@@ -380,7 +381,7 @@ html[dir=rtl] .mv-favicon {
   height: var(--md-tile-height);
   margin-bottom: var(--md-tile-margin);
   opacity: 1;
-  padding: var(--md-tile-padding);
+  padding: var(--md-tile-padding-vertical) var(--md-tile-padding-horizontal);
   position: relative;
   transition-property:
       background, border-color, box-shadow, opacity, text-shadow;

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -605,7 +605,7 @@ function renderMaterialDesignTile(data) {
   let fi = document.createElement('img');
   // TODO(crbug.com/853780): Use data.fallbackBackgroundColorRgba and
   // data.fallbackTextColorRgba;
-  fi.src = 'chrome-search://ntpicon/size/16@' + window.devicePixelRatio + 'x/' +
+  fi.src = 'chrome-search://ntpicon/size/24@' + window.devicePixelRatio + 'x/' +
       data.url;
   // Set title and alt to empty so screen readers won't say the image name.
   fi.title = '';

chrome/browser/search/ntp_icon_source.cc

@@ -48,7 +48,7 @@ namespace {
 const char kSizeParameter[] = "size/";
 
 // Size of the fallback icon (letter + circle), in dp.
-const int kFallbackIconSizeDip = 40;
+const int kFallbackIconSizeDip = 48;
 
 // URL to the server favicon service. "alt=404" means the service will return a
 // 404 if an icon can't be found.
@@ -76,7 +76,7 @@ bool HasSubstringAt(const std::string& path,
 }
 
 // Parses the path after chrome-search://ntpicon/. Example path is
-// "size/16@2x/https://cnn.com".
+// "size/24@2x/https://cnn.com".
 const ParsedNtpIconPath ParseNtpIconPath(const std::string& path) {
   ParsedNtpIconPath parsed;
   parsed.url = GURL();
@@ -96,7 +96,7 @@ const ParsedNtpIconPath ParseNtpIconPath(const std::string& path) {
   if (slash == std::string::npos)
     return parsed;
 
-  // Parse the size spec (e.g. "16@2x")
+  // Parse the size spec (e.g. "24@2x")
   size_t scale_delimiter = path.find("@", parsed_index);
   std::string size_str =
       path.substr(parsed_index, scale_delimiter - parsed_index);