diff options
author | jcampan@chromium.org <jcampan@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2009-04-13 19:00:29 +0000 |
---|---|---|
committer | jcampan@chromium.org <jcampan@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2009-04-13 19:00:29 +0000 |
commit | 34cdd0557b61c9c98aa0510cadfcd814a8156b44 (patch) | |
tree | fc5ee6c4e81b184e5259a23ed1957528bf034615 /chrome/browser/resources | |
parent | 5c65e10ad600bf4786f9eb8f6f30872bc61231e3 (diff) | |
download | chromium_src-34cdd0557b61c9c98aa0510cadfcd814a8156b44.zip chromium_src-34cdd0557b61c9c98aa0510cadfcd814a8156b44.tar.gz chromium_src-34cdd0557b61c9c98aa0510cadfcd814a8156b44.tar.bz2 |
This CL adds some UI to remove most-visited thumbnails from the New Tab Page.
The URL of removed thumbnails is added to a blacklist, which is a user pref.
I had to modify the VisitSegmentDatabase::QuerySegmentUsage not to return a
fixed number of items, as now we may filter the ones we get back.
Note: this adds between 20 and 30ms to the first NTP load on my machine (a
3 to 5% increase).
BUG=685
TEST=Open the NTP. Click the 'Edit thumbnails' link. Remove some thumbnails.
Press Done. Edit again, use the "Restore removed" link.
Review URL: http://codereview.chromium.org/67037
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@13611 0039d316-1c4b-4281-b951-d872f2087c98
Diffstat (limited to 'chrome/browser/resources')
-rw-r--r-- | chrome/browser/resources/new_tab.html | 128 |
1 files changed, 116 insertions, 12 deletions
diff --git a/chrome/browser/resources/new_tab.html b/chrome/browser/resources/new_tab.html index e71dc51..56a0ff1 100644 --- a/chrome/browser/resources/new_tab.html +++ b/chrome/browser/resources/new_tab.html @@ -387,6 +387,27 @@ html[dir='rtl'] #searches input { 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 a.most-visited-item { + opacity: 0.5; + pointer-events: none; /* Disable clicks */ +} </style> </head> <body onload="logEvent('body onload fired');" @@ -406,7 +427,10 @@ document.addEventListener('DOMContentLoaded', handleDOMContentLoaded); <td valign="top"> <div id="mostvisitedsection" class="section"> <div id="mostvisited" style="position:relative;"> - <div class="section-title" jscontent="mostvisited"></div> + <div> + <span class="section-title non-edit-visible" jscontent="mostvisited"></span> + <span class="section-title edit-visible" jseval="this.innerHTML = $this.editmodeheading;"></span> + </div> <div id="mostvisitedintro" style="display:none;"> <div class="most-visited-text" style="position:absolute;" jseval="this.innerHTML = $this.mostvisitedintro;"></div> <table> @@ -445,6 +469,16 @@ document.addEventListener('DOMContentLoaded', handleDOMContentLoaded); </table> </div> <a href="#" + class="manage non-edit-visible" + onClick="enterEditMode(); return false"> + <span jscontent="editthumbnails"></span></a> + <button type="button" class="edit-visible" onClick="exitEditMode();" + jscontent="doneediting"></button> + <a href="#" + class="manage edit-visible" + onClick="restoreThumbnails(); return false"> + <span jscontent="restorethumbnails"></span></a> + <a href="#" jsvalues="href:showhistoryurl" class="manage"> <span jscontent="showhistory"></span> »</a> @@ -534,7 +568,8 @@ function makeMostVisitedDOM(page, number) { */ var root; if (page.url) { - root = DOM('a', {href:page.url, + root = DOM('a', {className:'most-visited-item', + href:page.url, title:page.title}); root.addEventListener("mousedown", function(event) { chrome.send("metrics", ["NTP_MostVisited" + number]) @@ -563,10 +598,10 @@ function makeMostVisitedDOM(page, number) { /* The following if statement is a temporary workaround for http://crbug.com/7252 and http://crbug.com/7697. It should be removed before closing these bugs. - */ + */ if (page.direction == 'rtl') { div_title.style.textOverflow = 'clip'; - } + } if (page.title) { div_title.appendChild(document.createTextNode(page.title)); } else { @@ -580,13 +615,28 @@ function makeMostVisitedDOM(page, number) { 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) { + chrome.send("blacklistURLFromMostVisited", [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); - document.getElementById("main").className = 'visible'; + 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 + document.getElementById("main").className = 'visible'; var table = document.getElementById("mostvisitedtable"); table.innerHTML = ''; @@ -608,10 +658,11 @@ function renderMostVisitedPages(pages) { rows[rowNum] = DOM('tr', {}); } - var dom = makeMostVisitedDOM(page, i); - var cell = DOM('td'); - cell.appendChild(dom); + 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); @@ -709,10 +760,10 @@ function renderRecentlyBookmarked(entries) { /* The following if statement is a temporary workaround for http://crbug.com/7252 and http://crbug.com/7697. It should be removed before closing these bugs. - */ + */ if (entry.direction == 'rtl') { link.style.textOverflow = 'clip'; - } + } link.appendChild(document.createTextNode(entry.title)); container.appendChild(link); } @@ -810,10 +861,10 @@ function createRecentBookmark(tagName, data) { /* The following if statement is a temporary workaround for http://crbug.com/7252 and http://crbug.com/7697. It should be removed before closing these bugs. - */ + */ if (data.direction == 'rtl') { link.style.textOverflow = 'clip'; - } + } link.appendChild(document.createTextNode(data.title)); return link; @@ -905,6 +956,34 @@ RecentlyClosedHoverCard.prototype.setHideTimeout_ = function() { 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'; +} + +function exitEditMode() { + document.getElementById('main').className = 'visible'; +} + +function restoreThumbnails() { + exitEditMode(); + chrome.send('clearMostVisitedURLsBlacklist'); +} + function viewLog() { var lines = []; var start = log[0][1]; @@ -932,5 +1011,30 @@ processData(); setTimeout(function(){document.getElementById('main').className = 'visible'}, 1000); </script> + +<img id="small-cross-image" style="display: none; vertical-align:middle;" alt="X" + src="../../app/theme/ntp_x_icon_small.png"/> </body> + +<style type="text/css"> +/* 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('../../app/theme/ntp_x_icon.png'); +} +.edit-mode div.edit-cross:hover { + background: url('../../app/theme/ntp_x_icon_hover.png'); +} +.edit-mode div.edit-cross:active { + background: url('../../app/theme/ntp_x_icon_active.png'); +} +</style> + </html> |