diff options
Diffstat (limited to 'chrome/browser/resources')
| -rw-r--r-- | chrome/browser/resources/new_tab.html | 1041 |
1 files changed, 0 insertions, 1041 deletions
diff --git a/chrome/browser/resources/new_tab.html b/chrome/browser/resources/new_tab.html deleted file mode 100644 index 80bbcd6..0000000 --- a/chrome/browser/resources/new_tab.html +++ /dev/null @@ -1,1041 +0,0 @@ -<!DOCTYPE HTML> -<html i18n-values="dir:textdirection;firstview:firstview;bookmarkbarattached:bookmarkbarattached;hasattribution:hasattribution;anim:anim"> -<!-- - This page is optimized for perceived performance. Our enemies are the time - taken for the backend to generate our data, and the time taken to parse - and render the starting HTML/CSS content of the page. This page is - designed to let Chrome do both of those things in parallel. - - 1. Defines temporary content callback functions - 2. Fires off requests for content (these can come back 20-150ms later) - 3. Defines basic functions (handlers) - 4. Renders a fast-parse hard-coded version of itself (this can take 20-50ms) - 5. Defines the full content-rendering functions - - If the requests for content come back before the content-rendering functions - are defined, the data is held until those functions are defined. ---> -<script src="local_strings.js"></script> -<script> -/* Logging info for benchmarking purposes. */ -var log = []; -function logEvent(name) { - log.push([name, Date.now()]); -} - -// Basic functions to send, receive, store and process the data from our -// backend. -var unprocessedData = { - mostVisitedPages : false, - searchURLs : false, - recentlyBookmarked : false, - recentlyClosedTabs : false -} - -var renderFunctionsDefined = false; - -var localStrings; - -// The list of URLs that have been blacklisted (so that thumbnails are not -// shown) in the last set of change. Used to revert changes when the Cancel -// button is pressed. -var blacklistedURLs = []; - -function $(o) {return document.getElementById(o);} - -/** - * If the functions that can render content are defined, render - * the content for any data we've received so far. - */ -function processData() { - if (renderFunctionsDefined) { - if (unprocessedData.mostVisitedPages) { - renderMostVisitedPages(unprocessedData.mostVisitedPages); - unprocessedData.mostVisitedPages = false; - } - if (unprocessedData.searchURLs) { - renderSearchURLs(unprocessedData.searchURLs); - unprocessedData.searchURLs = false; - } - if (unprocessedData.recentlyBookmarked) { - renderRecentlyBookmarked(unprocessedData.recentlyBookmarked); - unprocessedData.recentlyBookmarked = false; - } - if (unprocessedData.recentlyClosedTabs) { - renderRecentlyClosedTabs(unprocessedData.recentlyClosedTabs); - unprocessedData.recentlyClosedTabs = false; - } - } -} - -function mostVisitedPages(data) { - logEvent('received most visited pages'); - unprocessedData.mostVisitedPages = data; - processData(); -} - -function searchURLs(data) { - logEvent('received search URLs'); - unprocessedData.searchURLs = data; - processData(); -} - -function recentlyBookmarked(data) { - logEvent('received recently bookmarked data'); - unprocessedData.recentlyBookmarked = data; - processData(); -} - -function recentlyClosedTabs(data) { - logEvent('received recently closed tabs'); - unprocessedData.recentlyClosedTabs = data; - processData(); -} - -function resizeP13N(new_height) { - var childf = document.getElementById('p13n'); - if (new_height < 1) { - childf.style.display = "none"; - return; - } - childf.height = new_height; - childf.style.display = "block"; -} - -chrome.send('getMostVisited'); -chrome.send('getMostSearched'); -chrome.send('getRecentlyBookmarked'); -chrome.send('getRecentlyClosedTabs'); - -function handleWindowResize() { - if (!document.body || document.body.clientWidth < 10) { - // We're probably a background tab, so don't do anything. - return; - } - - if (document.body.className == 'small' && document.body.clientWidth >= 885) { - document.body.className = ''; - } else if (document.body.className == '' && document.body.clientWidth <= 865) { - document.body.className = 'small'; - } -} - -function handleDOMContentLoaded() { - logEvent('domcontentloaded fired'); -} - -logEvent('log start'); -</script> -<head> -<meta charset="utf-8"> -<title i18n-content="title"></title> -<style> -html { - height:100%; -} -body { - margin:0px; -} -html[firstview='true'] #main { - opacity:0.0; - -webkit-transition:all 0.4s; -} -html[firstview='true'] #main.visible { - opacity:1.0; -} -html[anim='false'] * { - -webkit-transition-property: none !important -} -#main { - margin-left:auto; - margin-right:auto; - margin-top:10px; -} -form { - padding: 0; - margin: 0; -} -.section { - padding:3px 0px 5px 0px; - margin-bottom:30px; -} -.section-title { - line-height:19pt; - font-size:110%; - font-weight:bold; - margin-bottom:4px; -} -#mostvisitedsection { - margin:0px 5px 0px 0px; -} -#mostvisited td { - padding:0px 10px 10px 0px; -} -html[dir='rtl'] #mostvisited td { - padding:0px 0px 10px 10px; -} -.most-visited-text { - width:548px; /* thumbnail + td * 3 - 2*padding - 2*margin */ - padding:20px; - margin:15px; - background-color:white; - -webkit-box-shadow: 5px 5px 10px #ccc; - -webkit-transition:all 0.12s; -} -.thumbnail-title { - background-image:url(chrome://favicon/); - display:block; - background-repeat:no-repeat; - background-size:16px; - background-position:0px 1px; - width:172px; /* thumbnail - padding */ - margin-top:6px; /* line up favicons with search favicons */ - padding:1px 0px 4px 22px; - overflow: hidden; - text-overflow: ellipsis; - text-decoration:none; - -webkit-transition:all 0.12s; -} -html[dir='rtl'] .thumbnail-title { - background-position:right; - padding-left:0px; - padding-right:22px; - text-align:right; -} -.thumbnail { - width:195px; - height:136px; - border:1px solid #ccc; - background-color:#eee; - -webkit-transition:all 0.12s; -} -a.thumbnail { - border:1px solid #abe; -} - -.small .thumbnail-title { - width:127px; -} -.small .thumbnail { - width:150px; - height:113px; -} -.small .most-visited-text { - width:430px; - padding:15px; - margin:12px; -} -.recent-bookmark { - display:block; - background-repeat:no-repeat; - background-size:16px; - background-position:0px 1px; - padding:1px 0px 0px 22px; - margin:3px 0px 3px 0px; - min-height:16pt; - line-height:16px; - overflow: hidden; - text-overflow: ellipsis; - text-decoration:underline; -} -.recent-window-container { - line-height:16px; - display:block; - margin:3px 0px 3px 0px; - padding-left:22px; -} -.recent-window-container img { - margin:0 3px -2px 3px; -} -.recent-window-hover-container { - position:absolute; - border:1px solid #999; - -webkit-box-shadow: 5px 5px 10px #ccc; - background-color:white; - width: 157px; - left: 20px; - white-space:nowrap; - opacity:.9; -} -.recent-window-hover-container .recent-bookmark { - text-decoration:none; - text-overflow:ellipsis; - overflow:hidden; - margin: 3px 0 0 5px; -} -.recently-closed-window-link { - 'text-decoration:none'; -} -.recently-closed-window-link:hover { - cursor:pointer; -} -.recently-close-window-text { - text-decoration:underline; -} - -html[dir='rtl'] .recent-bookmark { - background-position:right; - padding-left:0px; - padding-right:22px; -} -a { - color:#0000cc; - text-decoration:underline; - white-space: nowrap; -} -a.manage { - color:#77c; - margin-left: 5px; - margin-right: 5px; - line-height:19pt; - text-decoration:underline; -} -html[dir='rtl'] #managesearcheslink { - float: left; -} -.sidebar { - width: 207px; - padding:3px 10px 3px 9px; - -webkit-border-radius:5px 5px; - margin-bottom:10px; -} -html[dir='rtl'] #recentlyBookmarkedContainer { - text-align:right; -} -#recentlyClosedContainer { - position:relative; -} -html[dir='rtl'] #recentlyClosedContainer { - text-align:right; -} -#searches input { - border:1px solid #7f9db9; - background-repeat: no-repeat; - background-position:4px center; - padding-left: 23px; - min-height:24px; - width:182px; - margin-bottom:8px; - display:block; -} -html[dir='rtl'] #searches input { - background-position: right; - padding-left:0px; - padding-right: 23px; -} -#searches input:-webkit-input-placeholder-mode { - color: #aaa; -} -html[hasattribution='false'] .attribution { - display:none; -} -.footer { - border-top:1px solid #ccc; - padding-top:4px; - font-size:8pt; -} -.edit-visible { - display: none; -} -.edit-mode .edit-visible { - display: inline; -} -.non-edit-visible { - display: inline; -} -.edit-mode .non-edit-visible { - display: none; -} -.most-visited-container { - position: relative; - left: 0px; - top: 0px; -} -.edit-mode .disabled-on-edit { - opacity: 0.5; - pointer-events: none; /* Disable clicks */ -} -</style> -<link id="themecss" rel="stylesheet" href="chrome://theme/css/newtab.css" /> -</head> -<body onload="updateAttribution(); logEvent('body onload fired');" - i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> -<script> -// We apply the size class here so that we don't trigger layout animations onload. -handleWindowResize(); -window.addEventListener('resize', handleWindowResize, true); -document.addEventListener('DOMContentLoaded', handleDOMContentLoaded); -</script> - -<table id="main" cellpadding="0" cellspacing="0" border="0"> - <tr> - <td valign="top"> - <div id="mostvisitedsection" class="section"> - <div id="mostvisited" style="position:relative;"> - <div> - <span class="section-title non-edit-visible" i18n-content="mostvisited"></span> - <span class="section-title edit-visible" i18n-values=".innerHTML:editmodeheading"></span> - </div> - <div id="mostvisitedintro" style="display:none;"> - <div class="most-visited-text" style="position:absolute;" i18n-values=".innerHTML:mostvisitedintro"></div> - <table> - <tr> - <td><div class="thumbnail"> </div></td> - <td><div class="thumbnail"></div></td> - <td><div class="thumbnail"> </div></td> - </tr> - <tr> - <td><div class="thumbnail"> </div></td> - <td><div class="thumbnail"></div></td> - <td><div class="thumbnail"> </div></td> - </tr> - </table> - </div> - <table id="mostvisitedtable"> - <!-- This content forces the view to the correct width and provides a - preview of what's to load to reduce white-flash. Users who get - the mostvisitedintro will see a brief flash of this content. We - only use one row so that we may avoid flashing extra rows when - the user has only one row of items --> - <tr> - <td> - <div class="thumbnail-title"> </div> - <div class="thumbnail"></div> - </td> - <td> - <div class="thumbnail-title"> </div> - <div class="thumbnail"></div> - </td> - <td> - <div class="thumbnail-title"> </div> - <div class="thumbnail"></div> - </td> - </tr> - </table> - </div> - <a href="#" - class="manage non-edit-visible" - onclick="enterEditMode(); return false" - id="editthumbnails"> - <span i18n-content="editthumbnails"></span></a> - <button type="button" class="edit-visible" onclick="exitEditMode();" - i18n-content="doneediting"></button> - <button type="button" class="edit-visible" onclick="cancelEdits();" - i18n-content="cancelediting"></button> - <a href="#" - class="manage edit-visible" - onclick="restoreThumbnails(); return false"> - <span i18n-content="restorethumbnails"></span></a> - <a href="#" - i18n-values="href:showhistoryurl" - class="manage non-edit-visible"> - <span i18n-content="showhistory"></span> »</a> - </div> - </td> - <td valign="top" width="230"> - <div align="right"> - <img src="../../app/theme/%DISTRIBUTION%/product_logo.png" - height="52" style="padding-bottom:8px;" /> - </div> - <!-- This iframe gets shown in resizeP13N --> - <iframe id="p13n" frameborder="0" width="100%" scrolling="no" height="0" - style="display:none" - i18n-values="src:p13nsrc"></iframe> - - <div id="searches" class="sidebar themed"> - <div class="section-title" i18n-content="searches"></div> - <form onsubmit="chrome.send('searchHistoryPage', [this.search.value]); return false;"> - <input type="text" class="hint" - name="search" - style="background-image:url(chrome://favicon/);" - i18n-values="placeholder:searchhistory"> - </form> - <div id='searches-entries'></div> - </div> - - <div id="recentlyBookmarked" class="sidebar themed" style="display:none"> - <span class="section-title" i18n-content="bookmarks"></span> - <div id="recentlyBookmarkedContainer"></div> - </div> - - <div id="recentlyClosedTabs" class="sidebar" style="display:none"> - <div class="section-title" i18n-content="recentlyclosed"></div> - <div id="recentlyClosedContainer"></div> - </div> - - <div id="attribution" class="sidebar attribution"> - <span i18n-content="attributionintro"></span><br /> - <img id="attribution-img" /> - </div> - </td> - </tr> -</table> - -<script> -logEvent('start of second script block'); - -/* Return a DOM element with tag name |elem| and attributes |attrs|. */ -function DOM(elem, attrs) { - var elem = document.createElement(elem); - for (var attr in attrs) { - elem[attr] = attrs[attr]; - } - return elem; -} - -/** - * Partially applies this function to a particular 'this object' and zero or - * more arguments. The result is a new function with some arguments of the first - * function pre-filled and the value of |this| 'pre-specified'.<br><br> - * - * Remaining arguments specified at call-time are appended to the pre- - * specified ones.<br><br> - * - * @param {Function} fn A function to partially apply. - * @param {Object} selfObj Specifies the object which |this| should point to - * when the function is run. - * @param {Object} var_args Additional arguments that are partially - * applied to the function. - * - * @return {!Function} A partially-applied form of the function bind() was - * invoked as a method of. - */ -function bind(fn, selfObj, var_args) { - var boundArgs = Array.prototype.slice.call(arguments, 2); - return function() { - var args = Array.prototype.slice.call(arguments); - args.unshift.apply(args, boundArgs); - return fn.apply(selfObj, args); - } -} - -/* Return the DOM element for a "most visited" entry. - |page| should be an object with "title", "url", and "direction" fields. */ -function makeMostVisitedDOM(page, number) { - /* The HTML we want looks like this: - <a class="disabled-on-edit" href="URL" title="gmail.com"> - <div class="thumbnail-title disabled-on-edit" - style="background-image:url(faviconurl);direction:ltr">gmail.com</div> - <img class="thumbnail disabled-on-edit" - style="background-image:url(thumbnailurl);" /> - </a> - */ - var root; - if (page.url) { - root = DOM('a', {className:'disabled-on-edit', - href:page.url, - title:page.title}); - root.addEventListener("mousedown", function(event) { - chrome.send("metrics", ["NTP_MostVisited" + number]) - }, false); - } else { - // Something went wrong; don't make it clickable. - root = DOM('span'); - } - - /* Create the thumbnail */ - var img_thumbnail = DOM('img', {className:'thumbnail disabled-on-edit'}); - img_thumbnail.setAttribute('onload', "logEvent('image loaded');"); - img_thumbnail.src = 'chrome://thumb/' + page.url; - - /* Create the title */ - var div_title = DOM('div', {className:'thumbnail-title disabled-on-edit'}); - div_title.style.backgroundImage = - 'url("chrome://favicon/' + page.url + '")'; - /* Set the title's directionality independently of the overall page - directionality. We need to do this since a purely LTR title should always - have it's direction set as ltr. We only set the title direction to rtl if - it contains a strong RTL character. Please refer to http://crbug.com/5926 - for more information. - */ - div_title.style.direction = page.direction; - if (page.title) { - div_title.appendChild(document.createTextNode(page.title)); - } else { - // Make the empty title at least push down the icon. - div_title.innerHTML = ' '; - } - - root.appendChild(div_title); - root.appendChild(img_thumbnail); - - return root; -} - -/* Return the DOM element for the cross that should be displayed in edit-mode - over a "most visited" entry. */ -function makeCrossImageDOM(url) { - var cross = DOM('div', {className:'edit-cross'}); - cross.addEventListener("mousedown", - function(event) { - if (event.which == 1) // Left click only. - blacklistURL(url); }, - false); - return cross; -} - -/* This function is called by the browser with the most visited pages list. - |pages| is a list of page objects, which have url, title, and direction - attributes. */ -function renderMostVisitedPages(pages) { - logEvent('renderMostVisitedPages called: ' + pages.length); - - var table = document.getElementById("main"); - // If we were in edit-mode, stay in that mode as this means this is a - // refresh triggered by thumbnails editing. - if (table.className.indexOf('edit-mode') != -1) - table.className = 'visible edit-mode'; - else - table.className = 'visible'; - var table = document.getElementById("mostvisitedtable"); - table.innerHTML = ''; - - // Show the most visited helptext if most visited is still useless. This is - // a crappy heuristic. - if (pages.length < 3) { - $('mostvisitedintro').style.display = 'block'; - $('editthumbnails').style.display = 'none'; - return; - } - - $('mostvisitedintro').style.display = 'none'; - - // Create the items and add them to rows. - var rows = []; - var rowNum = -1; - for (var i = 0, page; page = pages[i]; ++i) { - if (i % 3 == 0) { - rowNum += 1; - rows[rowNum] = DOM('tr', {}); - } - - var cell = DOM('td'); - var container = DOM('div', { className: "most-visited-container"}); - container.appendChild(makeCrossImageDOM(page.url)); - container.appendChild(makeMostVisitedDOM(page, i)); - cell.appendChild(container); - - rows[rowNum].appendChild(cell); - - logEvent('mostVisitedPage : ' + i); - } - - // Add the rows to the table. - for (var i = 0, row; row = rows[i]; i++) { - table.appendChild(row); - } - - logEvent('renderMostVisitedPages done'); -} - -function makeSearchURL(url) { - /* The HTML we want looks like this: - <form> - <input type="text" class="hint" - style="background-image:url(chrome://favicon/"+url+");" - placeholder="Search Wikipedia"> - </form> - */ - var input = DOM('input', {type:'text', - className: 'hint'}); - // There is no DOM property for placeholder. - input.setAttribute('placeholder', url.short_name); - input.keyword = url.keyword; - - if (url.favIconURL) { - input.style.backgroundImage = - 'url("chrome://favicon/iconurl/' + url.favIconURL + '")'; - } else { - input.style.backgroundImage = - 'url("chrome://favicon/http://' + url.short_name + '")'; - } - - var form = DOM('form'); - form.onsubmit = function() { - chrome.send('doSearch', [input.keyword, input.value]); - return false; - }; - form.appendChild(input); - - return form; -} - -/* This function is called by the browser when the list of search URLs is - available. |urls| is a list of objects with |name| attributes. */ -function renderSearchURLs(urls) { - logEvent('renderSearchURLs called: ' + urls.length); - var container = document.getElementById('searches-entries'); - container.innerHTML = ''; // Clear out any previous contents. - if (urls.length > 0) { - document.getElementById('searches').style.display = 'block'; - for (var i = 0; i < urls.length; ++i) { - container.appendChild(makeSearchURL(urls[i])); - } - } - - logEvent('renderSearchURLs done'); -} - -/* This function is called by the browser when the list of recently bookmarked - URLs is available. |entries| is a list of objects with title, url, and - direction attributes. */ -function renderRecentlyBookmarked(entries) { - logEvent('renderRecentlyBookmarked called: ' + entries.length); - var section = document.getElementById('recentlyBookmarked'); - var container = document.getElementById('recentlyBookmarkedContainer'); - - /* recentlyBookmarked is called any time the bookmarks change. Remove existing - entries before adding new ones. */ - section.style.display = 'none'; - container.innerHTML = ''; - - if (entries.length > 0) { - section.style.display = 'block'; - for (var i = 0, entry = entries[0]; entry = entries[i]; ++i) { - var link = DOM('a', {href: entry.url, - className:'recent-bookmark', - title:entry.title}); - link.addEventListener("mousedown", function(event) { - chrome.send("metrics", ["NTP_Bookmark" + i]) - }, false); - link.style.backgroundImage = - 'url("chrome://favicon/' + entry.url + '")'; - /* Set the bookmark title's directionality independently of the page, see - comment about setting div_title.style.direction above for details. - */ - link.style.direction = entry.direction; - link.appendChild(document.createTextNode(entry.title)); - container.appendChild(link); - } - } - - logEvent('renderRecentlyBookmarked done'); -} - -/* This function adds incoming information about tabs to the new tab UI. */ -function renderRecentlyClosedTabs(entries) { - logEvent('renderRecentlyClosedTabs begin'); - var section = document.getElementById('recentlyClosedTabs'); - var container = document.getElementById('recentlyClosedContainer'); - - /* recentlyClosedTabs is called on every internal event which - affects tab history to make sure things are up to - date. Therefore, reset the recentlyClosedTabs state on every - call. */ - section.style.display = 'none'; - container.innerHTML = ''; - - if (entries.length > 0) { - section.style.display = 'block'; - - for (var i = 0; entry = entries[i]; ++i) { - var link; - - if (entry.type == "tab") { - // Closed tab. - link = createRecentBookmark('a', entry); - container.appendChild(link); - } else { - // Closed window. - var linkSpanContainer = DOM('div', { className: 'recent-window-container'}); - - var linkSpan = DOM('span'); - linkSpan.appendChild(document.createTextNode(" ")); - for (var windowIndex = 0; windowIndex < entry.tabs.length; windowIndex++) { - var tab = entry.tabs[windowIndex]; - var tabImg = DOM('img', { - src:'url("chrome://favicon/' + tab.url + '")', - width:16, - height:16}); - tabImg.onmousedown = function() { return false; } - linkSpan.appendChild(tabImg); - } - - link = DOM('span', { className: 'recently-closed-window-link' } ); - windowSpan = DOM('span', {className: 'recently-close-window-text'}); - windowSpan.appendChild(document.createTextNode( - recentlyClosedWindowText(entry.tabs.length))); - link.appendChild(windowSpan); - link.appendChild(linkSpan); - linkSpanContainer.appendChild(link); - container.appendChild(linkSpanContainer); - - // The card takes care of appending itself to the DOM, so no need to - // keep a reference to it. - new RecentlyClosedHoverCard(linkSpanContainer, entry); - } - - link.onclick = function(sessionId) { - return function() { - chrome.send("metrics", ["NTP_TabRestored" + i]); - /* This is a hack because chrome.send is hardcoded to only - accept arrays of strings. */ - chrome.send('reopenTab', [sessionId.toString()]); - return false; - } - }(entry.sessionId); - } - } - - logEvent('renderRecentlyClosedTabs done'); -} - -/** - * Returns the text used for a recently closed window. - * - * @param numTabs number of tabs in the window - * - * @return the text to use - */ -function recentlyClosedWindowText(numTabs) { - if (numTabs == 1) - return localStrings.getString('closedwindowsingle'); - return localStrings.formatString('closedwindowmultiple', numTabs); -} - -/** - * Creates an item to go in the recent bookmarks or recently closed lists. - * - * @param {String} tagName Tagname for the DOM element to create. - * @param {Object} data Object with title, url, and direction to popuplate the element. - * - * @return {Node} The element containing the bookmark. - */ -function createRecentBookmark(tagName, data) { - var link = DOM(tagName, {className:'recent-bookmark', title:data.title}); - if (tagName == 'a') - link.href = data.url; - link.style.backgroundImage = 'url("chrome://favicon/' + data.url + '")'; - /* Set the title's directionality independently of the page, see comment - about setting div_title.style.direction above for details. - */ - link.style.direction = data.direction; - link.appendChild(document.createTextNode(data.title)); - return link; -} - -/** - * A hover card for windows in the recently closed list to show more details. - * - * @param {Node} target The element the hover card is for. - * @param {Object} data Object containing all the data for the card. - */ -function RecentlyClosedHoverCard(target, data) { - this.target_ = target; - this.data_ = data; - this.target_.onmouseover = bind(this.setShowTimeout_, this); - this.target_.onmouseout = bind(this.setHideTimeout_, this); -} - -/** Timeout set when closing the card. */ -RecentlyClosedHoverCard.closeTimeout_; - -/** Timeout set when opening the card. */ -RecentlyClosedHoverCard.openTimeout_; - -/** - * Clears the timer for hiding the card. - */ -RecentlyClosedHoverCard.clearHideTimeout_ = function() { - clearTimeout(RecentlyClosedHoverCard.closeTimeout_); -}; - -/** - * Clears the timer for opening the card. - */ -RecentlyClosedHoverCard.clearOpenTimeout_ = function() { - clearTimeout(RecentlyClosedHoverCard.openTimeout_); -}; - -/** - * Creates and shows the card. - */ -RecentlyClosedHoverCard.prototype.show_ = function() { - if (!this.container_) { - this.container_ = DOM('div', {className: 'recent-window-hover-container'}); - for (var i = 0; i < this.data_.tabs.length; i++) { - var tab = this.data_.tabs[i]; - var item = createRecentBookmark('span', tab); - this.container_.appendChild(item); - } - this.target_.parentNode.insertBefore(this.container_, - this.target_.nextSibling); - this.container_.onmouseover = RecentlyClosedHoverCard.clearHideTimeout_; - this.container_.onmouseout = bind(this.setHideTimeout_, this); - } - this.container_.style.display = ''; -}; - -/** - * Hides the card. - */ -RecentlyClosedHoverCard.prototype.hide_ = function() { - this.container_.style.display = 'none'; -}; - -/** - * Clears any open timers and sets the open timer. - * If the card is already showing then we only need to clear - * the hide timer. - */ -RecentlyClosedHoverCard.prototype.setShowTimeout_ = function() { - if (this.container && this.container_.style.display != 'none') { - // If we're already showing the hovercard, make sure we don't hide it again - // onmouseover. - RecentlyClosedHoverCard.clearHideTimeout_(); - return; - } - - RecentlyClosedHoverCard.clearOpenTimeout_(); - RecentlyClosedHoverCard.openTimeout_ = - setTimeout(bind(this.show_, this), 200); -}; - -/** - * Clears the open timer and sets the close one. - */ -RecentlyClosedHoverCard.prototype.setHideTimeout_ = function() { - RecentlyClosedHoverCard.clearOpenTimeout_(); - RecentlyClosedHoverCard.closeTimeout_ = - setTimeout(bind(this.hide_, this), 200); -}; - -/** - * Switches to thumbnails editing mode. - */ -function enterEditMode() { - // If the cross-image in the heading has not been added yet, do it. - // Note that we have to insert the image node explicitly because the - // heading is localized and therefore set at run-time, and we need - // the image to be static so that it can be inlined at build-time. - var crossImageDiv = document.getElementById('cross-image-container'); - if (crossImageDiv && !crossImageDiv.hasChildNodes()) { - var image = document.getElementById('small-cross-image'); - image.parentNode.removeChild(image); - crossImageDiv.appendChild(image); - image.style.display = 'inline'; - crossImageDiv.style.display = 'inline'; - } - document.getElementById('main').className = 'visible edit-mode'; - window.onunload = cancelEdits; -} - -function exitEditMode() { - document.getElementById('main').className = 'visible'; - blacklistedURLs = []; - window.onunload = null; -} - -function cancelEdits() { - if (blacklistedURLs.length > 0) { - chrome.send('removeURLsFromMostVisitedBlacklist', blacklistedURLs); - // NOTE(arv): According to evanm the order of messages should be the order - // they are called in. However, he wasn't sure and glen wasn't sure either. - // We should keep our eyes open for weird issues and if the order is not - // guaranteed we can call 'getMostVisited' in a timeout. - chrome.send('getMostVisited'); - } - exitEditMode(); -} - -function blacklistURL(url) { - blacklistedURLs.push(url); - chrome.send('blacklistURLFromMostVisited', [url]); - // NOTE(arv): See note in cancelEdits. - chrome.send('getMostVisited'); -} - -function restoreThumbnails() { - exitEditMode(); - chrome.send('clearMostVisitedURLsBlacklist'); - // NOTE(arv): See note in cancelEdits. - chrome.send('getMostVisited'); -} - -function themeChanged() { - $('themecss').href = 'chrome://theme/css/newtab.css?' + Date.now(); - updateAttribution(); -} - -function updateAttribution() { - $('attribution-img').src = 'chrome://theme/theme_ntp_attribution?' + - Date.now(); -} - -function bookmarkBarAttached() { - document.documentElement.setAttribute("bookmarkbarattached", "true"); -} - -function bookmarkBarDetached() { - document.documentElement.setAttribute("bookmarkbarattached", "false"); -} - -function viewLog() { - var lines = []; - var start = log[0][1]; - - for (var i = 0; i < log.length; i++) { - lines.push((log[i][1] - start) + ': ' + log[i][0]); - } - - var lognode = document.createElement('pre'); - lognode.appendChild(document.createTextNode(lines.join("\n"))); - document.body.appendChild(lognode); -} - -logEvent('end of second script block'); - -localStrings = new LocalStrings(); - -// We've got all the JS we need, render any unprocessed data. -renderFunctionsDefined = true; -processData(); - -// In case renderMostVisitedItems doesn't come back quickly enough, begin -// the first-run fade-in. If it has started or if this is not a first -// run new tab, this will be a no-op. -setTimeout(function(){document.getElementById('main').className = 'visible'}, - 1000); -</script> - -<img id="small-cross-image" style="display: none; vertical-align:middle;" alt="X" - src="chrome://theme/newtab_remove_icon"/> -</body> - -<style> -/* This CSS code is located at the end of file so it does not slow-down the page - loading, as it contains inlined images. -*/ -.edit-mode div.edit-cross { - position: absolute; - z-index: 10; - width: 81px; - height: 81px; - left: 60px; - top: 47px; - background: url(chrome://theme/newtab_remove_thumbnail); -} -.edit-mode div.edit-cross:hover { - background: url(chrome://theme/newtab_remove_thumbnail_hover); -} -.edit-mode div.edit-cross:active { - background: url(chrome://theme/newtab_remove_thumbnail_active); -} -.recent-window-container { - background: url(chrome://theme/newtab_closed_window); - background-repeat: no-repeat; -} -html[dir='rtl'] .recent-window-container { - background-position: right; - padding-right: 22px; -} -/* override style set in theme.css which is designed for the NNTP */ -#main { - background-image: none; -} -.section { - border: 0; -} -</style> - -</html> |