A couple of NNTP bug fixes

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 161 matching lines @@
     var newClassName = getThumbnailClassName(d);
     if (oldClassName != newClassName) {
       t.className = newClassName;
     }
 
     // No need to continue if this is a filler.
     if (newClassName == 'thumbnail-container filler') {
       continue;
     }
 
-    t.title = d.title;
     t.href = d.url;
     t.querySelector('.pin').title = localStrings.getString(d.pinned ?
         'unpinthumbnailtooltip' : 'pinthumbnailtooltip');
     t.querySelector('.remove').title =
         localStrings.getString('removethumbnailtooltip');
 
     // There was some concern that a malformed malicious URL could cause an XSS
     // attack but setting style.backgroundImage = 'url(javascript:...)' does
     // not execute the JavaScript in WebKit.
     t.querySelector('.thumbnail-wrapper').style.backgroundImage =
-        'url(chrome://thumb/' + d.url + ')';
+        'url("chrome://thumb/' + d.url + '")';
     var titleDiv = t.querySelector('.title > div');
-    titleDiv.textContent = d.title;
-    titleDiv.style.backgroundImage = 'url(chrome://favicon/' + d.url + ')';
+    titleDiv.title = titleDiv.textContent = d.title;
+    titleDiv.style.backgroundImage = 'url("chrome://favicon/' + d.url + '")';
     titleDiv.dir = d.direction;
   }
 }
 
 /**
  * Calls chrome.send with a callback and restores the original afterwards.
  */
 function chromeSend(name, params, callbackName, callback) {
   var old = global[callbackName];
   global[callbackName] = function() {
@@ skipping 520 matching lines @@
  * This handles the option menu.
  * @param {Element} button The button element.
  * @param {Element} menu The menu element.
  * @constructor
  */
 function OptionMenu(button, menu) {
   this.button = button;
   this.menu = menu;
   this.button.onmousedown = bind(this.handleMouseDown, this);
   this.button.onkeydown = bind(this.handleKeyDown, this);
-  this.boundHideMenu_ = bind(this.hideMenu, 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 = {
-  showMenu: function() {
+  show: function() {
+    windowMenu.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);
-    window.addEventListener('blur', this.boundHideMenu_);
   },
 
-  hideMenu: function() {
+  hide: function() {
     this.menu.style.display = 'none';
     this.setSelectedIndex(-1);
 
     document.removeEventListener('focus', this.boundMaybeHide_, true);
     document.removeEventListener('mousedown', this.boundMaybeHide_, true);
-    window.removeEventListener('blur', this.boundHide_);
   },
 
-  isMenuShown: function() {
+  isShown: function() {
     return this.menu.style.display == 'block';
   },
 
   /**
    * Callback for document mousedown and focus. It checks if the user tried to
    * navigate to a different element on the page and if so hides the menu.
    * @param {Event} e The mouse or focus event.
    * @private
    */
   maybeHide_: function(e) {
     if (!this.menu.contains(e.target) && !this.button.contains(e.target)) {
-      this.hideMenu();
+      this.hide();
     }
   },
 
   handleMouseDown: function(e) {
-    if (this.isMenuShown()) {
-      this.hideMenu();
+    if (this.isShown()) {
+      this.hide();
     } else {
-      this.showMenu();
+      this.show();
     }
   },
 
   handleMouseOver: function(e) {
     var el = e.target;
     var index = Array.prototype.indexOf.call(this.menu.children, el);
     this.setSelectedIndex(index);
   },
 
   handleMouseOut: function(e) {
@@ skipping 26 matching lines @@
           break;
         }
       }
       if (item) {
         self.setSelectedIndex(i);
       }
     }
 
     switch (e.keyIdentifier) {
       case 'Down':
-        if (!this.isMenuShown()) {
-          this.showMenu();
+        if (!this.isShown()) {
+          this.show();
         }
         selectNextVisible(1);
+        e.preventDefault();
         break;
       case 'Up':
-        if (!this.isMenuShown()) {
-          this.showMenu();
+        if (!this.isShown()) {
+          this.show();
         }
         selectNextVisible(-1);
+        e.preventDefault();
         break;
       case 'Esc':
       case 'U+001B': // Maybe this is remote desktop playing a prank?
-        this.hideMenu();
+        this.hide();
         break;
       case 'Enter':
-        if (this.isMenuShown()) {
+      case 'U+0020': // Space
+        if (this.isShown()) {
           if (item) {
             this.executeItem(item);
+          } else {
+            this.hide();
           }
         } else {
-          this.showMenu();
+          this.show();
         }
+        e.preventDefault();
         break;
     }
   },
 
   selectedIndex_: -1,
   setSelectedIndex: function(i) {
     if (i != this.selectedIndex_) {
       var items = this.menu.children;
       var oldItem = items[this.selectedIndex_];
       if (oldItem) {
@@ skipping 13 matching lines @@
 
   executeItem: function(item) {
     var section = Section[item.getAttribute('section')];
     var show = item.getAttribute('show') == 'true';
     if (show) {
       showSection(section);
     } else {
       hideSection(section);
     }
 
-    this.hideMenu();
+    this.hide();
     saveShownSections();
   }
 };
 
-new OptionMenu($('option-button'), $('option-menu'));
+var optionMenu = new OptionMenu($('option-button'), $('option-menu'));
 
 $('most-visited').addEventListener('click', function(e) {
   var target = e.target;
   if (hasClass(target, 'pin')) {
     mostVisited.togglePinned(mostVisited.getItem(target));
     e.preventDefault();
   } else if (hasClass(target, 'remove')) {
     mostVisited.blacklist(mostVisited.getItem(target));
     e.preventDefault();
   }
@@ skipping 29 matching lines @@
     return 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);
+    windowMenu.show(e, el, el.tabItems);
   }
 }
 
-function maybeHideWindowMenu(e) {
-  var el = findAncestor(e.target, function(el) {
-    return el.tabItems !== undefined;
-  });
-  if (el) {
-    $('window-menu').style.display  = 'none';
+/**
+ * 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) {
+  this.menuEl = menuEl;
+  var self = this;
+  this.boundHide_ = bind(this.hide, this);
+  menuEl.onmouseover = function() {
+    clearTimeout(self.timer);
+  };
+  menuEl.onmouseout = this.boundHide_;
+}
+
+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';
+
+    if (e.type == 'focus') {
+      linkEl.onblur = this.boundHide_;
+    } else { // mouseover
+      linkEl.onmouseout = this.boundHide_;
+    }
+  },
+  hide: function() {
+    // Delay before hiding.
+    var self = this;
+    this.timer = setTimeout(function() {
+      self.menuEl.style.display  = 'none';
+    }, 100);
+  }
+};
+
+var windowMenu = new WindowMenu($('window-menu'));
+
+function getCheckboxHandler(section) {
+  return function(e) {
+    if (e.type == 'keydown') {
+      if (e.keyIdentifier == 'Enter') {
+        e.target.checked = !e.target.checked;
+      } else {
+        return;
+      }
+    }
+    if (e.target.checked) {
+      showSection(section);
+    } else {
+      hideSection(section);
+    }
+    saveShownSections();
   }
 }
 
-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) {
-    showSection(Section.THUMB);
-  } else {
-    hideSection(Section.THUMB);
-  }
-  saveShownSections();
-});
-
-$('list-checkbox').addEventListener('change', function(e) {
-  if (e.target.checked) {
-    showSection(Section.LIST);
-  } else {
-    hideSection(Section.LIST);
-  }
-  saveShownSections();
-});
+$('thumb-checkbox').addEventListener('change',
+                                     getCheckboxHandler(Section.THUMB));
+$('thumb-checkbox').addEventListener('keydown',
+                                     getCheckboxHandler(Section.THUMB));
+$('list-checkbox').addEventListener('change',
+                                    getCheckboxHandler(Section.LIST));
+$('list-checkbox').addEventListener('keydown',
+                                    getCheckboxHandler(Section.LIST));
 
 window.addEventListener('load', bind(logEvent, global, 'onload fired'));
 window.addEventListener('load', onDataLoaded);
 window.addEventListener('resize', handleWindowResize);
 document.addEventListener('DOMContentLoaded', bind(logEvent, global,
                                                    'domcontentloaded fired'));
 
+function hideAllMenus() {
+  windowMenu.hide();
+  optionMenu.hide();
+}
+
+window.addEventListener('blur', hideAllMenus);
+window.addEventListener('keydown', function(e) {
+  if (e.keyIdentifier == 'Alt' || e.keyIdentifier == 'Meta') {
+    hideAllMenus();
+  }
+}, true);
+
 // DnD
 
 var dnd = {
   currentOverItem: null,
   dragItem: null,
   startX: 0,
   startY: 0,
   startScreenX: 0,
   startScreenY: 0,
   dragEndTimer: null,
@@ skipping 105 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();