NNTP: Merge the recent activities into one list and show more items...

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 76 matching lines @@
 
   gotMostVisited = true;
   onDataLoaded();
 }
 
 function downloadsList(data) {
   logEvent('received downloads');
 
   // We should only show complete downloads.
   data = data.filter(function(d) {
+    d.type = 'download';
+    d.timestamp = d.started;
     return d.state == 'COMPLETE';
   });
-  data.length = Math.min(data.length, 5);
-  processData('#download-items', data);
+
+  gotRecentItems(data, 'download');
 }
 
 function recentlyClosedTabs(data) {
   logEvent('received recently closed tabs');
-  data.length = Math.min(data.length, 5);
-  processData('#tab-items', data);
+
+  // We handle timestamp 0 as now
+  data.forEach(function(d) {
+    if (d.timestamp == 0) {
+      d.timestamp = Date.now();
+    }
+  });
+
+  gotRecentItems(data);
+}
+
+var recentItems = [];
+var recentItemKeys = {};
+
+function getRecentItemKey(d) {
+  // type == window does not have a URL
+  return d.type + (d.url || d.sessionId) + d.timestamp;
+}
+
+function gotRecentItems(data) {
+  // Add new items
+  for (var i = 0; i < data.length; i++) {
+    var d = data[i];
+    var key = getRecentItemKey(d);
+    if (!(key in recentItemKeys)) {
+      recentItems.push(d);
+      recentItemKeys[key] = true;
+    }
+  }
+
+  recentItems.sort(function(d1, d2) {
+    return d2.timestamp - d1.timestamp;
+  });
+
+  renderRecentItems();
+}
+
+function renderRecentItems() {
+  // When tips are shown we only show 10 items
+  var desiredCount = shownSections & Section.TIPS ? 10 : 20;
+  desiredCount -= 2; // Show all downloads and all history uses two rows.
+
+  processData('#recent-activities > .item-container',
+              recentItems.slice(0, desiredCount));
 }
 
 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) != (shownSections & Section.THUMB) ||
-        (mask & Section.LIST) != (shownSections & Section.LIST)) {
+    if ((mask & Section.THUMB) != (oldShownSections & Section.THUMB) ||
+        (mask & Section.LIST) != (oldShownSections & Section.LIST)) {
       mostVisited.invalidate();
     }
 
-    shownSections = mask;
+    if ((mask & Section.RECENT) != (oldShownSections & Section.RECENT)) {
+      notifyLowerSectionForChange(Section.RECENT);
+    }
+
+    if ((mask & Section.TIPS) != (oldShownSections & Section.TIPS)) {
+      notifyLowerSectionForChange(Section.TIPS);
+    }
+
     mostVisited.updateDisplayMode();
     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);
 }
 
-// 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));
   }
 }
 
 function getThumbnailClassName(data) {
   return 'thumbnail-container' +
       (data.pinned ? ' pinned' : '') +
       (data.filler ? ' filler' : '');
 }
 
@@ skipping 97 matching lines @@
     // THUMBS and LIST are mutually exclusive.
     if (section == Section.THUMB) {
       // hide LIST
       shownSections &= ~Section.LIST;
       mostVisited.invalidate();
     } else if (section == Section.LIST) {
       // hide THUMB
       shownSections &= ~Section.THUMB;
       mostVisited.invalidate();
     } else {
-      notifyLowerSectionForChange(section, false);
+      notifyLowerSectionForChange(section);
       layoutLowerSections();
     }
 
     updateOptionMenu();
     mostVisited.updateDisplayMode();
     mostVisited.layout();
   }
 }
 
 function hideSection(section) {
   if (section & shownSections) {
     shownSections &= ~section;
 
     if (section & Section.THUMB || section & Section.LIST) {
       mostVisited.invalidate();
     }
 
-    if (section & Section.RECENT|| section & Section.TIPS) {
-      notifyLowerSectionForChange(section, true);
+    if (section & Section.RECENT || section & Section.TIPS) {
+      notifyLowerSectionForChange(section);
       layoutLowerSections();
     }
 
     updateOptionMenu();
     mostVisited.updateDisplayMode();
     mostVisited.layout();
   }
 }
 
-function notifyLowerSectionForChange(section, large) {
+function notifyLowerSectionForChange(section) {
   // 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);
-    } else if (shownSections & Section.TIPS) {
-      tipsChangedSize(large);
+      recentChangedSize(!(shownSections & Section.TIPS));
+    }
+    if (shownSections & Section.TIPS) {
+      tipsChangedSize(!(shownSections & Section.RECENT));
     }
   }
 }
 
 var mostVisited = {
   getItem: function(el) {
     return findAncestorByClass(el, 'thumbnail-container');
   },
 
   getHref: function(el) {
@@ skipping 233 matching lines @@
       }
     });
 
     this.dirty_ = false;
 
     logEvent('mostVisited.layout: ' + (Date.now() - d0));
   }
 };
 
 function recentChangedSize(large) {
-  // TODO(arv): Implement
+  if (large) {
+    addClass($('recent-activities'), 'large');
+  } else {
+    removeClass($('recent-activities'), 'large');
+  }
+
+  renderRecentItems();
 }
 
 function tipsChangedSize(large) {
   // TODO(arv): Implement
 }
 
 // Recent activities
 
 function layoutLowerSections() {
   // This lower sections are inline blocks so all we need to do is to set the
@@ skipping 340 matching lines @@
 });
 
 function handleIfEnterKey(f) {
   return function(e) {
     if (e.keyIdentifier == 'Enter') {
       f(e);
     }
   };
 }
 
