Fix issue where the closed window menu got cut off.

Also, fix issue where the recent items could not be executed using the
keyboard.

BUG=15104, 15111

TEST=Open a new window with 5+ tabs and close it. Then go to the new
new tab page and mouseover the item "5" tabs". It should show the whole
menu and you should also be able to tab to it and pressing enter when
focused should reopen the window.

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

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

3 files changed, 84 insertions, 37 deletions

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index fe0f5b4..77e380b 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -470,19 +470,7 @@ html[dir='rtl'] .item {
   opacity: .9;
   z-index: 1;
   pointer-events: none;
-}
-
-.item:hover > .window-menu,
-.item:focus > .window-menu {
-  display: block;
-}
-
-.item:hover .window-menu .item,
-.item:focus .window-menu .item {
-  background-color: transparent;
-  text-decoration: none;
-  margin: 0;
-  font-size: 100%;
+  padding: 1px;
 }
 
 .hbox {
@@ -655,7 +643,6 @@ html[dir='rtl'] #option-menu {
 
 #option-menu > div {
   padding: 3px 8px;
-  margin: 1px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index 07ea352..307efc9 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -120,20 +120,10 @@ logEvent('log start');
                     jscontent="title"></a>
                 <div jsdisplay="type == 'window'"
                     class="item link window"
-                    jsvalues=".sessionId:sessionId"
+                    jsvalues=".sessionId:sessionId;
+                              .tabItems:tabs"
                     tabindex="0">
                   <span jscontent="formatTabsText($this.tabs.length)"></span>
-                  <div class="window-menu">
-                    <span jsselect="tabs">
-                      <span class="item"
-                          jsdisplay="type == 'tab'"
-                          jsvalues="title:title;
-                              .style.backgroundImage:'url(chrome://favicon/' +
-                                  url + ')';
-                              dir:direction;"
-                          jscontent="title"></span>
-                    </span>
-                  </div>
                 </div>
               </div>
             </div>
@@ -179,6 +169,15 @@ logEvent('log start');
 
 </div> <!-- main -->
 
+<div jsskip="true">
+  <div class="window-menu" id="window-menu">
+    <span class="item" jsselect="$this"
+        jsvalues=".style.backgroundImage:'url(chrome://favicon/' + url + ')';
+            dir:direction;"
+        jscontent="title"></span>
+  </div>
+</div>
+
 <script src="local_strings.js"></script>
 <script src="new_new_tab.js"></script>
 </html>
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 33c06af..9c04e09 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -28,11 +28,19 @@ function findAncestorByClass(el, className) {
   });
 }
 
-function findAncestor(el, predicate) {
-  while (el != null && !predicate(el)) {
-    el = el.parentNode;
+/**
+ * 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 el;
+  return last ? node : null;
 }
 
 // WebKit does not have Node.prototype.swapNode
@@ -714,25 +722,78 @@ $('most-visited').addEventListener('click', function(e) {
   }
 });
 
-$('downloads').addEventListener('click', function(e) {
-    var el = findAncestor(e.target, function(el) {
+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 && el.fileId) {
+  if (el) {
     chrome.send('openFile', [String(el.fileId)]);
     e.preventDefault();
   }
-});
+}
 
-$('recent-tabs').addEventListener('click', function(e) {
+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 && el.sessionId !== undefined) {
+  if (el) {
     chrome.send('reopenTab', [String(el.sessionId)]);
     e.preventDefault();
   }
-});
+}
+
+recentTabs.addEventListener('mouseover', maybeShowWindowMenu);
+recentTabs.addEventListener('focus', maybeShowWindowMenu, true);
+recentTabs.addEventListener('mouseout', maybeHideWindowMenu);
+recentTabs.addEventListener('blur', maybeHideWindowMenu, true);
+
+function maybeShowWindowMenu(e) {
+  var el = findAncestor(e.target, function(el) {
+    return el.tabItems !== undefined;
+  });
+  if (el) {
+    showWindowMenu(el, el.tabItems);
+  }
+}
+
+function maybeHideWindowMenu(e) {
+  var el = findAncestor(e.target, function(el) {
+    return el.tabItems !== undefined;
+  });
+  if (el) {
+    $('window-menu').style.display  = 'none';
+  }
+}
+
+function showWindowMenu(el, tabs) {
+  var menuEl = $('window-menu');
+  processData('#window-menu', tabs);
+  var rect = el.getBoundingClientRect();
+  var bodyRect = document.body.getBoundingClientRect()
+  var rtl = document.documentElement.dir == 'rtl';
+
+  menuEl.style.display = 'block';
+  menuEl.style.left = (rtl ?
+      rect.left + bodyRect.left + rect.width - menuEl.offsetWidth :
+      rect.left + bodyRect.left) + 'px';
+  menuEl.style.top = rect.top + bodyRect.top + rect.height + 'px';
+
+}
 
 $('thumb-checkbox').addEventListener('change', function(e) {
   if (e.target.checked) {