[Local NTP] Implementing Material Design styling

chrome/browser/resources/local_ntp/local_ntp.js

 // Copyright 2013 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 
 /**
  * @fileoverview The local InstantExtended NTP.
  */
 
 
@@ skipping 10 matching lines @@
 
 /**
  * Enum for classnames.
  * @enum {string}
  * @const
  */
 var CLASSES = {
   ALTERNATE_LOGO: 'alternate-logo', // Shows white logo if required by theme
   BLACKLIST: 'mv-blacklist', // triggers tile blacklist animation
   BLACKLIST_BUTTON: 'mv-x',
+  DARK: 'dark',
   DELAYED_HIDE_NOTIFICATION: 'mv-notice-delayed-hide',
+  DOT: 'dot',
   FAKEBOX_DISABLE: 'fakebox-disable', // Makes fakebox non-interactive
   FAKEBOX_FOCUS: 'fakebox-focused', // Applies focus styles to the fakebox
   // Applies drag focus style to the fakebox
   FAKEBOX_DRAG_FOCUS: 'fakebox-drag-focused',
   FAVICON: 'mv-favicon',
   HIDE_BLACKLIST_BUTTON: 'mv-x-hide', // hides blacklist button during animation
   HIDE_FAKEBOX_AND_LOGO: 'hide-fakebox-logo',
   HIDE_NOTIFICATION: 'mv-notice-hide',
   // Vertically centers the most visited section for a non-Google provided page.
   NON_GOOGLE_PAGE: 'non-google-page',
   PAGE: 'mv-page', // page tiles
   PAGE_READY: 'mv-page-ready',  // page tile when ready
   RTL: 'rtl',  // Right-to-left language text.
   THUMBNAIL: 'mv-thumb',
+  THUMBNAIL_FALLBACK: 'mv-thumb-fallback',
   THUMBNAIL_MASK: 'mv-mask',
   TILE: 'mv-tile',
+  TILE_INNER: 'mv-tile-inner',
   TITLE: 'mv-title'
 };
 
 
 /**
  * Enum for HTML element ids.
  * @enum {string}
  * @const
  */
 var IDS = {
@@ skipping 104 matching lines @@
 /**
  * True if a page has been blacklisted and we're waiting on the
  * onmostvisitedchange callback. See onMostVisitedChange() for how this
  * is used.
  * @type {boolean}
  */
 var isBlacklisting = false;
 
 
 /**
+ * Stores whether the current theme has a dark background.
+ * @type {boolean}
+ */
+var isBackgroundDark = false;
+
+
+/**
  * Current number of tiles columns shown based on the window width, including
  * those that just contain filler.
  * @type {number}
  */
 var numColumnsShown = 0;
 
 
 /**
  * A flag to indicate Most Visited changed caused by user action. If true, then
  * in onMostVisitedChange() tiles remain visible so no flickering occurs.
@@ skipping 77 matching lines @@
  * @const
  */
 var MOST_VISITED_PAINT_TIMEOUT_MSEC = 500;
 
 
 /**
  * A Tile is either a rendering of a Most Visited page or "filler" used to
  * pad out the section when not enough pages exist.
  *
  * @param {Element} elem The element for rendering the tile.
+ * @param {Element=} opt_innerElem The element for contents of tile.
  * @param {Element=} opt_titleElem The element for rendering the title.
  * @param {Element=} opt_thumbnailElem The element for rendering the thumbnail.
  * @param {number=} opt_rid The RID for the corresponding Most Visited page.
  *     Should only be left unspecified when creating a filler tile.
  * @constructor
  */
-function Tile(elem, opt_titleElem, opt_thumbnailElem, opt_rid) {
+function Tile(elem, opt_innerElem, opt_titleElem, opt_thumbnailElem, opt_rid) {
   /** @type {Element} */
   this.elem = elem;
 
   /** @type {Element|undefined} */
+  this.innerElem = opt_innerElem;
+
+  /** @type {Element|undefined} */
   this.titleElem = opt_titleElem;
 
   /** @type {Element|undefined} */
   this.thumbnailElem = opt_thumbnailElem;
 
   /** @type {number|undefined} */
   this.rid = opt_rid;
 }
 
 
 /**
+ * Determines whether a theme should be considered to have dark background.
+ * @param {ThemeBackgroundInfo} info Theme background information.
+ * @return {boolean} Whether the theme has dark background.
+ * @private
+ */
+function getIsBackgroundDark(info) {

[Mathieu, 2014/08/13 20:09:29]

rename to isThemeBackgroundDark?

[huangs, 2014/08/13 21:34:08]

Inlined this into renderTheme(), since predominately we use the variable
isBackgroundDark.

+  if (info.imageUrl)
+    return true;
+  var rgba = info.backgroundColorRgba;
+  var luminance = 0.3 * rgba[0] + 0.59 * rgba[1] + 0.11 * rgba[2];
+  return luminance < 128;
+}
+
+
+/**
  * Updates the NTP based on the current theme.
  * @private
  */
-function onThemeChange() {
+function renderTheme() {
   var info = ntpApiHandle.themeBackgroundInfo;
-  if (!info)
+  if (!info) {
+    isBackgroundDark = false;
     return;
+  }
+
+  isBackgroundDark = getIsBackgroundDark(info);
+  ntpContents.classList.toggle(CLASSES.DARK, isBackgroundDark);
 
   var background = [convertToRGBAColor(info.backgroundColorRgba),
                     info.imageUrl,
                     info.imageTiling,
                     info.imageHorizontalAlignment,
                     info.imageVerticalAlignment].join(' ').trim();
   document.body.style.background = background;
   document.body.classList.toggle(CLASSES.ALTERNATE_LOGO, info.alternateLogo);
   updateThemeAttribution(info.attributionUrl);
   setCustomThemeStyle(info);
+}
 
+
+/**
+ * Updates the NTP based on the current theme, then rerenders all tiles.
+ * @private
+ */
+function onThemeChange() {
+  renderTheme();
   tilesContainer.innerHTML = '';
   renderAndShowTiles();
 }
 
 
 /**
  * Updates the NTP style according to theme.
  * @param {Object=} opt_themeInfo The information about the theme. If it is
  * omitted the style will be reverted to the default.
  * @private
@@ skipping 86 matching lines @@
                     color[3] / 255 + ')';
 }
 
 
 /**
  * Handles a new set of Most Visited page data.
  */
 function onMostVisitedChange() {
   if (isBlacklisting) {
     // Trigger the blacklist animation, which then triggers reloadAllTiles().
-    var lastBlacklistedTileElement = lastBlacklistedTile.elem;
-    lastBlacklistedTileElement.addEventListener(
+    var lastBlacklistedTileElem = lastBlacklistedTile.elem;
+    lastBlacklistedTileElem.addEventListener(
         'webkitTransitionEnd', blacklistAnimationDone);
-    lastBlacklistedTileElement.classList.add(CLASSES.BLACKLIST);
+    lastBlacklistedTileElem.classList.add(CLASSES.BLACKLIST);
   } else {
     reloadAllTiles();
   }
 }
 
 
 /**
  * Handles the end of the blacklist animation by showing the notification and
  * re-rendering the new set of tiles.
  */
@@ skipping 21 matching lines @@
     tiles.push(createTile(pages[i], i));
 
   tilesContainer.innerHTML = '';
   renderAndShowTiles();
 }
 
 
 /**
  * Binds onload events for a tile's internal <iframe> elements.
  * @param {Tile} tile The main tile to bind events to.
- * @param {Barrier} tileVisibilityBarrier A barrier to make tile visible the
- *   moment all tiles are loaded.
+ * @param {Barrier} tileVisibilityBarrier A barrier to make all tiles visible
+ *   the moment all tiles are loaded.
  */
 function bindTileOnloadEvents(tile, tileVisibilityBarrier) {
   if (tile.titleElem) {
     tileVisibilityBarrier.add();
     tile.titleElem.onload = function() {
-      tile.titleElem.hidden = false;
       tileVisibilityBarrier.remove();
     };
   }
-
   if (tile.thumbnailElem) {
     tileVisibilityBarrier.add();
     tile.thumbnailElem.onload = function() {
-      tile.thumbnailElem.hidden = false;
       tile.elem.classList.add(CLASSES.PAGE_READY);
       tileVisibilityBarrier.remove();
     };
   }
 }
 
 
 /**
  * Renders the current list of visible tiles to DOM, and hides tiles that are
  * already in the DOM but should not be seen.
  */
 function renderAndShowTiles() {
   var numExisting = tilesContainer.querySelectorAll('.' + CLASSES.TILE).length;
   // Only add visible tiles to the DOM, to avoid creating invisible tiles that
   // produce meaningless impression metrics. However, if a tile becomes
   // invisible then we leave it in DOM to prevent reload if it's shown again.
   var numDesired = Math.min(tiles.length, numColumnsShown * NUM_ROWS);
 
   // If we need to render new tiles, manage the visibility to hide intermediate
   // load states of the <iframe>s.
   if (numExisting < numDesired) {
-    var tileVisibilityBarrier = new Barrier(function() {
-      tilesContainer.style.visibility = 'visible';
-    });
+    var showAll = function() {
+      for (var i = 0; i < numDesired; ++i) {
+        if (tiles[i].titleElem || tiles[i].thumbnailElem)
+          tiles[i].elem.classList.add(CLASSES.PAGE_READY);
+      }
+    };
+    var tileVisibilityBarrier = new Barrier(showAll);
 
     if (!userInitiatedMostVisitedChange) {
       // Make titleContainer invisible, but still taking up space.
       // titleContainer becomes visible again (1) on timeout, or (2) when all
       // tiles finish loading (using tileVisibilityBarrier).
-      tilesContainer.style.visibility = 'hidden';
       window.setTimeout(function() {
         tileVisibilityBarrier.cancel();
-        tilesContainer.style.visibility = 'visible';
+        showAll();
       }, MOST_VISITED_PAINT_TIMEOUT_MSEC);
     }
     userInitiatedMostVisitedChange = false;
 
     for (var i = numExisting; i < numDesired; ++i) {
       bindTileOnloadEvents(tiles[i], tileVisibilityBarrier);
       tilesContainer.appendChild(tiles[i].elem);
     }
   }
 
-  // Show only the desired tiles. Not using .hidden because it does not work for
-  // inline-block elements.
+  // Show only the desired tiles. Note that .hidden does not work for
+  // inline-block elements like tiles[i].elem.
   for (var i = 0; i < numDesired; ++i)
     tiles[i].elem.style.display = 'inline-block';
   // If |numDesired| < |numExisting| then hide extra tiles (e.g., this occurs
   // when window is downsized).
   for (; i < numExisting; ++i)
     tiles[i].elem.style.display = 'none';
 }
 
 
 /**
  * Builds a URL to display a most visited tile title in an iframe.
  * @param {number} rid The restricted ID.
  * @param {number} position The position of the iframe in the UI.
  * @return {string} An URL to display the most visited title in an iframe.
  */
 function getMostVisitedTitleIframeUrl(rid, position) {
   var url = 'chrome-search://most-visited/' +
       encodeURIComponent(MOST_VISITED_TITLE_IFRAME);
+  var titleColor = isBackgroundDark ? NTP_DESIGN.titleColorAgainstDark :
+      NTP_DESIGN.titleColor;
   var params = [
       'rid=' + encodeURIComponent(rid),
       'f=' + encodeURIComponent(NTP_DESIGN.fontFamily),
       'fs=' + encodeURIComponent(NTP_DESIGN.fontSize),
-      'c=' + encodeURIComponent(NTP_DESIGN.titleColor),
+      'c=' + encodeURIComponent(titleColor),
       'pos=' + encodeURIComponent(position)];
   if (NTP_DESIGN.titleTextAlign)
     params.push('ta=' + encodeURIComponent(NTP_DESIGN.titleTextAlign));
   if (NTP_DESIGN.titleTextFade)
     params.push('tf=' + encodeURIComponent(NTP_DESIGN.titleTextFade));
   return url + '?' + params.join('&');
 }
 
 
 /**
  * Builds a URL to display a most visited tile thumbnail in an iframe.
  * @param {number} rid The restricted ID.
  * @param {number} position The position of the iframe in the UI.
  * @return {string} An URL to display the most visited thumbnail in an iframe.
  */
 function getMostVisitedThumbnailIframeUrl(rid, position) {
   var url = 'chrome-search://most-visited/' +
       encodeURIComponent(MOST_VISITED_THUMBNAIL_IFRAME);
   var params = [
       'rid=' + encodeURIComponent(rid),
       'f=' + encodeURIComponent(NTP_DESIGN.fontFamily),
       'fs=' + encodeURIComponent(NTP_DESIGN.fontSize),
       'c=' + encodeURIComponent(NTP_DESIGN.thumbnailTextColor),
       'pos=' + encodeURIComponent(position)];
+  if (NTP_DESIGN.thumbnailFallback)
+    params.push('tfb=1');
   return url + '?' + params.join('&');
 }
 
 
 /**
  * Creates a Tile with the specified page data. If no data is provided, a
  * filler Tile is created.
  * @param {Object} page The page data.
  * @param {number} position The position of the tile.
  * @return {Tile} The new Tile.
  */
 function createTile(page, position) {
-  var tileElement = document.createElement('div');
-  tileElement.classList.add(CLASSES.TILE);
+  var tileElem = document.createElement('div');
+  tileElem.classList.add(CLASSES.TILE);
+  var innerElem = createAndAppendElement(tileElem, 'div', CLASSES.TILE_INNER);
 
   if (page) {
     var rid = page.rid;
-    tileElement.classList.add(CLASSES.PAGE);
+    tileElem.classList.add(CLASSES.PAGE);
 
     var navigateFunction = function(e) {
       e.preventDefault();
       ntpApiHandle.navigateContentWindow(rid, getDispositionFromEvent(e));
     };
 
     // The click handler for navigating to the page identified by the RID.
-    tileElement.addEventListener('click', navigateFunction);
+    tileElem.addEventListener('click', navigateFunction);
 
     // Make thumbnails tab-accessible.
-    tileElement.setAttribute('tabindex', '1');
-    registerKeyHandler(tileElement, KEYCODE.ENTER, navigateFunction);
+    tileElem.setAttribute('tabindex', '1');
+    registerKeyHandler(tileElem, KEYCODE.ENTER, navigateFunction);
 
     // The iframe which renders the page title.
-    var titleElement = document.createElement('iframe');
-    titleElement.tabIndex = '-1';
+    var titleElem = document.createElement('iframe');
+    titleElem.tabIndex = '-1';
 
     // Why iframes have IDs:
     //
     // On navigating back to the NTP we see several onmostvisitedchange() events
     // in series with incrementing RIDs. After the first event, a set of iframes
     // begins loading RIDs n, n+1, ..., n+k-1; after the second event, these get
     // destroyed and a new set begins loading RIDs n+k, n+k+1, ..., n+2k-1.
     // Now due to crbug.com/68841, Chrome incorrectly loads the content for the
     // first set of iframes into the most recent set of iframes.
     //
     // Giving iframes distinct ids seems to cause some invalidation and prevent
     // associating the incorrect data.
     //
     // TODO(jered): Find and fix the root (probably Blink) bug.
 
     // Keep this ID here. See comment above.
-    titleElement.id = 'title-' + rid;
-    titleElement.className = CLASSES.TITLE;
-    titleElement.hidden = true;
-    titleElement.src = getMostVisitedTitleIframeUrl(rid, position);
-    tileElement.appendChild(titleElement);
+    titleElem.id = 'title-' + rid;
+    titleElem.className = CLASSES.TITLE;
+    titleElem.src = getMostVisitedTitleIframeUrl(rid, position);
+    innerElem.appendChild(titleElem);
+
+    // A fallback element for missing thumbnails.
+    if (NTP_DESIGN.thumbnailFallback) {
+      var fallbackElem = createAndAppendElement(
+          innerElem, 'div', CLASSES.THUMBNAIL_FALLBACK);
+      if (NTP_DESIGN.thumbnailFallback === THUMBNAIL_FALLBACK.DOT)
+        createAndAppendElement(fallbackElem, 'div', CLASSES.DOT);
+    }
 
     // The iframe which renders either a thumbnail or domain element.
-    var thumbnailElement = document.createElement('iframe');
-    thumbnailElement.tabIndex = '-1';
+    var thumbnailElem = document.createElement('iframe');
+    thumbnailElem.tabIndex = '-1';
     // Keep this ID here. See comment above.
-    thumbnailElement.id = 'thumb-' + rid;
-    thumbnailElement.className = CLASSES.THUMBNAIL;
-    thumbnailElement.hidden = true;
-    thumbnailElement.src = getMostVisitedThumbnailIframeUrl(rid, position);
-    tileElement.appendChild(thumbnailElement);
-
-    // A mask to darken the thumbnail on focus.
-    var maskElement = createAndAppendElement(
-        tileElement, 'div', CLASSES.THUMBNAIL_MASK);
+    thumbnailElem.id = 'thumb-' + rid;
+    thumbnailElem.className = CLASSES.THUMBNAIL;
+    thumbnailElem.src = getMostVisitedThumbnailIframeUrl(rid, position);
+    innerElem.appendChild(thumbnailElem);
 
     // The button used to blacklist this page.
     var blacklistButton = createAndAppendElement(
-        tileElement, 'div', CLASSES.BLACKLIST_BUTTON);
+        innerElem, 'div', CLASSES.BLACKLIST_BUTTON);
     var blacklistFunction = generateBlacklistFunction(rid);
     blacklistButton.addEventListener('click', blacklistFunction);
     blacklistButton.title = configData.translatedStrings.removeThumbnailTooltip;
 
+    // A helper mask on top of the tile that is used to create hover border
+    // and/or to darken the thumbnail on focus.
+    var maskElement = createAndAppendElement(
+        innerElem, 'div', CLASSES.THUMBNAIL_MASK);
+
     // When a tile is focused, have delete also blacklist the page.
-    registerKeyHandler(tileElement, KEYCODE.DELETE, blacklistFunction);
+    registerKeyHandler(tileElem, KEYCODE.DELETE, blacklistFunction);
 
     // The page favicon, if any.
     var faviconUrl = page.faviconUrl;
     if (faviconUrl) {
-      var favicon = createAndAppendElement(tileElement, 'div', CLASSES.FAVICON);
+      var favicon = createAndAppendElement(innerElem, 'div', CLASSES.FAVICON);
       favicon.style.backgroundImage = 'url(' + faviconUrl + ')';
     }
-    return new Tile(tileElement, titleElement, thumbnailElement, rid);
+    return new Tile(tileElem, innerElem, titleElem, thumbnailElem, rid);
   } else {
-    return new Tile(tileElement);
+    return new Tile(tileElem);
   }
 }
 
 
 /**
  * Generates a function to be called when the page with the corresponding RID
  * is blacklisted.
  * @param {number} rid The RID of the page being blacklisted.
  * @return {function(Event)} A function which handles the blacklisting of the
  *     page by updating state variables and notifying Chrome.
@@ skipping 73 matching lines @@
   if (newNumColumns < MIN_NUM_COLUMNS)
     newNumColumns = MIN_NUM_COLUMNS;
   else if (newNumColumns > MAX_NUM_COLUMNS)
     newNumColumns = MAX_NUM_COLUMNS;
 
   if (numColumnsShown != newNumColumns) {
     numColumnsShown = newNumColumns;
     var tilesContainerWidth = numColumnsShown * tileRequiredWidth;
     tilesContainer.style.width = tilesContainerWidth + 'px';
     if (fakebox) {
-      // -2 to account for border.
-      fakebox.style.width =
-          (tilesContainerWidth - NTP_DESIGN.tileMargin - 2) + 'px';
+      if (NTP_DESIGN.name === 'smallScreen1') {
+        // -2 to account for border.
+        fakebox.style.width = (tilesContainerWidth - tileRequiredWidth -
+            NTP_DESIGN.tileMargin - 2) + 'px';
+      } else {
+        fakebox.style.width =
+            (tilesContainerWidth - NTP_DESIGN.tileMargin - 2) + 'px';
+      }
     }
     // Render without clearing tiles.
     renderAndShowTiles();
   }
 }
 
 
 /**
  * Returns the tile corresponding to the specified page RID.
  * @param {number} rid The page RID being looked up.
@@ skipping 160 matching lines @@
  * Prepares the New Tab Page by adding listeners, rendering the current
  * theme, the most visited pages section, and Google-specific elements for a
  * Google-provided page.
  */
 function init() {
   tilesContainer = $(IDS.TILES);
   notification = $(IDS.NOTIFICATION);
   attribution = $(IDS.ATTRIBUTION);
   ntpContents = $(IDS.NTP_CONTENTS);
 
+  NTP_DESIGN.classToAdd.forEach(function(v, idx) {

[Mathieu, 2014/08/13 20:09:29]

would rather not have this.

[huangs, 2014/08/13 21:34:08]

Deleted; injecting "classical" from local_ntp_source.cc to do this.

+    ntpContents.classList.add(v);
+  });
+
   if (configData.isGooglePage) {
     var logo = document.createElement('div');
     logo.id = IDS.LOGO;
 
     fakebox = document.createElement('div');
     fakebox.id = IDS.FAKEBOX;
-    fakebox.innerHTML =
-        '<input id="' + IDS.FAKEBOX_INPUT +
-            '" autocomplete="off" tabindex="-1" aria-hidden="true">' +
-        '<div id="cursor"></div>';
+    var fakeboxHtml = [];
+    fakeboxHtml.push('<input id="' + IDS.FAKEBOX_INPUT +
+        '" autocomplete="off" tabindex="-1" aria-hidden="true">');
+    if (NTP_DESIGN.showFakeboxHint && configData.searchboxPlaceholder) {
+      fakeboxHtml.push('<div id="fakebox-text">' +
+          configData.searchboxPlaceholder + '</div>');
+    }
+    fakeboxHtml.push('<div id="cursor"></div>');
+    fakebox.innerHTML = fakeboxHtml.join('');
 
     ntpContents.insertBefore(fakebox, ntpContents.firstChild);
     ntpContents.insertBefore(logo, ntpContents.firstChild);
   } else {
     document.body.classList.add(CLASSES.NON_GOOGLE_PAGE);
   }
 
   var notificationMessage = $(IDS.NOTIFICATION_MESSAGE);
   notificationMessage.textContent =
       configData.translatedStrings.thumbnailRemovedNotification;
@@ skipping 23 matching lines @@
   ntpApiHandle = topLevelHandle.newTabPage;
   ntpApiHandle.onthemechange = onThemeChange;
   ntpApiHandle.onmostvisitedchange = onMostVisitedChange;
 
   ntpApiHandle.oninputstart = onInputStart;
   ntpApiHandle.oninputcancel = restoreNtp;
 
   if (ntpApiHandle.isInputInProgress)
     onInputStart();
 
-  onThemeChange();
+  renderTheme();
   onMostVisitedChange();
 
   searchboxApiHandle = topLevelHandle.searchBox;
 
   if (fakebox) {
     // Listener for updating the key capture state.
     document.body.onmousedown = function(event) {
       if (isFakeboxClick(event))
         searchboxApiHandle.startCapturingKeyStrokes();
       else if (isFakeboxFocused())
@@ skipping 46 matching lines @@
 
 return {
   init: init,
   listen: listen
 };
 }
 
 if (!window.localNTPUnitTest) {
   LocalNTP().listen();
 }