Index: chrome/browser/resources/local_ntp/local_ntp.js |
diff --git a/chrome/browser/resources/local_ntp/local_ntp.js b/chrome/browser/resources/local_ntp/local_ntp.js |
index d7755406be73113f43763e4d5d7acc39b75f6e64..4ab2699d9777f445049e77a3c3473799e098b6f6 100644 |
--- a/chrome/browser/resources/local_ntp/local_ntp.js |
+++ b/chrome/browser/resources/local_ntp/local_ntp.js |
@@ -15,6 +15,7 @@ |
function LocalNTP() { |
<include src="../../../../ui/webui/resources/js/assert.js"> |
<include src="local_ntp_util.js"> |
+<include src="local_ntp_design.js"> |
Mathieu
2014/08/07 18:07:05
alphabetize includes unless they depend on each ot
huangs
2014/08/07 20:15:19
I don't know if nested <include> would work, but i
|
<include src="window_disposition_util.js"> |
@@ -102,6 +103,14 @@ var MIDDLE_MOUSE_BUTTON = 1; |
/** |
+ * Specifications of NTP design. |
Mathieu
2014/08/07 18:07:05
Specifications *for the NTP design.
huangs
2014/08/07 20:15:19
Done.
|
+ * @type {NtpDesign} |
+ * @const |
Mathieu
2014/08/07 18:07:05
@const {NtpDesign}
huangs
2014/08/07 20:15:19
Done.
|
+ */ |
+var ntpDesign; |
Mathieu
2014/08/07 18:07:05
since it's a const should it not be NTP_DESIGN?
Mathieu
2014/08/07 18:07:05
why not call getNtpDesign(configData.ntpDesignName
huangs
2014/08/07 20:15:19
Done.
huangs
2014/08/07 20:15:19
Done.
|
+ |
+ |
+/** |
* The container for the tile elements. |
* @type {Element} |
*/ |
@@ -204,22 +213,6 @@ var omniboxInputBehavior = NTP_DISPOSE_STATE.NONE; |
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; |
@@ -262,30 +255,6 @@ 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 |
@@ -370,7 +339,7 @@ function setCustomThemeStyle(opt_themeInfo) { |
'}' + |
'.mv-page-ready {' + |
' border: 1px solid ' + |
- convertToRGBAColor(opt_themeInfo.sectionBorderColorRgba) + ';' + |
+ convertToRGBAColor(opt_themeInfo.sectionBorderColorRgba) + ';' + |
'}' + |
'.mv-page-ready:hover, .mv-page-ready:focus {' + |
' border-color: ' + |
@@ -560,23 +529,43 @@ function renderAndShowTiles() { |
/** |
- * 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. |
- */ |
-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('&'); |
+ * @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 params = [ |
+ 'rid=' + encodeURIComponent(rid), |
+ 'f=' + encodeURIComponent(ntpDesign.fontFamily), |
+ 'fs=' + encodeURIComponent(ntpDesign.fontSize), |
+ 'c=' + encodeURIComponent(ntpDesign.titleColor), |
+ 'ta=' + encodeURIComponent(ntpDesign.titleTextAlign), |
Mathieu
2014/08/07 18:07:05
Default is center, why not make it optional simila
Mathieu
2014/08/07 18:07:05
bring to last line to follow ordering consistent w
huangs
2014/08/07 20:15:19
Done.
huangs
2014/08/07 20:15:19
Moot as 'ta' is now optional.
|
+ 'pos=' + encodeURIComponent(position)]; |
+ if (ntpDesign.titleTextFade) |
+ params.push('tf=' + ntpDesign.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(ntpDesign.fontFamily), |
+ 'fs=' + encodeURIComponent(ntpDesign.fontSize), |
+ 'c=' + encodeURIComponent(ntpDesign.thumbnailTextColor), |
+ 'pos=' + encodeURIComponent(position)]; |
+ return url + '?' + params.join('&'); |
} |
@@ -629,9 +618,9 @@ function createTile(page, position) { |
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 = ntpDesign.titleWidth + 'px'; |
+ titleElement.style.height = ntpDesign.titleHeight + 'px'; |
+ titleElement.src = getMostVisitedTitleIframeUrl(rid, position); |
tileElement.appendChild(titleElement); |
// The iframe which renders either a thumbnail or domain element. |
@@ -641,9 +630,9 @@ function createTile(page, position) { |
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 = ntpDesign.thumbnailWidth + 'px'; |
+ thumbnailElement.style.height = ntpDesign.thumbnailHeight + 'px'; |
+ thumbnailElement.src = getMostVisitedThumbnailIframeUrl(rid, position); |
tileElement.appendChild(thumbnailElement); |
// A mask to darken the thumbnail on focus. |
@@ -743,11 +732,14 @@ function onRestoreAll() { |
* new width of the page. |
*/ |
function onResize() { |
+ var tileRequiredWidth = ntpDesign.tileWidth + ntpDesign.tileMargin; |
// If innerWidth is zero, then use the maximum snap size. |
+ var maxSnapSize = MAX_NUM_COLUMNS * tileRequiredWidth - ntpDesign.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 ntpDesign.tileMargin. |
+ var availableWidth = innerWidth + ntpDesign.tileMargin - |
+ MIN_TOTAL_HORIZONTAL_PADDING; |
var newNumColumns = Math.floor(availableWidth / tileRequiredWidth); |
if (newNumColumns < MIN_NUM_COLUMNS) |
newNumColumns = MIN_NUM_COLUMNS; |
@@ -758,8 +750,11 @@ function onResize() { |
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 - ntpDesign.tileMargin - 2) + 'px'; |
+ } |
// Render without clearing tiles. |
renderAndShowTiles(); |
} |
@@ -934,11 +929,16 @@ function getEmbeddedSearchApiHandle() { |
* Google-provided page. |
*/ |
function init() { |
+ ntpDesign = getNtpDesign(configData.ntpDesignName); |
tilesContainer = $(IDS.TILES); |
notification = $(IDS.NOTIFICATION); |
attribution = $(IDS.ATTRIBUTION); |
ntpContents = $(IDS.NTP_CONTENTS); |
+ ntpDesign.classToAdd.forEach(function(v, idx) { |
+ ntpContents.classList.add(v); |
+ }); |
+ |
if (configData.isGooglePage) { |
var logo = document.createElement('div'); |
logo.id = IDS.LOGO; |
@@ -959,15 +959,18 @@ function init() { |
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; |
@@ -1032,6 +1035,7 @@ function init() { |
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'; |