** * The container for the tile ele

**
* The container for the tile elements.
* @type {Element}
*/
var tilesContainer;


/**
* The notification displayed when a page is blacklisted.
* @type {Element}
*/
var notification;


/**
* 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 container for NTP elements.
* @type {Element}
*/
var ntpContents;


/**
* The array of rendered tiles, ordered by appearance.
* @type {!Array.}
*/
var tiles = [];


/**
* The last blacklisted tile if any, which by definition should not be filler.
* @type {?Tile}
*/
var lastBlacklistedTile = null;


/**
* The iframe element which is currently keyboard focused, or null.
* @type {?Element}
*/
var focusedIframe = null;


/**
* True if a page has been blacklisted and we're waiting on the
* onmostvisitedchange callback. See onMostVisitedChange() for how this
* is used.
* @type {boolean}
*/
var isBlacklisting = false;


/**
* Current number of tiles columns shown based on the window width, including
* those that just contain filler.
* @type {number}
*/
var numColumnsShown = 0;


/**
* A flag to indicate Most Visited changed caused by user action. If true, then
* in onMostVisitedChange() tiles remain visible so no flickering occurs.
* @type {boolean}
*/
var userInitiatedMostVisitedChange = false;


/**
* The browser embeddedSearch.newTabPage object.
* @type {Object}
*/
var ntpApiHandle;


/**
* 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 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 MIN_NUM_COLUMNS = 2;


/** @type {number} @const */
var MAX_NUM_COLUMNS = 4;


/** @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;


/**
* The filename for a most visited iframe src which shows a page title.
* @type {string}
* @const
*/
var MOST_VISITED_TITLE_IFRAME = 'title.html';


/**
* The filename for a most visited iframe src which shows a thumbnail image.
* @type {string}
* @const
*/
var MOST_VISITED_THUMBNAIL_IFRAME = 'thumbnail.html';


/**
* The color of the title in RRGGBBAA format.
* @type {?string}
*/
var titleColor = null;


/**
* 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.
*
* @param {Element} elem The element for rendering the tile.
* @param {Element=} opt_innerElem The element for contents of tile.
* @param {Element=} opt_titleElem The element for rendering the title.
* @param {Element=} opt_thumbnailElem The element for rendering the thumbnail.
* @param {number=} opt_rid The RID for the corresponding Most Visited page.
* Should only be left unspecified when creating a filler tile.
* @constructor
*/
function Tile(elem, opt_innerElem, opt_titleElem, opt_thumbnailElem, opt_rid) {
/** @type {Element} */
this.elem = elem;

/** @type {Element|undefined} */
this.innerElem = opt_innerElem;

/** @type {Element|undefined} */
this.titleElem = opt_titleElem;

/** @type {Element|undefined} */
this.thumbnailElem = opt_thumbnailElem;

/** @type {number|undefined} */
this.rid = opt_rid;
}


/**
* 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;
}


/**
* Updates the NTP based on the current theme.
* @private
*/
function renderTheme() {
var fakeboxText = $(IDS.FAKEBOX_TEXT);
if (fakeboxText) {
fakeboxText.innerHTML = '';
if (NTP_DESIGN.showFakeboxHint &&
configData.translatedStrings.searchboxPlaceholder) {
fakeboxText.textContent =
configData.translatedStrings.searchboxPlaceholder;
}
}

var info = ntpApiHandle.themeBackgroundInfo;
var isThemeDark = getIsThemeDark(info);
ntpContents.classList.toggle(CLASSES.DARK, isThemeDark);
if (!info) {
titleColor = NTP_DESIGN.titleColor;
return;
}

if (!info.usingDefaultTheme && info.textColorRgba) {
titleColor = convertToRRGGBBAAColor(info.textColorRgba);
} else {
titleColor = isThemeDark ?
NTP_DESIGN.titleColorAgainstDark : NTP_DESIGN.titleColor;
}

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);
setCustomThemeStyle(info);
}


/**
* Updates the NTP based on the current theme, then rerenders all tiles.
* @private
*/
function onThemeChange() {
renderTheme();
tilesContainer.innerHTML = '';
renderAndShowTiles();
}


