NNTP: Make the window tooltip behave more like a real tooltip by

adding a hide delay and making sure we show the tooltip where the
mouse pointer is at the time of showing.

Also fix an issue where the theme css incorrectly made the tab and
window items look different than the download items.

BUG=16539

TEST=Download a file, close a tab, close a window and go to the new
tab page. There should be three links in the recent activities and
they should all have the same color and underline color. Hower over
the closed window entry and it should show a rich tooltip.

Review URL: http://codereview.chromium.org/159417

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@21750 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 46 insertions, 43 deletions

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 6cfcc3f..dc4df87 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -449,7 +449,8 @@ html[dir='rtl'] .item {
 /* Made to look like a tooltip using vista/win7 look and feel.
    TODO(arv): Replace with -webkit-appearance once issue 17371 is fixed
  */
-#window-menu {
+#window-tooltip {
+  color: #555;
   pointer-events: none;
   border: 1px solid rgb(118,118,118);
   -webkit-border-radius: 3px;
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index d0752e0..a5a5645 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -275,7 +275,7 @@ logEvent('log start');
 </div> <!-- main -->
 
 <div>
-  <div class="window-menu" id="window-menu">
+  <div class="window-menu" id="window-tooltip">
     <span class="item" jsselect="$this"
         jsvalues=".style.backgroundImage:'url(&quot;chrome://favicon/' + url +
             '&quot;)';
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 034d862..a852077 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -880,7 +880,7 @@ function OptionMenu(button, menu) {
 
 OptionMenu.prototype = {
   show: function() {
-    windowMenu.hide();
+    windowTooltip.hide();
 
     this.menu.style.display = 'block';
     this.button.focus();
@@ -1074,14 +1074,14 @@ function maybeReopenTab(e) {
   }
 }
 
-function maybeShowWindowMenu(e) {
+function maybeShowWindowTooltip(e) {
   var f = function(el) {
     return el.tabItems !== undefined;
   };
   var el = findAncestor(e.target, f);
   var relatedEl = findAncestor(e.relatedTarget, f);
   if (el && el != relatedEl) {
-    windowMenu.show(e, el, el.tabItems);
+    windowTooltip.handleMouseOver(e, el, el.tabItems);
   }
 }
 
@@ -1095,50 +1095,61 @@ recentActivitiesElement.addEventListener('click', maybeReopenTab);
 recentActivitiesElement.addEventListener('keydown',
                                          handleIfEnterKey(maybeReopenTab));
 
-recentActivitiesElement.addEventListener('mouseover', maybeShowWindowMenu);
-recentActivitiesElement.addEventListener('focus', maybeShowWindowMenu, true);
+recentActivitiesElement.addEventListener('mouseover', maybeShowWindowTooltip);
+recentActivitiesElement.addEventListener('focus', maybeShowWindowTooltip, true);
 
 /**
- * This object represents a window/tooltip representing a closed window. It is
+ * This object represents a 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.
+ * @param {Element} tooltipEl The element to use as the tooltip.
  * @constructor
  */
-function WindowMenu(menuEl) {
-  // TODO(arv): Rename WindowTooltip and make it behave even more like a
-  // tooltip.
-  this.menuEl = menuEl;
+function WindowTooltip(tooltipEl) {
+  this.tooltipEl = tooltipEl;
   this.boundHide_ = bind(this.hide, this);
   this.boundHandleMouseOut_ = bind(this.handleMouseOut, this);
 }
 
-WindowMenu.prototype = {
-  timer: 0,
-  show: function(e, linkEl, tabs) {
-    optionMenu.hide();
+WindowTooltip.trackMouseMove_ = function(e) {
+  WindowTooltip.clientX = e.clientX;
+  WindowTooltip.clientY = e.clientY;
+};
 
+WindowTooltip.prototype = {
+  timer: 0,
+  handleMouseOver: function(e, linkEl, tabs) {
+    document.addEventListener('mousemove', WindowTooltip.trackMouseMove_);
+    this.timer = window.setTimeout(bind(this.show, this, e.type, linkEl, tabs),
+                                   300);
+  },
+  show: function(type, linkEl, tabs) {
+    document.removeEventListener('mousemove', WindowTooltip.trackMouseMove_);
     clearTimeout(this.timer);
-    processData('#window-menu', tabs);
+
+    processData('#window-tooltip', tabs);
     var rect = linkEl.getBoundingClientRect();
     var bodyRect = document.body.getBoundingClientRect()
     var rtl = document.documentElement.dir == 'rtl';
 
-    this.menuEl.style.display = 'block';
+    this.tooltipEl.style.display = 'block';
+
     // 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 :
+    if (type == 'focus') {
+      this.tooltipEl.style.left = (rtl ?
+          rect.left + bodyRect.left + rect.width - this.tooltipEl.offsetWidth :
           rect.left + bodyRect.left) + 'px';
-      this.menuEl.style.top = rect.top + bodyRect.top + rect.height + 'px';
+      this.tooltipEl.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';
+      this.tooltipEl.style.left = bodyRect.left + (rtl ?
+          WindowTooltip.clientX - this.tooltipEl.offsetWidth :
+          WindowTooltip.clientX) + 'px';
+      // Offset like a tooltip
+      this.tooltipEl.style.top = 20 + WindowTooltip.clientY + bodyRect.top +
+                                 'px';
     }
 
-    if (e.type == 'focus') {
+    if (type == 'focus') {
       linkEl.onblur = this.boundHide_;
     } else { // mouseover
       linkEl.onmouseout = this.boundHandleMouseOut_;
@@ -1155,16 +1166,14 @@ WindowMenu.prototype = {
       this.hide();
     }
   },
-  hide: function(e) {
-    // Delay before hiding.
-    var self = this;
-    this.timer = setTimeout(function() {
-      self.menuEl.style.display  = 'none';
-    }, 100);
+  hide: function() {
+    window.clearTimeout(this.timer);
+    document.removeEventListener('mousemove', WindowTooltip.trackMouseMove_);
+    this.tooltipEl.style.display  = 'none';
   }
 };
 
-var windowMenu = new WindowMenu($('window-menu'));
+var windowTooltip = new WindowTooltip($('window-tooltip'));
 
 function getCheckboxHandler(section) {
   return function(e) {
@@ -1200,7 +1209,6 @@ document.addEventListener('DOMContentLoaded', bind(logEvent, global,
                                                    'domcontentloaded fired'));
 
 function hideAllMenus() {
-  windowMenu.hide();
   optionMenu.hide();
 }
 
diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css
index 7d1ffb8..0ad11c9 100644
--- a/chrome/browser/resources/new_tab_theme.css
+++ b/chrome/browser/resources/new_tab_theme.css
@@ -16,12 +16,6 @@ body {
 #main {
   background: url(chrome://theme/product_logo?$1) no-repeat 0 8px;
 }
-:visited,
-.link {
-  cursor: pointer;
-  text-decoration: underline;
-  color: $8;
-}
 .thumbnail-container,
 .list > .thumbnail-container > .title,
 .list .title > div,
@@ -65,4 +59,4 @@ body {
 }
 .tips-title {
   color: $$1;
-}
\ No newline at end of file
+}