diff options
| -rw-r--r-- | chrome/browser/browser_resources.grd | 1 | ||||
| -rw-r--r-- | chrome/browser/resources/local_ntp/local_ntp.js | 131 | ||||
| -rw-r--r-- | chrome/browser/resources/local_ntp/local_ntp_design.js | 61 | ||||
| -rw-r--r-- | chrome/browser/search/local_ntp_source.cc | 1 |
4 files changed, 125 insertions, 69 deletions
diff --git a/chrome/browser/browser_resources.grd b/chrome/browser/browser_resources.grd index 540d069..3d40483 100644 --- a/chrome/browser/browser_resources.grd +++ b/chrome/browser/browser_resources.grd @@ -206,6 +206,7 @@ <include name="IDR_LOCAL_NTP_CSS" file="resources\local_ntp\local_ntp.css" type="BINDATA" /> <include name="IDR_LOCAL_NTP_JS" file="resources\local_ntp\local_ntp.js" flattenhtml="true" type="BINDATA" /> <include name="IDR_LOCAL_NTP_UTIL_JS" file="resources\local_ntp\local_ntp_util.js" flattenhtml="true" type="BINDATA" /> + <include name="IDR_LOCAL_NTP_DESIGN_JS" file="resources\local_ntp\local_ntp_design.js" flattenhtml="true" type="BINDATA" /> <include name="IDR_MOST_VISITED_IFRAME_CSS" file="resources\local_ntp\most_visited_iframe.css" type="BINDATA" /> <include name="IDR_MOST_VISITED_TITLE_HTML" file="resources\local_ntp\most_visited_title.html" type="BINDATA" /> <include name="IDR_MOST_VISITED_TITLE_CSS" file="resources\local_ntp\most_visited_title.css" type="BINDATA" /> diff --git a/chrome/browser/resources/local_ntp/local_ntp.js b/chrome/browser/resources/local_ntp/local_ntp.js index d775540..9aaa9a8 100644 --- a/chrome/browser/resources/local_ntp/local_ntp.js +++ b/chrome/browser/resources/local_ntp/local_ntp.js @@ -14,6 +14,7 @@ */ 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"> @@ -102,6 +103,13 @@ 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} */ @@ -204,22 +212,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 +254,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 +338,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 +528,44 @@ 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(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('&'); } @@ -629,9 +618,7 @@ 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.src = getMostVisitedTitleIframeUrl(rid, position); tileElement.appendChild(titleElement); // The iframe which renders either a thumbnail or domain element. @@ -641,9 +628,7 @@ 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.src = getMostVisitedThumbnailIframeUrl(rid, position); tileElement.appendChild(thumbnailElement); // A mask to darken the thumbnail on focus. @@ -743,11 +728,14 @@ function onRestoreAll() { * 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 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; + 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; @@ -758,8 +746,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 - NTP_DESIGN.tileMargin - 2) + 'px'; + } // Render without clearing tiles. renderAndShowTiles(); } @@ -959,15 +950,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 +1026,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'; diff --git a/chrome/browser/resources/local_ntp/local_ntp_design.js b/chrome/browser/resources/local_ntp/local_ntp_design.js new file mode 100644 index 0000000..59ed11f --- /dev/null +++ b/chrome/browser/resources/local_ntp/local_ntp_design.js @@ -0,0 +1,61 @@ +// Copyright 2014 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 Specifications for the NTP design, and an accessor to presets. + */ + + +/** + * 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. + * 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. + * + * @typedef {{ + * name: string, + * fontFamily: string, + * fontSize: number, + * tileWidth: number, + * tileMargin: number, + * titleColor: string, + * titleTextAlign: string|null|undefined, + * titleTextFade: string|null|undefined, + * thumbnailTextColor: string + * }} + */ +var NtpDesign; + +/** + * Returns an NTP design corresponding to the given name. + * @param {string|undefined} opt_name The name of the design. If undefined, then + * the default design is specified. + * @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' + }; +} diff --git a/chrome/browser/search/local_ntp_source.cc b/chrome/browser/search/local_ntp_source.cc index f9fefbe..a669e29 100644 --- a/chrome/browser/search/local_ntp_source.cc +++ b/chrome/browser/search/local_ntp_source.cc @@ -51,7 +51,6 @@ const struct Resource{ } kResources[] = { { kLocalNTPFilename, IDR_LOCAL_NTP_HTML, "text/html" }, { "local-ntp.js", IDR_LOCAL_NTP_JS, "application/javascript" }, - { "local-ntp-util.js", IDR_LOCAL_NTP_UTIL_JS, "application/javascript" }, { kConfigDataFilename, kLocalResource, "application/javascript" }, { "local-ntp.css", IDR_LOCAL_NTP_CSS, "text/css" }, { "images/close_2.png", IDR_CLOSE_2, "image/png" }, |