[Local NTP] Adding NtpDesign class to parametrizing NTP design specs

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.
  */
 
 
 /**
  * Controls rendering the new tab page for InstantExtended.
  * @return {Object} A limited interface for testing the local NTP.
  */
 function LocalNTP() {
 <include src="../../../../ui/webui/resources/js/assert.js">
+<include src="local_ntp_design.js">
 <include src="local_ntp_util.js">
 <include src="window_disposition_util.js">
 
 
 /**
  * Enum for classnames.
  * @enum {string}
  * @const
  */
 var CLASSES = {
@@ skipping 68 matching lines @@
 
 /**
  * The JavaScript button event value for a middle click.
  * @type {number}
  * @const
  */
 var MIDDLE_MOUSE_BUTTON = 1;
 
 
 /**
+ * Specifications for the NTP design.
+ * @const {NtpDesign}
+ */
+var NTP_DESIGN = getNtpDesign(configData.ntpDesignName);
+
+
+/**
  * The container for the tile elements.
  * @type {Element}
  */
 var tilesContainer;
 
 
 /**
  * The notification displayed when a page is blacklisted.
  * @type {Element}
  */
@@ skipping 82 matching lines @@
 var omniboxInputBehavior = NTP_DISPOSE_STATE.NONE;
 
 
 /**
  * The state of the NTP when a query is entered into the Fakebox.
  * @type {NTP_DISPOSE_STATE}
  */
 var fakeboxInputBehavior = NTP_DISPOSE_STATE.HIDE_FAKEBOX_AND_LOGO;
 
 
-/**
- * Total tile width. Should be equal to mv-tile's width + 2 * border-width.
- * @private {number}
- * @const
- */
-var TILE_WIDTH = 140;
-
-
-/**
- * Margin between tiles. Should be equal to mv-tile's total horizontal margin.
- * @private {number}
- * @const
- */
-var TILE_MARGIN = 20;
-
-
 /** @type {number} @const */
 var MAX_NUM_TILES_TO_SHOW = 8;
 
 
 /** @type {number} @const */
 var MIN_NUM_COLUMNS = 2;
 
 
 /** @type {number} @const */
 var MAX_NUM_COLUMNS = 4;
@@ skipping 22 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 hex color for most visited tile elements.
- * @type {string}
- * @const
- */
-var MOST_VISITED_COLOR = '777777';
-
-
-/**
- * The font family for most visited tile elements.
- * @type {string}
- * @const
- */
-var MOST_VISITED_FONT_FAMILY = 'arial, sans-serif';
-
-
-/**
- * The font size for most visited tile elements.
- * @type {number}
- * @const
- */
-var MOST_VISITED_FONT_SIZE = 11;
-
-
-/**
  * 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 64 matching lines @@
       '}' +
       '#mv-notice-links span {' +
       '  color: ' + convertToRGBAColor(opt_themeInfo.textColorLightRgba) + ';' +
       '}' +
       '#mv-notice-x {' +
       '  -webkit-filter: drop-shadow(0 0 0 ' +
           convertToRGBAColor(opt_themeInfo.textColorRgba) + ');' +
       '}' +
       '.mv-page-ready {' +
       '  border: 1px solid ' +
-        convertToRGBAColor(opt_themeInfo.sectionBorderColorRgba) + ';' +
+          convertToRGBAColor(opt_themeInfo.sectionBorderColorRgba) + ';' +
       '}' +
       '.mv-page-ready:hover, .mv-page-ready:focus {' +
       '  border-color: ' +
           convertToRGBAColor(opt_themeInfo.headerColorRgba) + ';' +
       '}';
 
     if (customStyleElement) {
       customStyleElement.textContent = themeStyle;
     } else {
       customStyleElement = document.createElement('style');
@@ skipping 169 matching lines @@
   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 component in an iframe.
- * @param {string} filename The desired most visited component filename.
+ * Builds a URL to display a most visited tile title in an iframe.
  * @param {number} rid The restricted ID.
- * @param {string} color The text color for text in the iframe.
- * @param {string} fontFamily The font family for text in the iframe.
- * @param {number} fontSize The font size for text in the iframe.
  * @param {number} position The position of the iframe in the UI.
- * @return {string} An URL to display the most visited component in an iframe.
+ * @return {string} An URL to display the most visited title in an iframe.
  */
-function getMostVisitedIframeUrl(filename, rid, color, fontFamily, fontSize,
-    position) {
-  return 'chrome-search://most-visited/' + encodeURIComponent(filename) + '?' +
-      ['rid=' + encodeURIComponent(rid),
-       'c=' + encodeURIComponent(color),
-       'f=' + encodeURIComponent(fontFamily),
-       'fs=' + encodeURIComponent(fontSize),
-       'pos=' + encodeURIComponent(position)].join('&');
+function getMostVisitedTitleIframeUrl(rid, position) {
+  var url = 'chrome-search://most-visited/' +
+      encodeURIComponent(MOST_VISITED_TITLE_IFRAME);
+  var params = [
+       'rid=' + encodeURIComponent(rid),

[Mathieu, 2014/08/07 20:50:24]

nit: proper indent here and below

[huangs, 2014/08/07 21:41:19]

Done.

+       'f=' + encodeURIComponent(NTP_DESIGN.fontFamily),
+       'fs=' + encodeURIComponent(NTP_DESIGN.fontSize),
+       'c=' + encodeURIComponent(NTP_DESIGN.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)];
+  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);
@@ skipping 29 matching lines @@
     //
     // 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 = getMostVisitedIframeUrl(
-        MOST_VISITED_TITLE_IFRAME, rid, MOST_VISITED_COLOR,
-        MOST_VISITED_FONT_FAMILY, MOST_VISITED_FONT_SIZE, position);
+    titleElement.style.width = NTP_DESIGN.titleWidth + 'px';

[Mathieu, 2014/08/07 20:50:24]

We should probably remove width and height in the CSS if we're going to have
them here.

[huangs, 2014/08/07 21:41:18]

Going to keep width and height to be set by CSS.  Storing width and height in JS
was needed by deprecated code in the prototype.  Removing these from NtpDesign.

+    titleElement.style.height = NTP_DESIGN.titleHeight + 'px';
+    titleElement.src = getMostVisitedTitleIframeUrl(rid, position);
     tileElement.appendChild(titleElement);
 
     // The iframe which renders either a thumbnail or domain element.
     var thumbnailElement = document.createElement('iframe');
     thumbnailElement.tabIndex = '-1';
     // Keep this ID here. See comment above.
     thumbnailElement.id = 'thumb-' + rid;
     thumbnailElement.className = CLASSES.THUMBNAIL;
     thumbnailElement.hidden = true;
-    thumbnailElement.src = getMostVisitedIframeUrl(
-        MOST_VISITED_THUMBNAIL_IFRAME, rid, MOST_VISITED_COLOR,
-        MOST_VISITED_FONT_FAMILY, MOST_VISITED_FONT_SIZE, position);
+    thumbnailElement.style.width = NTP_DESIGN.thumbnailWidth + 'px';
+    thumbnailElement.style.height = NTP_DESIGN.thumbnailHeight + 'px';
+    thumbnailElement.src = getMostVisitedThumbnailIframeUrl(rid, position);
     tileElement.appendChild(thumbnailElement);
 
     // A mask to darken the thumbnail on focus.
     var maskElement = createAndAppendElement(
         tileElement, 'div', CLASSES.THUMBNAIL_MASK);
 
     // The button used to blacklist this page.
     var blacklistButton = createAndAppendElement(
         tileElement, 'div', CLASSES.BLACKLIST_BUTTON);
     var blacklistFunction = generateBlacklistFunction(rid);
@@ skipping 79 matching lines @@
   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.
  */
 function onResize() {
+  var tileRequiredWidth = NTP_DESIGN.tileWidth + NTP_DESIGN.tileMargin;
   // If innerWidth is zero, then use the maximum snap size.
+  var maxSnapSize = MAX_NUM_COLUMNS * tileRequiredWidth -

[Mathieu, 2014/08/07 20:50:24]

not used?

if so, bring back |tileRequiredWidth| closer to where it is used.

[huangs, 2014/08/07 21:41:19]

Nice catch!  This was meant to replace the hard-coded "820" below, but I forgot
to use it. Fixed.

+      NTP_DESIGN.tileMargin + MIN_TOTAL_HORIZONTAL_PADDING;
   var innerWidth = window.innerWidth || 820;
-  // Each tile has left and right margins that sum to TILE_MARGIN.
-  var tileRequiredWidth = TILE_WIDTH + TILE_MARGIN;
-  var availableWidth = innerWidth + TILE_MARGIN - MIN_TOTAL_HORIZONTAL_PADDING;
+  // 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)  // -2 to account for border.
-      fakebox.style.width = (tilesContainerWidth - TILE_MARGIN - 2) + 'px';
+    if (fakebox) {
+      // -2 to account for border.
+      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.
  * @return {Tile} The corresponding tile.
@@ skipping 159 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/07 20:50:24]

reconsider this because we're already putting a class on the overarching <div>

[huangs, 2014/08/07 21:41:19]

Removed, since C++ code will take care of setting this as {{CLASS}} in
local_ntp.html.

Also removing classToAdd in NtpDesign.

+    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>';
 
     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;
+
   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);
   notificationCloseButton.addEventListener('click', hideNotification);
 
   window.addEventListener('resize', onResize);
   onResize();
 
   var topLevelHandle = getEmbeddedSearchApiHandle();
@@ skipping 44 matching lines @@
         setFakeboxDragFocus(false);
       };
     }
 
     // Update the fakebox style to match the current key capturing state.
     setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled);
   }
 
   if (searchboxApiHandle.rtl) {
     $(IDS.NOTIFICATION).dir = 'rtl';
+    document.body.setAttribute('dir', 'rtl');
     // Add class for setting alignments based on language directionality.
     document.body.classList.add(CLASSES.RTL);
     $(IDS.TILES).dir = 'rtl';
   }
 }
 
 
 /**
  * Binds event listeners.
  */
 function listen() {
   document.addEventListener('DOMContentLoaded', init);
 }
 
 return {
   init: init,
   listen: listen
 };
 }
 
 if (!window.localNTPUnitTest) {
   LocalNTP().listen();
 }