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 9d3ce86c972f9dda3d4b218865399a9a358bd1e0..7ce3c332f1ee922f5aa871afaa807126f9263ae1 100644 |
--- a/chrome/browser/resources/local_ntp/local_ntp.js |
+++ b/chrome/browser/resources/local_ntp/local_ntp.js |
@@ -13,669 +13,680 @@ |
* @return {Object} A limited interface for testing the local NTP. |
*/ |
function LocalNTP() { |
-'use strict'; |
+ 'use strict'; |
-/** |
+ /** |
* Alias for document.getElementById. |
* @param {string} id The ID of the element to find. |
* @return {HTMLElement} The found element or null if not found. |
*/ |
-function $(id) { |
- return document.getElementById(id); |
-} |
+ function $(id) { |
+ return document.getElementById(id); |
+ } |
-/** |
- * Specifications for an NTP design (not comprehensive). |
- * |
- * fakeboxWingSize: Extra distance for fakebox to extend beyond beyond the list |
- * of tiles. |
- * fontFamily: Font family to use for title and thumbnail iframes. |
- * fontSize: Font size to use for the iframes, in px. |
- * mainClass: Class applied to #ntp-contents to control CSS. |
- * numTitleLines: Number of lines to display in titles. |
- * showFavicon: Whether to show favicon. |
- * thumbnailTextColor: The 4-component color that thumbnail iframe may use to |
- * display text message in place of missing thumbnail. |
- * thumbnailFallback: (Optional) A value in THUMBNAIL_FALLBACK to specify the |
- * thumbnail fallback strategy. If unassigned, then the thumbnail.html |
- * iframe would handle the fallback. |
- * tileWidth: The width of each suggestion tile, in px. |
- * tileMargin: Spacing between successive tiles, in px. |
- * titleColor: The 4-component color of title text. |
- * titleColorAgainstDark: The 4-component color of title text against a dark |
- * theme. |
- * 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. |
- * |
- * @type {{ |
- * fakeboxWingSize: number, |
- * fontFamily: string, |
- * fontSize: number, |
- * mainClass: string, |
- * numTitleLines: number, |
- * showFavicon: boolean, |
- * thumbnailTextColor: string, |
- * thumbnailFallback: string|null|undefined, |
- * tileWidth: number, |
- * tileMargin: number, |
- * titleColor: string, |
- * titleColorAgainstDark: string, |
- * titleTextAlign: string|null|undefined, |
- * titleTextFade: number|null|undefined |
- * }} |
- */ |
-var NTP_DESIGN = { |
- fakeboxWingSize: 0, |
- fontFamily: 'arial, sans-serif', |
- fontSize: 12, |
- mainClass: 'thumb-ntp', |
- numTitleLines: 1, |
- showFavicon: true, |
- thumbnailTextColor: [50, 50, 50, 255], |
- thumbnailFallback: 'dot', // Draw single dot. |
- tileWidth: 154, |
- tileMargin: 16, |
- titleColor: [50, 50, 50, 255], |
- titleColorAgainstDark: [210, 210, 210, 255], |
- titleTextAlign: 'inherit', |
- titleTextFade: 122 - 36 // 112px wide title with 32 pixel fade at end. |
-}; |
+ /** |
+ * Specifications for an NTP design (not comprehensive). |
+ * |
+ * fakeboxWingSize: Extra distance for fakebox to extend beyond beyond the |
+ * list |
+ * of tiles. |
+ * fontFamily: Font family to use for title and thumbnail iframes. |
+ * fontSize: Font size to use for the iframes, in px. |
+ * mainClass: Class applied to #ntp-contents to control CSS. |
+ * numTitleLines: Number of lines to display in titles. |
+ * showFavicon: Whether to show favicon. |
+ * thumbnailTextColor: The 4-component color that thumbnail iframe may use to |
+ * display text message in place of missing thumbnail. |
+ * thumbnailFallback: (Optional) A value in THUMBNAIL_FALLBACK to specify the |
+ * thumbnail fallback strategy. If unassigned, then the thumbnail.html |
+ * iframe would handle the fallback. |
+ * tileWidth: The width of each suggestion tile, in px. |
+ * tileMargin: Spacing between successive tiles, in px. |
+ * titleColor: The 4-component color of title text. |
+ * titleColorAgainstDark: The 4-component color of title text against a dark |
+ * theme. |
+ * 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. |
+ * |
+ * @type {{ |
+ * fakeboxWingSize: number, |
+ * fontFamily: string, |
+ * fontSize: number, |
+ * mainClass: string, |
+ * numTitleLines: number, |
+ * showFavicon: boolean, |
+ * thumbnailTextColor: string, |
+ * thumbnailFallback: string|null|undefined, |
+ * tileWidth: number, |
+ * tileMargin: number, |
+ * titleColor: string, |
+ * titleColorAgainstDark: string, |
+ * titleTextAlign: string|null|undefined, |
+ * titleTextFade: number|null|undefined |
+ * }} |
+ */ |
+ var NTP_DESIGN = { |
+ fakeboxWingSize: 0, |
+ fontFamily: 'arial, sans-serif', |
+ fontSize: 12, |
+ mainClass: 'thumb-ntp', |
+ numTitleLines: 1, |
+ showFavicon: true, |
+ thumbnailTextColor: [50, 50, 50, 255], |
+ thumbnailFallback: 'dot', // Draw single dot. |
+ tileWidth: 154, |
+ tileMargin: 16, |
+ titleColor: [50, 50, 50, 255], |
+ titleColorAgainstDark: [210, 210, 210, 255], |
+ titleTextAlign: 'inherit', |
+ titleTextFade: 122 - 36 // 112px wide title with 32 pixel fade at end. |
+ }; |
-/** |
- * Modifies NTP_DESIGN parameters for icon NTP. |
- */ |
-function modifyNtpDesignForIcons() { |
- NTP_DESIGN.fakeboxWingSize = 132; |
- NTP_DESIGN.mainClass = 'icon-ntp'; |
- NTP_DESIGN.numTitleLines = 2; |
- NTP_DESIGN.showFavicon = false; |
- NTP_DESIGN.thumbnailFallback = null; |
- NTP_DESIGN.tileWidth = 48 + 2 * 18; |
- NTP_DESIGN.tileMargin = 60 - 18 * 2; |
- NTP_DESIGN.titleColor = [120, 120, 120, 255]; |
- NTP_DESIGN.titleColorAgainstDark = [210, 210, 210, 255]; |
- NTP_DESIGN.titleTextAlign = 'center'; |
- delete NTP_DESIGN.titleTextFade; |
-} |
+ /** |
+ * Modifies NTP_DESIGN parameters for icon NTP. |
+ */ |
+ function modifyNtpDesignForIcons() { |
+ NTP_DESIGN.fakeboxWingSize = 132; |
+ NTP_DESIGN.mainClass = 'icon-ntp'; |
+ NTP_DESIGN.numTitleLines = 2; |
+ NTP_DESIGN.showFavicon = false; |
+ NTP_DESIGN.thumbnailFallback = null; |
+ NTP_DESIGN.tileWidth = 48 + 2 * 18; |
+ NTP_DESIGN.tileMargin = 60 - 18 * 2; |
+ NTP_DESIGN.titleColor = [120, 120, 120, 255]; |
+ NTP_DESIGN.titleColorAgainstDark = [210, 210, 210, 255]; |
+ NTP_DESIGN.titleTextAlign = 'center'; |
+ delete NTP_DESIGN.titleTextFade; |
+ } |
-/** |
- * Enum for classnames. |
- * @enum {string} |
- * @const |
- */ |
-var CLASSES = { |
- ALTERNATE_LOGO: 'alternate-logo', // Shows white logo if required by theme |
- DARK: 'dark', |
- DEFAULT_THEME: 'default-theme', |
- DELAYED_HIDE_NOTIFICATION: 'mv-notice-delayed-hide', |
- 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', |
- HIDE_FAKEBOX_AND_LOGO: 'hide-fakebox-logo', |
- HIDE_NOTIFICATION: 'mv-notice-hide', |
- LEFT_ALIGN_ATTRIBUTION: 'left-align-attribution', |
- // Vertically centers the most visited section for a non-Google provided page. |
- NON_GOOGLE_PAGE: 'non-google-page', |
- RTL: 'rtl' // Right-to-left language text. |
-}; |
+ /** |
+ * Enum for classnames. |
+ * @enum {string} |
+ * @const |
+ */ |
+ var CLASSES = { |
+ ALTERNATE_LOGO: 'alternate-logo', // Shows white logo if required by theme |
+ DARK: 'dark', |
+ DEFAULT_THEME: 'default-theme', |
+ DELAYED_HIDE_NOTIFICATION: 'mv-notice-delayed-hide', |
+ 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', |
+ HIDE_FAKEBOX_AND_LOGO: 'hide-fakebox-logo', |
+ HIDE_NOTIFICATION: 'mv-notice-hide', |
+ LEFT_ALIGN_ATTRIBUTION: 'left-align-attribution', |
+ // Vertically centers the most visited section for a non-Google provided |
+ // page. |
+ NON_GOOGLE_PAGE: 'non-google-page', |
+ RTL: 'rtl' // Right-to-left language text. |
+ }; |
-/** |
- * Enum for HTML element ids. |
- * @enum {string} |
- * @const |
- */ |
-var IDS = { |
- ATTRIBUTION: 'attribution', |
- ATTRIBUTION_TEXT: 'attribution-text', |
- CUSTOM_THEME_STYLE: 'ct-style', |
- FAKEBOX: 'fakebox', |
- FAKEBOX_INPUT: 'fakebox-input', |
- FAKEBOX_TEXT: 'fakebox-text', |
- LOGO: 'logo', |
- NOTIFICATION: 'mv-notice', |
- NOTIFICATION_CLOSE_BUTTON: 'mv-notice-x', |
- NOTIFICATION_MESSAGE: 'mv-msg', |
- NTP_CONTENTS: 'ntp-contents', |
- RESTORE_ALL_LINK: 'mv-restore', |
- TILES: 'mv-tiles', |
- UNDO_LINK: 'mv-undo' |
-}; |
+ /** |
+ * Enum for HTML element ids. |
+ * @enum {string} |
+ * @const |
+ */ |
+ var IDS = { |
+ ATTRIBUTION: 'attribution', |
+ ATTRIBUTION_TEXT: 'attribution-text', |
+ CUSTOM_THEME_STYLE: 'ct-style', |
+ FAKEBOX: 'fakebox', |
+ FAKEBOX_INPUT: 'fakebox-input', |
+ FAKEBOX_TEXT: 'fakebox-text', |
+ LOGO: 'logo', |
+ NOTIFICATION: 'mv-notice', |
+ NOTIFICATION_CLOSE_BUTTON: 'mv-notice-x', |
+ NOTIFICATION_MESSAGE: 'mv-msg', |
+ NTP_CONTENTS: 'ntp-contents', |
+ RESTORE_ALL_LINK: 'mv-restore', |
+ TILES: 'mv-tiles', |
+ UNDO_LINK: 'mv-undo' |
+ }; |
-/** |
- * Enum for keycodes. |
- * @enum {number} |
- * @const |
- */ |
-var KEYCODE = { |
- ENTER: 13 |
-}; |
+ /** |
+ * Enum for keycodes. |
+ * @enum {number} |
+ * @const |
+ */ |
+ var KEYCODE = {ENTER: 13}; |
-/** |
- * Enum for the state of the NTP when it is disposed. |
- * @enum {number} |
- * @const |
- */ |
-var NTP_DISPOSE_STATE = { |
- NONE: 0, // Preserve the NTP appearance and functionality |
- DISABLE_FAKEBOX: 1, |
- HIDE_FAKEBOX_AND_LOGO: 2 |
-}; |
+ /** |
+ * Enum for the state of the NTP when it is disposed. |
+ * @enum {number} |
+ * @const |
+ */ |
+ var NTP_DISPOSE_STATE = { |
+ NONE: 0, // Preserve the NTP appearance and functionality |
+ DISABLE_FAKEBOX: 1, |
+ HIDE_FAKEBOX_AND_LOGO: 2 |
+ }; |
-/** |
- * The notification displayed when a page is blacklisted. |
- * @type {Element} |
- */ |
-var notification; |
+ /** |
+ * The notification displayed when a page is blacklisted. |
+ * @type {Element} |
+ */ |
+ var notification; |
-/** |
- * The container for the theme attribution. |
- * @type {Element} |
- */ |
-var attribution; |
+ /** |
+ * The container for the theme attribution. |
+ * @type {Element} |
+ */ |
+ var attribution; |
-/** |
- * The "fakebox" - an input field that looks like a regular searchbox. When it |
- * is focused, any text the user types goes directly into the omnibox. |
- * @type {Element} |
- */ |
-var fakebox; |
+ /** |
+ * The "fakebox" - an input field that looks like a regular searchbox. When |
+ * it |
+ * is focused, any text the user types goes directly into the omnibox. |
+ * @type {Element} |
+ */ |
+ var fakebox; |
-/** |
- * The container for NTP elements. |
- * @type {Element} |
- */ |
-var ntpContents; |
+ /** |
+ * The container for NTP elements. |
+ * @type {Element} |
+ */ |
+ var ntpContents; |
-/** |
- * The last blacklisted tile rid if any, which by definition should not be |
- * filler. |
- * @type {?number} |
- */ |
-var lastBlacklistedTile = null; |
+ /** |
+ * The last blacklisted tile rid if any, which by definition should not be |
+ * filler. |
+ * @type {?number} |
+ */ |
+ var lastBlacklistedTile = null; |
-/** |
- * Current number of tiles columns shown based on the window width, including |
- * those that just contain filler. |
- * @type {number} |
- */ |
-var numColumnsShown = 0; |
+ /** |
+ * Current number of tiles columns shown based on the window width, including |
+ * those that just contain filler. |
+ * @type {number} |
+ */ |
+ var numColumnsShown = 0; |
-/** |
- * The browser embeddedSearch.newTabPage object. |
- * @type {Object} |
- */ |
-var ntpApiHandle; |
+ /** |
+ * The browser embeddedSearch.newTabPage object. |
+ * @type {Object} |
+ */ |
+ var ntpApiHandle; |
-/** |
- * The browser embeddedSearch.searchBox object. |
- * @type {Object} |
- */ |
-var searchboxApiHandle; |
+ /** |
+ * The browser embeddedSearch.searchBox object. |
+ * @type {Object} |
+ */ |
+ var searchboxApiHandle; |
-/** |
- * The state of the NTP when a query is entered into the Omnibox. |
- * @type {NTP_DISPOSE_STATE} |
- */ |
-var omniboxInputBehavior = NTP_DISPOSE_STATE.NONE; |
+ /** |
+ * The state of the NTP when a query is entered into the Omnibox. |
+ * @type {NTP_DISPOSE_STATE} |
+ */ |
+ 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; |
+ /** |
+ * 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; |
-/** @type {number} @const */ |
-var MAX_NUM_TILES_TO_SHOW = 8; |
+ /** @type {number} @const */ |
+ var MAX_NUM_TILES_TO_SHOW = 8; |
-/** @type {number} @const */ |
-var MIN_NUM_COLUMNS = 2; |
+ /** @type {number} @const */ |
+ var MIN_NUM_COLUMNS = 2; |
-/** @type {number} @const */ |
-var MAX_NUM_COLUMNS = 4; |
+ /** @type {number} @const */ |
+ var MAX_NUM_COLUMNS = 4; |
-/** @type {number} @const */ |
-var NUM_ROWS = 2; |
+ /** @type {number} @const */ |
+ var NUM_ROWS = 2; |
-/** |
- * Minimum total padding to give to the left and right of the most visited |
- * section. Used to determine how many tiles to show. |
- * @type {number} |
- * @const |
- */ |
-var MIN_TOTAL_HORIZONTAL_PADDING = 200; |
+ /** |
+ * Minimum total padding to give to the left and right of the most visited |
+ * section. Used to determine how many tiles to show. |
+ * @type {number} |
+ * @const |
+ */ |
+ var MIN_TOTAL_HORIZONTAL_PADDING = 200; |
-/** |
+ /** |
* Heuristic to determine whether a theme should be considered to be dark, so |
* the colors of various UI elements can be adjusted. |
* @param {ThemeBackgroundInfo|undefined} info Theme background information. |
* @return {boolean} Whether the theme is dark. |
* @private |
*/ |
-function getIsThemeDark(info) { |
- if (!info) |
- return false; |
- // Heuristic: light text implies dark theme. |
- var rgba = info.textColorRgba; |
- var luminance = 0.3 * rgba[0] + 0.59 * rgba[1] + 0.11 * rgba[2]; |
- return luminance >= 128; |
-} |
+ function getIsThemeDark(info) { |
+ if (!info) |
+ return false; |
+ // Heuristic: light text implies dark theme. |
+ var rgba = info.textColorRgba; |
+ var luminance = 0.3 * rgba[0] + 0.59 * rgba[1] + 0.11 * rgba[2]; |
+ return luminance >= 128; |
+ } |
-/** |
- * Updates the NTP based on the current theme. |
- * @private |
- */ |
-function renderTheme() { |
- var fakeboxText = $(IDS.FAKEBOX_TEXT); |
- if (fakeboxText) { |
- fakeboxText.innerHTML = ''; |
- if (configData.translatedStrings.searchboxPlaceholder) { |
- fakeboxText.textContent = |
- configData.translatedStrings.searchboxPlaceholder; |
+ /** |
+ * Updates the NTP based on the current theme. |
+ * @private |
+ */ |
+ function renderTheme() { |
+ var fakeboxText = $(IDS.FAKEBOX_TEXT); |
+ if (fakeboxText) { |
+ fakeboxText.innerHTML = ''; |
+ if (configData.translatedStrings.searchboxPlaceholder) { |
+ fakeboxText.textContent = |
+ configData.translatedStrings.searchboxPlaceholder; |
+ } |
} |
- } |
- var info = ntpApiHandle.themeBackgroundInfo; |
- var isThemeDark = getIsThemeDark(info); |
- ntpContents.classList.toggle(CLASSES.DARK, isThemeDark); |
- if (!info) { |
- return; |
- } |
- |
- var background = [convertToRGBAColor(info.backgroundColorRgba), |
- info.imageUrl, |
- info.imageTiling, |
- info.imageHorizontalAlignment, |
- info.imageVerticalAlignment].join(' ').trim(); |
+ var info = ntpApiHandle.themeBackgroundInfo; |
+ var isThemeDark = getIsThemeDark(info); |
+ ntpContents.classList.toggle(CLASSES.DARK, isThemeDark); |
+ if (!info) { |
+ return; |
+ } |
- document.body.style.background = background; |
- document.body.classList.toggle(CLASSES.ALTERNATE_LOGO, info.alternateLogo); |
- updateThemeAttribution(info.attributionUrl, info.imageHorizontalAlignment); |
- setCustomThemeStyle(info); |
+ 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, info.imageHorizontalAlignment); |
+ setCustomThemeStyle(info); |
+ |
+ var themeinfo = {cmd: 'updateTheme'}; |
+ if (!info.usingDefaultTheme) { |
+ themeinfo.tileBorderColor = |
+ convertToRGBAColor(info.sectionBorderColorRgba); |
+ themeinfo.tileHoverBorderColor = convertToRGBAColor(info.headerColorRgba); |
+ } |
+ themeinfo.isThemeDark = isThemeDark; |
- var themeinfo = {cmd: 'updateTheme'}; |
- if (!info.usingDefaultTheme) { |
- themeinfo.tileBorderColor = convertToRGBAColor(info.sectionBorderColorRgba); |
- themeinfo.tileHoverBorderColor = convertToRGBAColor(info.headerColorRgba); |
- } |
- themeinfo.isThemeDark = isThemeDark; |
+ var titleColor = NTP_DESIGN.titleColor; |
+ if (!info.usingDefaultTheme && info.textColorRgba) { |
+ titleColor = info.textColorRgba; |
+ } else if (isThemeDark) { |
+ titleColor = NTP_DESIGN.titleColorAgainstDark; |
+ } |
+ themeinfo.tileTitleColor = convertToRGBAColor(titleColor); |
- var titleColor = NTP_DESIGN.titleColor; |
- if (!info.usingDefaultTheme && info.textColorRgba) { |
- titleColor = info.textColorRgba; |
- } else if (isThemeDark) { |
- titleColor = NTP_DESIGN.titleColorAgainstDark; |
+ $('mv-single').contentWindow.postMessage(themeinfo, '*'); |
} |
- themeinfo.tileTitleColor = convertToRGBAColor(titleColor); |
- $('mv-single').contentWindow.postMessage(themeinfo, '*'); |
-} |
- |
-/** |
- * Updates the NTP based on the current theme, then rerenders all tiles. |
- * @private |
- */ |
-function onThemeChange() { |
- renderTheme(); |
-} |
+ /** |
+ * Updates the NTP based on the current theme, then rerenders all tiles. |
+ * @private |
+ */ |
+ function onThemeChange() { |
+ renderTheme(); |
+ } |
-/** |
- * 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 {' + |
- ' color: ' + convertToRGBAColor(opt_themeInfo.textColorLightRgba) + ';' + |
- '}' + |
- '#mv-notice-x {' + |
- ' -webkit-filter: drop-shadow(0 0 0 ' + |
+ /** |
+ * 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 {' + |
+ ' color: ' + convertToRGBAColor(opt_themeInfo.textColorLightRgba) + |
+ ';' + |
+ '}' + |
+ '#mv-notice-x {' + |
+ ' -webkit-filter: drop-shadow(0 0 0 ' + |
convertToRGBAColor(opt_themeInfo.textColorRgba) + ');' + |
- '}' + |
- '.mv-page-ready .mv-mask {' + |
- ' border: 1px solid ' + |
+ '}' + |
+ '.mv-page-ready .mv-mask {' + |
+ ' border: 1px solid ' + |
convertToRGBAColor(opt_themeInfo.sectionBorderColorRgba) + ';' + |
- '}' + |
- '.mv-page-ready:hover .mv-mask, .mv-page-ready .mv-focused ~ .mv-mask {' + |
- ' border-color: ' + |
+ '}' + |
+ '.mv-page-ready:hover .mv-mask, ' + |
+ '.mv-page-ready .mv-focused ~ .mv-mask {' + |
+ ' border-color: ' + |
convertToRGBAColor(opt_themeInfo.headerColorRgba) + ';' + |
- '}'; |
+ '}'; |
+ |
+ if (customStyleElement) { |
+ customStyleElement.textContent = themeStyle; |
+ } else { |
+ customStyleElement = document.createElement('style'); |
+ customStyleElement.type = 'text/css'; |
+ customStyleElement.id = IDS.CUSTOM_THEME_STYLE; |
+ customStyleElement.textContent = themeStyle; |
+ head.appendChild(customStyleElement); |
+ } |
- if (customStyleElement) { |
- customStyleElement.textContent = themeStyle; |
} else { |
- customStyleElement = document.createElement('style'); |
- customStyleElement.type = 'text/css'; |
- customStyleElement.id = IDS.CUSTOM_THEME_STYLE; |
- customStyleElement.textContent = themeStyle; |
- head.appendChild(customStyleElement); |
+ ntpContents.classList.add(CLASSES.DEFAULT_THEME); |
+ if (customStyleElement) |
+ head.removeChild(customStyleElement); |
} |
- |
- } else { |
- ntpContents.classList.add(CLASSES.DEFAULT_THEME); |
- if (customStyleElement) |
- head.removeChild(customStyleElement); |
} |
-} |
-/** |
- * Renders the attribution if the URL is present, otherwise hides it. |
- * @param {string} url The URL of the attribution image, if any. |
- * @param {string} themeBackgroundAlignment The alignment of the theme |
- * background image. This is used to compute the attribution's alignment. |
- * @private |
- */ |
-function updateThemeAttribution(url, themeBackgroundAlignment) { |
- if (!url) { |
- setAttributionVisibility_(false); |
- return; |
- } |
+ /** |
+ * Renders the attribution if the URL is present, otherwise hides it. |
+ * @param {string} url The URL of the attribution image, if any. |
+ * @param {string} themeBackgroundAlignment The alignment of the theme |
+ * background image. This is used to compute the attribution's alignment. |
+ * @private |
+ */ |
+ function updateThemeAttribution(url, themeBackgroundAlignment) { |
+ if (!url) { |
+ setAttributionVisibility_(false); |
+ return; |
+ } |
- var attributionImage = attribution.querySelector('img'); |
- if (!attributionImage) { |
- attributionImage = new Image(); |
- attribution.appendChild(attributionImage); |
- } |
- attributionImage.style.content = url; |
+ var attributionImage = attribution.querySelector('img'); |
+ if (!attributionImage) { |
+ attributionImage = new Image(); |
+ attribution.appendChild(attributionImage); |
+ } |
+ attributionImage.style.content = url; |
- // To avoid conflicts, place the attribution on the left for themes that |
- // right align their background images. |
- attribution.classList.toggle(CLASSES.LEFT_ALIGN_ATTRIBUTION, |
- themeBackgroundAlignment == 'right'); |
- setAttributionVisibility_(true); |
-} |
+ // To avoid conflicts, place the attribution on the left for themes that |
+ // right align their background images. |
+ attribution.classList.toggle( |
+ CLASSES.LEFT_ALIGN_ATTRIBUTION, themeBackgroundAlignment == 'right'); |
+ setAttributionVisibility_(true); |
+ } |
-/** |
- * Sets the visibility of the theme attribution. |
- * @param {boolean} show True to show the attribution. |
- * @private |
- */ |
-function setAttributionVisibility_(show) { |
- if (attribution) { |
- attribution.style.display = show ? '' : 'none'; |
+ /** |
+ * Sets the visibility of the theme attribution. |
+ * @param {boolean} show True to show the attribution. |
+ * @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(''); |
-} |
+ 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 + ')'; |
-} |
+ function convertToRGBAColor(color) { |
+ return 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + |
+ color[3] / 255 + ')'; |
+ } |
-/** |
- * Called when page data change. |
- */ |
-function onMostVisitedChange() { |
- reloadTiles(); |
-} |
+ /** |
+ * Called when page data change. |
+ */ |
+ function onMostVisitedChange() { |
+ reloadTiles(); |
+ } |
-/** |
- * Fetches new data, creates, and renders tiles. |
- */ |
-function reloadTiles() { |
- var pages = ntpApiHandle.mostVisited; |
- var cmds = []; |
- for (var i = 0; i < Math.min(MAX_NUM_TILES_TO_SHOW, pages.length); ++i) { |
- cmds.push({cmd: 'tile', rid: pages[i].rid}); |
- } |
- cmds.push({cmd: 'show', maxVisible: numColumnsShown * NUM_ROWS}); |
+ /** |
+ * Fetches new data, creates, and renders tiles. |
+ */ |
+ function reloadTiles() { |
+ var pages = ntpApiHandle.mostVisited; |
+ var cmds = []; |
+ for (var i = 0; i < Math.min(MAX_NUM_TILES_TO_SHOW, pages.length); ++i) { |
+ cmds.push({cmd: 'tile', rid: pages[i].rid}); |
+ } |
+ cmds.push({cmd: 'show', maxVisible: numColumnsShown * NUM_ROWS}); |
- $('mv-single').contentWindow.postMessage(cmds, '*'); |
-} |
+ $('mv-single').contentWindow.postMessage(cmds, '*'); |
+ } |
-/** |
- * Shows the blacklist notification and triggers a delay to hide it. |
- */ |
-function showNotification() { |
- notification.classList.remove(CLASSES.HIDE_NOTIFICATION); |
- notification.classList.remove(CLASSES.DELAYED_HIDE_NOTIFICATION); |
- notification.scrollTop; |
- notification.classList.add(CLASSES.DELAYED_HIDE_NOTIFICATION); |
-} |
+ /** |
+ * Shows the blacklist notification and triggers a delay to hide it. |
+ */ |
+ function showNotification() { |
+ notification.classList.remove(CLASSES.HIDE_NOTIFICATION); |
+ notification.classList.remove(CLASSES.DELAYED_HIDE_NOTIFICATION); |
+ 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); |
-} |
+ /** |
+ * 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() { |
- hideNotification(); |
- if (lastBlacklistedTile != null) { |
- ntpApiHandle.undoMostVisitedDeletion(lastBlacklistedTile); |
+ /** |
+ * Handles a click on the notification undo link by hiding the notification |
+ * and |
+ * informing Chrome. |
+ */ |
+ function onUndo() { |
+ hideNotification(); |
+ if (lastBlacklistedTile != null) { |
+ ntpApiHandle.undoMostVisitedDeletion(lastBlacklistedTile); |
+ } |
} |
-} |
-/** |
- * Handles a click on the restore all notification link by hiding the |
- * notification and informing Chrome. |
- */ |
-function onRestoreAll() { |
- hideNotification(); |
- ntpApiHandle.undoAllMostVisitedDeletions(); |
-} |
+ /** |
+ * Handles a click on the restore all notification link by hiding the |
+ * notification and informing Chrome. |
+ */ |
+ function onRestoreAll() { |
+ hideNotification(); |
+ ntpApiHandle.undoAllMostVisitedDeletions(); |
+ } |
-/** |
+ /** |
* 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 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 - |
- NTP_DESIGN.fakeboxWingSize * 2 - 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) |
- return false; |
- |
- numColumnsShown = newNumColumns; |
- // We add an extra pixel because rounding errors on different zooms can |
- // make the width shorter than it should be. |
- var tilesContainerWidth = Math.ceil(numColumnsShown * tileRequiredWidth) + 1; |
- $(IDS.TILES).style.width = tilesContainerWidth + 'px'; |
- if (fakebox) { |
- // -2 to account for border. |
- var fakeboxWidth = (tilesContainerWidth - NTP_DESIGN.tileMargin - 2); |
- fakeboxWidth += NTP_DESIGN.fakeboxWingSize * 2; |
- fakebox.style.width = fakeboxWidth + 'px'; |
- } |
- return true; |
-} |
+ 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 - |
+ NTP_DESIGN.fakeboxWingSize * 2 - 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) |
+ return false; |
+ |
+ numColumnsShown = newNumColumns; |
+ // We add an extra pixel because rounding errors on different zooms can |
+ // make the width shorter than it should be. |
+ var tilesContainerWidth = |
+ Math.ceil(numColumnsShown * tileRequiredWidth) + 1; |
+ $(IDS.TILES).style.width = tilesContainerWidth + 'px'; |
+ if (fakebox) { |
+ // -2 to account for border. |
+ var fakeboxWidth = (tilesContainerWidth - NTP_DESIGN.tileMargin - 2); |
+ fakeboxWidth += NTP_DESIGN.fakeboxWingSize * 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() { |
- updateContentWidth(); |
- $('mv-single').contentWindow.postMessage( |
- {cmd: 'tilesVisible', maxVisible: numColumnsShown * NUM_ROWS}, '*'); |
-} |
+ /** |
+ * 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() { |
+ updateContentWidth(); |
+ $('mv-single') |
+ .contentWindow.postMessage( |
+ {cmd: 'tilesVisible', maxVisible: numColumnsShown * NUM_ROWS}, '*'); |
+ } |
-/** |
- * Handles new input by disposing the NTP, according to where the input was |
- * entered. |
- */ |
-function onInputStart() { |
- if (fakebox && isFakeboxFocused()) { |
- setFakeboxFocus(false); |
- setFakeboxDragFocus(false); |
- disposeNtp(true); |
- } else if (!isFakeboxFocused()) { |
- disposeNtp(false); |
+ /** |
+ * Handles new input by disposing the NTP, according to where the input was |
+ * entered. |
+ */ |
+ function onInputStart() { |
+ if (fakebox && isFakeboxFocused()) { |
+ setFakeboxFocus(false); |
+ setFakeboxDragFocus(false); |
+ disposeNtp(true); |
+ } else if (!isFakeboxFocused()) { |
+ disposeNtp(false); |
+ } |
} |
-} |
-/** |
- * Disposes the NTP, according to where the input was entered. |
- * @param {boolean} wasFakeboxInput True if the input was in the fakebox. |
- */ |
-function disposeNtp(wasFakeboxInput) { |
- var behavior = wasFakeboxInput ? fakeboxInputBehavior : omniboxInputBehavior; |
- if (behavior == NTP_DISPOSE_STATE.DISABLE_FAKEBOX) |
- setFakeboxActive(false); |
- else if (behavior == NTP_DISPOSE_STATE.HIDE_FAKEBOX_AND_LOGO) |
- setFakeboxAndLogoVisibility(false); |
-} |
+ /** |
+ * Disposes the NTP, according to where the input was entered. |
+ * @param {boolean} wasFakeboxInput True if the input was in the fakebox. |
+ */ |
+ function disposeNtp(wasFakeboxInput) { |
+ var behavior = |
+ wasFakeboxInput ? fakeboxInputBehavior : omniboxInputBehavior; |
+ if (behavior == NTP_DISPOSE_STATE.DISABLE_FAKEBOX) |
+ setFakeboxActive(false); |
+ else if (behavior == NTP_DISPOSE_STATE.HIDE_FAKEBOX_AND_LOGO) |
+ setFakeboxAndLogoVisibility(false); |
+ } |
-/** |
- * Restores the NTP (re-enables the fakebox and unhides the logo.) |
- */ |
-function restoreNtp() { |
- setFakeboxActive(true); |
- setFakeboxAndLogoVisibility(true); |
-} |
+ /** |
+ * Restores the NTP (re-enables the fakebox and unhides the logo.) |
+ */ |
+ function restoreNtp() { |
+ setFakeboxActive(true); |
+ setFakeboxAndLogoVisibility(true); |
+ } |
-/** |
- * @param {boolean} focus True to focus the fakebox. |
- */ |
-function setFakeboxFocus(focus) { |
- document.body.classList.toggle(CLASSES.FAKEBOX_FOCUS, focus); |
-} |
+ /** |
+ * @param {boolean} focus True to focus the fakebox. |
+ */ |
+ function setFakeboxFocus(focus) { |
+ document.body.classList.toggle(CLASSES.FAKEBOX_FOCUS, focus); |
+ } |
-/** |
- * @param {boolean} focus True to show a dragging focus to the fakebox. |
- */ |
-function setFakeboxDragFocus(focus) { |
- document.body.classList.toggle(CLASSES.FAKEBOX_DRAG_FOCUS, focus); |
-} |
+ /** |
+ * @param {boolean} focus True to show a dragging focus to the fakebox. |
+ */ |
+ function setFakeboxDragFocus(focus) { |
+ document.body.classList.toggle(CLASSES.FAKEBOX_DRAG_FOCUS, focus); |
+ } |
-/** |
+ /** |
* @return {boolean} True if the fakebox has focus. |
*/ |
-function isFakeboxFocused() { |
- return document.body.classList.contains(CLASSES.FAKEBOX_FOCUS) || |
- document.body.classList.contains(CLASSES.FAKEBOX_DRAG_FOCUS); |
-} |
+ function isFakeboxFocused() { |
+ return document.body.classList.contains(CLASSES.FAKEBOX_FOCUS) || |
+ document.body.classList.contains(CLASSES.FAKEBOX_DRAG_FOCUS); |
+ } |
-/** |
- * @param {boolean} enable True to enable the fakebox. |
- */ |
-function setFakeboxActive(enable) { |
- document.body.classList.toggle(CLASSES.FAKEBOX_DISABLE, !enable); |
-} |
+ /** |
+ * @param {boolean} enable True to enable the fakebox. |
+ */ |
+ function setFakeboxActive(enable) { |
+ document.body.classList.toggle(CLASSES.FAKEBOX_DISABLE, !enable); |
+ } |
-/** |
+ /** |
* @param {!Event} event The click event. |
* @return {boolean} True if the click occurred in an enabled fakebox. |
*/ |
-function isFakeboxClick(event) { |
- return fakebox.contains(event.target) && |
- !document.body.classList.contains(CLASSES.FAKEBOX_DISABLE); |
-} |
+ function isFakeboxClick(event) { |
+ return fakebox.contains(event.target) && |
+ !document.body.classList.contains(CLASSES.FAKEBOX_DISABLE); |
+ } |
-/** |
- * @param {boolean} show True to show the fakebox and logo. |
- */ |
-function setFakeboxAndLogoVisibility(show) { |
- document.body.classList.toggle(CLASSES.HIDE_FAKEBOX_AND_LOGO, !show); |
-} |
+ /** |
+ * @param {boolean} show True to show the fakebox and logo. |
+ */ |
+ function setFakeboxAndLogoVisibility(show) { |
+ document.body.classList.toggle(CLASSES.HIDE_FAKEBOX_AND_LOGO, !show); |
+ } |
-/** |
+ /** |
* Shortcut for document.getElementById. |
* @param {string} id of the element. |
* @return {HTMLElement} with the id. |
*/ |
-function $(id) { |
- return document.getElementById(id); |
-} |
+ function $(id) { |
+ return document.getElementById(id); |
+ } |
-/** |
+ /** |
* Utility function which creates an element with an optional classname and |
* appends it to the specified parent. |
* @param {Element} parent The parent to append the new element. |
@@ -683,223 +694,225 @@ function $(id) { |
* @param {string=} opt_class The optional classname of the new element. |
* @return {Element} The new element. |
*/ |
-function createAndAppendElement(parent, name, opt_class) { |
- var child = document.createElement(name); |
- if (opt_class) |
- child.classList.add(opt_class); |
- parent.appendChild(child); |
- return child; |
-} |
+ function createAndAppendElement(parent, name, opt_class) { |
+ var child = document.createElement(name); |
+ if (opt_class) |
+ child.classList.add(opt_class); |
+ parent.appendChild(child); |
+ return child; |
+ } |
-/** |
- * @param {!Element} element The element to register the handler for. |
- * @param {number} keycode The keycode of the key to register. |
- * @param {!Function} handler The key handler to register. |
- */ |
-function registerKeyHandler(element, keycode, handler) { |
- element.addEventListener('keydown', function(event) { |
- if (event.keyCode == keycode) |
- handler(event); |
- }); |
-} |
+ /** |
+ * @param {!Element} element The element to register the handler for. |
+ * @param {number} keycode The keycode of the key to register. |
+ * @param {!Function} handler The key handler to register. |
+ */ |
+ function registerKeyHandler(element, keycode, handler) { |
+ element.addEventListener('keydown', function(event) { |
+ if (event.keyCode == keycode) |
+ handler(event); |
+ }); |
+ } |
-/** |
+ /** |
* @return {Object} the handle to the embeddedSearch API. |
*/ |
-function getEmbeddedSearchApiHandle() { |
- if (window.cideb) |
- return window.cideb; |
- if (window.chrome && window.chrome.embeddedSearch) |
- return window.chrome.embeddedSearch; |
- return null; |
-} |
+ function getEmbeddedSearchApiHandle() { |
+ if (window.cideb) |
+ return window.cideb; |
+ if (window.chrome && window.chrome.embeddedSearch) |
+ return window.chrome.embeddedSearch; |
+ return null; |
+ } |
-/** |
- * Event handler for the focus changed and blacklist messages on link elements. |
- * Used to toggle visual treatment on the tiles (depending on the message). |
- * @param {Event} event Event received. |
- */ |
-function handlePostMessage(event) { |
- var cmd = event.data.cmd; |
- var args = event.data; |
- if (cmd == 'tileBlacklisted') { |
- showNotification(); |
- lastBlacklistedTile = args.tid; |
- |
- ntpApiHandle.deleteMostVisitedItem(args.tid); |
+ /** |
+ * Event handler for the focus changed and blacklist messages on link |
+ * elements. |
+ * Used to toggle visual treatment on the tiles (depending on the message). |
+ * @param {Event} event Event received. |
+ */ |
+ function handlePostMessage(event) { |
+ var cmd = event.data.cmd; |
+ var args = event.data; |
+ if (cmd == 'tileBlacklisted') { |
+ showNotification(); |
+ lastBlacklistedTile = args.tid; |
+ |
+ ntpApiHandle.deleteMostVisitedItem(args.tid); |
+ } |
} |
-} |
-/** |
- * 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() { |
- notification = $(IDS.NOTIFICATION); |
- attribution = $(IDS.ATTRIBUTION); |
- ntpContents = $(IDS.NTP_CONTENTS); |
- |
- if (configData.isGooglePage) { |
- var logo = document.createElement('div'); |
- logo.id = IDS.LOGO; |
- logo.title = 'Google'; |
- |
- fakebox = document.createElement('div'); |
- fakebox.id = IDS.FAKEBOX; |
- var fakeboxHtml = []; |
- fakeboxHtml.push('<div id="' + IDS.FAKEBOX_TEXT + '"></div>'); |
- fakeboxHtml.push('<input id="' + IDS.FAKEBOX_INPUT + |
- '" autocomplete="off" tabindex="-1" type="url" aria-hidden="true">'); |
- 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); |
- } |
- |
- // Modify design for experimental icon NTP, if specified. |
- if (configData.useIcons) |
- modifyNtpDesignForIcons(); |
- document.querySelector('#ntp-contents').classList.add(NTP_DESIGN.mainClass); |
- |
- // 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); |
- updateContentWidth(); |
- |
- var topLevelHandle = getEmbeddedSearchApiHandle(); |
- |
- ntpApiHandle = topLevelHandle.newTabPage; |
- ntpApiHandle.onthemechange = onThemeChange; |
- ntpApiHandle.onmostvisitedchange = onMostVisitedChange; |
- |
- ntpApiHandle.oninputstart = onInputStart; |
- ntpApiHandle.oninputcancel = restoreNtp; |
- |
- if (ntpApiHandle.isInputInProgress) |
- onInputStart(); |
- |
- searchboxApiHandle = topLevelHandle.searchBox; |
- |
- if (fakebox) { |
- // Listener for updating the key capture state. |
- document.body.onmousedown = function(event) { |
- if (isFakeboxClick(event)) |
- searchboxApiHandle.startCapturingKeyStrokes(); |
- else if (isFakeboxFocused()) |
- searchboxApiHandle.stopCapturingKeyStrokes(); |
- }; |
- searchboxApiHandle.onkeycapturechange = function() { |
- setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled); |
- }; |
- var inputbox = $(IDS.FAKEBOX_INPUT); |
- if (inputbox) { |
- inputbox.onpaste = function(event) { |
- event.preventDefault(); |
- // Send pasted text to Omnibox. |
- var text = event.clipboardData.getData('text/plain'); |
- if (text) |
- searchboxApiHandle.paste(text); |
- }; |
- inputbox.ondrop = function(event) { |
- event.preventDefault(); |
- var text = event.dataTransfer.getData('text/plain'); |
- if (text) { |
- searchboxApiHandle.paste(text); |
- } |
- setFakeboxDragFocus(false); |
- }; |
- inputbox.ondragenter = function() { |
- setFakeboxDragFocus(true); |
+ /** |
+ * 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() { |
+ notification = $(IDS.NOTIFICATION); |
+ attribution = $(IDS.ATTRIBUTION); |
+ ntpContents = $(IDS.NTP_CONTENTS); |
+ |
+ if (configData.isGooglePage) { |
+ var logo = document.createElement('div'); |
+ logo.id = IDS.LOGO; |
+ logo.title = 'Google'; |
+ |
+ fakebox = document.createElement('div'); |
+ fakebox.id = IDS.FAKEBOX; |
+ var fakeboxHtml = []; |
+ fakeboxHtml.push('<div id="' + IDS.FAKEBOX_TEXT + '"></div>'); |
+ fakeboxHtml.push( |
+ '<input id="' + IDS.FAKEBOX_INPUT + |
+ '" autocomplete="off" tabindex="-1" type="url" aria-hidden="true">'); |
+ 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); |
+ } |
+ |
+ // Modify design for experimental icon NTP, if specified. |
+ if (configData.useIcons) |
+ modifyNtpDesignForIcons(); |
+ document.querySelector('#ntp-contents').classList.add(NTP_DESIGN.mainClass); |
+ |
+ // 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); |
+ updateContentWidth(); |
+ |
+ var topLevelHandle = getEmbeddedSearchApiHandle(); |
+ |
+ ntpApiHandle = topLevelHandle.newTabPage; |
+ ntpApiHandle.onthemechange = onThemeChange; |
+ ntpApiHandle.onmostvisitedchange = onMostVisitedChange; |
+ |
+ ntpApiHandle.oninputstart = onInputStart; |
+ ntpApiHandle.oninputcancel = restoreNtp; |
+ |
+ if (ntpApiHandle.isInputInProgress) |
+ onInputStart(); |
+ |
+ searchboxApiHandle = topLevelHandle.searchBox; |
+ |
+ if (fakebox) { |
+ // Listener for updating the key capture state. |
+ document.body.onmousedown = function(event) { |
+ if (isFakeboxClick(event)) |
+ searchboxApiHandle.startCapturingKeyStrokes(); |
+ else if (isFakeboxFocused()) |
+ searchboxApiHandle.stopCapturingKeyStrokes(); |
}; |
- inputbox.ondragleave = function() { |
- setFakeboxDragFocus(false); |
+ searchboxApiHandle.onkeycapturechange = function() { |
+ setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled); |
}; |
+ var inputbox = $(IDS.FAKEBOX_INPUT); |
+ if (inputbox) { |
+ inputbox.onpaste = function(event) { |
+ event.preventDefault(); |
+ // Send pasted text to Omnibox. |
+ var text = event.clipboardData.getData('text/plain'); |
+ if (text) |
+ searchboxApiHandle.paste(text); |
+ }; |
+ inputbox.ondrop = function(event) { |
+ event.preventDefault(); |
+ var text = event.dataTransfer.getData('text/plain'); |
+ if (text) { |
+ searchboxApiHandle.paste(text); |
+ } |
+ setFakeboxDragFocus(false); |
+ }; |
+ inputbox.ondragenter = function() { |
+ setFakeboxDragFocus(true); |
+ }; |
+ inputbox.ondragleave = function() { |
+ setFakeboxDragFocus(false); |
+ }; |
+ } |
+ |
+ // Update the fakebox style to match the current key capturing state. |
+ setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled); |
} |
- // Update the fakebox style to match the current key capturing state. |
- setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled); |
- } |
- |
- if (searchboxApiHandle.rtl) { |
- $(IDS.NOTIFICATION).dir = 'rtl'; |
- // Grabbing the root HTML element. |
- document.documentElement.setAttribute('dir', 'rtl'); |
- // Add class for setting alignments based on language directionality. |
- document.documentElement.classList.add(CLASSES.RTL); |
- } |
+ if (searchboxApiHandle.rtl) { |
+ $(IDS.NOTIFICATION).dir = 'rtl'; |
+ // Grabbing the root HTML element. |
+ document.documentElement.setAttribute('dir', 'rtl'); |
+ // Add class for setting alignments based on language directionality. |
+ document.documentElement.classList.add(CLASSES.RTL); |
+ } |
- var iframe = document.createElement('iframe'); |
- // Change the order of tabbing the page to start with NTP tiles. |
- iframe.setAttribute('tabindex', '1'); |
- iframe.id = 'mv-single'; |
+ var iframe = document.createElement('iframe'); |
+ // Change the order of tabbing the page to start with NTP tiles. |
+ iframe.setAttribute('tabindex', '1'); |
+ iframe.id = 'mv-single'; |
- var args = []; |
+ var args = []; |
- if (searchboxApiHandle.rtl) |
- args.push('rtl=1'); |
- if (window.configData.useIcons) |
- args.push('icons=1'); |
- if (NTP_DESIGN.numTitleLines > 1) |
- args.push('ntl=' + NTP_DESIGN.numTitleLines); |
+ if (searchboxApiHandle.rtl) |
+ args.push('rtl=1'); |
+ if (window.configData.useIcons) |
+ args.push('icons=1'); |
+ if (NTP_DESIGN.numTitleLines > 1) |
+ args.push('ntl=' + NTP_DESIGN.numTitleLines); |
- args.push('removeTooltip=' + |
- encodeURIComponent(configData.translatedStrings.removeThumbnailTooltip)); |
+ args.push( |
+ 'removeTooltip=' + |
+ encodeURIComponent( |
+ configData.translatedStrings.removeThumbnailTooltip)); |
- iframe.src = '//most-visited/single.html?' + args.join('&'); |
- $(IDS.TILES).appendChild(iframe); |
+ iframe.src = '//most-visited/single.html?' + args.join('&'); |
+ $(IDS.TILES).appendChild(iframe); |
- iframe.onload = function() { |
- reloadTiles(); |
- renderTheme(); |
- }; |
+ iframe.onload = function() { |
+ reloadTiles(); |
+ renderTheme(); |
+ }; |
- window.addEventListener('message', handlePostMessage); |
-} |
+ window.addEventListener('message', handlePostMessage); |
+ } |
-/** |
- * Binds event listeners. |
- */ |
-function listen() { |
- document.addEventListener('DOMContentLoaded', init); |
-} |
+ /** |
+ * Binds event listeners. |
+ */ |
+ function listen() { |
+ document.addEventListener('DOMContentLoaded', init); |
+ } |
-return { |
- init: init, |
- listen: listen |
-}; |
+ return {init: init, listen: listen}; |
} |
if (!window.localNTPUnitTest) { |