Merge 22567 - NNTP: Fix window tooltip so that it is not shown out of place....

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 887 matching lines @@
   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() {
-    windowTooltip.hide();
-
     this.menu.style.display = 'block';
     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);
   },
 
   hide: function() {
@@ skipping 217 matching lines @@
 }
 
 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.linkEl_ = linkEl;
+    if (e.type == 'mouseover') {
+      this.linkEl_.addEventListener('mousemove', WindowTooltip.trackMouseMove_);
+      this.linkEl_.addEventListener('mouseout', this.boundHandleMouseOut_);
+    } else { // focus
+      this.linkEl_.addEventListener('blur', this.boundHide_);
+    }
     this.timer = window.setTimeout(bind(this.show, this, e.type, linkEl, tabs),
                                    300);
   },
   show: function(type, linkEl, tabs) {
-    document.removeEventListener('mousemove', WindowTooltip.trackMouseMove_);
+    this.linkEl_.removeEventListener('mousemove',
+                                     WindowTooltip.trackMouseMove_);
     clearTimeout(this.timer);
 
     processData('#window-tooltip', tabs);
     var rect = linkEl.getBoundingClientRect();
     var bodyRect = document.body.getBoundingClientRect()
     var rtl = document.documentElement.dir == 'rtl';
 
     this.tooltipEl.style.display = 'block';
 
     // When focused show below, like a drop down menu.
     if (type == 'focus') {
       this.tooltipEl.style.left = (rtl ?
           rect.left + bodyRect.left + rect.width - this.tooltipEl.offsetWidth :
           rect.left + bodyRect.left) + 'px';
       this.tooltipEl.style.top = rect.top + bodyRect.top + rect.height + 'px';
     } else {
       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 (type == 'focus') {
-      linkEl.onblur = this.boundHide_;
-    } else { // mouseover
-      linkEl.onmouseout = this.boundHandleMouseOut_;
-    }
   },
   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() {
     window.clearTimeout(this.timer);
-    document.removeEventListener('mousemove', WindowTooltip.trackMouseMove_);
+    this.linkEl_.removeEventListener('mousemove',
+                                     WindowTooltip.trackMouseMove_);
+    this.linkEl_.removeEventListener('mouseout', this.boundHandleMouseOut_);
+    this.linkEl_.removeEventListener('blur', this.boundHide_);
+    this.linkEl_ = null;
+
     this.tooltipEl.style.display  = 'none';
   }
 };
 
 var windowTooltip = new WindowTooltip($('window-tooltip'));
 
 function getCheckboxHandler(section) {
   return function(e) {
     if (e.type == 'keydown') {
       if (e.keyIdentifier == 'Enter') {
@@ skipping 220 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();