Commit d23fc942 authored by arv@google.com's avatar arv@google.com

Fix performance issues with NNTP.

My tests show it as not as fast as the old NTP but it is a lot better
than before these changes:

Old NTP:
         208
         223
         211
         205
         211
Average: 211.6

NNTP before this change:
         732
         718
         718
         713
Average: 720.25

NNTP with this change:
         255
         248
         257
         254
         257
Average: 254.2

There is still room for improvements but this brings the NNTP perf
closer to being acceptable.

BUG=13362

TEST=Perf test at http://build.chromium.org/buildbot/perf/xp-release-dual-core/new-tab-ui-cold/report.html?history=200


Review URL: http://codereview.chromium.org/150194

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@19797 0039d316-1c4b-4281-b951-d872f2087c98
parent 1d0f8ff0
......@@ -551,6 +551,12 @@ html[dir='rtl'] #view-toolbar {
#lower-sections .section {
-webkit-transition: width .5s, opacity .5s, left .5s;
-webkit-box-sizing: border-box;
width: 460px; /* Set default size so we don't have to do a js layout at
load */
}
.small #lower-sections .section {
width: 336px; /* Same here, see above */
}
#lower-sections .spacer {
......@@ -559,10 +565,6 @@ html[dir='rtl'] #view-toolbar {
display: inline-block;
}
.loading * {
-webkit-transition: none;
}
#thumb-checkbox {
background-image: url(chrome://theme/newtab_thumb_off);
}
......
......@@ -55,20 +55,24 @@ logEvent('log start');
<div id="main">
<div id="view-toolbar"><input type=checkbox id="thumb-checkbox"
><input type=checkbox id="list-checkbox"
<div id="view-toolbar"
><input type=checkbox id="thumb-checkbox" checked
jsvalues="title:hidethumbnails"
><input type=checkbox id="list-checkbox" jsvalues="title:showlist"
><input type="button" id="option-button"></div>
<div id="option-menu" class="window-menu">
<div section="THUMB" show="true" jscontent="showthumbnails"></div>
<div section="THUMB" show="true" jscontent="showthumbnails"
style="display:none"></div>
<div section="THUMB" show="false" jscontent="hidethumbnails"></div>
<div section="LIST" show="true" jscontent="showlist"></div>
<div section="LIST" show="false" jscontent="hidelist"></div>
<div section="RECENT" show="true" jscontent="showrecent"></div>
<div section="LIST" show="false" jscontent="hidelist"
style="display:none"></div>
<div section="RECENT" show="true" jscontent="showrecent"
style="display:none"></div>
<div section="RECENT" show="false" jscontent="hiderecent"></div>
<div section="TIPS" show="true"
jscontent="showtips"></div>
jscontent="showtips" style="display:none"></div>
<div section="TIPS" show="false"
jscontent="hidetips"></div>
</div>
......@@ -78,7 +82,7 @@ logEvent('log start');
<span><span class="link" tabindex="0"></span></span>
</div>
<div id="most-visited" jsskip="!processing">
<div id="most-visited" jsskip="true">
<a class="thumbnail-container" style="display:none" id="thumbnail-template">
<div class="edit-mode-border">
<div class="edit-bar">
......
......@@ -65,6 +65,7 @@ function bind(fn, selfObj, var_args) {
}
}
var loading = true;
var mostVisitedData = [];
var gotMostVisited = false;
var gotShownSections = false;
......@@ -101,9 +102,17 @@ function recentlyClosedTabs(data) {
processData('#tab-items', data);
}
function onShownSections(m) {
function onShownSections(mask) {
logEvent('received shown sections');
setShownSections(m);
if (mask != shownSections) {
shownSections = mask;
// No need to relayout these unless changed.
mostVisited.updateDisplayMode();
layoutMostVisited();
layoutLowerSections();
updateOptionMenu();
}
gotShownSections = true;
onDataLoaded();
}
......@@ -327,7 +336,7 @@ var Section = {
TIPS: 8
};
var shownSections = Section.RECENT | Section.TIPS;
var shownSections = Section.THUMB | Section.RECENT | Section.TIPS;
function showSection(section) {
if (!(section & shownSections)) {
......@@ -373,19 +382,6 @@ function notifyLowerSectionForChange(section, large) {
}
}
/**
* This is called when we get the shown sections pref from the backend.
*/
function setShownSections(mask) {
if (mask != shownSections) {
shownSections = mask;
mostVisited.updateDisplayMode();
layoutMostVisited();
layoutLowerSections();
updateOptionMenu();
}
}
var mostVisited = {
getItem: function(el) {
return findAncestorByClass(el, 'thumbnail-container');
......@@ -596,6 +592,7 @@ function formatTabsText(numTabs) {
*/
function onDataLoaded() {
if (gotMostVisited && gotShownSections) {
loading = false;
// Remove class name in a timeout so that changes done in this JS thread are
// not animated.
window.setTimeout(function() {
......@@ -659,13 +656,18 @@ var localStrings = new LocalStrings();
///////////////////////////////////////////////////////////////////////////////
// Things we know are not needed at startup go below here
// Notification
function afterTransition(f) {
// The duration of all transitions are 500ms
window.setTimeout(f, 500);
if (loading) {
// Make sure we do not use a timer during load since it slows down the UI.
f();
} else {
// The duration of all transitions are 500ms
window.setTimeout(f, 500);
}
}
// Notification
function showNotification(text, actionText, f) {
var notificationElement = $('notification');
var actionLink = notificationElement.querySelector('.link');
......@@ -755,7 +757,6 @@ OptionMenu.prototype = {
handleMouseOver: function(e) {
var el = e.target;
var index = Array.prototype.indexOf.call(this.menu.children, el);
console.log(el, index);
this.setSelectedIndex(index);
},
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment