Another batrch of performance improvements for 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 66 matching lines @@
   // differently.
   var maxItems = 8;
   data.length = Math.min(maxItems, data.length);
   var len = data.length;
   for (var i = len; i < maxItems; i++) {
     data[i] = {filler: true};
   }
 
   mostVisitedData = data;
   renderMostVisited(data);
-  layoutMostVisited();
 
   gotMostVisited = true;
   onDataLoaded();
 }
 
 function downloadsList(data) {
   logEvent('received downloads');
   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(mask) {
   logEvent('received shown sections');
   if (mask != shownSections) {
+
+    // Only invalidate most visited if needed.
+    if (mask & Section.THUMB != shownSections & Section.THUMB ||
+        mask & Section.LIST != shownSections & Section.LIST) {
+      mostVisited.invalidate();
+    }
+
     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');
   data.length = Math.min(data.length, 5);
   processData('#tip-items', data);
 }
 
-function layoutMostVisited() {
-  var d0 = Date.now();
-  var mostVisitedElement = $('most-visited');
-  var thumbnails = mostVisitedElement.querySelectorAll('.thumbnail-container');
-
-  if (thumbnails.length < 8) {
-    return;
-  }
-
-  var small = useSmallGrid();
-
-  var cols = 4;
-  var rows = 2;
-  var marginWidth = 10;
-  var marginHeight = 7;
-  var borderWidth = 4;
-  var thumbWidth = small ? 150 : 212;
-  var thumbHeight = small ? 93 : 132;
-  var w = thumbWidth + 2 * borderWidth + 2 * marginWidth;
-  var h = thumbHeight + 40 + 2 * marginHeight;
-  var sumWidth = cols * w  - 2 * marginWidth;
-  var sumHeight = rows * h;
-  var opacity = 1;
-
-  if (shownSections & Section.LIST) {
-    w = (sumWidth + 2 * marginWidth) / 2;
-    h = 45;
-    rows = 4;
-    cols = 2;
-    sumHeight = rows * h;
-    addClass(mostVisitedElement, 'list');
-  } else if (shownSections & Section.THUMB) {
-    removeClass(mostVisitedElement, 'list');
-    } else {
-    sumHeight = 0;
-    opacity = 0;
-  }
-
-  mostVisitedElement.style.height = sumHeight + 'px';
-  mostVisitedElement.style.opacity = opacity;
-  // We set overflow to hidden so that the most visited element does not
-  // "leak" when we hide and show it.
-  mostVisitedElement.style.overflow = 'hidden';
-
-  var rtl = document.documentElement.dir == 'rtl';
-
-  if (shownSections & Section.THUMB || shownSections & Section.LIST) {
-    for (var i = 0; i < thumbnails.length; i++) {
-      var t = thumbnails[i];
-
-      var row, col;
-      if (shownSections & Section.THUMB) {
-        row = Math.floor(i / cols);
-        col = i % cols;
-      } else {
-        col = Math.floor(i / rows);
-        row = i % rows;
-      }
-
-      if (shownSections & Section.THUMB) {
-        t.style.left = (rtl ?
-            sumWidth - col * w - thumbWidth - 2 * borderWidth :
-            col * w) + 'px';
-      } else {
-        t.style.left = (rtl ?
-            sumWidth - col * w - w + 2 * marginWidth :
-            col * w) + 'px';
-      }
-      t.style.top = row * h + 'px';
-
-      if (shownSections & Section.LIST) {
-        t.style.width = w - 2 * marginWidth + 'px';
-      } else {
-        t.style.width = '';
-      }
-    }
-  }
-
-  afterTransition(function() {
-    // Only set overflow to visible if the element is shown.
-    if (opacity) {
-      mostVisitedElement.style.overflow = '';
-    }
-  });
-
-  logEvent('layoutMostVisited: ' + (Date.now() - d0));
-}
-
 // This global variable is used to skip parts of the DOM tree for the global
 // jst processing done by the i18n.
 var processing = false;
 
 function processData(selector, data) {
   var output = document.querySelector(selector);
 
   // Wait until ready
   if (typeof JsEvalContext !== 'function' || !output) {
     logEvent('JsEvalContext is not yet available, ' + selector);
     document.addEventListener('DOMContentLoaded', function() {
       processData(selector, data);
     });
   } else {
     var d0 = Date.now();
     var input = new JsEvalContext(data);
     processing = true;
     jstProcess(input, output);
     processing = false;
     logEvent('processData: ' + selector + ', ' + (Date.now() - d0));
   }
 }
 
-var thumbnailTemplate;
-
 function getThumbnailClassName(data) {
   return 'thumbnail-container' +
       (data.pinned ? ' pinned' : '') +
       (data.filler ? ' filler' : '');
 }
 
 function renderMostVisited(data) {
   var parent = $('most-visited');
-  if (!thumbnailTemplate) {
-    thumbnailTemplate = $('thumbnail-template');
-    thumbnailTemplate.parentNode.removeChild(thumbnailTemplate);
-  }
-
   var children = parent.children;
   for (var i = 0; i < data.length; i++) {
     var d = data[i];
-    var reuse = !!children[i];
-    var t = children[i] || thumbnailTemplate.cloneNode(true);
-    t.style.display = '';
-    t.className = getThumbnailClassName(d);
+    var t = children[i];
+
+    // If we have a filler continue
+    var oldClassName = t.className;
+    var newClassName = getThumbnailClassName(d);
+    if (oldClassName != newClassName) {
+      t.className = newClassName;
+    }
+
+    // No need to continue if this is a filler.
+    if (newClassName == 'thumbnail-container filler') {
+      continue;
+    }
+
     t.title = d.title;
     t.href = d.url;
     t.querySelector('.pin').title = localStrings.getString(d.pinned ?
         'unpinthumbnailtooltip' : 'pinthumbnailtooltip');
     t.querySelector('.remove').title =
         localStrings.getString('removethumbnailtooltip');
 
     // There was some concern that a malformed malicious URL could cause an XSS
     // attack but setting style.backgroundImage = 'url(javascript:...)' does
     // not execute the JavaScript in WebKit.
     t.querySelector('.thumbnail-wrapper').style.backgroundImage =
         'url(chrome://thumb/' + d.url + ')';
     var titleDiv = t.querySelector('.title > div');
     titleDiv.textContent = d.title;
     titleDiv.style.backgroundImage = 'url(chrome://favicon/' + d.url + ')';
     titleDiv.dir = d.direction;
-    if (!reuse) {
-      parent.appendChild(t);
-    }
   }
 }
 
 /**
  * Calls chrome.send with a callback and restores the original afterwards.
  */
 function chromeSend(name, params, callbackName, callback) {
   var old = global[callbackName];
   global[callbackName] = function() {
     // restore
@@ skipping 12 matching lines @@
 function handleWindowResize(e, opt_noUpdate) {
   var body = document.body;
   if (!body || body.clientWidth < 10) {
     // We're probably a background tab, so don't do anything.
     return;
   }
 
   var hasSmallClass = hasClass(body, 'small');
   if (hasSmallClass && !useSmallGrid()) {
     removeClass(body, 'small');
+    mostVisited.invalidate();
     if (!opt_noUpdate) {
-      layoutMostVisited();
+      mostVisited.layout();
       layoutLowerSections();
     }
   } else if (!hasSmallClass && useSmallGrid()) {
     addClass(body, 'small');
+    mostVisited.invalidate();
     if (!opt_noUpdate) {
-      layoutMostVisited();
+      mostVisited.layout();
       layoutLowerSections();
     }
   }
 }
 
 /**
  * Bitmask for the different UI sections.
  * 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.THUMB | Section.RECENT | Section.TIPS;
 
 function showSection(section) {
   if (!(section & shownSections)) {
+    shownSections |= section;
+
     // THUMBS and LIST are mutually exclusive.
     if (section == Section.THUMB) {
-      hideSection(Section.LIST);
+      // hide LIST
+      shownSections &= ~Section.LIST;
+      mostVisited.invalidate();
     } else if (section == Section.LIST) {
-      hideSection(Section.THUMB);
+      // hide THUMB
+      shownSections &= ~Section.THUMB;
+      mostVisited.invalidate();
+    } else {
+      notifyLowerSectionForChange(section, false);
+      layoutLowerSections();
     }
 
-    shownSections |= section;
-    notifyLowerSectionForChange(section, false);
-
+    updateOptionMenu();
     mostVisited.updateDisplayMode();
-    layoutMostVisited();
-    updateOptionMenu();
-    layoutLowerSections();
+    mostVisited.layout();
   }
 }
 
 function hideSection(section) {
   if (section & shownSections) {
     shownSections &= ~section;
-    notifyLowerSectionForChange(section, true);
 
+    if (section & Section.THUMB || section & Section.LIST) {
+      mostVisited.invalidate();
+    }
+
+    if (section & Section.RECENT|| section & Section.TIPS) {
+      notifyLowerSectionForChange(section, true);
+      layoutLowerSections();
+    }
+
+    updateOptionMenu();
     mostVisited.updateDisplayMode();
-    layoutMostVisited();
-    updateOptionMenu();
-    layoutLowerSections();
+    mostVisited.layout();
   }
 }
 
 function notifyLowerSectionForChange(section, large) {
   // Notify recent and tips if they need to display more data.
   if (section == Section.RECENT || section == Section.TIPS) {
     // we are hiding one of them so if the other one is visible it is now
     // {@code large}.
     if (shownSections & Section.RECENT) {
       recentChangedSize(large);
@@ skipping 114 matching lines @@
 
   removeFromBlackList: function(url) {
     chrome.send('removeURLsFromMostVisitedBlacklist', [url]);
   },
 
   clearAllBlacklisted: function() {
     chrome.send('clearMostVisitedURLsBlacklist', []);
   },
 
   updateDisplayMode: function() {
+    if (!this.dirty_) {
+      return;
+    }
+
     var thumbCheckbox = $('thumb-checkbox');
     var listCheckbox = $('list-checkbox');
     var mostVisitedElement = $('most-visited');
 
     if (shownSections & Section.THUMB) {
       thumbCheckbox.checked = true;
       listCheckbox.checked = false;
       removeClass(mostVisitedElement, 'list');
     } else if (shownSections & Section.LIST) {
       thumbCheckbox.checked = false;
       listCheckbox.checked = true;
       addClass(mostVisitedElement, 'list');
     } else {
       thumbCheckbox.checked = false;
       listCheckbox.checked = false;
     }
 
     thumbCheckbox.title = localStrings.getString(
         shownSections & Section.THUMB ? 'hidethumbnails' : 'showthumbnails');
     listCheckbox.title = localStrings.getString(
         shownSections & Section.LIST ? 'hidelist' : 'showlist');
+  },
+
+  dirty_: false,
+
+  invalidate: function() {
+    this.dirty_ = true;
+  },
+
+  layout: function() {
+    if (!this.dirty_) {
+      return;
+    }
+    var d0 = Date.now();
+    var mostVisitedElement = $('most-visited');
+    var thumbnails = mostVisitedElement.children;
+
+    var small = useSmallGrid();
+
+    var cols = 4;
+    var rows = 2;
+    var marginWidth = 10;
+    var marginHeight = 7;
+    var borderWidth = 4;
+    var thumbWidth = small ? 150 : 212;
+    var thumbHeight = small ? 93 : 132;
+    var w = thumbWidth + 2 * borderWidth + 2 * marginWidth;
+    var h = thumbHeight + 40 + 2 * marginHeight;
+    var sumWidth = cols * w  - 2 * marginWidth;
+    var sumHeight = rows * h;
+    var opacity = 1;
+
+    if (shownSections & Section.LIST) {
+      w = (sumWidth + 2 * marginWidth) / 2;
+      h = 45;
+      rows = 4;
+      cols = 2;
+      sumHeight = rows * h;
+      addClass(mostVisitedElement, 'list');
+    } else if (shownSections & Section.THUMB) {
+      removeClass(mostVisitedElement, 'list');
+      } else {
+      sumHeight = 0;
+      opacity = 0;
+    }
+
+    mostVisitedElement.style.height = sumHeight + 'px';
+    mostVisitedElement.style.opacity = opacity;
+    // We set overflow to hidden so that the most visited element does not
+    // "leak" when we hide and show it.
+    if (!opacity) {
+      mostVisitedElement.style.overflow = 'hidden';
+    }
+
+    var rtl = document.documentElement.dir == 'rtl';
+
+    if (shownSections & Section.THUMB || shownSections & Section.LIST) {
+      for (var i = 0; i < thumbnails.length; i++) {
+        var t = thumbnails[i];
+
+        var row, col;
+        if (shownSections & Section.THUMB) {
+          row = Math.floor(i / cols);
+          col = i % cols;
+        } else {
+          col = Math.floor(i / rows);
+          row = i % rows;
+        }
+
+        if (shownSections & Section.THUMB) {
+          t.style.left = (rtl ?
+              sumWidth - col * w - thumbWidth - 2 * borderWidth :
+              col * w) + 'px';
+        } else {
+          t.style.left = (rtl ?
+              sumWidth - col * w - w + 2 * marginWidth :
+              col * w) + 'px';
+        }
+        t.style.top = row * h + 'px';
+
+        if (shownSections & Section.LIST) {
+          t.style.width = w - 2 * marginWidth + 'px';
+        } else {
+          t.style.width = '';
+        }
+      }
+    }
+
+    afterTransition(function() {
+      // Only set overflow to visible if the element is shown.
+      if (opacity) {
+        mostVisitedElement.style.overflow = '';
+      }
+    });
+
+    this.dirty_ = false;
+
+    logEvent('mostVisited.layout: ' + (Date.now() - d0));
   }
 };
 
 function recentChangedSize(large) {
   // TODO(arv): Implement
 }
 
 function tipsChangedSize(large) {
   // TODO(arv): Implement
 }
@@ skipping 51 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) {
+    mostVisited.layout();
     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 242 matching lines @@
   executeItem: function(item) {
     var section = Section[item.getAttribute('section')];
     var show = item.getAttribute('show') == 'true';
     if (show) {
       showSection(section);
     } else {
       hideSection(section);
     }
 
     this.hideMenu();
-
-    layoutLowerSections();
-    mostVisited.updateDisplayMode();
-    layoutMostVisited();
-
     saveShownSections();
   }
 };
 
 new OptionMenu($('option-button'), $('option-menu'));
 
 $('most-visited').addEventListener('click', function(e) {
   var target = e.target;
   if (hasClass(target, 'pin')) {
     mostVisited.togglePinned(mostVisited.getItem(target));
@@ skipping 76 matching lines @@
   menuEl.style.top = rect.top + bodyRect.top + rect.height + 'px';
 
 }
 
 $('thumb-checkbox').addEventListener('change', function(e) {
   if (e.target.checked) {
     showSection(Section.THUMB);
   } else {
     hideSection(Section.THUMB);
   }
-  mostVisited.updateDisplayMode();
-  layoutMostVisited();
   saveShownSections();
 });
 
 $('list-checkbox').addEventListener('change', function(e) {
-  var newValue = shownSections;
   if (e.target.checked) {
     showSection(Section.LIST);
   } else {
     hideSection(Section.LIST);
   }
-  mostVisited.updateDisplayMode();
-  layoutMostVisited();
   saveShownSections();
 });
 
 window.addEventListener('load', bind(logEvent, global, 'onload fired'));
 window.addEventListener('load', onDataLoaded);
 window.addEventListener('resize', handleWindowResize);
 document.addEventListener('DOMContentLoaded', bind(logEvent, global,
                                                    'domcontentloaded fired'));
 
 // DnD
@@ skipping 38 matching lines @@
     }
 
     this.currentOverItem = null;
   },
 
   handleDrop: function(e) {
     var dropTarget = mostVisited.getItem(e.target);
     if (this.canDropOnElement(dropTarget)) {
       dropTarget.style.zIndex = 1;
       mostVisited.swapPosition(this.dragItem, dropTarget);
-      layoutMostVisited();
+      mostVisited.invalidate();
+      mostVisited.layout();
       e.preventDefault();
       if (this.dragEndTimer) {
         window.clearTimeout(this.dragEndTimer);
         this.dragEndTimer = null;
       }
       afterTransition(function() {
         dropTarget.style.zIndex = '';
       });
     }
   },
 
   handleDragEnd: function(e) {
     // WebKit fires dragend before drop.
     var dragItem = this.dragItem;
     if (dragItem) {
       dragItem.style.pointerEvents = '';
       removeClass(dragItem, 'dragging');
 
       afterTransition(function() {
         // Delay resetting zIndex to let the animation finish.
         dragItem.style.zIndex = '';
         // Same for overflow.
         dragItem.parentNode.style.overflow = '';
       });
       var self = this;
       this.dragEndTimer = window.setTimeout(function() {
         // These things needto happen after the drop event.
-        layoutMostVisited();
+        mostVisited.invalidate();
+        mostVisited.layout();
         self.dragItem = null;
       }, 10);
 
     }
   },
 
   handleDrag: function(e) {
     var item = mostVisited.getItem(e.target);
     var rect = document.querySelector('#most-visited').getBoundingClientRect();
     item.style.pointerEvents = 'none';
@@ skipping 25 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();