[Local NTP] Implement style updates for Material Design

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',
+  BLACKLIST_BUTTON_INNER: 'mv-x-inner',
   DARK: 'dark',
   DEFAULT_THEME: 'default-theme',
   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',
   FAVICON_FALLBACK: 'mv-favicon-fallback',
@@ skipping 128 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 65 matching lines @@
 
 /**
  * The filename for a most visited iframe src which shows a thumbnail image.
  * @type {string}
  * @const
  */
 var MOST_VISITED_THUMBNAIL_IFRAME = 'thumbnail.html';
 
 
 /**
+ * The color of the title in RRGGBBAA format.
+ * @type {string}

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

string|null ?

[huangs, 2014/08/27 18:13:52]

Done.

+ */
+var titleColor = null;
+
+
+/**
  * Hide most visited tiles for at most this many milliseconds while painting.
  * @type {number}
  * @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.
@@ skipping 18 matching lines @@
 
   /** @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.

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

Mention that you are now looking at the text color to determine this, instead of
the backgroundColor...

[huangs, 2014/08/27 18:13:52]

Updated comment.  The text color portion is implementation detail, so the
comment is placed inside the routine.

- * @param {ThemeBackgroundInfo} info Theme background information.
+ * @param {ThemeBackgroundInfo|undefined} info Theme background information.
  * @return {boolean} Whether the theme has dark background.
  * @private
  */
 function getIsBackgroundDark(info) {
-  if (info.imageUrl)
-    return true;
-  var rgba = info.backgroundColorRgba;
+  if (!info)
+    return false;
+  var rgba = info.textColorRgba;
   var luminance = 0.3 * rgba[0] + 0.59 * rgba[1] + 0.11 * rgba[2];
-  return luminance < 128;
+  return luminance >= 128;
 }
 
 
 /**
  * Updates the NTP based on the current theme.
  * @private
  */
 function renderTheme() {
+  var fakeboxText = $(IDS.FAKEBOX_TEXT);
+  fakeboxText.innerHTML = '';
+  if (NTP_DESIGN.showFakeboxHint &&
+      configData.translatedStrings.searchboxPlaceholder) {
+    fakeboxText.textContent = configData.translatedStrings.searchboxPlaceholder;
+  }
+
   var info = ntpApiHandle.themeBackgroundInfo;
+  var isBackgroundDark = getIsBackgroundDark(info);
+  ntpContents.classList.toggle(CLASSES.DARK, isBackgroundDark);
   if (!info) {
-    isBackgroundDark = false;
+    titleColor = NTP_DESIGN.titleColor;
     return;
   }
 
-  isBackgroundDark = getIsBackgroundDark(info);
-  ntpContents.classList.toggle(CLASSES.DARK, isBackgroundDark);
+  if (!info.usingDefaultTheme && info.textColorRgba) {
+    titleColor = convertToRRGGBBAAColor(info.textColorRgba);
+  } else {
+    titleColor = isBackgroundDark ?
+        NTP_DESIGN.titleColorAgainstDark : NTP_DESIGN.titleColor;
+  }
 
   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
  */
 function setCustomThemeStyle(opt_themeInfo) {
   var customStyleElement = $(IDS.CUSTOM_THEME_STYLE);
   var head = document.head;
-
   if (opt_themeInfo && !opt_themeInfo.usingDefaultTheme) {
     ntpContents.classList.remove(CLASSES.DEFAULT_THEME);
     var themeStyle =
       '#attribution {' +
       '  color: ' + convertToRGBAColor(opt_themeInfo.textColorLightRgba) + ';' +
       '}' +
       '#mv-msg {' +
       '  color: ' + convertToRGBAColor(opt_themeInfo.textColorRgba) + ';' +
       '}' +
       '#mv-notice-links span {' +
@@ skipping 57 matching lines @@
  * @private
  */
 function setAttributionVisibility_(show) {
   if (attribution) {
     attribution.style.display = show ? '' : 'none';
   }
 }
 
 
  /**
+ * Converts an Array of color components into RRGGBBAA format.
+ * @param {Array.<number>} color Array of rgba color components.
+ * @return {string} Color string in RRGGBBAA format.
+ * @private
+ */
+function convertToRRGGBBAAColor(color) {
+  return color.map(function(t) {
+    return ('0' + t.toString(16)).slice(-2);  // To 2-digit, 0-padded hex.
+  }).join('');
+}
+
+
+ /**
  * Converts an Array of color components into RGBA format "rgba(R,G,B,A)".
  * @param {Array.<number>} color Array of rgba color components.
  * @return {string} CSS color in RGBA format.
  * @private
  */
 function convertToRGBAColor(color) {
   return 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' +
                     color[3] / 255 + ')';
 }
 
@@ skipping 121 matching lines @@
 
 /**
  * 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(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));
@@ skipping 25 matching lines @@
 /**
  * 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 tileElem = document.createElement('div');
   tileElem.classList.add(CLASSES.TILE);
+  // Prevent tile from being selected (and highlighted) when 'X' is clicked.
+  tileElem.addEventListener('mousedown', function(e) {

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

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?

[huangs, 2014/08/27 18:13:52]

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.

+    e.preventDefault();
+  });
   var innerElem = createAndAppendElement(tileElem, 'div', CLASSES.TILE_INNER);
 
   if (page) {
     var rid = page.rid;
     tileElem.classList.add(CLASSES.PAGE);
 
     var navigateFunction = function(e) {
       e.preventDefault();
       ntpApiHandle.navigateContentWindow(rid, getDispositionFromEvent(e));
     };
@@ skipping 42 matching lines @@
     thumbnailElem.tabIndex = '-1';
     // Keep this ID here. See comment above.
     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(
         innerElem, 'div', CLASSES.BLACKLIST_BUTTON);
+    createAndAppendElement(
+        blacklistButton, 'div', CLASSES.BLACKLIST_BUTTON_INNER);
     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.
@@ skipping 43 matching lines @@
   notification.scrollTop;
   notification.classList.add(CLASSES.DELAYED_HIDE_NOTIFICATION);
 }
 
 
 /**
  * Hides the blacklist notification.
  */
 function hideNotification() {
   notification.classList.add(CLASSES.HIDE_NOTIFICATION);
+  notification.classList.remove(CLASSES.DELAYED_HIDE_NOTIFICATION);
 }
 
 
 /**
  * Handles a click on the notification undo link by hiding the notification and
  * informing Chrome.
  */
 function onUndo() {
   userInitiatedMostVisitedChange = true;
   hideNotification();
   var lastBlacklistedRID = lastBlacklistedTile.rid;
   if (typeof lastBlacklistedRID != 'undefined')
     ntpApiHandle.undoMostVisitedDeletion(lastBlacklistedRID);
 }
 
 
 /**
  * Handles a click on the restore all notification link by hiding the
  * notification and informing Chrome.
  */
 function onRestoreAll() {
   userInitiatedMostVisitedChange = true;
   hideNotification();
   ntpApiHandle.undoAllMostVisitedDeletions();
 }
 
 
 /**
- * Resizes elements because the number of tile columns may need to change in
- * response to resizing. Also shows or hides extra tiles tiles according to the
- * new width of the page.
+ * Recomputes the number of tile columns, and width of various contents based
+ * on the width of the window.
+ * @return {boolean} Whether the number of tile columns has changed.
  */
-function onResize() {
+function updateContentWidth() {
   var tileRequiredWidth = NTP_DESIGN.tileWidth + NTP_DESIGN.tileMargin;
   // If innerWidth is zero, then use the maximum snap size.
   var maxSnapSize = MAX_NUM_COLUMNS * tileRequiredWidth -
       NTP_DESIGN.tileMargin + MIN_TOTAL_HORIZONTAL_PADDING;
   var innerWidth = window.innerWidth || maxSnapSize;
   // Each tile has left and right margins that sum to NTP_DESIGN.tileMargin.
   var availableWidth = innerWidth + NTP_DESIGN.tileMargin -
       MIN_TOTAL_HORIZONTAL_PADDING;
   var newNumColumns = Math.floor(availableWidth / tileRequiredWidth);
   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) {
-      fakebox.style.width =  // -2 to account for border.
-          (tilesContainerWidth - NTP_DESIGN.tileMargin - 2) + 'px';
-    }
+  if (numColumnsShown === newNumColumns)
+    return false;
+
+  numColumnsShown = newNumColumns;
+  var tilesContainerWidth = numColumnsShown * tileRequiredWidth;
+  tilesContainer.style.width = tilesContainerWidth + 'px';
+  if (fakebox) {
+    // -2 to account for border.
+    var fakeboxWidth = (tilesContainerWidth - NTP_DESIGN.tileMargin - 2);
+    fakebox.style.width = fakeboxWidth + 'px';
+  }
+  return true;
+}
+
+
+/**
+ * Resizes elements because the number of tile columns may need to change in
+ * response to resizing. Also shows or hides extra tiles tiles according to the
+ * new width of the page.
+ */
+function onResize() {
+  if (updateContentWidth()) {
     // Render without clearing tiles.
     renderAndShowTiles();
   }
 }
 
 
 /**
  * Returns the tile corresponding to the specified page RID.
  * @param {number} rid The page RID being looked up.
  * @return {Tile} The corresponding tile.
@@ skipping 168 matching lines @@
 
   if (configData.isGooglePage) {
     var logo = document.createElement('div');
     logo.id = IDS.LOGO;
 
     fakebox = document.createElement('div');
     fakebox.id = IDS.FAKEBOX;
     var fakeboxHtml = [];
     fakeboxHtml.push('<input id="' + IDS.FAKEBOX_INPUT +
         '" autocomplete="off" tabindex="-1" aria-hidden="true">');
-    if (NTP_DESIGN.showFakeboxHint &&
-        configData.translatedStrings.searchboxPlaceholder) {
-      fakeboxHtml.push('<div id="' + IDS.FAKEBOX_TEXT + '">' +
-          configData.translatedStrings.searchboxPlaceholder + '</div>');
-    }
+    fakeboxHtml.push('<div id="' + IDS.FAKEBOX_TEXT + '"></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);
   }
 
+  // Hide notifications after fade out, so we can't focus on links via keyboard.
+  notification.addEventListener('webkitTransitionEnd', hideNotification);
+
   var notificationMessage = $(IDS.NOTIFICATION_MESSAGE);
   notificationMessage.textContent =
       configData.translatedStrings.thumbnailRemovedNotification;
 
   var undoLink = $(IDS.UNDO_LINK);
   undoLink.addEventListener('click', onUndo);
   registerKeyHandler(undoLink, KEYCODE.ENTER, onUndo);
   undoLink.textContent = configData.translatedStrings.undoThumbnailRemove;
 
   var restoreAllLink = $(IDS.RESTORE_ALL_LINK);
   restoreAllLink.addEventListener('click', onRestoreAll);
   registerKeyHandler(restoreAllLink, KEYCODE.ENTER, onUndo);
   restoreAllLink.textContent =
       configData.translatedStrings.restoreThumbnailsShort;
 
   $(IDS.ATTRIBUTION_TEXT).textContent =
       configData.translatedStrings.attributionIntro;
 
   var notificationCloseButton = $(IDS.NOTIFICATION_CLOSE_BUTTON);
+  createAndAppendElement(
+      notificationCloseButton, 'div', CLASSES.BLACKLIST_BUTTON_INNER);
   notificationCloseButton.addEventListener('click', hideNotification);
 
   window.addEventListener('resize', onResize);
-  onResize();
+  updateContentWidth();
 
   var topLevelHandle = getEmbeddedSearchApiHandle();
 
   ntpApiHandle = topLevelHandle.newTabPage;
   ntpApiHandle.onthemechange = onThemeChange;
   ntpApiHandle.onmostvisitedchange = onMostVisitedChange;
 
   ntpApiHandle.oninputstart = onInputStart;
   ntpApiHandle.oninputcancel = restoreNtp;
 
@@ skipping 60 matching lines @@
 
 return {
   init: init,
   listen: listen
 };
 }
 
 if (!window.localNTPUnitTest) {
   LocalNTP().listen();
 }