From 42a54f01308b0f07f1c0cd7cc6e4283694917817 Mon Sep 17 00:00:00 2001 From: "huangs@chromium.org" Date: Fri, 8 Aug 2014 08:53:00 +0000 Subject: [Local NTP] Adding NtpDesign class to parametrizing NTP design specs This refactoring CL makes it easier to change NTP designs. The key variable to control this switch is configData.ntpDesignName, which was added in https://chromiumcodereview.appspot.com/447033002/ We also added titleTextAlign and titleTextFade properties. The support for these fields in Most Visited were are added in https://chromiumcodereview.appspot.com/448793003/ BUG=400346 TBR=jhawkins Review URL: https://codereview.chromium.org/447243003 Cr-Commit-Position: refs/heads/master@{#288269} git-svn-id: svn://svn.chromium.org/chrome/trunk/src@288269 0039d316-1c4b-4281-b951-d872f2087c98 --- chrome/browser/browser_resources.grd | 1 + chrome/browser/resources/local_ntp/local_ntp.js | 131 ++++++++++----------- .../resources/local_ntp/local_ntp_design.js | 61 ++++++++++ chrome/browser/search/local_ntp_source.cc | 1 - 4 files changed, 125 insertions(+), 69 deletions(-) create mode 100644 chrome/browser/resources/local_ntp/local_ntp_design.js 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 @@ + 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() { + @@ -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