NTP - Refactor the most visited code to uncouple it from the rest of the NTP....

chrome/browser/resources/new_new_tab.js

 // Copyright (c) 2010 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// Helpers
+var loading = true;
 
-function findAncestorByClass(el, className) {
-  return findAncestor(el, function(el) {
-    return hasClass(el, className);
-  });
+function updateSimpleSection(id, section) {
+  if (shownSections & section)
+    $(id).classList.remove('hidden');
+  else
+    $(id).classList.add('hidden');
 }
 
-/**
- * Return the first ancestor for which the {@code predicate} returns true.
- * @param {Node} node The node to check.
- * @param {function(Node) : boolean} predicate The function that tests the
- *     nodes.
- * @return {Node} The found ancestor or null if not found.
- */
-function findAncestor(node, predicate) {
-  var last = false;
-  while (node != null && !(last = predicate(node))) {
-    node = node.parentNode;
-  }
-  return last ? node : null;
-}
-
-// WebKit does not have Node.prototype.swapNode
-// https://bugs.webkit.org/show_bug.cgi?id=26525
-function swapDomNodes(a, b) {
-  var afterA = a.nextSibling;
-  if (afterA == b) {
-    swapDomNodes(b, a);
-    return;
-  }
-  var aParent = a.parentNode;
-  b.parentNode.replaceChild(a, b);
-  aParent.insertBefore(b, afterA);
-}
-
-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);
-  }
-}
-
-const IS_MAC = /$Mac/.test(navigator.platform);
-
-var loading = true;
-
 function getAppsCallback(data) {
+  logEvent('recieved apps');
   var appsSection = $('apps-section');
   var debugSection = $('debug');
   appsSection.innerHTML = '';
 
   data.forEach(function(app) {
     appsSection.appendChild(apps.createElement(app));
   });
 
   // TODO(aa): Figure out what to do with the debug mode when we turn apps on
   // for everyone.
   if (data.length) {
-    removeClass(appsSection, 'disabled');
-    removeClass(debugSection, 'disabled');
+    appsSection.classList.remove('disabled');
+    debugSection.classList.remove('disabled');
   } else {
-    addClass(appsSection, 'disabled');
-    addClass(debugSection, 'disabled');
+    appsSection.classList.add('disabled');
+    debugSection.classList.add('disabled');
   }
 }
 
 var apps = {
   /**
    * @this {!HTMLAnchorElement}
    */
   handleClick_: function() {
     var launchType = '';
     var inputElements = document.querySelectorAll(
@@ skipping 108 matching lines @@
     el.dir = data.direction;
     el.textContent = data.title;
   }
   el.sessionId = data.sessionId;
   el.xtitle = data.title;
   var wrapperEl = document.createElement('span');
   wrapperEl.appendChild(el);
   return wrapperEl;
 }
 
-function onShownSections(mask) {
-  logEvent('received shown sections');
-  if (mask != shownSections) {
-    var oldShownSections = shownSections;
-    shownSections = mask;
-
-    // Only invalidate most visited if needed.
-    if ((mask & Section.THUMB) != (oldShownSections & Section.THUMB)) {
-      mostVisited.invalidate();
-    }
-
-    mostVisited.updateDisplayMode();
-    renderRecentlyClosed();
-  }
-}
-
 function saveShownSections() {
   chrome.send('setShownSections', [String(shownSections)]);
 }
 
-function url(s) {
-  // http://www.w3.org/TR/css3-values/#uris
-  // Parentheses, commas, whitespace characters, single quotes (') and double
-  // quotes (") appearing in a URI must be escaped with a backslash
-  var s2 = s.replace(/(\(|\)|\,|\s|\'|\"|\\)/g, '\\$1');
-  // WebKit has a bug when it comes to URLs that end with \
-  // https://bugs.webkit.org/show_bug.cgi?id=28885
-  if (/\\\\$/.test(s2)) {
-    // Add a space to work around the WebKit bug.
-    s2 += ' ';
-  }
-  return 'url("' + s2 + '")';
-}
-
-/**
- * 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
-    global[callbackName] = old;
-
-    var args = Array.prototype.slice.call(arguments);
-    return callback.apply(global, args);
-  };
-  chrome.send(name, params);
-}
-
 var LayoutMode = {
   SMALL: 1,
   NORMAL: 2
 };
 
 var layoutMode = useSmallGrid() ? LayoutMode.SMALL : LayoutMode.NORMAL;
 
 function handleWindowResize() {
   if (window.innerWidth < 10) {
     // We're probably a background tab, so don't do anything.
     return;
   }
 
   var oldLayoutMode = layoutMode;
-  layoutMode = useSmallGrid() ? LayoutMode.SMALL : LayoutMode.NORMAL
+  var b = useSmallGrid();
+  layoutMode = b ? LayoutMode.SMALL : LayoutMode.NORMAL
 
   if (layoutMode != oldLayoutMode){
-    mostVisited.invalidate();
+    mostVisited.useSmallGrid = b;
     mostVisited.layout();
     renderRecentlyClosed();
   }
 }
 
+window.addEventListener('resize', handleWindowResize);
+
+var sectionToElementMap;
+function getSectionElement(section) {
+  if (!sectionToElementMap) {
+    sectionToElementMap = {};
+    for (var key in Section) {
+      sectionToElementMap[Section[key]] =
+          document.querySelector('.section[section=' + key + ']');
+    }
+  }
+  return sectionToElementMap[section];
+}
+
 function showSection(section) {
   if (!(section & shownSections)) {
     shownSections |= section;
 
     switch (section) {
       case Section.THUMB:
-        mostVisited.invalidate();
-        mostVisited.updateDisplayMode();
+        mostVisited.visible = true;
         mostVisited.layout();
         break;
       case Section.RECENT:
         renderRecentlyClosed();
         break;
-      case Section.TIPS:
-        removeClass($('tip-line'), 'hidden');
-        break;
-      case Section.DEBUG:
-        removeClass($('debug'), 'hidden');
-        break;
     }
+
+    getSectionElement(section).classList.remove('hidden');
   }
 }
 
 function hideSection(section) {
   if (section & shownSections) {
     shownSections &= ~section;
 
     switch (section) {
       case Section.THUMB:
-        mostVisited.invalidate();
-        mostVisited.updateDisplayMode();
+        mostVisited.visible = false;
         mostVisited.layout();
         break;
       case Section.RECENT:
         renderRecentlyClosed();
         break;
-      case Section.TIPS:
-        addClass($('tip-line'), 'hidden');
-        break;
-      case Section.DEBUG:
-        addClass($('debug'), 'hidden');
-        break;
     }
+
+    getSectionElement(section).classList.add('hidden');
   }
 }
 
 // Recently closed
 
 function layoutRecentlyClosed() {
   var recentShown = shownSections & Section.RECENT;
-  updateSimpleSection('recently-closed', Section.RECENT);
 
   if (recentShown) {
     var recentElement = $('recently-closed');
     var style = recentElement.style;
     // We cannot use clientWidth here since the width has a transition.
     var spacing = 20;
     var headerEl = recentElement.firstElementChild;
     var navEl = recentElement.lastElementChild.lastElementChild;
     var navWidth = navEl.offsetWidth;
     // Subtract 10 for the padding
@@ skipping 102 matching lines @@
  * Returns the text used for a recently closed window.
  * @param {number} numTabs Number of tabs in the window.
  * @return {string} The text to use.
  */
 function formatTabsText(numTabs) {
   if (numTabs == 1)
     return localStrings.getString('closedwindowsingle');
   return localStrings.getStringF('closedwindowmultiple', numTabs);
 }
 
-/**
- * We need both most visited and the shown sections to be considered loaded.
- * @return {boolean}
- */
-function onDataLoaded() {
-  if (gotMostVisited) {
-    mostVisited.layout();
-    loading = false;
-    // Remove class name in a timeout so that changes done in this JS thread are
-    // not animated.
-    window.setTimeout(function() {
-      ensureSmallGridCorrect();
-      removeClass(document.body, 'loading');
-    }, 1);
-  }
-}
-
 // Theme related
 
 function themeChanged() {
   $('themecss').href = 'chrome://theme/css/newtab.css?' + Date.now();
   updateAttribution();
 }
 
 function updateAttribution() {
   $('attribution-img').src = 'chrome://theme/theme_ntp_attribution?' +
       Date.now();
@@ skipping 57 matching lines @@
 
 var notificationTimeout;
 
 function showNotification(text, actionText, opt_f, opt_delay) {
   var notificationElement = $('notification');
   var f = opt_f || function() {};
   var delay = opt_delay || 10000;
 
   function show() {
     window.clearTimeout(notificationTimeout);
-    addClass(notificationElement, 'show');
-    addClass(document.body, 'notification-shown');
+    notificationElement.classList.add('show');
+    document.body.classList.add('notification-shown');
   }
 
   function delayedHide() {
     notificationTimeout = window.setTimeout(hideNotification, delay);
   }
 
   function doAction() {
     f();
     hideNotification();
   }
 
   // Remove any possible first-run trails.
-  removeClass(notification, 'first-run');
+  notification.classList.remove('first-run');
 
   var actionLink = notificationElement.querySelector('.link-color');
   notificationElement.firstElementChild.textContent = text;
   actionLink.textContent = actionText;
 
   actionLink.onclick = doAction;
   actionLink.onkeydown = handleIfEnterKey(doAction);
   notificationElement.onmouseover = show;
   notificationElement.onmouseout = delayedHide;
   actionLink.onfocus = show;
   actionLink.onblur = delayedHide;
   // Enable tabbing to the link now that it is shown.
   actionLink.tabIndex = 0;
 
   show();
   delayedHide();
 }
 
 /**
  * Hides the notifier.
  */
 function hideNotification() {
   var notificationElement = $('notification');
-  removeClass(notificationElement, 'show');
-  removeClass(document.body, 'notification-shown');
+  notificationElement.classList.remove('show');
+  document.body.classList.remove('notification-shown');
   var actionLink = notificationElement.querySelector('.link-color');
   // Prevent tabbing to the hidden link.
   actionLink.tabIndex = -1;
   // Setting tabIndex to -1 only prevents future tabbing to it. If, however, the
   // user switches window or a tab and then moves back to this tab the element
   // may gain focus. We therefore make sure that we blur the element so that the
   // element focus is not restored when coming back to this window.
   actionLink.blur();
 }
 
 function showFirstRunNotification() {
   showNotification(localStrings.getString('firstrunnotification'),
                    localStrings.getString('closefirstrunnotification'),
                    null, 30000);
   var notificationElement = $('notification');
-  addClass(notification, 'first-run');
+  notification.classList.add('first-run');
 }
 
 /**
  * This handles the option menu.
  * @param {Element} button The button element.
  * @param {Element} menu The menu element.
  * @constructor
  */
 function OptionMenu(button, menu) {
   this.button = button;
   this.menu = menu;
   this.button.onmousedown = bind(this.handleMouseDown, this);
   this.button.onkeydown = bind(this.handleKeyDown, this);
   this.boundHideMenu_ = bind(this.hide, this);
   this.boundMaybeHide_ = bind(this.maybeHide_, this);
   this.menu.onmouseover = bind(this.handleMouseOver, this);
   this.menu.onmouseout = bind(this.handleMouseOut, this);
   this.menu.onmouseup = bind(this.handleMouseUp, this);
 }
 
 OptionMenu.prototype = {
   show: function() {
     updateOptionMenu();
     this.positionMenu_();
     this.menu.style.display = 'block';
-    addClass(this.button, 'open');
+    this.button.classList.add('open');
     this.button.focus();
 
     // Listen to document and window events so that we hide the menu when the
     // user clicks outside the menu or tabs away or the whole window is blurred.
     document.addEventListener('focus', this.boundMaybeHide_, true);
     document.addEventListener('mousedown', this.boundMaybeHide_, true);
   },
 
   positionMenu_: function() {
     this.menu.style.top = this.button.getBoundingClientRect().bottom + 'px';
   },
 
   hide: function() {
     this.menu.style.display = 'none';
-    removeClass(this.button, 'open');
+    this.button.classList.remove('open');
     this.setSelectedIndex(-1);
 
     document.removeEventListener('focus', this.boundMaybeHide_, true);
     document.removeEventListener('mousedown', this.boundMaybeHide_, true);
   },
 
   isShown: function() {
     return this.menu.style.display == 'block';
   },
 
@@ skipping 315 matching lines @@
       span.textContent = tab.title;
       tooltip.appendChild(span);
     });
   }
 };
 
 var windowTooltip = new WindowTooltip($('window-tooltip'));
 
 window.addEventListener('load', bind(logEvent, global, 'Tab.NewTabOnload',
                                      true));
-window.addEventListener('load', onDataLoaded);
 
 window.addEventListener('resize', handleWindowResize);
 document.addEventListener('DOMContentLoaded',
     bind(logEvent, global, 'Tab.NewTabDOMContentLoaded', true));
 
 // Whether or not we should send the initial 'GetSyncMessage' to the backend
 // depends on the value of the attribue 'syncispresent' which the backend sets
 // to indicate if there is code in the backend which is capable of processing
 // this message. This attribute is loaded by the JSTemplate and therefore we
 // must make sure we check the attribute after the DOM is loaded.
@@ skipping 33 matching lines @@
 window.addEventListener('keydown', function(e) {
   if (e.keyIdentifier == 'Alt' || e.keyIdentifier == 'Meta') {
     hideAllMenus();
   }
 }, true);
 
 // Tooltip for elements that have text that overflows.
 document.addEventListener('mouseover', function(e) {
   // We don't want to do this while we are dragging because it makes things very
   // janky
-  if (dnd.dragItem) {
+  if (mostVisited.isDragging()) {
     return;
   }
 
   var el = findAncestor(e.target, function(el) {
     return el.xtitle;
   });
   if (el && el.xtitle != el.title) {
     if (el.scrollWidth > el.clientWidth) {
       el.title = el.xtitle;
     } else {
@@ skipping 21 matching lines @@
   while (el.hasChildNodes()) {
     span.appendChild(el.firstChild);
   }
   el.appendChild(span);
 }
 
 updateAttribution();
 
 // Closes the promo line when close button is clicked.
 $('promo-close').onclick = function (e) {
-  addClass($('promo-line'), 'hidden');
+  $('promo-line').classList.add('hidden');
   chrome.send('stopPromoLineMessage');
   e.preventDefault();
 };
 
 // Set bookmark sync button to start bookmark sync process on click; also set
 // link underline colors correctly.
 function setUpPromoMessage() {
   var syncButton = document.querySelector('#promo-message button');
   syncButton.className = 'sync-button link';
   syncButton.onclick = syncSectionLinkClicked;
   fixLinkUnderlines($('promo-message'));
 }
+
+var mostVisited = new MostVisited($('most-visited'),
+                                  useSmallGrid(),
+                                  shownSections & Section.THUMB);
+
+function mostVisitedPages(data, firstRun) {
+  logEvent('received most visited pages');
+
+  mostVisited.data = data;
+  mostVisited.layout();
+
+  loading = false;
+
+  // Remove class name in a timeout so that changes done in this JS thread are
+  // not animated.
+  window.setTimeout(function() {
+    mostVisited.ensureSmallGridCorrect();
+    document.body.classList.remove('loading');
+  }, 1);
+
+  // Only show the first run notification if first run.
+  if (firstRun) {
+    showFirstRunNotification();
+  }
+}
+
+