Fix performance issues with NNTP....

chrome/browser/resources/new_new_tab.js

 
 // Helpers
 
 function $(id) {
   return document.getElementById(id);
 }
 
 // TODO(arv): Remove these when classList is available in HTML5.
 // https://bugs.webkit.org/show_bug.cgi?id=20709
 function hasClass(el, name) {
@@ skipping 47 matching lines @@
 
 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);
   }
 }
 
+var loading = true;
 var mostVisitedData = [];
 var gotMostVisited = false;
 var gotShownSections = false;
 
 function mostVisitedPages(data) {
   logEvent('received most visited pages');
 
   // We append the class name with the "filler" so that we can style fillers
   // differently.
   var maxItems = 8;
@@ skipping 16 matching lines @@
   data.length = Math.min(data.length, 5);
   processData('#download-items', data);
 }
 
 function recentlyClosedTabs(data) {
   logEvent('received recently closed tabs');
   data.length = Math.min(data.length, 5);
   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();
 }
 
 function saveShownSections() {
   chrome.send('setShownSections', [String(shownSections)]);
 }
 
 function tips(data) {
   logEvent('received tips data');
@@ skipping 203 matching lines @@
  * This matches the Section enum in ../dom_ui/shown_sections_handler.h
  * @enum {number}
  */
 var Section = {
   THUMB: 1,
   LIST: 2,
   RECENT: 4,
   TIPS: 8
 };
 
-var shownSections = Section.RECENT | Section.TIPS;
+var shownSections = Section.THUMB | Section.RECENT | Section.TIPS;
 
 function showSection(section) {
   if (!(section & shownSections)) {
     // THUMBS and LIST are mutually exclusive.
     if (section == Section.THUMB) {
       hideSection(Section.LIST);
     } else if (section == Section.LIST) {
       hideSection(Section.THUMB);
     }
 
@@ skipping 25 matching lines @@
     // we are hiding one of them so if the other one is visible it is now
     // {@code large}.
     if (shownSections & Section.RECENT) {
       recentChangedSize(large);
     } else if (shownSections & Section.TIPS) {
       tipsChangedSize(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');
   },
 
   getHref: function(el) {
     return el.href;
   },
 
   togglePinned: function(el) {
@@ skipping 190 matching lines @@
     return localStrings.getString('closedwindowsingle');
   return localStrings.formatString('closedwindowmultiple', numTabs);
 }
 
 /**
  * We need both most visited and the shown sections to be considered loaded.
  * @return {boolean}
  */
 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() {
       removeClass(document.body, 'loading');
     }, 10);
   }
 }
 
 // Theme related
 
@@ skipping 43 matching lines @@
 // We apply the size class here so that we don't trigger layout animations
 // onload.
 
 handleWindowResize(null, true);
 
 var localStrings = new LocalStrings();
 
 ///////////////////////////////////////////////////////////////////////////////
 // Things we know are not needed at startup go below here
 
+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 afterTransition(f) {
-  // The duration of all transitions are 500ms
-  window.setTimeout(f, 500);
-}
-
 function showNotification(text, actionText, f) {
   var notificationElement = $('notification');
   var actionLink = notificationElement.querySelector('.link');
   notificationElement.firstElementChild.textContent = text;
 
   actionLink.textContent = actionText;
   actionLink.onclick = function() {
     f();
     removeClass(notificationElement, 'show');
     // Since we have a :hover rule to not hide the notification banner when the
@@ skipping 69 matching lines @@
     if (this.isMenuShown()) {
       this.hideMenu();
     } else {
       this.showMenu();
     }
   },
 
   handleMouseOver: function(e) {
     var el = e.target;
     var index = Array.prototype.indexOf.call(this.menu.children, el);
-    console.log(el, index);
     this.setSelectedIndex(index);
   },
 
   handleMouseOut: function(e) {
     this.setSelectedIndex(-1);
   },
 
   handleMouseUp: function(e) {
     var item = this.getSelectedItem();
     if (item) {
@@ skipping 324 matching lines @@
     el.addEventListener('dragover', bind(this.handleDragOver, this));
     el.addEventListener('dragleave', bind(this.handleDragLeave, this));
     el.addEventListener('drop', bind(this.handleDrop, this));
     el.addEventListener('dragend', bind(this.handleDragEnd, this));
     el.addEventListener('drag', bind(this.handleDrag, this));
     el.addEventListener('mousedown', bind(this.handleMouseDown, this));
   }
 };
 
 dnd.init();