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

chrome/browser/resources/new_new_tab.css

@@ -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);
 }

chrome/browser/resources/new_new_tab.html

@@ -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">

chrome/browser/resources/new_new_tab.js

@@ -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) {
+  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);
   },