[Local NTP] Implementing Material Design styling

We also want the "classical" NTP to coexist with the new design, and
switchable via Finch. Key changes:
- Adding classes to #ntp-content, then using CSS to control styling.
  - .classical for old NTP
  - .md for Material Design
  - .default-theme for values that will be overriden by themes. This is
    needed so dynamic CSS changes in setCustomThemeStyle() are not
    subsumed by specialized .classical and .md.
  - .dark: for dark background.
- The .mv-mask <div> is promoted to handle tile effects, including
  border, shadow, and background. Borders are drawn differently now.
  This lead to fix of 1px offset of .mv-title .

Some new designs are still in flux. Our goal is to get a reasonable bulk
committed for m38, then worry about some tune-ups later.

TEST=Run "chrome.exe --force-fieldtrials=MaterialDesignNTP/Enabled/",
visit chrome-search://local-ntp/local-ntp.html . If chrome.exe is run
without the switch, the local NTP should be identical to before, except
for 1px .mv-title shift.

BUG=400332

Review URL: https://codereview.chromium.org/473583002

Cr-Commit-Position: refs/heads/master@{#289682}
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@289682 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/local_ntp/local_ntp_design.js

@@ -4,26 +4,33 @@
 
 
 /**
- * @fileoverview Specifications for the NTP design, and an accessor to presets.
+ * @fileoverview Specifications for NTP design, and an accessor to presets.
  */
 
+ var THUMBNAIL_FALLBACK = {
+   DOT: 'dot'  // Draw single dot.
+ };
 
 /**
  * Specifications for an NTP design (not comprehensive).
  *
  * name: A unique identifier for the style.
- *   appropriate CSS will take effect.
  * fontFamily: Font family to use for title and thumbnail <iframe>s.
  * fontSize: Font size to use for the <iframe>s, in px.
  * tileWidth: The width of each suggestion tile, in px.
  * tileMargin: Spacing between successive tiles, in px.
  * titleColor: The RRGGBB color of title text.
+ * titleColorAgainstDark: The RRGGBB color of title text against a dark theme.
  * titleTextAlign: (Optional) The alignment of title text. If unspecified, the
  *   default value is 'center'.
  * titleTextFade: (Optional) The number of pixels beyond which title
  *   text begins to fade. This overrides the default ellipsis style.
  * thumbnailTextColor: The RRGGBB color that thumbnail <iframe> may use to
  *   display text message in place of missing thumbnail.
+ * thumbnailFallback: (Optional) A value in THUMBNAIL_FALLBACK to specify the
+ *   thumbnail fallback strategy. If unassigned, then the thumbnail.html
+ *   <iframe> would handle the fallback.
+ * showFakeboxHint: Whether to display text in the fakebox.
  *
  * @typedef {{
  *   name: string,
@@ -32,9 +39,12 @@
  *   tileWidth: number,
  *   tileMargin: number,
  *   titleColor: string,
+ *   titleColorAgainstDark: string,
  *   titleTextAlign: string|null|undefined,
  *   titleTextFade: string|null|undefined,
- *   thumbnailTextColor: string
+ *   thumbnailTextColor: string,
+ *   thumbnailFallback: string|null|undefined
+ *   showFakeboxHint: string|null|undefined
  * }}
  */
 var NtpDesign;
@@ -46,16 +56,38 @@ var NtpDesign;
  * @return {NtpDesign} The NTP design corresponding to name.
  */
 function getNtpDesign(opt_name) {
-  // TODO(huangs): Add new style.
-  return {
-    name: 'classical',
-    fontFamily: 'arial, sans-serif',
-    fontSize: 11,
-    tileWidth: 140,
-    tileMargin: 20,
-    titleColor: '777777',
-    // No titleTextAlign: defaults to 'center'.
-    // No titleTextFade: by default we have ellipsis.
-    thumbnailTextColor: '777777'
-  };
+  var ntpDesign = null;
+
+  if (opt_name === 'md') {
+    ntpDesign = {
+      name: opt_name,
+      fontFamily: 'arial, sans-serif',
+      fontSize: 12,
+      tileWidth: 146,
+      tileMargin: 12,
+      titleColor: '000000',
+      titleColorAgainstDark: 'd2d2d2',
+      titleTextAlign: 'inherit',
+      titleTextFade: 112 - 24,  // 112px wide title with 24 pixel fade at end.
+      thumbnailTextColor: '777777',
+      thumbnailFallback: THUMBNAIL_FALLBACK.DOT,
+      showFakeboxHint: true
+    };
+  } else {
+    ntpDesign = {
+      name: 'classical',
+      fontFamily: 'arial, sans-serif',
+      fontSize: 11,
+      tileWidth: 140,
+      tileMargin: 20,
+      titleColor: '777777',
+      titleColorAgainstDark: '777777',
+      titleTextAlign: 'center',
+      titleTextFade: null,  // Default to ellipsis.
+      thumbnailTextColor: '777777',
+      thumbnailFallback: null,  // Default to false.
+      showFakeboxHint: false
+    };
+  }
+  return ntpDesign;
 }

chrome/browser/resources/local_ntp/most_visited_thumbnail.css

@@ -23,14 +23,7 @@ div {
   width: 90%;
 }
 
-img,
-.shadow {
-  border-radius: 2px;
+img {
   height: 100%;
   width: 100%;
 }
-
-.shadow {
-  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.09);
-  position: absolute;
-}
\ No newline at end of file

chrome/browser/resources/local_ntp/most_visited_thumbnail.js

@@ -42,17 +42,15 @@ window.addEventListener('DOMContentLoaded', function() {
     function createThumbnail(src) {
       var image = document.createElement('img');
       image.onload = function() {
-        var shadow = document.createElement('span');
-        shadow.className = 'shadow';
         var link = createMostVisitedLink(
             params, data.url, data.title, undefined, data.direction,
             data.provider);
-        link.appendChild(shadow);
         link.appendChild(image);
         displayLink(link);
       };
       image.onerror = function() {
-        if (data.domain) {
+        // If no external thumbnail fallback (etfb), and have domain.
+        if (!params.etfb && data.domain) {
           showDomainElement();
           logEvent(NTP_LOGGING_EVENT_TYPE.NTP_GRAY_TILE_FALLBACK);
         } else {

chrome/browser/resources/local_ntp/most_visited_util.js

@@ -156,6 +156,9 @@ function createMostVisitedLink(params, href, title, text, direction, provider) {
     }
     // Else follow <a> normally, so transition type would be LINK.
   });
+  link.addEventListener('mousedown', function(e) {
+    e.preventDefault();  // Prevent drag-select.
+  });
 
   return link;
 }
@@ -163,11 +166,11 @@ function createMostVisitedLink(params, href, title, text, direction, provider) {
 
 /**
  * Decodes most visited styles from URL parameters.
+ * - c: A hexadecimal number interpreted as a hex color code.
  * - f: font-family.
  * - fs: font-size as a number in pixels.
  * - ta: text-align property, as a string.
  * - tf: specifying a text fade starting position, in pixels.
- * - c: A hexadecimal number interpreted as a hex color code.
  * @param {Object.<string, string>} params URL parameters specifying style.
  * @param {boolean} isTitle if the style is for the Most Visited Title.
  * @return {Object} Styles suitable for CSS interpolation.

chrome/browser/search/local_ntp_source.cc

@@ -36,7 +36,8 @@ namespace {
 const char kMaterialDesignNTPFieldTrialName[] = "MaterialDesignNTP";
 const char kMaterialDesignNTPFieldTrialEnabledPrefix[] = "Enabled";
 
-// Name to be used for the new design in local resources.
+// Names of NTP designs in local resources, also used in CSS.
+const char kClassicalNTPName[] = "classical";
 const char kMaterialDesignNTPName[] = "md";
 
 // Signifies a locally constructed resource, i.e. not from grit/.
@@ -188,7 +189,7 @@ void LocalNtpSource::StartDataRequest(
   if (stripped_path == kLocalNTPFilename) {
     SendResourceWithClass(
         IDR_LOCAL_NTP_HTML,
-        IsMaterialDesignEnabled() ? kMaterialDesignNTPName : "",
+        IsMaterialDesignEnabled() ? kMaterialDesignNTPName : kClassicalNTPName,
         callback);
     return;
   }