Add support for extended tooltips.

As the user moves the mouse around. Check if the element has an xtitle
property. If it does, compare the scrollWidth and the clientWidth and
set the real title property as needed.

BUG=15769

TEST=Hover over items on the NNTP. Only items with ellipsis should show tooltips.

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

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

2 files changed, 18 insertions, 3 deletions

diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index 4a8e4eb..e120b4f 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -229,7 +229,7 @@ logEvent('log start');
                 <a class="item"
                     jsdisplay="type == 'tab'"
                     jsvalues="href:url;
-                        title:title;
+                        .xtitle:title;
                         .style.backgroundImage:'url(&quot;chrome://favicon/' +
                             url + '&quot;)';
                         dir:direction;
@@ -289,7 +289,7 @@ logEvent('log start');
         <div class="tips-container item-container">
           <a class="item" jsselect="$this"
               jsdisplay="url.length"
-              jsvalues="href:url;title:title"
+              jsvalues="href:url;.xtitle:title"
               jscontent="title"></a>
         </div>
       </div>
@@ -303,6 +303,7 @@ logEvent('log start');
     <span class="item" jsselect="$this"
         jsvalues=".style.backgroundImage:'url(&quot;chrome://favicon/' + url +
             '&quot;)';
+            .xtitle:title;
             dir:direction;"
         jscontent="title"></span>
   </div>
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index f3c5148..5e99ab1 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -191,7 +191,7 @@ function renderMostVisited(data) {
     t.querySelector('.thumbnail-wrapper').style.backgroundImage =
         'url("chrome://thumb/' + d.url + '")';
     var titleDiv = t.querySelector('.title > div');
-    titleDiv.title = titleDiv.textContent = d.title;
+    titleDiv.xtitle = titleDiv.textContent = d.title;
     titleDiv.style.backgroundImage = 'url("chrome://favicon/' + d.url + '")';
     titleDiv.dir = d.direction;
   }
@@ -1052,6 +1052,20 @@ window.addEventListener('keydown', function(e) {
   }
 }, true);
 
+// Tooltip for elements that have text that overflows.
+document.addEventListener('mouseover', function(e) {
+  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 {
+      el.title = '';
+    }
+  }
+});
+
 // DnD
 
 var dnd = {