/**
* 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 ' +
convertToRGBAColor(opt_themeInfo.sectionBorderColorRgba) + ';' +
'}' +
'.mv-page-ready:hover .mv-mask, .mv-page-ready .mv-focused ~ .mv-mask {' +
' border-color: ' +
convertToRGBAColor(opt_themeInfo.headerColorRgba) + ';' +
'}';

結果 (中文) 1:

*** 为瓷砖元素的的容器。* @type {元} */var tilesContainer ；/*** 通知显示当网页被列入了黑名单。* @type {元} */var 通知 ；/*** 为主题属性的的容器。* @type {元} */var 的归因 ；/***"Fakebox"— — 输入字段，看起来像常规的搜索框内键入。当它* 是集中，用户类型直接进入 omnibox 的任何文本。* @type {元} */var fakebox ；/*** NTP 元素的容器。* @type {元} */var ntpContents ；/*** 数组呈现的瓷砖，下令由外观。* @type {！数组。} */var 瓷砖 = [] ；/*** 最后列入黑名单瓷砖的话，其中的定义不应填充。* @type {吗？瓷砖} */var lastBlacklistedTile = null ；/*** Iframe 元素是当前键盘焦点，则为 null。* @type {吗？元素} */var focusedIframe = null ；/*** 如果网页已被列入黑名单，我们正在等待* onmostvisitedchange 回调。请参阅如何为 onMostVisitedChange() 这* 使用。* @type {布尔值} */var isBlacklisting = false ；/*** 当前的窗口宽度，根据显示的瓷砖列数包括* 那些只包含填充。* @type {号码} */var numColumnsShown = 0 ；/*** 一个标志来指示访问最多改变是由用户操作引起的。如果为 true，然后* 在 onMostVisitedChange() 瓷砖保持可见的所以没有闪烁现象发生。* @type {布尔值} */var userInitiatedMostVisitedChange = false ；/*** 该浏览器的 embeddedSearch.newTabPage 对象。* @type {对象} */var ntpApiHandle ；/*** 该浏览器的 embeddedSearch.searchBox 对象。* @type {对象} */var searchboxApiHandle ；/*** NTP 查询是进 Omnibox 状态。* @type {NTP_DISPOSE_STATE} */var omniboxInputBehavior = NTP_DISPOSE_STATE。无 ；/*** NTP 查询是进 Fakebox 状态。* @type {NTP_DISPOSE_STATE} */var fakeboxInputBehavior = NTP_DISPOSE_STATE。HIDE_FAKEBOX_AND_LOGO ；/ * * @type {号码} @const * /var MAX_NUM_TILES_TO_SHOW = 8 ；/ * * @type {号码} @const * /var MIN_NUM_COLUMNS = 2 ；/ * * @type {号码} @const * /var MAX_NUM_COLUMNS = 4 ；/ * * @type {号码} @const * /var NUM_ROWS = 2 ；/*** 最低要给到左边和右边的访问量最大的总填充* 第一节。用于确定多少瓷砖展示。* @type {号码}* @const */var MIN_TOTAL_HORIZONTAL_PADDING = 200 ；/*** 为参观人数最多的 iframe src 的网页标题显示文件名。* @type {字符串}* @const */var MOST_VISITED_TITLE_IFRAME = 'title.html' ；/*** 为参观人数最多的 iframe src 显示缩略图的图像的文件名。* @type {字符串}* @const */var MOST_VISITED_THUMBNAIL_IFRAME = 'thumbnail.html' ；/*** RRGGBBAA 格式的标题的颜色。* @type {吗？ 字符串} */var titleColor = null ；/*** 访问最多的隐藏顶多这地平铺在绘画时的毫秒数。* @type {号码}* @const */var MOST_VISITED_PAINT_TIMEOUT_MSEC = 500 ；/*** 瓷砖是要么呈现访问最多的网页或者"补白"习惯* 垫部分时没有足够的页存在。 ** @param {元} elem 渲染图块的元素。* @param {元 =} opt_innerElem 的元素内容的瓷砖。* @param {元 =} opt_titleElem 用于呈现标题元素。* @param {元 =} opt_thumbnailElem 的元素的呈现缩略图。* @param {数 =} opt_rid 摆脱为相应的访问最多的页面。* 应仅将未创建填充瓦时。* @constructor */瓷砖 （elem、 opt_innerElem、 opt_titleElem、 opt_thumbnailElem、 opt_rid) {函数/ * * @type {元} * /this.elem = elem ；/ * * @type {Element|undefined} * /this.innerElem = opt_innerElem ；/ * * @type {Element|undefined} * /this.titleElem = opt_titleElem ；/ * * @type {Element|undefined} * /this.thumbnailElem = opt_thumbnailElem ；/ * * @type {number|undefined} * /this.rid = opt_rid ；}/*** 启发式搜索来确定是否应视为一个主题，是黑暗的所以* 各种 UI 元素的颜色可以调整。* @param {ThemeBackgroundInfo|undefined} 信息主题背景信息。* @return {布尔值} 是否主题是黑暗。* @private */函数 getIsThemeDark(info) {如果 (！ 信息）返回 false ；启发式： 浅色文本意味着黑暗的主题。var rgba = info.textColorRgba ；var 亮度 = 0.3 * rgba [0] + 0.59 * rgba [1] + 0.11 * rgba [2] ；返回亮度 > = 128 ；}/*** 更新 NTP 基于当前主题。* @private */函数 renderTheme() {var fakeboxText = $(IDS。FAKEBOX_TEXT） ；如果 （fakeboxText） {fakeboxText.innerHTML = ' ；如果 (NTP_DESIGN.showFakeboxHint & &configData.translatedStrings.searchboxPlaceholder） {fakeboxText.textContent =configData.translatedStrings.searchboxPlaceholder ； } }var 信息 = ntpApiHandle.themeBackgroundInfo ；var isThemeDark = getIsThemeDark(info) ；ntpContents.classList.toggle （类。黑暗，isThemeDark） ；如果 (！ 信息） {titleColor = NTP_DESIGN.titleColor ；返回 ； }如果 (! info.usingDefaultTheme & & info.textColorRgba） {titleColor = convertToRRGGBBAAColor(info.textColorRgba) ；} {别的titleColor = isThemeDark 吗？NTP_DESIGN.titleColorAgainstDark： NTP_DESIGN.titleColor ； }var 背景 = [convertToRGBAColor(info.backgroundColorRgba)，info.imageUrl，info.imageTiling，info.imageHorizontalAlignment，info.imageVerticalAlignment].join(' ').trim() ；document.body.style.background = 背景 ；document.body.classList.toggle （类。ALTERNATE_LOGO、 info.alternateLogo） ；updateThemeAttribution(info.attributionUrl) ；setCustomThemeStyle(info) ；}/*** 更新 NTP 基于当前的主题，然后重新提交所有瓷砖。* @private */函数 onThemeChange() {renderTheme() ；tilesContainer.innerHTML = ' ；renderAndShowTiles() ；}/*** 更新 NTP 样式根据主题。* @param {对象 =} opt_themeInfo 关于这一主题的信息。如果它是* 被省略的样式将被还原为默认值。* @private */函数 setCustomThemeStyle(opt_themeInfo) {var customStyleElement = $(IDS。CUSTOM_THEME_STYLE） ；var 头 = document.head ；如果 (opt_themeInfo & & ！ opt_themeInfo.usingDefaultTheme） {ntpContents.classList.remove （类。DEFAULT_THEME） ；var themeStyle =' #attribution {' +'颜色：' + convertToRGBAColor(opt_themeInfo.textColorLightRgba) + ';' + '}' +' #mv 味精 {' +'颜色：' + convertToRGBAColor(opt_themeInfo.textColorRgba) + ';' + '}' +' #mv-通知-链接跨度 {' +'颜色：' + convertToRGBAColor(opt_themeInfo.textColorLightRgba) + ';' + '}' +' #mv-通知-x {' +'-webkit 过滤器： 滴 shadow(0 0 0' +convertToRGBAColor(opt_themeInfo.textColorRgba) + '） ； ' + '}' +'.mv 页准备.mv 面具 {' +'边境： 1px 固体' +convertToRGBAColor(opt_themeInfo.sectionBorderColorRgba) + ';' + '}' +'.mv-页面-准备好了： 悬停.mv-面具，.mv 页准备.mv 集中 ~.mv 面具 {' +'边框颜色：' +convertToRGBAColor(opt_themeInfo.headerColorRgba) + ';' + '}';

結果 (中文) 3:

* * *
容器的砖元素。
×”型{元}
* /
VaR tilescontainer；


/ * * *显示
通知当页面被列入黑名单。
×”型{元}
* /
VaR的通知；


/××
*容器为主题的归属。
×”型{元}
* /
var属性；


/××
*“fakebox”输入字段，看起来像一个普通的搜索框。当它
*聚焦，任何文本用户类型直接进入地址栏。
×”型{元}
* /
VaR fakebox；


/×××
NTP元素的容器。
×”型{元}
* /
VaR ntpcontents；


/××
*提供的瓷砖阵列，有序的外观。
×”型{！阵列。<瓷砖> }
* /
VaR瓦= []；


/××
*最后被列入黑名单的瓷砖如果有，它的定义不应该被填充。
×”型{？瓦}
* /
VaR lastblacklistedtile = null；


/××
* IFRAME元素是目前键盘焦点，或为空。
×”型{？元}
* /
VaR focusediframe = null；


/××
*如果一个页面被列入黑名单，我们等待的
* onmostvisitedchange回调。看到onmostvisitedchange()如何
*使用。
×”型{布尔}
* /
VaR isblacklisting = false；


/××
*目前瓷砖显示的列数基于窗口的宽度，包括
*那些只含有填料。
×”型{数量}
* /
VaR numcolumnsshown = 0；


/××
*标记来指示访问最多的改变由用户操作。如果是真的，那么
* onmostvisitedchange()瓷砖依然可见，所以没有闪烁的发生。
×”型{布尔}
* /
VaR userinitiatedmostvisitedchange = false；


/××
*浏览器embeddedsearch.newtabpage对象。
×”型{对象}
* /
VaR ntpapihandle；


/××
*浏览器embeddedsearch.searchbox对象。
×”型{对象}
* /
VaR searchboxapihandle；


/×××的
NTP状态查询时进入地址栏。
×”型ntp_dispose_state } {
* /
VaR omniboxinputbehavior = ntp_dispose_state。不
；

/××
* NTP状态查询时，进入fakebox。
×”型ntp_dispose_state } {
* /
VaR fakeboxinputbehavior = ntp_dispose_state。hide_fakebox_and_logo；


/××”型{数量}“const * /
VaR max_num_tiles_to_show = 8；


/××”型{数量}“const * /
VaR min_num_columns = 2；


/××”型{数量}“const * /
VaR max_num_columns = 4；


/××”型{数量}“const * /
VaR num_rows = 2；


/××
*最小总填充给左和右的访问量最大的
×部分。用于确定多少瓷砖显示。
×”型{数量}
* @ const
* /
VaR min_total_horizontal_padding = 200；


/××
*文件名为访问最多的内嵌框架显示网页标题。
×”型{ } const字符串
*”
* /
VaR most_visited_title_iframe =”称号。HTML”；


/××
*一个最参观了内嵌框架显示缩略图图像文件名。
×”型{ } const字符串
*”
* /
VaR most_visited_thumbnail_iframe =“缩略图。HTML”；


/××
*在rrggbbaa格式的标题的颜色。
×”型{？字符串}
* /
VaR titlecolor = null；


/××
隐藏访问最多的瓷砖为这多少毫秒，而画。
×”型{数量}
* @ const
* /
VaR most_visited_paint_timeout_msec = 500；


/×××
瓦是一个渲染一个访问最多的网页或“填充”用来
*垫出段时没有足够的页的存在。
*
* @param { }元素元素元素渲染的瓷砖。
* @param {元= } opt_innerelem为内容的砖元素。
* @param {元= } opt_titleelem的渲染
标题元素。* @param {元= } opt_thumbnailelem元素渲染的缩略图。
* @param {数量= } opt_rid摆脱对相应的访问最多的网页。
*只能创建一个填充瓷砖时未指定。
* @构造函数
* /
功能瓦（元素，opt_innerelem，opt_titleelem，opt_thumbnailelem，opt_rid）{
/××”型{元}×/
this.elem =元素；

/××”型{元|未定义}×/
this.innerelem = opt_innerelem；

/××”型{元|未定义}×/
this.titleelem = opt_titleelem；

/××”型{元|未定义}×/
this.thumbnailelem = opt_thumbnailelem；

/××”型{数量}×/
|未定义this.rid = opt_rid

；}

/××
*启发式来确定一个主题应该被认为是黑暗的，所以
*各种UI元素的颜色可以调整。
* @param { } themebackgroundinfo |未定义信息主题的背景信息。
* @返回布尔} {无论主题是黑暗的。
*“私人
* /
功能getisthemedark（信息）{
如果（！信息）
返回false；
/启发式：浅色文本意味着黑暗的主题。
VaR RGBA =信息。textcolorrgba；
VaR亮度= 0.3×0.59×RGBA RGBA [ 0 ] [ 1 ] 0.11×RGBA [ 2 ]；
返回亮度> = 128；}



/××
*更新基于当前主题的NTP。
*“私人
* /
功能rendertheme() {
VaR fakeboxtext = $（IDS。fakebox_text）；
如果（fakeboxtext）{
fakeboxtext.innerhtml = ''；
如果（ntp_design.showfakeboxhint&&
configdata。translatedstrings。searchboxplaceholder）{
fakeboxtext.textcontent =
configdata translatedstrings。searchboxplaceholder；} }。



VaR信息= ntpapihandle.themebackgroundinfo；
VaR isthemedark = getisthemedark（信息）；
ntpcontents。列表。切换（classes.dark，isthemedark）；
如果（！信息）{
titlecolor = ntp_design。titlecolor；
返回；
}

如果（！info.usingdefaulttheme&&信息。textcolorrgba）{
titlecolor = converttorrggbbaacolor（信息。textcolorrgba）；} {
其他
titlecolor = isthemedark？
ntp_design.titlecoloragainstdark：ntp_design。titlecolor；
}

VAR背景= [ converttorgbacolor（信息。backgroundcolorrgba），
信息。源，
信息。imagetiling，
信息。imagehorizontalalignment，
信息。imageverticalalignment ]。加入（）。trim()；

document.body.style.background =背景；
文档。体。列表。切换（classes.alternate_logo，信息。alternatelogo）；
updatethemeattribution（信息。attributionurl）；
setcustomthemestyle（信息）；}



/××
*更新基于当前主题的NTP，然后rerenders所有的瓷砖。
*“私人
* /
功能onthemechange() {
rendertheme()；
tilescontainer.innerhtml = ''；
renderandshowtiles()；
}


/ * * *更新
NTP风格根据主题。
* @param object = { } opt_themeinfo关于主题的信息。如果是
*略风格将恢复为默认。
*“私人
* /
功能setcustomthemestyle（opt_themeinfo）{ var = $（
customstyleelement IDS。custom_theme_style）；var =
头文件。头；
如果（opt_themeinfo&&！opt_themeinfo。usingdefaulttheme）{
ntpcontents。列表。删除（类。default_theme）；
VaR themestyle =
”#归因{“
颜色：“converttorgbacolor（opt_themeinfo。textcolorlightrgba）”；“
“}”“{”
#MV味精
颜色：“converttorgbacolor（opt_themeinfo。textcolorrgba）”；“
“}”
”#MV通知链接跨度{“
颜色：“converttorgbacolor（opt_themeinfo。textcolorlightrgba）”；“
“}”“{”
#mv-notice-x
’WebKit过滤器：阴影（0 0 0
converttorgbacolor（opt_themeinfo textcolorrgba）。”）；}”“”

”。页的MV MV准备。面具{”
边境：1px solid”
converttorgbacolor（opt_themeinfo。sectionbordercolorrgba）”；“
“}”
”。页：MV准备翱翔。MV面膜，MV MV准备。页。重点~。MV面具{”
的边框颜色：“
converttorgbacolor（opt_themeinfo。headercolorrgba）”；“
“}”
；