-$('downloads').addEventListener('click', maybeOpenFile);
-$('downloads').addEventListener('keydown', handleIfEnterKey(maybeOpenFile));
-
 function maybeOpenFile(e) {
   var el = findAncestor(e.target, function(el) {
     return el.fileId !== undefined;
   });
   if (el) {
     chrome.send('openFile', [String(el.fileId)]);
     e.preventDefault();
   }
 }
 
-var recentTabs = $('recent-tabs');
-recentTabs.addEventListener('click', maybeReopenTab);
-recentTabs.addEventListener('keydown', handleIfEnterKey(maybeReopenTab));
-
 function maybeReopenTab(e) {
   var el = findAncestor(e.target, function(el) {
     return el.sessionId !== undefined;
   });
   if (el) {
     chrome.send('reopenTab', [String(el.sessionId)]);
     e.preventDefault();
   }
 }
 
-recentTabs.addEventListener('mouseover', maybeShowWindowMenu);
-recentTabs.addEventListener('focus', maybeShowWindowMenu, true);
-
-
 function maybeShowWindowMenu(e) {
-  var el = findAncestor(e.target, function(el) {
+  var f = function(el) {
     return el.tabItems !== undefined;
-  });
-  if (el) {
+  };
+  var el = findAncestor(e.target, f);
+  var relatedEl = findAncestor(e.relatedTarget, f);
+  if (el && el != relatedEl) {
     windowMenu.show(e, el, el.tabItems);
   }
 }
 
+
+var recentActivitiesElement = $('recent-activities');
+recentActivitiesElement.addEventListener('click', maybeOpenFile);
+recentActivitiesElement.addEventListener('keydown',
+                                         handleIfEnterKey(maybeOpenFile));
+
+recentActivitiesElement.addEventListener('click', maybeReopenTab);
+recentActivitiesElement.addEventListener('keydown',
+                                         handleIfEnterKey(maybeReopenTab));
+
+recentActivitiesElement.addEventListener('mouseover', maybeShowWindowMenu);
+recentActivitiesElement.addEventListener('focus', maybeShowWindowMenu, true);
+
 /**
  * This object represents a window/tooltip representing a closed window. It is
  * shown when hovering over a closed window item or when the item is focused. It
  * gets hidden when blurred or when mousing out of the menu or the item.
  * @param {Element} menuEl The element to use as the menu.
  * @constructor
  */
 function WindowMenu(menuEl) {
+  // TODO(arv): Rename WindowTooltip and make it behave even more like a
+  // tooltip.
   this.menuEl = menuEl;
-  var self = this;
   this.boundHide_ = bind(this.hide, this);
-  menuEl.onmouseover = function() {
-    clearTimeout(self.timer);
-  };
-  menuEl.onmouseout = this.boundHide_;
+  this.boundHandleMouseOut_ = bind(this.handleMouseOut, this);
 }
 
 WindowMenu.prototype = {
   timer: 0,
   show: function(e, linkEl, tabs) {
     optionMenu.hide();
 
     clearTimeout(this.timer);
     processData('#window-menu', tabs);
     var rect = linkEl.getBoundingClientRect();
     var bodyRect = document.body.getBoundingClientRect()
     var rtl = document.documentElement.dir == 'rtl';
 
     this.menuEl.style.display = 'block';
-    this.menuEl.style.left = (rtl ?
-        rect.left + bodyRect.left + rect.width - this.menuEl.offsetWidth :
-        rect.left + bodyRect.left) + 'px';
-    this.menuEl.style.top = rect.top + bodyRect.top + rect.height + 'px';
+    // When focused show below, like a drop down menu.
+    if (e.type == 'focus') {
+      this.menuEl.style.left = (rtl ?
+          rect.left + bodyRect.left + rect.width - this.menuEl.offsetWidth :
+          rect.left + bodyRect.left) + 'px';
+      this.menuEl.style.top = rect.top + bodyRect.top + rect.height + 'px';
+    } else {
+      this.menuEl.style.left = bodyRect.left + (rtl ?
+          e.clientX - this.menuEl.offsetWidth :
+          e.clientX) + 'px';
+      this.menuEl.style.top = e.clientY + bodyRect.top + 'px';
+    }
 
     if (e.type == 'focus') {
       linkEl.onblur = this.boundHide_;
     } else { // mouseover
-      linkEl.onmouseout = this.boundHide_;
+      linkEl.onmouseout = this.boundHandleMouseOut_;
     }
   },
-  hide: function() {
+  handleMouseOut: function(e) {
+    // Don't hide when move to another item in the link.
+    var f = function(el) {
+      return el.tabItems !== undefined;
+    };
+    var el = findAncestor(e.target, f);
+    var relatedEl = findAncestor(e.relatedTarget, f);
+    if (el && el != relatedEl) {
+      this.hide();
+    }
+  },
+  hide: function(e) {
     // Delay before hiding.
     var self = this;
     this.timer = setTimeout(function() {
       self.menuEl.style.display  = 'none';
     }, 100);
   }
 };
 
 var windowMenu = new WindowMenu($('window-menu'));
 
@@ skipping 185 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();